@campxdev/shared 1.8.22 → 1.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.8.22",
+  "version": "1.8.24",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -0,0 +1,325 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  InputAdornment,
+  Typography,
+  styled,
+} from '@mui/material'
+import { useState } from 'react'
+import { useMutation, useQuery } from 'react-query'
+import { toast } from 'react-toastify'
+import { useImmer } from 'use-immer'
+import UserProfileRelation from './UserProfileRelation'
+import {
+  defaultFilterObj,
+  fetchApplicationUsers,
+  fetchProfiles,
+  removeUserApplicationProfile,
+  updateUserApplicationProfile,
+} from './Service'
+import useConfirm from '../PopupConfirm/useConfirm'
+import Spinner from '../Spinner'
+import PageHeader from '../PageHeader'
+import { PageContent } from '../PageContent'
+
+import { SingleSelect } from '../Input'
+import ActionButton from '../ActionButton'
+import { axiosErrorToast } from '../../config/axios'
+import { DialogButton } from '../ModalButtons'
+import SearchBar from '../FilterComponents/SearchBar'
+import Table from '../Tables/BasicTable/Table'
+import { ValidateAccess } from '../../permissions'
+import { Permission } from '../../shared-state'
+
+interface ApplicationProfileProps {
+  application: 'exams' | 'square' | 'payments' | 'enroll_x'
+  title: string
+  permissions?: {
+    add: string
+    edit: string
+    view: string
+    delete: string
+  }
+}
+function ApplicationProfile({
+  application = 'exams',
+  title,
+  permissions,
+}: ApplicationProfileProps) {
+  const { isConfirmed } = useConfirm()
+  const [filters, setFilters] = useImmer(defaultFilterObj)
+  const { data, isLoading, refetch } = useQuery(
+    ['application-users', ...Object.keys(filters)?.map((key) => filters[key])],
+    () => 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: '',
+      dataIndex: '',
+      render: (_, row) => <UserComponent userData={row} />,
+    },
+    {
+      title: 'Profile',
+      key: '',
+      dataIndex: '',
+      render: (_, row) => (
+        <RenderProfileDropDown
+          profiles={profiles?.profiles}
+          data={row}
+          application={application}
+          refetchFn={refetch}
+          permissions={permissions}
+        />
+      ),
+    },
+    {
+      title: 'Actions',
+      key: '',
+      dataIndex: '',
+      render: (_, row) => (
+        <ValidateAccess
+          accessKey={permissions ? Permission[permissions.delete] : 1}
+        >
+          <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={0}
+            accessKey={permissions ? Permissions[permissions.add] : 1}
+          >
+            <DialogButton
+              key={0}
+              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?.users ?? []}
+            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 CanEdit = permissions ? Permissions[permissions.edit] : 1
+  const [state, setState] = useState({
+    userId: data.id,
+    profileId: data.profiles[0].id,
+  })
+
+  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,
+    })
+  }
+  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',
+  },
+}))

package/src/components/ApplicationProfile/Service.ts

@@ -0,0 +1,68 @@
+import * as yup from 'yup'
+import axios from '../../config/axios'
+export const defaultFilterObj = {
+  search: null,
+  limit: 10,
+  offset: 0,
+}
+
+export const userProfileSchema = yup.object().shape({
+  userId: yup
+    .object()
+    .shape({
+      label: yup.string().required('User is required'),
+      value: yup.string().required('User is required'),
+    })
+    .required('User is required'),
+  profileIds: yup.string().required('Profile is required'),
+})
+export const fetchUsers = (params) => {
+  return axios
+    .get(`/square/profile-permissions/new-users`, {
+      params: params,
+    })
+    .then((res) => res.data)
+}
+
+export const fetchApplicationUsers = (params) => {
+  return axios
+    .get(`/square/profile-permissions/application-users`, {
+      params: params,
+    })
+    .then((res) => res.data)
+}
+
+export const fetchProfiles = (application) => {
+  return axios
+    .get(`/square/profiles`, {
+      params: application,
+    })
+    .then((res) => res.data)
+}
+
+interface ApplicationUserProfile {
+  application: string
+  userId: number
+  profileIds: number[]
+}
+export const createApplicationUserProfile = (
+  postBody: ApplicationUserProfile,
+) => {
+  return axios
+    .post(`/square/profile-permissions/add-user`, postBody)
+    .then((res) => res.data)
+}
+
+export const removeUserApplicationProfile = (postBody) => {
+  return axios
+    .post(`/square/profile-permissions/remove-user`, postBody)
+    .then((res) => res.data)
+}
+
+export const updateUserApplicationProfile = (
+  postBody: ApplicationUserProfile,
+) => {
+  return axios
+    .put(`/square/profile-permissions/edit-user-permissions`, postBody)
+    .then((res) => res.data)
+}

package/src/components/ApplicationProfile/UserProfileRelation.tsx

@@ -0,0 +1,174 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import {
+  Autocomplete,
+  CircularProgress,
+  Popper,
+  Stack,
+  styled,
+} from '@mui/material'
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import {
+  createApplicationUserProfile,
+  fetchUsers,
+  userProfileSchema,
+} from './Service'
+import { useImmer } from 'use-immer'
+import { axiosErrorToast } from '../../config/axios'
+import { FormMultiSelect, FormSingleSelect } from '../HookForm'
+import ActionButton from '../ActionButton'
+interface UserProps {
+  options: {
+    label: any
+    value: any
+  }[]
+  inputValue: string
+}
+function UserProfileRelation({ close, application, profiles }) {
+  const [state, setState] = useImmer<UserProps>({
+    options: [],
+    inputValue: '',
+  })
+  const queryClient = useQueryClient()
+
+  const { control, handleSubmit, formState } = useForm({
+    defaultValues: {},
+    resolver: yupResolver(userProfileSchema),
+  })
+
+  const { mutate, isLoading: creatingUserProfile } = useMutation(
+    createApplicationUserProfile,
+    {
+      onSuccess: (res) => {
+        queryClient.invalidateQueries(`application-users`)
+        toast.success('User profile added to application successfully')
+        close()
+      },
+      onError: (err) => {
+        // eslint-disable-next-line no-console
+        console.log(err)
+        axiosErrorToast(err)
+      },
+    },
+  )
+
+  const { mutate: fetchUsersFn, isLoading: gettingUsers } = useMutation(
+    fetchUsers,
+    {
+      onSuccess: (res) => {
+        setState((s) => {
+          s.options = res.users?.map((item) => ({
+            label: item.fullName,
+            value: item.id,
+          }))
+        })
+      },
+    },
+  )
+  const onSubmit = (formData) => {
+    mutate({
+      application: application,
+      profileIds: [+formData.profileIds],
+      userId: +formData.userId?.value,
+    })
+  }
+  const onError = (err) => {
+    // eslint-disable-next-line no-console
+    console.log(err)
+  }
+
+  const handleInputChange = (e) => {
+    if (e) {
+      setState((s) => {
+        s.inputValue = e.target.value
+      })
+      if (e.target.value.length > 3) {
+        fetchUsersFn({
+          application: application,
+          search: e.target.value,
+        })
+      }
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <Stack gap={4} sx={{ padding: '10px' }}>
+          <FormMultiSelect
+            multiple={false}
+            label={'User'}
+            name={'userId'}
+            onInputChange={handleInputChange}
+            loading={gettingUsers}
+            control={control}
+            options={state.options ?? []}
+            required
+          />
+
+          <FormSingleSelect
+            label={'Profile'}
+            name={'profileIds'}
+            control={control}
+            options={
+              profiles?.map((profile) => ({
+                label: profile.name,
+                value: profile.id,
+              })) ?? []
+            }
+            required
+          />
+          <Stack gap={2} direction={'row'} sx={{ justifyContent: 'flex-end' }}>
+            <ActionButton variant="outlined" onClick={close}>
+              Cancel
+            </ActionButton>
+            <ActionButton type="submit" loading={creatingUserProfile}>
+              Confirm
+            </ActionButton>
+          </Stack>
+        </Stack>
+      </form>
+    </>
+  )
+}
+export default UserProfileRelation
+
+const StyledPopper = styled(Popper)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: '0px 4px 16px #0000000F',
+    marginTop: '1px',
+    '& .MuiAutocomplete-listbox': {
+      minWidth: '240px',
+      padding: '10px',
+      '& .MuiAutocomplete-option': {
+        padding: '10px',
+        background: 'none',
+        '&.Mui-focused': {
+          background: 'none',
+        },
+      },
+      '& .MuiCheckbox-root': {
+        padding: 0,
+        marginRight: '10px',
+      },
+    },
+    '&::-webkit-scrollbar': {
+      width: '0.5em',
+      height: '0.5em',
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(0, 0, 0, 0.15)',
+      borderRadius: '3px',
+
+      '&:hover': {
+        background: 'rgba(0, 0, 0, 0.2)',
+      },
+    },
+  },
+}))

package/src/components/ApplicationProfile/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ApplicationProfile";

package/src/components/HookForm/MultiSelect.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import { MultiSelect } from '../Input'
 import { IOption } from '../Input/types'
+import { AutocompleteInputChangeReason } from '@mui/material'
 
 interface MultiSelectProps {
   control: any
@@ -10,6 +11,11 @@ interface MultiSelectProps {
   options: IOption[]
   placeholder?: string
   loading?: boolean
+  onInputChange?: (
+    event: React.SyntheticEvent,
+    value: string,
+    reason: AutocompleteInputChangeReason,
+  ) => void
   required?: boolean
   value?: IOption[] | IOption
   onChange?: (value: IOption[] | IOption) => void
@@ -24,6 +30,7 @@ export default function FormMultiSelect({
   loading,
   required,
   multiple = true,
+  onInputChange,
   ...props
 }: MultiSelectProps) {
   return (
@@ -39,6 +46,7 @@ export default function FormMultiSelect({
             onChange={(value) => {
               field.onChange(value)
             }}
+            onInputChange={onInputChange}
             loading={loading}
             options={options || []}
             error={!!error}

package/src/components/Input/MultiSelect.tsx

@@ -2,6 +2,7 @@ import { Close, KeyboardArrowDown } from '@mui/icons-material'
 import {
   alpha,
   Autocomplete,
+  AutocompleteInputChangeReason,
   Checkbox,
   CircularProgress,
   Popper,
@@ -76,6 +77,11 @@ interface MultiSelectProps {
   loading?: boolean
   value: IOption[] | IOption
   onChange: (value: IOption[] | IOption) => void
+  onInputChange?: (
+    event: React.SyntheticEvent,
+    value: string,
+    reason: AutocompleteInputChangeReason,
+  ) => void
   required?: boolean
   error?: boolean
   helperText?: string
@@ -90,6 +96,7 @@ export default function MultiSelect({
   loading,
   value,
   onChange,
+  onInputChange,
   required,
   error,
   helperText,
@@ -109,6 +116,7 @@ export default function MultiSelect({
         if (!onChange) return
         onChange(value)
       }}
+      onInputChange={onInputChange}
       limitTags={limitTags}
       isOptionEqualToValue={(option: any, value: any) =>
         option?.value === value?.value

package/src/components/index.ts

@@ -58,7 +58,7 @@ export { default as ReactTable } from './Tables/ReactTable'
 export { default as TableFooter } from './Tables/BasicTable/TableFooter'
 export { default as DropDownButton } from './DropDownButton'
 export { default as useConfirm } from './PopupConfirm/useConfirm'
-
+export { default } from './ApplicationProfile'
 export {
   UploadFileDialog,
   Chips,