fix(mywork): show overdue tasks, but including tasks that has been co…

…mpleted (#163)

packages/be-gateway/src/routes/task/index.ts

@@ -151,6 +151,7 @@ router.get('/project/task/query', async (req: AuthRequest, res) => {
         })
       }
     }
+    console.log('1')
 
     const tasks = await mdTaskGetAll(rest)
     if (counter) {

packages/shared-models/src/lib/task.ts

@@ -177,12 +177,14 @@ export const mdTaskDelete = (id: string) => {
 
 export const mdTaskGetAll = (query: ITaskQuery) => {
   let take = query.take
-  const { counter, skip } = query
+  let skip = query.skip
+  const { counter } = query
   const where: {
     [key: string]: unknown
   } = generateConditions(query)
 
   take = take ? parseInt(take as unknown as string, 10) : undefined
+  skip = skip ? parseInt(skip as unknown as string, 10) : undefined
 
   if (counter) {
     return taskModel.count({ where })

packages/ui-app/app/_features/MyWorks/MyOvedueTasks.tsx

@@ -10,6 +10,7 @@ export default function MyOvedueTasks() {
   const query: ITaskQuery = {
     projectId: 'all',
     dueDate: ['undefined', today],
+    done: 'no',
     take: 5,
     counter: true
   }

packages/ui-app/app/_features/MyWorks/MyUpcommingTasks.tsx

@@ -8,10 +8,11 @@ export default function MyUpcomingTasks() {
   evening.setHours(23)
   evening.setMinutes(59)
 
-  const query:ITaskQuery = {
+  const query: ITaskQuery = {
     projectId: 'all',
     dueDate: [evening, 'undefined'],
     take: 5,
+    done: 'no',
     counter: true
   }
 

packages/ui-app/app/_features/MyWorks/MyUrgentTasks.tsx

@@ -11,10 +11,11 @@ export default function MyUrgentTasks() {
   evening.setHours(23)
   evening.setMinutes(59)
 
-  const query:ITaskQuery = {
+  const query: ITaskQuery = {
     projectId: 'all',
     priority: TaskPriority.URGENT,
     take: 5,
+    done: 'no',
     counter: true
   }
 

packages/ui-app/app/_features/MyWorks/MyworkCard.tsx

@@ -2,9 +2,7 @@
 
 import { ITaskQuery, taskGetByCond } from '@/services/task'
 import { Task } from '@prisma/client'
-import { useEffect, useState } from 'react'
-import TaskStatus from '../../[orgID]/project/[projectId]/views/TaskStatus'
-import TaskPriorityCell from '../../[orgID]/project/[projectId]/views/TaskPriorityCell'
+import { useEffect, useMemo, useState } from 'react'
 import { messageError } from '@shared/ui'
 import { MdOutlineRefresh } from 'react-icons/md'
 import { useMyworkContext } from './context'
@@ -15,28 +13,66 @@ import {
   HiOutlinePlus
 } from 'react-icons/hi2'
 import { format } from 'date-fns'
+import { useProjectStore } from '@/store/project'
+import MyworkTaskList from './MyworkTaskList'
+import MyworkTaskPaginate from './MyworkTaskPaginate'
 
 interface IMyworkCardProps {
   title: string
   query: ITaskQuery
 }
 export default function MyworkCard({ title, query }: IMyworkCardProps) {
+  const limit = query.take || 5
   const [loading, setLoading] = useState(true)
   const [tasks, setTasks] = useState<Task[]>([])
   const [total, setTotal] = useState(0)
   const [updateCounter, setUpdate] = useState(0)
   const { assigneeIds, projectId } = useMyworkContext()
   const [collapse, setCollapse] = useState(false)
+  const { projects } = useProjectStore()
+  const [page, setPage] = useState(1)
+  const paginate = useMemo(() => {
+    const take = limit * page
+    const skip = page === 1 ? 0 : take - limit
+
+    return { take, skip }
+  }, [page])
+  const maxPage = Math.ceil(total / limit)
+
+  const projectIds = useMemo(() => {
+    return projects.map(p => p.id)
+  }, [JSON.stringify(projects)])
 
   const getTask = (
-    assigneeIds: string[],
-    projectId: string,
-    abortSignal: AbortSignal
+    { assigneeIds,
+      projectId,
+      abortSignal,
+      take,
+      skip,
+    }: {
+      assigneeIds: string[],
+      projectId: string,
+      abortSignal: AbortSignal,
+      take?: number
+      skip?: number
+    }
   ) => {
     if (assigneeIds.length) {
       setLoading(true)
 
-      const condition = { ...query, assigneeIds, projectId }
+      let condition = { ...query, assigneeIds }
+
+      if (projectId !== 'all') {
+        condition = { ...condition, projectId }
+      } else {
+        condition = { ...condition, projectIds, projectId: '' }
+      }
+
+      if (take && skip && take > 0 && skip > -1) {
+        condition = { ...condition, take, skip }
+      }
+
+      console.log('condition', condition)
 
       taskGetByCond(condition, abortSignal).then(res => {
         const { status, data, total } = res.data
@@ -45,6 +81,7 @@ export default function MyworkCard({ title, query }: IMyworkCardProps) {
           setLoading(false)
           return
         }
+
         setLoading(false)
         setTotal(total)
         setTasks(data)
@@ -56,22 +93,38 @@ export default function MyworkCard({ title, query }: IMyworkCardProps) {
     }
   }
 
+  // fetch data first time
   useEffect(() => {
     const controller = new AbortController()
-    getTask(assigneeIds, projectId, controller.signal)
+    const { take, skip } = paginate
+    getTask({
+      assigneeIds,
+      projectId,
+      take,
+      skip,
+      abortSignal: controller.signal
+    })
+
     return () => {
       controller.abort()
     }
-  }, [assigneeIds, projectId])
+  }, [JSON.stringify(assigneeIds), projectId, JSON.stringify(projectIds), JSON.stringify(paginate)])
 
+  // reload data
   useEffect(() => {
     const controller = new AbortController()
-    console.log('update', updateCounter)
-    updateCounter > 0 && getTask(assigneeIds, projectId, controller.signal)
+    const { take, skip } = paginate
+    updateCounter > 0 && getTask({
+      assigneeIds,
+      projectId,
+      abortSignal: controller.signal,
+      take,
+      skip
+    })
     return () => {
       controller.abort()
     }
-  }, [updateCounter, assigneeIds, projectId])
+  }, [updateCounter, JSON.stringify(assigneeIds), projectId, JSON.stringify(projectIds), JSON.stringify(paginate)])
 
   return (
     <div className="mw-card py-4">
@@ -94,34 +147,15 @@ export default function MyworkCard({ title, query }: IMyworkCardProps) {
           />
         </div>
       </h2>
-      <MyworkLoading loading={loading} />
       <div className={`space-y-2 ${collapse ? 'hidden' : ''}`}>
-        {!loading &&
-          tasks.map(task => {
-            const dueDate = task.dueDate ? new Date(task.dueDate) : null
-            return (
-              <div className="mw-task" key={task.id}>
-                <div className="">
-                  {/* <TaskStatus taskId={task.id} value={task.taskStatusId || ''} /> */}
-                  {task.title}
-                  <div className="text-xs text-gray-400 mt-1.5">
-                    {dueDate ? format(dueDate, 'PP') : null}
-                  </div>
-
-                  {/* <TaskPriorityCell taskId={task.id} value={task.priority} /> */}
-                </div>
-              </div>
-            )
-          })}
-        {!loading && tasks.length < total && (
-          <div className="mw-card-more">And {total} more</div>
-        )}
-
-        {!loading && !tasks.length && (
-          <div className="task-empty text-sm bg-red-200 dark:bg-red-300 rounded-md border border-red-200 dark:border-red-400 shadow-sm shadow-red-300 dark:shadow-red-700 p-3 text-red-800">
-            {`🎃😎🥶 No tasks found! You're so lucky buddy !!`}
-          </div>
-        )}
+        <MyworkLoading loading={loading} />
+        <MyworkTaskList loading={loading} tasks={tasks} />
+        <MyworkTaskPaginate
+          enable={!loading && !!tasks.length}
+          page={page}
+          maxPage={maxPage}
+          onNext={() => setPage(page => page + 1)}
+          onPrev={() => setPage(page => page + -1)} />
       </div>
     </div>
   )

packages/ui-app/app/_features/MyWorks/MyworkTaskList.tsx

@@ -0,0 +1,37 @@
+import { Task } from "@prisma/client"
+import { format, formatDistanceToNowStrict } from "date-fns"
+
+
+
+export default function MyworkTaskList({ loading, tasks }: { loading: boolean, tasks: Task[] }) {
+  const total = tasks.length
+
+  return <>
+    {!loading &&
+      tasks.map(task => {
+        const dueDate = task.dueDate ? new Date(task.dueDate) : null
+        return (
+          <div className="mw-task" key={task.id}>
+            <div className="">
+              {/* <TaskStatus taskId={task.id} value={task.taskStatusId || ''} /> */}
+              {task.title}
+              <div className="text-xs text-gray-400 mt-1.5">
+                {dueDate ? formatDistanceToNowStrict(dueDate, { addSuffix: true }) : null}
+              </div>
+
+              {/* <TaskPriorityCell taskId={task.id} value={task.priority} /> */}
+            </div>
+          </div>
+        )
+      })}
+    {!loading && tasks.length < total && (
+      <div className="mw-card-more">And {total} more</div>
+    )}
+
+    {!loading && !tasks.length && (
+      <div className="task-empty text-sm bg-red-200 dark:bg-red-300 rounded-md border border-red-200 dark:border-red-400 shadow-sm shadow-red-300 dark:shadow-red-700 p-3 text-red-800">
+        {`🎃😎🥶 No tasks found! You're so lucky buddy !!`}
+      </div>
+    )}
+  </>
+}

packages/ui-app/app/_features/MyWorks/MyworkTaskPaginate.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@shared/ui";
+
+interface IMyworkPaginate {
+  enable: boolean
+  page: number,
+  maxPage: number,
+  onNext: () => void,
+  onPrev: () => void
+}
+
+export default function MyworkTaskPaginate({ enable, page, onNext, onPrev, maxPage }: IMyworkPaginate) {
+  if (!enable) return null
+
+  return <div className="flex items-center justify-between">
+    <div className='space-x-2'>
+      <Button disabled={page === 1} title="Prev" size="sm" onClick={() => {
+        onPrev()
+      }} />
+      <Button disabled={page === maxPage} title="Next" size="sm" onClick={() => {
+        onNext()
+      }} />
+    </div>
+    <div className='text-xs text-gray-400'>
+      {page}/{maxPage} pages
+    </div>
+  </div>
+}