crm: make it possible to edit the tags of one single user

- note: you MUST click reload to see the changes

Author: williamstein

src/packages/frontend/frame-editors/crm-editor/fields/string-tags.tsx

@@ -4,11 +4,12 @@ This is much less complicated than the normal tags that map
 to integers in the CRM. These are used at least for
 accounts for users to indicate their interests.
 */
-import { Tag } from "antd";
-
+import { Input, Tag } from "antd";
 import { render } from "./register";
+import { useEffect, useRef, useState } from "react";
+import { useEditableContext } from "./context";
 
-render({ type: "string-tags" }, ({ field, obj }) => {
+render({ type: "string-tags", editable: false }, ({ field, obj }) => {
   const tags = obj[field];
   if (tags == null) return null;
   return (
@@ -19,3 +20,52 @@ render({ type: "string-tags" }, ({ field, obj }) => {
     </div>
   );
 });
+
+render({ type: "string-tags", editable: true }, ({ field, obj, spec }) => {
+  const ref = useRef<any>(undefined);
+  const { save, saving, counter, edit, error, ClickToEdit } =
+    useEditableContext<string>(field);
+  const [value, setValue] = useState<string>(obj[field]?.join(",") ?? "");
+  useEffect(() => {
+    setValue(obj[field]);
+  }, [counter, obj[field]]);
+
+  if (spec.type != "string-tags" || !spec.editable) {
+    throw Error("bug");
+  }
+  if (!edit) {
+    const tags = obj[field];
+    return (
+      <ClickToEdit empty={!tags || tags.length == 0}>
+        <div style={{ lineHeight: "2em", display: "inline-block" }}>
+          {tags?.map((value) => (
+            <Tag key={value}>{value}</Tag>
+          ))}
+        </div>
+      </ClickToEdit>
+    );
+  }
+  return (
+    <>
+      <Input
+        style={{ width: "100%" }}
+        disabled={saving}
+        ref={ref}
+        autoFocus
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+        onBlur={() => {
+          setValue(ref.current.input.value);
+          save(obj, ref.current.input.value.split(","));
+        }}
+        onPressEnter={() => {
+          setValue(ref.current.input.value);
+          save(obj, ref.current.input.value.split(","));
+        }}
+      />
+      {error}
+    </>
+  );
+});

src/packages/util/db-schema/accounts.ts

@@ -720,6 +720,7 @@ Table({
           banned: true,
           unlisted: true,
           notes: true,
+          tags: true,
           salesloft_id: true,
           purchase_closing_day: true,
           min_balance: true, // admins can set this