refactor: move file uploads dialog to root

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/App.vue

@@ -79,6 +79,7 @@
       />
 
       <file-system-download-dialog />
+      <file-system-upload-dialog />
       <updating-dialog />
       <spool-selection-dialog />
       <action-command-prompt-dialog />
@@ -106,13 +107,14 @@ import FilesMixin from '@/mixins/files'
 import BrowserMixin from '@/mixins/browser'
 import type { LinkPropertyHref, MetaPropertyName } from 'vue-meta'
 import FileSystemDownloadDialog from '@/components/widgets/filesystem/FileSystemDownloadDialog.vue'
+import FileSystemUploadDialog from '@/components/widgets/filesystem/FileSystemUploadDialog.vue'
 import SpoolSelectionDialog from '@/components/widgets/spoolman/SpoolSelectionDialog.vue'
 import type { FlashMessage } from '@/types'
-import { getFilesFromDataTransfer, hasFilesInDataTransfer } from './util/file-system-entry'
+import { getFilesFromDataTransfer, hasFilesInDataTransfer } from '@/util/file-system-entry'
 import type { ThemeConfig } from '@/store/config/types'
-import ActionCommandPromptDialog from './components/common/ActionCommandPromptDialog.vue'
-import KeyboardShortcutsDialog from './components/common/KeyboardShortcutsDialog.vue'
-import { eventTargetIsContentEditable, keyboardEventToKeyboardShortcut } from './util/event-helpers'
+import ActionCommandPromptDialog from '@/components/common/ActionCommandPromptDialog.vue'
+import KeyboardShortcutsDialog from '@/components/common/KeyboardShortcutsDialog.vue'
+import { eventTargetIsContentEditable, keyboardEventToKeyboardShortcut } from '@/util/event-helpers'
 
 @Component<App>({
   metaInfo () {
@@ -125,6 +127,7 @@ import { eventTargetIsContentEditable, keyboardEventToKeyboardShortcut } from '.
   components: {
     SpoolSelectionDialog,
     FileSystemDownloadDialog,
+    FileSystemUploadDialog,
     ActionCommandPromptDialog,
     KeyboardShortcutsDialog
   }

src/components/ui/AppDialog.vue

@@ -2,6 +2,7 @@
   <v-dialog
     v-model="open"
     :scrollable="scrollable"
+    :persistent="persistent"
     v-bind="$attrs"
     :fullscreen="isMobileViewport"
     :transition="isMobileViewport ? 'dialog-bottom-transition' : undefined"
@@ -52,6 +53,7 @@
             </v-col>
 
             <v-col
+              v-if="!persistent"
               cols="auto"
               align-self="center"
             >
@@ -157,6 +159,9 @@ export default class AppDialog extends Mixins(BrowserMixin) {
   @Prop({ type: Boolean, default: true })
   readonly scrollable?: boolean
 
+  @Prop({ type: Boolean })
+  readonly persistent?: boolean
+
   @Prop({ type: Boolean })
   readonly noActions?: boolean
 

src/components/widgets/filesystem/FileSystem.vue

@@ -109,13 +109,6 @@
       absolute
     />
 
-    <file-system-upload-dialog
-      v-if="currentUploads.length > 0"
-      :value="currentUploads.length > 0"
-      :files="currentUploads"
-      @cancel="handleCancelUpload"
-    />
-
     <file-preview-dialog
       v-if="filePreviewState.open"
       v-model="filePreviewState.open"
@@ -143,7 +136,7 @@
 <script lang="ts">
 import { Component, Prop, Mixins, Watch } from 'vue-property-decorator'
 import { SocketActions } from '@/api/socketActions'
-import type { AppDirectory, AppFile, AppFileWithMeta, FileUpload, FileFilterType, FileBrowserEntry, RootProperties } from '@/store/files/types'
+import type { AppDirectory, AppFile, AppFileWithMeta, FileFilterType, FileBrowserEntry, RootProperties } from '@/store/files/types'
 import StateMixin from '@/mixins/state'
 import FilesMixin from '@/mixins/files'
 import ServicesMixin from '@/mixins/services'
@@ -153,7 +146,6 @@ import FileSystemBrowser from './FileSystemBrowser.vue'
 import FileSystemContextMenu from './FileSystemContextMenu.vue'
 import FileEditorDialog from './FileEditorDialog.vue'
 import FileNameDialog from './FileNameDialog.vue'
-import FileSystemUploadDialog from './FileSystemUploadDialog.vue'
 import FileSystemGoToFileDialog from './FileSystemGoToFileDialog.vue'
 import FilePreviewDialog from './FilePreviewDialog.vue'
 import type { AppDataTableHeader, FileWithPath } from '@/types'
@@ -176,7 +168,6 @@ import type { DataTableHeader } from 'vuetify'
     FileSystemContextMenu,
     FileEditorDialog,
     FileNameDialog,
-    FileSystemUploadDialog,
     FileSystemGoToFileDialog,
     FilePreviewDialog
   }
@@ -557,11 +548,6 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
     return this.hasWaitsBy(`${this.$waits.onFileSystem}/${this.currentRoot}/`)
   }
 
-  // Get a list of currently active uploads.
-  get currentUploads (): FileUpload[] {
-    return this.$store.state.files.uploads
-  }
-
   get fileDropRoot () {
     return this.$route.meta?.fileDropRoot
   }
@@ -1006,23 +992,6 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
     this.$store.dispatch('wait/removeWait', wait)
   }
 
-  handleCancelUpload (file: FileUpload) {
-    if (!file.complete) {
-      // Hasn't started uploading...
-      if (file.loaded === 0) {
-        this.$store.dispatch('files/updateFileUpload', {
-          uid: file.uid,
-          cancelled: true
-        })
-      }
-
-      // Started uploading, but not complete.
-      if (file.loaded > 0 && file.loaded < file.size) {
-        file.abortController.abort()
-      }
-    }
-  }
-
   handleAddDir (name: string) {
     SocketActions.serverFilesPostDirectory(`${this.currentPath}/${name}`)
   }

src/components/widgets/filesystem/FileSystemUploadDialog.vue

@@ -1,15 +1,14 @@
 <template>
   <app-dialog
-    v-model="value"
-    :title="$tc('app.file_system.title.upload_file', files.length)"
+    :value="uploads.length > 0"
+    :title="$tc('app.file_system.title.upload_file', uploads.length)"
     max-width="500"
     persistent
     no-actions
   >
     <v-card-text>
-      <template v-for="(file, i) in files">
+      <template v-for="(file, i) in uploads">
         <v-row
-          v-if="(file.percent !== 100 || !file.complete) && !file.cancelled"
           :key="file.filepath"
           class="py-2"
         >
@@ -52,18 +51,15 @@
               color="error"
               icon
               :disabled="file.complete || file.percent === 100 || file.cancelled"
-              @click="$emit('cancel', file)"
+              @click="handleCancelUpload(file)"
             >
               <v-icon>$close</v-icon>
             </app-btn>
           </v-col>
         </v-row>
 
         <v-divider
-          v-if="
-            (file.percent !== 100 || !file.complete) &&
-              i < files.length - 1
-          "
+          v-if="i < uploads.length - 1"
           :key="`divider-${file.filepath}`"
         />
       </template>
@@ -72,17 +68,35 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Mixins } from 'vue-property-decorator'
+import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import type { FileUpload } from '@/store/files/types'
 
 @Component({})
 export default class FileSystemUploadDialog extends Mixins(StateMixin) {
-  @Prop({ type: Boolean })
-  readonly value?: boolean
+  get uploads (): FileUpload[] {
+    const uploads: FileUpload[] = this.$store.state.files.uploads
 
-  @Prop({ type: Array<FileUpload>, required: true })
-  readonly files!: FileUpload[]
+    return uploads
+      .filter(file => !file.cancelled && (file.percent !== 100 || !file.complete))
+  }
+
+  handleCancelUpload (file: FileUpload) {
+    if (!file.complete) {
+      // Hasn't started uploading...
+      if (file.loaded === 0) {
+        this.$store.dispatch('files/updateFileUpload', {
+          uid: file.uid,
+          cancelled: true
+        })
+      }
+
+      // Started uploading, but not complete.
+      if (file.loaded > 0 && file.loaded < file.size) {
+        file.abortController.abort()
+      }
+    }
+  }
 }
 </script>