@campxdev/shared 1.10.76 → 1.10.78

package/package.json

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

package/src/components/Input/MultiSelect.tsx

@@ -90,7 +90,6 @@ interface MultiSelectProps {
   onOpen?: (e: any) => void
   noOptionsText?: string
 }
-
 export default function MultiSelect({
   name,
   options,

package/src/components/MyProfile/Education/EducationForm.tsx

@@ -82,18 +82,20 @@ export const EducationForm = ({ data, hideDialog }) => {
             label="Institution"
             required
           />
-          <FormDatePicker
-            control={control}
-            name="startDate"
-            label="From Date"
-            required
-          />
-          <FormDatePicker
-            control={control}
-            name="endDate"
-            label="To Date"
-            required
-          />
+          <Stack direction="row" gap={2}>
+            <FormDatePicker
+              control={control}
+              name="startDate"
+              label="From Date"
+              required
+            />
+            <FormDatePicker
+              control={control}
+              name="endDate"
+              label="To Date"
+              required
+            />
+          </Stack>
           <FormTextField
             control={control}
             multiline

package/src/components/MyProfile/Experience/ExperienceForm.tsx

@@ -17,10 +17,14 @@ import {
 import { createUpdateExperience } from '../service'
 
 const schema = yup.object().shape({
-  experienceType: yup.string().required('Experience Type is required'),
+  experienceType: yup.string().required('Experience type is required'),
   title: yup.string().required('Title is required'),
-  organizationName: yup.string().required('Organization Name is required'),
-  fromDate: yup.string().required('FromDate is Required'),
+  organizationName: yup.string().required('Organization name is required'),
+  fromDate: yup.string().required('From date is Required'),
+  toDate: yup.string().when('currentlyWorking', {
+    is: (val) => !val,
+    then: yup.string().required('To date is Required'),
+  }),
 })
 
 export const ExperienceForm = ({ data, hideDialog }) => {
@@ -63,6 +67,7 @@ export const ExperienceForm = ({ data, hideDialog }) => {
   }
   const selectedType = watch('experienceType')
   const currentlyWorking = watch('currentlyWorking')
+  const isEmploymentType = selectedType === 'Employment'
 
   return (
     <form onSubmit={handleSubmit(onSubmit, onError)}>
@@ -82,7 +87,7 @@ export const ExperienceForm = ({ data, hideDialog }) => {
             <FormTextField
               control={control}
               name="title"
-              label="Title"
+              label={isEmploymentType ? 'Job Title' : `${selectedType} Title`}
               required
             />
             <FormTextField
@@ -96,20 +101,22 @@ export const ExperienceForm = ({ data, hideDialog }) => {
               name="currentlyWorking"
               label="Currently Working"
             />
-            <FormDatePicker
-              control={control}
-              name="fromDate"
-              label="From"
-              required
-            />
-            {!currentlyWorking && (
+            <Stack direction="row" gap={2}>
               <FormDatePicker
                 control={control}
-                name="toDate"
-                label="To"
+                name="fromDate"
+                label="From"
                 required
               />
-            )}
+              {!currentlyWorking && (
+                <FormDatePicker
+                  control={control}
+                  name="toDate"
+                  label="To"
+                  required
+                />
+              )}
+            </Stack>
 
             <FormTextField
               control={control}

package/src/components/MyProfile/MyProfile.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { Box, Chip, Container, Typography } from '@mui/material'
 import { useQuery } from 'react-query'
 import axios from '../../config/axios'
@@ -31,7 +30,7 @@ const MyProfile = ({ close }) => {
   const { data: classroomSubjects } = useQuery('classroom-subjects', () =>
     axios.get('/square/subjects/faculty').then((res) => res?.data),
   )
-  const { data: ResearchProject } = useQuery('research-projects', () =>
+  const { data: researchProject } = useQuery('research-projects', () =>
     axios.get('/square/research-projects').then((res) => res?.data),
   )
 
@@ -71,7 +70,7 @@ const MyProfile = ({ close }) => {
     {
       key: 'research projects',
       label: 'Research Projects',
-      component: <ResearchProjects ResearchProject={ResearchProject} />,
+      component: <ResearchProjects researchProject={researchProject} />,
     },
   ]
   function Years(num) {

package/src/components/MyProfile/PaperPublication/Authors.tsx

@@ -1,11 +1,18 @@
-/* eslint-disable react/jsx-key */
-import { Box, Button } from '@mui/material'
+import { Box, Button, Chip } from '@mui/material'
 import { useFieldArray } from 'react-hook-form'
 import { FormTextField } from '../../HookForm'
 import { RadioGroup } from '../../Input'
-import { StyledBox, StyledDeleteButton, StyledStack } from './Styles'
+import { StyledGrid, StyledStack } from './Styles'
 
-const Authors = ({ control, selectedAuthor, setState, authorsSelect }) => {
+const Authors = ({
+  control,
+  selectedAuthor,
+  setState,
+  authorsSelect,
+  userName,
+  watch,
+  setValue,
+}) => {
   const { fields, append, remove } = useFieldArray({
     control,
     name: 'authors',
@@ -29,56 +36,45 @@ const Authors = ({ control, selectedAuthor, setState, authorsSelect }) => {
           })
         }}
       />
+      {selectedAuthor === 'singleAuthor' && (
+        <Box sx={{ marginTop: 1 }}>
+          <Chip variant="outlined" color="primary" label={userName} disabled />
+        </Box>
+      )}
       {selectedAuthor === 'multipleAuthors' && (
         <Box>
-          {!fields.length && (
-            <StyledBox>
-              <Button
-                variant="text"
-                color="primary"
-                size="small"
-                onClick={() => {
-                  append({ name: '' })
-                }}
-              >
-                Add Author
-              </Button>
-            </StyledBox>
-          )}
+          <StyledStack direction={'row'} gap={1}>
+            <FormTextField
+              control={control}
+              name="newAuthor"
+              label="Author Name"
+              required
+            />
+            <Button
+              variant="text"
+              color="primary"
+              size="small"
+              onClick={() => {
+                append({ name: watch('newAuthor') })
+                setValue('newAuthor', '')
+              }}
+            >
+              + Add
+            </Button>
+          </StyledStack>
 
-          {fields && (
-            <>
-              <StyledBox>
-                <Button
-                  variant="text"
-                  color="primary"
-                  size="small"
-                  onClick={() => {
-                    append({ name: '' })
-                  }}
-                >
-                  Add Author
-                </Button>
-              </StyledBox>
-              {fields.map((author, index) => (
-                <StyledStack
-                  direction={'row'}
-                  gap={2}
-                  sx={{ alignItems: 'flex-end' }}
-                >
-                  <FormTextField
-                    control={control}
-                    name={`authors[${index}].name`}
-                    label="Details about Authors"
-                    required
-                  />
-                  {index > 0 && (
-                    <StyledDeleteButton onClick={() => remove(index)} />
-                  )}
-                </StyledStack>
-              ))}
-            </>
-          )}
+          <StyledGrid>
+            {fields.map((author: any, index) => (
+              <Chip
+                key={author.id}
+                variant="outlined"
+                color="primary"
+                label={author.name}
+                onDelete={index === 0 ? null : () => remove(index)}
+                disabled={index === 0}
+              />
+            ))}
+          </StyledGrid>
         </Box>
       )}
     </Box>

package/src/components/MyProfile/PaperPublication/PublicationsForm.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { yupResolver } from '@hookform/resolvers/yup'
-import { Stack, Typography } from '@mui/material'
+import { Stack } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useMutation, useQuery } from 'react-query'
@@ -34,7 +34,10 @@ const authorsSelect = [
 const schema = yup.object().shape({
   title: yup.string().required('Title is required'),
   publicationType: yup.string().required('Publication Type is required'),
-  publicationYear: yup.number().required('Year of Publication is required'),
+  publicationYear: yup
+    .number()
+    .typeError('Year of Publication must be a number')
+    .required('Year of Publication is required'),
   stream: yup.string().required('Stream is required'),
   program: yup.string().required('Program is required'),
 })
@@ -123,7 +126,6 @@ export const PublicationsForm = ({ data, hideDialog, userProfile = null }) => {
   }, [data, setValue])
 
   const onSubmit = (formData) => {
-    console.log(formData, 'formDaa')
     const isOthers = formData.publicationType === 'Other'
     const postBody = {
       ...formData,
@@ -138,7 +140,6 @@ export const PublicationsForm = ({ data, hideDialog, userProfile = null }) => {
       image: media[0]?.key || null,
       attachments: state.resource.map((file) => file.key),
     }
-    console.log(postBody, 'postBody')
     mutate(postBody)
   }
 
@@ -210,9 +211,11 @@ export const PublicationsForm = ({ data, hideDialog, userProfile = null }) => {
             selectedAuthor={selectedAuthor}
             setState={setState}
             authorsSelect={authorsSelect}
+            userName={userProfile?.fullName}
+            watch={watch}
+            setValue={setValue}
           />
 
-          <Typography variant="h5">{userProfile?.fullName}</Typography>
           <FormSingleSelect
             name="publicationType"
             label="Publication Type"

package/src/components/MyProfile/PaperPublication/Styles.tsx

@@ -46,6 +46,13 @@ export const StyledDeleteButton = styled(DeleteButton)({
 })
 
 export const StyledStack = styled(Stack)({
-  alignItems: 'center',
+  alignItems: 'flex-end',
   justifyContent: 'space-between',
 })
+
+export const StyledGrid = styled(Stack)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(120px, max-content))',
+  gap: '10px',
+  marginTop: '10px',
+})

package/src/components/MyProfile/ResearchProjects/ResearchProjects.tsx

@@ -3,52 +3,39 @@ import StyledTabsContainer from '../StyledTabsContainer'
 import ResearchProjectData from './ResearchProjectData'
 import ResearchProjectForm from './ResearchProjectForm'
 
-function ResearchProjects({ ResearchProject }) {
-  const test = []
-  const Research = true
-  const Ongoing = ResearchProject?.filter(
-    (project) => project?.projectStatus == 'ongoing',
-  )
-  const Completed = test?.filter(
-    (project) => project?.projectStatus == 'completed',
-  )
-
+function ResearchProjects({ researchProject }) {
   const tabs = [
     {
-      key: 'Ongoing',
-      label: 'Ongoing',
-      component: (
-        <ResearchProjectData title={'Ongoing'} ResearchProject={Ongoing} />
-      ),
-    },
-    {
-      key: 'Completed',
-      label: 'Completed',
+      key: 'ResearchProject',
+      label: 'Research Project',
       component: (
-        <ResearchProjectData title={'Completed'} ResearchProject={Completed} />
+        <ResearchProjectData
+          title={'Research Project'}
+          ResearchProject={researchProject}
+        />
       ),
     },
   ]
-  return (
+  const isResearchProject = researchProject && researchProject?.length > 0
+
+  return isResearchProject ? (
     <>
-      {Research ? (
-        <StyledTabsContainer
-          tabs={tabs}
-          centered
-          textColor="primary"
-          indicatorBackgroundColor="primary"
-        />
-      ) : (
-        <NoDataSection
-          title="ResearchProjects"
-          subtitle="Add ResearchProjects"
-          addButtonTitle="Add Your ResearchProjects"
-          addButtonContent={({ close }) => (
-            <ResearchProjectForm close={close} data={[]} />
-          )}
-        />
-      )}
+      <StyledTabsContainer
+        tabs={tabs}
+        centered
+        textColor="primary"
+        indicatorBackgroundColor="primary"
+      />
     </>
+  ) : (
+    <NoDataSection
+      title="Research Project"
+      subtitle="Add Research Project"
+      addButtonTitle="Add Your Research Project"
+      addButtonContent={({ close }) => (
+        <ResearchProjectForm data={null} close={close} />
+      )}
+    />
   )
 }
 

package/src/components/MyProfile/Workshop/WorkshopForm.tsx

@@ -171,18 +171,20 @@ export const WorkshopForm = ({ data, hideDialog }) => {
             label="Organization"
             required
           />
-          <FormDatePicker
-            control={control}
-            name="fromDate"
-            label="From Date"
-            required
-          />
-          <FormDatePicker
-            control={control}
-            name="toDate"
-            label="To Date"
-            required
-          />
+          <Stack direction="row" gap={2}>
+            <FormDatePicker
+              control={control}
+              name="fromDate"
+              label="From Date"
+              required
+            />
+            <FormDatePicker
+              control={control}
+              name="toDate"
+              label="To Date"
+              required
+            />
+          </Stack>
           <FormTextField
             control={control}
             name="stream"

package/src/components/Selectors/ClassRoomSelector.tsx

@@ -0,0 +1,97 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type ClassRoomSelectorProps = {
+  name?: string
+  label: string
+  filters?: { programId: number; courseId: number; batch: string }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+  api?: string
+} & SelectProps
+const ClassRoomSelector = (props: ClassRoomSelectorProps) => {
+  const {
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    allowAll = true,
+    api = '/square/classrooms/filters',
+  } = props
+  const [options, setOptions] = useState([])
+  const [prevProgramId, setPrevProgramId] = useState(null)
+  const [prevBatch, setPrevBatch] = useState(null)
+  const [prevCourseId, setPrevCourseId] = useState(null)
+  const handleOpen = () => {
+    if (filters) {
+      if (
+        (filters?.programId && filters?.programId !== prevProgramId) ||
+        (filters?.batch &&
+          filters?.batch !== prevBatch &&
+          filters?.programId) ||
+        (filters?.courseId && filters?.courseId !== prevCourseId)
+      ) {
+        setOptions([])
+        axios
+          .get(api, {
+            params: filters,
+          })
+          .then((response) => {
+            setOptions(response.data)
+            setPrevProgramId(filters.programId)
+            setPrevBatch(filters.batch)
+            setPrevCourseId(filters.courseId)
+          })
+          .catch((error) => {
+            console.error('Error fetching data from the API:', error)
+          })
+      }
+    } else if (options.length === 0) {
+      axios
+        .get(api)
+        .then((response) => {
+          setOptions(response.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+
+  const handleOptions =
+    options.length > 0
+      ? [
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
+          ...options.map((item) => ({
+            label: `${item.name}`,
+            value: `${item.id}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      defaultValue="all"
+      {...props}
+    />
+  )
+}
+export default ClassRoomSelector

package/src/components/Selectors/CourseSelector.tsx

@@ -12,6 +12,7 @@ type CourseSelectorProps = {
   error?: boolean
   helperText?: string
   api?: string
+  valueByUniqueId?: boolean
 } & SelectProps
 export default function CourseSelector(props: CourseSelectorProps) {
   const {
@@ -20,7 +21,8 @@ export default function CourseSelector(props: CourseSelectorProps) {
     label,
     onChange,
     allowAll = true,
-    api = '/square/courses',
+    valueByUniqueId = false,
+    api = '/paymentx/domain/courses',
   } = props
   const [options, setOptions] = useState([])
 
@@ -47,7 +49,7 @@ export default function CourseSelector(props: CourseSelectorProps) {
           ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
           ...options.map((item) => ({
             label: `${item.courseName} `,
-            value: `${item.id}`,
+            value: !valueByUniqueId ? `${item.id}` : `${item.uniqueId}`,
           })),
         ]
       : allowAll

package/src/components/Selectors/DepartmentSelector.tsx

@@ -0,0 +1,67 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type DepartmentSelectorProps = {
+  name?: string
+  label: string
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+  api?: string
+} & SelectProps
+export default function DepartmentSelector(props: DepartmentSelectorProps) {
+  const {
+    name,
+    required = false,
+    label,
+    onChange,
+    allowAll = true,
+    api = '/hrms/departments',
+  } = props
+  const [options, setOptions] = useState([])
+
+  const handleOpen = () => {
+    if (options.length === 0) {
+      axios
+        .get(api)
+        .then((response) => {
+          setOptions(response.data.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+  const handleOptions =
+    options.length > 0
+      ? [
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
+          ...options.map((item) => ({
+            label: `${item.name} `,
+            value: `${item._id}`,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      {...props}
+    />
+  )
+}