Merge pull request #6609 from owncloud/space-trashbin-enhancements

Trash bin enhancements

changelog/unreleased/enhancement-trash-bin-breadcrumbs

@@ -0,0 +1,9 @@
+Enhancement: Trash bin breadcrumbs
+
+We've improved the trash bin in general:
+* Add a breadcrumb for personal trash bin
+* Improve the breadcrumb for spaces trash bin, also add 'Navigate to space' action to context menu
+* Fix wrong page title in spaces trash bin
+
+https://github.com/owncloud/web/pull/6609
+

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -22,7 +22,7 @@
           :items="breadcrumbs"
         >
           <template #contextMenu>
-            <context-actions v-if="showContextActions" :items="[currentFolder]" />
+            <context-actions v-if="showContextActions" :items="contextActionItems" />
           </template>
         </oc-breadcrumb>
         <shares-navigation v-if="isSharesLocation" />
@@ -95,6 +95,7 @@ export default {
       isPublicLocation: useActiveLocation(isLocationPublicActive, 'files-public-files'),
       isSpacesProjectsLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-projects'),
       isSpacesProjectLocation: useActiveLocation(isLocationSpacesActive, 'files-spaces-project'),
+      isTrashPersonalActive: useActiveLocation(isLocationTrashActive, 'files-trash-personal'),
       isTrashSpacesProjectActive: useActiveLocation(
         isLocationTrashActive,
         'files-trash-spaces-project'
@@ -119,7 +120,7 @@ export default {
     ...mapState('Files', ['areHiddenFilesShown']),
 
     showContextActions() {
-      if (this.isTrashSpacesProjectActive) {
+      if (this.isTrashPersonalActive) {
         return false
       }
       if (this.isSpacesProjectLocation) {
@@ -128,6 +129,12 @@ export default {
 
       return this.currentFolder && this.breadcrumbs.length > 1
     },
+    contextActionItems() {
+      if (this.isTrashSpacesProjectActive) {
+        return []
+      }
+      return [this.currentFolder]
+    },
     currentPath() {
       const path = this.$route.params.item || ''
       if (path.endsWith('/')) {
@@ -176,24 +183,34 @@ export default {
           this.isPersonalLocation ||
           this.isSpacesProjectsLocation ||
           this.isSpacesProjectLocation ||
+          this.isTrashPersonalActive ||
           this.isTrashSpacesProjectActive
         )
       ) {
         return []
       }
 
-      if (this.isTrashSpacesProjectActive) {
+      if (this.isTrashPersonalActive) {
         return [
           {
-            text: this.$gettext('Spaces'),
-            to: '/files/spaces/projects'
+            text: this.$gettext('Deleted files'),
+            to: '/files/trash'
           },
           {
-            text: this.$route.params.storageId,
-            to: `/files/spaces/projects/${this.$route.params.storageId}`
+            text: this.$gettext('Personal'),
+            onClick: () => bus.publish('app.files.list.load')
+          }
+        ]
+      }
+
+      if (this.isTrashSpacesProjectActive) {
+        return [
+          {
+            text: this.$gettext('Deleted files'),
+            to: '/files/trash'
           },
           {
-            text: this.$gettext('Deleted Files'),
+            text: this.$route.params.storageId,
             onClick: () => bus.publish('app.files.list.load')
           }
         ]

packages/web-app-files/src/components/FilesList/ContextActions.vue

@@ -41,6 +41,7 @@ import ShowDetails from '../../mixins/actions/showDetails'
 import ShowShares from '../../mixins/actions/showShares'
 import SetSpaceImage from '../../mixins/spaces/actions/setImage'
 import SetSpaceReadme from '../../mixins/spaces/actions/setReadme'
+import SpaceNavigate from '../../mixins/spaces/actions/navigate'
 
 export default {
   name: 'ContextActions',
@@ -64,7 +65,8 @@ export default {
     ShowDetails,
     ShowShares,
     SetSpaceImage,
-    SetSpaceReadme
+    SetSpaceReadme,
+    SpaceNavigate
   ],
 
   props: {
@@ -165,7 +167,8 @@ export default {
         ...this.$_acceptShare_items,
         ...this.$_declineShare_items,
         ...this.$_setSpaceImage_items,
-        ...this.$_setSpaceReadme_items
+        ...this.$_setSpaceReadme_items,
+        ...this.$_navigate_space_items
       ].filter((item) => item.isEnabled(this.filterParams))
     },
 

packages/web-app-files/src/components/Trashbin.vue → packages/web-app-files/src/components/TrashBin.vue

@@ -62,7 +62,7 @@ import { useResourcesViewDefaults } from '../composables'
 import { bus } from 'web-pkg/src/instance'
 
 export default {
-  name: 'Trashbin',
+  name: 'TrashBin',
 
   components: { ResourceTable, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
 

packages/web-app-files/src/helpers/resources.js

@@ -543,7 +543,22 @@ export function buildDeletedResource(resource) {
     indicators: [],
     canUpload: () => false,
     canDownload: () => false,
-    canBeDeleted: () => true,
+    canBeDeleted: () => {
+      /** FIXME: once https://github.com/owncloud/ocis/issues/3339 gets implemented,
+       * we want to add a check if the permission is set.
+       * We might to be careful and do an early return true if DavProperty.Permissions is not set
+       * as oc10 does not support it.
+       **/
+      return true
+    },
+    canBeRestored: function () {
+      /** FIXME: once https://github.com/owncloud/ocis/issues/3339 gets implemented,
+       * we want to add a check if the permission is set.
+       * We might to be careful and do an early return true if DavProperty.Permissions is not set
+       * as oc10 does not support it.
+       **/
+      return true
+    },
     canRename: () => false,
     canShare: () => false,
     canCreate: () => false,

packages/web-app-files/src/mixins/actions/restore.js

@@ -26,6 +26,10 @@ export default {
             ) {
               return false
             }
+            if (!resources.every((r) => r.canBeRestored())) {
+              return false
+            }
+
             return resources.length > 0
           },
           componentType: 'oc-button',

packages/web-app-files/src/mixins/spaces/actions/navigate.js

@@ -0,0 +1,37 @@
+import { createLocationSpaces, isLocationTrashActive } from '../../../router'
+
+export default {
+  computed: {
+    $_navigate_space_items() {
+      return [
+        {
+          name: 'navigate',
+          icon: 'layout-grid',
+          label: () => {
+            return this.$gettext('Navigate to space')
+          },
+          handler: this.$_navigate_space_trigger,
+          isEnabled: ({ resources }) => {
+            if (resources.length) {
+              return false
+            }
+            return isLocationTrashActive(this.$router, 'files-trash-spaces-project')
+          },
+          componentType: 'oc-button',
+          class: 'oc-files-actions-navigate-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    $_navigate_space_trigger() {
+      this.$router.push(
+        createLocationSpaces('files-spaces-project', {
+          params: {
+            storageId: this.$router.currentRoute.params.storageId
+          }
+        })
+      )
+    }
+  }
+}

packages/web-app-files/src/views/Trashbin.vue

@@ -1,9 +1,9 @@
-<template><Trashbin /></template>
+<template><trash-bin /></template>
 
 <script>
-import Trashbin from '../components/Trashbin.vue'
+import TrashBin from '../components/TrashBin.vue'
 
 export default {
-  components: { Trashbin }
+  components: { TrashBin }
 }
 </script>

packages/web-app-files/src/views/spaces/Project.vue

@@ -238,7 +238,7 @@ export default {
       'totalFilesCount',
       'totalFilesSize'
     ]),
-    ...mapGetters(['user', 'getToken']),
+    ...mapGetters(['user', 'getToken', 'configuration']),
 
     selected: {
       get() {
@@ -360,7 +360,7 @@ export default {
   async mounted() {
     await this.loadResourcesTask.perform(this, false, this.$route.params.item || '')
 
-    document.title = `${this.space.name} - ${this.$route.meta.title}`
+    document.title = `${this.$route.meta.title} - ${this.space.name} - ${this.configuration.currentTheme.general.name}`
     this.$route.params.name = this.space.name
 
     const loadSpaceEventToken = bus.subscribe('app.files.list.load', (path) => {

packages/web-app-files/src/views/spaces/Trashbin.vue

@@ -1,9 +1,44 @@
-<template><Trashbin :no-content-message="$gettext('Space has no deleted files')" /></template>
+<template><trash-bin :no-content-message="$gettext('Space has no deleted files')" /></template>
 
 <script>
-import Trashbin from '../../components/Trashbin.vue'
+import TrashBin from '../../components/TrashBin.vue'
+import { useStore } from 'web-pkg/src/composables'
+import { ref } from '@vue/composition-api'
+import { clientService } from 'web-pkg/src/services'
+import { useTask } from 'vue-concurrency'
+import { buildSpace } from '../../helpers/resources'
+import { mapGetters } from 'vuex'
 
 export default {
-  components: { Trashbin }
+  components: { TrashBin },
+
+  setup() {
+    const store = useStore()
+    const space = ref({})
+    const graphClient = clientService.graphAuthenticated(
+      store.getters.configuration.server,
+      store.getters.getToken
+    )
+
+    const loadResourcesTask = useTask(function* (signal, ref) {
+      const response = yield graphClient.drives.getDrive(ref.$router.currentRoute.params.storageId)
+      const loadedSpace = response.data || {}
+      space.value = buildSpace(loadedSpace)
+    })
+
+    return {
+      space,
+      loadResourcesTask
+    }
+  },
+
+  computed: {
+    ...mapGetters(['configuration'])
+  },
+
+  async mounted() {
+    await this.loadResourcesTask.perform(this)
+    document.title = `${this.$router.currentRoute.meta.title} - ${this.space.name} - ${this.configuration.currentTheme.general.name}`
+  }
 }
 </script>