erp-platform/ui/src/views/admin/role-management/RolesPermission.tsx

import AdaptableCard from '@/components/shared/AdaptableCard'
import Container from '@/components/shared/Container'
import { Button, Checkbox, Dialog, Menu, toast } from '@/components/ui'
import { useConfig } from '@/components/ui/ConfigProvider'
import Notification from '@/components/ui/Notification'
import {
  GetPermissionListResultDto,
  PermissionGrantInfoDto,
  PermissionGroupDto,
  PermissionWithGroupName,
  PermissionWithStyle,
  UpdatePermissionDto,
} from '@/proxy/admin'
import { getPermissions, updatePermissions } from '@/proxy/admin/identity.service'
import { useStoreActions, useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { ChangeEvent, useEffect, useMemo, useState } from 'react'

function RolesPermission({
  open,
  onDialogClose,
  name,
}: {
  open: boolean
  onDialogClose: () => void
  name: string
}) {
  const providerName = 'R'
  const { translate } = useLocalization()
  const { getConfig } = useStoreActions((a) => a.abpConfig)
  
  const [isLoading, setIsLoading] = useState(false)
  const [permissionList, setPermissionList] = useState<GetPermissionListResultDto>()
  const [selectedGroup, setSelectedGroup] = useState<PermissionGroupDto | undefined>()
  const [selectedGroupPermissions, setSelectedGroupPermissions] = useState<PermissionWithStyle[]>(
    [],
  )

  const mode = useStoreState((state) => state.theme.mode)

  const { direction } = useConfig()
  const className = `m${direction[0]}-`

  const fetchDataPermissions = async () => {
    if (!name) {
      return
    }

    const response = await getPermissions(providerName, name)
    setPermissionList(response.data)
  }

  const changeGroup = (groupName?: string) => {
    const group = permissionList?.groups.find((a) => a.name === groupName)

    if (!group) {
      setSelectedGroup(undefined)
      setSelectedGroupPermissions([])
      return
    }

    setSelectedGroup(group)

    const selectedGroupPerm = group.permissions.map(
      (permission) =>
        ({
          ...permission,
          class: className + findMargin(group.permissions, permission) * 4,
        }) as PermissionWithStyle,
    )

    setSelectedGroupPermissions(selectedGroupPerm)
  }

  const onDialogOk = async () => {
    setIsLoading(true)
    setTimeout(async () => {
      if (permissionList?.groups && name) {
        const listPermissions = await getPermissions(providerName, name)
        const unChangedPermissions = getPermissionsWithGroupName(listPermissions.data?.groups)
        const changedPermissions = getPermissionsWithGroupName(permissionList.groups)

        const updatePermList: UpdatePermissionDto[] = changedPermissions
          .filter((per) =>
            (unChangedPermissions.find((unChanged) => unChanged.name === per.name) || {})
              .isGranted === per.isGranted
              ? false
              : true,
          )
          .map(({ name, isGranted }) => ({ name, isGranted }))

        updatePermissions(providerName, name, { permissions: updatePermList })
        toast.push(<Notification title={'Permission updated'} type="success" />, {
          placement: 'top-center',
        })
      }

      onDialogClose()
      setIsLoading(false)
    }, 1000)


    setTimeout(async () => {
      getConfig(true)
    }, 2000)
  }

  function getPermissionsWithGroupName(groups: PermissionGroupDto[]): PermissionWithGroupName[] {
    return groups.reduce(
      (acc, val) => [
        ...acc,
        ...val.permissions.map<PermissionWithGroupName>((p) => ({
          ...p,
          groupName: val.name || '',
        })),
      ],
      [] as PermissionWithGroupName[],
    )
  }

  function findMargin(
    permissions: PermissionGrantInfoDto[],
    permission: PermissionGrantInfoDto,
    level = 0,
  ): number {
    const parentPermission = permissions.find((per) => per.name === permission.parentName)
    if (parentPermission) {
      return findMargin(permissions, parentPermission, level + 1)
    } else {
      return level
    }
  }

  const isAllSelected = useMemo(
    () =>
      permissionList?.groups.every((group) =>
        group.permissions.every((permission) => permission.isGranted),
      ),
    [permissionList],
  )

  const isAllSelectedForGroup = useMemo(
    () => selectedGroupPermissions.every((permission) => permission.isGranted),
    [selectedGroupPermissions],
  )

  const onSelectAll = (value: boolean, e: ChangeEvent<HTMLInputElement>) => {
    if (!permissionList) {
      return
    }

    const currentGroupName = selectedGroup?.name
    setSelectedGroup(undefined)
    setSelectedGroupPermissions([])

    if (e.target.name === 'group') {
      permissionList?.groups
        .find((group) => group.name === selectedGroup?.name)
        ?.permissions.forEach((permission) => {
          permission.isGranted = value
        })
    } else {
      permissionList?.groups.forEach((group) => {
        group.permissions.forEach((permission) => {
          permission.isGranted = value
        })
      })
    }

    setPermissionList({ ...permissionList })

    changeGroup(currentGroupName)
  }

  function onClickCheckbox(clickedPermission: PermissionGrantInfoDto) {
    if (!permissionList) {
      return
    }

    const groupPerm = selectedGroupPermissions.map((per) => {
      if (clickedPermission.name === per.name) {
        return { ...per, isGranted: !per.isGranted }
      } else if (clickedPermission.name === per.parentName && clickedPermission.isGranted) {
        return { ...per, isGranted: false }
      } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
        return { ...per, isGranted: true }
      }
      return per
    })

    const permGroup = permissionList?.groups.find((a) => a.name === selectedGroup?.name)
    if (permGroup) {
      permGroup.permissions = groupPerm
    }

    setPermissionList({ ...permissionList })
    setSelectedGroupPermissions(groupPerm)
  }

  useEffect(() => {
    fetchDataPermissions()
  }, [name])

  return permissionList ? (
    <Dialog
      width="60%"
      isOpen={open}
      onAfterOpen={() => changeGroup(permissionList?.groups[0].name)}
      onClose={onDialogClose}
      onRequestClose={onDialogClose}
    >
      <h5 className="mb-4">
        {translate('::Permission')} - {name}
      </h5>
      <hr className="mt-2 mb-2"></hr>
      <Container className="h-full">
        <div className="flex flex-col md:flex-row gap-4">
          <div style={{ width: '30%' }}>
            <Checkbox name="all" checked={isAllSelected} onChange={onSelectAll}>
              {translate('::SelectAllInAllTabs', 'AbpPermissionManagement')}
            </Checkbox>
            <hr className="mt-2 mb-2"></hr>
            <Menu variant={mode} defaultActiveKeys={[selectedGroup?.displayName ?? '']}>
              {permissionList?.groups.map((group) => (
                <Menu.MenuItem
                  key={group.name}
                  className="break-all whitespace-normal"
                  eventKey={group.name}
                  onSelect={changeGroup}
                >
                  {translate('::' + group.displayName)} (
                  {group.permissions.filter((a) => a.isGranted).length})
                </Menu.MenuItem>
              ))}
            </Menu>
          </div>
          <div style={{ width: '70%' }} className="max-h-[470px] overflow-y-auto">
            <Checkbox name="group" checked={isAllSelectedForGroup} onChange={onSelectAll}>
              {translate('::SelectAllInThisTab', 'AbpPermissionManagement')}
            </Checkbox>
            <hr className="mt-2 mb-2"></hr>
            <AdaptableCard>
              {selectedGroupPermissions.map((permission) => (
                <div key={permission.name}>
                  <Checkbox
                    name={permission.name}
                    className={permission.class}
                    checked={permission.isGranted}
                    onChange={() => onClickCheckbox(permission)}
                  >
                    {translate('::' + permission.displayName)}
                  </Checkbox>
                </div>
              ))}
            </AdaptableCard>
          </div>
        </div>
      </Container>
      <div className="text-right mt-6">
        <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={onDialogClose}>
          {translate('::Cancel')}
        </Button>
        <Button variant="solid" loading={isLoading} onClick={onDialogOk}>
          {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
        </Button>
      </div>
    </Dialog>
  ) : (
    <></>
  )
}

export default RolesPermission