file rename dialog

Author: sujoykd

src/main/frontend/components/RenameFileDialog.tsx

@@ -0,0 +1,49 @@
+import {Button, Dialog, TextField} from "@vaadin/react-components";
+import {Signal, useSignal} from "@vaadin/hilla-react-signals";
+import FileItem from "Frontend/generated/pro/homedns/filebrowser/model/FileItem";
+
+export let renameFileDialogOpenSignal: Signal<boolean>;
+export let itemToRename: Signal<FileItem | null>;
+
+export default function RenameFileDialog() {
+    renameFileDialogOpenSignal = useSignal<boolean>(false);
+    itemToRename = useSignal<FileItem | null>(null);
+
+    return <Dialog
+        header={(
+            <div className="flex flex-col gap-xs">
+                <span className="text-secondary text-s">{itemToRename.value?.displayName}</span>
+                <span className="text-body text-m">Rename</span>
+            </div>
+        )}
+        opened={renameFileDialogOpenSignal.value}
+        onClosed={() => {
+            renameFileDialogOpenSignal.value = false;
+        }}
+        footer={
+            <>
+                <div className="flex flex-row w-full justify-between">
+                    <Button
+                        onClick={() => {
+                            renameFileDialogOpenSignal.value = false;
+                        }}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        theme="primary"
+                        onClick={() => {
+                            renameFileDialogOpenSignal.value = false;
+                        }}
+                    >
+                        Rename
+                    </Button>
+                </div>
+            </>
+        }
+    >
+        <div className="flex flex-col items-stretch max-w-full" style={{width: '18rem'}}>
+            <TextField label="New name" value={itemToRename.value?.displayName}/>
+        </div>
+    </Dialog>
+}

src/main/frontend/views/browser/{...path}.tsx

@@ -13,6 +13,7 @@ import renameImage from "@images/icons8-rename-50.png?url";
 import {useNavigate, useParams} from "react-router";
 import BreadCrumbs from "Frontend/components/BreadCrumbs";
 import {formatDate} from "Frontend/util/dateFormat";
+import RenameFileDialog, {itemToRename, renameFileDialogOpenSignal} from "Frontend/components/RenameFileDialog";
 
 
 export const config: ViewConfig = {
@@ -36,8 +37,14 @@ export default function FileBrowserView() {
         navigate("/browser/" + item.path);
     };
 
+    const onRenameFileClick = (item: FileItem) => {
+        renameFileDialogOpenSignal.value = true;
+        itemToRename.value = item;
+    };
+
     return <>
         <BreadCrumbs path={wildcardPath}/>
+        <RenameFileDialog/>
 
         <Grid items={fileItems.value}>
             <GridSortColumn resizable path="displayName" header="Name" renderer={
@@ -72,7 +79,7 @@ export default function FileBrowserView() {
                                 <img src={downloadImage} width="32"/>
                             </Button>
                         </a>
-                        <Button theme="icon tertiary">
+                        <Button theme="icon tertiary" onClick={() => onRenameFileClick(item)}>
                             <img src={renameImage} width="32"/>
                         </Button>
                     </>