face-list: add search bar (fix #177)

package-lock.json

@@ -15,6 +15,7 @@
         "@nextcloud/vue": "7.4.0",
         "camelcase": "^7.0.1",
         "filerobot-image-editor": "^4.3.7",
+        "fuse.js": "^6.6.2",
         "justified-layout": "^4.1.0",
         "leaflet": "^1.9.3",
         "leaflet-edgebuffer": "^1.0.6",
@@ -4984,6 +4985,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -14359,6 +14368,11 @@
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "dev": true
     },
+    "fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

package.json

@@ -35,6 +35,7 @@
     "@nextcloud/vue": "7.4.0",
     "camelcase": "^7.0.1",
     "filerobot-image-editor": "^4.3.7",
+    "fuse.js": "^6.6.2",
     "justified-layout": "^4.1.0",
     "leaflet": "^1.9.3",
     "leaflet-edgebuffer": "^1.0.6",

src/components/modal/FaceList.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="outer" v-if="detail">
+    <div class="search">
+      <NcTextField
+        :value.sync="search"
+        :label="t('memories', 'Search')"
+        :placeholder="t('memories', 'Search')"
+        @input="searchChanged"
+      />
+    </div>
+
     <div class="photo" v-for="photo of detail" :key="photo.fileid">
       <Tag :data="photo" :noNavigate="true" @open="clickFace" />
     </div>
@@ -14,18 +23,25 @@ import { defineComponent } from "vue";
 import { IPhoto, ITag } from "../../types";
 import Tag from "../frame/Tag.vue";
 
+import NcTextField from "@nextcloud/vue/dist/Components/NcTextField";
+
 import * as dav from "../../services/DavRequests";
+import Fuse from "fuse.js";
 
 export default defineComponent({
   name: "FaceList",
   components: {
     Tag,
+    NcTextField,
   },
 
   data: () => ({
     user: "",
     name: "",
+    fullDetail: null as ITag[] | null,
     detail: null as ITag[] | null,
+    fuse: null as Fuse<ITag>,
+    search: "",
   }),
 
   watch: {
@@ -47,6 +63,8 @@ export default defineComponent({
       this.user = <string>this.$route.params.user || "";
       this.name = <string>this.$route.params.name || "";
       this.detail = null;
+      this.fullDetail = null;
+      this.search = "";
 
       let data = [];
       let flags = this.c.FLAG_IS_TAG;
@@ -63,15 +81,23 @@ export default defineComponent({
       });
       detail = detail.filter((photo: ITag) => {
         const pname = photo.name || photo.fileid.toString();
-        return photo.user_id !== this.user || pname !== this.name;
+        return photo.user_id === this.user && pname !== this.name;
       });
 
       this.detail = detail;
+      this.fullDetail = detail;
+      this.fuse = new Fuse(detail, { keys: ["name"] });
     },
 
     async clickFace(face: ITag) {
       this.$emit("select", face);
     },
+
+    searchChanged() {
+      this.detail = this.search
+        ? this.fuse.search(this.search).map((r) => r.item)
+        : this.fullDetail;
+    },
   },
 });
 </script>
@@ -82,7 +108,12 @@ export default defineComponent({
   max-height: calc(90vh - 80px - 4em);
   overflow-x: hidden;
   overflow-y: auto;
+
+  .search {
+    margin-bottom: 10px;
+  }
 }
+
 .photo {
   display: inline-block;
   position: relative;
@@ -94,4 +125,4 @@ export default defineComponent({
   width: calc(33.33%);
   aspect-ratio: 1/1;
 }
-</style>
+</style>