feat(backlog): ✨ display the number of tasks in backlog

haydenull · Nov 10, 2023 · afc3e18 · afc3e18
1 parent 655dfcb
commit afc3e18
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 23 deletions.
diff --git a/src/newHelper/logseq.ts b/src/newHelper/logseq.ts
@@ -0,0 +1,13 @@
+import type { AgendaTask } from '@/types/task'
+
+export const navToLogseqBlock = (task: AgendaTask, currentGraph?: { name: string }) => {
+  const uuid = task.recurringPast ? task.id.split('_')[0] : task.id
+  if (import.meta.env.VITE_MODE === 'plugin') {
+    logseq.Editor.scrollToBlockInPage(task.project.originalName, uuid)
+    logseq.hideMainUI()
+  } else {
+    if (!currentGraph) return
+    // example: logseq://graph/zio?block-id=65385ad5-f4e9-4423-8595-a5e4236cc8ad
+    window.open(`logseq://graph/${currentGraph.name}?block-id=${uuid}`, '_blank')
+  }
+}
diff --git a/src/pages/NewDashboard/components/Backlog.tsx b/src/pages/NewDashboard/components/Backlog.tsx
@@ -2,18 +2,22 @@ import { CaretRightOutlined } from '@ant-design/icons'
 import { Draggable } from '@fullcalendar/interaction'
 import { Collapse, Empty, Select } from 'antd'
 import clsx from 'clsx'
-import { useAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 import { useEffect, useRef, useState } from 'react'
 import { BsArchive } from 'react-icons/bs'
 
+import { navToLogseqBlock } from '@/newHelper/logseq'
 import { categorizeTasksByPage, formatTaskTitle } from '@/newHelper/task'
+import { logseqAtom } from '@/newModel/logseq'
 import { backlogTasksAtom } from '@/newModel/tasks'
 
+import LogseqLogo from './LogseqLogo'
 import s from './backlog.module.less'
 
 const Backlog = () => {
   const taskContainerRef = useRef<HTMLDivElement>(null)
   const [backlogTasks] = useAtom(backlogTasksAtom)
+  const { currentGraph } = useAtomValue(logseqAtom)
   const categorizedTasks = categorizeTasksByPage(backlogTasks)
   const projects = categorizedTasks.map(({ project }) => project)
 
@@ -66,24 +70,35 @@ const Backlog = () => {
             bordered={false}
             expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
             style={{ background: '#f9fafb' }}
+            defaultActiveKey={showCategorizedTasks.map((project) => project.project.originalName)}
             items={showCategorizedTasks.map((project) => ({
               key: project.project.originalName,
               label: project.project.originalName,
+              extra: <span className="text-xs text-gray-400 pr-0.5">{project.tasks.length}</span>,
               children: (
                 <div className="flex flex-col gap-2">
                   {project.tasks.map((task) => {
                     const showTitle = formatTaskTitle(task)
                     return (
                       <div
                         key={task.id}
-                        className="border rounded px-2 py-2 text-sm text-gray-600 break-all droppable-task-element bg-[#f9fafb] cursor-move"
+                        className="border rounded px-2 py-2 text-sm text-gray-600 break-all droppable-task-element bg-[#f9fafb] cursor-move group"
                         data-event={JSON.stringify({
                           id: task.id,
                           title: showTitle,
                           color: task.project.bgColor,
                         })}
                       >
-                        {showTitle}
+                        {showTitle}{' '}
+                        <span
+                          className="text-gray-300 inline-block opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            navToLogseqBlock(task, currentGraph)
+                          }}
+                        >
+                          <LogseqLogo />
+                        </span>
                       </div>
                     )
                   })}

diff --git a/src/pages/NewDashboard/components/KanBan.tsx b/src/pages/NewDashboard/components/KanBan.tsx
@@ -11,6 +11,7 @@ import { DEFAULT_ESTIMATED_TIME, recentDaysRange } from '@/constants/agenda'
 import useAgendaTasks from '@/hooks/useAgendaTasks'
 import { updateDateInfo, updateTaskStatus } from '@/newHelper/block'
 import { minutesToHHmm } from '@/newHelper/fullCalendar'
+import { navToLogseqBlock } from '@/newHelper/logseq'
 import {
   DATE_FORMATTER_FOR_KEY,
   formatTaskTitle,
@@ -25,6 +26,7 @@ import { recentTasksAtom } from '@/newModel/tasks'
 import type { AgendaTaskWithStart, AgendaTask } from '@/types/task'
 import { cn, genDays, replaceDateInfo } from '@/util/util'
 
+import LogseqLogo from './LogseqLogo'
 import TaskModal from './TaskModal'
 
 export type KanBanItem = AgendaTaskWithStart & {
@@ -75,17 +77,6 @@ const KanBan = (props, ref) => {
     document.getElementById(`${todayDateStr}`)?.scrollIntoView({ block: 'nearest', inline: 'start' })
     kanBanContainerRef.current?.scrollBy({ left: -30, behavior: 'smooth' })
   }, [])
-  const navToLogseqBlock = (task: AgendaTaskWithStart) => {
-    if (!currentGraph) return
-    const uuid = task.recurringPast ? task.id.split('_')[0] : task.id
-    if (import.meta.env.VITE_MODE === 'plugin') {
-      logseq.Editor.scrollToBlockInPage(task.project.originalName, uuid)
-      logseq.hideMainUI()
-    } else {
-      // example: logseq://graph/zio?block-id=65385ad5-f4e9-4423-8595-a5e4236cc8ad
-      window.open(`logseq://graph/${currentGraph.name}?block-id=${uuid}`, '_blank')
-    }
-  }
 
   // scroll to today
   useEffect(() => {
@@ -266,17 +257,10 @@ const KanBan = (props, ref) => {
                           className="text-gray-300 opacity-0 group-hover/card:opacity-100 transition-opacity cursor-pointer"
                           onClick={(e) => {
                             e.stopPropagation()
-                            navToLogseqBlock(task)
+                            navToLogseqBlock(task, currentGraph)
                           }}
                         >
-                          {/* logseq logo */}
-                          <svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                              fill="currentColor"
-                              stroke="currentColor"
-                              d="M19.3 9.838c-2.677-1.366-5.467-1.56-8.316-.607c-1.738.58-3.197 1.58-4.267 3.088c-1.031 1.452-1.45 3.071-1.184 4.837c.268 1.781 1.164 3.228 2.505 4.4C9.96 23.231 12.24 23.942 15.092 24c.41-.053 1.157-.103 1.883-.255c2.004-.418 3.754-1.325 5.08-2.915c1.621-1.942 2.108-4.148 1.272-6.562c-.704-2.034-2.138-3.467-4.027-4.43ZM7.515 6.295c.507-2.162-.88-4.664-2.988-5.37c-1.106-.37-2.156-.267-3.075.492C.61 2.114.294 3.064.271 4.146c.009.135.016.285.029.435c.01.102.021.205.042.305c.351 1.703 1.262 2.98 2.9 3.636c1.912.766 3.808-.244 4.273-2.227Zm4.064-1.146c1.075.377 2.152.31 3.22-.033c.94-.3 1.755-.793 2.341-1.609c.803-1.117.5-2.387-.717-3.027c-.6-.317-1.246-.438-1.927-.48c-.47.076-.95.117-1.41.234c-1.068.27-2.002.781-2.653 1.7c-.495.697-.64 1.45-.174 2.227c.303.504.779.799 1.32.988Z"
-                            ></path>
-                          </svg>
+                          <LogseqLogo />
                         </div>
                       </div>
                       <div className="bg-gray-100 rounded px-1 py-0.5 text-gray-400 text-[10px]">

diff --git a/src/pages/NewDashboard/components/LogseqLogo.tsx b/src/pages/NewDashboard/components/LogseqLogo.tsx
@@ -0,0 +1,13 @@
+const LogseqLogo = () => {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="currentColor"
+        stroke="currentColor"
+        d="M19.3 9.838c-2.677-1.366-5.467-1.56-8.316-.607c-1.738.58-3.197 1.58-4.267 3.088c-1.031 1.452-1.45 3.071-1.184 4.837c.268 1.781 1.164 3.228 2.505 4.4C9.96 23.231 12.24 23.942 15.092 24c.41-.053 1.157-.103 1.883-.255c2.004-.418 3.754-1.325 5.08-2.915c1.621-1.942 2.108-4.148 1.272-6.562c-.704-2.034-2.138-3.467-4.027-4.43ZM7.515 6.295c.507-2.162-.88-4.664-2.988-5.37c-1.106-.37-2.156-.267-3.075.492C.61 2.114.294 3.064.271 4.146c.009.135.016.285.029.435c.01.102.021.205.042.305c.351 1.703 1.262 2.98 2.9 3.636c1.912.766 3.808-.244 4.273-2.227Zm4.064-1.146c1.075.377 2.152.31 3.22-.033c.94-.3 1.755-.793 2.341-1.609c.803-1.117.5-2.387-.717-3.027c-.6-.317-1.246-.438-1.927-.48c-.47.076-.95.117-1.41.234c-1.068.27-2.002.781-2.653 1.7c-.495.697-.64 1.45-.174 2.227c.303.504.779.799 1.32.988Z"
+      ></path>
+    </svg>
+  )
+}
+
+export default LogseqLogo