diff --git a/client/src/components/Filters/Services/Form.tsx b/client/src/components/Filters/Services/Form.tsx index a186c5f3814..3a2ae416c15 100644 --- a/client/src/components/Filters/Services/Form.tsx +++ b/client/src/components/Filters/Services/Form.tsx @@ -1,10 +1,11 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { Controller, useForm } from 'react-hook-form'; import { ServiceField } from './ServiceField'; +import { ScheduleForm } from './ScheduleForm'; export type BlockedService = { id: string; @@ -17,6 +18,14 @@ export type ServiceGroups = { id: string; } +export type ServiceSchedule = { + id: string; + schedule?: { + time_zone: string; + [key: string]: any; + }; +}; + type FormValues = { blocked_services: Record; }; @@ -25,7 +34,9 @@ interface FormProps { initialValues: Record; blockedServices: BlockedService[]; serviceGroups: ServiceGroups[]; - onSubmit: (values: FormValues) => void; + serviceSchedules?: ServiceSchedule[]; + onSubmit: (values: FormValues & { services?: ServiceSchedule[] }) => void; + onScheduleSubmit?: (serviceId: string, schedule: any) => void; processing: boolean; processingSet: boolean; } @@ -34,11 +45,15 @@ export const Form = ({ initialValues, blockedServices, serviceGroups, + serviceSchedules = [], + onSubmit, + onScheduleSubmit, processing, processingSet, - onSubmit, }: FormProps) => { const { t } = useTranslation(); + const [scheduleModalOpen, setScheduleModalOpen] = useState(false); + const [currentServiceId, setCurrentServiceId] = useState(null); const { handleSubmit, @@ -63,6 +78,14 @@ export const Form = ({ }, {} as Record); }, [blockedServices]); + const serviceScheduleMap = useMemo(() => { + const map: Record = {}; + serviceSchedules.forEach(svc => { + map[svc.id] = svc.schedule; + }); + return map; + }, [serviceSchedules]); + const handleToggleAllServices = (isSelected: boolean) => { blockedServices.forEach((service) => { if (!isServicesControlsDisabled) { @@ -80,6 +103,27 @@ export const Form = ({ }); }; + const handleScheduleClick = (serviceId: string) => { + setCurrentServiceId(serviceId); + setScheduleModalOpen(true); + }; + + const handleScheduleSubmit = (schedule: any) => { + if (currentServiceId && onScheduleSubmit) { + onScheduleSubmit(currentServiceId, schedule); + } + setScheduleModalOpen(false); + setCurrentServiceId(null); + }; + + const handleDeleteSchedule = (serviceId: string) => { + if (onScheduleSubmit) { + onScheduleSubmit(serviceId, null); + } + setScheduleModalOpen(false); + setCurrentServiceId(null); + }; + const handleSubmitWithGroups = (values: FormValues) => { if (!values || !values.blocked_services) { return onSubmit(values); @@ -94,6 +138,8 @@ export const Form = ({ return onSubmit({ blocked_services: enabledIdsMap }); }; + const currentServiceSchedule = currentServiceId ? serviceScheduleMap[currentServiceId] : null; + return (
@@ -166,6 +212,8 @@ export const Form = ({ placeholder={service.name} disabled={isServicesControlsDisabled} icon={service.icon_svg} + hasSchedule={!!serviceScheduleMap[service.id]} + onScheduleClick={() => handleScheduleClick(service.id)} /> )} /> @@ -186,6 +234,42 @@ export const Form = ({ save_btn
+ + {scheduleModalOpen && ( +
+
+
+
+
+ {t('schedule_services')} - {currentServiceId} +
+ +
+
+ + {currentServiceSchedule && ( + + )} +
+
+
+
+ )}
); }; diff --git a/client/src/components/Filters/Services/ServiceField.tsx b/client/src/components/Filters/Services/ServiceField.tsx index 7e6c7aeed8c..b8366e3efdf 100644 --- a/client/src/components/Filters/Services/ServiceField.tsx +++ b/client/src/components/Filters/Services/ServiceField.tsx @@ -8,10 +8,12 @@ type Props = ControllerRenderProps & { className?: string; icon?: string; error?: string; + hasSchedule?: boolean; + onScheduleClick?: () => void; }; export const ServiceField = React.forwardRef( - ({ name, value, onChange, onBlur, placeholder, disabled, className, icon, error, ...rest }, ref) => ( + ({ name, value, onChange, onBlur, placeholder, disabled, className, icon, error, hasSchedule, onScheduleClick, ...rest }, ref) => ( <>