init

2025-04-17 18:28:54 +05:30
parent f583291d8a
commit 8825b0410a
2837 changed files with 241385 additions and 127578 deletions
--- a/worklenz-frontend/src/components/board/custom-due-date-picker.tsx
+++ b/worklenz-frontend/src/components/board/custom-due-date-picker.tsx
@@ -0,0 +1,101 @@
+import React, { useState, useRef } from 'react';
+import { DatePicker, Button, Flex } from 'antd';
+import { CalendarOutlined } from '@ant-design/icons';
+import dayjs, { Dayjs } from 'dayjs';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+import logger from '@/utils/errorLogger';
+import { useAuthService } from '@/hooks/useAuth';
+import { getUserSession } from '@/utils/session-helper';
+
+const CustomDueDatePicker = ({
+  task,
+  onDateChange,
+}: {
+  task: IProjectTask;
+  onDateChange: (date: Dayjs | null) => void;
+}) => {
+  const { socket } = useSocket();
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState<boolean>(false);
+  const containerRef = useRef<HTMLDivElement>(null); // Add ref to container
+
+  const dueDayjs = task?.end_date ? dayjs(task.end_date) : null;
+
+  const handleDateChange = (date: Dayjs | null) => {
+    onDateChange(date);
+    setIsDatePickerOpen(false);
+    try {
+      socket?.emit(
+        SocketEvents.TASK_END_DATE_CHANGE.toString(),
+        JSON.stringify({
+          task_id: task.id,
+          end_date: date?.format(),
+          parent_task: task.parent_task_id,
+          time_zone: getUserSession()?.timezone_name
+            ? getUserSession()?.timezone_name
+            : Intl.DateTimeFormat().resolvedOptions().timeZone,
+        })
+      );
+    } catch (error) {
+      logger.error('Failed to update due date:', error);
+    }
+  };
+
+  // Stop propagation at the container level
+  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div ref={containerRef} onClick={handleContainerClick}>
+      {task && task.end_date ? (
+        <DatePicker
+          value={dueDayjs}
+          format={'MMM DD, YYYY'}
+          onChange={handleDateChange}
+          variant="borderless"
+          suffixIcon={null}
+          style={{ textAlign: 'right', padding: 0, maxWidth: 100 }}
+          // Remove individual onClick handler since container handles it
+        />
+      ) : (
+        <Flex gap={4} align="center" style={{ position: 'relative', width: 26, height: 26 }}>
+          <DatePicker
+            open={isDatePickerOpen}
+            value={dueDayjs}
+            format={'MMM DD, YYYY'}
+            onChange={handleDateChange}
+            style={{ opacity: 0, width: 0, height: 0, padding: 0 }}
+            popupStyle={{ paddingBlock: 12 }}
+            onBlur={() => setIsDatePickerOpen(false)}
+            onOpenChange={open => setIsDatePickerOpen(open)}
+            variant="borderless"
+            // Remove individual onClick handler
+          />
+          <Button
+            shape="circle"
+            type="dashed"
+            size="small"
+            style={{
+              background: 'transparent',
+              boxShadow: 'none',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: 26,
+              height: 26,
+            }}
+            onClick={(e) => {
+              e.stopPropagation(); // Keep this as a backup
+              setIsDatePickerOpen(true);
+            }}
+            icon={<CalendarOutlined />}
+          />
+        </Flex>
+      )}
+    </div>
+  );
+};
+
+export default CustomDueDatePicker;