feat: support anytime tasks group by page name, #21

ahonn · Sep 14, 2022 · 8e42dc2 · 8e42dc2
1 parent dda626e
commit 8e42dc2
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@logseq/libs": "^0.0.2",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.1",
+    "lodash-es": "^4.17.21",
     "rc-checkbox": "^2.3.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -27,6 +28,7 @@
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/npm": "9.0.1",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "17.0.23",
     "@types/react": "18.0.6",
     "@types/react-dom": "18.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,7 @@ import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import TaskInput, { ITaskInputRef } from './components/TaskInput';
-import TaskSection from './components/TaskSection';
+import TaskSection, { GroupBy } from './components/TaskSection';
 import { logseq as plugin } from '../package.json';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { visibleState } from './state/visible';
@@ -115,7 +115,7 @@ function App() {
             <div>
               <TaskSection title="Today" query={getTodayTaskQuery()} />
               <TaskSection title="Scheduled" query={getScheduledTaskQuery()} />
-              <TaskSection title="Anytime" query={getAnytimeTaskQuery()} />
+              <TaskSection title="Anytime" query={getAnytimeTaskQuery()} groupBy={GroupBy.Page} />
             </div>
           </ErrorBoundary>
         </div>

diff --git a/src/api.ts b/src/api.ts
@@ -54,7 +54,6 @@ export async function setTaskScheduled(task: TaskEntityObject, date: Date | null
       scheduledString,
     );
   } else {
-    // FIXME: 多行文本会有问题
     const lines = rawContent.split('\n');
     lines.splice(1, 0, scheduledString);
     newRawContent = lines.join('\n');

diff --git a/src/components/TaskSection.tsx b/src/components/TaskSection.tsx
@@ -1,18 +1,26 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   useRecoilRefresher_UNSTABLE,
   useRecoilValue,
   useRecoilValueLoadable,
 } from 'recoil';
+import { groupBy } from 'lodash-es';
 import { TaskEntityObject } from '../models/TaskEntity';
 import { tasksState } from '../state/tasks';
 import { themeStyleState } from '../state/theme';
 import { visibleState } from '../state/visible';
 import TaskItem from './TaskItem';
 
+export enum GroupBy {
+  Page,
+  Tag,
+  Namespace,
+}
+
 export interface ITaskSectionProps {
   title: string;
   query: string;
+  groupBy?: GroupBy;
 }
 
 const TaskSection: React.FC<ITaskSectionProps> = (props) => {
@@ -39,6 +47,15 @@ const TaskSection: React.FC<ITaskSectionProps> = (props) => {
     }
   }, [visible, refresh]);
 
+  const taskGroups = useMemo(() => {
+    switch (props.groupBy) {
+      case GroupBy.Page:
+        return groupBy(tasks, (task: TaskEntityObject) => task.page.name);
+      default:
+        return { '': tasks };
+    }
+  }, [props.groupBy, tasks]);
+
   if (tasks.length === 0) {
     return null;
   }
@@ -47,16 +64,21 @@ const TaskSection: React.FC<ITaskSectionProps> = (props) => {
     <div className="py-1">
       <h2
         className="py-1 text-blue-400"
-        style={{
-          color: themeStyle.sectionTitleColor,
-        }}
+        style={{ color: themeStyle.sectionTitleColor }}
       >
         {title}
       </h2>
       <div>
-        {tasks.map((task) => (
-          <TaskItem key={task.uuid} task={task} onChange={refresh} />
-        ))}
+        {Object.entries(taskGroups).map(([name, tasks]) => {
+          return (
+            <div key={name}>
+              {name && <h3 className="py-1 text-sm text-gray-400">{name}</h3>}
+              {tasks.map((task) => (
+                <TaskItem key={task.uuid} task={task} onChange={refresh} />
+              ))}
+            </div>
+          );
+        })}
       </div>
     </div>
   );

diff --git a/src/models/TaskEntity.ts b/src/models/TaskEntity.ts
@@ -31,6 +31,7 @@ export interface TaskEntityObject {
   marker: TaskMarker;
   priority: TaskPriority;
   scheduled: number;
+  repeated: boolean;
   completed: boolean;
   page: {
     name: string;
@@ -80,6 +81,10 @@ class TaskEntity {
     return this.block.scheduled ?? this.block.deadline ?? this.page.journalDay;
   }
 
+  public get repeated(): boolean {
+    return !!this.block.repeated;
+  }
+
   public get completed(): boolean {
     return this.marker === TaskMarker.DONE;
   }
@@ -97,6 +102,7 @@ class TaskEntity {
       marker: this.marker,
       priority: this.priority,
       scheduled: this.scheduled,
+      repeated: this.repeated,
       completed: this.completed,
       page: {
         name: this.page.name,