Role Management

Role Management - Role Management,you can add, edit, delete roles respectively`

Author

• @author G Balaji [email protected]

Link

Story Book Link roleManagement

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_role-management

Import component

import { RoleManagement } from '@licuido-ui/ui_role-management';

Usage

import { lightTheme, theme } from '@core/theme';
import {  Select } from '@licuido-ui/react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { useState } from 'react';

function App() {
  const muiTheme = createTheme({
    ...theme,
    palette: {
      ...(theme?.palette ?? {}),
      ...(lightTheme?.palette ?? {}),
    },
  });

  const initialState = {
    roleNo: '',
    role: '',
    roleText: '',
    isActive: false,
    error: {
      roleNo: '',
      role: '',
    },
  };

  const roleData = [
    {
      roleNo: 'RL078',
      roleText: 'Role 1',
      isActive: true,
    },
    {
      roleNo: 'RL055',
      roleText: 'Role 2',
      isActive: false,
    },
  ];
  const [rolesState, setRolesState] = useState<any[]>(roleData);

  const [state, setState] = useState(initialState); // role item state
  const [search, setSearch] = useState(''); // search text
  const [editIndex, setEditIndex] = useState(null); // editindex of the role
  const [add, setAdd] = useState(false);
  const [clickIndex, setCickIndex] = useState<number>();


  // edit click fn
  const onEditRole = (index: any) => {
    // if editIndex isn't empty, return false because it must be one editable role item at a time
    if (editIndex !== null) {
      return false;
    }
    setState({ ...rolesState[index as number] });
    setEditIndex(index);
    setAdd(false);
  };

  // delete click fn
  const onDeleteRole = (index: number | string) => {
    const tempArr = rolesState.filter((x, i) => i !== index);
    setRolesState(tempArr);
    setAdd(false);
  };

  // role item click fn
  const handleRoleClick = (index: number | undefined) => {
    setCickIndex(index);
  };

  const handleChange = (key: string, e: string, inputType: 'edit' | 'add', index?: number) => {
    const tempArr = [...rolesState];
    const currentError = state?.error ?? {};
    const updatedError = { ...currentError, [key]: '' };
    setState({ ...state, [key]: e, error: updatedError });
    if (inputType === 'edit') {
      tempArr[index as number] = {
        ...tempArr[index as number],
        [key]: e,
      };
      setRolesState([...tempArr]);
    } else {
      console.log('error');
    }
  };
  const validate = () => {
    let isValid = true;
    const error = state?.error ?? {};

    if (state?.role?.length === 0) {
      // Check 'role' property
      isValid = false;
      error.role = 'Role & RoleNo Required'; // Update 'role' property in error object
    }
    if (state?.roleNo?.length === 0) {
      // Check 'roleNo' property
      isValid = false;
      error.roleNo = 'Role & RoleNo Required';
    }
    setState({ ...state, error });
    return isValid;
  };

  const handleSave = (x: any, inputType: 'add' | 'edit', index?: number) => {
    if (validate()) {
      const tempArr = [...rolesState];
      // if it's edit input - edit role item with index of the object or - push the role item to array
      if (inputType === 'edit') {
        tempArr[index as number] = x;
        setRolesState([...tempArr]);
      } else {
        tempArr.push(x);
        setRolesState([...tempArr]);
        setAdd(false);
      }
      setState(initialState);
      setEditIndex(null);
    } else {
      console.log('error');
    }
  };

  const handleAddRole = () => {
    if (editIndex !== null) {
      return false;
    }
    setEditIndex(null);
    setState(initialState);
    setAdd(true);
  };

  const handleSearch = (key: string, value: string) => {
    setSearch(value);
  };

  // handleclose fn
  const handleClose = (type: 'add' | 'edit') => {
    // if it is edit role item validate whether it is empty role item or not
    if (type === 'edit') {
      if (validate()) {
        setEditIndex(null);
        setAdd(false);
        setState(initialState);
      } else {
        console.log('err');
      }
    } else {
      setAdd(false);
      setState(initialState);
    }
  };

  const handleSwitch = (e: boolean, index: number) => {
    const tempArr = [...rolesState];
    tempArr[index] = {
      ...tempArr[index],
      isActive: e,
    };
    setRolesState([...tempArr]);
  };

  return (
    <ThemeProvider theme={muiTheme}>
      <RoleManagement
        editIndex={editIndex}
        clickIndex={clickIndex}
        roles={rolesState}
        state={state}
        onEditRole={onEditRole} // edit fn of the role item
        onDeleteRole={onDeleteRole} // delete fn of the role item
        handleChange={handleChange} // role item onchange fn
        handleSave={handleSave} // save fn of the role item
        handleAddRole={handleAddRole} // add new role item fn
        handleRoleClick={handleRoleClick} // click fn of the role item
        handleClose={handleClose} // close fn of the role item
        handleSearch={handleSearch} // search fn of the roles
        search={search} // search state
        handleSwitch={handleSwitch} // sw
        add={add}
        roleUnselectedCardSx={{
          padding: '8px 12px',
        }}
        roleCardSx={{
          padding: '8px 12px',
        }}
        title='Roles'
        rootStyle={{}}
        // roles={rolesState}
        listingRolesGrid={{
          breakpoints: {
            xs: 12,
            sm: 6,
            md: 5,
            lg: 4,
          },
        }}
        rolesView={{
          breakpoints: {
            xs: 12,
            sm: 6,
            md: 7,
            lg: 8,
          },
        }}
        compHeadingSx={{}}
        subRootPropsSx={{}}
        roleBoxSx={{}}
        roleBoxHeaderSx={{}}
        roleBoxtitleSx={{}}
        addIconColor=''
        checkIconPropsSx={{}}
        closeIconPropSx={{}}
        roleNoProps={{}}
        editIconProps={{}}
        delIconProps={{}}
        switchStyle={{}}
        compHeading=''
        inputProp={{
          inputStyle: {
            border: '',
            borderBottom: '',
            borderRadius: '',
            disabled: false,
            startAdornment: '',
            endAdornment: '',
          },
          labelStyle: {},
          roleId: 'role-id',
          placeholder: '',
          value: '',
          valueKey: 'roleNo',
          inputType: 'edit',
        }}
        addTxtSx={{}}
      />
    </ThemeProvider>
  );
}
export default App;

Image

Sample Code

<RoleManagement
  listingRolesGrid={{
    breakpoints: {
      xs: 12,
      sm: 6,
      md: 5,
      lg: 4,
    },
  }}
  rolesView={{
    breakpoints: {
      xs: 12,
      sm: 6,
      md: 7,
      lg: 8,
    },
  }}
  roleUnselectedCardSx={{
    padding: '8px 12px',
  }}
  roleCardSx={{
    padding: '8px 12px',
  }}
  handleSave={handleSave}
  handleSwitch={handleSwitch}
  handleAddSave={() => null}
  handleChange={() => null}
  handleAddChange={() => null}
  checkIconProps={}
  closeIconProps={}
  compHeading=''
  title=''
  rootStyle={}
  addIconColor=''
  roleNoProps={}
  editIconProps={}
  delIconProps={}
  inputStyle={}
  switchStyle={}
  roleBoxSx={}
  addTxtSx={}
  subRootPropsSx={}
  roleId='role'
  roles={[
    {
      roleNo: 'RL077',
      role: 'Role 1',
      isActive: false,
    },
    {
      roleNo: 'RL045',
      role: 'Role 2',
      isActive: false,
    },
  ]}
/>

Props

RoleManagement Component Props

| Prop Name | Description | Type | Default Value | | ------------------------ | ------------------------------------------------- | ---------------------- | ------------- | | compHeading | The compHeading text for the component. | string | '' | | rootStyle | Additional styles for the root component. | SxProps | {} | | rolesView | Object specifying breakpoints for the roles grid. | { breakpoints: {...} } | {} | | listingRolesGrid | Object specifying breakpoints for the roles grid. | { breakpoints: {...} } | {} | | compHeadingSx | Additional styles for the role title. | SxProps | {} | | subRootPropsSx | Additional styles for the sub-root component. | SxProps | {} | | switchStyle | Styling options for switches. | switchStyle | {} | | inputStyle | Styling options for input fields. | inputStyle | {} | | roleBoxSx | Additional styles for the role box. | SxProps | {} | | roleBoxHeaderSx | Additional styles for the role head border. | SxProps | {} | | roleBoxtitleSx | Additional styles for the title. | SxProps | {} | | addTxtSx | Additional styles for the "Add" text. | SxProps | {} | | roleCardSx | Additional styles for the role card. | SxProps | {} | | checkIconPropsSx | Additional styles for the check icon. | SxProps | {} | | closeIconPropSx | Additional styles for the close icon. | SxProps | {} | | roleUnselectedCardSx | Additional styles for the unselected role card. | SxProps | {} | | roleNoProps | Additional styles for the role number. | SxProps | {} | | editIconProps | Additional styles for the edit icon. | SxProps | {} | | editIconProps | Additional styles for the edit icon. | SxProps | {} | | addIconColor | Color for the "Add" icon. | string | `` |