feat: support task scheduled time sorting

ahonn · Feb 4, 2024 · 9570e68 · 9570e68
1 parent ece3b5d
commit 9570e68
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 17 deletions.
diff --git a/src/components/TaskFilter.tsx b/src/components/TaskFilter.tsx
@@ -3,21 +3,21 @@ import Select, { Theme } from 'react-select';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { CircleOff } from 'tabler-icons-react';
 import { taskMarkersState } from '../state/user-configs';
-import { TaskPriority } from '../models/TaskEntity';
-import { DEFAULT_OPTION, markerState, priorityState } from '../state/filter';
+import {
+  DEFAULT_OPTION,
+  markerState,
+  priorityState,
+  PRIORITY_OPTIONS,
+  sortState,
+  SortType,
+} from '../state/filter';
 import { themeStyleState } from '../state/theme';
 import { settingsState } from '../state/settings';
 
-const PRIORITY_OPTIONS = [
-  TaskPriority.HIGH,
-  TaskPriority.MEDIUM,
-  TaskPriority.LOW,
-  TaskPriority.NONE,
-];
-
 const TaskFilter: React.FC = () => {
   const [marker, setMarker] = useRecoilState(markerState);
   const [priority, setPriority] = useRecoilState(priorityState);
+  const [sort, setSort] = useRecoilState(sortState);
   const taskMarkers = useRecoilValue(taskMarkersState);
   const themeStyle = useRecoilValue(themeStyleState);
   const settings = useRecoilValue(settingsState);
@@ -43,8 +43,7 @@ const TaskFilter: React.FC = () => {
   const selectClassNames = React.useMemo(
     () => ({
       container: () => 'text-xs',
-      control: () =>
-        '!h-6 !min-h-6 w-16 !border-none !shadow-none !bg-transparent ',
+      control: () => '!h-6 !min-h-6 w-12 !border-none !shadow-none !bg-transparent ',
       valueContainer: () => '!py-0 !px-1 cursor-pointer bg-transparent',
       singleValue: () => `!text-gray-500 !dark:text-gray-300`,
       indicatorsContainer: () => '!hidden',
@@ -68,9 +67,7 @@ const TaskFilter: React.FC = () => {
   );
 
   React.useEffect(() => {
-    const marker = markerOptions.find(
-      (marker) => marker.value === settings.defaultMarker,
-    );
+    const marker = markerOptions.find((marker) => marker.value === settings.defaultMarker);
     if (marker) {
       setMarker(marker);
     }
@@ -90,12 +87,12 @@ const TaskFilter: React.FC = () => {
 
   return (
     <div
-      className="flex flex-row text-gray-500 dark:text-gray-300 px-2 rounded-b-md items-center justify-between"
+      className="flex flex-row gap-4 text-gray-500 dark:text-gray-300 px-2 rounded-b-md items-center justify-between"
       style={{
         backgroundColor: themeStyle.secondaryBackgroundColor,
       }}
     >
-      <div className="flex flex-row pl-0.5">
+      <div className="flex flex-row">
         <div className="flex flex-row items-center">
           <span className="text-xs">Marker:</span>
           <Select
@@ -118,6 +115,26 @@ const TaskFilter: React.FC = () => {
             onChange={(option) => setPriority(option!)}
           />
         </div>
+        <div className="flex flex-row items-center">
+          <span className="text-xs">Sort:</span>
+          <Select
+            classNames={selectClassNames}
+            theme={selectTheme}
+            isSearchable={false}
+            options={[
+              {
+                label: 'Desc',
+                value: SortType.Desc,
+              },
+              {
+                label: 'ASC',
+                value: SortType.Asc,
+              },
+            ]}
+            value={sort}
+            onChange={(option) => setSort(option!)}
+          />
+        </div>
       </div>
       {(marker.value || priority.value) && (
         <CircleOff

diff --git a/src/state/filter.ts b/src/state/filter.ts
@@ -1,4 +1,5 @@
 import { atom } from "recoil";
+import { TaskPriority } from "../models/TaskEntity";
 
 export const DEFAULT_OPTION = {
   label: 'ALL',
@@ -10,7 +11,28 @@ export const markerState = atom({
   default: DEFAULT_OPTION,
 });
 
+
+export const PRIORITY_OPTIONS = [
+  TaskPriority.HIGH,
+  TaskPriority.MEDIUM,
+  TaskPriority.LOW,
+  TaskPriority.NONE,
+];
+
 export const priorityState = atom({
   key: 'filter/priority',
   default: DEFAULT_OPTION,
 });
+
+export enum SortType {
+  Asc = 'ASC',
+  Desc = 'DESC',
+}
+
+export const sortState = atom({
+  key: 'filter/sort',
+  default: {
+    label: 'DESC',
+    value: SortType.Desc,
+  },
+});
diff --git a/src/state/tasks.ts b/src/state/tasks.ts
@@ -5,7 +5,7 @@ import TaskEntity, {
   TASK_PRIORITY_WEIGHT,
 } from '../models/TaskEntity';
 import { getBlockUUID, isValidUUID } from '../utils';
-import { markerState, priorityState } from './filter';
+import { markerState, priorityState, sortState, SortType } from './filter';
 
 async function getTaskEntitiesByQuery(query: string) {
   const collections = await window.logseq.DB.datascriptQuery<BlockEntity[][]>(
@@ -93,6 +93,7 @@ export const filterdTasksState = selectorFamily({
       const tasks = get(tasksState(query));
       const marker = get(markerState);
       const priority = get(priorityState);
+      const sort = get(sortState);
 
       return tasks.filter((task: TaskEntityObject) => {
         if (marker.value && task.marker !== marker.value) {
@@ -104,6 +105,14 @@ export const filterdTasksState = selectorFamily({
         }
 
         return true;
+      }).sort((a, b) => {
+        if (a.scheduled === undefined || b.scheduled === undefined) {
+          return 0;
+        }
+        if (sort.value === SortType.Asc) {
+          return a.scheduled - b.scheduled;
+        }
+        return b.scheduled - a.scheduled;
       });
     },
 });