From 6c2fa624a61e684234d05a3cffe67fe115382266 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 4 Sep 2023 12:06:59 +0200
Subject: [PATCH 01/13] Implement filter for Project Spaces

---
 .../src/views/spaces/Projects.vue             | 77 +++++++++++++++++--
 1 file changed, 70 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index f27efcfccc1..db0b15bf73d 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -29,12 +29,19 @@
             <span v-text="$gettext('You don\'t have access to any spaces')" />
           </template>
         </no-content-message>
-        <div v-else class="spaces-list oc-mt-l">
+        <div v-else class="spaces-list oc-mt-l" ref="tableRef">
+          <oc-text-input
+            id="spaces-filter"
+            v-model="filterTerm"
+            class="oc-ml-m oc-my-s"
+            :label="$gettext('Search')"
+            autocomplete="off"
+          />
           <resource-tiles
             v-if="viewMode === ViewModeConstants.tilesView.name"
             v-model:selectedIds="selectedResourcesIds"
             class="oc-px-m"
-            :data="spaces"
+            :data="paginatedItems"
             :resizable="true"
             :sort-fields="sortFields"
             :sort-by="sortBy"
@@ -68,7 +75,7 @@
           <resource-table
             v-else
             v-model:selectedIds="selectedResourcesIds"
-            :resources="spaces"
+            :resources="paginatedItems"
             class="spaces-table"
             :class="{ 'spaces-table-squashed': sideBarOpen }"
             :sticky="false"
@@ -127,9 +134,11 @@
 </template>
 
 <script lang="ts">
-import { onMounted, computed, defineComponent, unref } from 'vue'
+import { onMounted, computed, defineComponent, unref, ref, watch, nextTick } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { mapMutations, mapGetters } from 'vuex'
+import Mark from 'mark.js'
+import Fuse from 'fuse.js'
 
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
@@ -143,7 +152,11 @@ import {
   useRouteQueryPersisted,
   useSort,
   useStore,
-  useRouteName
+  useRouteName,
+  SortDir,
+  usePagination,
+  useRouter,
+  useRoute
 } from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
@@ -158,7 +171,7 @@ import { WebDAV } from 'web-client/src/webdav'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { useSelectedResources } from 'web-app-files/src/composables'
 import { sortFields as availableSortFields } from '../../helpers/ui/resourceTiles'
-import { formatFileSize } from 'web-pkg/src'
+import { defaultFuseOptions, formatFileSize } from 'web-pkg/src'
 import { useGettext } from 'vue3-gettext'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
 import { useKeyboardActions } from 'web-pkg/src/composables/keyboardActions'
@@ -167,6 +180,7 @@ import {
   useKeyboardTableMouseActions,
   useKeyboardTableActions
 } from 'web-app-files/src/composables/keyboardActions'
+import { orderBy } from 'lodash-es'
 
 export default defineComponent({
   components: {
@@ -182,10 +196,15 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+    const router = useRouter()
+    const route = useRoute()
     const clientService = useClientService()
     const { selectedResourcesIds } = useSelectedResources({ store })
     const { can } = useAbility()
     const { current: currentLanguage, $gettext } = useGettext()
+    const filterTerm = ref('')
+    const markInstance = ref(undefined)
+    const tableRef = ref(undefined)
 
     const runtimeSpaces = computed((): SpaceResource[] => {
       return store.getters['runtime/spaces/spaces'].filter((s) => isProjectSpaceResource(s)) || []
@@ -213,6 +232,41 @@ export default defineComponent({
       items: runtimeSpaces,
       fields: sortFields
     })
+    const filter = (spaces, filterTerm) => {
+      if (!(filterTerm || '').trim()) {
+        return spaces
+      }
+      const searchEngine = new Fuse(spaces, { ...defaultFuseOptions, keys: ['name'] })
+      const test = searchEngine.search(filterTerm).map((r) => r.item)
+      console.log(test)
+      return test
+    }
+    const items = computed(() =>
+      orderBy(
+        filter(unref(spaces), unref(filterTerm)),
+        unref(sortBy),
+        unref(sortDir) === SortDir.Desc
+      )
+    )
+    const {
+      items: paginatedItems,
+      page: currentPage,
+      total: totalPages
+    } = usePagination({ items, perPageDefault: '100', perPageStoragePrefix: 'spaces-list' })
+
+    watch(filterTerm, async () => {
+      const instance = unref(markInstance)
+      if (!instance) {
+        return
+      }
+      await router.push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
+      instance.unmark()
+      instance.mark(unref(filterTerm), {
+        element: 'span',
+        className: 'highlight-mark',
+        exclude: ['th *', 'tfoot *']
+      })
+    })
 
     const { scrollToResourceFromRoute } = useScrollTo()
 
@@ -281,9 +335,16 @@ export default defineComponent({
       )
     }
 
+    const isSpaceSelected = (space: SpaceResource) => {
+      return unref(selectedResourcesIds).some((id) => id === space.id)
+    }
+
     onMounted(async () => {
       await loadResourcesTask.perform()
       scrollToResourceFromRoute(unref(spaces))
+      nextTick(() => {
+        markInstance.value = new Mark(unref(tableRef).$el)
+      })
     })
 
     return {
@@ -306,7 +367,9 @@ export default defineComponent({
       getTotalQuota,
       getUsedQuota,
       getRemainingQuota,
-      getMemberCount
+      getMemberCount,
+      paginatedItems,
+      tableRef
     }
   },
   data: function () {

From 1739ef6ee05b957f65bea6272c2126b2ee2c57b5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 4 Sep 2023 12:16:21 +0200
Subject: [PATCH 02/13] Fix search not working

---
 packages/web-app-files/src/views/spaces/Projects.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index db0b15bf73d..a99efbcace4 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -237,9 +237,7 @@ export default defineComponent({
         return spaces
       }
       const searchEngine = new Fuse(spaces, { ...defaultFuseOptions, keys: ['name'] })
-      const test = searchEngine.search(filterTerm).map((r) => r.item)
-      console.log(test)
-      return test
+      return = searchEngine.search(filterTerm).map((r) => r.item)
     }
     const items = computed(() =>
       orderBy(
@@ -369,6 +367,7 @@ export default defineComponent({
       getRemainingQuota,
       getMemberCount,
       paginatedItems,
+      filterTerm,
       tableRef
     }
   },

From add7be534271e2e7d671738d1f296301da9a8a21 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 4 Sep 2023 12:54:49 +0200
Subject: [PATCH 03/13] Make highlighting work

---
 packages/web-app-files/src/views/spaces/Projects.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index a99efbcace4..bc89c355498 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -237,7 +237,7 @@ export default defineComponent({
         return spaces
       }
       const searchEngine = new Fuse(spaces, { ...defaultFuseOptions, keys: ['name'] })
-      return = searchEngine.search(filterTerm).map((r) => r.item)
+      return searchEngine.search(filterTerm).map((r) => r.item)
     }
     const items = computed(() =>
       orderBy(
@@ -333,15 +333,11 @@ export default defineComponent({
       )
     }
 
-    const isSpaceSelected = (space: SpaceResource) => {
-      return unref(selectedResourcesIds).some((id) => id === space.id)
-    }
-
     onMounted(async () => {
       await loadResourcesTask.perform()
       scrollToResourceFromRoute(unref(spaces))
       nextTick(() => {
-        markInstance.value = new Mark(unref(tableRef).$el)
+        markInstance.value = new Mark('.spaces-table')
       })
     })
 

From 870637d0147e38a5b1fa4109fa6023407f8ab966 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 4 Sep 2023 12:59:27 +0200
Subject: [PATCH 04/13] Add changelog

---
 changelog/unreleased/enhancement-add-project-space-filter | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-add-project-space-filter

diff --git a/changelog/unreleased/enhancement-add-project-space-filter b/changelog/unreleased/enhancement-add-project-space-filter
new file mode 100644
index 00000000000..5acefad346e
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-project-space-filter
@@ -0,0 +1,6 @@
+Bugfix: Add project space filter
+
+We've added the option to search for spaces in the project space overview.
+
+https://github.com/owncloud/web/pull/9649
+https://github.com/owncloud/web/issues/9650

From 8200806914672f571a3c0e03d7b21b7e0a13b611 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 4 Sep 2023 15:56:08 +0200
Subject: [PATCH 05/13] Add pagination

---
 .../src/views/spaces/Projects.vue             | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index bc89c355498..a4ee6d5dde8 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -125,6 +125,13 @@
               />
               <oc-resource-icon v-else class="oc-mr-s" :resource="resource" />
             </template>
+            <template #footer>
+              <pagination :pages="totalPages" :current-page="currentPage" />
+              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+                <p class="oc-text-muted">{{ footerTextTotal }}</p>
+                <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
+              </div>
+            </template>
           </resource-table>
         </div>
       </template>
@@ -159,6 +166,7 @@ import {
   useRoute
 } from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
+import Pagination from 'web-pkg/src/components/Pagination.vue'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
@@ -189,6 +197,7 @@ export default defineComponent({
     CreateSpace,
     FilesViewWrapper,
     NoContentMessage,
+    Pagination,
     ResourceTiles,
     ResourceTable,
     SideBar,
@@ -341,6 +350,17 @@ export default defineComponent({
       })
     })
 
+    const footerTextTotal = computed(() => {
+      return $gettext('%{spaceCount} spaces in total', {
+        spaceCount: unref(spaces).length.toString()
+      })
+    })
+    const footerTextFilter = computed(() => {
+      return $gettext('%{spaceCount} matching spaces', {
+        spaceCount: unref(items).length.toString()
+      })
+    })
+
     return {
       ...useSideBar(),
       spaces,
@@ -364,7 +384,11 @@ export default defineComponent({
       getMemberCount,
       paginatedItems,
       filterTerm,
-      tableRef
+      tableRef,
+      totalPages,
+      currentPage,
+      footerTextTotal,
+      footerTextFilter
     }
   },
   data: function () {

From 50311238152575d691a6f3b6d03c3aff6d48da39 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 09:20:59 +0200
Subject: [PATCH 06/13] Fix snapshot

---
 .../unit/views/spaces/__snapshots__/Projects.spec.ts.snap     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index c72b09da23c..cadabed0302 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -5,8 +5,8 @@ exports[`Projects view different files view states lists all available project s
   <div class="files-view-wrapper oc-width-expand">
     <div id="files-view">
       <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="true" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true" sidebaropen="false" viewmodedefault="resource-tiles" viewmodes="[object Object],[object Object]"></app-bar-stub>
-      <div class="spaces-list oc-mt-l">
-        <resource-table-stub arepathsdisplayed="false" areresourcesclickable="true" arethumbnailsdisplayed="true" class="spaces-table" dragdrop="false" fieldsdisplayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" hasactions="true" headerposition="0" hover="true" isselectable="true" paddingx="small" resourcedomselector="[Function]" resources="[object Object],[object Object]" selectedids="" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sortby="[Function]" sortdir="desc" sticky="false" viewmode="resource-table"></resource-table-stub>
+      <div class="oc-flex oc-flex-middle oc-flex-center oc-height-1-1 oc-width-1-1">
+        <oc-spinner-stub aria-hidden="true" aria-label="" id="app-loading-spinner" size="large"></oc-spinner-stub>
       </div>
     </div>
   </div>

From 67647ed854f6361692d8d33872edf1b726220b6b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 10:33:18 +0200
Subject: [PATCH 07/13] Fix unittests

---
 .../web-app-files/src/views/spaces/Projects.vue     | 11 +++++++++--
 .../tests/unit/views/spaces/Projects.spec.ts        |  9 +++++++++
 .../spaces/__snapshots__/Projects.spec.ts.snap      | 13 +++++++++++--
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index a4ee6d5dde8..6f22c4ddc3e 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -163,7 +163,9 @@ import {
   SortDir,
   usePagination,
   useRouter,
-  useRoute
+  useRoute,
+  useRouteQuery,
+  queryItemAsString
 } from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
@@ -255,11 +257,16 @@ export default defineComponent({
         unref(sortDir) === SortDir.Desc
       )
     )
+
     const {
       items: paginatedItems,
       page: currentPage,
       total: totalPages
-    } = usePagination({ items, perPageDefault: '100', perPageStoragePrefix: 'spaces-list' })
+    } = usePagination({
+      items,
+      perPageDefault: '50',
+      perPageStoragePrefix: 'spaces-list'
+    })
 
     watch(filterTerm, async () => {
       const instance = unref(markInstance)
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 82090efd76d..ff1a61c6798 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -1,5 +1,6 @@
 import Projects from '../../../../src/views/spaces/Projects.vue'
 import { mock } from 'jest-mock-extended'
+import { queryItemAsString } from 'web-pkg'
 
 import {
   createStore,
@@ -11,6 +12,12 @@ import {
   RouteLocation
 } from 'web-test-helpers'
 
+jest.mock('web-pkg/src/helpers', () => ({
+  ...jest.requireActual('web-pkg/src/helpers'),
+  displayPositionedDropdown: jest.fn()
+}))
+jest.mock('web-pkg/src/composables/appDefaults')
+
 const spacesResources = [
   {
     id: '1',
@@ -75,6 +82,8 @@ describe('Projects view', () => {
 })
 
 function getMountedWrapper({ mocks = {}, spaces = [], abilities = [], stubAppBar = true } = {}) {
+  jest.mocked(queryItemAsString).mockImplementationOnce(() => '1')
+  jest.mocked(queryItemAsString).mockImplementationOnce(() => '100')
   const defaultMocks = {
     ...defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ name: 'files-spaces-projects' })
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index cadabed0302..e755452a7f9 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -5,8 +5,17 @@ exports[`Projects view different files view states lists all available project s
   <div class="files-view-wrapper oc-width-expand">
     <div id="files-view">
       <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="true" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true" sidebaropen="false" viewmodedefault="resource-tiles" viewmodes="[object Object],[object Object]"></app-bar-stub>
-      <div class="oc-flex oc-flex-middle oc-flex-center oc-height-1-1 oc-width-1-1">
-        <oc-spinner-stub aria-hidden="true" aria-label="" id="app-loading-spinner" size="large"></oc-spinner-stub>
+      <div class="spaces-list oc-mt-l">
+        <div class="oc-ml-m oc-my-s">
+          <label class="oc-label" for="spaces-filter">Search</label>
+          <div class="oc-position-relative">
+            <!--v-if-->
+            <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+        </div>
+        <resource-table-stub arepathsdisplayed="false" areresourcesclickable="true" arethumbnailsdisplayed="true" class="spaces-table" dragdrop="false" fieldsdisplayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" hasactions="true" headerposition="0" hover="true" isselectable="true" paddingx="small" resourcedomselector="[Function]" resources="" selectedids="" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sortby="[Function]" sortdir="desc" sticky="false" viewmode="resource-table"></resource-table-stub>
       </div>
     </div>
   </div>

From e59a7615f024aeec18c688d6aa4a8b476472624b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 10:43:44 +0200
Subject: [PATCH 08/13] Add unittest for filter

---
 packages/web-app-files/src/views/spaces/Projects.vue       | 3 ++-
 .../web-app-files/tests/unit/views/spaces/Projects.spec.ts | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 6f22c4ddc3e..0a5c7fcc03b 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -395,7 +395,8 @@ export default defineComponent({
       totalPages,
       currentPage,
       footerTextTotal,
-      footerTextFilter
+      footerTextFilter,
+      items
     }
   },
   data: function () {
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index ff1a61c6798..3c2a20e6ade 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -1,5 +1,6 @@
 import Projects from '../../../../src/views/spaces/Projects.vue'
 import { mock } from 'jest-mock-extended'
+import { nextTick } from 'vue'
 import { queryItemAsString } from 'web-pkg'
 
 import {
@@ -71,6 +72,12 @@ describe('Projects view', () => {
       expect(wrapper.find('.no-content-message').exists()).toBeFalsy()
       expect(wrapper.find('.spaces-list').exists()).toBeTruthy()
     })
+    it('shows only filtered spaces if filter applied', async () => {
+      const { wrapper } = getMountedWrapper({ spaces: spacesResources })
+      wrapper.vm.filterTerm = 'Some other space'
+      await nextTick()
+      expect(wrapper.vm.items).toEqual([spacesResources[1]])
+    })
   })
   it('should display the "Create Space"-button when permission given', () => {
     const { wrapper } = getMountedWrapper({

From cf5cb02109910aa7a95ee31867069e8755545f3c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 10:45:55 +0200
Subject: [PATCH 09/13] Fix faulty naming

---
 packages/web-app-files/src/views/spaces/Projects.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 0a5c7fcc03b..8afdbdb8afc 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -29,7 +29,7 @@
             <span v-text="$gettext('You don\'t have access to any spaces')" />
           </template>
         </no-content-message>
-        <div v-else class="spaces-list oc-mt-l" ref="tableRef">
+        <div v-else ref="tilesTableRef" class="spaces-list oc-mt-l">
           <oc-text-input
             id="spaces-filter"
             v-model="filterTerm"
@@ -163,9 +163,7 @@ import {
   SortDir,
   usePagination,
   useRouter,
-  useRoute,
-  useRouteQuery,
-  queryItemAsString
+  useRoute
 } from 'web-pkg/src/composables'
 import { ImageDimension } from 'web-pkg/src/constants'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
@@ -215,7 +213,7 @@ export default defineComponent({
     const { current: currentLanguage, $gettext } = useGettext()
     const filterTerm = ref('')
     const markInstance = ref(undefined)
-    const tableRef = ref(undefined)
+    const tilesTableRef = ref(undefined)
 
     const runtimeSpaces = computed((): SpaceResource[] => {
       return store.getters['runtime/spaces/spaces'].filter((s) => isProjectSpaceResource(s)) || []
@@ -391,7 +389,7 @@ export default defineComponent({
       getMemberCount,
       paginatedItems,
       filterTerm,
-      tableRef,
+      tilesTableRef,
       totalPages,
       currentPage,
       footerTextTotal,

From f989c87cb2aff8cacfd3a0593b8504f2e6b7391c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 11:52:22 +0200
Subject: [PATCH 10/13] Add pagination for tiles

---
 packages/web-app-files/src/views/spaces/Projects.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 8afdbdb8afc..56762346b36 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -71,6 +71,13 @@
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />
             </template>
+            <template #footer>
+              <pagination :pages="totalPages" :current-page="currentPage" />
+              <div class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s">
+                <p class="oc-text-muted">{{ footerTextTotal }}</p>
+                <p v-if="filterTerm" class="oc-text-muted">{{ footerTextFilter }}</p>
+              </div>
+            </template>
           </resource-tiles>
           <resource-table
             v-else

From 7912ad431dac517830dc90294f497c4d75ae7d0a Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 11:55:07 +0200
Subject: [PATCH 11/13] Increase margin

---
 packages/web-app-files/src/views/spaces/Projects.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 56762346b36..c607d26d89c 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -33,7 +33,7 @@
           <oc-text-input
             id="spaces-filter"
             v-model="filterTerm"
-            class="oc-ml-m oc-my-s"
+            class="oc-ml-m oc-my-m"
             :label="$gettext('Search')"
             autocomplete="off"
           />
@@ -175,7 +175,7 @@ import {
 import { ImageDimension } from 'web-pkg/src/constants'
 import Pagination from 'web-pkg/src/components/Pagination.vue'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
-import { isProjectSpaceResource, SpaceResource } from 'web-client/src/helpers'
+import { isProjectSpaceResource, Resource, SpaceResource } from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import ResourceTiles from '../../components/FilesList/ResourceTiles.vue'
@@ -248,7 +248,7 @@ export default defineComponent({
       items: runtimeSpaces,
       fields: sortFields
     })
-    const filter = (spaces, filterTerm) => {
+    const filter = (spaces: Array<Resource>, filterTerm: string) => {
       if (!(filterTerm || '').trim()) {
         return spaces
       }

From 96944c467bbe5c64e62bff3716888be4f24812ee Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 12:09:42 +0200
Subject: [PATCH 12/13] Update snapshots

---
 .../tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index e755452a7f9..22de73e9371 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Projects view different files view states lists all available project s
     <div id="files-view">
       <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="true" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassharesnavigation="false" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true" sidebaropen="false" viewmodedefault="resource-tiles" viewmodes="[object Object],[object Object]"></app-bar-stub>
       <div class="spaces-list oc-mt-l">
-        <div class="oc-ml-m oc-my-s">
+        <div class="oc-ml-m oc-my-m">
           <label class="oc-label" for="spaces-filter">Search</label>
           <div class="oc-position-relative">
             <!--v-if-->

From 702d3b13b99941afbc9c5414f5dde992cbc1b476 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Sep 2023 13:29:02 +0200
Subject: [PATCH 13/13] Remove unussed ref

---
 packages/web-app-files/src/views/spaces/Projects.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index c607d26d89c..7dad1078c7a 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -29,7 +29,7 @@
             <span v-text="$gettext('You don\'t have access to any spaces')" />
           </template>
         </no-content-message>
-        <div v-else ref="tilesTableRef" class="spaces-list oc-mt-l">
+        <div v-else class="spaces-list oc-mt-l">
           <oc-text-input
             id="spaces-filter"
             v-model="filterTerm"
@@ -220,7 +220,6 @@ export default defineComponent({
     const { current: currentLanguage, $gettext } = useGettext()
     const filterTerm = ref('')
     const markInstance = ref(undefined)
-    const tilesTableRef = ref(undefined)
 
     const runtimeSpaces = computed((): SpaceResource[] => {
       return store.getters['runtime/spaces/spaces'].filter((s) => isProjectSpaceResource(s)) || []
@@ -396,7 +395,6 @@ export default defineComponent({
       getMemberCount,
       paginatedItems,
       filterTerm,
-      tilesTableRef,
       totalPages,
       currentPage,
       footerTextTotal,