From 5914a0d6de3d778156a362b12a025533bfd79822 Mon Sep 17 00:00:00 2001 From: Carla Martinez Date: Thu, 11 Jan 2024 13:10:03 +0100 Subject: [PATCH] WIP: Reuse DateTimeSelector on IpaCalendar Signed-off-by: Carla Martinez --- src/components/Form/DateTimeSelector.tsx | 26 ++++- src/components/Form/IpaCalendar.tsx | 126 +++-------------------- 2 files changed, 38 insertions(+), 114 deletions(-) diff --git a/src/components/Form/DateTimeSelector.tsx b/src/components/Form/DateTimeSelector.tsx index b06cdc6c6..b76a418c4 100644 --- a/src/components/Form/DateTimeSelector.tsx +++ b/src/components/Form/DateTimeSelector.tsx @@ -12,13 +12,16 @@ import { parseFullDateStringToUTCFormat, toGeneralizedTime, } from "src/utils/utils"; +import { IPAObject, updateIpaObject } from "src/utils/ipaObjectUtils"; interface PropsToDateTimeSelector { timeValue: string; // Generalized time format ('YYYYMMDDHHMMSSZ') - setTimeValue: (timeValue: string) => void; + setTimeValue?: (timeValue: string) => void; name: string; ariaLabel?: string; isDisabled?: boolean; + ipaObject?: Record; + onChange?: (ipaObject: IPAObject) => void; } const DateTimeSelector = (props: PropsToDateTimeSelector) => { @@ -54,7 +57,15 @@ const DateTimeSelector = (props: PropsToDateTimeSelector) => { ) { setValueDate(newFromDate); // Parse to generalized format - props.setTimeValue(toGeneralizedTime(newFromDate)); + if (props.setTimeValue !== undefined) { + props.setTimeValue(toGeneralizedTime(newFromDate)); + } + } + // Update 'ipaObject' with the new date + // - Parse to generalized format (to return to the "user_mod" API call) + if (props.ipaObject !== undefined && props.onChange !== undefined) { + const LDAPDate: string = toGeneralizedTime(newFromDate); + updateIpaObject(props.ipaObject, props.onChange, LDAPDate, props.name); } } }; @@ -70,7 +81,16 @@ const DateTimeSelector = (props: PropsToDateTimeSelector) => { setValueDate(updatedFromDate); // Parse to generalized format - props.setTimeValue(toGeneralizedTime(updatedFromDate)); + if (props.setTimeValue !== undefined) { + props.setTimeValue(toGeneralizedTime(updatedFromDate)); + } + + // Update 'ipaObject' with the new date + // - Parse to generalized format (to return to the "user_mod" API call) + if (props.ipaObject !== undefined && props.onChange !== undefined) { + const LDAPDate = toGeneralizedTime(updatedFromDate); + updateIpaObject(props.ipaObject, props.onChange, LDAPDate, props.name); + } }; // Parse the current date into 'HH:MM' format diff --git a/src/components/Form/IpaCalendar.tsx b/src/components/Form/IpaCalendar.tsx index bf4d4b7a5..dadad7691 100644 --- a/src/components/Form/IpaCalendar.tsx +++ b/src/components/Form/IpaCalendar.tsx @@ -1,12 +1,4 @@ import React from "react"; -// PatternFly -import { - DatePicker, - InputGroup, - TimePicker, - isValidDate, - InputGroupItem, -} from "@patternfly/react-core"; // Utils import { parseFullDateStringToUTCFormat, @@ -17,9 +9,10 @@ import { IPAParamDefinition, ParamProperties, getParamProperties, - updateIpaObject, } from "src/utils/ipaObjectUtils"; import { ParamMetadata } from "src/utils/datatypes/globalDataTypes"; +// Components +import DateTimeSelector from "./DateTimeSelector"; export interface DateParam { __datetime__: string; @@ -62,113 +55,24 @@ function getParamPropertiesDateTime( }; } -function cloneDate(date: Date): Date { - return parseFullDateStringToUTCFormat(toGeneralizedTime(date)) as Date; -} - const IpaCalendar = (props: IPAParamDefinition) => { const { readOnly, value } = getParamPropertiesDateTime(props); - // On change date handler - const onDateChange = ( - _event: React.FormEvent, - inputDate: string, - newFromDate: Date | undefined - ) => { - if (newFromDate !== undefined) { - if ( - isValidDate(newFromDate) && - inputDate === yyyyMMddFormat(newFromDate) - ) { - if (value) { - newFromDate.setHours(value.getHours()); - newFromDate.setMinutes(value.getMinutes()); - } - // Update 'ipaObject' with the new date - // - Parse to generalized format (to return to the "user_mod" API call) - if (props.ipaObject !== undefined && props.onChange !== undefined) { - const LDAPDate: string = toGeneralizedTime(newFromDate); - updateIpaObject( - props.ipaObject, - props.onChange, - LDAPDate, - props.name - ); - } - } - } - }; - - // On change time handler - const onTimeChange = (_event, time, hour, minute) => { - // Assume inital data is null - // If the date is empty, create a new one with the current time - let updatedFromDate: Date = new Date(); - if (value && isValidDate(value)) { - updatedFromDate = cloneDate(value); - } - updatedFromDate.setHours(hour); - updatedFromDate.setMinutes(minute); - - // Update 'ipaObject' with the new date - // - Parse to generalized format (to return to the "user_mod" API call) - if (props.ipaObject !== undefined && props.onChange !== undefined) { - const LDAPDate = toGeneralizedTime(updatedFromDate); - updateIpaObject(props.ipaObject, props.onChange, LDAPDate, props.name); - } - }; - - // Parse the current date into 'YYYY-MM-DD' format - const yyyyMMddFormat = (date: Date | null | undefined): string => { - if (date === undefined || date === null) return ""; - - // This convertion is needed to prevent any Date data type issues - const dt = new Date(date); - const year = dt.getFullYear(); - const month = dt.getMonth() + 1; - const day = dt.getDate().toString().padStart(2, "0"); - - const res = year.toString() + "-" + month.toString() + "-" + day; - return res; - }; - - // Parse the current date into 'HH:MM' format - const hhMMFormat = (date: Date | null | undefined): string => { - if (date === undefined || date === null) return ""; - - // This convertion is needed to prevent any Date data type issues - const dt = new Date(date); - const hours = dt.getHours().toString().padStart(2, "0"); - const minutes = dt.getMinutes().toString().padStart(2, "0"); - - const res = hours + ":" + minutes; - return res; - }; + // Date-time selectors + const [time, setTime] = React.useState( + value ? (toGeneralizedTime(value) as string) : "" + ); return ( - - - - - - - - + ); };