From ebaab6324daa37da7c28f399b67048febbb7bb4d Mon Sep 17 00:00:00 2001
From: meteyou <meteyou@gmail.com>
Date: Fri, 20 Nov 2020 20:28:21 +0100
Subject: [PATCH] feature: save countPerPage from gcode files & config files in
 gui.json

Signed-off-by: meteyou <meteyou@gmail.com>
---
 .../panels/Settings/ConfigFilesPanel.vue      | 56 ++++++++++++++++---
 src/pages/Files.vue                           | 51 ++++++++++-------
 src/store/files/actions.js                    |  3 +-
 src/store/gui/mutations.js                    |  1 -
 4 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/src/components/panels/Settings/ConfigFilesPanel.vue b/src/components/panels/Settings/ConfigFilesPanel.vue
index 5f818664..daf56270 100644
--- a/src/components/panels/Settings/ConfigFilesPanel.vue
+++ b/src/components/panels/Settings/ConfigFilesPanel.vue
@@ -30,9 +30,13 @@
             <v-card-title>
                 Config Files
                 <v-spacer></v-spacer>
-                <v-btn color=" ml-4" v-if="currentPath !== '' && currentPath !== '/config_examples'" @click="createFile"><v-icon>mdi-file-plus</v-icon></v-btn>
-                <v-btn color=" ml-4" v-if="currentPath !== '' && currentPath !== '/config_examples'" @click="createFolder"><v-icon>mdi-folder-plus</v-icon></v-btn>
-                <v-btn color="primary ml-4" @click="refreshFileList"><v-icon>mdi-refresh</v-icon></v-btn>
+                <input type="file" ref="fileUpload" style="display: none" @change="uploadFile" />
+                <v-item-group class="v-btn-toggle">
+                    <v-btn color="" v-if="currentPath !== '' && currentPath !== '/config_examples'" @click="uploadFileButton" :loading="loadings.includes['configFileUpload']"><v-icon>mdi-file-upload</v-icon></v-btn>
+                    <v-btn color="" v-if="currentPath !== '' && currentPath !== '/config_examples'" @click="createFile"><v-icon>mdi-file-plus</v-icon></v-btn>
+                    <v-btn color="" v-if="currentPath !== '' && currentPath !== '/config_examples'" @click="createFolder"><v-icon>mdi-folder-plus</v-icon></v-btn>
+                    <v-btn color="primary" @click="refreshFileList"><v-icon>mdi-refresh</v-icon></v-btn>
+                </v-item-group>
             </v-card-title>
             <v-card-subtitle>Current path: {{ this.currentPath === "" ? "/" : this.currentPath }}</v-card-subtitle>
             <v-data-table
@@ -44,14 +48,14 @@
                 :custom-sort="sortFiles"
                 :sort-by.sync="sortBy"
                 :sort-desc.sync="sortDesc"
-                :items-per-page="countPerPage"
+                :items-per-page.sync="countPerPage"
                 item-key="name">
 
                 <template #no-data>
                     <div class="text-center">empty</div>
                 </template>
 
-                <template v-slot:top v-if="(currentPath !== '')">
+                <template slot="body.prepend" v-if="(currentPath !== '')">
                    <tr
                         class="file-list-cursor"
                         @click="clickRowGoBack">
@@ -230,10 +234,18 @@
         computed: {
             ...mapState({
                 filetree: state => state.files.filetree,
-                countPerPage: state => state.gui.settings.configfiles.countPerPage,
                 hostname: state => state.socket.hostname,
                 port: state => state.socket.port,
-            })
+                loadings: state => state.socket.loadings,
+            }),
+            countPerPage: {
+                get: function() {
+                    return this.$store.state.gui.settings.configfiles.countPerPage
+                },
+                set: function(newVal) {
+                    return this.$store.dispatch("gui/setSettings", { settings: { configfiles: { countPerPage: newVal } } });
+                }
+            },
         },
         created() {
             this.loadPath();
@@ -427,6 +439,34 @@
             deleteDirectoryAction: function() {
                 this.$socket.sendObj('server.files.delete_directory', { path: this.currentPath+"/"+this.contextMenu.item.filename }, 'files/getDeleteDir');
             },
+            uploadFileButton: function() {
+                this.$refs.fileUpload.click()
+            },
+            uploadFile: function() {
+                if (this.$refs.fileUpload.files.length) {
+                    this.doUploadFile(this.$refs.fileUpload.files[0]).finally(() => {
+                        this.$refs.fileUpload.value = ''
+                    })
+                }
+            },
+            doUploadFile: function(file) {
+                let toast = this.$toast;
+                let formData = new FormData();
+                let filename = file.name.replace(" ", "_");
+                formData.append('root', 'config');
+                formData.append('file', file, (this.currentPath+"/"+filename).substring(7));
+                this.$store.commit('socket/addLoading', { name: 'configFileUpload' });
+
+                return axios.post('//' + this.hostname + ':' + this.port + '/server/files/upload',
+                    formData, { headers: { 'Content-Type': 'multipart/form-data' } }
+                ).then((result) => {
+                    this.$store.commit('socket/removeLoading', { name: 'configFileUpload' });
+                    toast.success("Upload of "+result.data.result+" successful!");
+                }).catch(() => {
+                    this.$store.commit('socket/removeLoading', { name: 'configFileUpload' });
+                    toast.error("Cannot upload the file!");
+                });
+            },
         },
         watch: {
             config: {
@@ -445,7 +485,7 @@
                 handler() {
                     this.loadPath();
                 }
-            },
+            }
         }
     }
 </script>
diff --git a/src/pages/Files.vue b/src/pages/Files.vue
index 21787233..731a140d 100644
--- a/src/pages/Files.vue
+++ b/src/pages/Files.vue
@@ -53,24 +53,26 @@
             <v-card-title>
                 G-Code Files
                 <v-spacer></v-spacer>
-                <v-btn @click="createDirectory"><v-icon class="mr-1">mdi-folder-plus</v-icon> new Directory</v-btn>
-                <v-btn color="primary ml-4" @click="refreshFileList"><v-icon class="mr-1">mdi-refresh</v-icon> Refresh</v-btn>
                 <input type="file" ref="fileUpload" style="display: none" @change="uploadFile" />
-                <v-btn class="primary ml-4 " :loading="loadings.includes('gcodeUpload')" @click="clickUploadButton"><v-icon>mdi-upload</v-icon>Upload</v-btn>
-                <v-menu :offset-y="true">
-                    <template v-slot:activator="{ on, attrs }">
-                        <v-btn class="ml-4" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
-                    </template>
-                    <v-list>
-                        <v-list-item class="minHeight36">
-                            <v-checkbox class="mt-0" hide-details v-model="showHiddenFiles" label="Hidden files"></v-checkbox>
-                        </v-list-item>
-                        <v-divider></v-divider>
-                        <v-list-item class="minHeight36" v-for="header of configHeaders" v-bind:key="header.key">
-                            <v-checkbox class="mt-0" hide-details v-model="header.visible" @change="changeMetadataVisible(header.value)" :label="header.text"></v-checkbox>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
+                <v-item-group class="v-btn-toggle" name="controllers">
+                    <v-btn @click="clickUploadButton" title="Upload new Gcode" class="primary" :loading="loadings.includes('gcodeUpload')"><v-icon>mdi-upload</v-icon></v-btn>
+                    <v-btn @click="createDirectory" title="Create new Directory"><v-icon>mdi-folder-plus</v-icon></v-btn>
+                    <v-btn @click="refreshFileList" title="Refresh current Directory"><v-icon>mdi-refresh</v-icon></v-btn>
+                    <v-menu :offset-y="true" title="Setup current list">
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-btn class="" v-bind="attrs" v-on="on"><v-icon>mdi-cog</v-icon></v-btn>
+                        </template>
+                        <v-list>
+                            <v-list-item class="minHeight36">
+                                <v-checkbox class="mt-0" hide-details v-model="showHiddenFiles" label="Hidden files"></v-checkbox>
+                            </v-list-item>
+                            <v-divider></v-divider>
+                            <v-list-item class="minHeight36" v-for="header of configHeaders" v-bind:key="header.key">
+                                <v-checkbox class="mt-0" hide-details v-model="header.visible" @change="changeMetadataVisible(header.value)" :label="header.text"></v-checkbox>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-item-group>
             </v-card-title>
             <v-card-subtitle>Current path: {{ this.currentPath !== 'gcodes' ? "/"+this.currentPath.substring(7) : "/" }}</v-card-subtitle>
             <v-card-text>
@@ -90,7 +92,7 @@
                 :custom-sort="sortFiles"
                 :sort-by.sync="sortBy"
                 :sort-desc.sync="sortDesc"
-                :items-per-page="countPerPage"
+                :items-per-page.sync="countPerPage"
                 item-key="name"
                 :search="search"
                 :custom-filter="advancedSearch"
@@ -298,7 +300,6 @@
         computed: {
             ...mapState({
                 filetree: state => state.files.filetree,
-                countPerPage: state => state.gui.gcodefiles.countPerPage,
                 hostname: state => state.socket.hostname,
                 port: state => state.socket.port,
                 loadings: state => state.socket.loadings,
@@ -319,9 +320,17 @@
                     return this.$store.state.gui.gcodefiles.showHiddenFiles;
                 },
                 set: function(newVal) {
-                    return this.$store.dispatch("gui/setGcodefilesShowHiddenFiles", newVal);
+                    return this.$store.dispatch("gui/setSettings", { gcodefiles: { showHiddenFiles: newVal } });
                 }
-            }
+            },
+            countPerPage: {
+                get: function() {
+                    return this.$store.state.gui.gcodefiles.countPerPage
+                },
+                set: function(newVal) {
+                    return this.$store.dispatch("gui/setSettings", { gcodefiles: { countPerPage: newVal } });
+                }
+            },
         },
         created() {
             this.loadPath()
diff --git a/src/store/files/actions.js b/src/store/files/actions.js
index 595a6302..041960f5 100644
--- a/src/store/files/actions.js
+++ b/src/store/files/actions.js
@@ -12,7 +12,8 @@ export default {
 	getMetadata({ commit, rootState }, payload) {
 		if (payload !== undefined && payload.filename !== "") {
 			if (payload.filename === rootState.printer.print_stats.filename) {
-				this.commit('getMetadataCurrentFile', payload);
+				commit('printer/clearCurrentFile', null, { root: true });
+				commit('printer/setData', { current_file: payload }, { root: true });
 			}
 
 			commit('setMetadata', payload);
diff --git a/src/store/gui/mutations.js b/src/store/gui/mutations.js
index 21d590cc..18d20945 100644
--- a/src/store/gui/mutations.js
+++ b/src/store/gui/mutations.js
@@ -33,7 +33,6 @@ export default {
 		Vue.set(state.gcodefiles.showMetadata, data.name, data.value)
 	},
 
-
 	setGcodefilesShowHiddenFiles(state, value) {
 		Vue.set(state.gcodefiles, "showHiddenFiles", value)
 	},