erp-platform/ui/src/views/admin/user-management/Users.tsx

import { ActionLink } from '@/components/shared'
import AdaptableCard from '@/components/shared/AdaptableCard'
import Container from '@/components/shared/Container'
import { Table, toast } from '@/components/ui'
import { useConfig } from '@/components/ui/ConfigProvider'
import Notification from '@/components/ui/Notification'
import {
  GetPermissionListResultDto,
  IdentityUserDto,
  PermissionGrantInfoDto,
  PermissionGroupDto,
  PermissionWithGroupName,
  PermissionWithStyle,
  UpdatePermissionDto,
} from '@/proxy/admin'
import { getPermissions, getUsers, updatePermissions } from '@/proxy/admin/identity.service'
import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import useThemeClass from '@/utils/hooks/useThemeClass'
import isEmpty from 'lodash/isEmpty'
import { ChangeEvent, useEffect, useMemo, useState } from 'react'
import { Helmet } from 'react-helmet'
import UsersPermission from './UsersPermission'

const { Tr, Th, Td, THead, TBody } = Table

const Users = () => {
  const providerName = 'U'
  const { textTheme } = useThemeClass()
  const [isLoading, setIsLoading] = useState(false)
  const [userList, setUserList] = useState<IdentityUserDto[]>([])
  const [activeUser, setActiveUser] = useState<IdentityUserDto>()
  const [permissionList, setPermissionList] = useState<GetPermissionListResultDto>()
  const [selectedGroup, setSelectedGroup] = useState<PermissionGroupDto | undefined>()
  const [selectedGroupPermissions, setSelectedGroupPermissions] = useState<PermissionWithStyle[]>(
    [],
  )
  const [permissionDialogOpen, setPermissionDialogOpen] = useState(false)

  const mode = useStoreState((state) => state.theme.mode)
  const { translate } = useLocalization()

  const fetchData = async () => {
    const response = await getUsers()
    if (response.data?.items) {
      setUserList(response.data.items)
    }
  }

  useEffect(() => {
    if (isEmpty(userList)) {
      fetchData()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const fetchDataPermissions = async (user?: IdentityUserDto, userid?: string) => {
    if (!user || !userid) {
      return
    }

    setActiveUser(user)
    const response = await getPermissions(providerName, userid)
    setPermissionList(response.data)
  }

  const onDialogClose = async () => {
    setPermissionDialogOpen(false)
    setSelectedGroup(undefined)
    setSelectedGroupPermissions([])
    await fetchDataPermissions(activeUser, activeUser?.id)
  }

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

  const onDialogOk = async () => {
    setIsLoading(true)
    setTimeout(async () => {
      if (permissionList?.groups && activeUser?.id) {
        const listPermissions = await getPermissions(providerName, activeUser.id)
        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, activeUser.id, { permissions: updatePermList })
        toast.push(<Notification title={'Permission updated'} type="success" />, {
          placement: 'top-center',
        })
      }

      setPermissionDialogOpen(false)
      setIsLoading(false)
    }, 1000)
  }

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

  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)
  }

  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)
  }

  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)
  }

  return (
    <>
      <Helmet
        titleTemplate="%s | Kurs Platform"
        title={translate('::AbpIdentity.Users')}
        defaultTitle="Kurs Platform"
      ></Helmet>
      <Container>
        <AdaptableCard>
          <Table>
            <THead>
              <Tr>
                <Th className="w-1/6"></Th>
                <Th>Adı Soyadı</Th>
                <Th>E-Posta</Th>
                <Th>Telefon</Th>
                <Th>Durum</Th>
              </Tr>
            </THead>
            <TBody>
              {userList.map((user) => (
                <Tr key={user.id}>
                  <Td>
                    <div
                      className={`${textTheme} cursor-pointer select-none font-semibold`}
                      onClick={async () => {
                        await fetchDataPermissions(user, user?.id)
                        setPermissionDialogOpen(true)
                      }}
                    >
                      {translate('::Permission')}
                    </div>
                  </Td>
                  <Td>
                    <ActionLink
                      href={`/admin/identity/users/${user.id}/details`}
                      className="font-bold"
                    >
                      {user.name} {user.surname}
                    </ActionLink>
                  </Td>
                  <Td>{user.email}</Td>
                  <Td>{user.phoneNumber}</Td>
                  <Td>{user.isActive ? 'Aktif' : 'Pasif'}</Td>
                </Tr>
              ))}
            </TBody>
          </Table>
        </AdaptableCard>
      </Container>
      {activeUser?.id && (
        <UsersPermission
          open={permissionDialogOpen}
          onDialogClose={() => setPermissionDialogOpen(false)}
          name={activeUser.id}
          id={''}
        ></UsersPermission>
      )}
    </>
  )
}

export default Users