HRIS-334 [FE] Integrate Request new schedule tab

client/src/components/molecules/NotificationList/ViewDetailsModal/ChangeScheduleDetails.tsx

@@ -0,0 +1,109 @@
+import isEmpty from 'lodash/isEmpty'
+import React, { FC, useEffect, useState } from 'react'
+
+import { INotification } from '~/utils/interfaces'
+import { IWorkDayData } from '~/utils/types/notificationTypes'
+import CustomDayCard from '~/components/templates/MySchedulelayout/CustomDayCard'
+
+type Props = {
+  notification: INotification
+}
+
+const ChangeScheduleDetails: FC<Props> = ({ notification }): JSX.Element => {
+  const [requestedSchedule, setRequestedSchedule] = useState<IWorkDayData[]>([])
+
+  const myRequestedWorkingDays = notification?.workingDays
+
+  useEffect(() => {
+    if (!isEmpty(notification)) {
+      const empty = {
+        Day: '',
+        From: '',
+        To: '',
+        BreakFrom: '',
+        BreakTo: ''
+      }
+      const mondayData =
+        myRequestedWorkingDays?.find((item) => item?.Day === 'Monday' || item?.Day === 'monday') ??
+        empty
+      const tuesdayData =
+        myRequestedWorkingDays?.find(
+          (item) => item?.Day === 'Tuesday' || item?.Day === 'tuesday'
+        ) ?? empty
+      const wednesdayData =
+        myRequestedWorkingDays?.find(
+          (item) => item?.Day === 'Wednesday' || item?.Day === 'wednesday'
+        ) ?? empty
+      const thursdayData =
+        myRequestedWorkingDays?.find(
+          (item) => item?.Day === 'Thursday' || item?.Day === 'thursday'
+        ) ?? empty
+      const fridayData =
+        myRequestedWorkingDays?.find((item) => item?.Day === 'Friday' || item?.Day === 'friday') ??
+        empty
+      const saturdayData =
+        myRequestedWorkingDays?.find(
+          (item) => item?.Day === 'Saturday' || item?.Day === 'saturday'
+        ) ?? empty
+      const sundayData =
+        myRequestedWorkingDays?.find((item) => item?.Day === 'Sunday' || item?.Day === 'sunday') ??
+        empty
+
+      const shiftData: IWorkDayData[] = [
+        {
+          ...mondayData,
+          Day: 'Monday'
+        },
+        {
+          ...tuesdayData,
+          Day: 'Tuesday'
+        },
+        {
+          ...wednesdayData,
+          Day: 'Wednesday'
+        },
+        {
+          ...thursdayData,
+          Day: 'Thursday'
+        },
+        {
+          ...fridayData,
+          Day: 'Friday'
+        },
+        {
+          ...saturdayData,
+          Day: 'Saturday'
+        },
+        {
+          ...sundayData,
+          Day: 'Sunday'
+        }
+      ]
+
+      setRequestedSchedule(shiftData)
+    }
+  }, [notification])
+
+  return (
+    <main className="py-7 px-6 text-xs leading-relaxed tracking-wide text-slate-700">
+      <ul className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2 md:grid-cols-3">
+        {requestedSchedule?.map((item, index) => (
+          <CustomDayCard
+            key={index}
+            {...{
+              day: item.Day,
+              schedule: {
+                timeIn: item.From,
+                timeOut: item.To,
+                breakFrom: item.BreakFrom,
+                breakTo: item.BreakTo
+              }
+            }}
+          />
+        ))}
+      </ul>
+    </main>
+  )
+}
+
+export default ChangeScheduleDetails

client/src/components/molecules/NotificationList/ViewDetailsModal/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import classNames from 'classnames'
 import { useRouter } from 'next/router'
 import { BsFileEarmarkText } from 'react-icons/bs'
 import { ThumbsDown, ThumbsUp } from 'react-feather'
@@ -20,6 +21,7 @@ import LeaveResolvedDetails from './LeaveResolvedDetails'
 import OffsetScheduleDetails from './OffsetScheduleDetails'
 import OffsetResolvedDetails from './OffsetResolvedDetails'
 import ESLChangeShiftDetails from './ESLChangeShiftDetails'
+import ChangeScheduleDetails from './ChangeScheduleDetails'
 import Button from '~/components/atoms/Buttons/ButtonAction'
 import ChangeShiftResolvedDetails from './ChangeShiftResolved'
 import OvertimeResolvedDetails from './OvertimeResolvedDetails'
@@ -139,6 +141,11 @@ const ViewDetailsModal: FC<Props> = ({ isOpen, row, user }): JSX.Element => {
         }
       )
     }
+
+    if (row.type.toLowerCase() === NOTIFICATION_TYPE.CHANGE_SCHEDULE) {
+      // TODO: implement change schedule functionality
+      alert('No functionality yet!')
+    }
   }
 
   return (
@@ -148,7 +155,10 @@ const ViewDetailsModal: FC<Props> = ({ isOpen, row, user }): JSX.Element => {
         closeModal: handleClose,
         status: row.status
       }}
-      className="w-full max-w-lg"
+      className={classNames(
+        'w-full',
+        row.type.toLowerCase() === NOTIFICATION_TYPE.CHANGE_SCHEDULE ? 'max-w-3xl' : 'max-w-lg'
+      )}
     >
       <ModalHeader
         {...{
@@ -265,6 +275,14 @@ const ViewDetailsModal: FC<Props> = ({ isOpen, row, user }): JSX.Element => {
               }}
             />
           )}
+          {/* DETAILS FOR CHANGE SCHEDULE REQUEST */}
+          {row.type.toLocaleLowerCase() === NOTIFICATION_TYPE.CHANGE_SCHEDULE && (
+            <ChangeScheduleDetails
+              {...{
+                notification: row
+              }}
+            />
+          )}
         </ul>
       </main>
       {row.status === STATUS_OPTIONS.PENDING && (

client/src/components/organisms/Header/index.tsx

@@ -27,15 +27,16 @@ import useNotificationMutation from '~/hooks/useNotificationMutation'
 import UserMenuDropDown from '~/components/molecules/UserMenuDropdown'
 import NotificationPopover from '~/components/molecules/NotificationPopOver'
 import { NotificationRequestInput, NotificationData } from '~/utils/types/notificationTypes'
+import { getESLOffsetNotificationSubscription } from '~/graphql/subscriptions/eslOffsetSubscription'
+import { getFileOffsetNotificationSubscription } from '~/graphql/subscriptions/fileOffsetSubscription'
+import { getChangeScheduleNotificationSubscription } from '~/graphql/subscriptions/changeScheduleSubscription'
 import {
-  getChangeShiftNotificationSubQuery,
   getLeaveNotificationSubQuery,
+  getSummaryOvertimeNotification,
   getOvertimeNotificationSubQuery,
-  getSummaryOvertimeNotification
+  getChangeShiftNotificationSubQuery
 } from '~/graphql/subscriptions/leaveSubscription'
 import useScreenCondition from '~/hooks/useScreenCondition'
-import { getESLOffsetNotificationSubscription } from '~/graphql/subscriptions/eslOffsetSubscription'
-import { getFileOffsetNotificationSubscription } from '~/graphql/subscriptions/fileOffsetSubscription'
 
 const Tooltip = dynamic(async () => await import('rc-tooltip'), { ssr: false })
 
@@ -111,7 +112,8 @@ const Header: FC<Props> = (props): JSX.Element => {
           offsets: parsedData.Offsets,
           managerRemarks: parsedData.ManagerRemarks,
           startDate: parsedData.StartDate,
-          endDate: parsedData.EndDate
+          endDate: parsedData.EndDate,
+          workingDays: parsedData.WorkingDays
         }
         return mapped
       })
@@ -219,7 +221,7 @@ const Header: FC<Props> = (props): JSX.Element => {
         query: getOvertimeNotificationSubQuery(userId)
       },
       {
-        next: ({ data }: any) => {
+        next: () => {
           void queryClient.invalidateQueries({ queryKey: ['GET_ALL_USER_NOTIFICATION'] })
         },
         error: () => null,
@@ -232,7 +234,7 @@ const Header: FC<Props> = (props): JSX.Element => {
         query: getChangeShiftNotificationSubQuery(userId)
       },
       {
-        next: ({ data }: any) => {
+        next: () => {
           void queryClient.invalidateQueries({ queryKey: ['GET_ALL_USER_NOTIFICATION'] })
         },
         error: () => null,
@@ -245,7 +247,7 @@ const Header: FC<Props> = (props): JSX.Element => {
         query: getESLOffsetNotificationSubscription(userId)
       },
       {
-        next: ({ data }: any) => {
+        next: () => {
           void queryClient.invalidateQueries({ queryKey: ['GET_ALL_USER_NOTIFICATION'] })
         },
         error: () => null,
@@ -258,7 +260,7 @@ const Header: FC<Props> = (props): JSX.Element => {
         query: getFileOffsetNotificationSubscription(userId)
       },
       {
-        next: ({ data }: any) => {
+        next: () => {
           void queryClient.invalidateQueries({ queryKey: ['GET_ALL_USER_NOTIFICATION'] })
         },
         error: () => null,
@@ -271,7 +273,20 @@ const Header: FC<Props> = (props): JSX.Element => {
         query: getSummaryOvertimeNotification(userId)
       },
       {
-        next: ({ data }: any) => {
+        next: () => {
+          void queryClient.invalidateQueries({ queryKey: ['GET_ALL_USER_NOTIFICATION'] })
+        },
+        error: () => null,
+        complete: () => null
+      }
+    )
+
+    clientWebsocket.subscribe(
+      {
+        query: getChangeScheduleNotificationSubscription(userId)
+      },
+      {
+        next: () => {
           void queryClient.invalidateQueries({ queryKey: ['GET_ALL_USER_NOTIFICATION'] })
         },
         error: () => null,

client/src/graphql/mutations/changeScheduleMutation.ts

@@ -0,0 +1,9 @@
+import { gql } from 'graphql-request'
+
+export const CREATE_CHANGE_SCHEDULE_MUTATION = gql`
+  mutation ($request: ChangeSchedRequestInput!) {
+    changeScheduleRequest(request: $request) {
+      id
+    }
+  }
+`

client/src/graphql/subscriptions/changeScheduleSubscription.ts

@@ -0,0 +1,11 @@
+export const getChangeScheduleNotificationSubscription = (id: number): string => `
+  subscription {
+    notificationCreated(id: ${id}) {
+      id
+      type
+      data
+      readAt
+      isRead
+    }
+  }
+`

client/src/graphql/subscriptions/leaveSubscription.ts

@@ -34,13 +34,13 @@ export const getChangeShiftNotificationSubQuery = (id: number): string => `
   }
 `
 export const getSummaryOvertimeNotification = (id: number): string => `
-subscription {
-  overtimeSummaryCreated(id: ${id}) {
-    id
-    type
-    data
-    readAt
-    isRead
+  subscription {
+    overtimeSummaryCreated(id: ${id}) {
+      id
+      type
+      data
+      readAt
+      isRead
+    }
   }
-}
 `

client/src/hooks/useChangeSchedule.ts

@@ -0,0 +1,31 @@
+import toast from 'react-hot-toast'
+import { useMutation, UseMutationResult } from '@tanstack/react-query'
+
+import { client } from '~/utils/shared/client'
+import { IChangeSchedule } from '~/utils/interfaces/changeScheduleInterface'
+import { CREATE_CHANGE_SCHEDULE_MUTATION } from '~/graphql/mutations/changeScheduleMutation'
+
+type ChangeFuncReturnType = UseMutationResult<any, Error, IChangeSchedule, unknown>
+
+type HookReturnType = {
+  handleChangeScheduleMutation: () => UseMutationResult<any, Error, IChangeSchedule, unknown>
+}
+
+const useChangeSchedule = (): HookReturnType => {
+  const handleChangeScheduleMutation = (): ChangeFuncReturnType =>
+    useMutation({
+      mutationFn: async (request: IChangeSchedule) => {
+        return await client.request(CREATE_CHANGE_SCHEDULE_MUTATION, { request })
+      },
+      onError: async (err: Error) => {
+        const [errorMessage] = err.message.split(/:\s/, 2)
+        toast.error(errorMessage)
+      }
+    })
+
+  return {
+    handleChangeScheduleMutation
+  }
+}
+
+export default useChangeSchedule

client/src/pages/my-schedule/current-schedule.tsx

@@ -36,7 +36,7 @@ const CurrentSchedule: NextPage = (): JSX.Element => {
       const saturdayData = mySchedules?.find((item) => item?.day === 'Saturday') ?? empty
       const sundayData = mySchedules?.find((item) => item?.day === 'Sunday') ?? empty
 
-      const shitdata: WorkingDayTime[] = [
+      const shiftData: WorkingDayTime[] = [
         {
           ...mondayData,
           day: 'Monday'
@@ -67,7 +67,7 @@ const CurrentSchedule: NextPage = (): JSX.Element => {
         }
       ]
 
-      setCurrentSchedule(shitdata)
+      setCurrentSchedule(shiftData)
     }
   }, [mySchedules])