Merge pull request #759 from MeasureAuthoringTool/MAT-7679_DateTimeCo…

…mponent MAT-7679 display the saved time and zone
MeasureAuthoringTool · Nov 8, 2024 · 1781312 · 1781312
2 parents 0163a13 + 0eec37e
commit 1781312
Showing 1 changed file with 21 additions and 51 deletions.
diff --git a/...nts/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx b/...nts/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx
@@ -18,7 +18,6 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(advancedFormat);
 dayjs.utc().format();
-const userTimeZone = dayjs.tz.guess();
 
 interface MenuObj {
   value: string;
@@ -48,21 +47,6 @@ const offSets = [
   { id: "America/Saipan - CHST", value: "+10:00" },
 ];
 
-const findByLabel = (value) => {
-  let result = "--";
-  if (value && options) {
-    options.forEach((opt) => {
-      if (opt.label === value) {
-        result = opt.value + " - " + opt.label;
-      }
-    });
-  }
-  return result;
-};
-const convertToStandardTime = (dayLightTime) => {
-  return dayLightTime.add(-1, "hour");
-};
-
 const getOffSet = (value) => {
   let result = "-05:00";
   if (value) {
@@ -96,7 +80,6 @@ const DateTimeComponent = ({
   structureDefinition,
 }: TypeComponentProps) => {
   const [date, setDate] = useState<string>();
-  const [formattedDate, setFormattedDate] = useState("");
   const [time, setTime] = useState<string>();
   const [formattedTime, setFormattedTime] = useState("");
   const [timeZone, setTimeZone] = useState("");
@@ -106,31 +89,17 @@ const DateTimeComponent = ({
   const TIME_FORMAT = "HH:mm:ss";
 
   useEffect(() => {
-    let currentDate = new Date();
     if (value) {
-      currentDate = new Date(value);
-    }
-
-    let converted = dayjs.utc(currentDate);
-    const timezoneName = currentDate
-      .toLocaleString("en-US", { timeZoneName: "short" })
-      .split(", ")[1]
-      ?.split(" ")[2]; // e.g., timezoneName = "CDT"
-
-    if (timezoneName.includes("DT")) {
-      converted = convertToStandardTime(converted).tz(userTimeZone);
-
-      setTimeZone(findByLabel(timezoneName.replace("D", "S")));
-    } else if (timezoneName.includes("GMT")) {
-      const zone = findByOffSet(timezoneName.substring(3, 6) + ":00");
-      setTimeZone(zone);
-    } else {
-      setTimeZone(findByLabel(timezoneName));
+      const zone = value.slice(-6);
+
+      setDate(value.slice(0, 10));
+      const formattedDate = dayjs(value)
+        .utcOffset(zone)
+        .format("YYYY-MM-DDTHH:mm:ss");
+      setTime(formattedDate);
+      setFormattedTime(value.slice(11, 19));
+      setTimeZone(findByOffSet(zone));
     }
-    setDate(converted.format(DATE_TIME_ZONE_FORMAT));
-    setTime(converted.format(DATE_TIME_ZONE_FORMAT));
-    setFormattedDate(converted.format(DATE_FORMAT));
-    setFormattedTime(converted.format(TIME_FORMAT));
   }, []);
 
   const renderMenuItems = (options: MenuObj[]) => {
@@ -159,9 +128,12 @@ const DateTimeComponent = ({
   };
 
   const handleDateTimeChange = (date, time, offset) => {
-    const dateTime = dayjs(date + "T" + time + ".000");
-    const dateTimeStr = dateTime.format(DATE_TIME_ZONE_FORMAT).slice(0, 23);
-    return dateTimeStr + offset;
+    if (date) {
+      const dateTime = dayjs(date + "T" + time + ".000");
+      const dateTimeStr = dateTime.format(DATE_TIME_ZONE_FORMAT).slice(0, 23);
+      return dateTimeStr + offset;
+    }
+    return null;
   };
 
   return (
@@ -180,12 +152,11 @@ const DateTimeComponent = ({
         >
           <DateField
             label="Date Field"
-            value={dayjs(date)}
+            value={date ? dayjs(date) : null}
             disabled={!canEdit}
             id="date-field"
             handleDateChange={(date) => {
-              setDate(date);
-              setFormattedDate(date?.format(DATE_FORMAT));
+              setDate(date?.format(DATE_FORMAT));
               const offset = getOffSet(timeZone);
               const changedDate = handleDateTimeChange(
                 date?.format(DATE_FORMAT),
@@ -203,7 +174,6 @@ const DateTimeComponent = ({
               label="Time Field"
               id="time-field"
               seconds
-              inputFormat="HH:mm:ss"
               views={["hours", "minutes", "seconds"]}
               data-testid="time-input"
               handleTimeChange={(time) => {
@@ -212,13 +182,13 @@ const DateTimeComponent = ({
 
                 const offset = getOffSet(timeZone);
                 const changedDate = handleDateTimeChange(
-                  formattedDate,
+                  date,
                   time?.format(TIME_FORMAT),
                   offset
                 );
                 onChange(changedDate);
               }}
-              value={dayjs(time)}
+              value={time ? dayjs(time) : null}
             />
           </div>
           <Select
@@ -234,7 +204,7 @@ const DateTimeComponent = ({
             SelectDisplayProps={{
               "aria-required": "true",
             }}
-            value={timeZone ? timeZone : "America/New_York - EST"}
+            value={value ? timeZone : null}
             options={renderMenuItems(options)}
             renderValue={(value) => {
               return findAndRenderLabel(value);
@@ -244,7 +214,7 @@ const DateTimeComponent = ({
               setTimeZone(newTimeZone);
               const offset = getOffSet(newTimeZone);
               const changedDate = handleDateTimeChange(
-                formattedDate,
+                date,
                 formattedTime,
                 offset
               );