issue-814 Enhance visibility control logic and UI to support dual date display

Author: morozov-av

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/edit/VisibilityControl.tsx

@@ -2,7 +2,7 @@ import { RadioButton } from "primereact/radiobutton";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
 
 import { Assignment } from "@/types/assignment";
-import { convertDateToISO, formatUTCDateLocaleString } from "@/utils/date";
+import { convertDateToISO, formatUTCDateLocaleString, parseUTCDate } from "@/utils/date";
 
 import { DateTimePicker } from "../../../../ui/DateTimePicker";
 
@@ -47,6 +47,32 @@ export const VisibilityControl = ({ control, watch, setValue }: VisibilityContro
 
   const visibilityMode = getVisibilityMode();
 
+  const DAY_MS = 24 * 60 * 60 * 1000;
+
+  const handleVisibleOnChange = (val: string) => {
+    setValue("visible_on", val);
+    if (hiddenOn) {
+      const newVisibleDate = parseUTCDate(val);
+      const currentHiddenDate = parseUTCDate(hiddenOn);
+      if (newVisibleDate >= currentHiddenDate) {
+        const adjusted = new Date(newVisibleDate.getTime() + DAY_MS);
+        setValue("hidden_on", convertDateToISO(adjusted));
+      }
+    }
+  };
+
+  const handleHiddenOnChange = (val: string) => {
+    setValue("hidden_on", val);
+    if (visibleOn) {
+      const newHiddenDate = parseUTCDate(val);
+      const currentVisibleDate = parseUTCDate(visibleOn);
+      if (newHiddenDate <= currentVisibleDate) {
+        const adjusted = new Date(newHiddenDate.getTime() - DAY_MS);
+        setValue("visible_on", convertDateToISO(adjusted));
+      }
+    }
+  };
+
   const handleModeChange = (mode: VisibilityMode) => {
     switch (mode) {
       case "hidden":
@@ -62,30 +88,33 @@ export const VisibilityControl = ({ control, watch, setValue }: VisibilityContro
       case "scheduled_visible":
         setValue("visible", false);
         setValue("hidden_on", null);
-        // Keep visible_on or set to current date if null
         if (!visibleOn) {
-          setValue("visible_on", convertDateToISO(new Date()));
+          const startOfDay = new Date();
+          startOfDay.setHours(0, 0, 0, 0);
+          setValue("visible_on", convertDateToISO(startOfDay));
         }
         break;
       case "scheduled_hidden":
         setValue("visible", true);
         setValue("visible_on", null);
-        // Keep hidden_on or set to current date if null
         if (!hiddenOn) {
-          setValue("hidden_on", convertDateToISO(new Date()));
+          const endOfDay = new Date();
+          endOfDay.setHours(23, 59, 0, 0);
+          setValue("hidden_on", convertDateToISO(endOfDay));
         }
         break;
       case "scheduled_period":
         setValue("visible", false);
         // Set both dates if not already set
         if (!visibleOn) {
-          const now = new Date();
-          setValue("visible_on", convertDateToISO(now));
+          const startOfDay = new Date();
+          startOfDay.setHours(0, 0, 0, 0);
+          setValue("visible_on", convertDateToISO(startOfDay));
         }
         if (!hiddenOn) {
-          const twoHoursLater = new Date();
-          twoHoursLater.setHours(twoHoursLater.getHours() + 2);
-          setValue("hidden_on", convertDateToISO(twoHoursLater));
+          const endOfDay = new Date();
+          endOfDay.setHours(23, 59, 0, 0);
+          setValue("hidden_on", convertDateToISO(endOfDay));
         }
         break;
     }
@@ -192,7 +221,7 @@ export const VisibilityControl = ({ control, watch, setValue }: VisibilityContro
                     render={({ field: dateField }) => (
                       <DateTimePicker
                         value={dateField.value}
-                        onChange={(val) => dateField.onChange(val)}
+                        onChange={(val) => handleVisibleOnChange(val)}
                         utc
                       />
                     )}
@@ -206,7 +235,7 @@ export const VisibilityControl = ({ control, watch, setValue }: VisibilityContro
                     render={({ field: dateField }) => (
                       <DateTimePicker
                         value={dateField.value}
-                        onChange={(val) => dateField.onChange(val)}
+                        onChange={(val) => handleHiddenOnChange(val)}
                         utc
                       />
                     )}

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityDropdown.tsx

@@ -16,6 +16,7 @@ type VisibilityMode =
 
 interface VisibilityStatus {
   text: string;
+  secondLine?: string;
   color: string;
   icon: string;
 }
@@ -49,21 +50,35 @@ const getVisibilityStatus = (assignment: Assignment): VisibilityStatus => {
     const visibleDate = parseUTCDate(visible_on);
     const hiddenDate = parseUTCDate(hidden_on);
 
+    const fmt = (d: Date) =>
+      d.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+
     if (now < visibleDate) {
       return {
-        text: visibleDate.toLocaleDateString(undefined, {
-          month: "short",
-          day: "numeric",
-          hour: "2-digit",
-          minute: "2-digit"
-        }),
+        text: fmt(visibleDate),
+        secondLine: fmt(hiddenDate),
         color: "#FFA500",
         icon: "pi pi-clock"
       };
     } else if (now >= visibleDate && now < hiddenDate) {
-      return { text: "Visible", color: "#28A745", icon: "pi pi-eye" };
+      return {
+        text: fmt(visibleDate),
+        secondLine: fmt(hiddenDate),
+        color: "#28A745",
+        icon: "pi pi-calendar"
+      };
     } else {
-      return { text: "Hidden", color: "#DC3545", icon: "pi pi-eye-slash" };
+      return {
+        text: fmt(visibleDate),
+        secondLine: fmt(hiddenDate),
+        color: "#DC3545",
+        icon: "pi pi-calendar-times"
+      };
     }
   }
 
@@ -165,19 +180,25 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
     let newHiddenOn = hiddenOn;
 
     if (newMode === "scheduled_visible" && !newVisibleOn) {
-      newVisibleOn = convertDateToISO(new Date());
+      const startOfDay = new Date();
+      startOfDay.setHours(0, 0, 0, 0);
+      newVisibleOn = convertDateToISO(startOfDay);
     }
     if (newMode === "scheduled_hidden" && !newHiddenOn) {
-      newHiddenOn = convertDateToISO(new Date());
+      const endOfDay = new Date();
+      endOfDay.setHours(23, 59, 0, 0);
+      newHiddenOn = convertDateToISO(endOfDay);
     }
     if (newMode === "scheduled_period") {
       if (!newVisibleOn) {
-        newVisibleOn = convertDateToISO(new Date());
+        const startOfDay = new Date();
+        startOfDay.setHours(0, 0, 0, 0);
+        newVisibleOn = convertDateToISO(startOfDay);
       }
       if (!newHiddenOn) {
-        const twoHoursLater = new Date();
-        twoHoursLater.setHours(twoHoursLater.getHours() + 2);
-        newHiddenOn = convertDateToISO(twoHoursLater);
+        const endOfDay = new Date();
+        endOfDay.setHours(23, 59, 0, 0);
+        newHiddenOn = convertDateToISO(endOfDay);
       }
     }
 
@@ -189,15 +210,37 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
     onChange(assignment, values);
   };
 
+  const DAY_MS = 24 * 60 * 60 * 1000;
+
   const handleVisibleOnChange = (val: string) => {
+    let newHiddenOn = hiddenOn;
+    if (mode === "scheduled_period" && newHiddenOn) {
+      const newVisibleDate = parseUTCDate(val);
+      const currentHiddenDate = parseUTCDate(newHiddenOn);
+      if (newVisibleDate >= currentHiddenDate) {
+        const adjusted = new Date(newVisibleDate.getTime() + DAY_MS);
+        newHiddenOn = convertDateToISO(adjusted);
+        setHiddenOn(newHiddenOn);
+      }
+    }
     setVisibleOn(val);
-    const values = computeValues(mode, val, hiddenOn);
+    const values = computeValues(mode, val, newHiddenOn);
     onChange(assignment, values);
   };
 
   const handleHiddenOnChange = (val: string) => {
+    let newVisibleOn = visibleOn;
+    if (mode === "scheduled_period" && newVisibleOn) {
+      const newHiddenDate = parseUTCDate(val);
+      const currentVisibleDate = parseUTCDate(newVisibleOn);
+      if (newHiddenDate <= currentVisibleDate) {
+        const adjusted = new Date(newHiddenDate.getTime() - DAY_MS);
+        newVisibleOn = convertDateToISO(adjusted);
+        setVisibleOn(newVisibleOn);
+      }
+    }
     setHiddenOn(val);
-    const values = computeValues(mode, visibleOn, val);
+    const values = computeValues(mode, newVisibleOn, val);
     onChange(assignment, values);
   };
 
@@ -211,18 +254,32 @@ export const VisibilityDropdown = ({ assignment, onChange }: VisibilityDropdownP
           fontWeight: 500,
           cursor: "pointer",
           display: "flex",
+          flexDirection: status.secondLine ? "column" : "row",
           alignItems: "center",
           justifyContent: "center",
-          gap: "4px"
+          gap: status.secondLine ? "0px" : "4px"
         }}
         title="Click to change visibility"
       >
-        <i className={status.icon} style={{ fontSize: "0.9rem" }} />
-        <span>{status.text}</span>
-        <i
-          className="pi pi-chevron-down"
-          style={{ fontSize: "0.7rem", marginLeft: "2px", opacity: 0.6 }}
-        />
+        <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+          <i className={status.icon} style={{ fontSize: "0.9rem" }} />
+          <span>{status.text}</span>
+          {!status.secondLine && (
+            <i
+              className="pi pi-chevron-down"
+              style={{ fontSize: "0.7rem", marginLeft: "2px", opacity: 0.6 }}
+            />
+          )}
+        </div>
+        {status.secondLine && (
+          <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+            <span>{status.secondLine}</span>
+            <i
+              className="pi pi-chevron-down"
+              style={{ fontSize: "0.7rem", marginLeft: "2px", opacity: 0.6 }}
+            />
+          </div>
+        )}
       </div>
       <OverlayPanel
         ref={overlayRef}

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/VisibilityStatusBadge.tsx

@@ -5,6 +5,7 @@ import { parseUTCDate } from "@/utils/date";
 
 interface VisibilityStatus {
   text: string;
+  secondLine?: string;
   color: string;
   icon: string;
   tooltip: string;
@@ -23,34 +24,37 @@ const getVisibilityStatus = (assignment: Assignment): VisibilityStatus => {
     const visibleDate = parseUTCDate(visible_on);
     const hiddenDate = parseUTCDate(hidden_on);
 
+    const formatShort = (d: Date) =>
+      d.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+      });
+
     if (now < visibleDate) {
-      // Period hasn't started yet
       return {
-        text: visibleDate.toLocaleDateString(undefined, {
-          month: "short",
-          day: "numeric",
-          hour: "2-digit",
-          minute: "2-digit"
-        }),
+        text: formatShort(visibleDate),
+        secondLine: formatShort(hiddenDate),
         color: "#FFA500",
         icon: "pi pi-clock",
         tooltip: `Visible from ${visibleDate.toLocaleString()} to ${hiddenDate.toLocaleString()}`
       };
     } else if (now >= visibleDate && now < hiddenDate) {
-      // Currently in visible period
       return {
-        text: "Visible",
+        text: formatShort(visibleDate),
+        secondLine: formatShort(hiddenDate),
         color: "#28A745",
-        icon: "pi pi-eye",
+        icon: "pi pi-calendar",
         tooltip: `Visible until ${hiddenDate.toLocaleString()}`
       };
     } else {
-      // Period has ended
       return {
-        text: "Hidden",
+        text: formatShort(visibleDate),
+        secondLine: formatShort(hiddenDate),
         color: "#DC3545",
-        icon: "pi pi-eye-slash",
-        tooltip: ""
+        icon: "pi pi-calendar-times",
+        tooltip: `Period ended on ${hiddenDate.toLocaleString()}`
       };
     }
   }
@@ -157,8 +161,8 @@ export const VisibilityStatusBadge = ({ assignment }: VisibilityStatusBadgeProps
       <div
         className={
           hasTooltip
-            ? "visibility-status-badge flex align-items-center justify-content-center gap-1"
-            : "flex align-items-center justify-content-center gap-1"
+            ? "visibility-status-badge flex flex-column align-items-center justify-content-center"
+            : "flex flex-column align-items-center justify-content-center"
         }
         style={{
           fontSize: "0.85rem",
@@ -171,8 +175,11 @@ export const VisibilityStatusBadge = ({ assignment }: VisibilityStatusBadgeProps
           "data-pr-position": "top"
         })}
       >
-        <i className={status.icon} style={{ fontSize: "0.9rem" }}></i>
-        <span>{status.text}</span>
+        <div className="flex align-items-center gap-1">
+          <i className={status.icon} style={{ fontSize: "0.9rem" }}></i>
+          <span>{status.text}</span>
+        </div>
+        {status.secondLine && <span>{status.secondLine}</span>}
       </div>
     </>
   );