refactor: the dnd ux in goal view was so terrible with a very long ta…

…sk list (#182)
hudy9x · May 25, 2024 · 577ea19 · 577ea19
1 parent dde0670
commit 577ea19
Show file tree

Hide file tree

Showing 17 changed files with 392 additions and 245 deletions.
diff --git a/packages/shared-ui/src/components/Timeline/index.tsx b/packages/shared-ui/src/components/Timeline/index.tsx
@@ -4,28 +4,13 @@ import { genCalendarArr, getDayName, isSunSat, isToday } from '@shared/libs'
 import TimelineTrack from './TimelineTrack'
 import { useMemo } from 'react'
 import { ITimelineProps } from './type'
-import TimelineList from './TimelineList'
 
-export default function Timeline({
-  month,
-  year,
-  items,
-  height = '2.75rem',
-  children,
-  onChange
-}: ITimelineProps) {
-  const w1 = useMemo(
-    () => genCalendarArr(new Date(year, month - 1, 1)),
-    [month, year]
-  )
+function generateColumnsByMonth(weeks: Date[][], height: string) {
 
-  const weeks = w1
   const dateMap = new Map()
   const gridMap = new Map()
 
   let totalDates = 0
-  const colWidth = '2rem'
-  const colHeight = height
 
   // calculate month columns - start
   let startMonth = 1
@@ -75,6 +60,38 @@ export default function Timeline({
     })
   })
 
+  return {
+    monthColumns,
+    dateMap,
+    gridMap,
+    totalDates,
+  }
+
+}
+
+export default function Timeline({
+  month,
+  year,
+  items,
+  height = '2.75rem',
+  children,
+  onChange
+}: ITimelineProps) {
+  const w1 = useMemo(
+    () => genCalendarArr(new Date(year, month - 1, 1)),
+    [month, year]
+  )
+
+  const weeks = w1
+  const colWidth = '2rem'
+  const colHeight = height
+  const {
+    monthColumns,
+    dateMap,
+    gridMap,
+    totalDates,
+  } = generateColumnsByMonth(weeks, height)
+
   const updateDateRange = (id: string, start: number, end: number) => {
     let posStart = start
     let postEnd = end
@@ -87,8 +104,6 @@ export default function Timeline({
     const startDate = gridMap.get(posStart)
     const dueDate = gridMap.get(postEnd - 1)
 
-    console.log(startDate, dueDate)
-
     onChange &&
       onChange({
         id,
@@ -98,14 +113,12 @@ export default function Timeline({
   }
 
   const today = new Date()
-
   let startWeek = 1
 
   return (
     <div className="timeline-container">
       <div
         className={`flex items-start bg-white dark:bg-gray-900 border dark:border-gray-700 p-0.5 rounded-md`}>
-        {/* <TimelineList items={items} height={colHeight} /> */}
         <section className="timeline custom-scrollbar">
           <header
             className="timeline-month-headers grid divide-x"

diff --git a/packages/shared-ui/src/components/Timeline/style.css b/packages/shared-ui/src/components/Timeline/style.css
@@ -10,7 +10,7 @@
 }
 
 .timeline-track-container {
-  @apply whitespace-nowrap relative text-gray-600 w-full bg-white dark:bg-gray-700 dark:text-gray-200 dark:shadow-gray-900 dark:border-gray-600 px-2.5 py-2 text-sm  rounded-md border border-gray-300 shadow-md shadow-indigo-50;
+  @apply whitespace-nowrap relative text-gray-600 w-full bg-white dark:bg-gray-700 dark:text-gray-200 dark:shadow-gray-900 dark:border-gray-600 text-sm  rounded-md border border-gray-300 shadow-md shadow-indigo-50;
 
   & .progressbar {
     @apply dark:bg-gray-800;

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/TaskUpdate2.tsx
@@ -146,7 +146,6 @@ export const TaskUpdate2 = () => {
     const currentTask = tasks.find(task => task.id === taskId)
     refCurrentTask.current = currentTask
 
-    console.log('update current Task')
     if (currentTask) {
       setCurrentTask({
         title: currentTask?.title || defaultFormikValues.title,

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/style.css b/packages/ui-app/app/[orgID]/project/[projectId]/style.css
@@ -13,7 +13,7 @@
   @apply text-xs sm:text-sm bg-transparent dark:bg-transparent;
 }
 
-.task-status .status-title {
+.task-status:not(.with-name) .status-title {
   display: none;
 }
 

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/views/TaskStatus.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/views/TaskStatus.tsx
@@ -4,13 +4,16 @@ import { useServiceTaskUpdate } from '@/hooks/useServiceTaskUpdate'
 export default function TaskStatus({
   taskId,
   value,
-  className
+  className,
+  withName = false
 }: {
   taskId: string
   value: string
   className?: string
+  withName?: boolean
 }) {
   const { updateTaskData } = useServiceTaskUpdate()
+  const classes = ['task-status']
 
   const onUpdateStatus = (statusId: string) => {
     if (statusId === value) return
@@ -19,9 +22,12 @@ export default function TaskStatus({
       taskStatusId: statusId
     })
   }
+
+  withName && classes.push('with-name')
+  className && classes.push(className)
   return (
     <StatusSelect
-      className={`task-status ${className}`}
+      className={classes.join(' ')}
       value={value}
       onChange={onUpdateStatus}
     />

diff --git a/packages/ui-app/app/_components/Dnd/Draggable.tsx b/packages/ui-app/app/_components/Dnd/Draggable.tsx
@@ -29,7 +29,7 @@ export default function Draggable({
 
   const classes = ['block']
   className && classes.push(className)
-  transform && classes.push('relative z-10')
+  transform && classes.push('fixed z-10')
 
   return (
     <div

diff --git a/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx b/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx
@@ -1,38 +1,15 @@
-import VisionList from './VisionList'
 import VisionListTask from './VisionListTask'
-import { DndContext, DragEndEvent } from '@dnd-kit/core'
-import { useServiceTaskUpdate } from '@/hooks/useServiceTaskUpdate'
-import VisionCalendarContainer from './VisionCalendaContainer'
 import VisionTimeline from '../VisionTimeline'
 
 export default function VisionContainer({ visible }: { visible: boolean }) {
-  const { updateTaskData } = useServiceTaskUpdate()
-  const onDragEnd = (ev: DragEndEvent) => {
-    const { active, over } = ev
-    if (!active.id || !over?.id) {
-      return
-    }
-
-    const taskId = active.id as string
-    const visionId = over.id as string
-
-    updateTaskData({
-      id: taskId,
-      visionId
-    })
-  }
 
   return (
     <div className={`vision relative ${visible ? '' : 'hidden'}`}>
       <div
-        className="flex divide-x dark:divide-gray-700"
-        style={{ height: `calc(100vh - 83px)` }}>
-        <DndContext onDragEnd={onDragEnd}>
-          <VisionListTask />
-          {/* <VisionList /> */}
-          <VisionTimeline visible={true} />
-        </DndContext>
-        {/* <VisionCalendarContainer /> */}
+        className="flex"
+        style={{ height: `calc(100vh - 98px)` }}>
+        <VisionListTask />
+        <VisionTimeline visible={true} />
       </div>
     </div>
   )

diff --git a/packages/ui-app/app/_features/Project/Vision/VisionList.tsx b/packages/ui-app/app/_features/Project/Vision/VisionList.tsx