refactor: replace timeline with calendar in goal view (#149)

hudy9x · Mar 25, 2024 · cf3f79d · cf3f79d
1 parent 5f91543
commit cf3f79d
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 38 deletions.
diff --git a/packages/shared-ui/src/components/Timeline/index.tsx b/packages/shared-ui/src/components/Timeline/index.tsx
@@ -10,6 +10,7 @@ export default function Timeline({
   month,
   year,
   items,
+  height = '2.75rem',
   children,
   onChange
 }: ITimelineProps) {
@@ -24,7 +25,7 @@ export default function Timeline({
 
   let totalDates = 0
   const colWidth = '2rem'
-  const colHeight = '2.75rem'
+  const colHeight = height
 
   // calculate month columns - start
   let startMonth = 1
@@ -104,10 +105,10 @@ export default function Timeline({
     <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} />
+        {/* <TimelineList items={items} height={colHeight} /> */}
         <section className="timeline">
           <header
-            className="grid divide-x"
+            className="timeline-month-headers grid divide-x"
             style={{
               gridTemplateColumns: `repeat(${totalDates}, minmax(${colWidth}, 1fr)) auto`
             }}>
@@ -131,7 +132,7 @@ export default function Timeline({
             })}
           </header>
           <header
-            className="grid divide-x"
+            className="timeline-week-headers grid divide-x"
             style={{
               gridTemplateColumns: `repeat(${totalDates}, minmax(${colWidth}, 1fr)) auto`
             }}>
@@ -151,7 +152,7 @@ export default function Timeline({
               })
             })}
           </header>
-          <main className="grid flex-auto grid-cols-1 grid-rows-1 min-h-[100px]">
+          <main className="timeline-goal-container grid flex-auto grid-cols-1 grid-rows-1 min-h-[100px]">
             <div
               className="timeline-columns"
               style={{

diff --git a/packages/shared-ui/src/components/Timeline/style.css b/packages/shared-ui/src/components/Timeline/style.css
@@ -11,10 +11,15 @@
 
 .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;
+
+  & .progressbar {
+    @apply dark:bg-gray-800;
+  }
 }
 
 .timeline-track-handler {
   @apply absolute top-0 cursor-w-resize h-full w-[10px] bg-gray-50/50 hover:bg-gray-200/60 active:bg-red-200/50 rounded-md border border-transparent hover:border-gray-200 border-dashed;
+  @apply dark:bg-gray-900/20 dark:hover:bg-gray-600/60 dark:hover:border-gray-500;
 }
 
 .timeline-track-handler.right {
@@ -26,7 +31,7 @@
 
 .timeline {
   @apply w-full overflow-x-auto overflow-y-hidden;
-  @apply border-l dark:border-gray-700;
+  @apply dark:border-gray-700;
 }
 
 .timeline-columns {

diff --git a/packages/shared-ui/src/components/Timeline/type.ts b/packages/shared-ui/src/components/Timeline/type.ts
@@ -8,6 +8,7 @@ export interface ITimelineItem {
 }
 
 export interface ITimelineProps {
+  height?: string
   year: number
   month: number
   children: (data: ITimelineItem) => ReactNode

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css
@@ -1,7 +1,7 @@
 .calendar-wrapper {
   @apply flex flex-col justify-between divide-y dark:divide-gray-700 relative;
   /* height: calc(100vh - 153px); */
-  height: 800px
+  height: 800px;
 }
 
 .week-view.calendar-wrapper {
@@ -68,3 +68,41 @@
 .week-view .calendar-task-item {
   @apply whitespace-pre-wrap;
 }
+
+/* Copy from /components/calendar/style.css - considers to remove one of them */
+.calendar-container {
+  @apply flex flex-col justify-between divide-y dark:divide-gray-700 relative;
+  @apply border bg-white rounded-md shadow-lg shadow-indigo-100;
+  @apply dark:bg-gray-900 dark:border-gray-700 dark:shadow-gray-900;
+}
+
+.cal-header-day {
+  @apply px-3 py-1 text-sm text-gray-700 dark:text-gray-500;
+}
+
+.cal-week {
+  @apply grid grid-cols-7 h-full divide-x dark:divide-gray-700 dark:text-gray-400;
+}
+
+.cal-day {
+  @apply absolute top-1 left-2;
+}
+
+.cal-day-in-week {
+  @apply bg-white dark:bg-gray-900 relative;
+  @apply text-xs text-gray-600 dark:text-gray-400;
+}
+
+.cal-day-in-week.today .cal-day {
+  @apply text-indigo-500 font-bold;
+}
+
+.cal-day-in-week.is-sunsat {
+  @apply bg-gray-50 dark:bg-black/40;
+}
+
+.cal-day-in-week.not-in-month {
+  @apply bg-indigo-50/50 text-gray-400;
+  @apply dark:bg-gray-800;
+}
+/* Copy from components/calendar/style.css */
diff --git a/packages/ui-app/app/_components/ProgressBar.tsx b/packages/ui-app/app/_components/ProgressBar.tsx
@@ -1,9 +1,12 @@
 interface IProgressBar {
   progress: number
+  variant?: 'rounded' | 'square'
   color?: 'red' | 'green' | 'blue' | 'yellow' | 'dark' | 'indigo'
 }
+
 export default function ProgressBar({
   progress,
+  variant = 'rounded',
   color = 'blue'
 }: IProgressBar) {
   const colors = {
@@ -16,14 +19,15 @@ export default function ProgressBar({
   }
 
   const c = colors[color as keyof typeof colors]
+  const shape = variant === 'rounded' ? 'rounded-full' : 'rounded'
 
   return (
     <div
       title={`${progress || 0}%`}
-      className="w-full bg-gray-200 rounded-full dark:bg-gray-700">
+      className={`progressbar w-full bg-gray-200 ${shape} dark:bg-gray-700`}>
       <div
         className={`${c[0]} text-[10px] font-medium ${c[1]} text-center ${progress > 0 ? 'p-0.5' : 'py-0.5'
-          } leading-none rounded-full`}
+          } leading-none ${shape}`}
         style={{ width: `${progress || 0}%` }}>
         {progress >= 20 ? (
           <>{progress + '%'}</>

diff --git a/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx b/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx
@@ -3,6 +3,7 @@ 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()
@@ -30,7 +31,8 @@ export default function VisionContainer({ visible }: { visible: boolean }) {
           <VisionListTask />
           <VisionList />
         </DndContext>
-        <VisionCalendarContainer />
+        {/* <VisionCalendarContainer /> */}
+        <VisionTimeline visible={true} />
       </div>
     </div>
   )

diff --git a/packages/ui-app/app/_features/Project/Vision/VisionCreate.tsx b/packages/ui-app/app/_features/Project/Vision/VisionCreate.tsx
@@ -59,5 +59,5 @@ export default function VisionCreate() {
 
     createNewVision(visionData)
   }
-  return <ListBoxCreate placeholder="Create new vision" onEnter={onEnter} />
+  return <ListBoxCreate placeholder="Create new goal" onEnter={onEnter} />
 }
diff --git a/packages/ui-app/app/_features/Project/Vision/VisionList.tsx b/packages/ui-app/app/_features/Project/Vision/VisionList.tsx
@@ -39,7 +39,7 @@ export default function VisionList() {
               <div className="py-4 flex items-center justify-center text-gray-400 text-sm">
                 <div className="text-center">
                   <HiOutlineInbox className="inline-block w-6 h-6" />
-                  <h2>No vision found !</h2>
+                  <h2>No goal found !</h2>
                 </div>
               </div>
             ) : null}

diff --git a/packages/ui-app/app/_features/Project/Vision/VisionListHeader.tsx b/packages/ui-app/app/_features/Project/Vision/VisionListHeader.tsx
@@ -19,7 +19,7 @@ export default function VisionListHeader({
       <div className="flex items-center justify-between px-3 py-2 text-xs">
         <div className="">
           <span className="uppercase text-[11px] font-bold text-gray-600">
-            All visions: {total}
+            All goals: {total}
           </span>
           <div className="text-[11px] space-x-2 text-gray-400">
             <span className="capitalize">Done: {done}</span>

diff --git a/packages/ui-app/app/_features/Project/Vision/context.tsx b/packages/ui-app/app/_features/Project/Vision/context.tsx
@@ -23,7 +23,13 @@ interface IVisionContextProps {
   taskDone: number
   taskTotal: number
   visionByDays: VisionByDays
-  visionProgress: { [key: string]: { total: number; done: number } }
+  visionProgress: {
+    [key: string]: {
+      total: number
+      done: number
+      assigneeIds: string[]
+    }
+  }
   filter: IVisionFilter
   setFilter: Dispatch<SetStateAction<IVisionFilter>>
   setSelected: Dispatch<SetStateAction<string>>
@@ -88,13 +94,18 @@ export const useVisionContext = () => {
 
   const getVisionProgress = (id: string) => {
     const progress = visionProgress[id]
+    console.log(visionProgress)
     if (!progress) {
       return 0
     }
 
     return convertToProgress(progress.done, progress.total)
   }
 
+  const getVisionData = (id: string) => {
+    return visionProgress[id]
+  }
+
   const getVisionByDay = (key: string) => {
     return visionByDays[key] || []
   }
@@ -176,6 +187,7 @@ export const useVisionContext = () => {
     mode,
     setMode,
     setSelected,
-    getVisionProgress
+    getVisionProgress,
+    getVisionData,
   }
 }
diff --git a/packages/ui-app/app/_features/Project/Vision/index.tsx b/packages/ui-app/app/_features/Project/Vision/index.tsx
@@ -37,22 +37,30 @@ const useVisionProgress = ({ visions }: { visions: VisionField[] }) => {
   const { tasks } = useTaskStore()
   const { statusDoneId } = useProjectStatusStore()
   //
-  const visionProgress: { [key: string]: { total: number; done: number } } = {}
+  const visionProgress: {
+    [key: string]: { total: number; done: number; assigneeIds: string[] }
+  } = {}
 
   let taskTotal = 0
   let taskDone = 0
 
   visions.forEach(v => {
-    visionProgress[v.id] = { total: 0, done: 0 }
+    visionProgress[v.id] = { total: 0, done: 0, assigneeIds: [] }
   })
 
   tasks.forEach(task => {
-    const { visionId, done, taskStatusId } = task
+    const { visionId, done, taskStatusId, assigneeIds } = task
     if (!visionId || !visionProgress[visionId]) return
 
     taskTotal += 1
     visionProgress[visionId].total += 1
 
+    if (assigneeIds.length) {
+      assigneeIds.forEach(assigneeId => {
+        visionProgress[visionId].assigneeIds.push(assigneeId)
+      })
+    }
+
     if (taskStatusId === statusDoneId) {
       visionProgress[visionId].done += 1
       taskDone += 1
@@ -148,7 +156,7 @@ export default function ProjectVision() {
         setSelected
       }}>
       <VisionContainer visible={mode === EVisionViewMode.CALENDAR} />
-      <VisionTimeline visible={mode === EVisionViewMode.TIMELINE} />
+      {/* <VisionTimeline visible={mode === EVisionViewMode.TIMELINE} /> */}
     </VisionProvider>
   )
 }