feat: add multi select for config files (#790)

Co-authored-by: th33xitus <[email protected]>
mainsail-crew · May 11, 2022 · 595b3f1 · 595b3f1
1 parent fbb78f8
commit 595b3f1
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 16 deletions.
diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
@@ -555,13 +555,13 @@ import {
     mdiFolderPlus,
     mdiFolderUpload,
     mdiMagnify,
-    mdiPencil,
     mdiPlay,
     mdiPlaylistPlus,
     mdiRefresh,
     mdiRenameBox,
     mdiUpload,
     mdiVideo3d,
+    mdiPencil,
 } from '@mdi/js'
 import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue'
 
@@ -1331,11 +1331,19 @@ export default class GcodefilesPanel extends Mixins(BaseMixin) {
 
     deleteSelectedFiles() {
         this.selectedFiles.forEach((item: FileStateGcodefile) => {
-            this.$socket.emit(
-                'server.files.delete_file',
-                { path: 'gcodes' + this.currentPath + '/' + item.filename },
-                { action: 'files/getDeleteFile' }
-            )
+            if (item.isDirectory) {
+                this.$socket.emit(
+                    'server.files.delete_directory',
+                    { path: 'gcodes' + this.currentPath + '/' + item.filename, force: true },
+                    { action: 'files/getDeleteDir' }
+                )
+            } else {
+                this.$socket.emit(
+                    'server.files.delete_file',
+                    { path: 'gcodes' + this.currentPath + '/' + item.filename },
+                    { action: 'files/getDeleteFile' }
+                )
+            }
         })
 
         this.selectedFiles = []

diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -26,6 +26,7 @@
                             v-for="button in filteredToolbarButtons"
                             :key="button.loadingName"
                             class="px-2 minwidth-0 ml-3"
+                            :color="button.color"
                             :loading="button.loadingName !== null && loadings.includes(button.loadingName)"
                             @click="button.click">
                             <v-tooltip top>
@@ -91,6 +92,7 @@
             </v-card-text>
             <v-divider></v-divider>
             <v-data-table
+                v-model="selectedFiles"
                 :items="files"
                 class="files-table"
                 :headers="headers"
@@ -105,7 +107,8 @@
                     itemsPerPageOptions: [10, 25, 50, 100, -1],
                 }"
                 mobile-breakpoint="0"
-                item-key="name">
+                item-key="filename"
+                show-select>
                 <template #no-data>
                     <div class="text-center">{{ $t('Machine.ConfigFilesPanel.Empty') }}</div>
                 </template>
@@ -117,14 +120,17 @@
                         @dragover="dragOverFilelist($event, { isDirectory: true, filename: '..' })"
                         @dragleave="dragLeaveFilelist"
                         @drop.prevent.stop="dragDropFilelist($event, { isDirectory: true, filename: '..' })">
-                        <td class="pr-0 text-center" style="width: 32px">
+                        <td class="file-list__select-td pr-0">
+                            <v-simple-checkbox v-ripple disabled class="pa-0 mr-0"></v-simple-checkbox>
+                        </td>
+                        <td class="px-0 text-center" style="width: 32px">
                             <v-icon>{{ mdiFolderUpload }}</v-icon>
                         </td>
                         <td class=" " colspan="4">..</td>
                     </tr>
                 </template>
 
-                <template #item="{ index, item }">
+                <template #item="{ index, item, isSelected, select }">
                     <tr
                         :key="`${index} ${item.filename}`"
                         v-longpress:600="(e) => showContextMenu(e, item)"
@@ -138,7 +144,14 @@
                         @dragover="dragOverFilelist($event, item)"
                         @dragleave="dragLeaveFilelist"
                         @drop.prevent.stop="dragDropFilelist($event, item)">
-                        <td class="pr-0 text-center" style="width: 32px">
+                        <td class="file-list__select-td pr-0">
+                            <v-simple-checkbox
+                                v-ripple
+                                :value="isSelected"
+                                class="pa-0 mr-0"
+                                @click.stop="select(!isSelected)"></v-simple-checkbox>
+                        </td>
+                        <td class="px-0 text-center" style="width: 32px">
                             <v-icon v-if="item.isDirectory">{{ mdiFolder }}</v-icon>
                             <v-icon v-if="!item.isDirectory">{{ mdiFile }}</v-icon>
                         </td>
@@ -375,6 +388,32 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <v-dialog v-model="deleteSelectedDialog" max-width="400">
+            <panel
+                :title="$t('Machine.ConfigFilesPanel.Delete')"
+                card-class="gcode-files-delete-selected-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="deleteSelectedDialog = false">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+                <v-card-text>
+                    <p class="mb-0">
+                        {{ $t('Machine.ConfigFilesPanel.DeleteSelectedQuestion', { count: selectedFiles.length }) }}
+                    </p>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="" text @click="deleteSelectedDialog = false">
+                        {{ $t('Machine.ConfigFilesPanel.Cancel') }}
+                    </v-btn>
+                    <v-btn color="error" text @click="deleteSelectedFiles">
+                        {{ $t('Machine.ConfigFilesPanel.Delete') }}
+                    </v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
         <v-snackbar v-model="uploadSnackbar.status" :timeout="-1" :value="true" fixed right bottom dark>
             <span v-if="uploadSnackbar.max > 1" class="mr-1">
                 ({{ uploadSnackbar.number }}/{{ uploadSnackbar.max }})
@@ -397,7 +436,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { formatDate, formatFilesize, sortFiles } from '@/plugins/helpers'
-import { FileStateFile } from '@/store/files/types'
+import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
 import axios from 'axios'
 import Panel from '@/components/ui/Panel.vue'
 import { hiddenRootDirectories } from '@/store/variables'
@@ -577,6 +616,8 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
         },
     }
 
+    private deleteSelectedDialog = false
+
     get blockFileUpload() {
         return this.$store.state.gui.view.blockFileUpload ?? false
     }
@@ -587,12 +628,24 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
 
     get toolbarButtons() {
         return [
+            {
+                text: this.$t('Machine.ConfigFilesPanel.Delete'),
+                color: 'error',
+                icon: mdiDelete,
+                loadingName: null,
+                onlyWriteable: true,
+                condition: this.selectedFiles.length > 0,
+                click: () => {
+                    this.deleteSelectedDialog = true
+                },
+            },
             {
                 text: this.$t('Machine.ConfigFilesPanel.UploadFile'),
                 color: 'grey darken-3',
                 icon: mdiFileUpload,
                 loadingName: null,
                 onlyWriteable: true,
+                condition: true,
                 click: this.uploadFileButton,
             },
             {
@@ -601,6 +654,7 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
                 icon: mdiFilePlus,
                 loadingName: null,
                 onlyWriteable: true,
+                condition: true,
                 click: this.createFile,
             },
             {
@@ -609,6 +663,7 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
                 icon: mdiFolderPlus,
                 loadingName: null,
                 onlyWriteable: true,
+                condition: true,
                 click: this.createDirecotry,
             },
             {
@@ -617,9 +672,10 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
                 icon: mdiRefresh,
                 loadingName: null,
                 onlyWriteable: false,
+                condition: true,
                 click: this.refreshFileList,
             },
-        ]
+        ].filter((rule: any) => rule.condition)
     }
 
     get filteredToolbarButtons() {
@@ -664,13 +720,21 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
 
     get headers() {
         return [
-            { text: '', value: '' },
+            { text: '', value: '', sortable: false },
             { text: this.$t('Machine.ConfigFilesPanel.Name'), value: 'filename' },
             { text: this.$t('Machine.ConfigFilesPanel.Filesize'), value: 'size', align: 'right' },
             { text: this.$t('Machine.ConfigFilesPanel.LastModified'), value: 'modified', align: 'right' },
         ]
     }
 
+    get selectedFiles() {
+        return this.$store.state.gui.view.configfiles.selectedFiles ?? []
+    }
+
+    set selectedFiles(newVal) {
+        this.$store.dispatch('gui/saveSettingWithoutUpload', { name: 'view.configfiles.selectedFiles', value: newVal })
+    }
+
     get countPerPage() {
         return this.$store.state.gui.view.configfiles.countPerPage
     }
@@ -932,6 +996,27 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
         )
     }
 
+    deleteSelectedFiles() {
+        this.selectedFiles.forEach((item: FileStateGcodefile) => {
+            if (item.isDirectory) {
+                this.$socket.emit(
+                    'server.files.delete_directory',
+                    { path: this.absolutePath + '/' + item.filename, force: true },
+                    { action: 'files/getDeleteDir' }
+                )
+            } else {
+                this.$socket.emit(
+                    'server.files.delete_file',
+                    { path: this.absolutePath + '/' + item.filename },
+                    { action: 'files/getDeleteFile' }
+                )
+            }
+        })
+
+        this.selectedFiles = []
+        this.deleteSelectedDialog = false
+    }
+
     uploadFileButton() {
         this.$refs.fileUpload.click()
     }

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -353,7 +353,8 @@
             "CurrentPath": "Aktueller Pfad",
             "Delete": "Löschen",
             "DeleteDirectory": "Verzeichnis löschen",
-            "DeleteDirectoryQuestion": "Wills du wirklich das Verzeichnis \"{name}\" mit seinem gesamten Inhalt löschen?",
+            "DeleteDirectoryQuestion": "Verzeichnis \"{name}\" und den gesamten Inhalt löschen?",
+            "DeleteSelectedQuestion": "{count} ausgewählte Elemente löschen?",
             "Download": "Herunterladen",
             "EditFile": "Bearbeite Datei",
             "Empty": "Leer",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -368,7 +368,8 @@
             "CurrentPath": "Current path",
             "Delete": "Delete",
             "DeleteDirectory": "Delete Directory",
-            "DeleteDirectoryQuestion": "Do you really want to delete the \"{name}\" directory with all its contents?",
+            "DeleteDirectoryQuestion": "Delete directory \"{name}\" and all its contents?",
+            "DeleteSelectedQuestion": "Delete {count} selected elements?",
             "Download": "Download",
             "EditFile": "Edit file",
             "Empty": "Empty",

diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
@@ -159,6 +159,7 @@ export const getDefaultState = (): GuiState => {
                 hideBackupFiles: false,
                 currentPath: '',
                 rootPath: 'config',
+                selectedFiles: [],
             },
             gcodefiles: {
                 countPerPage: 10,

diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
@@ -4,7 +4,7 @@ import { GuiPresetsState } from '@/store/gui/presets/types'
 import { GuiRemoteprintersState } from '@/store/gui/remoteprinters/types'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { GuiNotificationState } from '@/store/gui/notifications/types'
-import { FileStateGcodefile } from '@/store/files/types'
+import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
 
 export interface GuiState {
     general: {
@@ -112,6 +112,7 @@ export interface GuiState {
             hideBackupFiles: boolean
             currentPath: string
             rootPath: string
+            selectedFiles: FileStateFile[]
         }
         gcodefiles: {
             countPerPage: number