fix viewer context menu actions (#687)

Author: ciur

frontend/apps/kommon.dev/src/components/NavBar/NavBar.tsx

@@ -8,6 +8,9 @@ export default function Navbar() {
         <NavLink to="/" end>
           &lt;SubmitButton /&gt;
         </NavLink>
+        <NavLink to="/edit-node-modal" end>
+          &lt;EditNodeTitleModal /&gt;
+        </NavLink>
       </Stack>
     </nav>
   )

frontend/apps/kommon.dev/src/index.css

@@ -23,9 +23,6 @@ a:hover {
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

frontend/apps/kommon.dev/src/main.tsx

@@ -4,6 +4,7 @@ import {createRoot} from "react-dom/client"
 import {BrowserRouter, Route, Routes} from "react-router"
 import AppShell from "./app/AppShell"
 import "./index.css"
+import EditNodeTitleModal from "./pages/EditNodeTitle"
 import SubmitButton from "./pages/SubmitButton"
 
 createRoot(document.getElementById("root")!).render(
@@ -13,6 +14,7 @@ createRoot(document.getElementById("root")!).render(
         <Routes>
           <Route path="/" element={<AppShell />}>
             <Route index element={<SubmitButton />} />
+            <Route path="edit-node-modal" element={<EditNodeTitleModal />} />
           </Route>
         </Routes>
       </BrowserRouter>

frontend/apps/kommon.dev/src/pages/EditNodeTitle.tsx

@@ -0,0 +1,26 @@
+import {Button, Checkbox, Group, Stack} from "@mantine/core"
+import {EditNodeTitleModal} from "kommon"
+import {useState} from "react"
+
+export default function EditNodeTitleContainer() {
+  const [inProgress, setInProgress] = useState<boolean>(false)
+  const [opened, setOpened] = useState<boolean>(false)
+
+  return (
+    <Stack>
+      <Group>
+        <Button onClick={() => setOpened(!opened)}>Toggle</Button>
+        <Checkbox
+          label="Is Loading"
+          onClick={() => setInProgress(!inProgress)}
+        />
+      </Group>
+      <EditNodeTitleModal
+        inProgress={inProgress}
+        onCancel={() => setOpened(false)}
+        value={"letter.pdf"}
+        opened={opened}
+      />
+    </Stack>
+  )
+}

frontend/apps/ui/public/localization/de/_default.json

@@ -35,6 +35,29 @@
     "allowedExtentions": "Erlaubte Dateiendungen:",
     "caseSensitivity": "Groß- und Kleinschreibung spielt keine Rolle."
   },
+  "editNodeTitleModal": {
+    "title": "Dokumenttitel bearbeiten",
+    "newTitleLabel": "Neuer Dokumenttitel",
+    "placeholder": "Titel"
+  },
+  "viewerContextMenu": {
+    "changeTitle": "Titel ändern",
+    "ocrText": "OCR-Text",
+    "rotateClockwise": "Im Uhrzeigersinn drehen",
+    "rotateCounterClockwise": "Gegen den Uhrzeigersinn drehen",
+    "resetChanges": "Änderungen zurücksetzen",
+    "saveChanges": "Änderungen speichern",
+    "moveDocument": "Dokument verschieben",
+    "extractPages": "Seiten extrahieren",
+    "deletePages": "Seiten löschen",
+    "deleteDocument": "Dokument löschen",
+    "dangerZone": "Gefahrenzone"
+  },
+  "deleteEntireDocumentConfirmDialog": {
+    "title": "Dokument löschen",
+    "mainMessage": "Möchtest du dieses Dokument wirklich löschen?",
+    "confirmButtonText": "Ja, lösche diese Dokument"
+  },
   "load-more": "Mehr anzeigen",
   "app.version": "Version",
   "me": "Ich",

frontend/apps/ui/public/localization/en/_default.json

@@ -35,6 +35,29 @@
     "allowedExtentions": "Allowed extensions:",
     "caseSensitivity": "Uppercase and lowercase letters don't matter."
   },
+  "editNodeTitleModal": {
+    "title": "Edit Title",
+    "newTitleLabel": "New Title",
+    "placeholder": "Title"
+  },
+  "viewerContextMenu": {
+    "changeTitle": "Change Title",
+    "ocrText": "OCR Text",
+    "rotateClockwise": "Rotate clockwise",
+    "rotateCounterClockwise": "Rotate counter-clockwise",
+    "resetChanges": "Reset changes",
+    "saveChanges": "Save changes",
+    "moveDocument": "Move Document",
+    "extractPages": "Extract Pages",
+    "deletePages": "Delete pages",
+    "deleteDocument": "Delete document",
+    "dangerZone": "Danger Zone"
+  },
+  "deleteEntireDocumentConfirmDialog": {
+    "title": "Document Delete",
+    "mainMessage": "Do you really want to delete this document?",
+    "confirmButtonText": "Yes, delete this document"
+  },
   "load-more": "Load more",
   "app.version": "Version",
   "me": "Me",

frontend/apps/ui/src/components/EditNodeTitleModal/EditNodeTitleModal.tsx

@@ -0,0 +1,94 @@
+import {useRenameFolderMutation} from "@/features/nodes/apiSlice"
+import type {EditEntityTitle} from "@/types"
+import type {I18NEditNodeTitleModal} from "kommon"
+import {EditNodeTitleModal} from "kommon"
+import {ChangeEvent, useEffect, useState} from "react"
+
+import {useTranslation} from "react-i18next"
+import {useEnterSubmit} from "./useEnterSubmit"
+
+interface Args {
+  node: EditEntityTitle
+  opened: boolean
+  onSubmit: () => void
+  onCancel: () => void
+}
+
+export const EditNodeTitleModalContainer = ({
+  node,
+  onSubmit,
+  onCancel,
+  opened
+}: Args) => {
+  const txt = useI18nText()
+  const [renameFolder, {isLoading}] = useRenameFolderMutation()
+  const [title, setTitle] = useState(node.title)
+  const [error, setError] = useState("")
+
+  const handleTitleChanged = (event: ChangeEvent<HTMLInputElement>) => {
+    let value = event.currentTarget.value
+    setTitle(value)
+  }
+
+  const onLocalSubmit = async () => {
+    const data = {
+      title: title,
+      id: node.id
+    }
+
+    try {
+      await renameFolder(data)
+      onSubmit()
+      reset() // sets error message back to empty string
+    } catch (error: any) {
+      setError(error?.data?.detail ?? "Something went wrong")
+    }
+  }
+
+  useEnterSubmit(onLocalSubmit)
+
+  const onLocalCancel = () => {
+    onCancel()
+    reset()
+  }
+
+  const reset = () => {
+    setError("")
+  }
+
+  return (
+    <EditNodeTitleModal
+      inProgress={isLoading}
+      onCancel={onLocalCancel}
+      onSubmit={onLocalSubmit}
+      onTitleChange={handleTitleChanged}
+      value={title}
+      error={error}
+      opened={opened}
+      txt={txt}
+    />
+  )
+}
+
+function useI18nText(): I18NEditNodeTitleModal | undefined {
+  const {t, i18n} = useTranslation()
+  const [txt, setTxt] = useState<I18NEditNodeTitleModal>()
+
+  useEffect(() => {
+    if (i18n.isInitialized) {
+      setTxt({
+        editTitle: t("editNodeTitleModal.title"),
+        newTitleLabel: t("editNodeTitleModal.newTitleLabel"),
+        placeholder: t("editNodeTitleModal.placeholder"),
+        cancel: t("common.cancel"),
+        submit: t("common.submit")
+      })
+    } else {
+      setTxt(undefined)
+    }
+  }, [i18n.isInitialized, t])
+
+  return txt
+}
+
+export default EditNodeTitleModalContainer

frontend/apps/ui/src/components/EditNodeTitleModal/index.tsx

@@ -0,0 +1,3 @@
+import EditNodeTitelModal from "./EditNodeTitleModal"
+
+export default EditNodeTitelModal

frontend/apps/ui/src/components/EditNodeTitleModal/useEnterSubmit.ts

@@ -0,0 +1,16 @@
+import {useEffect} from "react"
+
+export function useEnterSubmit(callback: () => Promise<void> | void) {
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.code === "Enter") {
+        callback()
+      }
+    }
+
+    document.addEventListener("keydown", handleKeydown)
+    return () => {
+      document.removeEventListener("keydown", handleKeydown)
+    }
+  }, [callback])
+}