feat: show task scheduled time and open task in right sidebar

ahonn · Apr 25, 2022 · b48e08e · b48e08e
1 parent c451693
commit b48e08e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import dayjs from 'dayjs';
 import Checkbox from 'rc-checkbox';
 import Task from '../models/Task';
+import { InfoCircle } from 'tabler-icons-react';
 import useUserConfigs from '../hooks/useUserConfigs';
 import 'rc-checkbox/assets/index.css';
 
@@ -15,13 +16,22 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
   const { item: task, onChange } = props;
   const [checked, setChecked] = React.useState(task.isDone());
   const { preferredDateFormat } = useUserConfigs();
+  const [scheduled, setScheduled] = React.useState<Date | null>(null);
+
+  useEffect(() => {
+    task.getScheduledDate().then(setScheduled);
+  }, [task]);
 
   const handleTaskChange = async () => {
     await task.toggle();
     setChecked(!checked);
     onChange(task);
   };
 
+  const openTaskBlock = () => {
+    window.logseq.Editor.openInRightSidebar(task.uuid);
+  };
+
   const contentClassName = classnames(
     'flex-1 border-b border-gray-100 pb-2 pt-1 text-sm leading-normal',
     {
@@ -40,12 +50,19 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
         />
       </div>
       <div className={contentClassName}>
-        <p>{task.content}</p>
-        {task.scheduled && (
-          <time className="text-xs text-gray-400">
-            {dayjs(task.scheduled.toString(), 'YYYYMMDD').format(preferredDateFormat)}
-          </time>
-        )}
+        <div className="flex justify-between items-center">
+          <div className="flex-col">
+            <p>{task.content}</p>
+            {scheduled && (
+              <time className="text-xs text-gray-400">
+                {dayjs(scheduled).format(preferredDateFormat)}
+              </time>
+            )}
+          </div>
+          <div className="px-1" onClick={openTaskBlock}>
+            <InfoCircle size={20} className="stroke-gray-300 cursor-pointer" />
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/models/Task.ts b/src/models/Task.ts
@@ -1,4 +1,4 @@
-import { BlockEntity } from '@logseq/libs/dist/LSPlugin';
+import { BlockEntity, PageEntity } from '@logseq/libs/dist/LSPlugin';
 import dayjs, { Dayjs } from 'dayjs';
 
 export enum TaskMarker {
@@ -120,6 +120,21 @@ class Task {
     return this.block.marker === TaskMarker.DONE;
   }
 
+  public async getScheduledDate(): Promise<Date | null> {
+    if (this.block.scheduled) {
+      return dayjs(this.block.scheduled.toString(), 'YYYYMMDD').toDate();
+    }
+
+    const block = await window.logseq.Editor.getBlock(this.uuid, { includeChildren: true });
+    const page = block?.page as PageEntity | undefined;
+    console.log(block);
+    if (page?.journalDay) {
+      return dayjs(page.journalDay.toString(), 'YYYYMMDD').toDate();
+    }
+
+    return null;
+  }
+
   public async toggle(): Promise<void> {
     const nextMarker = this.isDone() ? TaskMarker.LATER : TaskMarker.DONE;
     await window.logseq.Editor.updateBlock(