-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
HRIS-334 [FE] Integrate Request new schedule tab
- Loading branch information
Showing
17 changed files
with
472 additions
and
133 deletions.
There are no files selected for viewing
109 changes: 109 additions & 0 deletions
109
client/src/components/molecules/NotificationList/ViewDetailsModal/ChangeScheduleDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { gql } from 'graphql-request' | ||
|
|
||
| export const CREATE_CHANGE_SCHEDULE_MUTATION = gql` | ||
| mutation ($request: ChangeSchedRequestInput!) { | ||
| changeScheduleRequest(request: $request) { | ||
| id | ||
| } | ||
| } | ||
| ` |
11 changes: 11 additions & 0 deletions
11
client/src/graphql/subscriptions/changeScheduleSubscription.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export const getChangeScheduleNotificationSubscription = (id: number): string => ` | ||
| subscription { | ||
| notificationCreated(id: ${id}) { | ||
| id | ||
| type | ||
| data | ||
| readAt | ||
| isRead | ||
| } | ||
| } | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.