From 8a49fe3681b91a49b44305f766cb5626d7d1c3a4 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 1 Aug 2024 11:39:22 +0200
Subject: [PATCH] feat: add basic client side search to app listing

---
 packages/web-app-app-store/package.json       |  5 ++
 .../src/components/AppTile.vue                | 37 ++++++++++--
 .../actions/useAppActionsDownload.ts          |  2 +-
 .../web-app-app-store/src/piniaStores/apps.ts |  3 +-
 packages/web-app-app-store/src/types.ts       |  3 +-
 .../web-app-app-store/src/views/AppList.vue   | 58 +++++++++++++++++--
 pnpm-lock.yaml                                |  9 +++
 7 files changed, 105 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-app-store/package.json b/packages/web-app-app-store/package.json
index f71f3a11005..a7d3ce71e33 100644
--- a/packages/web-app-app-store/package.json
+++ b/packages/web-app-app-store/package.json
@@ -5,13 +5,18 @@
   "description": "ownCloud app store",
   "license": "AGPL-3.0",
   "devDependencies": {
+    "@types/mark.js": "8.11.12",
     "web-test-helpers": "workspace:*"
   },
+  "dependencies": {
+    "mark.js": "^8.11.1"
+  },
   "peerDependencies": {
     "@ownclouders/web-client": "workspace:*",
     "@ownclouders/web-pkg": "workspace:*",
     "axios": "1.6.8",
     "design-system": "workspace:@ownclouders/design-system@*",
+    "fuse.js": "6.6.2",
     "lodash-es": "4.17.21",
     "pinia": "2.1.7",
     "vue-concurrency": "5.0.1",
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index c4788b1f710..ce0df9e5513 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -6,8 +6,25 @@
     </div>
     <div class="app-tile-body oc-card-body oc-p">
       <div class="app-content">
-        <h3 class="oc-my-s">{{ app.name }}</h3>
-        <p class="oc-my-s">{{ app.subtitle }}</p>
+        <div class="oc-flex oc-flex-middle">
+          <h3 class="oc-my-s oc-text-truncate mark-element">{{ app.name }}</h3>
+          <span class="oc-ml-s oc-text-muted oc-text-small">
+            v{{ app.mostRecentVersion.version }}
+          </span>
+        </div>
+        <p class="oc-my-s mark-element">{{ app.subtitle }}</p>
+      </div>
+      <div class="app-tags">
+        <oc-tag
+          v-for="tag in app.tags"
+          :key="`app-tag-${app.id}-${tag}`"
+          size="small"
+          class="oc-text-nowrap mark-element"
+          type="button"
+          @click="emitSearchTerm(tag)"
+        >
+          {{ tag }}
+        </oc-tag>
       </div>
       <oc-list class="app-actions">
         <action-menu-item
@@ -36,14 +53,21 @@ export default defineComponent({
       required: true
     }
   },
-  setup() {
+  emits: ['search'],
+  setup(props, { emit }) {
     const { downloadAppAction } = useAppActionsDownload()
 
     const actions = computed(() => {
       return [downloadAppAction]
     })
+
+    const emitSearchTerm = (term: string) => {
+      emit('search', term)
+    }
+
     return {
-      actions
+      actions,
+      emitSearchTerm
     }
   }
 })
@@ -73,6 +97,11 @@ export default defineComponent({
     justify-content: space-between;
     height: 100%;
 
+    .app-tags {
+      display: flex;
+      gap: 0.5rem;
+    }
+
     .app-actions {
       display: flex;
       justify-content: flex-start;
diff --git a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
index bac9c903fe9..237a3b5d97b 100644
--- a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
+++ b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
@@ -16,7 +16,7 @@ export const useAppActionsDownload = () => {
       return $gettext('Download')
     },
     handler: (options?) => {
-      const version = options.app.versions[0]
+      const version = options.app.mostRecentVersion
       const filename = version.filename || version.url.split('/').pop()
       triggerDownloadWithFilename(version.url, filename)
     },
diff --git a/packages/web-app-app-store/src/piniaStores/apps.ts b/packages/web-app-app-store/src/piniaStores/apps.ts
index aa22b3e1138..ce07ab6e53b 100644
--- a/packages/web-app-app-store/src/piniaStores/apps.ts
+++ b/packages/web-app-app-store/src/piniaStores/apps.ts
@@ -18,7 +18,8 @@ export const useAppsStore = defineStore(`${APPID}-apps`, () => {
         return appsList.apps.map((app) => {
           return {
             ...app,
-            repository: repo
+            repository: repo,
+            mostRecentVersion: app.versions[0]
           }
         })
       } catch (e) {
diff --git a/packages/web-app-app-store/src/types.ts b/packages/web-app-app-store/src/types.ts
index 9a4587fe47a..ca3468f8249 100644
--- a/packages/web-app-app-store/src/types.ts
+++ b/packages/web-app-app-store/src/types.ts
@@ -48,7 +48,8 @@ export const RawAppSchema = z.object({
 })
 
 export const AppSchema = RawAppSchema.extend({
-  repository: AppStoreRepositorySchema
+  repository: AppStoreRepositorySchema,
+  mostRecentVersion: AppVersionSchema
 })
 export type App = z.infer<typeof AppSchema>
 
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index 8a5cd6b8691..ea062cfd93e 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -1,22 +1,36 @@
 <template>
   <div class="app-list oc-px">
     <h2 v-text="$gettext('App Store')" />
+    <div class="oc-flex oc-flex-middle">
+      <oc-text-input
+        id="apps-filter"
+        v-model.trim="filterTerm"
+        :label="$gettext('Search')"
+        :clear-button-enabled="true"
+        autocomplete="off"
+      />
+    </div>
     <oc-list class="app-tiles">
       <app-tile
-        v-for="app in sortedApps"
+        v-for="app in filteredApps"
         :key="`app-${app.repository.name}-${app.id}`"
         :app="app"
         class="oc-my-m"
+        @search="setFilterTerm"
       />
     </oc-list>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref, unref, watch } from 'vue'
+import Mark from 'mark.js'
+import Fuse from 'fuse.js'
 import { useAppsStore } from '../piniaStores'
 import AppTile from '../components/AppTile.vue'
 import { storeToRefs } from 'pinia'
+import { App } from '../types'
+import { defaultFuseOptions } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'AppList',
@@ -25,12 +39,46 @@ export default defineComponent({
     const appsStore = useAppsStore()
     const { apps } = storeToRefs(appsStore)
 
-    const sortedApps = computed(() => {
-      return unref(apps).sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+    const filterTerm = ref('')
+    const setFilterTerm = (term: string) => {
+      filterTerm.value = term.trim()
+    }
+    const filter = (apps: App[], filterTerm: string) => {
+      if (!(filterTerm || '').trim()) {
+        return apps
+      }
+      const searchEngine = new Fuse(apps, {
+        ...defaultFuseOptions,
+        keys: ['name', 'subtitle', 'tags']
+      })
+      return searchEngine.search(filterTerm).map((r) => r.item)
+    }
+    const filteredApps = computed(() => {
+      // TODO: debounce the filtering by 100-300ms
+      return filter(unref(apps), unref(filterTerm)).sort((a, b) =>
+        a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+      )
+    })
+
+    const markInstance = ref(null)
+    onMounted(async () => {
+      await nextTick()
+      markInstance.value = new Mark('.mark-element')
+    })
+    watch(filterTerm, () => {
+      unref(markInstance)?.unmark()
+      if (unref(filterTerm)) {
+        unref(markInstance)?.mark(unref(filterTerm), {
+          element: 'span',
+          className: 'mark-highlight'
+        })
+      }
     })
 
     return {
-      sortedApps
+      filteredApps,
+      filterTerm,
+      setFilterTerm
     }
   }
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbe9db6b047..6846757a434 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -645,9 +645,15 @@ importers:
       design-system:
         specifier: workspace:@ownclouders/design-system@*
         version: link:../design-system
+      fuse.js:
+        specifier: 6.6.2
+        version: 6.6.2
       lodash-es:
         specifier: 4.17.21
         version: 4.17.21
+      mark.js:
+        specifier: ^8.11.1
+        version: 8.11.1
       pinia:
         specifier: 2.1.7
         version: 2.1.7(typescript@5.5.3)(vue@3.4.21(typescript@5.5.3))
@@ -661,6 +667,9 @@ importers:
         specifier: ^3.22.4
         version: 3.22.4
     devDependencies:
+      '@types/mark.js':
+        specifier: 8.11.12
+        version: 8.11.12
       web-test-helpers:
         specifier: workspace:*
         version: link:../web-test-helpers