Rebase after compat-mode-merge, alter approach of using ResourceTiles…

… dynamically within ResourceTable
owncloud · Jan 9, 2023 · d8ccbbd · d8ccbbd
1 parent d8c5429
commit d8ccbbd
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 122 deletions.
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -9,7 +9,7 @@
       class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle"
       :resource="resource"
       :folder-link="resourceRoute"
-      @click="$emit('click', $event)"
+      @click="$emit('click')"
     >
       <oc-tag
         v-if="resource.disabled"
@@ -31,12 +31,8 @@
     </oc-resource-link>
     <div class="oc-card-body oc-p-s">
       <div class="oc-flex oc-flex-between oc-flex-middle">
-        <div class="oc-flex oc-flex-middle oc-text-truncate">
-          <oc-resource
-            :resource="resource"
-            :folder-link="resourceRoute"
-            @click="$emit('click', $event)"
-          />
+        <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+          <oc-resource :resource="resource" :folder-link="resourceRoute" @click="$emit('click')" />
         </div>
         <div class="oc-flex oc-flex-middle">
           <!-- Slot for individual actions -->
@@ -128,9 +124,10 @@ export default defineComponent({
     }
   }
 
-  .resource-name {
-    overflow: hidden;
+  .resource-name-wrapper {
     color: var(--oc-color-text-default);
+    max-width: 60%;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -1,6 +1,5 @@
 <template>
-  <component
-    :is="displayMode"
+  <oc-table
     :class="[
       hoverableQuickActions && 'hoverable-quick-actions',
       { condensed: viewMode === ViewModeConstants.condensedTable.name },
@@ -192,47 +191,42 @@
       <!-- @slot Footer of the files table -->
       <slot name="footer" />
     </template>
-  </component>
+  </oc-table>
 </template>
 
 <script lang="ts">
-import { eventBus } from 'web-pkg/src/services/eventBus'
+import { basename, dirname } from 'path'
 import maxSize from 'popper-max-size-modifier'
+import { defineComponent, PropType, computed, toRefs } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from '../../constants'
-import { SortDir } from '../../composables'
-import { determineSortFields } from '../../helpers/ui/resourceTable'
+import { useWindowSize } from '@vueuse/core'
+import { eventBus } from 'web-pkg/src/services/eventBus'
 import {
   useCapabilityFilesTags,
   useCapabilityProjectSpacesEnabled,
   useCapabilityShareJailEnabled,
   useStore,
   useUserContext
 } from 'web-pkg/src/composables'
-import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
 
 import Rename from '../../mixins/actions/rename'
-import { defineComponent, PropType, computed } from 'vue'
 import { Resource } from 'web-client'
-import { ClipboardActions } from '../../helpers/clipboardActions'
-import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
 import { ShareTypes } from 'web-client/src/helpers/share'
-import { createLocationSpaces, createLocationShares, createLocationCommon } from '../../router'
+import { createLocationShares, createLocationCommon } from '../../router'
 import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/helpers'
+import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from '../../constants'
+import { SortDir } from '../../composables'
+import { useResourceRouteResolver } from '../../composables/filesList'
 import { SideBarEventTopics } from '../../composables/sideBar'
-import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
-import { configurationManager } from 'web-pkg/src/configuration'
-import { CreateTargetRouteOptions } from '../../helpers/folderLink'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
-import { basename, dirname } from 'path'
-import { useWindowSize } from '@vueuse/core'
-import ResourceTiles from './ResourceTiles.vue'
+import { ViewModeConstants } from '../../composables/viewMode'
+import { ClipboardActions } from '../../helpers/clipboardActions'
+import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
+import { determineSortFields } from '../../helpers/ui/resourceTable'
+import { extractDomSelector, SpaceResource } from 'web-client/src/helpers'
+
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
 export default defineComponent({
-  components: {
-    ResourceTiles
-  },
   mixins: [Rename],
   model: {
     prop: 'selectedIds',
@@ -297,14 +291,6 @@ export default defineComponent({
       required: false,
       default: true
     },
-    /**
-     * Accepts a `path` and a `resource` param and returns a corresponding route object.
-     */
-    targetRouteCallback: {
-      type: Function,
-      required: false,
-      default: undefined
-    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -406,9 +392,13 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ['fileClick', 'select', 'sort', 'rowMounted', EVENT_FILE_DROPPED],
-  setup() {
+  setup(props, context) {
     const store = useStore()
+
+    const spaces = computed(() => {
+      return store.getters['runtime/spaces/spaces']
+    })
+
     const { width } = useWindowSize()
     const hasTags = computed(
       () => useCapabilityFilesTags().value && width.value >= TAGS_MINIMUM_SCREEN_WIDTH
@@ -417,9 +407,11 @@ export default defineComponent({
     return {
       ViewModeConstants,
       hasTags,
-      isUserContext: useUserContext({ store }),
       hasShareJail: useCapabilityShareJailEnabled(),
-      hasProjectSpaces: useCapabilityProjectSpacesEnabled()
+      hasProjectSpaces: useCapabilityProjectSpacesEnabled(),
+      isUserContext: useUserContext({ store }),
+      spaces,
+      ...useResourceRouteResolver({ ...toRefs(props), spaces }, context)
     }
   },
   data() {
@@ -437,13 +429,6 @@ export default defineComponent({
       'clipboardResources',
       'clipboardAction'
     ]),
-    ...mapState('runtime/spaces', ['spaces']),
-    displayMode() {
-      if (this.viewMode === 'resource-tiles') {
-        return 'resource-tiles'
-      }
-      return 'oc-table'
-    },
     popperOptions() {
       return {
         modifiers: [
@@ -675,36 +660,6 @@ export default defineComponent({
         resource: file
       })
     },
-    createFolderLink(options: CreateTargetRouteOptions) {
-      if (this.targetRouteCallback) {
-        return this.targetRouteCallback(options)
-      }
-
-      const { path, fileId, resource } = options
-      let space
-      if (resource.shareId) {
-        space = buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: basename(resource.shareRoot),
-          serverUrl: configurationManager.serverUrl
-        })
-      } else if (!resource.shareId && !this.getInternalSpace(resource.storageId)) {
-        if (path === '/') {
-          return createLocationShares('files-shares-with-me')
-        }
-        // FIXME: This is a hacky way to resolve re-shares, but we don't have other options currently
-        return { name: 'resolvePrivateLink', params: { fileId } }
-      } else {
-        space = this.getMatchingSpace(resource)
-      }
-      if (!space) {
-        return {}
-      }
-      return createLocationSpaces(
-        'files-spaces-generic',
-        createFileRouteOptions(space, { path, fileId })
-      )
-    },
     fileDragged(file) {
       this.addSelectedResource(file)
     },
@@ -769,7 +724,7 @@ export default defineComponent({
        * @property {object} resource The resource which was mounted as table row
        * @property {object} component The table row component
        */
-      this.$emit('rowMounted', resource, component)
+      this.$emit(this.constants.EVENT_TROW_MOUNTED, resource, component)
     },
     fileClicked(data) {
       /**
@@ -810,20 +765,7 @@ export default defineComponent({
       this.emitSelect(this.resources.map((resource) => resource.id))
     },
     emitFileClick(resource) {
-      let space = this.getMatchingSpace(resource)
-      if (!space) {
-        space = buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: resource.name,
-          serverUrl: configurationManager.serverUrl
-        })
-      }
-
-      /**
-       * Triggered when a default action is triggered on a file
-       * @property {object} resource resource for which the event is triggered
-       */
-      this.$emit('fileClick', { space, resources: [resource] })
+      this.createFileAction(resource)
     },
     isResourceClickable(resourceId) {
       if (!this.areResourcesClickable) {
@@ -876,19 +818,6 @@ export default defineComponent({
         ownerName: resource.owner[0].displayName
       })
     },
-    getInternalSpace(storageId) {
-      return this.space || this.spaces.find((space) => space.id === storageId)
-    },
-    getMatchingSpace(resource: Resource): SpaceResource {
-      return (
-        this.getInternalSpace(resource.storageId) ||
-        buildShareSpaceResource({
-          shareId: resource.shareId,
-          shareName: resource.name,
-          serverUrl: configurationManager.serverUrl
-        })
-      )
-    },
     getDefaultParentFolderName(resource) {
       if (this.hasProjectSpaces) {
         const matchingSpace = this.getMatchingSpace(resource)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -6,8 +6,8 @@
           :ref="`row-${index}`"
           :resource="resource"
           :resource-route="getRoute(resource)"
-          @click="tileResourceClicked(resource, $event)"
-          @contextmenu="$emit(EVENT_TROW_CONTEXTMENU, $refs[`row-${index}`][0], $event, resource)"
+          @contextmenu="$emit('contextmenuClicked', $refs[`row-${index}`][0], $event, resource)"
+          @click="emitTileClick(resource)"
         >
           <template #imageField="{ item }">
             <slot name="image" :item="item" />
@@ -24,16 +24,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 import { createLocationSpaces } from 'web-app-files/src/router'
 import { Resource, SpaceResource } from 'web-client'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { useStore, useTranslations } from 'web-pkg/src/composables'
 
-// Constants should match what is being used in OcTable/ResourceTable
-// Alignment regarding naming would be an API-breaking change and can
-// Be done at a later point in time?
-import { EVENT_TROW_CONTEXTMENU } from '../../constants'
+import { useResourceRouteResolver } from '../../composables/filesList'
 
 export default defineComponent({
   name: 'ResourceTiles',
@@ -46,10 +43,17 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup() {
+  emits: ['contextmenuClicked', 'fileClick'],
+  setup(props, context) {
     const store = useStore()
     const { $gettext } = useTranslations()
 
+    const spaces = computed(() => {
+      return store.getters['runtime/spaces/spaces']
+    })
+
+    const resourceRouteResolver = useResourceRouteResolver({ spaces }, context)
+
     const getRoute = (resource) => {
       if (resource.type === 'space') {
         return resource.disabled
@@ -62,23 +66,32 @@ export default defineComponent({
               })
             )
       }
-      return { path: '#' }
+      if (resource.type === 'folder') {
+        return resourceRouteResolver.createFolderLink({
+          path: resource.path,
+          fileId: resource.fileId,
+          resource: resource
+        })
+      }
+      return { path: '' }
     }
 
-    const tileResourceClicked = (resource, event) => {
+    const emitTileClick = (resource) => {
       // Needs to handle file actions and potentially disabled folders also
       if (resource.disabled && resource.type === 'space') {
         store.dispatch('showMessage', {
           title: $gettext('Disabled spaces cannot be entered'),
           status: 'warning'
         })
       }
+      if (resource.type !== 'space' && resource.type !== 'folder') {
+        resourceRouteResolver.createFileAction(resource)
+      }
     }
 
     return {
-      EVENT_TROW_CONTEXTMENU,
       getRoute,
-      tileResourceClicked
+      emitTileClick
     }
   }
 })