enhance: add status filter to board view (#152)

hudy9x · Mar 28, 2024 · 15432ba · 15432ba
1 parent cc0a7c2
commit 15432ba
Show file tree

Hide file tree

Showing 27 changed files with 651 additions and 263 deletions.
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/ProjectTabContent.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/ProjectTabContent.tsx
@@ -49,20 +49,22 @@ function AnimateView({
   visible: boolean
   children: React.ReactNode
 }) {
-  const id = useId()
-  return (
-    <AnimatePresence>
-      {visible ? (
-        <motion.div
-          key={id}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}>
-          {children}
-        </motion.div>
-      ) : null}
-    </AnimatePresence>
-  )
+  if (!visible) return null
+  return <>{children}</>
+  // const id = useId()
+  // return (
+  //   <AnimatePresence>
+  //     {visible ? (
+  //       <motion.div
+  //         key={id}
+  //         initial={{ opacity: 0 }}
+  //         animate={{ opacity: 1 }}
+  //         exit={{ opacity: 0 }}>
+  //         {children}
+  //       </motion.div>
+  //     ) : null}
+  //   </AnimatePresence>
+  // )
 }
 
 export default function ProjectTabContent() {

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardActionCreateTask.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardActionCreateTask.tsx
@@ -7,14 +7,15 @@ import { taskAdd } from '@/services/task'
 import { Task, TaskPriority } from '@prisma/client'
 import { useTaskFilter } from '@/features/TaskFilter/context'
 import { useParams } from 'next/navigation'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 
 export const BoardActionCreateTaskWithIcon = ({
   groupId
 }: {
   groupId: string
 }) => {
   const { isGroupbyStatus, isGroupbyAssignee, isGroupbyPriority } =
-    useTaskFilter()
+    useTaskFilterContext()
   const [visible, setVisible] = useState(false)
   const { handleSubmit } = useHandleSubmit(() => {
     setVisible(false)
@@ -90,7 +91,7 @@ const useHandleSubmit = (cb: () => void) => {
 
 export const BoardActionCreateTask = ({ groupId }: { groupId: string }) => {
   const { isGroupbyPriority, isGroupbyAssignee, isGroupbyStatus } =
-    useTaskFilter()
+    useTaskFilterContext()
   const [visible, setVisible] = useState(false)
   const { projectId } = useParams()
   const { handleSubmit } = useHandleSubmit(() => {

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardContainer.tsx
@@ -1,4 +1,4 @@
-import { useTaskFilter } from '@/features/TaskFilter/context'
+import { ETaskFilterGroupByType } from '@/features/TaskFilter/context'
 import './style.css'
 import { DragDropContext, DropResult, Droppable } from 'react-beautiful-dnd'
 
@@ -8,16 +8,19 @@ import { triggerEventTaskReorder } from '@/events/useEventTaskReorder'
 import { useUrl } from '@/hooks/useUrl'
 import { useBoardRealtimeUpdate } from './useBoardRealtimeUpdate'
 import { triggerEventMoveTaskToOtherBoard } from '@/events/useEventMoveTaskToOtherBoard'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 
 export default function BoardContainer() {
   const { projectId } = useUrl()
-  const { groupByItems } = useTaskFilter()
+  const { groupByItems, filter, groupBy } = useTaskFilterContext()
   const {
     dragColumnToAnotherPosition,
     dragItemToAnotherPosition,
     dragItemToAnotherColumn
   } = useBoardDndAction()
 
+  const { statusIds } = filter
+
   useBoardRealtimeUpdate()
 
   const onDragEnd = (result: DropResult) => {
@@ -85,6 +88,18 @@ export default function BoardContainer() {
               {...provided.droppableProps}
               ref={provided.innerRef}>
               {groupByItems.map((group, groupIndex) => {
+                if (
+                  groupBy === ETaskFilterGroupByType.STATUS &&
+                  statusIds.length
+                ) {
+                  if (
+                    !statusIds.includes('ALL') &&
+                    !statusIds.includes(group.id)
+                  ) {
+                    return null
+                  }
+                }
+
                 return (
                   <BoardColumnDraggable
                     group={group}
@@ -93,11 +108,6 @@ export default function BoardContainer() {
                   />
                 )
               })}
-              {/* <div className="board"> */}
-              {/*   <h2 className="btn" onClick={addNewStatus}> */}
-              {/*     Create new status */}
-              {/*   </h2> */}
-              {/* </div> */}
               {provided.placeholder}
             </div>
           )

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardHeader.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardHeader.tsx
@@ -4,6 +4,7 @@ import { MdDragIndicator } from 'react-icons/md'
 import { useTaskFilter } from '@/features/TaskFilter/context'
 import { Avatar } from '@shared/ui'
 import Badge from '@/components/Badge'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 // import TaskCheckAll from '../views/TaskCheckAll'
 
 interface IBoardHeaderProps {
@@ -22,17 +23,20 @@ export default function BoardHeader({
   id,
   provided
 }: IBoardHeaderProps) {
-  const { isGroupbyAssignee, isGroupbyStatus, groupByLoading } = useTaskFilter()
+  const { isGroupbyAssignee, isGroupbyStatus, groupByLoading } =
+    useTaskFilterContext()
 
   return (
     <div className="board-header">
       <div
-        className={`board-header-loading ${groupByLoading ? 'visible' : 'invisible '
-          }`}></div>
+        className={`board-header-loading ${
+          groupByLoading ? 'visible' : 'invisible '
+        }`}></div>
       <div className="board-col-header">
         <div
-          className={`board-header-section ${groupByLoading ? 'opacity-0' : 'opacity-100'
-            }`}>
+          className={`board-header-section ${
+            groupByLoading ? 'opacity-0' : 'opacity-100'
+          }`}>
           {isGroupbyStatus ? (
             <div
               className="w-3 h-4 text-gray-400"

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardItemDraggable.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardItemDraggable.tsx
@@ -2,6 +2,7 @@ import { useTaskStore } from '@/store/task'
 import { useMemo } from 'react'
 import { Draggable } from 'react-beautiful-dnd'
 import BoardItem from './BoardItem'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 
 export default function BoardItemDraggable({
   item,
@@ -11,12 +12,28 @@ export default function BoardItemDraggable({
   index: number
 }) {
   const { tasks } = useTaskStore()
+  // const { filter, groupBy } = useTaskFilterContext()
+  // const filteredStatusIds = filter.statusIds
+
   const task = useMemo(() => {
     return tasks.find(t => t.id === item)
   }, [JSON.stringify(tasks), item])
 
   if (!task) return null
 
+  // This will filter tasks by Status
+  // it fast, but can not update the total
+
+  // if (
+  //   filteredStatusIds.length &&
+  //   task.taskStatusId &&
+  //   !filteredStatusIds.includes('ALL')
+  // ) {
+  //   if (!filteredStatusIds.includes(task.taskStatusId)) {
+  //     return null
+  //   }
+  // }
+
   return (
     <Draggable draggableId={item} key={item} index={index}>
       {provided => (

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardList.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/board/BoardList.tsx
@@ -2,7 +2,6 @@ import { Droppable } from 'react-beautiful-dnd'
 
 import BoardItemDraggable from './BoardItemDraggable'
 import { BoardActionCreateTask } from './BoardActionCreateTask'
-import { useTaskStore } from '@/store/task'
 
 export default function BoardList({
   items,

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/useBoardAction.ts b/packages/ui-app/app/[orgID]/project/[projectId]/board/useBoardAction.ts
@@ -1,4 +1,5 @@
 import { useTaskFilter } from '@/features/TaskFilter/context'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 import { projectStatusUpdateOrder } from '@/services/status'
 import { taskUpdate } from '@/services/task'
 import { useProjectStatusStore } from '@/store/status'
@@ -12,7 +13,7 @@ import { useEffect, useState } from 'react'
 export const useBoardAction = () => {
   const { updateTask } = useTaskStore()
   const { isGroupbyStatus, isGroupbyAssignee, isGroupbyPriority } =
-    useTaskFilter()
+    useTaskFilterContext()
   const { projectId } = useParams()
   const [updateSttCounter, setUpdateSttCounter] = useState(0)
   const { statuses, swapOrder } = useProjectStatusStore()

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/board/useBoardDndAction.ts b/packages/ui-app/app/[orgID]/project/[projectId]/board/useBoardDndAction.ts
@@ -6,10 +6,11 @@ import { useBoardAction } from './useBoardAction'
 import { useBoardItemReorder } from './useBoardItemReorder'
 import { serviceTask } from '@/services/task'
 import { useUrl } from '@/hooks/useUrl'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 
 export const useBoardDndAction = () => {
   const { moveTaskToAnotherGroup, rearrangeColumn } = useBoardAction()
-  const { setGroupbyItems } = useTaskFilter()
+  const { setGroupbyItems } = useTaskFilterContext()
   const { reorderTask } = useBoardItemReorder()
   const { projectId } = useUrl()
 

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTask.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/CalMonthTask.tsx
@@ -7,6 +7,7 @@ import { ICalendarView, useCalendarContext } from './context'
 import CalTaskInWeek from './CalTaskInWeek'
 import { useTaskFilter } from '@/features/TaskFilter/context'
 import Link from 'next/link'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 
 interface ICalMonthTaskProps {
   id: string
@@ -27,45 +28,46 @@ export default function CalMonthTask({
   assigneeId,
   taskStatusId
 }: ICalMonthTaskProps) {
-  const { filter } = useTaskFilter()
+  const { filter } = useTaskFilterContext()
   const { status: filterStatus, statusIds: filterStatusIds } = filter
   const { color, type } = useStatusData(taskStatusId || '')
   const { calendarView } = useCalendarContext()
 
-  const view = () => <Link href={link}>
-    <Draggable draggableId={id} index={index}>
-      {provided => (
-        <div
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          ref={provided.innerRef}
-          className="calendar-task-item relative">
-          {calendarView === ICalendarView.WEEK ? (
-            <CalTaskInWeek
-              color={color}
-              title={title}
-              assigneeId={assigneeId}
-            />
-          ) : (
-            <CalTaskInMonth
-              time={time}
-              color={color}
-              title={title}
-              assigneeId={assigneeId}
-            />
-          )}
-        </div>
-      )}
-    </Draggable>
-  </Link>
+  const view = () => (
+    <Link href={link}>
+      <Draggable draggableId={id} index={index}>
+        {provided => (
+          <div
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            ref={provided.innerRef}
+            className="calendar-task-item relative">
+            {calendarView === ICalendarView.WEEK ? (
+              <CalTaskInWeek
+                color={color}
+                title={title}
+                assigneeId={assigneeId}
+              />
+            ) : (
+              <CalTaskInMonth
+                time={time}
+                color={color}
+                title={title}
+                assigneeId={assigneeId}
+              />
+            )}
+          </div>
+        )}
+      </Draggable>
+    </Link>
+  )
 
   // if statusIds contain ALL or nothing
   // display view
   if (filterStatusIds.includes('ALL') || !filterStatusIds.length) {
     return view()
   }
 
-
   // if statusIds have some
   // display tasks that have the same status id
   if (filterStatusIds.includes(taskStatusId)) {

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/views/ListMode.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/views/ListMode.tsx
@@ -9,30 +9,7 @@ import ListCreateTask from './ListCreateTask'
 import { useTaskFilter } from '@/features/TaskFilter/context'
 import TaskMultipleActions from '@/features/TaskMultipleActions'
 import ListRow from './ListRow'
-
-// const useListFilterCondition = ({
-//   isGroupbyStatus
-// }: {
-//   isGroupbyStatus: boolean
-// }) => {
-//   const groupedByStatusButNotMeetCondition = (
-//     task: ExtendedTask,
-//     groupStatusId: string
-//   ) => {
-//     if (isGroupbyStatus && task.taskStatusId !== groupStatusId) {
-//       if (groupStatusId === 'NONE') {
-//         return <ListRow key={task.id} task={task} />
-//       }
-//       return null
-//     }
-//
-//     return null
-//   }
-//
-//   return {
-//     groupedByStatusButNotMeetCondition
-//   }
-// }
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 
 export default function ListMode() {
   const {
@@ -42,9 +19,10 @@ export default function ListMode() {
     isGroupbyPriority,
     isGroupbyAssignee,
     isGroupbyStatus
-  } = useTaskFilter()
+  } = useTaskFilterContext()
 
   const { tasks, taskLoading } = useTaskStore()
+  console.log('listmode render', taskLoading)
   // const { groupedByStatusButNotMeetCondition } = useListFilterCondition({
   //   isGroupbyStatus
   // })
@@ -90,7 +68,7 @@ export default function ListMode() {
               </div>
             </div>
             <div className="divide-y dark:divide-gray-800">
-              {taskLoading || groupByLoading ? (
+              {taskLoading ? (
                 <Loading className="px-3 py-2 text-sm" title="Loading ..." />
               ) : null}
 

diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/views/TaskCheckAll.tsx b/packages/ui-app/app/[orgID]/project/[projectId]/views/TaskCheckAll.tsx
@@ -1,4 +1,5 @@
 import { useTaskFilter } from '@/features/TaskFilter/context'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 import { useTaskStore } from '@/store/task'
 import { Form } from '@shared/ui'
 import { useEffect, useMemo, useState } from 'react'
@@ -8,7 +9,7 @@ export default function TaskCheckAll({ groupId }: { groupId: string }) {
   const { tasks, selected, taskLoading, toggleMultipleSelected } =
     useTaskStore()
   const { groupBy, isGroupbyStatus, isGroupbyAssignee, isGroupbyPriority } =
-    useTaskFilter()
+    useTaskFilterContext()
 
   const taskIds = useMemo(() => {
     const ids: string[] = []

diff --git a/packages/ui-app/app/_features/Project/Vision/VisionMonthNavigator.tsx b/packages/ui-app/app/_features/Project/Vision/VisionMonthNavigator.tsx
@@ -1,9 +1,10 @@
 import ListPreset from '@/components/ListPreset'
 import { useTaskFilter } from '@/features/TaskFilter/context'
 import { useVisionContext } from './context'
+import useTaskFilterContext from '@/features/TaskFilter/useTaskFilterContext'
 
 export default function VisionMonthNavigator() {
-  const { setDateRangeByMonth } = useTaskFilter()
+  const { setDateRangeByMonth } = useTaskFilterContext()
   const { filter, setFilter } = useVisionContext()
   const { month } = filter
   const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]