Allowing Whitespace in References

web/src/components/CreateMemoRelationDialog.tsx

@@ -0,0 +1,172 @@
+import { Autocomplete, AutocompleteOption, Button, Checkbox, Chip, IconButton } from "@mui/joy";
+import React, { useState, useEffect } from "react";
+import { toast } from "react-hot-toast";
+import { memoServiceClient } from "@/grpcweb";
+import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import { getDateTimeString } from "@/helpers/datetime";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { Memo } from "@/types/proto/api/v2/memo_service";
+import { useTranslate } from "@/utils/i18n";
+import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
+
+interface Props extends DialogProps {
+  onConfirm: (memoIdList: number[], embedded?: boolean) => void;
+}
+
+const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
+  const { destroy, onConfirm } = props;
+  const t = useTranslate();
+  const user = useCurrentUser();
+  const [searchText, setSearchText] = useState<string>("");
+  const [debouncedSearchText, setDebouncedSearchText] = useState<string>("");
+  const [isFetching, setIsFetching] = useState<boolean>(true);
+  const [fetchedMemos, setFetchedMemos] = useState<Memo[]>([]);
+  const [selectedMemos, setSelectedMemos] = useState<Memo[]>([]);
+  const [embedded, setEmbedded] = useState<boolean>(false);
+  const filteredMemos = fetchedMemos.filter((memo) => !selectedMemos.includes(memo));
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchText(searchText.trim());
+    }, 300);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchText]);
+
+  useEffect(() => {
+    const fetchMemos = async () => {
+      setIsFetching(true);
+      try {
+        const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
+        if (debouncedSearchText) {
+          filters.push(`content_search == [${JSON.stringify(debouncedSearchText)}]`);
+        }
+        const { memos } = await memoServiceClient.listMemos({
+          pageSize: DEFAULT_MEMO_LIMIT,
+          filter: filters.length > 0 ? filters.join(" && ") : undefined,
+        });
+        setFetchedMemos(memos);
+      } catch (error: any) {
+        console.error(error);
+        toast.error(error.response.data.message);
+      }
+      setIsFetching(false);
+    };
+
+    if (debouncedSearchText) fetchMemos();
+  }, [debouncedSearchText]);
+
+  const getHighlightedContent = (content: string) => {
+    const index = content.toLowerCase().indexOf(searchText.toLowerCase());
+    if (index === -1) {
+      return content;
+    }
+    let before = content.slice(0, index);
+    if (before.length > 20) {
+      before = "..." + before.slice(before.length - 20);
+    }
+    const highlighted = content.slice(index, index + searchText.length);
+    let after = content.slice(index + searchText.length);
+    if (after.length > 20) {
+      after = after.slice(0, 20) + "...";
+    }
+
+    return (
+      <>
+        {before}
+        <mark className="font-medium">{highlighted}</mark>
+        {after}
+      </>
+    );
+  };
+
+  const handleCloseDialog = () => {
+    destroy();
+  };
+
+  const handleConfirmBtnClick = async () => {
+    onConfirm(
+      selectedMemos.map((memo) => memo.id),
+      embedded,
+    );
+    destroy();
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container !w-96">
+        <p className="title-text">{"Add references"}</p>
+        <IconButton size="sm" onClick={() => destroy()}>
+          <Icon.X className="w-5 h-auto" />
+        </IconButton>
+      </div>
+      <div className="dialog-content-container max-w-[24rem]">
+        <Autocomplete
+          className="w-full"
+          size="md"
+          clearOnBlur
+          disableClearable
+          placeholder={"Search content"}
+          noOptionsText={"No memos found"}
+          options={filteredMemos}
+          loading={isFetching}
+          inputValue={searchText}
+          value={selectedMemos}
+          multiple
+          onInputChange={(_, value) => setSearchText(value)}
+          getOptionKey={(option) => option.name}
+          getOptionLabel={(option) => option.content}
+          isOptionEqualToValue={(option, value) => option.id === value.id}
+          renderOption={(props, option) => (
+            <AutocompleteOption {...props}>
+              <div className="w-full flex flex-col justify-start items-start">
+                <p className="text-xs text-gray-400 select-none">{getDateTimeString(option.displayTime)}</p>
+                <p className="mt-0.5 text-sm leading-5 line-clamp-2">
+                  {searchText ? getHighlightedContent(option.content) : option.content}
+                </p>
+              </div>
+            </AutocompleteOption>
+          )}
+          renderTags={(memos) =>
+            memos.map((memo) => (
+              <Chip key={memo.name} className="!max-w-full !rounded" variant="outlined" color="neutral">
+                <div className="w-full flex flex-col justify-start items-start">
+                  <p className="text-xs text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</p>
+                  <span className="w-full text-sm leading-5 truncate">{memo.content}</span>
+                </div>
+              </Chip>
+            ))
+          }
+          onChange={(_, value) => setSelectedMemos(value)}
+        />
+        <div className="mt-3">
+          <Checkbox label={"Use as Embedded Content"} checked={embedded} onChange={(e) => setEmbedded(e.target.checked)} />
+        </div>
+        <div className="mt-4 w-full flex flex-row justify-end items-center space-x-1">
+          <Button variant="plain" color="neutral" onClick={handleCloseDialog}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={handleConfirmBtnClick} disabled={selectedMemos.length === 0}>
+            {t("common.confirm")}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function showCreateMemoRelationDialog(props: Omit<Props, "destroy" | "hide">) {
+  generateDialog(
+    {
+      className: "create-memo-relation-dialog",
+      dialogName: "create-memo-relation-dialog",
+    },
+    CreateMemoRelationDialog,
+    props,
+  );
+}
+
+export default showCreateMemoRelationDialog;