@campxdev/shared 1.9.1 → 1.9.2

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -1,344 +1,378 @@
-import {
-  Avatar,
-  Box,
-  Button,
-  CircularProgress,
-  InputAdornment,
-  Typography,
-  styled,
-} from '@mui/material'
-import { useEffect, useState } from 'react'
-import { useMutation, useQuery } from 'react-query'
-import { toast } from 'react-toastify'
-import { useImmer } from 'use-immer'
-import { PageContent } from '../PageContent'
-import PageHeader from '../PageHeader'
-import useConfirm from '../PopupConfirm/useConfirm'
-import Spinner from '../Spinner'
-import UserProfileRelation from './UserProfileRelation'
-import {
-  defaultFilterObj,
-  fetchApplicationUsers,
-  fetchProfiles,
-  removeUserApplicationProfile,
-  updateUserApplicationProfile,
-} from './services'
-
-import { axiosErrorToast } from '../../config/axios'
-import { ValidateAccess } from '../../permissions'
-import { Permission, PermissionsStore } from '../../shared-state'
-import ActionButton from '../ActionButton'
-import SearchBar from '../FilterComponents/SearchBar'
-import { SingleSelect } from '../Input'
-import { DialogButton } from '../ModalButtons'
-import Table from '../Tables/BasicTable/Table'
-
-interface ApplicationProfileProps {
-  application: 'exams' | 'square' | 'payments' | 'enroll_x' | 'hostels'
-  title: string
-  permissions?: {
-    add: string
-    edit: string
-    view: string
-    delete: string
-  }
-}
-function ApplicationProfile({
-  application,
-  title,
-  permissions,
-}: ApplicationProfileProps) {
-  const { isConfirmed } = useConfirm()
-  const [filters, setFilters] = useImmer(defaultFilterObj)
-  const { data, isLoading, refetch } = useQuery(
-    ['application-users', filters],
-    () => fetchApplicationUsers({ application, ...filters }),
-  )
-
-  const { data: profiles, isLoading: profilesLoading } = useQuery(
-    'profiles',
-    () => fetchProfiles({ application }),
-  )
-
-  const { mutate, isLoading: removingUserProfile } = useMutation(
-    removeUserApplicationProfile,
-    {
-      onSuccess: (res) => {
-        refetch()
-        toast.success('User profile removed from application')
-      },
-    },
-  )
-
-  const handleRemove = async (data) => {
-    const confirmed = await isConfirmed(
-      'Are you sure you want to remove the user profile?',
-    )
-    if (!confirmed) return
-    mutate({ userId: data.id, application: application })
-  }
-  const columns = [
-    {
-      title: 'User',
-      key: 'user',
-      dataIndex: 'user',
-      render: (_, row) => <UserComponent userData={row} />,
-    },
-    {
-      title: 'Profile',
-      key: 'profile',
-      dataIndex: 'profile',
-      render: (_, row) => (
-        <RenderProfileDropDown
-          profiles={profiles?.profiles}
-          data={row}
-          application={application}
-          refetchFn={refetch}
-          permissions={permissions}
-        />
-      ),
-    },
-    {
-      title: 'Actions',
-      key: 'actions',
-      dataIndex: 'actions',
-      render: (_, row) => (
-        <ValidateAccess
-          accessKey={
-            permissions
-              ? Permission[permissions.delete]
-              : Permission.CAN_DASHBOARD_VIEW
-          }
-        >
-          <Button
-            variant="text"
-            onClick={() => handleRemove(row)}
-            sx={{ padding: '0px', margin: '0px' }}
-          >
-            Remove
-          </Button>
-        </ValidateAccess>
-      ),
-    },
-  ]
-  const handleLimitChange = (value: number) => {
-    setFilters((s) => {
-      s.limit = value
-      s.offset = 0
-    })
-  }
-
-  const handlePagination = (value: number) => {
-    setFilters((s) => {
-      s.offset = value * s.limit - s.limit
-    })
-  }
-
-  if (profilesLoading) return <Spinner />
-  return (
-    <>
-      <PageHeader
-        title={title}
-        actions={[
-          <ValidateAccess
-            key={1}
-            accessKey={
-              permissions
-                ? Permission[permissions.add]
-                : Permission.CAN_DASHBOARD_VIEW
-            }
-          >
-            <DialogButton
-              title={'Add User Profile Relation'}
-              anchor={({ open }) => (
-                <ActionButton onClick={open}>
-                  Add User Profile Relation
-                </ActionButton>
-              )}
-              content={({ close }) => (
-                <UserProfileRelation
-                  close={close}
-                  application={application}
-                  profiles={profiles?.profiles}
-                />
-              )}
-            />
-          </ValidateAccess>,
-        ]}
-      />
-      <PageContent sx={{ marginTop: '25px' }}>
-        <StyledTableContainer>
-          <SearchBar
-            onSearch={(value) => {
-              setFilters((s) => {
-                s.search = value
-              })
-            }}
-            textFieldProps={{
-              placeholder: 'Search by Name',
-              title: 'Search by Name',
-              sx: { width: '300px', marginBottom: '25px' },
-              size: 'small',
-            }}
-          />
-          <Table
-            columns={columns}
-            dataSource={data?.result ?? []}
-            loading={isLoading || removingUserProfile}
-            pagination={{
-              limit: filters.limit,
-              onChangeLimit: handleLimitChange,
-              onChange: handlePagination,
-              totalCount: data?.count,
-              page: filters.offset / filters.limit,
-            }}
-          />
-        </StyledTableContainer>
-      </PageContent>
-    </>
-  )
-}
-export default ApplicationProfile
-
-export const RenderProfileDropDown = ({
-  profiles,
-  data,
-  refetchFn,
-  application,
-  permissions,
-}) => {
-  const permissionState = PermissionsStore.useState((s) => s)
-  const CanEdit = permissions
-    ? permissionState.permissions[Permission[permissions.edit]]
-    : permissionState.permissions['can_dashboard_view']
-
-  const [state, setState] = useState({
-    userId: null,
-    profileId: null,
-  })
-
-  useEffect(() => {
-    setState((pre) => ({
-      userId: data.id,
-      profileId: data?.profiles?.find((p) => p.application === application)?.id,
-    }))
-  }, [data])
-
-  const { mutate, isLoading } = useMutation(updateUserApplicationProfile, {
-    onSuccess: (res) => {
-      refetchFn()
-      toast.success('User application profile updated successfully')
-    },
-    onError: (err) => {
-      // eslint-disable-next-line no-console
-      console.log(err)
-      axiosErrorToast(err)
-    },
-  })
-  const handleChange = (e) => {
-    setState({
-      userId: data.id,
-      profileId: e.target.value,
-    })
-    mutate({
-      userId: state.userId,
-      profileIds: [e.target.value],
-      application: application,
-    })
-  }
-
-  if (!data) return null
-  return (
-    <>
-      <StyledDropDownContainer>
-        <SingleSelect
-          label={'Profile'}
-          name={'profile'}
-          value={state?.profileId}
-          onChange={(e) => {
-            handleChange(e)
-          }}
-          disabled={!CanEdit}
-          endAdornment={
-            isLoading && (
-              <InputAdornment position="end">
-                <CircularProgress
-                  size={20}
-                  color={'secondary'}
-                  sx={{ marginRight: '10px' }}
-                />
-              </InputAdornment>
-            )
-          }
-          options={
-            profiles?.map((profile) => ({
-              label: profile.name,
-              value: profile.id,
-            })) ?? []
-          }
-        />
-      </StyledDropDownContainer>
-    </>
-  )
-}
-
-export const UserComponent = ({ userData }) => {
-  return (
-    <>
-      <Box
-        sx={{
-          width: '100%',
-          display: 'flex',
-          gap: '10px',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-        }}
-      >
-        <Avatar alt={userData?.fullName} />
-        <Typography variant="subtitle1">{userData?.fullName}</Typography>
-      </Box>
-    </>
-  )
-}
-export const StyledTableContainer = styled(Box)(({ theme }) => ({
-  width: '70%',
-  margin: 'auto',
-  '& .MuiTableHead-root': {
-    border: '1px solid white',
-    borderBottom: theme.borders.grayLight,
-    borderWidth: '2px',
-
-    backgroundColor: 'white',
-    '& th': {
-      textAlign: 'left',
-      padding: '5px',
-    },
-    '& .MuiBox-root': {
-      color: '#121212b3',
-      fontSize: '164x',
-    },
-  },
-  '& tbody': {
-    border: '1px solid white',
-    borderBottom: theme.borders.grayLight,
-    borderWidth: '2px',
-    '& tr': {
-      border: '1px solid white',
-    },
-  },
-  '& td': {
-    textAlign: 'center',
-    border: '1px solid white',
-    padding: '15px 0px',
-  },
-}))
-
-export const StyledDropDownContainer = styled(Box)(({ theme }) => ({
-  width: '200px',
-  '& .MuiTypography-root': {
-    display: 'none',
-  },
-  '& .MuiInputBase-root': {
-    backgroundColor: '#f5f6f8',
-  },
-}))
+import {
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  InputAdornment,
+  Typography,
+  styled,
+} from '@mui/material'
+import { useEffect, useState } from 'react'
+import { useMutation, useQuery } from 'react-query'
+import { toast } from 'react-toastify'
+import { useImmer } from 'use-immer'
+import { PageContent } from '../PageContent'
+import PageHeader from '../PageHeader'
+import useConfirm from '../PopupConfirm/useConfirm'
+import Spinner from '../Spinner'
+import UserProfileRelation from './UserProfileRelation'
+import {
+  defaultFilterObj,
+  fetchApplicationUsers,
+  fetchProfiles,
+  removeUserApplicationProfile,
+  updateUserApplicationProfile,
+} from './services'
+
+import { axiosErrorToast } from '../../config/axios'
+import { ValidateAccess } from '../../permissions'
+import { Permission, PermissionsStore } from '../../shared-state'
+import ActionButton from '../ActionButton'
+import FilterButton from '../FilterComponents/FilterButton'
+import SearchBar from '../FilterComponents/SearchBar'
+import { SingleSelect } from '../Input'
+import { DialogButton, DrawerButton } from '../ModalButtons'
+import Table from '../Tables/BasicTable/Table'
+import DeprartmentFilter from './DepartmentFilter'
+
+interface ApplicationProfileProps {
+  application: 'exams' | 'square' | 'payments' | 'enroll_x' | 'hostels'
+  title: string
+  permissions?: {
+    add: string
+    edit: string
+    view: string
+    delete: string
+  }
+}
+function ApplicationProfile({
+  application,
+  title,
+  permissions,
+}: ApplicationProfileProps) {
+  const { isConfirmed } = useConfirm()
+  const [state, setState] = useImmer(defaultFilterObj)
+
+  const { data, isLoading, refetch } = useQuery(
+    [
+      'application-users',
+      ...Object.keys(state.filters).map((key) => state.filters[key]),
+    ],
+    () => fetchApplicationUsers({ application, ...state.filters }),
+  )
+
+  const { data: profiles, isLoading: profilesLoading } = useQuery(
+    'profiles',
+    () => fetchProfiles({ application }),
+  )
+
+  const { mutate, isLoading: removingUserProfile } = useMutation(
+    removeUserApplicationProfile,
+    {
+      onSuccess: () => {
+        refetch()
+        toast.success('User profile removed from application')
+      },
+    },
+  )
+
+  const handleRemove = async (data) => {
+    const confirmed = await isConfirmed(
+      'Are you sure you want to remove the user profile?',
+    )
+    if (!confirmed) return
+    mutate({ userId: data.id, application: application })
+  }
+
+  const columns = [
+    {
+      title: 'User',
+      key: 'user',
+      dataIndex: 'user',
+      render: (_, row) => <UserComponent userData={row} />,
+    },
+    {
+      title: 'Profile',
+      key: 'profile',
+      dataIndex: 'profile',
+      render: (_, row) => (
+        <RenderProfileDropDown
+          profiles={profiles?.profiles}
+          data={row}
+          application={application}
+          refetchFn={refetch}
+          permissions={permissions}
+        />
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      dataIndex: 'actions',
+      render: (_, row) => (
+        <ValidateAccess
+          accessKey={
+            permissions
+              ? Permission[permissions.delete]
+              : Permission.CAN_DASHBOARD_VIEW
+          }
+        >
+          <Button
+            variant="text"
+            onClick={() => handleRemove(row)}
+            sx={{ padding: '0px', margin: '0px' }}
+          >
+            Remove
+          </Button>
+        </ValidateAccess>
+      ),
+    },
+  ]
+  const handleLimitChange = (value: number) => {
+    setState((s) => {
+      s.filters.limit = value
+      s.filters.offset = 0
+    })
+  }
+
+  const handlePagination = (value: number) => {
+    setState((s) => {
+      s.filters.offset = value * s.filters.limit - s.filters.limit
+    })
+  }
+
+  if (profilesLoading) return <Spinner />
+  return (
+    <>
+      <PageHeader
+        title={title}
+        actions={[
+          <ValidateAccess
+            key={1}
+            accessKey={
+              permissions
+                ? Permission[permissions.add]
+                : Permission.CAN_DASHBOARD_VIEW
+            }
+          >
+            <DialogButton
+              title={'Add User Profile Relation'}
+              anchor={({ open }) => (
+                <ActionButton onClick={open}>
+                  Add User Profile Relation
+                </ActionButton>
+              )}
+              content={({ close }) => (
+                <UserProfileRelation
+                  close={close}
+                  application={application}
+                  profiles={profiles?.profiles}
+                />
+              )}
+            />
+          </ValidateAccess>,
+        ]}
+      />
+      <PageContent sx={{ marginTop: '25px' }}>
+        <StyledTableContainer>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '10px',
+              alignItems: 'center',
+              marginBottom: '10px',
+            }}
+          >
+            <Box>
+              <SearchBar
+                onSearch={(value) =>
+                  setState((s) => {
+                    s.filters.search = value
+                  })
+                }
+                textFieldProps={{
+                  placeholder: 'Search by Name',
+                  title: 'Search by Name',
+                  sx: { width: '300px' },
+                  size: 'medium',
+                }}
+              />
+            </Box>
+            <DrawerButton
+              anchor={({ open }) => (
+                <FilterButton
+                  onClick={open}
+                  filtersApplied={state.filtersApplied}
+                />
+              )}
+              content={({ close }) => (
+                <DeprartmentFilter
+                  close={close}
+                  setAppliedFilters={setState}
+                  appliedFilters={state}
+                />
+              )}
+              title="People Filters"
+            />
+          </Box>
+          <Table
+            columns={columns}
+            dataSource={data?.result ?? []}
+            loading={isLoading || removingUserProfile}
+            pagination={{
+              limit: state.filters.limit,
+              onChangeLimit: handleLimitChange,
+              onChange: handlePagination,
+              totalCount: data?.count,
+              page: state.filters.offset / state.filters.limit,
+            }}
+          />
+        </StyledTableContainer>
+      </PageContent>
+    </>
+  )
+}
+export default ApplicationProfile
+
+export const RenderProfileDropDown = ({
+  profiles,
+  data,
+  refetchFn,
+  application,
+  permissions,
+}) => {
+  const permissionState = PermissionsStore.useState((s) => s)
+  const CanEdit = permissions
+    ? permissionState.permissions[Permission[permissions.edit]]
+    : permissionState.permissions['can_dashboard_view']
+
+  const [state, setState] = useState({
+    userId: null,
+    profileId: null,
+  })
+
+  useEffect(() => {
+    setState(() => ({
+      userId: data.id,
+      profileId: data?.profiles?.find((p) => p.application === application)?.id,
+    }))
+  }, [data])
+
+  const { mutate, isLoading } = useMutation(updateUserApplicationProfile, {
+    onSuccess: () => {
+      refetchFn()
+      toast.success('User application profile updated successfully')
+    },
+    onError: (err) => {
+      // eslint-disable-next-line no-console
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+  const handleChange = (e) => {
+    setState({
+      userId: data.id,
+      profileId: e.target.value,
+    })
+    mutate({
+      userId: state.userId,
+      profileIds: [e.target.value],
+      application: application,
+    })
+  }
+
+  if (!data) return null
+  return (
+    <>
+      <StyledDropDownContainer>
+        <SingleSelect
+          label={'Profile'}
+          name={'profile'}
+          value={state?.profileId}
+          onChange={(e) => {
+            handleChange(e)
+          }}
+          disabled={!CanEdit}
+          endAdornment={
+            isLoading && (
+              <InputAdornment position="end">
+                <CircularProgress
+                  size={20}
+                  color={'secondary'}
+                  sx={{ marginRight: '10px' }}
+                />
+              </InputAdornment>
+            )
+          }
+          options={
+            profiles?.map((profile) => ({
+              label: profile.name,
+              value: profile.id,
+            })) ?? []
+          }
+        />
+      </StyledDropDownContainer>
+    </>
+  )
+}
+
+export const UserComponent = ({ userData }) => {
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          gap: '10px',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+        }}
+      >
+        <Avatar alt={userData?.fullName} />
+        <Typography variant="subtitle1">{userData?.fullName}</Typography>
+      </Box>
+    </>
+  )
+}
+export const StyledTableContainer = styled(Box)(({ theme }) => ({
+  width: '70%',
+  margin: 'auto',
+  '& .MuiTableHead-root': {
+    border: '1px solid white',
+    borderBottom: theme.borders.grayLight,
+    borderWidth: '2px',
+
+    backgroundColor: 'white',
+    '& th': {
+      textAlign: 'left',
+      padding: '5px',
+    },
+    '& .MuiBox-root': {
+      color: '#121212b3',
+      fontSize: '164x',
+    },
+  },
+  '& tbody': {
+    border: '1px solid white',
+    borderBottom: theme.borders.grayLight,
+    borderWidth: '2px',
+    '& tr': {
+      border: '1px solid white',
+    },
+  },
+  '& td': {
+    textAlign: 'center',
+    border: '1px solid white',
+    padding: '15px 0px',
+  },
+}))
+
+export const StyledDropDownContainer = styled(Box)(() => ({
+  width: '200px',
+  '& .MuiTypography-root': {
+    display: 'none',
+  },
+  '& .MuiInputBase-root': {
+    backgroundColor: '#f5f6f8',
+  },
+}))