@campxdev/shared 1.10.11 → 1.10.13

package/src/components/MyProfile/MyProfile.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable no-console */
+import { Box, Chip, Container, Typography } from '@mui/material'
+import { useQuery } from 'react-query'
+import { useNavigate } from 'react-router-dom'
+import axios from '../../config/axios'
+import PageHeader from '../PageHeader'
+import Spinner from '../Spinner'
+import Education from './Education/Education'
+import Experience from './Experience/Experience'
+import PaperPublications from './PaperPublication/PaperPublications'
+import StyledTabsContainer from './StyledTabsContainer'
+import {
+  StyledArrowIcon,
+  StyledAvatar,
+  StyledBox,
+  StyledBoxHeader,
+  StyledMainContainer,
+} from './Styles'
+import Workshop from './Workshop/Workshop'
+const classroomSubjects = [
+  {
+    classroomSubjectId: 1,
+    subjectCode: 'M1',
+    classroomName: 'ECE A',
+    year: 2,
+  },
+  {
+    classroomSubjectId: 2,
+    subjectCode: 'AEM',
+    classroomName: 'ECE C',
+    year: 3,
+  },
+]
+const MyProfile = () => {
+  const { data, isLoading } = useQuery('dashboard', () =>
+    axios.get('/square/users/dashboard').then((res) => res?.data),
+  )
+  const { data: userProfile } = useQuery('user-profile', () =>
+    axios.get('/square/users/profile').then((res) => res?.data),
+  )
+  // const { data: classroomSubjects } = useQuery('classroom-subjects', () =>
+  //   axios.get('/square/subjects/faculty').then((res) => res?.data),
+  // )
+  const navigate = useNavigate()
+
+  const handleHomeClick = () => {
+    navigate('/')
+  }
+
+  if (isLoading) {
+    return <Spinner />
+  }
+  const tabs = [
+    {
+      key: 'Experience',
+      label: 'Experience',
+      component: <Experience experiences={data?.experiences} />,
+    },
+    {
+      key: 'Paper Publications',
+      label: 'Paper Publications',
+      component: (
+        <PaperPublications
+          paperPublications={data?.papers}
+          userProfile={userProfile}
+        />
+      ),
+    },
+    {
+      key: 'Workshop',
+      label: 'Workshop',
+      component: <Workshop workshops={data?.workshops} />,
+    },
+    {
+      key: 'education',
+      label: 'Education',
+      component: <Education educations={data?.educations} />,
+    },
+  ]
+  function Years(num) {
+    switch (num) {
+      case 1:
+        return '1st'
+      case 2:
+        return '2nd'
+      case 3:
+        return '3rd'
+      case 4:
+        return '4th'
+      default:
+        ''
+    }
+  }
+
+  return (
+    <>
+      <StyledBox />
+      <PageHeader
+        title={
+          <>
+            <StyledArrowIcon onClick={handleHomeClick} />
+            <Typography variant="h1" color="white">
+              My Profile
+            </Typography>
+          </>
+        }
+      />
+      <Container maxWidth="lg">
+        <Box>
+          <StyledBoxHeader>
+            <Box sx={{ flex: 1 }}>
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+              >
+                {/* <Image
+                  alt=""
+                  radius={'10px'}
+                  src={BackgroundImg}
+                  width={'160px'}
+                  height={'160px'}
+                  fit={'cover'}
+                /> */}
+                <StyledAvatar>
+                  <Typography
+                    sx={{
+                      fontSize: '50px',
+                      color: 'blue',
+                    }}
+                  >
+                    {userProfile?.fullName[0].toUpperCase()}
+                  </Typography>
+                </StyledAvatar>
+                <Typography variant="h1">{userProfile?.fullName}</Typography>
+                <Typography variant="h4">
+                  {userProfile?.designation?.name} | Dept. of{' '}
+                  {userProfile?.department?.name}
+                </Typography>
+              </Box>
+            </Box>
+            <Box>
+              {classroomSubjects?.map((classroomSubject) => (
+                <Chip
+                  key={classroomSubject.classroomSubjectId}
+                  label={`${classroomSubject?.subjectCode} - ${
+                    classroomSubject.classroomName
+                  }, ${Years(classroomSubject?.year)} year`}
+                  sx={{
+                    marginLeft: '1rem',
+                    backgroundColor: '#149ECD1A',
+                    fontWeight: 'bold',
+                  }}
+                />
+              ))}
+            </Box>
+          </StyledBoxHeader>
+        </Box>
+
+        <StyledMainContainer>
+          <StyledTabsContainer tabs={tabs} centered />
+        </StyledMainContainer>
+      </Container>
+    </>
+  )
+}
+
+export default MyProfile

package/src/components/MyProfile/NoDataSection.tsx

@@ -0,0 +1,27 @@
+import { Typography } from '@mui/material'
+import ActionButton from '../ActionButton'
+import { DrawerButton } from '../ModalButtons'
+import { StyledSubContainer } from './Styles'
+
+const NoDataSection = ({
+  title,
+  subtitle,
+  addButtonTitle,
+  addButtonContent,
+}) => {
+  return (
+    <StyledSubContainer>
+      <Typography variant="h3">{title}</Typography>
+      <Typography variant="subtitle1">{subtitle}</Typography>
+      <DrawerButton
+        anchor={({ open }) => (
+          <ActionButton onClick={open}>{addButtonTitle}</ActionButton>
+        )}
+        content={addButtonContent}
+        title={addButtonTitle}
+      />
+    </StyledSubContainer>
+  )
+}
+
+export default NoDataSection

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

@@ -0,0 +1,88 @@
+/* eslint-disable react/jsx-key */
+import { Box, Button } from '@mui/material'
+import { useFieldArray } from 'react-hook-form'
+import { FormTextField } from '../../HookForm'
+import { RadioGroup } from '../../Input'
+import { StyledBox, StyledDeleteButton, StyledStack } from './Styles'
+
+const Authors = ({ control, selectedAuthor, setState, authorsSelect }) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'authors',
+  })
+
+  return (
+    <Box>
+      <RadioGroup
+        row
+        label="Authors"
+        name="authors"
+        required
+        value={selectedAuthor}
+        options={authorsSelect.map((item) => ({
+          label: item?.label,
+          value: item?.value,
+        }))}
+        onChange={(e) => {
+          setState((s) => {
+            s.selectedAuthor = e.target.value
+          })
+        }}
+      />
+      {selectedAuthor === 'multipleAuthors' && (
+        <Box>
+          {!fields.length && (
+            <StyledBox>
+              <Button
+                variant="text"
+                color="primary"
+                size="small"
+                onClick={() => {
+                  append({ name: '' })
+                }}
+              >
+                Add Author
+              </Button>
+            </StyledBox>
+          )}
+
+          {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>
+              ))}
+            </>
+          )}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default Authors

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

@@ -0,0 +1,52 @@
+/* eslint-disable no-console */
+/* eslint-disable react/jsx-key */
+import { Typography } from '@mui/material'
+import ActionButton from '../../ActionButton'
+import { DrawerButton } from '../../ModalButtons'
+import NoDataSection from '../NoDataSection'
+import PublicationCard from './PublicationCard'
+import { PublicationsForm } from './PublicationsForm'
+import { StyledBoxCard, StyledBoxContainer } from './Styles'
+
+const Experience = ({ paperPublications, userProfile }) => {
+  const isPaperPublication = paperPublications && paperPublications.length > 0
+
+  return isPaperPublication ? (
+    <>
+      <StyledBoxContainer>
+        <Typography variant="h3">Paper Publications</Typography>
+        <DrawerButton
+          anchor={({ open }) => (
+            <ActionButton onClick={open} variant="text">
+              +Add Paper Publication
+            </ActionButton>
+          )}
+          content={({ close }) => (
+            <PublicationsForm
+              data={null}
+              hideDialog={close}
+              userProfile={userProfile}
+            />
+          )}
+          title="Add Paper Publication"
+        />
+      </StyledBoxContainer>
+      <StyledBoxCard>
+        {paperPublications.map((data) => (
+          <PublicationCard data={data} userProfile={userProfile} />
+        ))}
+      </StyledBoxCard>
+    </>
+  ) : (
+    <NoDataSection
+      title="Paper Publication"
+      subtitle="Add Paper Publication"
+      addButtonTitle="Add Publication"
+      addButtonContent={({ close }) => (
+        <PublicationsForm data={null} hideDialog={close} />
+      )}
+    />
+  )
+}
+
+export default Experience

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

@@ -0,0 +1,80 @@
+import { Box, Card, Typography } from '@mui/material'
+import { EditButton } from '../../IconButtons'
+import Image from '../../Image/Image'
+import { DrawerButton } from '../../ModalButtons'
+import PublicationsForm from './PublicationsForm'
+import { StyledAvatar, StyledTextContainer } from './Styles'
+
+const PublicationCard = ({ userProfile, data }) => {
+  return (
+    <div>
+      <Card
+        sx={{
+          padding: '15px',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            {data?.image?.url ? (
+              <Image
+                alt=""
+                radius={'10px'}
+                src={data?.image?.url}
+                width={'100px'}
+                height={'100px'}
+                fit={'cover'}
+              />
+            ) : (
+              <StyledAvatar>
+                <Typography
+                  sx={{
+                    fontSize: '30px',
+                    color: 'blue',
+                  }}
+                >
+                  {data?.title[0].toUpperCase()}
+                </Typography>
+              </StyledAvatar>
+            )}
+            <StyledTextContainer>
+              <Typography variant="h5">{data?.title}</Typography>
+              <Typography variant="subtitle2">
+                {data?.publicationType}{' '}
+                {data?.publicationSubtype !== 'other' &&
+                  ` - ${data?.publicationSubtype}`}
+              </Typography>
+              <Typography variant="subtitle1">
+                Year of Publication: {data?.publicationYear}
+              </Typography>
+            </StyledTextContainer>
+          </Box>
+          <Box>
+            <DrawerButton
+              key={data?.id}
+              title={'Edit Paper Publication'}
+              anchor={({ open }) => <EditButton onClick={open} />}
+              content={({ close }) => (
+                <PublicationsForm
+                  data={data}
+                  hideDialog={close}
+                  userProfile={userProfile}
+                />
+              )}
+            />
+          </Box>
+        </Box>
+      </Card>
+    </div>
+  )
+}
+
+export default PublicationCard

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

@@ -0,0 +1,285 @@
+/* eslint-disable no-console */
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Stack, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQuery } from 'react-query'
+import { toast } from 'react-toastify'
+import { useImmer } from 'use-immer'
+import * as yup from 'yup'
+import axios, { axiosErrorToast } from '../../../config/axios'
+import { queryClient } from '../../../contexts/QueryClientProvider'
+import ActionButton from '../../ActionButton'
+import { FormSingleSelect, FormTextField } from '../../HookForm'
+import ImageUpload from '../../ImageUpload'
+import MediaRow from '../../MediaRow/MediaRow'
+import { Media } from '../../UploadButton/types'
+import FileUpload from '../FileUpload'
+import {
+  createUpdatePaperPublicaton,
+  getPaperPublicationSubtypes,
+} from '../service'
+import Authors from './Authors'
+const authorsSelect = [
+  {
+    label: 'Single Author',
+    value: 'singleAuthor',
+  },
+  {
+    label: 'Multiple Authors',
+    value: 'multipleAuthors',
+  },
+]
+
+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'),
+  stream: yup.string().required('Stream is required'),
+  program: yup.string().required('Program is required'),
+})
+
+export const PublicationsForm = ({ data, hideDialog, userProfile = null }) => {
+  const { control, handleSubmit, watch, setValue } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      ...data,
+      authors: [{ name: userProfile?.fullName || '' }],
+    },
+  })
+
+  const [media, setMedia] = useState<Media[]>([])
+  const [state, setState] = useImmer({
+    resource: data?.attachments || [],
+    selectedAuthor: 'singleAuthor',
+    publicationSubtypes: [],
+  })
+  const { resource, selectedAuthor, publicationSubtypes } = state
+
+  const { data: paperPublicationTypes } = useQuery(
+    'paper-publication-type',
+    () =>
+      axios.get('/square/paper-publications/types').then((res) => res?.data),
+    {
+      onSuccess: (res) => {
+        const isOthersCheck = res.includes(data?.publicationType)
+        setValue(
+          'publicationType',
+          isOthersCheck ? data?.publicationType : 'Other',
+        )
+
+        setValue(
+          'publicationOtherType',
+          isOthersCheck ? '' : data?.publicationType,
+        )
+      },
+    },
+  )
+
+  const { mutate: fetchPublicationSubtypes } = useMutation(
+    getPaperPublicationSubtypes,
+    {
+      onSuccess: (data) => {
+        setState((s) => {
+          s.publicationSubtypes = data
+        })
+      },
+    },
+  )
+  const { mutate, isLoading } = useMutation(createUpdatePaperPublicaton, {
+    onSuccess: () => {
+      toast.success(data ? 'Publication Updated' : 'Publication Added')
+      queryClient.invalidateQueries('dashboard')
+      hideDialog()
+    },
+    onError: (err) => {
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+
+  useEffect(() => {
+    fetchPublicationSubtypes(watch('publicationType'))
+    data && data?.image?.key
+      ? setMedia([
+          {
+            key: data?.image?.key,
+            url: data?.image?.url,
+            type: data?.image?.mediaType,
+          },
+        ])
+      : setMedia([])
+
+    setState((s) => {
+      s.selectedAuthor =
+        data?.authors?.length > 1 ? 'multipleAuthors' : 'singleAuthor'
+    })
+
+    setValue(
+      'authors',
+      data?.authors?.map((author) => ({ name: author })),
+    )
+  }, [data, setValue])
+
+  const onSubmit = (formData) => {
+    console.log(formData, 'formDaa')
+    const isOthers = formData.publicationType === 'Other'
+    const postBody = {
+      ...formData,
+      authors:
+        selectedAuthor === 'singleAuthor'
+          ? [userProfile?.fullName]
+          : formData?.authors?.map((author) => author?.name),
+      publicationType: isOthers
+        ? formData.publicationOtherType
+        : formData.publicationType,
+      publicationSubtype: isOthers ? 'other' : formData.publicationSubtype,
+      image: media[0]?.key || null,
+      attachments: state.resource.map((file) => file.key),
+    }
+    console.log(postBody, 'postBody')
+    mutate(postBody)
+  }
+
+  const onError = (error) => {
+    console.log(error)
+  }
+
+  const handleImageChange = (v) => {
+    setMedia([{ type: 'image', url: v.url, key: v.key }])
+  }
+
+  const handleDeleteImage = (key) => {
+    setMedia((prev) => prev.filter((m) => m.key !== key))
+  }
+
+  const handleFileInput = (e) => {
+    let filesData = e.target.files
+    let fileArray = Object.keys(filesData)
+    fileArray.forEach(async (file) => {
+      const fileData = new FormData()
+      fileData.append('file', filesData[file])
+      const originalFileName = filesData[file].name
+
+      try {
+        let fileKey = await axios.post(
+          `/square/paper-publications/attachment`,
+          fileData,
+        )
+        setState((s) => {
+          s.resource.push({
+            originalFileName: originalFileName,
+            key: fileKey?.data?.key,
+          })
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    })
+  }
+
+  const onDelete = (fileKey) => {
+    setState((s) => {
+      s.resource = resource.filter((item) => item.key !== fileKey)
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <Stack gap={2.5}>
+        <>
+          {!media.length ? (
+            <ImageUpload
+              key={media.length}
+              onFileUploaded={handleImageChange}
+              postUrl="/square/paper-publications/image"
+            />
+          ) : (
+            <MediaRow list={media} onDelete={handleDeleteImage} />
+          )}
+          <FormTextField
+            control={control}
+            name="title"
+            label="Title"
+            required
+          />
+
+          <Authors
+            control={control}
+            selectedAuthor={selectedAuthor}
+            setState={setState}
+            authorsSelect={authorsSelect}
+          />
+
+          <Typography variant="h5">{userProfile?.fullName}</Typography>
+          <FormSingleSelect
+            name="publicationType"
+            label="Publication Type"
+            control={control}
+            options={paperPublicationTypes?.map((item) => ({
+              value: item,
+              label: item,
+            }))}
+            required
+            onChange={(e) => {
+              setValue('publicationType', e.target.value)
+              fetchPublicationSubtypes(e.target.value)
+            }}
+          />
+          {watch('publicationType') === 'Other' ? (
+            <FormTextField
+              name="publicationOtherType"
+              label="Publication Type Name"
+              control={control}
+              required
+            />
+          ) : (
+            <FormSingleSelect
+              name="publicationSubtype"
+              label="Sub Type"
+              control={control}
+              options={publicationSubtypes?.map((item) => ({
+                value: item,
+                label: item,
+              }))}
+              required
+            />
+          )}
+          <FormTextField
+            name="publicationYear"
+            label="Year of Publication"
+            control={control}
+            required
+          />
+          <FormTextField
+            name="stream"
+            label="Stream"
+            control={control}
+            required
+          />
+          <FormTextField
+            name="program"
+            label="Program"
+            control={control}
+            required
+          />
+          <FileUpload
+            handleFileInput={handleFileInput}
+            onDelete={onDelete}
+            resource={resource}
+          />
+        </>
+      </Stack>
+      <Stack direction="row" gap={2} mt={3}>
+        <ActionButton type="submit" fullWidth loading={isLoading}>
+          {data ? 'Edit' : 'Submit'}
+        </ActionButton>
+        <ActionButton variant="outlined" fullWidth onClick={() => hideDialog()}>
+          Cancel
+        </ActionButton>
+      </Stack>
+    </form>
+  )
+}
+
+export default PublicationsForm