feat(web): implement allday event horizontal duration scaling

Author: that-one-arab

packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridMouseMove.ts

@@ -15,7 +15,7 @@ export const useGridMouseMove = () => {
     (e: MouseEvent) => {
       if (!isDrafting) return;
 
-      if (isResizing && !draft?.isAllDay) {
+      if (isResizing) {
         resize(e);
       } else if (isDragging) {
         e.preventDefault();

packages/web/src/views/Calendar/components/Draft/grid/hooks/useGridMouseUp.ts

@@ -25,7 +25,7 @@ export const useGridMouseUp = () => {
         hasMoved = resizeStatus?.hasMoved || dragStatus?.hasMoved || false;
         shouldSubmit = !draft?.isOpen;
       } else if (category === Categories_Event.ALLDAY) {
-        hasMoved = dragStatus?.hasMoved || false;
+        hasMoved = dragStatus?.hasMoved || resizeStatus?.hasMoved || false;
         shouldSubmit = hasMoved;
       }
 
@@ -40,6 +40,10 @@ export const useGridMouseUp = () => {
   const handleAllDayRowMouseUp = useCallback(() => {
     if (!draft) return;
 
+    if (isResizing) {
+      stopResizing();
+    }
+
     if (isDragging) {
       stopDragging();
     }
@@ -56,7 +60,16 @@ export const useGridMouseUp = () => {
     if (shouldSubmit) {
       submit(draft);
     }
-  }, [draft, isDragging, getNextAction, stopDragging, openForm, submit]);
+  }, [
+    draft,
+    isDragging,
+    isResizing,
+    getNextAction,
+    stopDragging,
+    stopResizing,
+    openForm,
+    submit,
+  ]);
 
   const handleMainGridMouseUp = useCallback(() => {
     if (!draft || !isDrafting) return;

packages/web/src/views/Calendar/components/Draft/hooks/actions/useDraftActions.ts

@@ -439,16 +439,21 @@ export const useDraftActions = (
     (currTime: dayjs.Dayjs) => {
       if (!draft || !dateBeingChanged) return false;
 
-      const _currTime = currTime.format();
+      const _currTime = draft.isAllDay
+        ? currTime.format(YEAR_MONTH_DAY_FORMAT)
+        : currTime.format();
       const noChange = draft[dateBeingChanged] === _currTime;
 
       if (noChange) return false;
 
-      const diffDay = currTime.day() !== dayjs(draft.startDate).day();
-      if (diffDay) return false;
+      // For timed events, restrict to same day
+      if (!draft.isAllDay) {
+        const diffDay = currTime.day() !== dayjs(draft.startDate).day();
+        if (diffDay) return false;
 
-      const sameStart = currTime.format() === draft.startDate;
-      if (sameStart) return false;
+        const sameStart = currTime.format() === draft.startDate;
+        if (sameStart) return false;
+      }
 
       return true;
     },
@@ -481,10 +486,23 @@ export const useDraftActions = (
         } else if (comparisonKeyword === "before") {
           if (currTime.isBefore(opposite)) {
             setDateBeingChanged(oppositeKey);
-            startDate = dayjs(startDate)
-              .subtract(GRID_TIME_STEP, "minutes")
-              .format();
-            endDate = dayjs(startDate).add(GRID_TIME_STEP, "minutes").format();
+            if (draft?.isAllDay) {
+              // For all-day events, move by day
+              startDate = dayjs(startDate)
+                .subtract(1, "day")
+                .format(YEAR_MONTH_DAY_FORMAT);
+              endDate = dayjs(startDate)
+                .add(1, "day")
+                .format(YEAR_MONTH_DAY_FORMAT);
+            } else {
+              // For timed events, move by time step
+              startDate = dayjs(startDate)
+                .subtract(GRID_TIME_STEP, "minutes")
+                .format();
+              endDate = dayjs(startDate)
+                .add(GRID_TIME_STEP, "minutes")
+                .format();
+            }
 
             justFlipped = true;
           }
@@ -510,9 +528,11 @@ export const useDraftActions = (
       if (!isResizing) return;
 
       const x = getX(e, isSidebarOpen);
+      // For all-day events, use a fixed Y coordinate since they don't use Y positioning
+      const y = draft?.isAllDay ? 0 : e.clientY;
       const currTime = dateCalcs.getDateByXY(
         x,
-        e.clientY,
+        y,
         weekProps.component.startOfView,
       );
 
@@ -524,10 +544,23 @@ export const useDraftActions = (
       const dateChanged = justFlipped ? oppositeKey : dateBeingChanged;
 
       const origTime = dayjs(dateChanged ? draft?.[dateChanged] : null);
-      const diffMin = currTime.diff(origTime, "minute");
-      const updatedTime = origTime.add(diffMin, "minutes").format();
 
-      const hasMoved = diffMin !== 0;
+      let updatedTime: string;
+      let hasMoved: boolean;
+
+      if (draft?.isAllDay) {
+        // For all-day events, work with day differences
+        const diffDays = currTime.diff(origTime, "day");
+        updatedTime = origTime
+          .add(diffDays, "days")
+          .format(YEAR_MONTH_DAY_FORMAT);
+        hasMoved = diffDays !== 0;
+      } else {
+        // For timed events, work with minute differences
+        const diffMin = currTime.diff(origTime, "minute");
+        updatedTime = origTime.add(diffMin, "minutes").format();
+        hasMoved = diffMin !== 0;
+      }
 
       if (!resizeStatus?.hasMoved && hasMoved) {
         setResizeStatus({ hasMoved: true });

packages/web/src/views/Calendar/components/Event/styled.ts

@@ -135,3 +135,29 @@ export const StyledEventScaler = styled.div.attrs<ScalerProps>((props) => {
   ${(props) => props.showResizeCursor && `cursor: row-resize`};
   ${({ zIndex }) => zIndex && `z-index: ${zIndex}`}
 `;
+
+export interface HorizontalScalerProps {
+  showResizeCursor: boolean;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export const StyledEventHorizontalScaler = styled.div.attrs<HorizontalScalerProps>(
+  (props) => {
+    return {
+      left: props.left,
+      right: props.right,
+    };
+  },
+)<HorizontalScalerProps>`
+  position: absolute;
+  width: 4.5px;
+  height: 100%;
+  opacity: 0;
+  top: 0;
+  left: ${(props) => props.left};
+  right: ${(props) => props.right};
+  ${(props) => props.showResizeCursor && `cursor: col-resize`};
+  ${({ zIndex }) => zIndex && `z-index: ${zIndex}`}
+`;

packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx

@@ -1,7 +1,10 @@
 import dayjs from "dayjs";
 import React, { MouseEvent, memo } from "react";
 import { Priorities } from "@core/constants/core.constants";
-import { DATA_EVENT_ELEMENT_ID } from "@web/common/constants/web.constants";
+import {
+  DATA_EVENT_ELEMENT_ID,
+  ZIndex,
+} from "@web/common/constants/web.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import { isOptimisticEvent } from "@web/common/utils/event.util";
 import { getEventPosition } from "@web/common/utils/position.util";
@@ -11,7 +14,7 @@ import { SpaceCharacter } from "@web/components/SpaceCharacter";
 import { Text } from "@web/components/Text";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
-import { StyledEvent } from "../../Event/styled";
+import { StyledEvent, StyledEventHorizontalScaler } from "../../Event/styled";
 
 interface Props {
   event: Schema_GridEvent;
@@ -20,6 +23,11 @@ interface Props {
   startOfView: WeekProps["component"]["startOfView"];
   endOfView: WeekProps["component"]["endOfView"];
   onMouseDown: (e: MouseEvent, event: Schema_GridEvent) => void;
+  onScalerMouseDown?: (
+    event: Schema_GridEvent,
+    e: MouseEvent,
+    dateToChange: "startDate" | "endDate",
+  ) => void;
 }
 
 const AllDayEvent = ({
@@ -29,6 +37,7 @@ const AllDayEvent = ({
   startOfView,
   endOfView,
   onMouseDown,
+  onScalerMouseDown,
 }: Props) => {
   const position = getEventPosition(
     event,
@@ -73,6 +82,29 @@ const AllDayEvent = ({
           <SpaceCharacter />
         </Text>
       </Flex>
+      {onScalerMouseDown && (
+        <>
+          <StyledEventHorizontalScaler
+            showResizeCursor={!isPlaceholder && !isOptimistic}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              onScalerMouseDown(event, e, "startDate");
+            }}
+            left="-0.25px"
+            zIndex={ZIndex.LAYER_4}
+          />
+
+          <StyledEventHorizontalScaler
+            right="-0.25px"
+            showResizeCursor={!isPlaceholder && !isOptimistic}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              onScalerMouseDown(event, e, "endDate");
+            }}
+            zIndex={ZIndex.LAYER_4}
+          />
+        </>
+      )}
     </StyledEvent>
   );
 };

packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvents.tsx

@@ -58,6 +58,19 @@ export const AllDayEvents = ({
     handleDrag,
   );
 
+  const resizeAllDayEvent = (
+    event: Schema_GridEvent,
+    dateToChange: "startDate" | "endDate",
+  ) => {
+    dispatch(
+      draftSlice.actions.startResizing({
+        category: Categories_Event.ALLDAY,
+        event,
+        dateToChange,
+      }),
+    );
+  };
+
   const renderEvents = () => {
     if (
       isProcessing &&
@@ -81,6 +94,15 @@ export const AllDayEvents = ({
             }
             onMouseDown(e, event);
           }}
+          onScalerMouseDown={(
+            event,
+            e,
+            dateToChange: "startDate" | "endDate",
+          ) => {
+            e.stopPropagation();
+            e.preventDefault();
+            resizeAllDayEvent(event, dateToChange);
+          }}
         />
       );
     });