frontend: replace Dialogs with pankow Dialog

frontend/src/views/Home.vue

@@ -1,25 +1,25 @@
 <template>
   <MainLayout>
     <template #dialogs>
-      <Dialog v-model:visible="fatalError" modal header="Error" :closable="false" :closeOnEscape="false">
+      <Dialog ref="fatalErrorDialog" modal title="Error">
         <p>{{ fatalError }}</p>
       </Dialog>
 
-      <Dialog v-model:visible="extractInProgress" modal :header="$t('filemanager.extractionInProgress')" :closable="false" :closeOnEscape="false">
+      <Dialog ref="extractInProgressDialog" modal :title="$t('filemanager.extractionInProgress')">
         <div style="text-align: center;">
-          <Spinner style="width: 50px; height: 50px"/>
+          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
         </div>
       </Dialog>
 
-      <Dialog v-model:visible="pasteInProgress" modal :header="$t('filemanager.pasteInProgress')" :closable="false" :closeOnEscape="false">
+      <Dialog ref="pasteInProgressDialog" modal :title="$t('filemanager.pasteInProgress')">
         <div style="text-align: center;">
-          <Spinner style="width: 50px; height: 50px"/>
+          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
         </div>
       </Dialog>
 
-      <Dialog v-model:visible="deleteInProgress" modal :header="$t('filemanager.deleteInProgress')" :closable="false" :closeOnEscape="false">
+      <Dialog ref="deleteInProgressDialog" modal :title="$t('filemanager.deleteInProgress')">
         <div style="text-align: center;">
-          <Spinner style="width: 50px; height: 50px"/>
+          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
         </div>
       </Dialog>
 
@@ -101,12 +101,11 @@
 import superagent from 'superagent';
 import { marked } from 'marked';
 
-import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
 
 import { useConfirm } from 'primevue/useconfirm';
 
-import { DirectoryView, TopBar, Breadcrumb, BottomBar, Button, InputDialog, MainLayout, Menu, FileUploader, Spinner } from 'pankow';
+import { Dialog, 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';
 
@@ -148,9 +147,6 @@ export default {
       busyRefresh: false,
       busyRestart: false,
       fatalError: false,
-      extractInProgress: false,
-      pasteInProgress: false,
-      deleteInProgress: false,
       footerContent: '',
       activeItem: null,
       activeDirectoryItem: {},
@@ -220,6 +216,10 @@ export default {
     }
   },
   methods: {
+    onFatalError(errorMessage) {
+      this.fatalError = errorMessage;
+      this.$refs.fatalErrorDialog.open();
+    },
     onCreateMenu(event, elem = null) {
       this.$refs.createMenu.open(event, elem);
     },
@@ -328,14 +328,14 @@ export default {
         if (!files.length) return;
 
         window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
-        this.pasteInProgress = true;
+        this.$refs.pasteInProgressDialog.open();
 
         // check ctrl for cut/copy
         await this.directoryModel.paste(fullTargetFolder, 'cut', files);
         await this.loadCwd();
 
         window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
-        this.pasteInProgress = false;
+        this.$refs.pasteInProgressDialog.close();
       }
     },
     onItemActivated(item) {
@@ -362,7 +362,7 @@ export default {
           acceptClass: 'p-button-danger',
           accept: async () => {
             window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
-            this.deleteInProgress = true;
+            this.$refs.deleteInProgressDialog.open();
 
             for (let i in files) {
               try {
@@ -377,7 +377,7 @@ export default {
             this.$confirm.close();
 
             window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
-            this.deleteInProgress = false;
+            this.$refs.deleteInProgressDialog.close();
           }
       });
 
@@ -435,23 +435,23 @@ export default {
       const targetPath = (target && target.isDirectory) ? sanitize(this.cwd + '/' + target.fileName) : this.cwd;
 
       window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
-      this.pasteInProgress = true;
+      this.$refs.pasteInProgressDialog.open();
 
       await this.directoryModel.paste(targetPath, this.clipboard.action, this.clipboard.files);
       this.clipboard = {};
       await this.loadCwd();
 
       window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
-      this.pasteInProgress = false;
+      this.$refs.pasteInProgressDialog.close();
     },
     async downloadHandler(file) {
       await this.directoryModel.download(this.directoryModel.buildFilePath(this.cwd, file.name));
     },
     async extractHandler(file) {
-      this.extractInProgress = true;
+      this.$refs.extractInProgressDialog.open();
       await this.directoryModel.extract(this.directoryModel.buildFilePath(this.cwd, file.name));
       await this.loadCwd();
-      this.extractInProgress = false;
+      this.$refs.extractInProgressDialog.close();
     },
     async uploadHandler(targetDir, file, progressHandler) {
       this.uploadRequest = this.directoryModel.upload(targetDir, file, progressHandler);
@@ -531,8 +531,7 @@ export default {
 
       if (error || result.statusCode !== 200) {
         console.error(`Invalid resource ${type} ${resourceId}`, error || result.statusCode);
-        this.fatalError = `Invalid resource ${type} ${resourceId}`;
-        return;
+        return this.onFatalError(`Invalid resource ${type} ${resourceId}`);
       }
 
       this.appLink = `https://${result.body.fqdn}`;
@@ -547,14 +546,12 @@ export default {
 
       if (error || result.statusCode !== 200) {
         console.error(`Invalid resource ${type} ${resourceId}`, error || result.statusCode);
-        this.fatalError = `Invalid resource ${type} ${resourceId}`;
-        return;
+        return this.onFatalError(`Invalid resource ${type} ${resourceId}`);
       }
 
       this.title = result.body.name;
     } else {
-      this.fatalError = `Unsupported type ${type}`;
-      return;
+      return this.onFatalError(`Unsupported type ${type}`);
     }
 
     try {
@@ -576,10 +573,7 @@ export default {
     this.loadCwd();
 
     this.$watch(() => this.$route.params, (toParams, previousParams) => {
-      if (toParams.type !== 'app' && toParams.type !== 'volume') {
-        this.fatalError = `Unknown type ${toParams.type}`;
-        return;
-      }
+      if (toParams.type !== 'app' && toParams.type !== 'volume') return this.onFatalError(`Unknown type ${toParams.type}`);
 
       if ((toParams.type !== this.resourceType) || (toParams.resourceId !== this.resourceId)) {
         this.resourceType = toParams.type;
@@ -626,22 +620,6 @@ export default {
   flex-grow: 1;
 }
 
-.dialog-header {
-  font-weight: 600;
-  font-size: 1.25rem;
-}
-
-.dialog-single-input {
-  display: block;
-  width: 100%;
-  margin-top: 5px;
-  margin-bottom: 1.5rem;
-}
-
-.dialog-single-input-submit {
-  margin-top: 5px;
-}
-
 </style>
 
 <style>
@@ -650,9 +628,4 @@ export default {
   margin: 0;
 }
 
-/* this is actually calculated and in some situations the z-index would have to be higher but for the moment ok, needs fixing in primvue */
-.p-dropdown-panel.p-component {
-  z-index: 5001 !important;
-}
-
 </style>