From e0f3687b264ccbeda308e04326179488a73409f2 Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Mon, 3 Jul 2017 17:15:47 +0100
Subject: [PATCH] Renaming of prompts

---
 _assets/src/components/Main.vue               | 89 +++----------------
 _assets/src/components/Sidebar.vue            | 55 ++++++++++++
 .../prompts/{DeletePrompt.vue => Delete.vue}  |  2 +-
 .../{DownloadPrompt.vue => Download.vue}      |  2 +-
 _assets/src/components/{ => prompts}/Help.vue |  0
 .../prompts/{InfoPrompt.vue => Info.vue}      |  2 +-
 .../prompts/{MovePrompt.vue => Move.vue}      |  2 +-
 .../prompts/{NewDirPrompt.vue => NewDir.vue}  |  2 +-
 .../{NewFilePrompt.vue => NewFile.vue}        |  2 +-
 _assets/src/components/prompts/Prompts.vue    | 59 ++++++++++++
 .../prompts/{RenamePrompt.vue => Rename.vue}  |  2 +-
 11 files changed, 133 insertions(+), 84 deletions(-)
 create mode 100644 _assets/src/components/Sidebar.vue
 rename _assets/src/components/prompts/{DeletePrompt.vue => Delete.vue} (98%)
 rename _assets/src/components/prompts/{DownloadPrompt.vue => Download.vue} (97%)
 rename _assets/src/components/{ => prompts}/Help.vue (100%)
 rename _assets/src/components/prompts/{InfoPrompt.vue => Info.vue} (99%)
 rename _assets/src/components/prompts/{MovePrompt.vue => Move.vue} (99%)
 rename _assets/src/components/prompts/{NewDirPrompt.vue => NewDir.vue} (97%)
 rename _assets/src/components/prompts/{NewFilePrompt.vue => NewFile.vue} (97%)
 create mode 100644 _assets/src/components/prompts/Prompts.vue
 rename _assets/src/components/prompts/{RenamePrompt.vue => Rename.vue} (98%)

diff --git a/_assets/src/components/Main.vue b/_assets/src/components/Main.vue
index 2fb5e2ac..cabd27b0 100644
--- a/_assets/src/components/Main.vue
+++ b/_assets/src/components/Main.vue
@@ -21,51 +21,16 @@
       </div>
     </header>
 
-    <nav>
-      <router-link class="action" to="/files/">
-        <i class="material-icons">folder</i>
-        <span>My Files</span>
-      </router-link>
-
-      <div v-if="user.allowNew">
-        <button @click="$store.commit('showNewDir', true)" 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">
-          <i class="material-icons">note_add</i>
-          <span>New file</span>
-        </button>
-      </div>
-
-      <div v-for="plugin in plugins">
-        <button v-for="action in plugin.sidebar" @click="action.click" :aria-label="action.name" :title="action.name" class="action">
-          <i class="material-icons">{{ action.icon }}</i>
-          <span>{{ action.name }}</span>
-        </button>
-      </div>
-
-      <button @click="logout" class="action" id="logout" aria-label="Log out">
-        <i class="material-icons" title="Logout">exit_to_app</i>
-        <span>Logout</span>
-      </button>
-    </nav>
+    <sidebar></sidebar>
 
     <main>
+      <div v-if="loading">Loading...</div>
       <editor v-if="isEditor"></editor>
       <listing v-if="isListing"></listing>
       <preview v-if="isPreview"></preview>
     </main>
 
-    <download-prompt v-if="showDownload" :class="{ active: showDownload }"></download-prompt>
-    <new-file-prompt v-if="showNewFile" :class="{ active: showNewFile }"></new-file-prompt>
-    <new-dir-prompt v-if="showNewDir" :class="{ active: showNewDir }"></new-dir-prompt>
-    <rename-prompt v-if="showRename" :class="{ active: showRename }"></rename-prompt>
-    <delete-prompt v-if="showDelete" :class="{ active: showDelete }"></delete-prompt>
-    <info-prompt v-if="showInfo" :class="{ active: showInfo }"></info-prompt>
-    <move-prompt v-if="showMove" :class="{ active: showMove }"></move-prompt>
-    <help v-show="showHelp" :class="{ active: showHelp }"></help>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay" :class="{ active: showOverlay }"></div>
+    <prompts></prompts>
 
     <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
   </div>
@@ -73,26 +38,19 @@
 
 <script>
 import Search from './Search'
-import Help from './Help'
 import Preview from './Preview'
 import Listing from './Listing'
 import Editor from './Editor'
+import Sidebar from './Sidebar'
+import Prompts from './prompts/Prompts'
 import InfoButton from './buttons/InfoButton'
-import InfoPrompt from './prompts/InfoPrompt'
 import DeleteButton from './buttons/DeleteButton'
-import DeletePrompt from './prompts/DeletePrompt'
 import RenameButton from './buttons/RenameButton'
-import RenamePrompt from './prompts/RenamePrompt'
 import UploadButton from './buttons/UploadButton'
 import DownloadButton from './buttons/DownloadButton'
-import DownloadPrompt from './prompts/DownloadPrompt'
 import SwitchButton from './buttons/SwitchViewButton'
 import MoveButton from './buttons/MoveButton'
-import MovePrompt from './prompts/MovePrompt'
-import NewFilePrompt from './prompts/NewFilePrompt'
-import NewDirPrompt from './prompts/NewDirPrompt'
 import css from '@/utils/css'
-import auth from '@/utils/auth'
 import api from '@/utils/api'
 import {mapGetters, mapState} from 'vuex'
 
@@ -112,41 +70,26 @@ export default {
     Preview,
     Listing,
     Editor,
+    Sidebar,
     InfoButton,
-    InfoPrompt,
-    Help,
     DeleteButton,
-    DeletePrompt,
     RenameButton,
-    RenamePrompt,
     DownloadButton,
-    DownloadPrompt,
     UploadButton,
     SwitchButton,
     MoveButton,
-    MovePrompt,
-    NewFilePrompt,
-    NewDirPrompt
+    Prompts
   },
   computed: {
     ...mapGetters([
-      'selectedCount',
-      'showOverlay'
+      'selectedCount'
     ]),
     ...mapState([
       'req',
       'user',
       'reload',
       'baseURL',
-      'multiple',
-      'showInfo',
-      'showHelp',
-      'showDelete',
-      'showRename',
-      'showMove',
-      'showNewFile',
-      'showNewDir',
-      'showDownload'
+      'multiple'
     ]),
     isListing () {
       return this.req.kind === 'listing' && !this.loading
@@ -160,8 +103,8 @@ export default {
   },
   data: function () {
     return {
-      plugins: [],
-      loading: true
+      loading: true,
+      error: ''
     }
   },
   created () {
@@ -178,10 +121,6 @@ export default {
     updateColumnSizes()
     window.addEventListener('resize', updateColumnSizes)
 
-    if (window.plugins !== undefined || window.plugins !== null) {
-      this.plugins = window.plugins
-    }
-
     window.addEventListener('keydown', (event) => {
       // Esc!
       if (event.keyCode === 27) {
@@ -300,11 +239,7 @@ export default {
       }
 
       return false
-    },
-    resetPrompts: function () {
-      this.$store.commit('resetPrompts')
-    },
-    logout: auth.logout
+    }
   }
 }
 </script>
diff --git a/_assets/src/components/Sidebar.vue b/_assets/src/components/Sidebar.vue
new file mode 100644
index 00000000..748aad6d
--- /dev/null
+++ b/_assets/src/components/Sidebar.vue
@@ -0,0 +1,55 @@
+<template>
+  <nav>
+    <router-link class="action" to="/files/">
+      <i class="material-icons">folder</i>
+      <span>My Files</span>
+    </router-link>
+
+    <div v-if="user.allowNew">
+      <button @click="$store.commit('showNewDir', true)" 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">
+        <i class="material-icons">note_add</i>
+        <span>New file</span>
+      </button>
+    </div>
+
+    <div v-for="plugin in plugins">
+      <button v-for="action in plugin.sidebar" @click="action.click" :aria-label="action.name" :title="action.name" class="action">
+        <i class="material-icons">{{ action.icon }}</i>
+        <span>{{ action.name }}</span>
+      </button>
+    </div>
+
+    <button @click="logout" class="action" id="logout" aria-label="Log out">
+      <i class="material-icons" title="Logout">exit_to_app</i>
+      <span>Logout</span>
+    </button>
+  </nav>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import auth from '@/utils/auth'
+
+export default {
+  name: 'sidebar',
+  data: () => {
+    return {
+      plugins: []
+    }
+  },
+  computed: mapState(['user']),
+  mounted () {
+    if (window.plugins !== undefined || window.plugins !== null) {
+      this.plugins = window.plugins
+    }
+  },
+  methods: {
+    logout: auth.logout
+  }
+}
+</script>
diff --git a/_assets/src/components/prompts/DeletePrompt.vue b/_assets/src/components/prompts/Delete.vue
similarity index 98%
rename from _assets/src/components/prompts/DeletePrompt.vue
rename to _assets/src/components/prompts/Delete.vue
index 44397c59..80bf2f1d 100644
--- a/_assets/src/components/prompts/DeletePrompt.vue
+++ b/_assets/src/components/prompts/Delete.vue
@@ -16,7 +16,7 @@ import api from '@/utils/api'
 import url from '@/utils/url'
 
 export default {
-  name: 'delete-prompt',
+  name: 'delete',
   computed: {
     ...mapGetters(['selectedCount']),
     ...mapState(['req', 'selected'])
diff --git a/_assets/src/components/prompts/DownloadPrompt.vue b/_assets/src/components/prompts/Download.vue
similarity index 97%
rename from _assets/src/components/prompts/DownloadPrompt.vue
rename to _assets/src/components/prompts/Download.vue
index 67021806..9523c0d6 100644
--- a/_assets/src/components/prompts/DownloadPrompt.vue
+++ b/_assets/src/components/prompts/Download.vue
@@ -14,7 +14,7 @@
 import {mapGetters, mapState} from 'vuex'
 
 export default {
-  name: 'download-prompt',
+  name: 'download',
   computed: {
     ...mapState(['selected', 'req']),
     ...mapGetters(['selectedCount'])
diff --git a/_assets/src/components/Help.vue b/_assets/src/components/prompts/Help.vue
similarity index 100%
rename from _assets/src/components/Help.vue
rename to _assets/src/components/prompts/Help.vue
diff --git a/_assets/src/components/prompts/InfoPrompt.vue b/_assets/src/components/prompts/Info.vue
similarity index 99%
rename from _assets/src/components/prompts/InfoPrompt.vue
rename to _assets/src/components/prompts/Info.vue
index 16b4d2c4..55631929 100644
--- a/_assets/src/components/prompts/InfoPrompt.vue
+++ b/_assets/src/components/prompts/Info.vue
@@ -33,7 +33,7 @@ import moment from 'moment'
 import api from '@/utils/api'
 
 export default {
-  name: 'info-prompt',
+  name: 'info',
   computed: {
     ...mapState(['req', 'selected']),
     ...mapGetters(['selectedCount'])
diff --git a/_assets/src/components/prompts/MovePrompt.vue b/_assets/src/components/prompts/Move.vue
similarity index 99%
rename from _assets/src/components/prompts/MovePrompt.vue
rename to _assets/src/components/prompts/Move.vue
index 87179206..538cb52f 100644
--- a/_assets/src/components/prompts/MovePrompt.vue
+++ b/_assets/src/components/prompts/Move.vue
@@ -22,7 +22,7 @@ import url from '@/utils/url'
 import api from '@/utils/api'
 
 export default {
-  name: 'move-prompt',
+  name: 'move',
   data: function () {
     return {
       items: [],
diff --git a/_assets/src/components/prompts/NewDirPrompt.vue b/_assets/src/components/prompts/NewDir.vue
similarity index 97%
rename from _assets/src/components/prompts/NewDirPrompt.vue
rename to _assets/src/components/prompts/NewDir.vue
index f6df8a01..1d19f373 100644
--- a/_assets/src/components/prompts/NewDirPrompt.vue
+++ b/_assets/src/components/prompts/NewDir.vue
@@ -15,7 +15,7 @@ import url from '@/utils/url'
 import api from '@/utils/api'
 
 export default {
-  name: 'new-dir-prompt',
+  name: 'new-dir',
   data: function () {
     return {
       name: ''
diff --git a/_assets/src/components/prompts/NewFilePrompt.vue b/_assets/src/components/prompts/NewFile.vue
similarity index 97%
rename from _assets/src/components/prompts/NewFilePrompt.vue
rename to _assets/src/components/prompts/NewFile.vue
index a074c000..fa40e4e7 100644
--- a/_assets/src/components/prompts/NewFilePrompt.vue
+++ b/_assets/src/components/prompts/NewFile.vue
@@ -15,7 +15,7 @@ import url from '@/utils/url'
 import api from '@/utils/api'
 
 export default {
-  name: 'new-file-prompt',
+  name: 'new-file',
   data: function () {
     return {
       name: ''
diff --git a/_assets/src/components/prompts/Prompts.vue b/_assets/src/components/prompts/Prompts.vue
new file mode 100644
index 00000000..78a43308
--- /dev/null
+++ b/_assets/src/components/prompts/Prompts.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <help v-show="showHelp" :class="{ active: showHelp }"></help>
+    <download v-if="showDownload" :class="{ active: showDownload }"></download>
+    <new-file v-if="showNewFile" :class="{ active: showNewFile }"></new-file>
+    <new-dir v-if="showNewDir" :class="{ active: showNewDir }"></new-dir>
+    <rename v-if="showRename" :class="{ active: showRename }"></rename>
+    <delete v-if="showDelete" :class="{ active: showDelete }"></delete>
+    <info v-if="showInfo" :class="{ active: showInfo }"></info>
+    <move v-if="showMove" :class="{ active: showMove }"></move>
+    <div v-show="showOverlay" @click="resetPrompts" class="overlay" :class="{ active: showOverlay }"></div>
+  </div>
+</template>
+
+<script>
+import Help from './Help'
+import Info from './Info'
+import Delete from './Delete'
+import Rename from './Rename'
+import Download from './Download'
+import Move from './Move'
+import NewFile from './NewFile'
+import NewDir from './NewDir'
+import {mapGetters, mapState} from 'vuex'
+
+export default {
+  name: 'prompts',
+  components: {
+    Info,
+    Delete,
+    Rename,
+    Download,
+    Move,
+    NewFile,
+    NewDir,
+    Help
+  },
+  computed: {
+    ...mapGetters([
+      'showOverlay'
+    ]),
+    ...mapState([
+      'showInfo',
+      'showHelp',
+      'showDelete',
+      'showRename',
+      'showMove',
+      'showNewFile',
+      'showNewDir',
+      'showDownload'
+    ])
+  },
+  methods: {
+    resetPrompts () {
+      this.$store.commit('resetPrompts')
+    }
+  }
+}
+</script>
diff --git a/_assets/src/components/prompts/RenamePrompt.vue b/_assets/src/components/prompts/Rename.vue
similarity index 98%
rename from _assets/src/components/prompts/RenamePrompt.vue
rename to _assets/src/components/prompts/Rename.vue
index a172873e..d2eca795 100644
--- a/_assets/src/components/prompts/RenamePrompt.vue
+++ b/_assets/src/components/prompts/Rename.vue
@@ -16,7 +16,7 @@ import url from '@/utils/url'
 import api from '@/utils/api'
 
 export default {
-  name: 'rename-prompt',
+  name: 'rename',
   data: function () {
     return {
       name: ''