From d8ccbbda8a7cc126bb5ca20b0fa9a03fdb54f76c Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 9 Jan 2023 20:48:10 +0100
Subject: [PATCH] Rebase after compat-mode-merge, alter approach of using
 ResourceTiles dynamically within ResourceTable

---
 .../src/components/OcTile/OcTile.vue          |  15 +--
 .../components/FilesList/ResourceTable.vue    | 127 ++++--------------
 .../components/FilesList/ResourceTiles.vue    |  37 +++--
 .../src/composables/filesList/index.ts        |  92 +++++++++++++
 .../src/views/spaces/GenericSpace.vue         |  30 ++++-
 5 files changed, 179 insertions(+), 122 deletions(-)
 create mode 100644 packages/web-app-files/src/composables/filesList/index.ts

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index ccab464f752..8b1128efb64 100644
--- 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
index efe0bc6806a..d9de046f4da 100644
--- 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,16 +191,16 @@
       <!-- @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,
@@ -209,30 +208,25 @@ import {
   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
index 260c72aca9b..db0f5ccb87f 100644
--- 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,10 +66,17 @@ 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', {
@@ -73,12 +84,14 @@ export default defineComponent({
           status: 'warning'
         })
       }
+      if (resource.type !== 'space' && resource.type !== 'folder') {
+        resourceRouteResolver.createFileAction(resource)
+      }
     }
 
     return {
-      EVENT_TROW_CONTEXTMENU,
       getRoute,
-      tileResourceClicked
+      emitTileClick
     }
   }
 })
diff --git a/packages/web-app-files/src/composables/filesList/index.ts b/packages/web-app-files/src/composables/filesList/index.ts
new file mode 100644
index 00000000000..12bfdc5094c
--- /dev/null
+++ b/packages/web-app-files/src/composables/filesList/index.ts
@@ -0,0 +1,92 @@
+import { unref, Ref } from 'vue'
+import { basename } from 'path'
+
+import { ConfigurationManager } from 'web-pkg/src'
+import { useConfigurationManager } from 'web-pkg/src/composables/configuration'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { createLocationSpaces, createLocationShares } from '../../router'
+import { CreateTargetRouteOptions } from '../../helpers/folderLink/types'
+import { Resource, SpaceResource } from 'web-client/src'
+import { buildShareSpaceResource } from 'web-client/src/helpers'
+
+type ResourceRouteResolverOptions = {
+  configurationManager?: ConfigurationManager
+  targetRouteCallback?: Ref<any>
+  space?: Ref<SpaceResource>
+  spaces: Ref<SpaceResource[]>
+}
+
+export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
+  const configurationManager = options.configurationManager || useConfigurationManager()
+
+  const getInternalSpace = (storageId) => {
+    return unref(options.space) || unref(options.spaces).find((space) => space.id === storageId)
+  }
+
+  const getMatchingSpace = (resource: Resource): SpaceResource => {
+    return (
+      getInternalSpace(resource.storageId) ||
+      buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: resource.name,
+        serverUrl: configurationManager.serverUrl
+      })
+    )
+  }
+
+  const targetRouteCallback = options.targetRouteCallback
+
+  const createFolderLink = (createTargetRouteOptions: CreateTargetRouteOptions) => {
+    if (unref(targetRouteCallback)) {
+      return unref(targetRouteCallback)(createTargetRouteOptions)
+    }
+
+    const { path, fileId, resource } = createTargetRouteOptions
+    let space
+    if (resource.shareId) {
+      space = buildShareSpaceResource({
+        shareId: resource.shareId,
+        shareName: basename(resource.shareRoot),
+        serverUrl: configurationManager.serverUrl
+      })
+    } else if (!resource.shareId && !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 = getMatchingSpace(resource)
+    }
+    if (!space) {
+      return {}
+    }
+    return createLocationSpaces(
+      'files-spaces-generic',
+      createFileRouteOptions(space, { path, fileId })
+    )
+  }
+
+  const createFileAction = (resource: Resource) => {
+    let space = 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
+     */
+    context.emit('fileClick', { space, resources: [resource] })
+  }
+
+  return {
+    getInternalSpace,
+    getMatchingSpace,
+    createFileAction,
+    createFolderLink
+  }
+}
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 45c3317e56f..ca875b5ee33 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -45,7 +45,7 @@
           </template>
         </no-content-message>
         <resource-table
-          v-else
+          v-else-if="viewMode !== 'resource-tiles'"
           id="files-space-table"
           v-model="selectedResourcesIds"
           class="files-table"
@@ -53,7 +53,6 @@
           :view-mode="viewMode"
           :are-thumbnails-displayed="displayThumbnails"
           :resources="paginatedResources"
-          :target-route-callback="resourceTargetRouteCallback"
           :header-position="fileListHeaderY"
           :drag-drop="true"
           :sort-by="sortBy"
@@ -90,6 +89,31 @@
             />
           </template>
         </resource-table>
+        <resource-tiles
+          v-else
+          :data="paginatedResources"
+          class="oc-px-m oc-pt-l"
+          @fileClick="$_fileActions_triggerDefaultAction"
+        >
+          <template #actions="{ item }">
+            <quick-actions
+              :class="item.preview"
+              class="oc-visible@s"
+              :item="item"
+              :actions="app.quickActions"
+            />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <list-info
+              v-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-tiles>
       </template>
     </files-view-wrapper>
     <side-bar :open="sideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
@@ -113,6 +137,7 @@ import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import QuickActions from '../../components/FilesList/QuickActions.vue'
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
+import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import SpaceHeader from '../../components/Spaces/SpaceHeader.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
@@ -161,6 +186,7 @@ export default defineComponent({
     Pagination,
     QuickActions,
     ResourceTable,
+    ResourceTiles,
     SideBar,
     SpaceHeader
   },