feat: show task marker and toggle when click marker label, #11

ahonn · Jun 6, 2022 · 34e4a86 · 34e4a86
1 parent 0d8eb2a
commit 34e4a86
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "react-dom": "^18.0.0",
     "react-error-boundary": "^3.1.4",
     "react-use": "^17.3.2",
+    "remove-markdown": "^0.5.0",
     "swr": "^1.3.0",
     "tabler-icons-react": "^1.46.0"
   },
@@ -28,6 +29,7 @@
     "@types/node": "17.0.23",
     "@types/react": "18.0.6",
     "@types/react-dom": "18.0.2",
+    "@types/remove-markdown": "^0.3.1",
     "@typescript-eslint/eslint-plugin": "5.20.0",
     "@typescript-eslint/parser": "5.20.0",
     "@vitejs/plugin-react": "1.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx
@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import Checkbox from 'rc-checkbox';
 import { ArrowDownCircle, BrightnessUp } from 'tabler-icons-react';
 import useTaskManager from '../hooks/useTaskManager';
-import { TaskEntityObject } from '../models/TaskEntity';
+import { TaskEntityObject, TaskMarker } from '../models/TaskEntity';
 import useAppState from '../hooks/useAppState';
 import 'rc-checkbox/assets/index.css';
 
@@ -13,7 +13,7 @@ export interface ITaskItemProps {
 }
 
 const TaskItem: React.FC<ITaskItemProps> = (props) => {
-  const { userConfigs: { preferredDateFormat } } = useAppState();
+  const { userConfigs: { preferredDateFormat, preferredWorkflow } } = useAppState();
   const task = useTaskManager(props.item);
   const [checked, setChecked] = React.useState(task.completed);
 
@@ -35,7 +35,15 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
     window.logseq.hideMainUI();
   };
 
-  const contentClassName = classnames('line-clamp-3 cursor-pointer', {
+  const toggleMarker = () => {
+    if (preferredWorkflow === 'now') {
+      task.setMarker(task.marker === TaskMarker.NOW ? TaskMarker.LATER : TaskMarker.NOW);
+      return;
+    }
+    task.setMarker(task.marker === TaskMarker.TODO ? TaskMarker.DOING : TaskMarker.TODO);
+  }
+
+  const contentClassName = classnames('mb-1 line-clamp-3 cursor-pointer', {
     'line-through': checked,
     'text-gray-400': checked,
   });
@@ -46,27 +54,34 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
         <Checkbox
           checked={checked}
           onChange={handleTaskChange}
-          className="pt-1 mr-2"
+          className="pt-1 mr-1"
         />
       </div>
       <div className="flex-1 border-b border-gray-100 pb-2 pt-1 text-sm leading-normal break-all">
         <div className="flex justify-between items-center">
           <div className="flex-col">
-            <p className={contentClassName} onClick={openTaskBlock}>
-              {task.content}
+            <div className={contentClassName}>
+              <span className="py-0.5 px-1 mr-1 text-xs font-gray-300 bg-gray-200 rounded" onClick={toggleMarker}>
+                {task.marker}
+              </span>
+              <span onClick={openTaskBlock}>
+                {task.content}
+              </span>
+            </div>
+            <p>
+              {task.scheduled && (
+                <time
+                  className={classnames('text-sm', {
+                    'text-gray-400': !isExpiredTask,
+                    'text-red-400': isExpiredTask,
+                  })}
+                >
+                  {dayjs(task.scheduled.toString(), 'YYYYMMDD').format(
+                    preferredDateFormat,
+                  )}
+                </time>
+              )}
             </p>
-            {task.scheduled && (
-              <time
-                className={classnames('text-xs', {
-                  'text-gray-400': !isExpiredTask,
-                  'text-red-400': isExpiredTask,
-                })}
-              >
-                {dayjs(task.scheduled.toString(), 'YYYYMMDD').format(
-                  preferredDateFormat,
-                )}
-              </time>
-            )}
           </div>
           {task.isToday ? (
             <div className="pl-2 pr-1" onClick={() => task.setScheduled(null)}>

diff --git a/src/hooks/useTaskManager.ts b/src/hooks/useTaskManager.ts
@@ -26,6 +26,13 @@ const useTaskManager = (task: TaskEntityObject) => {
     window.logseq.Editor.scrollToBlockInPage(task.page.uuid, uuid);
   }, [uuid]);
 
+  const setMarker = useCallback(async (newMarker: TaskMarker) => {
+    console.log('setMarker', newMarker);
+    const nextContent = task.rawContent.replace(new RegExp(`^${marker}`), newMarker);
+    await window.logseq.Editor.updateBlock(uuid, nextContent);
+    refresh();
+  }, [uuid])
+
   const setScheduled = useCallback(async (date: Date | null) => {
     let nextContent = task.rawContent;
     if (date === null) {
@@ -56,6 +63,7 @@ const useTaskManager = (task: TaskEntityObject) => {
     isToday,
     toggle,
     openTask,
+    setMarker,
     setScheduled,
   };
 };

diff --git a/src/models/TaskEntity.ts b/src/models/TaskEntity.ts
@@ -1,10 +1,12 @@
+import removeMarkdown from 'remove-markdown';
 import { BlockEntity, PageEntity } from '@logseq/libs/dist/LSPlugin.user';
 import { getBlockUUID } from '../utils';
 
 export enum TaskMarker {
   LATER = 'LATER',
   NOW = 'NOW',
   TODO = 'TODO',
+  DOING = 'DOING',
   DONE = 'DONE',
 }
 
@@ -58,6 +60,7 @@ class TaskEntity {
     content = content.replace(/DEADLINE: <[^>]+>/, '');
     content = content.replace(/(:LOGBOOK:)|(\*\s.*)|(:END:)|(CLOCK:.*)/gm, '');
     content = content.replace(/id::[^:]+/, '');
+    content = removeMarkdown(content);
     return content.trim();
   }
 

diff --git a/src/querys/anytime.ts b/src/querys/anytime.ts
@@ -3,7 +3,7 @@ export default function getAnytimeTaskQuery() {
     [:find (pull ?b [*])
      :where
      [?b :block/marker ?marker]
-     [(contains? #{"NOW" "LATER" "TODO"} ?marker)]
+     [(contains? #{"NOW" "LATER" "TODO" "DOING"} ?marker)]
      [?b :block/page ?p]
      (not [?p :block/journal? true])
      (not [?p :block/journalDay])

diff --git a/src/querys/scheduled.ts b/src/querys/scheduled.ts
@@ -6,7 +6,7 @@ export default function getScheduledTaskQuery() {
     [:find (pull ?b [*])
      :where
      [?b :block/marker ?marker]
-     [(contains? #{"NOW" "LATER" "TODO"} ?marker)]
+     [(contains? #{"NOW" "LATER" "TODO" "DOING"} ?marker)]
      [?b :block/page ?p]
      (or
        [?b :block/scheduled ?d]

diff --git a/src/querys/today.ts b/src/querys/today.ts
@@ -6,7 +6,7 @@ export default function getTodayTaskQuery() {
     [:find (pull ?b [*])
      :where
      [?b :block/marker ?marker]
-     [(contains? #{"NOW" "LATER" "TODO"} ?marker)]
+     [(contains? #{"NOW" "LATER" "TODO" "DOING"} ?marker)]
      [?b :block/page ?p]
      (or
        (and