From 7b6579ac8a5388662bbc7a49aef5a828f816683f Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Mon, 1 Mar 2021 16:12:17 +0000
Subject: [PATCH] chore: files view dynamic component

---
 frontend/src/store/getters.js        |   2 -
 frontend/src/store/index.js          |   3 +-
 frontend/src/store/mutations.js      |   3 -
 frontend/src/views/Files.vue         |  29 ++---
 frontend/src/views/files/Editor.vue  |   2 +
 frontend/src/views/files/Listing.vue | 161 ++++++++++++++-------------
 frontend/src/views/files/Preview.vue |  13 +--
 7 files changed, 107 insertions(+), 106 deletions(-)

diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 70c9cd0e..72e6db8d 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -2,8 +2,6 @@ const getters = {
   isLogged: state => state.user !== null,
   isFiles: state => !state.loading && state.route.name === 'Files',
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
-  isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
-  isPreview: state => state.previewMode,
   isSharing: state =>  !state.loading && state.route.name === 'Share',
   selectedCount: state => state.selected.length,
   progress : state => {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 8914b1c0..118b84ee 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -24,9 +24,8 @@ const state = {
   showShell: false,
   showMessage: null,
   showConfirm: null,
-  previewMode: false,
   hash: '',
-  token: '',
+  token: ''
 }
 
 export default new Vuex.Store({
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index e398c6b0..963c3780 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -85,9 +85,6 @@ const mutations = {
     state.clipboard.key = ''
     state.clipboard.items = []
   },
-  setPreviewMode(state, value) {
-    state.previewMode = value
-  },
   setHash: (state, value) => (state.hash = value),
 }
 
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 86f856bd..934d9cc7 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <header-bar showMenu showLogo />
+    <header-bar v-if="error || !req.type" showMenu showLogo />
 
-    <div id="breadcrumbs" v-if="isListing || error">
+    <div id="breadcrumbs">
       <router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
         <i class="material-icons">home</i>
       </router-link>
@@ -14,9 +14,7 @@
     </div>
 
     <errors v-if="error" :errorCode="errorCode" />
-    <preview v-else-if="isPreview"></preview>
-    <editor v-else-if="isEditor"></editor>
-    <listing v-else-if="isListing"></listing>
+    <component v-else-if="currentView" :is="currentView"></component>
     <div v-else>
       <h2 class="message">
         <span>{{ $t('files.loading') }}</span>
@@ -27,7 +25,7 @@
 
 <script>
 import { files as api } from '@/api'
-import { mapGetters, mapState, mapMutations } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 
 import HeaderBar from '@/components/header/HeaderBar'
 import Errors from '@/views/Errors'
@@ -54,19 +52,24 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'isListing',
-      'isEditor',
-      'isFiles'
-    ]),
     ...mapState([
       'req',
       'reload',
       'loading',
       'show'
     ]),
-    isPreview () {
-      return !this.loading && !this.isListing && !this.isEditor || this.loading && this.$store.state.previewMode
+    currentView () {
+      if (this.req.type == undefined) {
+        return null
+      }
+
+      if (this.req.isDir) {
+        return 'listing'
+      } else if(this.req.type === 'text' || this.req.type === 'textImmutable') {
+        return 'editor'
+      } else {
+        return 'preview'
+      }
     },
     breadcrumbs () {
       let parts = this.$route.path.split('/')
diff --git a/frontend/src/views/files/Editor.vue b/frontend/src/views/files/Editor.vue
index fa22ede3..716f0436 100644
--- a/frontend/src/views/files/Editor.vue
+++ b/frontend/src/views/files/Editor.vue
@@ -130,6 +130,8 @@ export default {
       }
     },
     close () {
+      this.$store.commit('updateRequest', {})
+
       let uri = url.removeLastDir(this.$route.path) + '/'
       this.$router.push({ path: uri })
     }
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index 9c5a6325..cf370dec 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -31,90 +31,97 @@
       <action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" />
     </div>
 
-    <div v-if="(req.numDirs + req.numFiles) == 0">
+    <div v-if="$store.state.loading">
       <h2 class="message">
-        <i class="material-icons">sentiment_dissatisfied</i>
-        <span>{{ $t('files.lonely') }}</span>
+        <span>{{ $t('files.loading') }}</span>
       </h2>
-      <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-      <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
     </div>
-    <div v-else id="listing"
-      :class="user.viewMode">
-      <div>
-        <div class="item header">
-          <div></div>
-          <div>
-            <p :class="{ active: nameSorted }" class="name"
-              role="button"
-              tabindex="0"
-              @click="sort('name')"
-              :title="$t('files.sortByName')"
-              :aria-label="$t('files.sortByName')">
-              <span>{{ $t('files.name') }}</span>
-              <i class="material-icons">{{ nameIcon }}</i>
-            </p>
+    <template v-else>
+      <div v-if="(req.numDirs + req.numFiles) == 0">
+        <h2 class="message">
+          <i class="material-icons">sentiment_dissatisfied</i>
+          <span>{{ $t('files.lonely') }}</span>
+        </h2>
+        <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
+        <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
+      </div>
+      <div v-else id="listing"
+        :class="user.viewMode">
+        <div>
+          <div class="item header">
+            <div></div>
+            <div>
+              <p :class="{ active: nameSorted }" class="name"
+                role="button"
+                tabindex="0"
+                @click="sort('name')"
+                :title="$t('files.sortByName')"
+                :aria-label="$t('files.sortByName')">
+                <span>{{ $t('files.name') }}</span>
+                <i class="material-icons">{{ nameIcon }}</i>
+              </p>
 
-            <p :class="{ active: sizeSorted }" class="size"
-              role="button"
-              tabindex="0"
-              @click="sort('size')"
-              :title="$t('files.sortBySize')"
-              :aria-label="$t('files.sortBySize')">
-              <span>{{ $t('files.size') }}</span>
-              <i class="material-icons">{{ sizeIcon }}</i>
-            </p>
-            <p :class="{ active: modifiedSorted }" class="modified"
-              role="button"
-              tabindex="0"
-              @click="sort('modified')"
-              :title="$t('files.sortByLastModified')"
-              :aria-label="$t('files.sortByLastModified')">
-              <span>{{ $t('files.lastModified') }}</span>
-              <i class="material-icons">{{ modifiedIcon }}</i>
-            </p>
+              <p :class="{ active: sizeSorted }" class="size"
+                role="button"
+                tabindex="0"
+                @click="sort('size')"
+                :title="$t('files.sortBySize')"
+                :aria-label="$t('files.sortBySize')">
+                <span>{{ $t('files.size') }}</span>
+                <i class="material-icons">{{ sizeIcon }}</i>
+              </p>
+              <p :class="{ active: modifiedSorted }" class="modified"
+                role="button"
+                tabindex="0"
+                @click="sort('modified')"
+                :title="$t('files.sortByLastModified')"
+                :aria-label="$t('files.sortByLastModified')">
+                <span>{{ $t('files.lastModified') }}</span>
+                <i class="material-icons">{{ modifiedIcon }}</i>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
+        <div v-if="req.numDirs > 0">
+          <item v-for="(item) in dirs"
+            :key="base64(item.name)"
+            v-bind:index="item.index"
+            v-bind:name="item.name"
+            v-bind:isDir="item.isDir"
+            v-bind:url="item.url"
+            v-bind:modified="item.modified"
+            v-bind:type="item.type"
+            v-bind:size="item.size">
+          </item>
+        </div>
+
+        <h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
+        <div v-if="req.numFiles > 0">
+          <item v-for="(item) in files"
+            :key="base64(item.name)"
+            v-bind:index="item.index"
+            v-bind:name="item.name"
+            v-bind:isDir="item.isDir"
+            v-bind:url="item.url"
+            v-bind:modified="item.modified"
+            v-bind:type="item.type"
+            v-bind:size="item.size">
+          </item>
+        </div>
+
+        <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
+        <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
+
+        <div :class="{ active: $store.state.multiple }" id="multiple-selection">
+        <p>{{ $t('files.multipleSelectionEnabled') }}</p>
+          <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
+            <i class="material-icons">clear</i>
           </div>
         </div>
       </div>
-
-      <h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
-      <div v-if="req.numDirs > 0">
-        <item v-for="(item) in dirs"
-          :key="base64(item.name)"
-          v-bind:index="item.index"
-          v-bind:name="item.name"
-          v-bind:isDir="item.isDir"
-          v-bind:url="item.url"
-          v-bind:modified="item.modified"
-          v-bind:type="item.type"
-          v-bind:size="item.size">
-        </item>
-      </div>
-
-      <h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
-      <div v-if="req.numFiles > 0">
-        <item v-for="(item) in files"
-          :key="base64(item.name)"
-          v-bind:index="item.index"
-          v-bind:name="item.name"
-          v-bind:isDir="item.isDir"
-          v-bind:url="item.url"
-          v-bind:modified="item.modified"
-          v-bind:type="item.type"
-          v-bind:size="item.size">
-        </item>
-      </div>
-
-      <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-      <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
-
-      <div :class="{ active: $store.state.multiple }" id="multiple-selection">
-      <p>{{ $t('files.multipleSelectionEnabled') }}</p>
-        <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
-          <i class="material-icons">clear</i>
-        </div>
-      </div>
-    </div>
+    </template>
   </div>
 </template>
 
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index f9c0c17f..e76e769c 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -125,14 +125,12 @@ export default {
   },
   async mounted () {
     window.addEventListener('keydown', this.key)
-    this.$store.commit('setPreviewMode', true)
     this.listing = this.oldReq.items
     this.$root.$on('preview-deleted', this.deleted)
     this.updatePreview()
   },
   beforeDestroy () {
     window.removeEventListener('keydown', this.key)
-    this.$store.commit('setPreviewMode', false)
     this.$root.$off('preview-deleted', this.deleted)
   },
   methods: {
@@ -142,16 +140,11 @@ export default {
       if (this.hasNext) {
         this.next()
       } else if (!this.hasPrevious && !this.hasNext) {
-        this.back()
+        this.close()
       } else {
         this.prev()
       }
     },
-    back () {
-      this.$store.commit('setPreviewMode', false)
-      let uri = url.removeLastDir(this.$route.path) + '/'
-      this.$router.push({ path: uri })
-    },
     prev () {
       this.hoverNav = false
       this.$router.push({ path: this.previousLink })
@@ -171,7 +164,7 @@ export default {
       } else if (event.which === 37) { // left arrow
         if (this.hasPrevious) this.prev()
       } else if (event.which === 27) { // esc
-        this.back()
+        this.close()
       }
     },
     async updatePreview () {
@@ -239,6 +232,8 @@ export default {
       }, 1500);
     }, 500),
     close () {
+      this.$store.commit('updateRequest', {})
+
       let uri = url.removeLastDir(this.$route.path) + '/'
       this.$router.push({ path: uri })
     },