chore: files view dynamic component

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 => {

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({

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),
 }
 

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>
+    <component v-else-if="currentView" :is="currentView"></component>
-    <editor v-else-if="isEditor"></editor>
-    <listing v-else-if="isListing"></listing>
     <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 () {
+    currentView () {
-      return !this.loading && !this.isListing && !this.isEditor || this.loading && this.$store.state.previewMode
+      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('/')

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 })
     }

frontend/src/views/files/Listing.vue

@@ -31,6 +31,12 @@
       <action v-if="headerButtons.delete" icon="delete" :label="$t('buttons.delete')" show="delete" />
     </div>
 
+    <div v-if="$store.state.loading">
+      <h2 class="message">
+        <span>{{ $t('files.loading') }}</span>
+      </h2>
+    </div>
+    <template v-else>
       <div v-if="(req.numDirs + req.numFiles) == 0">
         <h2 class="message">
           <i class="material-icons">sentiment_dissatisfied</i>
@@ -115,6 +121,7 @@
           </div>
         </div>
       </div>
+    </template>
   </div>
 </template>
 

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 })
     },