@campxdev/shared 1.10.40 → 1.10.42

package/src/components/ApplicationProfile/DepartmentFilter.tsx

@@ -1,77 +1,77 @@
-import { Button, Stack } from '@mui/material'
-import { useEffect } from 'react'
-import { useQuery } from 'react-query'
-import { useImmer } from 'use-immer'
-import axios from '../../config/axios'
-import { SingleSelect } from '../Input'
-import Spinner from '../Spinner'
-
-const defaultState = {
-  departmentId: '',
-}
-
-const getDepartments = () => {
-  return axios.get('/hrms/departments').then((res) => res.data?.data)
-}
-
-export default function DepartmentFilter({
-  close,
-  appliedFilters,
-  setAppliedFilters,
-}) {
-  const [filter, setFilter] = useImmer(defaultState)
-
-  const { data, isLoading } = useQuery('department', () => getDepartments())
-
-  useEffect(() => {
-    setFilter({ departmentId: appliedFilters.filters.departmentId })
-  }, [])
-
-  const applyFilter = () => {
-    close()
-    setAppliedFilters((s) => {
-      s.filters.departmentId = filter.departmentId
-      s.filtersApplied = filter.departmentId ? true : false
-    })
-  }
-  const clearFilter = () => {
-    setAppliedFilters((s) => {
-      s.filters.departmentId = ''
-      s.filtersApplied = false
-    })
-    close()
-  }
-
-  if (isLoading) return <Spinner />
-  return (
-    <>
-      <Stack gap={3}>
-        <SingleSelect
-          label="Select Department"
-          onChange={(e) => {
-            setFilter((s) => {
-              s.departmentId = e.target.value
-            })
-          }}
-          value={filter.departmentId}
-          options={
-            data &&
-            data?.map((item) => ({
-              label: item?.name,
-              value: item?._id,
-            }))
-          }
-        />
-
-        <Stack direction="row" gap={2} mt={0.5}>
-          <Button fullWidth onClick={applyFilter}>
-            Apply Filters
-          </Button>
-          <Button variant="outlined" fullWidth onClick={clearFilter}>
-            Clear Filters
-          </Button>
-        </Stack>
-      </Stack>
-    </>
-  )
-}
+import { Button, Stack } from '@mui/material'
+import { useEffect } from 'react'
+import { useQuery } from 'react-query'
+import { useImmer } from 'use-immer'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+import Spinner from '../Spinner'
+
+const defaultState = {
+  departmentId: '',
+}
+
+const getDepartments = () => {
+  return axios.get('/hrms/departments').then((res) => res.data?.data)
+}
+
+export default function DepartmentFilter({
+  close,
+  appliedFilters,
+  setAppliedFilters,
+}) {
+  const [filter, setFilter] = useImmer(defaultState)
+
+  const { data, isLoading } = useQuery('department', () => getDepartments())
+
+  useEffect(() => {
+    setFilter({ departmentId: appliedFilters.filters.departmentId })
+  }, [])
+
+  const applyFilter = () => {
+    close()
+    setAppliedFilters((s) => {
+      s.filters.departmentId = filter.departmentId
+      s.filtersApplied = filter.departmentId ? true : false
+    })
+  }
+  const clearFilter = () => {
+    setAppliedFilters((s) => {
+      s.filters.departmentId = ''
+      s.filtersApplied = false
+    })
+    close()
+  }
+
+  if (isLoading) return <Spinner />
+  return (
+    <>
+      <Stack gap={3}>
+        <SingleSelect
+          label="Select Department"
+          onChange={(e) => {
+            setFilter((s) => {
+              s.departmentId = e.target.value
+            })
+          }}
+          value={filter.departmentId}
+          options={
+            data &&
+            data?.map((item) => ({
+              label: item?.name,
+              value: item?._id,
+            }))
+          }
+        />
+
+        <Stack direction="row" gap={2} mt={0.5}>
+          <Button fullWidth onClick={applyFilter}>
+            Apply Filters
+          </Button>
+          <Button variant="outlined" fullWidth onClick={clearFilter}>
+            Clear Filters
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  )
+}

package/src/components/ApplicationProfile/UserProfileRelation.tsx

@@ -1,140 +1,174 @@
-import { yupResolver } from '@hookform/resolvers/yup'
-import { Stack } from '@mui/material'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
-import { toast } from 'react-toastify'
-import { useImmer } from 'use-immer'
-import { axiosErrorToast } from '../../config/axios'
-import ActionButton from '../ActionButton'
-import { FormMultiSelect } from '../HookForm'
-import {
-  editUserProfileSchema,
-  fetchUsers,
-  updateCreateUserApplicationProfile,
-  userProfileSchema,
-} from './services'
-interface UserProps {
-  options: {
-    label: any
-    value: any
-  }[]
-  inputValue: string
-}
-function UserProfileRelation({ close, application, profiles, data }) {
-  const [state, setState] = useImmer<UserProps>({
-    options: [],
-    inputValue: '',
-  })
-  const queryClient = useQueryClient()
-
-  const { control, handleSubmit } = useForm({
-    defaultValues: {
-      profileIds:
-        data?.profiles?.map((profile) => ({
-          label: profile.name,
-          value: profile.id,
-        })) ?? [],
-    },
-    resolver: yupResolver(data ? editUserProfileSchema : userProfileSchema),
-  })
-
-  const { mutate, isLoading: creatingUserProfile } = useMutation(
-    updateCreateUserApplicationProfile,
-    {
-      onSuccess: (res) => {
-        queryClient.invalidateQueries(`application-users`)
-        toast.success(`User profile ${data ? 'updated' : 'added'} 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.result?.map((item) => ({
-            label: `${item.fullName} ( ${item.email} )`,
-            value: item.id,
-          }))
-        })
-      },
-    },
-  )
-  const onSubmit = (formData) => {
-    mutate({
-      id: data?.id,
-      application: application,
-      profileIds: formData.profileIds?.map((profile) => profile.value) ?? [],
-      userId: data ? data.id : +formData.userId?.value,
-    })
-  }
-  const onError = (err) => {
-    // eslint-disable-next-line no-console
-    console.log(err)
-  }
-
-  const handleInputChange = (e) => {
-    //TODO : debounce
-    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' }}>
-          {!data && (
-            <FormMultiSelect
-              multiple={false}
-              label={'User'}
-              name={'userId'}
-              onInputChange={handleInputChange}
-              loading={gettingUsers}
-              control={control}
-              options={state.options ?? []}
-              required
-            />
-          )}
-
-          <FormMultiSelect
-            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
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Stack } from '@mui/material'
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import { useImmer } from 'use-immer'
+import axios, { axiosErrorToast } from '../../config/axios'
+import ActionButton from '../ActionButton'
+import { FormMultiSelect, FormSingleSelect } from '../HookForm'
+import Spinner from '../Spinner'
+import {
+  editUserProfileSchema,
+  fetchUsers,
+  updateCreateUserApplicationProfile,
+  userProfileSchema,
+} from './services'
+interface UserProps {
+  options: {
+    label: any
+    value: any
+  }[]
+  inputValue: string
+}
+const getDepartments = () => {
+  return axios.get('/hrms/departments').then((res) => res?.data?.data)
+}
+function UserProfileRelation({ close, application, profiles, data }) {
+  const [state, setState] = useImmer<UserProps>({
+    options: [],
+    inputValue: '',
+  })
+  const queryClient = useQueryClient()
+  const { data: departments, isLoading } = useQuery('get-department', () =>
+    getDepartments(),
+  )
+
+  const { control, handleSubmit, watch } = useForm({
+    defaultValues: {
+      profileIds:
+        data?.profiles?.map((profile) => ({
+          label: profile.name,
+          value: profile.id,
+        })) ?? [],
+      departmentId: null,
+    },
+    resolver: yupResolver(data ? editUserProfileSchema : userProfileSchema),
+  })
+
+  const { mutate, isLoading: creatingUserProfile } = useMutation(
+    updateCreateUserApplicationProfile,
+    {
+      onSuccess: (res) => {
+        queryClient.invalidateQueries(`application-users`)
+        toast.success(`User profile ${data ? 'updated' : 'added'} successfully`)
+        close()
+      },
+      onError: (err) => {
+        // eslint-disable-next-line no-console
+        console.log(err)
+        axiosErrorToast(err)
+      },
+    },
+  )
+
+  useEffect(() => {
+    if (watch('departmentId')) {
+      fetchUsersFn({
+        application: application,
+        departmentId: watch('departmentId'),
+      })
+    }
+  }, [watch('departmentId')])
+
+  const { mutate: fetchUsersFn, isLoading: gettingUsers } = useMutation(
+    fetchUsers,
+    {
+      onSuccess: (res) => {
+        setState((s) => {
+          s.options = res.result?.map((item) => ({
+            label: `${item.fullName} ( ${item.email} )`,
+            value: item.id,
+          }))
+        })
+      },
+    },
+  )
+  const onSubmit = (formData) => {
+    mutate({
+      userIds: formData?.userId?.map((userId) => +userId.value) ?? [],
+      application: application,
+      profileIds: formData.profileIds?.map((profile) => profile.value) ?? [],
+      ...(data && { userId: data?.id }),
+    })
+  }
+  const onError = (err) => {
+    // eslint-disable-next-line no-console
+    console.log(err)
+  }
+
+  const handleInputChange = (e) => {
+    //TODO : debounce
+    if (e) {
+      setState((s) => {
+        s.inputValue = e.target.value
+      })
+      if (e.target.value.length >= 3) {
+        fetchUsersFn({
+          application: application,
+          search: e.target.value,
+          departmentId: watch('departmentId') ?? null,
+        })
+      }
+    }
+  }
+
+  if (isLoading) {
+    return <Spinner />
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <Stack gap={4} sx={{ padding: '10px' }}>
+          {!data && (
+            <FormSingleSelect
+              control={control}
+              name="departmentId"
+              label="Department"
+              options={departments?.map((department) => ({
+                label: department.name,
+                value: department._id,
+              }))}
+            />
+          )}
+
+          {!data && (
+            <FormMultiSelect
+              label={'User'}
+              name={'userId'}
+              onInputChange={handleInputChange}
+              loading={gettingUsers}
+              control={control}
+              options={state.options ?? []}
+              required
+            />
+          )}
+
+          <FormMultiSelect
+            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

package/src/components/ApplicationProfile/index.tsx

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

package/src/components/ApplicationProfile/services.ts

@@ -1,83 +1,76 @@
-import { AxiosRequestConfig } from 'axios'
-import { id } from 'date-fns/locale'
-import * as yup from 'yup'
-import axios from '../../config/axios'
-export const defaultFilterObj = {
-  filters: {
-    search: null,
-    limit: 10,
-    offset: 0,
-  },
-  filtersApplied: false,
-}
-
-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.array().min(1).required('Profile is required'),
-})
-
-export const editUserProfileSchema = yup.object().shape({
-  profileIds: yup.array().min(1).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 {
-  id?: number
-  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 updateCreateUserApplicationProfile = (
-  postBody: ApplicationUserProfile,
-) => {
-  const config: AxiosRequestConfig = {
-    method: id ? 'PUT' : 'POST',
-    url: id
-      ? `/square/profile-permissions/edit-user-permissions`
-      : '/square/profile-permissions/add-user',
-    data: postBody,
-  }
-  return axios(config).then((res) => res.data)
-}
+import { AxiosRequestConfig } from 'axios'
+import * as yup from 'yup'
+import axios from '../../config/axios'
+export const defaultFilterObj = {
+  filters: {
+    search: null,
+    limit: 10,
+    offset: 0,
+  },
+  filtersApplied: false,
+}
+
+export const userProfileSchema = yup.object().shape({
+  userId: yup.array().min(1).required('User is required'),
+  profileIds: yup.array().min(1).required('Profile is required'),
+})
+
+export const editUserProfileSchema = yup.object().shape({
+  profileIds: yup.array().min(1).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 {
+  userId?: number
+  application: string
+  userIds: 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 updateCreateUserApplicationProfile = (
+  postBody: ApplicationUserProfile,
+) => {
+  const config: AxiosRequestConfig = {
+    method: postBody?.userId ? 'PUT' : 'POST',
+    url: postBody?.userId
+      ? `/square/profile-permissions/edit-user-permissions`
+      : '/square/profile-permissions/add-user',
+    data: postBody,
+  }
+  return axios(config).then((res) => res.data)
+}