tasks: implement full fragment support...

- worth spending on hour on...

Author: williamstein

src/packages/frontend/editors/task-editor/actions.ts

@@ -7,9 +7,6 @@
 Task Actions
 */
 
-const LAST_EDITED_THRESH_S = 30;
-const TASKS_HELP_URL = "https://doc.cocalc.com/tasks.html";
-
 import { fromJS, Map } from "immutable";
 import { throttle } from "lodash";
 import { delay } from "awaiting";
@@ -26,6 +23,7 @@ import { create_key_handler } from "./keyboard";
 import { toggle_checkbox } from "./desc-rendering";
 import { Actions } from "../../app-framework";
 import {
+  Align,
   HashtagState,
   Headings,
   HeadingsDir,
@@ -40,6 +38,10 @@ import { TaskStore } from "./store";
 import { SyncDB } from "@cocalc/sync/editor/db";
 import { webapp_client } from "../../webapp-client";
 import type { Actions as TaskFrameActions } from "@cocalc/frontend/frame-editors/task-editor/actions";
+import Fragment from "@cocalc/frontend/misc/fragment-id";
+
+const LAST_EDITED_THRESH_S = 30;
+const TASKS_HELP_URL = "https://doc.cocalc.com/tasks.html";
 
 export class TaskActions extends Actions<TaskState> {
   public syncdb: SyncDB;
@@ -53,13 +55,14 @@ export class TaskActions extends Actions<TaskState> {
   private set_save_status?: () => void;
   private frameId: string;
   private frameActions: TaskFrameActions;
+  private virtuosoRef?;
 
   public _init(
     project_id: string,
     path: string,
     syncdb: SyncDB,
     store: TaskStore,
-    truePath: string // because above path is auxpath for each frame.
+    truePath: string, // because above path is auxpath for each frame.
   ): void {
     this._update_visible = throttle(this.__update_visible, 500);
     this.project_id = project_id;
@@ -136,7 +139,7 @@ export class TaskActions extends Actions<TaskState> {
       local_task_state,
       view,
       counts,
-      current_task_id
+      current_task_id,
     );
 
     if (obj.visible.size == 0 && view.get("search")?.trim().length == 0) {
@@ -148,7 +151,7 @@ export class TaskActions extends Actions<TaskState> {
         local_task_state,
         view,
         counts,
-        current_task_id
+        current_task_id,
       );
     }
 
@@ -229,6 +232,21 @@ export class TaskActions extends Actions<TaskState> {
     }
   }
 
+  clearAllFilters = (obj?) => {
+    this.set_local_view_state(
+      {
+        show_deleted: false,
+        show_done: false,
+        show_max: false,
+        selected_hashtags: {},
+        search: "",
+        ...obj,
+      },
+      false,
+    );
+    this.__update_visible();
+  };
+
   public async save(): Promise<void> {
     if (this.is_closed) {
       return;
@@ -297,7 +315,7 @@ export class TaskActions extends Actions<TaskState> {
     task_id?: string,
     obj?: object,
     setState: boolean = false,
-    save: boolean = true // make new commit to syncdb state
+    save: boolean = true, // make new commit to syncdb state
   ): void {
     if (obj == null || this.is_closed) {
       return;
@@ -334,7 +352,7 @@ export class TaskActions extends Actions<TaskState> {
       // **immediately**; this would happen
       // eventually as a result of the syncdb set above.
       let tasks = this.store.get("tasks") ?? fromJS({});
-      task = tasks.get(task_id) ?? fromJS({ task_id }) as any;
+      task = tasks.get(task_id) ?? (fromJS({ task_id }) as any);
       if (task == null) throw Error("bug");
       for (let k in obj) {
         const v = obj[k];
@@ -405,7 +423,7 @@ export class TaskActions extends Actions<TaskState> {
     const pos_j = tasks.getIn([visible.get(j), "position"]);
     this.set_task(task_id, { position: pos_j }, true);
     this.set_task(visible.get(j), { position: pos_i }, true);
-    this.scroll_into_view();
+    this.scrollIntoView();
   }
 
   public time_travel(): void {
@@ -419,11 +437,14 @@ export class TaskActions extends Actions<TaskState> {
     window.open(TASKS_HELP_URL, "_blank")?.focus();
   }
 
-  public set_current_task(task_id: string): void {
-    if (this.getFrameData("current_task_id") == task_id) return;
+  set_current_task = (task_id: string): void => {
+    if (this.getFrameData("current_task_id") == task_id) {
+      return;
+    }
     this.setFrameData({ current_task_id: task_id });
-    this.scroll_into_view();
-  }
+    this.scrollIntoView();
+    this.setFragment(task_id);
+  };
 
   public set_current_task_delta(delta: number): void {
     const task_id = this.getFrameData("current_task_id");
@@ -492,7 +513,7 @@ export class TaskActions extends Actions<TaskState> {
       this.set_task(
         task_id,
         { done: !this.store.getIn(["tasks", task_id, "done"]) },
-        true
+        true,
       );
     }
   }
@@ -523,15 +544,15 @@ export class TaskActions extends Actions<TaskState> {
 
   public set_due_date(
     task_id: string | undefined,
-    date: number | undefined
+    date: number | undefined,
   ): void {
     this.set_task(task_id, { due_date: date });
   }
 
   public set_desc(
     task_id: string | undefined,
     desc: string,
-    save: boolean = true
+    save: boolean = true,
   ): void {
     this.set_task(task_id, { desc }, false, save);
   }
@@ -646,14 +667,57 @@ export class TaskActions extends Actions<TaskState> {
     this.setFrameData({ focus_find_box: false });
   }
 
-  async scroll_into_view(): Promise<void> {
-    await delay(50);
-    this.setFrameData({ scroll_into_view: true });
-  }
+  setVirtuosoRef = (virtuosoRef) => {
+    this.virtuosoRef = virtuosoRef;
+  };
 
-  public scroll_into_view_done(): void {
-    this.setFrameData({ scroll_into_view: false });
-  }
+  // scroll the current_task_id into view, possibly changing filters
+  // in order to make it visibile, if necessary.
+  scrollIntoView = async (align: Align = "view") => {
+    if (this.virtuosoRef?.current == null) {
+      return;
+    }
+    const current_task_id = this.getFrameData("current_task_id");
+    if (current_task_id == null) {
+      return;
+    }
+    let visible = this.getFrameData("visible");
+    if (visible == null) {
+      return;
+    }
+    // Figure out the index of current_task_id.
+    let index = visible.indexOf(current_task_id);
+    if (index === -1) {
+      const task = this.store.getIn(["tasks", current_task_id]);
+      if (task == null) {
+        // no such task anywhere, not even in trash, etc
+        return;
+      }
+      if (
+        this.getFrameData("search_desc")?.trim() ||
+        task.get("deleted") ||
+        task.get("done")
+      ) {
+        // active search -- try clearing it.
+        this.clearAllFilters({
+          show_deleted: !!task.get("deleted"),
+          show_done: !!task.get("done"),
+        });
+        visible = this.getFrameData("visible");
+        index = visible.indexOf(current_task_id);
+        if (index == -1) {
+          return;
+        }
+      } else {
+        return;
+      }
+    }
+    if (align == "start" || align == "center" || align == "end") {
+      this.virtuosoRef.current.scrollToIndex({ index, align });
+    } else {
+      this.virtuosoRef.current.scrollIntoView({ index });
+    }
+  };
 
   public set_show_max(show_max: number): void {
     this.set_local_view_state({ show_max }, false);
@@ -669,7 +733,7 @@ export class TaskActions extends Actions<TaskState> {
   public toggle_desc_checkbox(
     task_id: string,
     index: number,
-    checked: boolean
+    checked: boolean,
   ): void {
     let desc = this.store.getIn(["tasks", task_id, "desc"]);
     if (desc == null) {
@@ -738,6 +802,14 @@ export class TaskActions extends Actions<TaskState> {
       .getProjectActions(this.project_id)
       .open_file({ path, foreground: true });
   }
+
+  setFragment = (id?) => {
+    if (!id) {
+      Fragment.clear();
+    } else {
+      Fragment.set({ id });
+    }
+  };
 }
 
 function getPositions(tasks): number[] {

src/packages/frontend/editors/task-editor/editor.tsx

@@ -34,9 +34,7 @@ interface Props {
 export const TaskEditor: React.FC<Props> = React.memo(
   ({ actions, path, project_id, desc, read_only }) => {
     const useEditor = useEditorRedux<TaskState>({ project_id, path });
-
     const tasks = useEditor("tasks");
-
     const visible = desc.get("data-visible");
     const local_task_state = desc.get("data-local_task_state") ?? fromJS({});
     const local_view_state = desc.get("data-local_view_state") ?? fromJS({});
@@ -46,7 +44,6 @@ export const TaskEditor: React.FC<Props> = React.memo(
     const search_terms = desc.get("data-search_terms");
     const search_desc = desc.get("data-search_desc");
     const focus_find_box = desc.get("data-focus_find_box");
-    const scroll_into_view = desc.get("data-scroll_into_view");
 
     if (tasks == null || visible == null) {
       return (
@@ -126,7 +123,6 @@ export const TaskEditor: React.FC<Props> = React.memo(
             current_task_id={current_task_id}
             local_task_state={local_task_state}
             scrollState={(local_view_state as any).get("scrollState")?.toJS?.()}
-            scroll_into_view={scroll_into_view}
             font_size={desc.get("font_size")}
             sortable={
               !read_only &&

src/packages/frontend/editors/task-editor/list.tsx

@@ -31,7 +31,6 @@ interface Props {
   current_task_id?: string;
   local_task_state?: LocalTaskStateMap;
   scrollState?: any;
-  scroll_into_view?: boolean;
   font_size: number;
   sortable?: boolean;
   read_only?: boolean;
@@ -48,7 +47,6 @@ export default function TaskList({
   current_task_id,
   local_task_state,
   scrollState,
-  scroll_into_view,
   font_size,
   sortable,
   read_only,
@@ -90,23 +88,8 @@ export default function TaskList({
   }, [search_terms]);
 
   useEffect(() => {
-    if (actions && scroll_into_view) {
-      _scroll_into_view();
-      actions.scroll_into_view_done();
-    }
-  }, [scroll_into_view]);
-
-  function _scroll_into_view() {
-    if (current_task_id == null) {
-      return;
-    }
-    // Figure out the index of current_task_id.
-    const index = visible.indexOf(current_task_id);
-    if (index === -1) {
-      return;
-    }
-    virtuosoRef.current?.scrollIntoView({ index });
-  }
+    actions?.setVirtuosoRef(virtuosoRef);
+  }, [actions, virtuosoRef]);
 
   function render_task(task_id, index?) {
     if (index === visible.size) {

src/packages/frontend/editors/task-editor/types.ts

@@ -11,11 +11,13 @@ export interface Task {
   deleted?: boolean;
   position?: number;
   desc?: string;
-  due_date?: number
+  due_date?: number;
   done?: boolean;
   last_edited?: number;
 }
 
+export type Align = "start" | "center" | "end" | "view" | false;
+
 export type Headings = "Custom" | "Due" | "Changed";
 export type HeadingsDir = "asc" | "desc";