feat(react/dialogs): port clone_to

apps/client/src/widgets/dialogs/clone_to.tsx

@@ -0,0 +1,143 @@
+import { CSSProperties, useRef, useState } from "preact/compat";
+import appContext, { EventData } from "../../components/app_context";
+import { closeActiveDialog, openDialog } from "../../services/dialog";
+import { t } from "../../services/i18n";
+import Modal from "../react/Modal";
+import ReactBasicWidget from "../react/ReactBasicWidget";
+import NoteAutocomplete from "../react/NoteAutocomplete";
+import froca from "../../services/froca";
+import { useEffect } from "react";
+import FNote from "../../entities/fnote";
+import FormGroup from "../react/FormGroup";
+import FormTextBox from "../react/FormTextBox";
+import Button from "../react/Button";
+import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
+import { logError } from "../../services/ws";
+import tree from "../../services/tree";
+import branches from "../../services/branches";
+import toast from "../../services/toast";
+
+interface CloneToDialogProps {
+    clonedNoteIds: string[];
+}
+
+function CloneToDialogComponent({ clonedNoteIds }: CloneToDialogProps) {
+    const [ prefix, setPrefix ] = useState("");
+    const [ suggestion, setSuggestion ] = useState<Suggestion>(null);
+    const autoCompleteRef = useRef<HTMLInputElement>(null);
+
+    function onSubmit() {
+        const notePath = suggestion?.notePath;
+        if (!notePath) {
+            logError(t("clone_to.no_path_to_clone_to"));
+            return;
+        }
+
+        closeActiveDialog();
+        cloneNotesTo(notePath, clonedNoteIds, prefix);
+    }
+
+    return (
+        <Modal
+            className="clone-to-dialog"
+            title={t("clone_to.clone_notes_to")}
+            helpPageId="IakOLONlIfGI"
+            size="lg"
+            footer={<Button text={t("clone_to.clone_to_selected_note")} keyboardShortcut="Enter" />}
+            onSubmit={onSubmit}
+            onShown={() => {
+                autoCompleteRef.current?.focus();
+                note_autocomplete.showRecentNotes($(autoCompleteRef.current));
+            }}
+        >
+            <h5>{t("clone_to.notes_to_clone")}</h5>
+            <NoteList style={{ maxHeight: "200px", overflow: "auto" }} noteIds={clonedNoteIds} />
+            <FormGroup label={t("clone_to.target_parent_note")}>
+                <NoteAutocomplete
+                    placeholder={t("clone_to.search_for_note_by_its_name")}
+                    onChange={setSuggestion}
+                    inputRef={autoCompleteRef}
+                />      
+            </FormGroup>
+            <FormGroup label={t("clone_to.prefix_optional")} title={t("clone_to.cloned_note_prefix_title")}>
+                <FormTextBox name="clone-prefix" onChange={setPrefix} />
+            </FormGroup>
+        </Modal>
+    )
+}
+
+function NoteList({ noteIds, style }: { noteIds?: string[], style: CSSProperties }) {
+    const [ notes, setNotes ] = useState<FNote[]>([]);
+
+    useEffect(() => {
+        if (noteIds) {
+            froca.getNotes(noteIds).then((notes) => setNotes(notes));
+        }
+    }, [noteIds]);
+
+    return (notes &&
+        <ul style={style}>
+            {notes.map(note => (
+                <li key={note.noteId}>
+                    {note.title}
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default class CloneToDialog extends ReactBasicWidget {
+    
+    private props: CloneToDialogProps;
+
+    get component() {
+        return <CloneToDialogComponent {...this.props} />;
+    }
+
+    async cloneNoteIdsToEvent({ noteIds }: EventData<"cloneNoteIdsTo">) {
+        if (!noteIds || noteIds.length === 0) {
+            noteIds = [appContext.tabManager.getActiveContextNoteId() ?? ""];
+        }
+
+        const clonedNoteIds = [];
+
+        for (const noteId of noteIds) {
+            if (!clonedNoteIds.includes(noteId)) {
+                clonedNoteIds.push(noteId);
+            }
+        }
+
+        this.props = { clonedNoteIds };
+        this.doRender();
+        openDialog(this.$widget);
+    }
+
+}
+
+async function cloneNotesTo(notePath: string, clonedNoteIds: string[], prefix?: string) {
+    const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
+    if (!noteId || !parentNoteId) {
+        return;
+    }
+
+    const targetBranchId = await froca.getBranchId(parentNoteId, noteId);
+    if (!targetBranchId || !clonedNoteIds) {
+        return;
+    }
+
+    for (const cloneNoteId of clonedNoteIds) {
+        await branches.cloneNoteToBranch(cloneNoteId, targetBranchId, prefix);
+
+        const clonedNote = await froca.getNote(cloneNoteId);
+        const targetBranch = froca.getBranch(targetBranchId);
+        if (!clonedNote || !targetBranch) {
+            continue;
+        }
+        const targetNote = await targetBranch.getNote();
+        if (!targetNote) {
+            continue;
+        }
+
+        toast.showMessage(t("clone_to.note_cloned", { clonedTitle: clonedNote.title, targetTitle: targetNote.title }));
+    }
+}