feat(kanban): ✨ show deadline in kanban

haydenull · haydenull · commit 86ed350e87de · 2024-05-25T21:43:19.000+08:00
diff --git a/src/Agenda3/components/kanban/Column.tsx b/src/Agenda3/components/kanban/Column.tsx
@@ -6,20 +6,19 @@ import { useEffect, useImperativeHandle, useRef } from 'react'
 import React from 'react'
 import { ReactSortable } from 'react-sortablejs'
 
-import { updateBlockDateInfo } from '@/Agenda3/helpers/block'
 import { track } from '@/Agenda3/helpers/umami'
 import useAgendaEntities from '@/Agenda3/hooks/useAgendaEntities'
 import { appAtom } from '@/Agenda3/models/app'
 import { DEFAULT_ESTIMATED_TIME } from '@/constants/agenda'
-import type { AgendaTaskWithStart } from '@/types/task'
+import type { AgendaTaskWithStartOrDeadline } from '@/types/task'
 import { cn, replaceDateInfo } from '@/util/util'
 
 import AddTaskCard from './AddTaskCard'
 import ColumnTitle from './ColumnTitle'
 import type { KanBanItem } from './KanBan'
 import TaskCard from './taskCard/TaskCard'
 
-export type ColumnProps = { day: Dayjs; tasks: AgendaTaskWithStart[]; allKanbanItems: KanBanItem[] }
+export type ColumnProps = { day: Dayjs; tasks: AgendaTaskWithStartOrDeadline[]; allKanbanItems: KanBanItem[] }
 const Column = ({ day, tasks, allKanbanItems }: ColumnProps, ref) => {
   const columnContainerRef = useRef<HTMLDivElement>(null)
   // bind draggable
@@ -47,6 +46,8 @@ const Column = ({ day, tasks, allKanbanItems }: ColumnProps, ref) => {
     console.log('[faiz:] === kanban onAdd', sortableEvent)
     const id = sortableEvent?.item?.dataset?.id
     const task = allKanbanItems.find((task) => task.id === id)
+    // TODO: 支持拖拽修改 deadline
+    if (!task?.start) return logseq.UI.showMsg('Drag task without start date is not supported', 'error')
     if (!task || !id) return logseq.UI.showMsg('task id not found', 'error')
     let startDay = day
     // remain time info
diff --git a/src/Agenda3/components/kanban/KanBan.tsx b/src/Agenda3/components/kanban/KanBan.tsx
@@ -6,7 +6,7 @@ import { DATE_FORMATTER_FOR_KEY, separateTasksInDay, transformTasksToKanbanTasks
 import { recentTasksAtom } from '@/Agenda3/models/entities/tasks'
 import { settingsAtom } from '@/Agenda3/models/settings'
 import { getRecentDaysRange } from '@/constants/agenda'
-import type { AgendaTaskWithStart } from '@/types/task'
+import type { AgendaTaskWithStartOrDeadline } from '@/types/task'
 import { genDays } from '@/util/util'
 
 import Column, { type ColumnHandle } from './Column'
@@ -66,7 +66,7 @@ const KanBan = (props, ref) => {
   )
 }
 
-export type KanBanItem = AgendaTaskWithStart & {
+export type KanBanItem = AgendaTaskWithStartOrDeadline & {
   filtered?: boolean
 }
 export default forwardRef<KanBanHandle>(KanBan)
diff --git a/src/Agenda3/components/kanban/taskCard/TaskCard.tsx b/src/Agenda3/components/kanban/taskCard/TaskCard.tsx
@@ -12,27 +12,28 @@ import { logseqAtom } from '@/Agenda3/models/logseq'
 import { settingsAtom } from '@/Agenda3/models/settings'
 import { DEFAULT_ESTIMATED_TIME } from '@/constants/agenda'
 import type { AgendaEntity } from '@/types/entity'
-import type { AgendaTaskWithStart } from '@/types/task'
+import type { AgendaTaskWithStartOrDeadline } from '@/types/task'
 import { cn } from '@/util/util'
 
 import Group from '../../Group'
 import TaskModal from '../../modals/TaskModal'
 import Toolbar from './Toolbar'
 
-const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
+const TaskCard = ({ task }: { task: AgendaTaskWithStartOrDeadline }) => {
   const currentGraph = useAtomValue(logseqAtom).currentGraph
   const settings = useAtomValue(settingsAtom)
   const groupType = settings.selectedFilters?.length ? 'filter' : 'page'
 
   const [editTaskModal, setEditTaskModal] = useState<{
     open: boolean
-    task?: AgendaTaskWithStart
+    task?: AgendaTaskWithStartOrDeadline
   }>({
     open: false,
   })
 
   const editDisabled = task.rrule || task.recurringPast
   const isMultipleDays = task.allDay && task.end
+  const noStart = !task.start
   const estimatedTime = task.estimatedTime ?? DEFAULT_ESTIMATED_TIME
 
   const { updateEntity, deleteEntity } = useAgendaEntities()
@@ -48,7 +49,7 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
   const onRemoveDate = async (taskId: string) => {
     updateEntity({ type: 'task-remove-date', id: taskId, data: null })
   }
-  const onClickTask = (e: React.MouseEvent, task: AgendaTaskWithStart) => {
+  const onClickTask = (e: React.MouseEvent, task: AgendaTaskWithStartOrDeadline) => {
     if (e.ctrlKey) {
       navToLogseqBlock(task, currentGraph)
       console.log(task)
@@ -65,7 +66,7 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
         {
           'bg-[#edeef0] opacity-80 dark:bg-[#2f2f33]': task.status === 'done',
           // 循环任务及多天任务不能拖拽
-          'droppable-task-element': !editDisabled && !isMultipleDays,
+          'droppable-task-element': !editDisabled && !isMultipleDays && !noStart,
         },
       )}
       data-event={JSON.stringify({
@@ -117,7 +118,11 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
           <Toolbar task={task} groupType={groupType} onClickMark={onClickTaskMark} />
 
           {/* ========= Title ========= */}
-          <div className={cn('my-0.5 text-gray-600 dark:text-gray-100', { 'line-through': task.status === 'done' })}>
+          <div
+            className={cn('my-0.5 select-none break-words text-gray-600 dark:text-gray-100', {
+              'line-through': task.status === 'done',
+            })}
+          >
             {task.showTitle}
           </div>
 
diff --git a/src/Agenda3/components/kanban/taskCard/Toolbar.tsx b/src/Agenda3/components/kanban/taskCard/Toolbar.tsx
@@ -1,15 +1,18 @@
 import { Tooltip } from 'antd'
+import dayjs from 'dayjs'
 import { useAtomValue } from 'jotai'
+import { CgSandClock } from 'react-icons/cg'
 import { GoGoal } from 'react-icons/go'
 import { IoIosCheckmarkCircle, IoIosCheckmarkCircleOutline } from 'react-icons/io'
 import { IoRepeatOutline } from 'react-icons/io5'
 
 import { minutesToHHmm } from '@/Agenda3/helpers/fullCalendar'
 import { navToLogseqBlock } from '@/Agenda3/helpers/logseq'
+import { getDaysBetween } from '@/Agenda3/helpers/util'
 import { logseqAtom } from '@/Agenda3/models/logseq'
 import { DEFAULT_ESTIMATED_TIME } from '@/constants/agenda'
 import type { AgendaEntity } from '@/types/entity'
-import type { AgendaTaskWithStart } from '@/types/task'
+import type { AgendaTaskWithStart, AgendaTaskWithStartOrDeadline } from '@/types/task'
 
 import LogseqLogo from '../../icons/LogseqLogo'
 
@@ -18,7 +21,7 @@ const Toolbar = ({
   groupType,
   onClickMark,
 }: {
-  task: AgendaTaskWithStart
+  task: AgendaTaskWithStartOrDeadline
   groupType: 'page' | 'filter'
   onClickMark: (event: React.MouseEvent, task: AgendaEntity, status: AgendaEntity['status']) => void
 }) => {
@@ -41,7 +44,7 @@ const Toolbar = ({
           />
         )}
         {/* Timer */}
-        {task.allDay ? null : (
+        {task.allDay || !task.start ? null : (
           <span
             className="rounded px-1 py-0.5 text-[10px] text-white opacity-70"
             style={{
@@ -59,6 +62,13 @@ const Toolbar = ({
             <GoGoal className="text-gray-300" />
           </Tooltip>
         ) : null}
+        {/* Deadline icon */}
+        {task.deadline ? (
+          <div className="flex items-center rounded bg-zinc-500/10 px-1 py-0.5 text-[10px] font-normal text-zinc-400 dark:bg-white/20">
+            <CgSandClock className="text-[10px]" />
+            <span>{getDaysBetween(dayjs(), task.deadline.value)}</span>
+          </div>
+        ) : null}
         {/* Logseq icon */}
         <div
           className="cursor-pointer text-gray-300 opacity-0 transition-opacity group-hover/card:opacity-100 dark:text-gray-400"
@@ -70,10 +80,12 @@ const Toolbar = ({
           <LogseqLogo />
         </div>
       </div>
-      <div className="rounded bg-gray-100 px-1 py-0.5 text-[10px] text-gray-400 dark:bg-zinc-800">
-        {task.status === 'done' ? <span>{minutesToHHmm(task.actualTime ?? estimatedTime)} / </span> : null}
-        {minutesToHHmm(estimatedTime)}
-      </div>
+      {task.start ? (
+        <div className="rounded bg-gray-100 px-1 py-0.5 text-[10px] text-gray-400 dark:bg-zinc-800">
+          {task.status === 'done' ? <span>{minutesToHHmm(task.actualTime ?? estimatedTime)} / </span> : null}
+          {minutesToHHmm(estimatedTime)}
+        </div>
+      ) : null}
     </div>
   )
 }
diff --git a/src/Agenda3/components/timebox/TimeBox.tsx b/src/Agenda3/components/timebox/TimeBox.tsx
@@ -54,6 +54,8 @@ const TimeBox = ({ onChangeType }: { onChangeType?: () => void }) => {
   const recentTasks = useAtomValue(recentTasksAtom)
   const now = dayjs()
   const calendarEvents = recentTasks
+    // TODO: 补充 deadline 任务的处理后移除次过滤器
+    .filter((task) => task.start)
     .map((task) =>
       transformAgendaTaskToCalendarEvent(task, {
         showFirstEventInCycleOnly: settings.viewOptions?.showFirstEventInCycleOnly,
@@ -148,7 +150,7 @@ const TimeBox = ({ onChangeType }: { onChangeType?: () => void }) => {
       }}
     >
       <div className="group flex h-[44px] items-center justify-between">
-        <div className="flex cursor-default  items-center gap-1.5 px-2 py-1">
+        <div className="flex cursor-default items-center gap-1.5 px-2 py-1">
           <MdSchedule className="text-lg" /> Time Box
         </div>
         <div className="mr-4 flex opacity-0 transition-opacity group-hover/root:opacity-100">
@@ -224,7 +226,7 @@ const TimeBox = ({ onChangeType }: { onChangeType?: () => void }) => {
                 <div className="flex gap-1 text-gray-500 dark:text-gray-300">
                   {day.format('ddd')}
                   <span
-                    className={cn('h-6 w-6  rounded ', {
+                    className={cn('h-6 w-6 rounded ', {
                       'bg-blue-400 text-white dark:bg-blue-600 dark:text-gray-100': isToday,
                     })}
                   >
diff --git a/src/Agenda3/helpers/task.ts b/src/Agenda3/helpers/task.ts
@@ -8,7 +8,7 @@ import type { Filter, Settings } from '@/Agenda3/models/settings'
 import { DEFAULT_ESTIMATED_TIME, getRecentDaysRange } from '@/constants/agenda'
 import type { AgendaEntity, AgendaEntityDeadline, AgendaEntityPage } from '@/types/entity'
 import type { RRule } from '@/types/fullcalendar'
-import type { AgendaTaskWithStart } from '@/types/task'
+import type { AgendaTaskWithStart, AgendaTaskWithStartOrDeadline } from '@/types/task'
 import { fillBlockReference } from '@/util/schedule'
 import { genDays } from '@/util/util'
 
@@ -343,11 +343,16 @@ export const DATE_FORMATTER_FOR_KEY = 'YYYYMMDD'
 /**
  * separate tasks day by day
  */
-export const separateTasksInDay = (tasks: AgendaTaskWithStart[]): Map<string, AgendaTaskWithStart[]> => {
+export const separateTasksInDay = (
+  tasks: AgendaTaskWithStartOrDeadline[],
+): Map<string, AgendaTaskWithStartOrDeadline[]> => {
   // separate tasks in day based on scheduled date
-  const tasksMap = new Map<string, AgendaTaskWithStart[]>()
+  const tasksMap = new Map<string, AgendaTaskWithStartOrDeadline[]>()
   tasks.forEach((task) => {
-    const taskDayStr = task.start.format(DATE_FORMATTER_FOR_KEY)
+    if (!task.start && !task.deadline?.value) return
+    const taskDayStr = task.start
+      ? task.start.format(DATE_FORMATTER_FOR_KEY)
+      : task.deadline!.value.format(DATE_FORMATTER_FOR_KEY)
     if (tasksMap.has(taskDayStr)) {
       tasksMap.get(taskDayStr)?.push(task)
     } else {
@@ -364,7 +369,7 @@ export const separateTasksInDay = (tasks: AgendaTaskWithStart[]): Map<string, Ag
  * adapt task to kanban
  */
 export const transformTasksToKanbanTasks = (
-  tasks: AgendaTaskWithStart[],
+  tasks: AgendaTaskWithStartOrDeadline[],
   options: { showFirstEventInCycleOnly?: boolean } = {},
 ): KanBanItem[] => {
   const { showFirstEventInCycleOnly = false } = options
@@ -374,7 +379,7 @@ export const transformTasksToKanbanTasks = (
       const { allDay, end, start } = task
 
       // splitting multi-days task into single-day tasks
-      if (allDay && end) {
+      if (allDay && end && start) {
         const days = genDays(start, end)
         return days.map((day) => {
           const isPast = day.isBefore(today, 'day')
diff --git a/src/Agenda3/models/entities/tasks.ts b/src/Agenda3/models/entities/tasks.ts
@@ -32,19 +32,23 @@ export const tasksWithStartOrDeadlineAtom = atom<AgendaTaskWithStartOrDeadline[]
       } as AgendaTaskWithStartOrDeadline
     })
 })
-export const recentTasksAtom = atom<AgendaTaskWithStart[]>((get) => {
-  const allTasks = get(tasksWithStartAtom)
+export const recentTasksAtom = atom<AgendaTaskWithStartOrDeadline[]>((get) => {
+  const allTasks = get(tasksWithStartOrDeadlineAtom)
 
   const today = dayjs()
   const [rangeStart, rangeEnd] = RECENT_DAYS_RANGE
   const startDay = today.subtract(rangeStart, 'day')
   const endDay = today.add(rangeEnd, 'day')
   return allTasks.filter((task) => {
-    return (
-      task.start?.isBetween(startDay, endDay, 'day', '[]') ||
-      task.end?.isBetween(startDay, endDay, 'day', '[]') ||
-      (task.start?.isBefore(startDay, 'day') && task.end?.isAfter(endDay, 'day'))
-    )
+    if (task.start) {
+      return (
+        task.start?.isBetween(startDay, endDay, 'day', '[]') ||
+        task.end?.isBetween(startDay, endDay, 'day', '[]') ||
+        (task.start?.isBefore(startDay, 'day') && task.end?.isAfter(endDay, 'day'))
+      )
+    }
+    if (task.deadline?.value) return task.deadline.value?.isBetween(startDay, endDay, 'day', '[]')
+    return false
   })
 })
 

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { DATE_FORMATTER_FOR_KEY, separateTasksInDay, transformTasksToKanbanTasks`
`6`	`6`	`import { recentTasksAtom } from '@/Agenda3/models/entities/tasks'`
`7`	`7`	`import { settingsAtom } from '@/Agenda3/models/settings'`
`8`	`8`	`import { getRecentDaysRange } from '@/constants/agenda'`
`9`		`-import type { AgendaTaskWithStart } from '@/types/task'`
	`9`	`+import type { AgendaTaskWithStartOrDeadline } from '@/types/task'`
`10`	`10`	`import { genDays } from '@/util/util'`
`11`	`11`
`12`	`12`	`import Column, { type ColumnHandle } from './Column'`
`@@ -66,7 +66,7 @@ const KanBan = (props, ref) => {`
`66`	`66`	`)`
`67`	`67`	`}`
`68`	`68`
`69`		`-export type KanBanItem = AgendaTaskWithStart & {`
	`69`	`+export type KanBanItem = AgendaTaskWithStartOrDeadline & {`
`70`	`70`	`filtered?: boolean`
`71`	`71`	`}`
`72`	`72`	`export default forwardRef<KanBanHandle>(KanBan)`