fix: [skip ci] add data-id to TaskCard

haydenull · Dec 4, 2023 · 5e89cc1 · 5e89cc1
1 parent d894a8b
commit 5e89cc1
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 54 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
 VITE_LOGSEQ_API_SERVER=http://127.0.0.1:12315
-VITE_LOGSEQ_API_TOKEN=111
+VITE_LOGSEQ_API_TOKEN=123
diff --git a/src/Agenda3/components/kanban/Column.tsx b/src/Agenda3/components/kanban/Column.tsx
@@ -16,10 +16,11 @@ 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[] }
-const Column = ({ day, tasks }: ColumnProps, ref) => {
+export type ColumnProps = { day: Dayjs; tasks: AgendaTaskWithStart[]; allKanbanItems: KanBanItem[] }
+const Column = ({ day, tasks, allKanbanItems }: ColumnProps, ref) => {
   const columnContainerRef = useRef<HTMLDivElement>(null)
   // bind draggable
   const hadBindDropRef = useRef(false)
@@ -45,7 +46,7 @@ const Column = ({ day, tasks }: ColumnProps, ref) => {
   const onAddTaskByDrag = async (sortableEvent) => {
     console.log('[faiz:] === kanban onAdd', sortableEvent)
     const id = sortableEvent?.item?.dataset?.id
-    const task = tasks.find((task) => task.id === id)
+    const task = allKanbanItems.find((task) => task.id === id)
     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
@@ -52,7 +52,15 @@ const KanBan = (props, ref) => {
       {days.map((day) => {
         const dateStr = day.format('MM-DD ddd')
         const columnTasks = tasksInDay.get(day.format(DATE_FORMATTER_FOR_KEY)) || []
-        return <Column key={dateStr} ref={(el) => (columnRefs.current[dateStr] = el)} day={day} tasks={columnTasks} />
+        return (
+          <Column
+            key={dateStr}
+            ref={(el) => (columnRefs.current[dateStr] = el)}
+            day={day}
+            tasks={columnTasks}
+            allKanbanItems={tasks}
+          />
+        )
       })}
     </div>
   )

diff --git a/src/Agenda3/components/kanban/taskCard/TaskCard.tsx b/src/Agenda3/components/kanban/taskCard/TaskCard.tsx
@@ -61,57 +61,55 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
   }
 
   return (
-    <>
-      <div
-        className={cn('bg-white rounded-md p-2 hover:shadow whitespace-pre-wrap cursor-pointer group/card', {
-          'bg-[#edeef0] opacity-80': task.status === 'done',
-          // 循环任务及多天任务不能拖拽
-          'droppable-task-element': !editDisabled && !isMultipleDays,
-        })}
-        data-event={JSON.stringify({
-          id: task.id,
-          title: showTitle,
-          duration: minutesToHHmm(estimatedTime),
-          color: groupType === 'page' ? task.project.bgColor : task?.filters?.[0]?.color,
-        })}
-      >
-        <Dropdown
-          trigger={['contextMenu']}
-          menu={{
-            items: [
-              editDisabled || task.project.isJournal
-                ? null
-                : {
-                    key: 'backlog',
-                    label: 'Move to backlog',
-                    icon: <BsArchive className="!text-sm" />,
-                  },
-              {
-                key: 'delete',
-                label: 'Delete task',
-                danger: true,
-                icon: <RiDeleteBin4Line className="!text-base" />,
-              },
-            ],
-            onClick: ({ key }) => {
-              if (key === 'delete') onDeleteTask(task.id)
-              if (key === 'backlog') onRemoveDate(task.id)
+    <div
+      className={cn('bg-white rounded-md p-2 hover:shadow whitespace-pre-wrap cursor-pointer group/card', {
+        'bg-[#edeef0] opacity-80': task.status === 'done',
+        // 循环任务及多天任务不能拖拽
+        'droppable-task-element': !editDisabled && !isMultipleDays,
+      })}
+      data-event={JSON.stringify({
+        id: task.id,
+        title: showTitle,
+        duration: minutesToHHmm(estimatedTime),
+        color: groupType === 'page' ? task.project.bgColor : task?.filters?.[0]?.color,
+      })}
+      data-id={task.id}
+    >
+      <Dropdown
+        trigger={['contextMenu']}
+        menu={{
+          items: [
+            editDisabled || task.project.isJournal
+              ? null
+              : {
+                  key: 'backlog',
+                  label: 'Move to backlog',
+                  icon: <BsArchive className="!text-sm" />,
+                },
+            {
+              key: 'delete',
+              label: 'Delete task',
+              danger: true,
+              icon: <RiDeleteBin4Line className="!text-base" />,
             },
-          }}
-        >
-          <div onClick={() => setEditTaskModal({ open: true, task })}>
-            {/* ========= Toolbar ========= */}
-            <Toolbar task={task} groupType={groupType} onClickMark={onClickTaskMark} />
-
-            {/* ========= Title ========= */}
-            <div className={cn('text-gray-600 my-0.5', { 'line-through': task.status === 'done' })}>{showTitle}</div>
+          ],
+          onClick: ({ key }) => {
+            if (key === 'delete') onDeleteTask(task.id)
+            if (key === 'backlog') onRemoveDate(task.id)
+          },
+        }}
+      >
+        <div onClick={() => setEditTaskModal({ open: true, task })}>
+          {/* ========= Toolbar ========= */}
+          <Toolbar task={task} groupType={groupType} onClickMark={onClickTaskMark} />
 
-            {/* ========= Group(page or filter) Name ========= */}
-            <Group task={task} type={groupType} />
-          </div>
-        </Dropdown>
-      </div>
+          {/* ========= Title ========= */}
+          <div className={cn('text-gray-600 my-0.5', { 'line-through': task.status === 'done' })}>{showTitle}</div>
 
+          {/* ========= Group(page or filter) Name ========= */}
+          <Group task={task} type={groupType} />
+        </div>
+      </Dropdown>
       {/* ========== Edit Task Modal ========== */}
       {editTaskModal.task ? (
         <TaskModal
@@ -129,7 +127,7 @@ const TaskCard = ({ task }: { task: AgendaTaskWithStart }) => {
           }}
         />
       ) : null}
-    </>
+    </div>
   )
 }