Start the dashboard

Former-commit-id: a47df4e6c74e91270edd752b47239c9d8efdda6a [formerly bb87afcfe7aac73b74ebd39e8cc0882ff4b915a4] [formerly d55da52558b3c3145d62bbba650094b73438b506 [formerly ba7c3d423493e7540870230d0401c24de7f592dc]] Former-commit-id: c851558940bb6a0b3b407b1b9507edeba38a8c2a [formerly b37550ff50fd5d6b3cb8c4500b83c3d985283abc] Former-commit-id: 7fe8613a364d466dea132f648fdabb81d4af0235
2017-07-06 21:18:34 +01:00
parent 299b58a75f
commit c9ddf10aba
14 changed files with 570 additions and 256 deletions
--- a/assets/src/components/Header.vue
+++ b/assets/src/components/Header.vue
@@ -0,0 +1,135 @@
+<template>
+  <header>
+    <div>
+      <button @click="openSidebar" aria-label="Toggle sidebar" title="Toggle sidebar" class="action">
+        <i class="material-icons">menu</i>
+      </button>
+      <img src="../assets/logo.svg" alt="File Manager">
+      <search></search>
+    </div>
+    <div>
+      <button @click="openSearch" aria-label="Search" title="Search" class="search-button action">
+        <i class="material-icons">search</i>
+      </button>
+
+      <button v-show="showSaveButton" aria-label="Save" class="action" id="save-button">
+        <i class="material-icons" title="Save">save</i>
+      </button>
+      <rename-button v-show="showRenameButton"></rename-button>
+      <move-button v-show="showMoveButton"></move-button>
+      <delete-button v-show="showDeleteButton"></delete-button>
+      <switch-button v-show="showSwitchButton"></switch-button>
+      <download-button v-show="showCommonButton"></download-button>
+      <upload-button v-show="showUpload"></upload-button>
+      <info-button v-show="showCommonButton"></info-button>
+
+      <button v-show="showSelectButton" @click="$store.commit('multiple', true)" aria-label="Select multiple" class="action">
+        <i class="material-icons">check_circle</i>
+        <span>Select</span>
+      </button>
+    </div>
+  </header>
+</template>
+
+<script>
+import Search from './Search'
+import InfoButton from './buttons/Info'
+import DeleteButton from './buttons/Delete'
+import RenameButton from './buttons/Rename'
+import UploadButton from './buttons/Upload'
+import DownloadButton from './buttons/Download'
+import SwitchButton from './buttons/SwitchView'
+import MoveButton from './buttons/Move'
+import {mapGetters, mapState} from 'vuex'
+
+export default {
+  name: 'main',
+  components: {
+    Search,
+    InfoButton,
+    DeleteButton,
+    RenameButton,
+    DownloadButton,
+    UploadButton,
+    SwitchButton,
+    MoveButton
+  },
+  computed: {
+    ...mapGetters([
+      'selectedCount'
+    ]),
+    ...mapState([
+      'req',
+      'user',
+      'loading',
+      'reload',
+      'multiple'
+    ]),
+    showSelectButton () {
+      return this.req.kind === 'listing' && !this.loading && this.$route.name === 'Files'
+    },
+    showSaveButton () {
+      return (this.req.kind === 'editor' && !this.loading) || this.$route.name === 'User'
+    },
+    showSwitchButton () {
+      return this.req.kind === 'listing' && this.$route.name === 'Files' && !this.loading
+    },
+    showCommonButton () {
+      return !(this.$route.name !== 'Files' || this.loading)
+    },
+    showUpload () {
+      if (this.$route.name !== 'Files' || this.loading) return false
+
+      if (this.req.kind === 'editor') return false
+      return this.user.allowNew
+    },
+    showDeleteButton () {
+      if (this.$route.name !== 'Files' || this.loading) return false
+
+      if (this.req.kind === 'listing') {
+        if (this.selectedCount === 0) {
+          return false
+        }
+
+        return this.user.allowEdit
+      }
+
+      return this.user.allowEdit
+    },
+    showRenameButton () {
+      if (this.$route.name !== 'Files' || this.loading) return false
+
+      if (this.req.kind === 'listing') {
+        if (this.selectedCount === 1) {
+          return this.user.allowEdit
+        }
+
+        return false
+      }
+
+      return this.user.allowEdit
+    },
+    showMoveButton () {
+      if (this.$route.name !== 'Files' || this.loading) return false
+
+      if (this.req.kind !== 'listing') {
+        return false
+      }
+
+      if (this.selectedCount > 0) {
+        return this.user.allowEdit
+      }
+
+      return false
+    }
+  },
+  methods: {
+    openSidebar () {
+      this.$store.commit('showHover', 'sidebar')
+    },
+    openSearch () {
+      this.$store.commit('showHover', 'search')
+    }
+  }
+}
+</script>