diff --git a/GUI/src/App.tsx b/GUI/src/App.tsx index ff333baa..1cfa8c6f 100644 --- a/GUI/src/App.tsx +++ b/GUI/src/App.tsx @@ -21,6 +21,7 @@ import SettingsWelcomeMessage from 'pages/Settings/SettingsWelcomeMessage'; import SettingsSessionLength from 'pages/Settings/SettingsSessionLength'; import './locale/et_EE'; import ChatPending from 'pages/Chat/ChatPending'; +import DeleteChat from "./pages/Settings/DeleteChat"; const App: FC = () => { useQuery<{ @@ -39,6 +40,7 @@ const App: FC = () => { } /> } /> } /> + } /> } /> } /> } /> diff --git a/GUI/src/pages/Settings/DeleteChat/index.tsx b/GUI/src/pages/Settings/DeleteChat/index.tsx new file mode 100644 index 00000000..71260bf5 --- /dev/null +++ b/GUI/src/pages/Settings/DeleteChat/index.tsx @@ -0,0 +1,314 @@ +import { FC, useState } from 'react'; +import { useForm, Controller } from 'react-hook-form'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import { AxiosError } from 'axios'; +import { useTranslation } from 'react-i18next'; +import { format, parse } from 'date-fns'; +import { Button, Card, FormDatepicker, Switch, Track } from 'components'; +import { OrganizationWorkingTime } from 'types/organizationWorkingTime'; +import { useToast } from 'hooks/useToast'; +import { apiDev } from 'services/api'; +import '../SettingsWorkingTime/SettingsWorkingTime.scss'; +import { getOrganizationTimeData, setOrganizationTimeData } from '../SettingsWorkingTime/data'; +import withAuthorization from 'hoc/with-authorization'; +import { ROLES } from 'utils/constants'; + +const weekdaysOptions = [ + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', + 'Sunday', +]; + +const DeleteChat: FC = () => { + const { t } = useTranslation(); + const toast = useToast(); + const { control, handleSubmit, reset, watch } = + useForm(); + const [key, setKey] = useState(0); + const isOrganizationClosedOnWeekEnds = watch('organizationClosedOnWeekEnds'); + const isOrganizationTheSameOnAllWorkingDays = watch( + 'organizationTheSameOnAllWorkingDays' + ); + const organizationWorkingTimeWeekdays = watch( + 'organizationWorkingTimeWeekdays' + ); + const { data: workingTime } = useQuery({ + queryKey: ['configs/organization-working-time', 'prod'], + onSuccess: (data: any) => { + if (Object.keys(control._formValues).length > 0) return; + reset(getOrganizationTimeData(data.response)); + setKey(key + 1); + }, + }); + + const workingTimeMutation = useMutation({ + mutationFn: (data: OrganizationWorkingTime) => + apiDev.post( + 'configs/organization-working-time', + setOrganizationTimeData(data) + ), + onSuccess: () => { + toast.open({ + type: 'success', + title: t('global.notification'), + message: t('toast.success.updateSuccess'), + }); + }, + onError: (error: AxiosError) => { + toast.open({ + type: 'error', + title: t('global.notificationError'), + message: error.message, + }); + }, + }); + + const handleFormSubmit = handleSubmit((data) => + workingTimeMutation.mutate(data) + ); + + function sortAndJoin(array: string[]): string { + return array.toSorted((a, b) => a.localeCompare(b)).join(','); + } + + function filterAndJoin(array: string[], day: string): string { + return array.filter((pd: string) => pd !== day.toLowerCase()).join(','); + } + + if (!workingTime || Object.keys(control._formValues).length === 0) { + return <>Loading...; + } + + return ( + <> +

{t('settings.workingTime.title')}

+

{t('settings.workingTime.description')}

+ + + + } + header={ + + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + + } + > + {isOrganizationTheSameOnAllWorkingDays && ( + + + { + return ( +
+ +
+ ); + }} + /> + + { + return ( +
+ +
+ ); + }} + /> + + )} + {!isOrganizationTheSameOnAllWorkingDays && + weekdaysOptions + .filter( + (d) => + !( + isOrganizationClosedOnWeekEnds && + (d === 'Saturday' || d === 'Sunday') + ) + ) + .map((d) => ( + + + ( +
+ { + field.onChange( + value + ? sortAndJoin([ + ...field.value.toString().split(','), + d.toLowerCase(), + ]) + : filterAndJoin( + field.value.toString().split(','), + d + ) + ); + }} + checked={field.value?.includes(d.toLowerCase())} + {...field} + /> +
+ )} + /> + {organizationWorkingTimeWeekdays.includes(d.toLowerCase()) && ( + + { + return ( +
+ +
+ ); + }} + /> + + { + return ( +
+ +
+ ); + }} + /> + + )} + + ))} +
+ + ); +}; + +export default withAuthorization(DeleteChat, [ROLES.ROLE_ADMINISTRATOR]);