From 84a9d09aadd38cf2e7e524551a2f2a2154973026 Mon Sep 17 00:00:00 2001
From: Tiger Nie <nhl0819@gmail.com>
Date: Thu, 17 Sep 2020 02:12:19 +0800
Subject: [PATCH] checkbox to toggle 'show hidden files' now functional

---
 frontend/src/i18n/en.json       |  3 ++-
 frontend/src/store/getters.js   |  3 ++-
 frontend/src/store/index.js     |  3 ++-
 frontend/src/store/mutations.js |  3 +++
 frontend/src/views/Files.vue    | 20 +++++++++++++++-----
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 7617caaf..9d3ced0e 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -58,7 +58,8 @@
     "size": "Size",
     "sortByName": "Sort by name",
     "sortBySize": "Sort by size",
-    "sortByLastModified": "Sort by last modified"
+    "sortByLastModified": "Sort by last modified",
+    "showHiddenFiles": "Show hidden files"
   },
   "help": {
     "click": "select file or directory",
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 11ad60ab..c080abcc 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -12,7 +12,8 @@ const getters = {
 
     let sum = state.upload.progress.reduce((acc, val) => acc + val)
     return Math.ceil(sum / state.upload.size * 100);
-  }
+  },
+  getShowHidden: state => state.showHidden
 }
 
 export default getters
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 40b56df4..81c03a12 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -24,7 +24,8 @@ const state = {
   showShell: false,
   showMessage: null,
   showConfirm: null,
-  previewMode: false
+  previewMode: false,
+  showHidden: true
 }
 
 export default new Vuex.Store({
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 46aad6e6..418d7fdc 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -86,6 +86,9 @@ const mutations = {
   },
   setPreviewMode(state, value) {
     state.previewMode = value
+  },
+  setShowHidden: (state, value) => {
+    state.showHidden = value
   }
 }
 
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 31f35f3d..78d61210 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -11,8 +11,10 @@
       </span>
 
       <span style="margin-left:auto;">
-        <input type="checkbox">
-        Show hidden files
+        <input 
+          type="checkbox" 
+          v-model="showHidden">
+        <span>{{ $t('files.showHiddenFiles') }}</span>
       </span>
 
     </div>
@@ -82,7 +84,7 @@ export default {
       'selectedCount',
       'isListing',
       'isEditor',
-      'isFiles'
+      'isFiles',
     ]),
     ...mapState([
       'req',
@@ -127,6 +129,15 @@ export default {
       }
 
       return breadcrumbs
+    },
+    showHidden: {
+      get: function () {
+        return this.$store.getters.getShowHidden
+      },
+      set: function (val) {
+        this.$store.commit('setShowHidden', val)
+        this.fetchData()
+      }
     }
   },
   data: function () {
@@ -178,8 +189,7 @@ export default {
           return
         }
 
-        let showHiddenFiles = false
-        if (res.isDir && !showHiddenFiles) {
+        if (res.isDir && !this.showHidden) {
           res = pruneHiddenFiles(res)
         }