From 6f2782a2ad2a89e6de576ec90712e9fd2a5918c6 Mon Sep 17 00:00:00 2001 From: NiloJr13 Date: Mon, 10 Jul 2023 15:42:12 +0800 Subject: [PATCH] HRIS-336 [FE] Integrate Filed Schedules tab in My schedule page --- api/Services/EmployeeScheduleService.cs | 2 +- .../MyFiledScheduleTable/columns.tsx | 3 +- .../src/graphql/queries/employeeSchedule.ts | 12 + client/src/hooks/useEmployeeSchedule.ts | 19 +- .../src/pages/my-schedule/filed-schedules.tsx | 82 ++++- .../constants/dummyMyFiledScheduleData.ts | 347 +----------------- client/src/utils/interfaces/index.tsx | 2 +- .../src/utils/types/employeeScheduleTypes.ts | 9 + 8 files changed, 119 insertions(+), 357 deletions(-) diff --git a/api/Services/EmployeeScheduleService.cs b/api/Services/EmployeeScheduleService.cs index c599a72f..df3d9f3c 100644 --- a/api/Services/EmployeeScheduleService.cs +++ b/api/Services/EmployeeScheduleService.cs @@ -49,7 +49,7 @@ public async Task> GetEmployeeScheduleDetails(int empl public async Task?> GetEmployeeChangeScheduleRequest(int userId) { using HrisContext context = _contextFactory.CreateDbContext(); - return await context.ChangeScheduleRequests.Where(x => x.UserId == userId).ToListAsync(); + return await context.ChangeScheduleRequests.Where(x => x.UserId == userId).OrderByDescending(x => x.CreatedAt).ToListAsync(); } public async Task Create(CreateEmployeeScheduleRequest request, HrisContext context) diff --git a/client/src/components/molecules/MyFiledScheduleTable/columns.tsx b/client/src/components/molecules/MyFiledScheduleTable/columns.tsx index 221f55b3..39927ba4 100644 --- a/client/src/components/molecules/MyFiledScheduleTable/columns.tsx +++ b/client/src/components/molecules/MyFiledScheduleTable/columns.tsx @@ -15,7 +15,8 @@ const columnHelper = createColumnHelper() export const columns = [ columnHelper.accessor('id', { header: () => , - footer: (info) => info.column.id + footer: (info) => info.column.id, + cell: (props) => Number(props.row.id) + 1 }), columnHelper.accessor('dateFiled', { header: () => , diff --git a/client/src/graphql/queries/employeeSchedule.ts b/client/src/graphql/queries/employeeSchedule.ts index fb92cb7c..0898d7d2 100644 --- a/client/src/graphql/queries/employeeSchedule.ts +++ b/client/src/graphql/queries/employeeSchedule.ts @@ -62,3 +62,15 @@ export const SEARCH_EMPLOYEES_BY_SCHEDULE = gql` } } ` + +export const GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS = gql` + query ($userId: Int!) { + employeeChangeScheduleRequest(userId: $userId) { + id + data + isManagerApproved + isLeaderApproved + createdAt + } + } +` diff --git a/client/src/hooks/useEmployeeSchedule.ts b/client/src/hooks/useEmployeeSchedule.ts index 9b508d8f..49ff50ef 100644 --- a/client/src/hooks/useEmployeeSchedule.ts +++ b/client/src/hooks/useEmployeeSchedule.ts @@ -4,6 +4,7 @@ import { useMutation, useQuery, UseQueryResult, UseMutationResult } from '@tanst import { client } from '~/utils/shared/client' import { GET_ALL_EMPLOYEE_SCHEDULE, + GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS, GET_EMPLOYEE_SCHEDULE, GET_EMPLOYEES_BY_SCHEDULE, SEARCH_EMPLOYEES_BY_SCHEDULE @@ -25,7 +26,8 @@ import { IDeleteEmployeeScheduleRequestInput, IAddMemberToScheduleInput, ISearchEmployeesByScheduleRequestInput, - IReassignEmployeesScheduleRequestInput + IReassignEmployeesScheduleRequestInput, + IAllFiledScheduleRequest } from '~/utils/types/employeeScheduleTypes' import { IScheduleMember } from '~/utils/interfaces/scheduleMemberInterface' @@ -72,6 +74,11 @@ type GetEmployeesByScheduleFuncReturnType = UseQueryResult< unknown > +type GetAllEmployeeScheduleRequestsReturnType = UseQueryResult< + { employeeChangeScheduleRequest: IAllFiledScheduleRequest[] }, + unknown +> + type AddMemberToScheduleReturnType = UseMutationResult< any, unknown, @@ -86,6 +93,7 @@ type GetSearchEmployeesByScheduleFuncReturnType = UseQueryResult< type HookReturnType = { getAllEmployeeScheduleQuery: () => GetAllEmployeeScheduleFuncReturnType + getAllScheduleRequestsQuery: (userId: number) => GetAllEmployeeScheduleRequestsReturnType handleCreateEmployeeScheduleMutation: () => CreateEmployeeScheduleMutationType handleEditEmployeeScheduleMutation: () => EditEmployeeScheduleMutationType handleDeleteEmployeeScheduleMutation: () => DeleteEmployeeScheduleMutationType @@ -196,6 +204,14 @@ const useEmployeeSchedule = (): HookReturnType => { enabled: !isNaN(employeeScheduleId) && isOpen }) + const getAllScheduleRequestsQuery = (userId: number): GetAllEmployeeScheduleRequestsReturnType => + useQuery({ + queryKey: ['GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS', userId], + queryFn: async () => await client.request(GET_ALL_EMPLOYEE_SCHEDULE_REQUESTS, { userId }), + select: (data: { employeeChangeScheduleRequest: IAllFiledScheduleRequest[] }) => data, + enabled: !isNaN(userId) + }) + const getSearchEmployeesByScheduleQuery = ( request: ISearchEmployeesByScheduleRequestInput, isOpen: boolean @@ -210,6 +226,7 @@ const useEmployeeSchedule = (): HookReturnType => { return { getEmployeeScheduleQuery, getAllEmployeeScheduleQuery, + getAllScheduleRequestsQuery, handleEditEmployeeScheduleMutation, handleCreateEmployeeScheduleMutation, handleDeleteEmployeeScheduleMutation, diff --git a/client/src/pages/my-schedule/filed-schedules.tsx b/client/src/pages/my-schedule/filed-schedules.tsx index 1c5814a0..93dda5fe 100644 --- a/client/src/pages/my-schedule/filed-schedules.tsx +++ b/client/src/pages/my-schedule/filed-schedules.tsx @@ -1,18 +1,86 @@ import { NextPage } from 'next' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import Card from '~/components/atoms/Card' +import useUserQuery from '~/hooks/useUserQuery' import FadeInOut from '~/components/templates/FadeInOut' +import { IMyFiledScheduleData } from '~/utils/interfaces' +import useEmployeeSchedule from '~/hooks/useEmployeeSchedule' +import { getApprovalStatus } from '~/utils/myDailyTimeHelpers' import MaxWidthContainer from '~/components/atoms/MaxWidthContainer' import MyScheduleLayout from '~/components/templates/MySchedulelayout' import GlobalSearchFilter from '~/components/molecules/GlobalSearchFilter' import UnderConstructionPage from '~/components/pages/UnderContructionPage' import { columns } from '~/components/molecules/MyFiledScheduleTable/columns' import MyFiledScheduleTable from '~/components/molecules/MyFiledScheduleTable' -import { dummyMyFiledScheduleData } from '~/utils/constants/dummyMyFiledScheduleData' const FiledSchedules: NextPage = (): JSX.Element => { + const { handleUserQuery } = useUserQuery() const [globalFilter, setGlobalFilter] = useState('') + const { getAllScheduleRequestsQuery } = useEmployeeSchedule() + + const { data: user } = handleUserQuery() + const { data: MyFiledScheduleData } = getAllScheduleRequestsQuery(Number(user?.userById.id)) + const FiledSchedule = MyFiledScheduleData?.employeeChangeScheduleRequest + const [filedRequestDataTable, setFiledRequestDataTable] = useState() + + const getFiledScheduleRequestMappedData = (): IMyFiledScheduleData[] | undefined => { + return FiledSchedule?.map((item) => { + const parsedData = JSON.parse(item.data) + const status = + item.isLeaderApproved === null || item.isManagerApproved === null + ? null + : item.isLeaderApproved && item.isManagerApproved + + const schedule = { + monday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' }, + tuesday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' }, + wednesday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' }, + thursday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' }, + friday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' }, + saturday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' }, + sunday: { timeIn: '', timeOut: '', breakFrom: '', breakTo: '' } + } + + const scheduleList = parsedData.reduce( + ( + acc: Record< + string, + { + breakFrom: string + timeOut: string + timeIn: string + breakTo: string + } + >, + data: { Day: string; From: string; To: string; BreakFrom: string; BreakTo: string } + ) => { + const day = data.Day.toLowerCase() + acc[day].timeIn = data.From + acc[day].timeOut = data.To + acc[day].breakFrom = data.BreakFrom + acc[day].breakTo = data.BreakTo + + return acc + }, + schedule + ) + + return { + id: item.id, + dateFiled: item.createdAt, + status: getApprovalStatus(status), + schedule: scheduleList + } + }) + } + + useEffect(() => { + if (FiledSchedule !== null || FiledSchedule !== undefined) { + const mappedOffsets = getFiledScheduleRequestMappedData() + setFiledRequestDataTable(mappedOffsets) + } + }, [FiledSchedule]) if (process.env.NEXT_PUBLIC_DISPLAY_MY_SCHEDULE_PAGE === 'false') { return @@ -25,17 +93,15 @@ const FiledSchedules: NextPage = (): JSX.Element => {
setGlobalFilter(String(value)), - placeholder: 'Search' - }} + value={globalFilter ?? ''} + onChange={(value) => setGlobalFilter(String(value))} + placeholder="Search" />