@campxdev/shared 1.10.11 → 1.10.12

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

@@ -0,0 +1,51 @@
+import { Box, Stack, styled } from '@mui/material'
+import { DeleteButton } from '../../IconButtons'
+
+export const StyledBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'flex-end',
+})
+
+export const StyledBoxContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 5px',
+})
+
+export const StyledBoxCard = styled(Box)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
+  gap: '1rem',
+})
+
+export const StyledAvatar = styled(Box)({
+  width: '100px',
+  height: '100px',
+  borderRadius: '10px',
+  border: '1px solid #E5E5E5',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#E5E5E5',
+})
+
+export const StyledTextContainer = styled(Box)({
+  marginTop: '8px',
+  marginLeft: '20px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+})
+
+export const StyledDeleteButton = styled(DeleteButton)({
+  border: '1px solid #0000001A',
+  borderRadius: '10px',
+  width: '50px',
+  height: '50px',
+})
+
+export const StyledStack = styled(Stack)({
+  alignItems: 'center',
+  justifyContent: 'space-between',
+})

package/src/components/MyProfile/StyledTabsContainer.tsx

@@ -0,0 +1,53 @@
+import { Tab } from '@mui/material'
+import { ChangeEvent, ReactNode, useEffect, useState } from 'react'
+import { StyledComponentWrapper, StyledTabs } from './Styles'
+
+export interface TabsContainerProps {
+  tabs: {
+    key: string
+    label: string
+    component: ReactNode
+  }[]
+  size?: 'small' | 'medium'
+  onTabChange?: (tabKey: string) => void
+  centered: any
+  textColor?: any
+  indicatorBackgroundColor?: any
+}
+
+export default function StyledTabsContainer({
+  tabs,
+  onTabChange,
+  textColor,
+  indicatorBackgroundColor,
+}: TabsContainerProps) {
+  const [currentTab, setCurrentTab] = useState(tabs[0].key)
+
+  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
+    setCurrentTab(value)
+    onTabChange && onTabChange(value)
+  }
+  useEffect(() => {
+    setCurrentTab(tabs[0].key)
+  }, [])
+
+  return (
+    <>
+      <StyledTabs
+        onChange={handleTabsChange}
+        value={currentTab}
+        size="small"
+        centered
+        textColor={textColor}
+        indicatorBackgroundColor={indicatorBackgroundColor}
+      >
+        {tabs.map((tab) => (
+          <Tab key={tab.key} label={tab.label} value={tab.key} />
+        ))}
+      </StyledTabs>
+      <StyledComponentWrapper>
+        {tabs.find((tab) => tab.key === currentTab)?.component}
+      </StyledComponentWrapper>
+    </>
+  )
+}

package/src/components/MyProfile/Styles.tsx

@@ -0,0 +1,115 @@
+import { KeyboardArrowLeft } from '@mui/icons-material'
+import { Avatar, Box, FormLabel, Tabs, styled } from '@mui/material'
+import CoverBg from '../../assets/images/CoverBg.png'
+
+export const StyledSubContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '5px',
+  height: '50vh',
+}))
+export const StyledArrowIcon = styled(KeyboardArrowLeft)({
+  marginRight: '8px',
+  width: '2rem',
+  height: '25px',
+  cursor: 'pointer',
+  color: 'white',
+})
+export const StyledMainContainer = styled(Box)(({ theme }) => ({
+  minHeight: '70vh',
+  height: 'auto',
+  marginTop: '25px',
+  overflowY: 'hidden',
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  '& .MuiTabs-root': {
+    backgroundColor: 'white',
+    borderBottom: theme.borders.grayLight,
+    '& .MuiTab-root': {
+      padding: '0 20px',
+      paddingBottom: '8px',
+    },
+  },
+}))
+export const StyledTabs = styled(Tabs)<{
+  size: 'small' | 'medium'
+  indicatorBackgroundColor?: string
+  textColor?: string
+}>(({ theme, size, indicatorBackgroundColor, textColor }) => ({
+  borderTopRightRadius: '10px',
+  borderTopLeftRadius: '10px',
+  background: theme.palette.secondary.light,
+  minHeight: '60px',
+  paddingLeft: '15px',
+  '& .MuiTabs-flexContainer': {
+    height: '100%',
+    alignItems: 'end',
+  },
+  '& .MuiTabs-indicator': {
+    backgroundColor: indicatorBackgroundColor || theme.palette.common.yellow,
+  },
+  '& .MuiTab-root.Mui-selected': {
+    color: textColor || theme.palette.secondary.main,
+  },
+  '& .MuiTab-root': {
+    textTransform: 'none',
+    transition: 'color 0.2s ease-in-out',
+    padding: '5px 15px',
+    paddingBottom: '8px',
+    minHeight: 0,
+    fontSize: size === 'medium' ? '16px' : '14px',
+    fontWeight: '600',
+  },
+}))
+
+export const StyledComponentWrapper = styled(Box)<{}>(({ theme }) => ({
+  padding: '15px',
+  height: '100%',
+}))
+
+export const StyledUploadContainer = styled(FormLabel)({
+  border: '1px dashed #0000001A',
+  padding: '40px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: '#EFEFEF',
+  },
+})
+
+export const StyledUploadedFileContainer = styled(Box)({
+  border: '1px solid #1212121A',
+  borderRadius: '10px',
+  padding: '10px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 0px',
+})
+
+export const StyledBox = styled(Box)({
+  height: '200px',
+  width: '100%',
+  background: `url(${CoverBg})`,
+  position: 'absolute',
+  zIndex: -1,
+})
+
+export const StyledBoxHeader = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  marginTop: '1rem',
+})
+
+export const StyledAvatar = styled(Avatar)({
+  width: '160px',
+  height: '160px',
+  borderRadius: '10px',
+  backgroundColor: 'lightgrey',
+})

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

@@ -0,0 +1,38 @@
+import { Box, styled } from '@mui/material'
+
+export const StyledBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+})
+
+export const StyledBoxContainer = styled(Box)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: '10px 0',
+})
+
+export const StyledAvatar = styled(Box)({
+  width: '100px',
+  height: '100px',
+  borderRadius: '10px',
+  border: '1px solid #E5E5E5',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#E5E5E5',
+})
+
+export const StyledTextContainer = styled(Box)({
+  marginTop: '8px',
+  marginLeft: '20px',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+})
+
+export const StyledBoxCard = styled(Box)({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
+  gap: '1rem',
+})

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

@@ -0,0 +1,49 @@
+import NoDataSection from '../NoDataSection'
+import StyledTabsContainer from '../StyledTabsContainer'
+import WorkshopData from './WorkshopData'
+import { WorkshopForm } from './WorkshopForm'
+
+const Workshop = ({ workshops }) => {
+  const attendedWorkshops = workshops?.filter((w) => !w.organized)
+  const organisedWorkshops = workshops?.filter((w) => w.organized)
+
+  const tabs = [
+    {
+      key: 'Attended',
+      label: 'Attended',
+      component: (
+        <WorkshopData title={'Attended'} workshop={attendedWorkshops} />
+      ),
+    },
+    {
+      key: 'Organised',
+      label: 'Organised',
+      component: (
+        <WorkshopData title={'Organised'} workshop={organisedWorkshops} />
+      ),
+    },
+  ]
+  const isWorkshop = workshops && workshops?.length > 0
+
+  return isWorkshop ? (
+    <>
+      <StyledTabsContainer
+        tabs={tabs}
+        centered
+        textColor="primary"
+        indicatorBackgroundColor="primary"
+      />
+    </>
+  ) : (
+    <NoDataSection
+      title="Workshop"
+      subtitle="Add Workshop"
+      addButtonTitle="Add Your workshop"
+      addButtonContent={({ close }) => (
+        <WorkshopForm data={null} hideDialog={close} />
+      )}
+    />
+  )
+}
+
+export default Workshop

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

@@ -0,0 +1,64 @@
+import { Box, Card, Typography } from '@mui/material'
+import moment from 'moment'
+import { EditButton } from '../../IconButtons'
+import Image from '../../Image/Image'
+import { DrawerButton } from '../../ModalButtons'
+import { StyledAvatar, StyledBox, StyledTextContainer } from './Styles'
+import { WorkshopForm } from './WorkshopForm'
+
+const WorkshopCard = ({ data }) => {
+  return (
+    <div>
+      <Card
+        sx={{
+          padding: '15px',
+        }}
+      >
+        <StyledBox>
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            {data?.image?.url ? (
+              <Image
+                alt=""
+                radius={'10px'}
+                src={data?.image?.url}
+                width={'100px'}
+                height={'100px'}
+                fit={'cover'}
+              />
+            ) : (
+              <StyledAvatar>
+                <Typography sx={{ color: 'blue', fontSize: '30px' }}>
+                  {data?.title[0].toUpperCase()}
+                </Typography>
+              </StyledAvatar>
+            )}
+            <StyledTextContainer>
+              <Typography variant="h5">{data?.title}</Typography>
+              <Typography variant="subtitle2">{data?.stream}</Typography>
+              <Typography variant="subtitle2">
+                {moment(data?.fromDate).format('DD MMM YYYY')} -{' '}
+                {moment(data?.toDate).format('DD MMM YYYY')}
+              </Typography>
+            </StyledTextContainer>
+          </Box>
+          <Box>
+            <DrawerButton
+              key={data?.id}
+              title={'Edit Workshop'}
+              anchor={({ open }) => <EditButton onClick={open} />}
+              content={({ close }) => (
+                <WorkshopForm data={data} hideDialog={close} />
+              )}
+            />
+          </Box>
+        </StyledBox>
+      </Card>
+    </div>
+  )
+}
+
+export default WorkshopCard

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

@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-key */
+
+import { Typography } from '@mui/material'
+import ActionButton from '../../ActionButton'
+import { DrawerButton } from '../../ModalButtons'
+import { StyledBoxCard, StyledBoxContainer } from './Styles'
+import WorkshopCard from './WorkshopCard'
+import { WorkshopForm } from './WorkshopForm'
+
+const WorkshopData = ({ title, workshop }) => {
+  return (
+    <>
+      <StyledBoxContainer>
+        <Typography variant="h3">Workshops - {title}</Typography>
+        <DrawerButton
+          anchor={({ open }) => (
+            <ActionButton onClick={open} variant="text">
+              +Add Workshop
+            </ActionButton>
+          )}
+          content={({ close }) => (
+            <WorkshopForm data={null} hideDialog={close} />
+          )}
+          title="Add Workshops"
+        />
+      </StyledBoxContainer>
+      <StyledBoxCard>
+        {workshop.map((item) => (
+          <WorkshopCard data={item} />
+        ))}
+      </StyledBoxCard>
+    </>
+  )
+}
+
+export default WorkshopData

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

@@ -0,0 +1,202 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable no-console */
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Stack } from '@mui/material'
+import moment from 'moment'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import * as yup from 'yup'
+import axios, { axiosErrorToast } from '../../../config/axios'
+import ActionButton from '../../ActionButton'
+import { FormDatePicker, FormTextField } from '../../HookForm'
+import ImageUpload from '../../ImageUpload'
+import { RadioGroup } from '../../Input'
+import MediaRow from '../../MediaRow/MediaRow'
+import { Media } from '../../UploadButton/types'
+import FileUpload from '../FileUpload'
+import { createUpdateWorkshop } from '../service'
+const workshopsSelect = [
+  {
+    label: 'Attended',
+    value: 'attended',
+  },
+  {
+    label: 'Organized',
+    value: 'organized',
+  },
+]
+
+const schema = yup.object().shape({
+  title: yup.string().required('Title is required'),
+  organization: yup.string().required('Organization is required'),
+  stream: yup.string().required('Stream is required'),
+  program: yup.string().required('Program is required'),
+  fromDate: yup.string().required('From Date is required'),
+  toDate: yup.string().required('To Date is required'),
+})
+
+export const WorkshopForm = ({ data, hideDialog }) => {
+  const [media, setMedia] = useState<Media[]>([])
+
+  const [selectedWorkshop, setSelectedWorkshop] = useState(
+    data && data?.organized ? 'organized' : 'attended',
+  )
+  const [resource, setResource] = useState(data?.attachments || [])
+
+  const queryClient = useQueryClient()
+  const { control, handleSubmit } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      ...data,
+      fromDate: data ? moment(data.fromDate).toISOString() : '',
+      toDate: data ? moment(data.toDate).toISOString() : '',
+      image: [{ key: data?.image?.key, url: data?.image?.url }] ?? [],
+    },
+  })
+  const { mutate, isLoading } = useMutation(createUpdateWorkshop, {
+    onSuccess: () => {
+      toast.success(data ? 'Workshop Updated' : 'Workshop Added')
+      queryClient.invalidateQueries('dashboard')
+      hideDialog()
+    },
+    onError: (err) => {
+      console.log(err)
+      axiosErrorToast(err)
+    },
+  })
+  useEffect(() => {
+    data && data?.image?.url
+      ? setMedia([
+          {
+            key: data?.image?.key,
+            url: data?.image?.url,
+            type: data?.image?.mediaType,
+          },
+        ])
+      : setMedia([])
+  }, [data])
+  const onSubmit = (formData) => {
+    const postBody = {
+      ...formData,
+      organized: selectedWorkshop === 'organized',
+      fromDate: moment(formData?.fromDate).format('YYYY-MM-DD'),
+      toDate: moment(formData.toDate).format('YYYY-MM-DD'),
+      image: media[0]?.key || null,
+      attachments: resource.map((file) => file.key),
+    }
+    mutate(postBody)
+  }
+  const onError = (error) => {
+    console.log(error)
+  }
+  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/workshops/attachment`, fileData)
+        setResource([
+          ...resource,
+          {
+            originalFileName: originalFileName,
+            key: fileKey?.data?.key,
+          },
+        ])
+      } catch (error) {
+        console.log(error)
+      }
+    })
+  }
+  const onDelete = (fileKey) => {
+    setResource(resource?.filter((item) => item.key !== fileKey))
+  }
+  const handleImageChange = (v) => {
+    setMedia([{ type: 'image', url: v.url, key: v.key }])
+  }
+  const handleDeleteImage = (key) => {
+    setMedia((prev) => prev.filter((m) => m.key !== key))
+  }
+  return (
+    <form onSubmit={handleSubmit(onSubmit, onError)}>
+      <Stack gap={2.5}>
+        <>
+          {!media.length ? (
+            <ImageUpload
+              onFileUploaded={handleImageChange}
+              postUrl="/square/workshops/image"
+            />
+          ) : (
+            <MediaRow list={media} onDelete={handleDeleteImage} />
+          )}
+          <RadioGroup
+            row
+            label="Workshop"
+            name="organized"
+            required
+            value={selectedWorkshop}
+            options={workshopsSelect.map((item) => ({
+              label: item?.label,
+              value: item?.value,
+            }))}
+            onChange={(e) => setSelectedWorkshop(e.target.value)}
+          />
+          <FormTextField
+            control={control}
+            name="title"
+            label="Title"
+            required
+          />
+          <FormTextField
+            control={control}
+            name="organization"
+            label="Organization"
+            required
+          />
+          <FormDatePicker
+            control={control}
+            name="fromDate"
+            label="From Date"
+            required
+          />
+          <FormDatePicker
+            control={control}
+            name="toDate"
+            label="To Date"
+            required
+          />
+          <FormTextField
+            control={control}
+            name="stream"
+            label="Stream"
+            required
+          />
+          <FormTextField
+            control={control}
+            name="program"
+            label="Program"
+            required
+          />
+          <FileUpload
+            handleFileInput={handleFileInput}
+            onDelete={onDelete}
+            resource={resource}
+          />
+        </>
+      </Stack>
+      <Stack direction="row" gap={2} mt={2}>
+        <ActionButton type="submit" fullWidth loading={isLoading}>
+          {data ? 'Update Workshop' : 'Add Workshop'}
+        </ActionButton>
+        <ActionButton variant="outlined" fullWidth onClick={() => hideDialog()}>
+          Cancel
+        </ActionButton>
+      </Stack>
+    </form>
+  )
+}

package/src/components/MyProfile/index.ts

@@ -0,0 +1 @@
+export { default } from './MyProfile'

package/src/components/MyProfile/service.ts

@@ -0,0 +1,58 @@
+import { AxiosRequestConfig } from 'axios'
+import axios from '../../config/axios'
+
+export const createUpdateExperience = async ({ id, ...postBody }) => {
+  const config: AxiosRequestConfig = {
+    method: id ? 'PUT' : 'POST',
+    url: id ? `/square/experience/${id}` : '/square/experience',
+    data: postBody,
+  }
+  const res = await axios(config)
+  return res.data
+}
+
+export const createUpdatePaperPublicaton = async ({ id, ...postBody }) => {
+  const config: AxiosRequestConfig = {
+    method: id ? 'PUT' : 'POST',
+    url: id ? `/square/paper-publications/${id}` : '/square/paper-publications',
+    data: postBody,
+  }
+  const res = await axios(config)
+  return res.data
+}
+
+export const createUpdateEducation = async ({ id, ...postBody }) => {
+  const config: AxiosRequestConfig = {
+    method: id ? 'PUT' : 'POST',
+    url: id ? `/square/education/${id}` : '/square/education',
+    data: postBody,
+  }
+  const res = await axios(config)
+  return res.data
+}
+
+export const createUpdateWorkshop = async ({ id, ...postBody }) => {
+  const config: AxiosRequestConfig = {
+    method: id ? 'PUT' : 'POST',
+    url: id ? `/square/workshops/${id}` : '/square/workshops',
+    data: postBody,
+  }
+  const res = await axios(config)
+  return res.data
+}
+
+export const getPaperPublicationSubtypes = async (publicationType) => {
+  if (publicationType !== 'Other' && publicationType !== undefined) {
+    const config: AxiosRequestConfig = {
+      method: 'GET',
+      url: '/square/paper-publications/sub-types',
+      params: {
+        type: publicationType,
+      },
+    }
+    const res = await axios(config)
+    return res.data
+  } else {
+    return []
+  }
+}