From 4e04b2075f610646c3c19299340ec5b3b1bd9cda Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 1 May 2024 12:52:47 +0200
Subject: [PATCH] frontend: use pankow InputDialog from prompts

---
 frontend/src/views/Home.vue | 81 +++++++++++++------------------------
 1 file changed, 29 insertions(+), 52 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 575907fef..cad14015b 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -23,29 +23,7 @@
         </div>
       </Dialog>
 
-      <!-- have to use v-model instead of : bind - https://github.com/primefaces/primevue/issues/815 -->
-      <Dialog v-model:visible="newFileDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('newFileDialogNameInput')">
-        <template #header>
-          <label class="dialog-header" for="newFileDialogNameInput">{{ $t('filemanager.newFileDialog.title') }}</label>
-        </template>
-        <template #default>
-          <form @submit="onNewFileDialogSubmit" @submit.prevent>
-            <InputText class="dialog-single-input" id="newFileDialogNameInput" v-model="newFileDialog.name" :disabled="newFileDialog.busy" required/>
-            <Button class="dialog-single-input-submit" type="submit" :loading="newFileDialog.busy" :disabled="newFileDialog.busy || !newFileDialog.name">{{ $t('filemanager.newFileDialog.create')  }}</Button>
-          </form>
-        </template>
-      </Dialog>
-      <Dialog v-model:visible="newFolderDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('newFolderDialogNameInput')">
-        <template #header>
-          <label class="dialog-header" for="newFolderDialogNameInput">{{ $t('filemanager.newDirectoryDialog.title') }}</label>
-        </template>
-        <template #default>
-          <form @submit="onNewFolderDialogSubmit" @submit.prevent>
-            <InputText class="dialog-single-input" id="newFolderDialogNameInput" v-model="newFolderDialog.name" :disabled="newFolderDialog.busy" required/>
-            <Button class="dialog-single-input-submit" type="submit" :loading="newFolderDialog.busy" :disabled="newFolderDialog.busy || !newFolderDialog.name">{{ $t('filemanager.newFileDialog.create') }}</Button>
-          </form>
-        </template>
-      </Dialog>
+      <InputDialog ref="inputDialog" />
     </template>
     <template #header>
       <TopBar class="navbar">
@@ -128,7 +106,7 @@ import InputText from 'primevue/inputtext';
 
 import { useConfirm } from 'primevue/useconfirm';
 
-import { DirectoryView, TopBar, Breadcrumb, BottomBar, Button, MainLayout, Menu, FileUploader, Spinner } from 'pankow';
+import { DirectoryView, TopBar, Breadcrumb, BottomBar, Button, InputDialog, MainLayout, Menu, FileUploader, Spinner } from 'pankow';
 import Icon from 'pankow/components/Icon.vue';
 import { sanitize, sleep } from 'pankow/utils';
 
@@ -153,6 +131,7 @@ export default {
     Dialog,
     DirectoryView,
     FileUploader,
+    InputDialog,
     InputText,
     MainLayout,
     Menu,
@@ -195,16 +174,6 @@ export default {
           this.cwd = '/';
         }
       },
-      newFileDialog: {
-        visible: false,
-        busy: false,
-        name: ''
-      },
-      newFolderDialog: {
-        visible: false,
-        busy: false,
-        name: ''
-      },
       ownersModel: [],
       // contextMenuModel will have activeItem attached if any command() is called
       createMenuModel: [{
@@ -265,27 +234,35 @@ export default {
     onDialogShow(focusElementId) {
       setTimeout(() => document.getElementById(focusElementId).focus(), 0);
     },
-    onNewFile() {
-      this.newFileDialog.busy = false;
-      this.newFileDialog.name = '';
-      this.newFileDialog.visible = true;
-    },
-    async onNewFileDialogSubmit() {
-      this.newFileDialog.busy = true;
-      await this.directoryModel.newFile(this.directoryModel.buildFilePath(this.cwd, this.newFileDialog.name), this.newFileDialog.name);
+    async onNewFile() {
+      const newFileName = await this.$refs.inputDialog.prompt({
+        message: this.$t('filemanager.newFileDialog.title'),
+        value: '',
+        confirmStyle: 'success',
+        confirmLabel: this.$t('filemanager.newFileDialog.create'),
+        rejectLabel: this.$t('main.dialog.cancel'),
+        modal: false
+      });
+
+      if (!newFileName) return;
+
+      await this.directoryModel.newFile(this.directoryModel.buildFilePath(this.cwd, newFileName), newFileName);
       await this.loadCwd();
-      this.newFileDialog.visible = false;
     },
-    onNewFolder() {
-      this.newFolderDialog.busy = false;
-      this.newFolderDialog.name = '';
-      this.newFolderDialog.visible = true;
-    },
-    async onNewFolderDialogSubmit() {
-      this.newFolderDialog.busy = true;
-      await this.directoryModel.newFolder(this.directoryModel.buildFilePath(this.cwd, this.newFolderDialog.name));
+    async onNewFolder() {
+      const newFolderName = await this.$refs.inputDialog.prompt({
+        message: this.$t('filemanager.newDirectoryDialog.title'),
+        value: '',
+        confirmStyle: 'success',
+        confirmLabel: this.$t('filemanager.newFileDialog.create'),
+        rejectLabel: this.$t('main.dialog.cancel'),
+        modal: false
+      });
+
+      if (!newFolderName) return;
+
+      await this.directoryModel.newFolder(this.directoryModel.buildFilePath(this.cwd, newFolderName));
       await this.loadCwd();
-      this.newFolderDialog.visible = false;
     },
     onUploadFile() {
       this.$refs.fileUploader.onUploadFile(this.cwd);