text: import React, { Component } from 'react';
  
  //import Breadcrumb
  import CustomBreadcrumb from '../../components/Breadcrumb/CustomBreadcrumb';
  
  //shopify
  import enTranslations from '@shopify/polaris/locales/en.json';
  import { AppProvider, Card, DataTable, Button, Select, Stack, Page,Checkbox } from '@shopify/polaris';
  
  //axios
  import axiosInstance from '../../config/axiosInstance';
  import { ADDROLE, ROLELIST, ROLENAMELIST } from '../../config/apiConstant';
  import { COLUMNS_KEY, RoleColumns } from '../../config/dataTableSetting';
  
  
  // Import App helper
  import { columnsToRows } from "../../helper/appHelper";
  
  //import Toster
  import Toaster from "../../components/Toaster";
  
  
  // Import DataTable Properties
  import SkeletonDataTable from "../../components/DataTable/SkeletonDataTable";
  import DataTableEmptyState from "../../components/DataTable/DataTableEmptyState";
  
  
  class RoleManagement extends Component {
      constructor(props) {
          super(props);
          this.state = {
              roleListOption: [],
  
              //request data
              role_id: null,
              permision: [],
              permissionCheck: {},
              tableRows: [],
              roleOption: [],
  
              //Toaster Properties
              toastToggal: false,
              setToastObj: null,
  
              pageLoading: true,
              btnloding: false,
          }
      }
  
      //component did mount 
      componentDidMount() {
          document.title = "role-management";
          this.getAllRoleList();
          this.getRollList();
      }
  
      
      //role list
      getRollList = async () => {
          try {
              const response = await axiosInstance(ROLENAMELIST);
              let roleArr = [];
  
              response.data.data.map((role, index) => {
                  roleArr.push({ label: role.name, value: role.id });
              })
  
              this.setState({ roleOption: roleArr });
          } catch (error) { }
      }
  
  
      //get All Role List
      getAllRoleList = async () => {
          try {
              const response = await axiosInstance(ROLELIST);
              if (response) {
                  const RoleList = response.data.data;
                  let tableRows = [];
                  //Check Array Count and Set Data
                  if (!window.cn(RoleList) && RoleList.length > 0) {
                      //Actual Rows
                      RoleList.forEach(function (item, index) {
                          const seprate = item.permissions.split(',');
                          const row = [
                              index + 1,
                              !window.cn(item.rolename) ? item.rolename.name :"",
                              <ul>{seprate.map((word) => <li>{word}</li>)}</ul>,
                              <Button primary onClick={() => this.editRole(item)}>Edit</Button>
                          ];
                          tableRows.push(row);
                      }, this);
                  }
  
                  this.setState({ tableRows: tableRows, pageLoading: false, toastToggal: false })
              }
          } catch (error) { }
      }
  
      //edit role
      editRole = (data) => {
  
          const { role_id, permissions } = data;
          this.setState({ role_id: role_id })
  
          const seprateString = permissions.split(',');
          const { permissionCheck } = this.state;
  
          let seprateStringwords = {};
  
          seprateString.map((word) => {
              seprateStringwords = { ...seprateStringwords, [word]: true }
          })
  
          this.setState({ permissionCheck: { ...permissionCheck, ...seprateStringwords } });
      }
  
  
      //handle change 
      handleChange = (value) => {
          this.setState({ role_id: value });
      }
  
      //handle check
      handleCheck = (name, value) => {
  
          const { permissionCheck } = this.state;
  
          this.setState({ permissionCheck: { ...permissionCheck, [name]: value } })
      }
  
      //addRole
  
      addRole = async () => {
          try {
              const { permissionCheck, role_id } = this.state;
              this.setState({ btnloding: true });
  
              let comaString = "";
              let responseString = "";
              for (var property in permissionCheck) {
                  if (permissionCheck[property] === true) {
                      comaString += property + ","
                  }
              }
              responseString = comaString.slice(0, -1);
  
              const requestData = {
                  role_id: parseInt(role_id),
                  permissions: responseString,
              }
  
              const response = await axiosInstance.post(ADDROLE, requestData);
  
              //Spinner False
              this.setState({ btnloding: false });
  
              //Request and call functions and modal state update
              let requestObj = {};
              requestObj.message = response.data.success;
              requestObj.error = false;
  
              //Call setToast 
              this.setToast(requestObj);
  
          } catch (error) {
              if (error.response) {
                  //Spinner False
                  this.setState({ addBtnSpinner: false, editId: null, btnTextTitle: "Add" });
                  let requestObj = {};
                  requestObj.message = error.response.data.message;
                  requestObj.error = true;
  
                  //Call setToast 
                  this.setToast(requestObj);
              }
          }
      }
  
  
      //Set Toast
      setToast = (requestObj) => {
          this.setState({ setToastObj: requestObj, toastToggal: true });
          //Check status and load data
          if (!requestObj.error) {
              this.clearAll();
              this.getAllRoleList();
          }
      }
  
      //Dismiss Close Toast
      closeToast = () => {
          this.setState({ toastToggal: false });
      }
  
      clearAll = () => {
          this.setState({ role_id: null, permissionCheck: {} })
      }
  
  
      render() {
  
          const { role_id, btnloding, permissionCheck, pageLoading, tableRows,toastToggal,setToastObj,roleOption } = this.state;
          return (
              <>
                  <div className="page-content">
                      {/* -- Main content -- */}
                      <div className="content-wrapper">
                          {/* breadcrumb */}
                          {console.log(permissionCheck)}
                          <CustomBreadcrumb name={"Role Management"} />
                          <AppProvider i18n={enTranslations}>
                              <Page title="Role Management" fullWidth>
                                  <Card className="mt-3">
                                      <Card.Section>
                                          <div className='row'>
                                              <div className='col-4'>
                                                  <Select
                                                      label="Role"
                                                      options={roleOption}
                                                      defaultValue={Number(role_id)}
                                                      onChange={(value) => this.handleChange(value)}
                                                      value={Number(role_id)}
                                                      placeholder="Select Role"
                                                  />
                                              </div>
                                          </div>
                                      </Card.Section>
                                      <Card.Section>
                                          <Stack spacing="loose">
                                              <Checkbox
                                                  label="Dashboard"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.Dashboard : false}
                                                  onChange={(value) => this.handleCheck("Dashboard", value)}
                                              />
                                              <Checkbox
                                                  label="Appllication"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.Application : false}
                                                  onChange={(value) => this.handleCheck("Application", value)}
                                              />
                                              <Checkbox
                                                  label="Scrutiny"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.Scrutiny : false}
                                                  onChange={(value) => this.handleCheck("Scrutiny", value)}
                                              />
                                              <Checkbox
                                                  label="Role Management"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.RoleManagement : false}
                                                  onChange={(value) => this.handleCheck("RoleManagement", value)}
                                              />
                                              <Checkbox
                                                  label="User Management"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.UserManagement : false}
                                                  onChange={(value) => this.handleCheck("UserManagement", value)}
                                              />
                                              {/* <Checkbox
                                                  label="Certificate"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.Certificate : false}
                                                  onChange={(value) => this.handleCheck("Certificate", value)}
                                              /> */}
                                              <Checkbox
                                                  label="Letters"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.Letters : false}
                                                  onChange={(value) => this.handleCheck("Letters", value)}
                                              />
                                              <Checkbox
                                                  label="Master"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.Master : false}
                                                  onChange={(value) => this.handleCheck("Master", value)}
                                              />
                                              <Checkbox
                                                  label="College Management"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.CollegeManagement : false}
                                                  onChange={(value) => this.handleCheck("CollegeManagement", value)}
                                              />
                                               <Checkbox
                                                  label="Downloads"
                                                  checked={!window.cn(permissionCheck) ? permissionCheck.Downloads : false}
                                                  onChange={(value) => this.handleCheck("Downloads", value)}
                                              />
                                          </Stack>
                                          <hr />
                                          <div className="row mb-3">
                                              <div className="col-lg-12 col-xl-12 col-12 col-md-12 col-sm-12 d-flex justify-content-center">
                                                  <Button primary loading={btnloding} onClick={() => this.addRole()}>Add</Button>
                                                  <div className="ml-2">
                                                      <Button>Clear</Button>
                                                  </div>
                                              </div>
                                          </div>
                                      </Card.Section>
                                      <hr />
                                      {!pageLoading ?
                                          <>
                                              {/* DataTable */}
                                              <DataTable
                                                  verticalAlign="middle"
                                                  columnContentTypes={columnsToRows(RoleColumns, COLUMNS_KEY.TYPE)}
                                                  headings={columnsToRows(RoleColumns, COLUMNS_KEY.NAME)}
                                                  rows={tableRows}
                                              />
                                              {/* No Data Found */}
                                              {tableRows.length === 0 && <DataTableEmptyState />}
                                          </>
                                          :
                                          // Skeleton
                                          <SkeletonDataTable defaultLength={4} columns={RoleColumns} />
                                      }
                                  </Card>
                              </Page>
                          </AppProvider>
                      </div>
                  </div>
  
                  {/* Toaster Start */}
                  {
                      toastToggal ? (
                          <Toaster toastReqObj={setToastObj} dismissToast={() => { this.closeToast() }} />
                      ) : null
                  }
                  {/* Toaster End */}
              </>
          )
      }
  }
  
  export default RoleManagement;