@campxdev/shared 1.10.76 → 1.10.77

package/package.json

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

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/Tables/2DTable/Table.tsx

@@ -27,6 +27,7 @@ export interface TableColumn {
   dataIndex: string
   key: string
   title?: any
+  showTitle: boolean
   render?: (cellData: any, row: any, index: number) => any
   textColor?: string
   sort?: boolean
@@ -36,7 +37,8 @@ export interface TableColumn {
 
 export interface ColumnHeader {
   title: any
-  colSpan: number
+  colSpan?: number
+  rowSpan?: number
 }
 
 interface TableProps {
@@ -83,18 +85,18 @@ export default function Table({
     totalCols = totalColumns ? [...totalColumns] : []
   }
 
-  const handleSortClick = (sortBykey) => {
+  const handleSortClick = (sortByKey) => {
     setSort((prev) => {
-      if (prev[sortBykey]) {
-        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
-        if (prev[sortBykey] === 'asc') {
-          delete prev[sortBykey]
+      if (prev[sortByKey]) {
+        if (prev[sortByKey] === 'desc') return { ...prev, [sortByKey]: 'asc' }
+        if (prev[sortByKey] === 'asc') {
+          delete prev[sortByKey]
           return { ...prev }
         }
       } else {
         return {
           ...prev,
-          [sortBykey]: 'desc',
+          [sortByKey]: 'desc',
         }
       }
     })
@@ -155,6 +157,7 @@ export default function Table({
                     isHeaderCell
                     align="center"
                     colSpan={col.colSpan}
+                    rowSpan={col.rowSpan}
                   >
                     {col.title}
                   </StyledTableCell>
@@ -162,34 +165,39 @@ export default function Table({
               </TableRow>
             )}
             <TableRow>
-              {columns.map((col, columnIndex) => (
-                <StyledTableCell
-                  key={columnIndex}
-                  columnsLength={columns.length}
-                  columnIndex={columnIndex + 1}
-                  rowIndex={0}
-                  col={col}
-                  sx={sx}
-                  align="center"
-                  isHeaderCell
-                >
-                  {col.title}
+              {columns.map(
+                (col, columnIndex) =>
+                  col.showTitle && (
+                    <StyledTableCell
+                      key={columnIndex}
+                      columnsLength={columns.length}
+                      columnIndex={columnIndex + 1}
+                      rowIndex={0}
+                      col={col}
+                      sx={sx}
+                      align="center"
+                      isHeaderCell
+                    >
+                      {col.title}
 
-                  {col.sort && (
-                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
-                      <ListItemIcon>
-                        {sort[col.dataIndex] === 'asc' ? (
-                          <SortAscIcon />
-                        ) : sort[col.dataIndex] === 'desc' ? (
-                          <SortDescIcon />
-                        ) : (
-                          <SortIcon />
-                        )}
-                      </ListItemIcon>
-                    </IconButton>
-                  )}
-                </StyledTableCell>
-              ))}
+                      {col.sort && (
+                        <IconButton
+                          onClick={() => handleSortClick(col.dataIndex)}
+                        >
+                          <ListItemIcon>
+                            {sort[col.dataIndex] === 'asc' ? (
+                              <SortAscIcon />
+                            ) : sort[col.dataIndex] === 'desc' ? (
+                              <SortDescIcon />
+                            ) : (
+                              <SortIcon />
+                            )}
+                          </ListItemIcon>
+                        </IconButton>
+                      )}
+                    </StyledTableCell>
+                  ),
+              )}
             </TableRow>
           </TableHead>
           {!loading ? (