fully implement adding tags to all selected accounts

Author: williamstein

src/packages/frontend/frame-editors/course-editor/course-panel-wrapper.tsx

@@ -12,7 +12,6 @@ so there is no common containing react component that we control...
 */
 
 import { Map } from "immutable";
-
 import {
   AppRedux,
   React,

src/packages/frontend/frame-editors/crm-editor/views/view-menu/index.tsx

@@ -58,6 +58,7 @@ export default function ViewMenu({
         title={title}
         primaryKey={primaryKey}
         columns={columns}
+        refresh={refresh}
       />
       <HideFieldsMenu
         columns={allColumns}

src/packages/frontend/frame-editors/crm-editor/views/view-menu/tag-accounts.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { Alert, Button, Input, Modal, Progress, Space, Spin } from "antd";
+import { Icon } from "@cocalc/frontend/components/icon";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+import type { ColumnsType } from "../../fields";
+import { Set } from "immutable";
+import { plural } from "@cocalc/util/misc";
+import ShowError from "@cocalc/frontend/components/error";
+import { map as awaitMap } from "awaiting";
+const MAX_PARALLEL_TASKS = 15;
+
+interface Props {
+  title: string;
+  onClose: () => void;
+  selected: Set<any> | undefined;
+  data: { account_id: string; tags?: string[] }[];
+  primaryKey: string;
+  columns: ColumnsType[];
+  refresh: Function;
+}
+
+export default function TagAccounts({
+  title,
+  onClose,
+  selected,
+  data,
+  primaryKey,
+  columns,
+  refresh,
+}: Props) {
+  console.log({ title, selected, data, primaryKey, columns });
+  const [value, setValue] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+  const [error, setError] = useState<string>("");
+
+  if (selected == null) {
+    return null;
+  }
+
+  const save = async () => {
+    const tags = value
+      .split(",")
+      .map((x) => x.trim())
+      .filter((x) => !!x);
+    if (tags.length == 0 || selected == null || selected.size == 0) {
+      setValue("");
+      return;
+    }
+    const errors: string[] = [];
+    const tagsByAccount: { [account_id: string]: string[] } = {};
+    for (const { account_id, tags } of data) {
+      tagsByAccount[account_id] = tags ?? [];
+    }
+    try {
+      setProgress(0);
+      setLoading(true);
+      let done = 0;
+      let goal = selected.size;
+      const task = async (account_id) => {
+        try {
+          await webapp_client.async_query({
+            query: {
+              crm_accounts: {
+                account_id,
+                tags: tagsByAccount[account_id].concat(tags),
+              },
+            },
+          });
+        } catch (err) {
+          errors.push(`${err}`);
+        }
+        done += 1;
+        setProgress(Math.round((done * 100) / goal));
+      };
+      await awaitMap(Array.from(selected), MAX_PARALLEL_TASKS, task);
+      setValue("");
+    } finally {
+      refresh();
+      if (errors.length > 0) {
+        setError(errors.join(" \n"));
+      }
+      setProgress(100);
+      setLoading(false);
+      if (errors.length == 0) {
+        onClose();
+      }
+    }
+  };
+
+  return (
+    <Modal
+      open
+      footer={null}
+      title={
+        <div style={{ margin: "0 15px" }}>
+          <Icon name="tags-outlined" /> Tag {selected.size} Selected{" "}
+          {plural(selected.size, "Account")}
+        </div>
+      }
+      onCancel={onClose}
+    >
+      <div style={{ margin: "30px 15px" }}>
+        <Space.Compact style={{ width: "100%" }}>
+          <Input
+            allowClear
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="Tag or tag1,tag2,..."
+            size="large"
+          />
+          <Button
+            size="large"
+            style={{ height: "41px" /* hack around antd bug?*/ }}
+            disabled={!value.trim() || loading}
+            onClick={() => {
+              save();
+            }}
+          >
+            Tag {plural(selected.size, "Account")} {loading && <Spin />}
+          </Button>
+        </Space.Compact>
+        <Alert
+          style={{ margin: "15px 0" }}
+          type="info"
+          message={
+            <>The above tags will be applied to each selected account.</>
+          }
+        />
+        {loading && (
+          <div>
+            <Progress percent={progress} />
+          </div>
+        )}
+        {error && <hr />}
+        <ShowError error={error} setError={setError} />
+      </div>
+    </Modal>
+  );
+}

src/packages/frontend/frame-editors/crm-editor/views/view-menu/top.tsx

@@ -6,6 +6,7 @@ import { useSelected } from "../use-selection";
 import { plural } from "@cocalc/util/misc";
 import { useState } from "react";
 import Export from "./export";
+import TagAccounts from "./tag-accounts";
 import { capitalize } from "@cocalc/util/misc";
 
 export default function TopMenu({
@@ -19,9 +20,10 @@ export default function TopMenu({
   data,
   title,
   primaryKey,
+  refresh,
 }) {
   const [modal, setModal] = useState<
-    "csv-export" | "json-export" | "not-implemented" | null
+    "csv-export" | "json-export" | "not-implemented" | "tag-accounts" | null
   >(null);
   const selected = useSelected({ id });
   const numSelected = selected?.size ?? 0;
@@ -117,7 +119,7 @@ export default function TopMenu({
                   ? "Export CSV (select some records)"
                   : `Export ${selected?.size ?? 0} ${plural(
                       numSelected,
-                      "record"
+                      "record",
                     )} to CSV...`,
               key: "csv-export",
             },
@@ -129,7 +131,7 @@ export default function TopMenu({
                   ? "Export JSON (select some records)"
                   : `Export ${selected?.size ?? 0} ${plural(
                       numSelected,
-                      "record"
+                      "record",
                     )} to JSON...`,
               key: "json-export",
             },
@@ -138,6 +140,28 @@ export default function TopMenu({
       ],
     },
   ];
+  if (dbtable == "crm_accounts") {
+    items[0].children.push({
+      type: "group",
+      label: (
+        <Divider>
+          <Icon name="tags-outlined" style={{ marginRight: "10px" }} /> Tag
+          Accounts
+        </Divider>
+      ),
+      children: [
+        {
+          icon: <Icon name="tags-outlined" />,
+          disabled: primaryKey != null && numSelected == 0,
+          label:
+            numSelected == 0
+              ? "Tag Accounts (select some records)"
+              : `Tag ${selected?.size ?? 0} ${plural(numSelected, "Account")}...`,
+          key: "tag-accounts",
+        },
+      ],
+    });
+  }
   return (
     <>
       {modal == "csv-export" && (primaryKey == null || selected) && (
@@ -162,6 +186,17 @@ export default function TopMenu({
           primaryKey={primaryKey}
         />
       )}
+      {modal == "tag-accounts" && (primaryKey == null || selected) && (
+        <TagAccounts
+          title={title}
+          onClose={() => setModal(null)}
+          selected={selected}
+          data={data}
+          columns={columns}
+          primaryKey={primaryKey}
+          refresh={refresh}
+        />
+      )}
       {modal == "not-implemented" && (
         <Modal
           open
@@ -183,6 +218,7 @@ export default function TopMenu({
           switch (key) {
             case "csv-export":
             case "json-export":
+            case "tag-accounts":
               setModal(key);
               break;
             default: