index.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { TieredMenu } from 'primereact/tieredmenu';
import SchedulingUnitList from './SchedulingUnitList';
import PageHeader from '../../layout/components/PageHeader';
import { CustomDialog } from '../../layout/components/CustomDialog';
import AuthUtil from '../../utils/auth.util';
import AuthStore from '../../authenticate/auth.store';

export class Scheduling extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scheduleunit: [],
            schedule_unit_task: [],
            isLoading: false,
            redirect: '',
            dialog: { header: 'Confirm', detail: 'Do you want to create blueprints for the selected drafts?' },
            dialogVisible: false,
            userrole: AuthStore.getState()
        };
        this.access_dined_message = "Don't have permission";
        this.optionsMenu = React.createRef();
        this.menuOptions = [{ label: 'Add Scheduling Set', icon: "fa fa-", command: () => { this.selectOptionMenu('Add-SU-Set') } }];
        this.showOptionMenu = this.showOptionMenu.bind(this);
        this.selectOptionMenu = this.selectOptionMenu.bind(this);
        this.closeDialog = this.closeDialog.bind(this);
        this.init = this.init.bind(this);
    }

     componentDidMount() {
        this.init();
     }

    async init() {
        const permission = await AuthUtil.getUserRolePermission();
        this.setState({ userrole: permission })
    }

    /**
     * Callback function to close the dialog prompted.
     */
    closeDialog() {
        this.setState({ dialogVisible: false });
    }

    showOptionMenu(event) {
        this.optionsMenu.toggle(event);
    }

    async selectOptionMenu(menuName) {

        if(menuName=='Add-SU-Set') {
            this.setState({ redirect: `/schedulingset/schedulingunit/create` });
        }
    }
    gotoSingleCreate = () => {

        this.props.history.push("/schedulingunit/create");

    }

    gotoMultiCreate = () => {

        this.props.history.push("/schedulingset/schedulingunit/create");

    }



    render() {
        return (
            <>
                <TieredMenu className="app-header-menu" model={this.menuOptions} popup ref={el => this.optionsMenu = el}  />
                <PageHeader location={this.props.location} title={'Scheduling Unit - List'} className="defaultpageHeader"
                    actions={[
                        
                        {
                            icon: 'pi-plus',
                            type: 'buttonv2',
                            title: this.state.userrole.userRolePermission?.scheduleunit?.create ? 'Add New Scheduling Unit' : this.access_dined_message,
                            disabled: this.state.userrole.userRolePermission?.scheduleunit ? !this.state.userrole.userRolePermission.scheduleunit.create : true,
                            actOn: 'click', props: { callback: this.gotoSingleCreate }
                        }
                        ,
                        {
                            icon: 'pi-table',
                            type: 'buttonv2',
                            title: this.state.userrole.userRolePermission?.scheduleunit?.excelview ? 'Add Scheduling Set' : this.access_dined_message,
                            disabled: this.state.userrole.userRolePermission?.scheduleunit ? !this.state.userrole.userRolePermission.scheduleunit.excelview : true,
                            actOn: 'click', props: { callback: this.gotoMultiCreate }
                        }
                    ]} />
                {this.state.scheduleunit &&
                    <SchedulingUnitList allowRowSelection={true} ref={suList => { this.suList = suList }} />}
                <CustomDialog type="confirmation" visible={this.state.dialogVisible}
                    header={this.state.dialog.header} message={this.state.dialog.detail} actions={this.state.dialog.actions}
                    content={this.state.dialog.content} width={this.state.dialog.width} showIcon={this.state.dialog.showIcon}
                    onClose={this.closeDialog} onCancel={this.closeDialog} onSubmit={this.state.dialog.onSubmit} />
            </>

        );
    }
}

Scheduling.propTypes = {
  location: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
}
export default Scheduling;