feat: tiles view for trash

packages/web-app-files/src/composables/extensions/useFolderViews.ts

@@ -3,7 +3,9 @@ import { useGettext } from 'vue3-gettext'
 import {
   folderViewsFavoritesExtensionPoint,
   folderViewsFolderExtensionPoint,
-  folderViewsProjectSpacesExtensionPoint
+  folderViewsProjectSpacesExtensionPoint,
+  folderViewsTrashExtensionPoint,
+  folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
 
 export const useFolderViews = (): FolderViewExtension[] => {
@@ -15,6 +17,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
       type: 'folderView',
       extensionPointIds: [
         folderViewsFolderExtensionPoint.id,
+        folderViewsTrashExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id
       ],
       folderView: {
@@ -33,7 +37,9 @@ export const useFolderViews = (): FolderViewExtension[] => {
       extensionPointIds: [
         folderViewsFolderExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
-        folderViewsFavoritesExtensionPoint.id
+        folderViewsFavoritesExtensionPoint.id,
+        folderViewsTrashExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id
       ],
       folderView: {
         name: 'resource-table',
@@ -51,7 +57,9 @@ export const useFolderViews = (): FolderViewExtension[] => {
       extensionPointIds: [
         folderViewsFolderExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
-        folderViewsFavoritesExtensionPoint.id
+        folderViewsFavoritesExtensionPoint.id,
+        folderViewsTrashExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id
       ],
       folderView: {
         name: 'resource-tiles',

packages/web-app-files/src/extensionPoints.ts

@@ -54,6 +54,16 @@ export const folderViewsProjectSpacesExtensionPoint: ExtensionPoint<FolderViewEx
   extensionType: 'folderView'
 }
 
+export const folderViewsTrashExtensionPoint: ExtensionPoint<FolderViewExtension> = {
+  id: 'app.files.folder-views.trash',
+  extensionType: 'folderView'
+}
+
+export const folderViewsTrashOverviewExtensionPoint: ExtensionPoint<FolderViewExtension> = {
+  id: 'app.files.folder-views.trash-overview',
+  extensionType: 'folderView'
+}
+
 export const extensionPoints = () => {
   return computed<ExtensionPoint<any>[]>(() => {
     return [
@@ -66,7 +76,8 @@ export const extensionPoints = () => {
       fileSideBarExtensionPoint,
       folderViewsFolderExtensionPoint,
       folderViewsFavoritesExtensionPoint,
-      folderViewsProjectSpacesExtensionPoint
+      folderViewsProjectSpacesExtensionPoint,
+      folderViewsTrashExtensionPoint
     ]
   })
 }

packages/web-app-files/src/views/spaces/GenericTrash.vue

@@ -2,10 +2,12 @@
   <div class="flex w-full">
     <files-view-wrapper>
       <app-bar
+        ref="appBarRef"
         :breadcrumbs="breadcrumbs"
         :has-bulk-actions="true"
         :is-side-bar-open="isSideBarOpen"
         :space="space"
+        :view-modes="viewModes"
       >
         <template #actions>
           <oc-button
@@ -35,7 +37,8 @@
             <span v-text="$gettext('This trash bin is empty')" />
           </template>
         </no-content-message>
-        <resource-table
+        <component
+          :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
@@ -48,7 +51,11 @@
           :sort-by="sortBy"
           :sort-dir="sortDir"
           :space="space"
+          :view-mode="viewMode"
           :has-actions="showActions"
+          :sort-fields="sortFields.filter((field) => field.name === 'name')"
+          :view-size="viewSize"
+          :style="folderViewStyle"
           @sort="handleSort"
         >
           <template #contextMenu="{ resource, isOpen }">
@@ -61,15 +68,22 @@
             <pagination :pages="paginationPages" :current-page="paginationPage" />
             <list-info v-if="paginatedResources.length > 0" class="w-full my-2" />
           </template>
-        </resource-table>
+        </component>
       </template>
     </files-view-wrapper>
     <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, unref } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  unref,
+  useTemplateRef
+} from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 import {
@@ -81,16 +95,17 @@ import {
   FileSideBar,
   Pagination,
   NoContentMessage,
-  ResourceTable,
   useDocumentTitle,
   useFileActionsEmptyTrashBin,
-  useUserStore
+  useUserStore,
+  useExtensionRegistry
 } from '@opencloud-eu/web-pkg'
 
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import { useResourcesViewDefaults } from '../../composables'
 import { isProjectSpaceResource, SpaceResource } from '@opencloud-eu/web-client'
+import { folderViewsTrashExtensionPoint } from '../../extensionPoints'
 
 const props = defineProps<{
   space?: SpaceResource | null
@@ -116,9 +131,32 @@ const {
   handleSort,
   sideBarActivePanel,
   selectedResources,
-  isResourceInSelection
+  isResourceInSelection,
+  viewMode,
+  viewSize,
+  sortFields
 } = resourcesViewDefaults
 
+const extensionRegistry = useExtensionRegistry()
+const viewModes = computed(() => {
+  return [
+    ...extensionRegistry.requestExtensions(folderViewsTrashExtensionPoint).map((e) => e.folderView)
+  ]
+})
+
+const folderView = computed(() => {
+  const viewMode = unref(resourcesViewDefaults.viewMode)
+  return unref(viewModes).find((v) => v.name === viewMode)
+})
+const appBarRef = useTemplateRef<ComponentPublicInstance<typeof AppBar>>('appBarRef')
+const folderViewStyle = computed(() => {
+  return {
+    ...(unref(folderView)?.isScrollable === false && {
+      height: `calc(100% - ${unref(appBarRef)?.$el.getBoundingClientRect().height}px)`
+    })
+  }
+})
+
 const isEmpty = computed(() => unref(resourcesViewDefaults.paginatedResources).length < 1)
 
 const { actions: emptyTrashBinActions } = useFileActionsEmptyTrashBin()

packages/web-app-files/src/views/trash/Overview.vue

@@ -1,12 +1,14 @@
 <template>
-  <div v-if="ready" class="flex">
+  <div class="flex w-full">
     <files-view-wrapper>
       <app-bar
+        ref="appBarRef"
         :breadcrumbs="breadcrumbs"
         :has-view-options="true"
         :has-hidden-files="false"
         :has-file-extensions="false"
         :has-pagination="false"
+        :view-modes="viewModes"
       />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -25,18 +27,24 @@
               autocomplete="off"
             />
           </div>
-          <resource-table
+
+          <component
+            :is="folderView.component"
             class="trash-table"
             :resources="displaySpaces"
             :fields-displayed="['name']"
             :sort-by="sortBy"
             :sort-dir="sortDir"
+            :sort-fields="sortFields.filter((field) => field.name === 'name')"
             :is-side-bar-open="isSideBarOpen"
             :header-position="fileListHeaderY"
             :are-thumbnails-displayed="false"
             :are-paths-displayed="false"
             :is-selectable="false"
             :show-rename-quick-action="false"
+            :view-mode="viewMode"
+            :view-size="viewSize"
+            :style="folderViewStyle"
             :target-route-callback="resourceTargetRouteCallback"
             @sort="handleSort"
           >
@@ -47,16 +55,21 @@
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />
             </template>
+            <template #actions="{ resource }">
+              <trash-quick-actions :space="resource" :item="resource" />
+            </template>
             <template #quickActions="{ resource }">
               <trash-quick-actions :space="resource" :item="resource" />
             </template>
             <template #footer>
               <div class="text-center w-full my-2">
-                <p class="text-role-on-surface-variant">{{ footerTextTotal }}</p>
+                <p data-testid="files-list-footer-info" class="text-role-on-surface-variant">
+                  {{ footerTextTotal }}
+                </p>
                 <p v-if="filterTerm" class="text-role-on-surface-variant">{{ footerTextFilter }}</p>
               </div>
             </template>
-          </resource-table>
+          </component>
         </template>
       </template>
     </files-view-wrapper>
@@ -65,7 +78,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, unref, watch } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  unref,
+  useTemplateRef,
+  watch
+} from 'vue'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
@@ -81,10 +103,9 @@ import {
   NoContentMessage,
   SortDir,
   useClientService,
-  useFileListHeaderPosition,
+  useExtensionRegistry,
   useResourcesStore,
   useRouter,
-  useSideBar,
   useSpacesStore,
   useUserStore
 } from '@opencloud-eu/web-pkg'
@@ -95,24 +116,50 @@ import {
   isProjectSpaceResource,
   SpaceResource
 } from '@opencloud-eu/web-client'
-import { ResourceTable } from '@opencloud-eu/web-pkg/src'
 import { RouteLocationNamedRaw } from 'vue-router'
 import TrashContextActions from '../../components/Trash/TrashContextActions.vue'
 import TrashQuickActions from '../../components/Trash/TrashQuickActions.vue'
 import { storeToRefs } from 'pinia'
+import { folderViewsTrashOverviewExtensionPoint } from '../../extensionPoints'
+import { useResourcesViewDefaults } from '../../composables'
 
 const userStore = useUserStore()
 const spacesStore = useSpacesStore()
 const router = useRouter()
 const { $gettext, $ngettext } = useGettext()
 const clientService = useClientService()
-const { y: fileListHeaderY } = useFileListHeaderPosition()
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
 const resourcesStore = useResourcesStore()
 
+const resourcesViewDefaults = useResourcesViewDefaults()
+
+const { isSideBarOpen, fileListHeaderY, sideBarActivePanel, viewMode, viewSize, sortFields } =
+  resourcesViewDefaults
+
+const folderView = computed(() => {
+  const viewMode = unref(resourcesViewDefaults.viewMode)
+  return unref(viewModes).find((v) => v.name === viewMode)
+})
+
 const { areEmptyTrashesShown } = storeToRefs(resourcesStore)
 
-const ready = ref(false)
+const extensionRegistry = useExtensionRegistry()
+const viewModes = computed(() => {
+  return [
+    ...extensionRegistry
+      .requestExtensions(folderViewsTrashOverviewExtensionPoint)
+      .map((e) => e.folderView)
+  ]
+})
+
+const appBarRef = useTemplateRef<ComponentPublicInstance<typeof AppBar>>('appBarRef')
+const folderViewStyle = computed(() => {
+  return {
+    ...(unref(folderView)?.isScrollable === false && {
+      height: `calc(100% - ${unref(appBarRef)?.$el.getBoundingClientRect().height}px)`
+    })
+  }
+})
+
 const sortBy = ref<keyof SpaceResource>('name')
 const sortDir = ref<SortDir>(SortDir.Asc)
 const filterTerm = ref('')
@@ -157,6 +204,7 @@ const loadResourcesTask = useTask(function* (signal) {
     ids: unref(spaces).map((space) => space.id),
     graphClient: clientService.graphAuthenticated
   })
+
   resourcesStore.initResourceList({ currentFolder: null, resources: unref(spaces) })
 })
 
@@ -241,11 +289,12 @@ const resourceTargetRouteCallback = ({
 
 let markInstance: Mark | undefined
 onMounted(async () => {
+  await loadResourcesTask.perform()
+
   if (unref(spaces).length === 1 && !isProjectSpaceResource(unref(spaces)[0])) {
     return router.push(getTrashLink(unref(spaces)[0]))
   }
-  ready.value = true
-  await loadResourcesTask.perform()
+
   await nextTick()
   markInstance = new Mark('.trash-table')
 })