chore: header bar component

frontend/src/views/Files.vue

@@ -1,5 +1,36 @@
 <template>
   <div>
+    <header-bar showMenu showLogo>
+      <search /> <title />
+      <action class="search-button" icon="search" :label="$t('buttons.search')" @action="openSearch()" />
+
+      <template #actions v-if="!error">
+        <template v-if="!isMobile">
+          <share-button v-if="headerButtons.share" />
+          <rename-button v-if="headerButtons.rename" />
+          <copy-button v-if="headerButtons.copy" />
+          <move-button v-if="headerButtons.move" />
+          <delete-button v-if="headerButtons.delete" />
+        </template>
+
+        <shell-button v-if="headerButtons.shell" />
+        <switch-button />
+        <download-button v-if="headerButtons.download" />
+        <upload-button v-if="headerButtons.upload" />
+        <info-button />
+        <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
+      </template>
+    </header-bar>
+
+    <div id="file-selection" v-if="isMobile">
+      <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
+      <share-button v-if="headerButtons.share" />
+      <rename-button v-if="headerButtons.rename" />
+      <copy-button v-if="headerButtons.copy" />
+      <move-button v-if="headerButtons.move" />
+      <delete-button v-if="headerButtons.delete" />
+    </div>
+
     <div id="breadcrumbs" v-if="isListing || error">
       <router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
         <i class="material-icons">home</i>
@@ -11,11 +42,7 @@
       </span>
     </div>
 
-    <div v-if="error">
-      <not-found v-if="error.message === '404'"></not-found>
-      <forbidden v-else-if="error.message === '403'"></forbidden>
-      <internal-error v-else></internal-error>
-    </div>
+    <errors v-if="error" :errorCode="errorCode" />
     <preview v-else-if="isPreview"></preview>
     <editor v-else-if="isEditor"></editor>
     <listing :class="{ multiple }" v-else-if="isListing"></listing>
@@ -28,13 +55,27 @@
 </template>
 
 <script>
-import Forbidden from './errors/403'
-import NotFound from './errors/404'
-import InternalError from './errors/500'
-import Preview from '@/components/files/Preview'
-import Listing from '@/components/files/Listing'
 import { files as api } from '@/api'
 import { mapGetters, mapState, mapMutations } from 'vuex'
+import { enableExec } from '@/utils/constants'
+
+import HeaderBar from '@/components/header/HeaderBar'
+import Action from '@/components/header/Action'
+import Search from '@/components/Search'
+import InfoButton from '@/components/buttons/Info'
+import DeleteButton from '@/components/buttons/Delete'
+import RenameButton from '@/components/buttons/Rename'
+import UploadButton from '@/components/buttons/Upload'
+import DownloadButton from '@/components/buttons/Download'
+import SwitchButton from '@/components/buttons/SwitchView'
+import MoveButton from '@/components/buttons/Move'
+import CopyButton from '@/components/buttons/Copy'
+import ShareButton from '@/components/buttons/Share'
+import ShellButton from '@/components/buttons/Shell'
+
+import Errors from '@/views/Errors'
+import Preview from '@/components/files/Preview'
+import Listing from '@/components/files/Listing'
 
 function clean (path) {
   return path.endsWith('/') ? path.slice(0, -1) : path
@@ -43,12 +84,29 @@ function clean (path) {
 export default {
   name: 'files',
   components: {
-    Forbidden,
-    NotFound,
-    InternalError,
+    HeaderBar,
+    Action,
+    Search,
+    InfoButton,
+    DeleteButton,
+    ShareButton,
+    RenameButton,
+    DownloadButton,
+    CopyButton,
+    UploadButton,
+    SwitchButton,
+    MoveButton,
+    ShellButton,
+    Errors,
     Preview,
     Listing,
-    Editor: () => import('@/components/files/Editor')
+    Editor: () => import('@/components/files/Editor'),
+  },
+  data: function () {
+    return {
+      error: null,
+      width: window.innerWidth
+    }
   },
   computed: {
     ...mapGetters([
@@ -100,12 +158,25 @@ export default {
       }
 
       return breadcrumbs
-    }
-  },
-  data: function () {
-    return {
-      error: null
-    }
+    },
+    headerButtons() {
+      return {
+        upload: this.user.perm.create,
+        download: this.user.perm.download,
+        shell: this.user.perm.execute && enableExec,
+        delete: this.selectedCount > 0 && this.user.perm.delete,
+        rename: this.selectedCount === 1 && this.user.perm.rename,
+        share: this.selectedCount === 1 && this.user.perm.share,
+        move: this.selectedCount === 1 && this.user.perm.rename,
+        copy: this.selectedCount === 1 && this.user.perm.create,
+      }
+    },
+    errorCode() {
+      return (this.error.message === '404' || this.error.message === '403') ? parseInt(this.error.message) : 500
+    },
+    isMobile () {
+      return this.width <= 736
+    },
   },
   created () {
     this.fetchData()
@@ -121,12 +192,17 @@ export default {
   mounted () {
     window.addEventListener('keydown', this.keyEvent)
     window.addEventListener('scroll', this.scroll)
+    window.addEventListener('resize', this.windowsResize)
   },
   beforeDestroy () {
     window.removeEventListener('keydown', this.keyEvent)
     window.removeEventListener('scroll', this.scroll)
+    window.removeEventListener('resize', this.windowsResize)
   },
   destroyed () {
+    if (this.$store.state.showShell) {
+      this.$store.commit('toggleShell')
+    }
     this.$store.commit('updateRequest', {})
   },
   methods: {
@@ -172,7 +248,7 @@ export default {
       }
 
       // Esc!
-      if (event.keyCode === 27) {        
+      if (event.keyCode === 27) {
         // If we're on a listing, unselect all
         // files and folders.
         if (this.isListing) {
@@ -234,11 +310,15 @@ export default {
 
       document.querySelector('#listing.list .item.header').style.top = top + 'px'
     },
-    openSidebar () {
-      this.$store.commit('showHover', 'sidebar')
-    },
     openSearch () {
       this.$store.commit('showHover', 'search')
+    },
+    toggleMultipleSelection () {
+      this.$store.commit('multiple', !this.multiple)
+      this.$store.commit('closeHovers')
+    },
+    windowsResize () {
+      this.width = window.innerWidth
     }
   }
 }