WIP shared resource view and routing

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

@@ -249,6 +249,15 @@ export default defineComponent({
       required: false,
       default: null
     },
+    /**
+     * Mapping with template `<resource.field>:<targetRoute.param>` which maps a field of a resource to a param of the target route.
+     * Defaults to `storageId:storageId` to map the `storageId` field of a resource to the `storageId` param of the target route.
+     */
+    targetRouteParamMapper: {
+      type: String,
+      required: false,
+      default: 'storageId:storageId'
+    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -532,23 +541,27 @@ export default defineComponent({
       this.openWithPanel('sharing-item')
     },
     folderLink(file) {
-      return this.createFolderLink(file.path, file.storageId)
+      return this.createFolderLink(file.path, file)
     },
     parentFolderLink(file) {
-      return this.createFolderLink(path.dirname(file.path), file.storageId)
+      return this.createFolderLink(path.dirname(file.path), file)
     },
-    createFolderLink(path, storageId) {
+    createFolderLink(path, file) {
       if (this.targetRoute === null) {
         return {}
       }
+      const params = {
+        item: path.replace(/^\//, ''),
+        ...this.targetRoute.params
+      }
+      const [fileKey, routeParamKey] = this.targetRouteParamMapper.split(':')
+      if (file[fileKey]) {
+        params[routeParamKey] = file[fileKey]
+      }
       return {
         name: this.targetRoute.name,
         query: this.targetRoute.query,
-        params: {
-          item: path.replace(/^\//, ''),
-          ...this.targetRoute.params,
-          ...(storageId && { storageId })
-        }
+        params
       }
     },
     fileDragged(file) {

packages/web-app-files/src/router/spaces.ts

@@ -64,7 +64,9 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         }
       },
       {
-        path: 'shares/:item*',
+        // FIXME: this is cheating. We rely on shares having a drive alias of `shares/<shareName>` and hardcode it here until we have dynamic routes with drive aliases.
+        path: 'shares/:shareName?',
+        // path: 'shares/:shareName?/:item*',
         name: locationSpacesShare.name,
         component: components.SharedResource,
         meta: {

packages/web-app-files/src/services/folder/loaderSharedWithMe.ts

@@ -1,7 +1,7 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
 import Router from 'vue-router'
 import { useTask } from 'vue-concurrency'
-import { aggregateResourceShares } from '../../helpers/resources'
+import { aggregateResourceShares, buildWebDavSpacesPath } from '../../helpers/resources'
 import { isLocationSharesActive } from '../../router'
 import { Store } from 'vuex'
 import get from 'lodash-es/get'
@@ -47,13 +47,12 @@ export class FolderLoaderSharedWithMe implements FolderLoader {
           getToken
         )
 
-        // FIXME, HACK 1: `/Shares` path prefix needs to be removed backend side. We remove it client side in the meantime.
-        // FIXME, HACK 2: webDavPath points to `files/<user>/Shares/xyz` but now needs to point to a shares webDavPath according to the storageId of the share. meh.
+        // FIXME, HACK 1: path needs to be empty because the share has it's own webdav endpoint (we access it's root and thus don't need any relative path). should ideally be removed backend side.
+        // FIXME, HACK 2: webDavPath points to `files/<user>/Shares/xyz` but now needs to point to a shares webdav root.
         if (get(store, 'getters.capabilities.spaces.enabled', false)) {
           resources.forEach((resource) => {
-            if (resource.path.startsWith('/Shares')) {
-              resource.path = resource.path.substring('/Shares'.length)
-            }
+            resource.path = ''
+            resource.webDavPath = buildWebDavSpacesPath(resource.storageId, '')
           })
         }
       }

packages/web-app-files/src/services/folder/spaces/loaderPersonal.ts

@@ -2,11 +2,7 @@ import { FolderLoader, FolderLoaderTask, TaskContext } from '../../folder'
 import Router from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { DavProperties } from 'web-pkg/src/constants'
-import {
-  buildResource,
-  buildWebDavFilesPath,
-  buildWebDavSpacesPath
-} from '../../../helpers/resources'
+import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources'
 import { isLocationSpacesActive } from '../../../router'
 import { Store } from 'vuex'
 import { fetchResources } from '../util'

packages/web-app-files/src/services/folder/spaces/loaderShare.ts

@@ -6,6 +6,8 @@ import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources
 import { Store } from 'vuex'
 import get from 'lodash-es/get'
 
+const SHARE_JAIL_ID = 'a0ca6a90-a365-4782-871e-d44447bbc668'
+
 export class FolderLoaderSpacesShare implements FolderLoader {
   public isEnabled(store: Store<any>): boolean {
     return get(store, 'getters.capabilities.spaces', false)
@@ -16,15 +18,16 @@ export class FolderLoaderSpacesShare implements FolderLoader {
   }
 
   public getTask(context: TaskContext): FolderLoaderTask {
-    const {
-      store,
-      clientService: { owncloudSdk: client }
-    } = context
+    const { store, clientService } = context
 
-    return useTask(function* (signal1, signal2, ref, storageId, path = null) {
+    // TODO: this needs the share id instead of the shareName.
+    return useTask(function* (signal1, signal2, ref, shareName, path = null) {
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
 
-      const webDavResponse = yield client.files.list(buildWebDavSpacesPath(storageId, path || ''))
+      const webDavResponse = yield clientService.owncloudSdk.files.list(
+        buildWebDavSpacesPath([SHARE_JAIL_ID, shareName].join('/'), path || '')
+      )
+      console.log(webDavResponse)
 
       const resources = webDavResponse.map(buildResource)
       const currentFolder = resources.shift()

packages/web-app-files/src/views/shares/SharedResource.vue

@@ -1,7 +1,17 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-bar
+      :has-bulk-actions="true"
+      :breadcrumbs="breadcrumbs"
+      :breadcrumbs-context-actions-items="[currentFolder]"
+    >
+      <template #actions>
+        <create-and-upload />
+      </template>
+    </app-bar>
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
+      <progress-bar v-show="$_uploadProgressVisible" id="files-upload-progress" class="oc-p-s" />
       <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
       <no-content-message
         v-else-if="isEmpty"
@@ -62,18 +72,21 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 // mixins
 import MixinAccessibleBreadcrumb from '../../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
 import MixinFilesListScrolling from '../../mixins/filesListScrolling'
 import MixinMountSideBar from '../../mixins/sidebar/mountSideBar'
 // components
+import AppBar from '../../components/AppBar/AppBar.vue'
+import ProgressBar from '../../components/Upload/ProgressBar.vue'
+import CreateAndUpload from '../../components/AppBar/CreateAndUpload.vue'
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 import QuickActions from '../../components/FilesList/QuickActions.vue'
-import ListLoader from '../../components/FilesList/ListLoader.vue'
-import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
+import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
@@ -88,15 +101,21 @@ import { basename, join } from 'path'
 import PQueue from 'p-queue'
 import { createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults } from '../../composables'
+import { defineComponent } from '@vue/composition-api'
 import { fetchResources } from '../../services/folder'
+import { Resource } from '../../helpers/resource'
+import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 
 const visibilityObserver = new VisibilityObserver()
 
-export default {
+export default defineComponent({
   components: {
+    AppBar,
+    ProgressBar,
+    CreateAndUpload,
     ResourceTable,
     QuickActions,
-    ListLoader,
+    AppLoadingSpinner,
     NoContentMessage,
     NotFoundMessage,
     ListInfo,
@@ -113,7 +132,7 @@ export default {
   ],
   setup() {
     return {
-      ...useResourcesViewDefaults(),
+      ...useResourcesViewDefaults<Resource, any, any[]>(),
       resourceTargetLocation: createLocationSpaces('files-spaces-share')
     }
   },
@@ -124,24 +143,28 @@ export default {
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
     ...mapGetters('Files', [
       'highlightedFile',
-      'selectedFiles',
       'currentFolder',
+      'inProgress',
       'totalFilesCount',
       'totalFilesSize'
     ]),
     ...mapGetters(['user', 'homeFolder', 'configuration']),
 
+    $_uploadProgressVisible() {
+      return this.inProgress.length > 0
+    },
     isEmpty() {
       return this.paginatedResources.length < 1
     },
 
-    selected: {
-      get() {
-        return this.selectedFiles
-      },
-      set(resources) {
-        this.SET_FILE_SELECTION(resources)
-      }
+    breadcrumbs() {
+      return concatBreadcrumbs(
+        {
+          text: this.$gettext('Shared with me'),
+          to: '/files/shares/with-me'
+        },
+        ...breadcrumbsFromPath(this.$route.path, this.$route.params.item)
+      )
     },
 
     folderNotFound() {
@@ -152,23 +175,23 @@ export default {
       return !this.configuration.options.disablePreviews
     },
 
-    storageId() {
-      return this.$route.params.storageId
+    shareName() {
+      return this.$route.params.shareName
     }
   },
 
   watch: {
     $route: {
       handler: function () {
-        this.loadResourcesTask.perform(this, this.storageId)
+        this.loadResourcesTask.perform(this, this.shareName)
       },
       immediate: true
     }
   },
 
   mounted() {
     const loadResourcesEventToken = bus.subscribe('app.files.list.load', (path) => {
-      this.loadResourcesTask.perform(this, this.storageId, path)
+      this.loadResourcesTask.perform(this, this.shareName, path)
     })
 
     this.$on('beforeDestroy', () => bus.unsubscribe('app.files.list.load', loadResourcesEventToken))
@@ -181,12 +204,7 @@ export default {
   methods: {
     ...mapActions('Files', ['loadPreview']),
     ...mapActions(['showMessage']),
-    ...mapMutations('Files', [
-      'REMOVE_FILE',
-      'REMOVE_FILE_FROM_SEARCHED',
-      'SET_FILE_SELECTION',
-      'REMOVE_FILE_SELECTION'
-    ]),
+    ...mapMutations('Files', ['REMOVE_FILE', 'REMOVE_FILE_FROM_SEARCHED', 'REMOVE_FILE_SELECTION']),
 
     fetchResources,
 
@@ -296,11 +314,7 @@ export default {
           }
         })
       }
-    },
-
-    isResourceInSelection(resource) {
-      return this.selected?.includes(resource)
     }
   }
-}
+})
 </script>

packages/web-app-files/src/views/shares/SharedWithMe.vue

@@ -113,6 +113,7 @@
         :resources="sharesItems"
         :are-resources-clickable="showsAcceptedShares"
         :target-route="resourceTargetLocation"
+        target-route-param-mapper="name:shareName"
         :header-position="fileListHeaderY"
         :sort-by="sharesSortBy"
         :sort-dir="sharesSortDir"