@campxdev/shared 1.10.41 → 1.10.42

package/package.json

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

package/src/components/ApplicationProfile/UserProfileRelation.tsx

@@ -1,12 +1,14 @@
 import { yupResolver } from '@hookform/resolvers/yup'
 import { Stack } from '@mui/material'
+import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
 import { toast } from 'react-toastify'
 import { useImmer } from 'use-immer'
-import { axiosErrorToast } from '../../config/axios'
+import axios, { axiosErrorToast } from '../../config/axios'
 import ActionButton from '../ActionButton'
-import { FormMultiSelect } from '../HookForm'
+import { FormMultiSelect, FormSingleSelect } from '../HookForm'
+import Spinner from '../Spinner'
 import {
   editUserProfileSchema,
   fetchUsers,
@@ -20,20 +22,27 @@ interface UserProps {
   }[]
   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 } = useForm({
+  const { control, handleSubmit, watch } = useForm({
     defaultValues: {
       profileIds:
         data?.profiles?.map((profile) => ({
           label: profile.name,
           value: profile.id,
         })) ?? [],
+      departmentId: null,
     },
     resolver: yupResolver(data ? editUserProfileSchema : userProfileSchema),
   })
@@ -54,6 +63,15 @@ function UserProfileRelation({ close, application, profiles, data }) {
     },
   )
 
+  useEffect(() => {
+    if (watch('departmentId')) {
+      fetchUsersFn({
+        application: application,
+        departmentId: watch('departmentId'),
+      })
+    }
+  }, [watch('departmentId')])
+
   const { mutate: fetchUsersFn, isLoading: gettingUsers } = useMutation(
     fetchUsers,
     {
@@ -69,10 +87,10 @@ function UserProfileRelation({ close, application, profiles, data }) {
   )
   const onSubmit = (formData) => {
     mutate({
-      id: data?.id,
+      userIds: formData?.userId?.map((userId) => +userId.value) ?? [],
       application: application,
       profileIds: formData.profileIds?.map((profile) => profile.value) ?? [],
-      userId: data ? data.id : +formData.userId?.value,
+      ...(data && { userId: data?.id }),
     })
   }
   const onError = (err) => {
@@ -86,22 +104,38 @@ function UserProfileRelation({ close, application, profiles, data }) {
       setState((s) => {
         s.inputValue = e.target.value
       })
-      if (e.target.value.length > 3) {
+      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
-              multiple={false}
               label={'User'}
               name={'userId'}
               onInputChange={handleInputChange}

package/src/components/ApplicationProfile/services.ts

@@ -1,5 +1,4 @@
 import { AxiosRequestConfig } from 'axios'
-import { id } from 'date-fns/locale'
 import * as yup from 'yup'
 import axios from '../../config/axios'
 export const defaultFilterObj = {
@@ -12,13 +11,7 @@ export const defaultFilterObj = {
 }
 
 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'),
+  userId: yup.array().min(1).required('User is required'),
   profileIds: yup.array().min(1).required('Profile is required'),
 })
 
@@ -50,9 +43,9 @@ export const fetchProfiles = (application) => {
 }
 
 interface ApplicationUserProfile {
-  id?: number
+  userId?: number
   application: string
-  userId: number
+  userIds: number[]
   profileIds: number[]
 }
 export const createApplicationUserProfile = (
@@ -73,8 +66,8 @@ export const updateCreateUserApplicationProfile = (
   postBody: ApplicationUserProfile,
 ) => {
   const config: AxiosRequestConfig = {
-    method: id ? 'PUT' : 'POST',
-    url: id
+    method: postBody?.userId ? 'PUT' : 'POST',
+    url: postBody?.userId
       ? `/square/profile-permissions/edit-user-permissions`
       : '/square/profile-permissions/add-user',
     data: postBody,