make search also work for tasks

sagemathinc · Oct 14, 2024 · fddee81 · fddee81
1 parent 1789a18
commit fddee81
Show file tree

Hide file tree

Showing 10 changed files with 280 additions and 156 deletions.
diff --git a/src/packages/frontend/editors/task-editor/actions.ts b/src/packages/frontend/editors/task-editor/actions.ts
@@ -34,10 +34,12 @@ import {
   TaskMap,
   TaskState,
 } from "./types";
-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 type {
+  Actions as TaskFrameActions,
+  Store as TaskStore,
+} from "@cocalc/frontend/frame-editors/task-editor/actions";
 import Fragment from "@cocalc/frontend/misc/fragment-id";
 
 const LAST_EDITED_THRESH_S = 30;
@@ -48,7 +50,7 @@ export class TaskActions extends Actions<TaskState> {
   private project_id: string;
   private path: string;
   private truePath: string;
-  private store: TaskStore;
+  public store: TaskStore;
   _update_visible: Function;
   private is_closed: boolean = false;
   private key_handler?: (any) => void;
@@ -663,7 +665,6 @@ export class TaskActions extends Actions<TaskState> {
   }
 
   public blur_find_box(): void {
-    this.enable_key_handler();
     this.setFrameData({ focus_find_box: false });
   }
 

diff --git a/src/packages/frontend/editors/task-editor/editor.tsx b/src/packages/frontend/editors/task-editor/editor.tsx
@@ -9,9 +9,8 @@ Top-level react component for task list
 
 import { Button } from "antd";
 import { fromJS } from "immutable";
-
 import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
-import { React, useEditorRedux } from "@cocalc/frontend/app-framework";
+import { useEditorRedux } from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { TaskActions } from "./actions";
@@ -31,111 +30,115 @@ interface Props {
   read_only?: boolean;
 }
 
-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({});
-    const hashtags = desc.get("data-hashtags");
-    const current_task_id = desc.get("data-current_task_id");
-    const counts = desc.get("data-counts");
-    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");
+export function TaskEditor({
+  actions,
+  path,
+  project_id,
+  desc,
+  read_only,
+}: Props) {
+  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({});
+  const hashtags = desc.get("data-hashtags");
+  const current_task_id = desc.get("data-current_task_id");
+  const counts = desc.get("data-counts");
+  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");
 
-    if (tasks == null || visible == null) {
-      return (
-        <div
+  if (tasks == null || visible == null) {
+    return (
+      <div
+        style={{
+          fontSize: "40px",
+          textAlign: "center",
+          padding: "15px",
+          color: "#999",
+        }}
+      >
+        <Loading />
+      </div>
+    );
+  }
+
+  return (
+    <div className={"smc-vfill"}>
+      <Row>
+        <Col md={7} style={{ display: "flex", marginTop: "5px" }}>
+          <Button
+            style={{ marginLeft: "5px" }}
+            onClick={() => {
+              actions.new_task();
+            }}
+          >
+            <Icon name="plus-circle" /> New Task
+          </Button>
+          <Find
+            style={{ flex: 1 }}
+            actions={actions}
+            local_view_state={local_view_state}
+            counts={counts}
+            focus_find_box={focus_find_box}
+          />
+        </Col>
+        <Col md={5}>
+          <DescVisible
+            num_visible={visible?.size}
+            num_tasks={tasks?.size}
+            local_view_state={local_view_state}
+            search_desc={search_desc}
+          />
+        </Col>
+      </Row>
+      <Row>
+        <Col md={12}>
+          {hashtags != null && (
+            <HashtagBar
+              actions={actions}
+              hashtags={hashtags}
+              selected_hashtags={local_view_state.get("selected_hashtags")}
+            />
+          )}
+        </Col>
+      </Row>
+      <Headings actions={actions} sort={local_view_state.get("sort")} />
+      <div style={{ paddingTop: "5px" }} />
+      {visible.size == 0 ? (
+        <a
+          onClick={actions.new_task}
           style={{
             fontSize: "40px",
             textAlign: "center",
             padding: "15px",
-            color: "#999",
           }}
         >
-          <Loading />
-        </div>
-      );
-    }
-
-    return (
-      <div className={"smc-vfill"}>
-        <Row>
-          <Col md={7} style={{ display: "flex", marginTop: "5px" }}>
-            <Button
-              style={{ marginLeft: "5px" }}
-              onClick={() => {
-                actions.new_task();
-              }}
-            >
-              <Icon name="plus-circle" /> New Task
-            </Button>
-            <Find
-              style={{ flex: 1 }}
-              actions={actions}
-              local_view_state={local_view_state}
-              counts={counts}
-              focus_find_box={focus_find_box}
-            />
-          </Col>
-          <Col md={5}>
-            <DescVisible
-              num_visible={visible?.size}
-              num_tasks={tasks?.size}
-              local_view_state={local_view_state}
-              search_desc={search_desc}
-            />
-          </Col>
-        </Row>
-        <Row>
-          <Col md={12}>
-            {hashtags != null && (
-              <HashtagBar
-                actions={actions}
-                hashtags={hashtags}
-                selected_hashtags={local_view_state.get("selected_hashtags")}
-              />
-            )}
-          </Col>
-        </Row>
-        <Headings actions={actions} sort={local_view_state.get("sort")} />
-        <div style={{ paddingTop: "5px" }} />
-        {visible.size == 0 ? (
-          <a
-            onClick={actions.new_task}
-            style={{
-              fontSize: "40px",
-              textAlign: "center",
-              padding: "15px",
-            }}
-          >
-            Create a task...
-          </a>
-        ) : (
-          <TaskList
-            actions={actions}
-            path={path}
-            project_id={project_id}
-            tasks={tasks}
-            visible={visible}
-            current_task_id={current_task_id}
-            local_task_state={local_task_state}
-            scrollState={(local_view_state as any).get("scrollState")?.toJS?.()}
-            font_size={desc.get("font_size")}
-            sortable={
-              !read_only &&
-              is_sortable(
-                local_view_state.getIn(["sort", "column"]) ?? HEADINGS[0]
-              )
-            }
-            read_only={read_only}
-            selected_hashtags={local_view_state.get("selected_hashtags")}
-            search_terms={search_terms}
-          />
-        )}
-      </div>
-    );
-  }
-);
+          Create a task...
+        </a>
+      ) : (
+        <TaskList
+          actions={actions}
+          path={path}
+          project_id={project_id}
+          tasks={tasks}
+          visible={visible}
+          current_task_id={current_task_id}
+          local_task_state={local_task_state}
+          scrollState={(local_view_state as any).get("scrollState")?.toJS?.()}
+          font_size={desc.get("font_size")}
+          sortable={
+            !read_only &&
+            is_sortable(
+              local_view_state.getIn(["sort", "column"]) ?? HEADINGS[0],
+            )
+          }
+          read_only={read_only}
+          selected_hashtags={local_view_state.get("selected_hashtags")}
+          search_terms={search_terms}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/packages/frontend/editors/task-editor/find.tsx b/src/packages/frontend/editors/task-editor/find.tsx
@@ -44,7 +44,7 @@ export function Find({
         ref={inputRef}
         allowClear
         value={local_view_state.get("search") ?? ""}
-        placeholder={"Search for tasks..."}
+        placeholder={"Filter tasks..."}
         onChange={(e) =>
           actions.set_local_view_state({
             search: e.target.value,
@@ -56,6 +56,7 @@ export function Find({
           if (evt.which === 27) {
             actions.set_local_view_state({ search: "" });
             inputRef.current?.blur();
+            actions.enable_key_handler();
             return false;
           }
         }}

diff --git a/src/packages/frontend/editors/task-editor/store.ts b/src/packages/frontend/editors/task-editor/store.ts
@@ -4,6 +4,6 @@
  */
 
 import { Store } from "../../app-framework";
-import { TaskState } from "./types";
+import type { TaskState } from "./types";
 
 export class TaskStore extends Store<TaskState> {}
diff --git a/src/packages/frontend/editors/task-editor/task.tsx b/src/packages/frontend/editors/task-editor/task.tsx
@@ -99,7 +99,10 @@ export default function Task({
   return (
     <Grid
       style={style}
-      onClick={() => actions?.set_current_task(task.get("task_id"))}
+      onClick={() => {
+        actions?.set_current_task(task.get("task_id"));
+        actions?.enable_key_handler();
+      }}
     >
       <Row>
         <Col sm={1}>

diff --git a/src/packages/frontend/frame-editors/chat-editor/search.tsx b/src/packages/frontend/frame-editors/chat-editor/search.tsx
@@ -17,4 +17,8 @@ function Preview({ id, content }) {
   );
 }
 
-export const search = createSearchEditor({ Preview });
+export const search = createSearchEditor({
+  Preview,
+  updateField: "messages",
+  title: "Chatroom",
+});