chore: files pages logic responsability

frontend/src/views/Files.vue

@@ -1,35 +1,6 @@
 <template>
   <div>
-    <header-bar showMenu showLogo>
+    <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')">
@@ -45,7 +16,7 @@
     <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>
+    <listing v-else-if="isListing"></listing>
     <div v-else>
       <h2 class="message">
         <span>{{ $t('files.loading') }}</span>
@@ -57,25 +28,11 @@
 <script>
 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 Preview from '@/views/files/Preview'
-import Listing from '@/components/files/Listing'
+import Listing from '@/views/files/Listing'
 
 function clean (path) {
   return path.endsWith('/') ? path.slice(0, -1) : path
@@ -85,22 +42,10 @@ export default {
   name: 'files',
   components: {
     HeaderBar,
-    Action,
-    Search,
-    InfoButton,
-    DeleteButton,
-    ShareButton,
-    RenameButton,
-    DownloadButton,
-    CopyButton,
-    UploadButton,
-    SwitchButton,
-    MoveButton,
-    ShellButton,
     Errors,
     Preview,
     Listing,
-    Editor: () => import('@/components/files/Editor'),
+    Editor: () => import('@/views/files/Editor'),
   },
   data: function () {
     return {
@@ -110,16 +55,13 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'selectedCount',
       'isListing',
       'isEditor',
       'isFiles'
     ]),
     ...mapState([
       'req',
-      'user',
       'reload',
-      'multiple',
       'loading',
       'show'
     ]),
@@ -159,24 +101,9 @@ export default {
 
       return breadcrumbs
     },
-    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()
@@ -191,13 +118,9 @@ 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) {
@@ -247,78 +170,11 @@ export default {
         return
       }
 
-      // Esc!
-      if (event.keyCode === 27) {
-        // If we're on a listing, unselect all
-        // files and folders.
-        if (this.isListing) {
-          this.$store.commit('resetSelected')
-        }
-      }
-
-      // Del!
-      if (event.keyCode === 46) {
-        if (this.isEditor ||
-          !this.isFiles ||
-          this.loading ||
-          !this.user.perm.delete ||
-          (this.isListing && this.selectedCount === 0) ||
-          this.$store.state.show != null) return
-
-        this.$store.commit('showHover', 'delete')
-      }
-
       // F1!
       if (event.keyCode === 112) {
         event.preventDefault()
         this.$store.commit('showHover', 'help')
       }
-
-      // F2!
-      if (event.keyCode === 113) {
-        if (this.isEditor ||
-          !this.isFiles ||
-          this.loading ||
-          !this.user.perm.rename ||
-          (this.isListing && this.selectedCount === 0) ||
-          (this.isListing && this.selectedCount > 1)) return
-
-        this.$store.commit('showHover', 'rename')
-      }
-
-      // CTRL + S
-      if (event.ctrlKey || event.metaKey) {
-        if (this.isEditor) return
-
-        if (String.fromCharCode(event.which).toLowerCase() === 's') {
-          event.preventDefault()
-
-          if (this.req.kind !== 'editor') {
-            document.getElementById('download-button').click()
-          }
-        }
-      }
-    },
-    scroll () {
-      if (this.req.kind !== 'listing' || this.$store.state.user.viewMode === 'mosaic') return
-
-      let top = 112 - window.scrollY
-
-      if (top < 64) {
-        top = 64
-      }
-
-      document.querySelector('#listing.list .item.header').style.top = top + 'px'
-    },
-    openSearch () {
-      this.$store.commit('showHover', 'search')
-    },
-    toggleMultipleSelection () {
-      this.$store.commit('multiple', !this.multiple)
-      this.$store.commit('closeHovers')
-    },
-    windowsResize () {
-      this.width = window.innerWidth
     }
   }
 }

frontend/src/views/files/Listing.vue

@@ -1,108 +1,181 @@
 <template>
-  <div v-if="(req.numDirs + req.numFiles) == 0">
+  <div>
-    <h2 class="message">
+    <header-bar showMenu showLogo>
-      <i class="material-icons">sentiment_dissatisfied</i>
+      <search /> <title />
-      <span>{{ $t('files.lonely') }}</span>
+      <action class="search-button" icon="search" :label="$t('buttons.search')" @action="openSearch()" />
-    </h2>
-    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-    <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
-  </div>
-  <div v-else id="listing"
-    :class="user.viewMode">
-    <div>
-      <div class="item header">
-        <div></div>
-        <div>
-          <p :class="{ active: nameSorted }" class="name"
-            role="button"
-            tabindex="0"
-            @click="sort('name')"
-            :title="$t('files.sortByName')"
-            :aria-label="$t('files.sortByName')">
-            <span>{{ $t('files.name') }}</span>
-            <i class="material-icons">{{ nameIcon }}</i>
-          </p>
 
-          <p :class="{ active: sizeSorted }" class="size"
+      <template #actions>
-            role="button"
+        <template v-if="!isMobile">
-            tabindex="0"
+          <share-button v-if="headerButtons.share" />
-            @click="sort('size')"
+          <rename-button v-if="headerButtons.rename" />
-            :title="$t('files.sortBySize')"
+          <copy-button v-if="headerButtons.copy" />
-            :aria-label="$t('files.sortBySize')">
+          <move-button v-if="headerButtons.move" />
-            <span>{{ $t('files.size') }}</span>
+          <delete-button v-if="headerButtons.delete" />
-            <i class="material-icons">{{ sizeIcon }}</i>
+        </template>
-          </p>
+
-          <p :class="{ active: modifiedSorted }" class="modified"
+        <shell-button v-if="headerButtons.shell" />
-            role="button"
+        <switch-button />
-            tabindex="0"
+        <download-button v-if="headerButtons.download" />
-            @click="sort('modified')"
+        <upload-button v-if="headerButtons.upload" />
-            :title="$t('files.sortByLastModified')"
+        <info-button />
-            :aria-label="$t('files.sortByLastModified')">
+        <action icon="check_circle" :label="$t('buttons.selectMultiple')" @action="toggleMultipleSelection" />
-            <span>{{ $t('files.lastModified') }}</span>
+      </template>
-            <i class="material-icons">{{ modifiedIcon }}</i>
+    </header-bar>
-          </p>
+
+    <div v-if="isMobile" id="file-selection">
+      <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 v-if="(req.numDirs + req.numFiles) == 0">
+      <h2 class="message">
+        <i class="material-icons">sentiment_dissatisfied</i>
+        <span>{{ $t('files.lonely') }}</span>
+      </h2>
+      <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
+      <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
+    </div>
+    <div v-else id="listing"
+      :class="user.viewMode">
+      <div>
+        <div class="item header">
+          <div></div>
+          <div>
+            <p :class="{ active: nameSorted }" class="name"
+              role="button"
+              tabindex="0"
+              @click="sort('name')"
+              :title="$t('files.sortByName')"
+              :aria-label="$t('files.sortByName')">
+              <span>{{ $t('files.name') }}</span>
+              <i class="material-icons">{{ nameIcon }}</i>
+            </p>
+
+            <p :class="{ active: sizeSorted }" class="size"
+              role="button"
+              tabindex="0"
+              @click="sort('size')"
+              :title="$t('files.sortBySize')"
+              :aria-label="$t('files.sortBySize')">
+              <span>{{ $t('files.size') }}</span>
+              <i class="material-icons">{{ sizeIcon }}</i>
+            </p>
+            <p :class="{ active: modifiedSorted }" class="modified"
+              role="button"
+              tabindex="0"
+              @click="sort('modified')"
+              :title="$t('files.sortByLastModified')"
+              :aria-label="$t('files.sortByLastModified')">
+              <span>{{ $t('files.lastModified') }}</span>
+              <i class="material-icons">{{ modifiedIcon }}</i>
+            </p>
+          </div>
         </div>
       </div>
-    </div>
 
-    <h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
+      <h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
-    <div v-if="req.numDirs > 0">
+      <div v-if="req.numDirs > 0">
-      <item v-for="(item) in dirs"
+        <item v-for="(item) in dirs"
-        :key="base64(item.name)"
+          :key="base64(item.name)"
-        v-bind:index="item.index"
+          v-bind:index="item.index"
-        v-bind:name="item.name"
+          v-bind:name="item.name"
-        v-bind:isDir="item.isDir"
+          v-bind:isDir="item.isDir"
-        v-bind:url="item.url"
+          v-bind:url="item.url"
-        v-bind:modified="item.modified"
+          v-bind:modified="item.modified"
-        v-bind:type="item.type"
+          v-bind:type="item.type"
-        v-bind:size="item.size">
+          v-bind:size="item.size">
-      </item>
+        </item>
-    </div>
+      </div>
 
-    <h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
+      <h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
-    <div v-if="req.numFiles > 0">
+      <div v-if="req.numFiles > 0">
-      <item v-for="(item) in files"
+        <item v-for="(item) in files"
-        :key="base64(item.name)"
+          :key="base64(item.name)"
-        v-bind:index="item.index"
+          v-bind:index="item.index"
-        v-bind:name="item.name"
+          v-bind:name="item.name"
-        v-bind:isDir="item.isDir"
+          v-bind:isDir="item.isDir"
-        v-bind:url="item.url"
+          v-bind:url="item.url"
-        v-bind:modified="item.modified"
+          v-bind:modified="item.modified"
-        v-bind:type="item.type"
+          v-bind:type="item.type"
-        v-bind:size="item.size">
+          v-bind:size="item.size">
-      </item>
+        </item>
-    </div>
+      </div>
 
-    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
+      <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-    <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
+      <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
 
-    <div :class="{ active: $store.state.multiple }" id="multiple-selection">
+      <div :class="{ active: $store.state.multiple }" id="multiple-selection">
-    <p>{{ $t('files.multipleSelectionEnabled') }}</p>
+      <p>{{ $t('files.multipleSelectionEnabled') }}</p>
-      <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
+        <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
-        <i class="material-icons">clear</i>
+          <i class="material-icons">clear</i>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
-import Item from './ListingItem'
-import css from '@/utils/css'
 import { users, files as api } from '@/api'
+import { enableExec } from '@/utils/constants'
 import * as upload  from '@/utils/upload'
+import css from '@/utils/css'
+
+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 Item from '@/components/files/ListingItem'
 
 export default {
   name: 'listing',
-  components: { Item },
+  components: {
+    HeaderBar,
+    Action,
+    Search,
+    InfoButton,
+    DeleteButton,
+    ShareButton,
+    RenameButton,
+    DownloadButton,
+    CopyButton,
+    UploadButton,
+    SwitchButton,
+    MoveButton,
+    ShellButton,
+    Item
+  },
   data: function () {
     return {
       showLimit: 50,
-      dragCounter: 0
+      dragCounter: 0,
+      width: window.innerWidth
     }
   },
   computed: {
-    ...mapState(['req', 'selected', 'user', 'show']),
+    ...mapState([
+      'req',
+      'selected',
+      'user',
+      'show',
+      'multiple'
+    ]),
+    ...mapGetters([
+      'selectedCount'
+    ]),
     nameSorted () {
       return (this.req.sorting.by === 'name')
     },
@@ -159,6 +232,21 @@ export default {
       }
 
       return 'arrow_upward'
+    },
+    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,
+      }
+    },
+    isMobile () {
+      return this.width <= 736
     }
   },
   mounted: function () {
@@ -169,6 +257,7 @@ export default {
     window.addEventListener('keydown', this.keyEvent)
     window.addEventListener('resize', this.resizeEvent)
     window.addEventListener('scroll', this.scrollEvent)
+    window.addEventListener('resize', this.windowsResize)
     document.addEventListener('dragover', this.preventDefault)
     document.addEventListener('dragenter', this.dragEnter)
     document.addEventListener('dragleave', this.dragLeave)
@@ -179,6 +268,7 @@ export default {
     window.removeEventListener('keydown', this.keyEvent)
     window.removeEventListener('resize', this.resizeEvent)
     window.removeEventListener('scroll', this.scrollEvent)
+    window.removeEventListener('resize', this.windowsResize)
     document.removeEventListener('dragover', this.preventDefault)
     document.removeEventListener('dragenter', this.dragEnter)
     document.removeEventListener('dragleave', this.dragLeave)
@@ -190,10 +280,34 @@ export default {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
     keyEvent (event) {
+      // No prompts are shown
       if (this.show !== null) {
         return
       }
 
+      // Esc!
+      if (event.keyCode === 27) {
+        // Reset files selection.
+        this.$store.commit('resetSelected')
+      }
+
+      // Del!
+      if (event.keyCode === 46) {
+        if (!this.user.perm.delete || this.selectedCount == 0) return
+
+        // Show delete prompt.
+        this.$store.commit('showHover', 'delete')
+      }
+
+      // F2!
+      if (event.keyCode === 113) {
+        if (!this.user.perm.rename || this.selectedCount !== 1) return
+
+        // Show rename prompt.
+        this.$store.commit('showHover', 'rename')
+      }
+
+      // Ctrl is pressed
       if (!event.ctrlKey && !event.metaKey) {
         return
       }
@@ -207,7 +321,7 @@ export default {
           break
         case 'c':
         case 'x':
-          this.copyCut(event, key)
+            this.copyCut(event, key)
           break
         case 'v':
           this.paste(event)
@@ -225,6 +339,10 @@ export default {
             }
           }
           break
+        case 's':
+            event.preventDefault()
+            document.getElementById('download-button').click()
+            break
       }
     },
     preventDefault (event) {
@@ -458,6 +576,16 @@ export default {
       }
 
       this.$store.commit('setReload', true)
+    },
+    openSearch () {
+      this.$store.commit('showHover', 'search')
+    },
+    toggleMultipleSelection () {
+      this.$store.commit('multiple', !this.multiple)
+      this.$store.commit('closeHovers')
+    },
+    windowsResize () {
+      this.width = window.innerWidth
     }
   }
 }

frontend/src/views/files/Preview.vue

@@ -66,7 +66,7 @@ import InfoButton from '@/components/buttons/Info'
 import DeleteButton from '@/components/buttons/Delete'
 import RenameButton from '@/components/buttons/Rename'
 import DownloadButton from '@/components/buttons/Download'
-import ExtendedImage from './ExtendedImage'
+import ExtendedImage from '@/components/files/ExtendedImage'
 
 const mediaTypes = [
   "image",