add pagination to search list page

add no content or no term message to search list page clone resource in preview filter search
owncloud · Jun 29, 2021 · 958997d · 958997d
1 parent 028f222
commit 958997d
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 19 deletions.
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
@@ -1,38 +1,71 @@
 <template>
   <div class="files-search-result">
+    <no-content-message v-if="!activeFiles.length" class="files-empty" icon="folder">
+      <template v-slot:message>
+        <span v-if="!!$route.query.term" v-translate>TODO NOT FOUND MESSAGE</span>
+        <span v-else v-translate>TODO NO TERM MESSAGE</span>
+      </template>
+    </no-content-message>
     <oc-table-files
+      v-else
       id="files-personal-table"
       class="files-table"
       :class="{ 'files-table-squashed': false }"
-      :resources="resources"
-      :target-route="targetRoute"
+      :resources="activeFiles"
+      :target-route="{ name: 'files-personal' }"
+      :are-paths-displayed="true"
+      :has-actions="false"
+      :is-selectable="false"
       @fileClick="$_fileActions_triggerDefaultAction"
       @rowMounted="rowMounted"
-    />
+    >
+      <template #footer>
+        <oc-pagination
+          v-if="pages > 1"
+          :pages="pages"
+          :current-page="parseInt($route.params.page) || 1"
+          :max-displayed="3"
+          :current-route="{
+            name: $route.name,
+            query: $route.query,
+            params: $route.params
+          }"
+          class="files-pagination uk-flex uk-flex-center oc-my-s"
+        />
+        <list-info
+          v-if="activeFiles.length > 0"
+          class="uk-width-1-1 oc-my-s"
+          :files="fileCount"
+          :folders="folderCount"
+          :size="fileSize"
+        />
+      </template>
+    </oc-table-files>
   </div>
 </template>
 
 <script>
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension } from '../../constants'
+import NoContentMessage from '../../components/NoContentMessage.vue'
 import debounce from 'lodash-es/debounce'
 import { loadPreview } from '../../helpers/resource'
 import { mapGetters } from 'vuex'
+import ListInfo from '../../components/FilesListFooterInfo.vue'
 import Vue from 'vue'
 import MixinFileActions from '../../mixins/fileActions'
+import MixinResourceCleanup from '../../mixins/resourceCleanup'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  mixins: [MixinFileActions],
+  components: { ListInfo, NoContentMessage },
+  mixins: [MixinFileActions, MixinResourceCleanup],
   props: ['searchResults'],
   computed: {
     ...mapGetters(['Files', ['configuration', 'user', 'getToken']]),
-    resources() {
+    allFiles() {
       return this.searchResults.map(searchResult => searchResult.data)
-    },
-    targetRoute() {
-      return { name: 'files-personal' }
     }
   },
 

diff --git a/packages/web-app-files/src/mixins/resourceCleanup.js b/packages/web-app-files/src/mixins/resourceCleanup.js
@@ -10,6 +10,10 @@ export default {
   mounted() {
     const { filterSearch } = Registry
 
+    if (!filterSearch.available) {
+      return
+    }
+
     filterSearch.on('reset', () => (this.filterTerm = ''))
     filterSearch.on('updateTerm', term => {
       if (!term) {
@@ -22,14 +26,6 @@ export default {
     })
   },
   watch: {
-    $route: {
-      handler: function(to, from) {
-        if (to.params?.item === from?.params?.item) {
-        }
-
-        // this.localSearch.reset()
-      }
-    },
     pages() {
       if (!this.$route.params.page) {
         return
@@ -55,7 +51,7 @@ export default {
       return this.allFiles.filter(file => file.type === 'folder').length
     },
     fileSize() {
-      this.allFiles.map(file => parseInt(file.size)).reduce((x, y) => x + y, 0)
+      return this.allFiles.map(file => parseInt(file.size)).reduce((x, y) => x + y, 0)
     },
     pages() {
       return Math.ceil(this.allFiles.length / this.filesPageLimit)

diff --git a/packages/web-app-files/src/search/filter/preview.ts b/packages/web-app-files/src/search/filter/preview.ts
@@ -17,7 +17,7 @@ export default class PreviewSearch implements SearchPreview {
     // no cache required, the filtering is client only and fast enough to recalculate the set
     // of results every time on the fly
     const resources: any[] = filterResources((this.store as any).getters['Files/files'], term, 5)
-    const searchResult = resources.map(resource => ({ id: resource.id, data: resource }))
+    const searchResult = resources.map(resource => ({ id: resource.id, data: { ...resource } }))
 
     return Promise.resolve(searchResult)
   }

diff --git a/packages/web-app-search/src/index.ts b/packages/web-app-search/src/index.ts
@@ -27,7 +27,7 @@ export default {
       children: [
         {
           name: 'provider-list',
-          path: 'list',
+          path: 'list/:page?',
           component: List
         }
       ]