JS design

_assets/src/components/Main.vue

@@ -34,6 +34,10 @@
           <i class="material-icons">error</i>
           <span>You're not welcome here.</span>
         </h2>
+        <h2 class="message" v-else>
+          <i class="material-icons">error_outline</i>
+          <span>Something really went wrong.</span>
+        </h2>
       </div>
       <editor v-else-if="isEditor"></editor>
       <listing v-else-if="isListing"></listing>
@@ -132,7 +136,7 @@ export default {
     window.addEventListener('keydown', (event) => {
       // Esc!
       if (event.keyCode === 27) {
-        this.$store.commit('resetPrompts')
+        this.$store.commit('closePrompts')
 
         // Unselect all files and folders.
         if (this.req.kind === 'listing') {
@@ -150,20 +154,20 @@ export default {
       // Del!
       if (event.keyCode === 46) {
         if (this.showDeleteButton()) {
-          this.$store.commit('showDelete', true)
+          this.$store.commit('showPrompt', 'delete')
         }
       }
 
       // F1!
       if (event.keyCode === 112) {
         event.preventDefault()
-        this.$store.commit('showHelp', true)
+        this.$store.commit('showPrompt', 'help')
       }
 
       // F2!
       if (event.keyCode === 113) {
         if (this.showRenameButton()) {
-          this.$store.commit('showRename', true)
+          this.$store.commit('showPrompt', 'rename')
         }
       }
 
@@ -185,11 +189,14 @@ export default {
   },
   methods: {
     fetchData () {
+      // Set loading to true and reset the error.
       this.loading = true
       this.error = null
+
       // Reset selected items and multiple selection.
       this.$store.commit('resetSelected')
       this.$store.commit('multiple', false)
+      this.$store.commit('closePrompts')
 
       let url = this.$route.path
       if (url === '') url = '/'

_assets/src/components/Sidebar.vue

@@ -6,12 +6,12 @@
     </router-link>
 
     <div v-if="user.allowNew">
-      <button @click="$store.commit('showNewDir', true)" aria-label="New directory" title="New directory" class="action">
+      <button @click="$store.commit('showPrompt', 'newDir')" aria-label="New directory" title="New directory" class="action">
         <i class="material-icons">create_new_folder</i>
         <span>New folder</span>
       </button>
 
-      <button @click="$store.commit('showNewFile', true)" aria-label="New file" title="New file" class="action">
+      <button @click="$store.commit('showPrompt', 'newFile')" aria-label="New file" title="New file" class="action">
         <i class="material-icons">note_add</i>
         <span>New file</span>
       </button>

_assets/src/components/buttons/DeleteButton.vue

@@ -10,7 +10,7 @@ export default {
   name: 'delete-button',
   methods: {
     show: function (event) {
-      this.$store.commit('showDelete', true)
+      this.$store.commit('showPrompt', 'delete')
     }
   }
 }

_assets/src/components/buttons/DownloadButton.vue

@@ -25,7 +25,7 @@ export default {
         return
       }
 
-      this.$store.commit('showDownload', true)
+      this.$store.commit('showPrompt', 'download')
     }
   }
 }

_assets/src/components/buttons/InfoButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button title="Info" aria-label="Info" class="action" @click="$store.commit('showInfo', true)">
+  <button title="Info" aria-label="Info" class="action" @click="this.$store.commit('showPrompt', 'info')">
     <i class="material-icons">info</i>
     <span>Info</span>
   </button>

_assets/src/components/buttons/MoveButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="$store.commit('showMove', true)" aria-label="Move" title="Move" class="action">
+  <button @click="this.$store.commit('showPrompt', 'move')" aria-label="Move" title="Move" class="action">
     <i class="material-icons">forward</i>
     <span>Move file</span>
   </button>

_assets/src/components/buttons/RenameButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="$store.commit('showRename', true)" aria-label="Rename" title="Rename" class="action">
+  <button @click="this.$store.commit('showPrompt', 'rename')" aria-label="Rename" title="Rename" class="action">
     <i class="material-icons">mode_edit</i>
     <span>Rename</span>
   </button>

_assets/src/components/prompts/Delete.vue

@@ -22,9 +22,9 @@ export default {
     ...mapState(['req', 'selected'])
   },
   methods: {
-    ...mapMutations(['showDelete']),
+    ...mapMutations(['closePrompts']),
     submit: function (event) {
-      this.showDelete(false)
+      this.closePrompts()
       // buttons.setLoading('delete')
 
       if (this.req.kind !== 'listing') {

_assets/src/components/prompts/Download.vue

@@ -39,6 +39,7 @@ export default {
       }
 
       window.open(uri)
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/Help.vue

@@ -20,7 +20,7 @@
     </ul>
 
     <div>
-      <button type="submit" @click="$store.commit('showHelp', false)" class="ok">OK</button>
+      <button type="submit" @click="$store.commit('closePrompts')" class="ok">OK</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/Info.vue

@@ -21,7 +21,7 @@
     </section>
 
     <div>
-      <button type="submit" @click="$store.commit('showInfo', false)" class="ok">OK</button>
+      <button type="submit" @click="$store.commit('closePrompts')" class="ok">OK</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/Move.vue

@@ -11,7 +11,7 @@
 
     <div>
       <button class="ok" @click="move">Move</button>
-      <button class="cancel" @click="$store.commit('showMove', false)">Cancel</button>
+      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
     </div>
   </div>
 </template>

_assets/src/components/prompts/NewDir.vue

@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="$store.commit('showNewDir', false)">Cancel</button>
+      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
     </div>
   </div>
 </template>
@@ -45,7 +45,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('showNewDir', false)
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/NewFile.vue

@@ -5,7 +5,7 @@
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
       <button class="ok" @click="submit">Create</button>
-      <button class="cancel" @click="$store.commit('showNewFile', false)">Cancel</button>
+      <button class="cancel" @click="$store.commit('closePrompts')">Cancel</button>
     </div>
   </div>
 </template>
@@ -45,7 +45,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('showNewFile', false)
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/Prompts.vue

@@ -21,7 +21,7 @@ import Download from './Download'
 import Move from './Move'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
-import {mapGetters, mapState} from 'vuex'
+import {mapGetters} from 'vuex'
 
 export default {
   name: 'prompts',
@@ -37,9 +37,7 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'showOverlay'
-    ]),
-    ...mapState([
+      'showOverlay',
       'showInfo',
       'showHelp',
       'showDelete',
@@ -52,7 +50,7 @@ export default {
   },
   methods: {
     resetPrompts () {
-      this.$store.commit('resetPrompts')
+      this.$store.commit('closePrompts')
     }
   }
 }

_assets/src/components/prompts/Rename.vue

@@ -25,7 +25,7 @@ export default {
   computed: mapState(['req', 'selected', 'selectedCount']),
   methods: {
     cancel: function (event) {
-      this.$store.commit('showRename', false)
+      this.$store.commit('closePrompts')
     },
     oldName: function () {
       if (this.req.kind !== 'listing') {
@@ -68,7 +68,7 @@ export default {
           console.log(error)
         })
 
-      this.$store.commit('showRename', false)
+      this.$store.commit('closePrompts')
       return
     }
   }

_assets/src/store/getters.js

@@ -1,14 +1,13 @@
 const getters = {
-  showOverlay: state => {
-    return state.showInfo ||
-      state.showHelp ||
-      state.showDelete ||
-      state.showRename ||
-      state.showMove ||
-      state.showNewFile ||
-      state.showNewDir ||
-      state.showDownload
-  },
+  showInfo: state => (state.prompt === 'info'),
+  showHelp: state => (state.prompt === 'help'),
+  showDelete: state => (state.prompt === 'delete'),
+  showRename: state => (state.prompt === 'rename'),
+  showMove: state => (state.prompt === 'move'),
+  showNewFile: state => (state.prompt === 'newFile'),
+  showNewDir: state => (state.prompt === 'newDir'),
+  showDownload: state => (state.prompt === 'download'),
+  showOverlay: state => (state.prompt !== null),
   selectedCount: state => state.selected.length
 }
 

_assets/src/store/mutations.js

@@ -1,23 +1,7 @@
 const mutations = {
-  showInfo: (state, value) => (state.showInfo = value),
-  showHelp: (state, value) => (state.showHelp = value),
-  showDelete: (state, value) => (state.showDelete = value),
-  showRename: (state, value) => (state.showRename = value),
-  showMove: (state, value) => (state.showMove = value),
-  showNewFile: (state, value) => (state.showNewFile = value),
-  showNewDir: (state, value) => (state.showNewDir = value),
-  showDownload: (state, value) => (state.showDownload = value),
-  resetPrompts: (state) => {
-    state.showHelp = false
-    state.showInfo = false
-    state.showDelete = false
-    state.showRename = false
-    state.showMove = false
-    state.showNewFile = false
-    state.showNewDir = false
-    state.showDownload = false
-  },
-  setReload: (state, value) => (state.reload = value),
+  closePrompts: (state) => { state.prompt = null },
+  showPrompt: (state, value) => { state.prompt = value },
+  setReload: (state, value) => { state.reload = value },
   setUser: (state, value) => (state.user = value),
   setJWT: (state, value) => (state.jwt = value),
   multiple: (state, value) => (state.multiple = value),

_assets/src/store/store.js

@@ -14,14 +14,7 @@ const state = {
   reload: false,
   selected: [],
   multiple: false,
-  showInfo: false,
-  showHelp: false,
-  showDelete: false,
-  showRename: false,
-  showMove: false,
-  showNewFile: false,
-  showNewDir: false,
-  showDownload: false
+  prompt: null
 }
 
 export default new Vuex.Store({