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>