From f25e7afb032c4ad2b206c7862a612f1c8f3bcf0c Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 28 Dec 2022 21:38:33 +0100
Subject: [PATCH] Update PoC

---
 changelog/unreleased/enhancement-tiles-view   |  7 +++
 .../src/components/AppBar/AppBar.vue          |  6 ++-
 .../components/FilesList/ResourceTable.vue    | 45 +++++++++++--------
 .../src/composables/viewMode/constants.ts     |  8 ++++
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  |  2 +-
 5 files changed, 47 insertions(+), 21 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-tiles-view

diff --git a/changelog/unreleased/enhancement-tiles-view b/changelog/unreleased/enhancement-tiles-view
new file mode 100644
index 00000000000..05fb5c1335c
--- /dev/null
+++ b/changelog/unreleased/enhancement-tiles-view
@@ -0,0 +1,7 @@
+Enhancement: Add tiles view for resource display
+
+We've added a switch to change from the known resource table to a tiles view. 
+The change gets saved to the route and persisted across resource navigation.
+
+https://github.com/owncloud/web/pull/7991
+https://github.com/owncloud/web/issues/6378
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index e5851394794..ce25f4b0aec 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -142,7 +142,11 @@ export default defineComponent({
       if (!this.displayViewModeSwitch) {
         return []
       }
-      return [ViewModeConstants.condensedTable, ViewModeConstants.default]
+      return [
+        ViewModeConstants.tilesView,
+        ViewModeConstants.condensedTable,
+        ViewModeConstants.default
+      ]
     }
   },
   mounted() {
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 2f78d707014..c04549ee66a 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -1,5 +1,6 @@
 <template>
-  <oc-table
+  <component
+    :is="displayMode"
     :class="[
       hoverableQuickActions && 'hoverable-quick-actions',
       { condensed: viewMode === ViewModeConstants.condensedTable.name }
@@ -192,16 +193,19 @@
       <!-- @slot Footer of the files table -->
       <slot name="footer" />
     </template>
-  </oc-table>
+  </component>
 </template>
 
 <script lang="ts">
-import { eventBus } from 'web-pkg/src/services/eventBus'
 import maxSize from 'popper-max-size-modifier'
+import { basename, dirname } from 'path'
+import { defineComponent, PropType, computed } 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 { Resource } from 'web-client'
+import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
+import { ShareTypes } from 'web-client/src/helpers/share'
 import {
   useCapabilityFilesTags,
   useCapabilityProjectSpacesEnabled,
@@ -209,23 +213,20 @@ import {
   useStore,
   useUserContext
 } from 'web-pkg/src/composables'
-import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
+import { configurationManager } from 'web-pkg/src/configuration'
+import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/helpers'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { eventBus } from 'web-pkg/src/services/eventBus'
 
-import Rename from '../../mixins/actions/rename'
-import { defineComponent, PropType, computed } from 'vue'
-import { Resource } from 'web-client'
+import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED } from '../../constants'
+import { SortDir, ViewModeConstants } from '../../composables'
+import { SideBarEventTopics } from '../../composables/sideBar'
 import { ClipboardActions } from '../../helpers/clipboardActions'
+import { CreateTargetRouteOptions } from '../../helpers/folderLink'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
-import { ShareTypes } from 'web-client/src/helpers/share'
+import { determineSortFields } from '../../helpers/ui/resourceTable'
+import Rename from '../../mixins/actions/rename'
 import { createLocationSpaces, createLocationShares, createLocationCommon } from '../../router'
-import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/helpers'
-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'
 
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
@@ -434,6 +435,12 @@ export default defineComponent({
       'clipboardAction'
     ]),
     ...mapState('runtime/spaces', ['spaces']),
+    displayMode() {
+      if (this.viewMode === 'resource-tiles') {
+        return 'oc-tiles'
+      }
+      return 'oc-table'
+    },
     popperOptions() {
       return {
         modifiers: [
diff --git a/packages/web-app-files/src/composables/viewMode/constants.ts b/packages/web-app-files/src/composables/viewMode/constants.ts
index 58d87a68971..6f3ee0253ae 100644
--- a/packages/web-app-files/src/composables/viewMode/constants.ts
+++ b/packages/web-app-files/src/composables/viewMode/constants.ts
@@ -22,5 +22,13 @@ export abstract class ViewModeConstants {
       fillType: 'none'
     }
   }
+  static readonly tilesView: ViewMode = {
+    name: 'resource-tiles',
+    label: $gettext('Switch to tiles view'),
+    icon: {
+      name: 'apps-2',
+      fillType: 'line'
+    }
+  }
   static readonly queryName: string = 'view-mode'
 }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index a25c9dc8ece..4a6cf87a49f 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -274,7 +274,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle passes viewModes
       <!---->
       <!---->
       <div class="oc-flex">
-        <view-options-stub viewmodes="[object Object],[object Object]"></view-options-stub>
+        <view-options-stub viewmodes="[object Object],[object Object],[object Object]"></view-options-stub>
         <sidebar-toggle-stub></sidebar-toggle-stub>
       </div>
     </div>