From 59c2824c0fc2ba398f196188f7134827eddef57f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Can=20Alt=C4=B1parmak?= <can6parmak@gmail.com>
Date: Mon, 28 Mar 2022 21:12:39 +0300
Subject: [PATCH] Add title to list, close #10

---
 package.json   |  4 +++-
 pnpm-lock.yaml | 14 ++++++++++++++
 src/App.vue    | 26 +++++++++++++++++++++-----
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index cf99e9f..b840840 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logseq-hypothesis",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "dist/index.html",
   "author": "c6p",
   "scripts": {
@@ -12,6 +12,8 @@
   "dependencies": {
     "@logseq/libs": "^0.0.1-alpha.26",
     "axios": "^0.21.1",
+    "core-js-pure": "^3.21.1",
+    "fuse.js": "^6.5.3",
     "vue": "^2.6.12",
     "vue-select": "^3.13.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 945c536..34b7e76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,8 @@ lockfileVersion: 5.3
 specifiers:
   '@logseq/libs': ^0.0.1-alpha.26
   axios: ^0.21.1
+  core-js-pure: ^3.21.1
+  fuse.js: ^6.5.3
   vite: ^2.0.2
   vite-plugin-vue2: ^1.2.1
   vue: ^2.6.12
@@ -12,6 +14,8 @@ specifiers:
 dependencies:
   '@logseq/libs': 0.0.1-alpha.26
   axios: 0.21.1
+  core-js-pure: 3.21.1
+  fuse.js: 6.5.3
   vue: 2.6.14
   vue-select: 3.13.0_vue@2.6.14
 
@@ -989,6 +993,11 @@ packages:
       safe-buffer: 5.1.2
     dev: true
 
+  /core-js-pure/3.21.1:
+    resolution: {integrity: sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==}
+    requiresBuild: true
+    dev: false
+
   /core-js/2.6.12:
     resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
     deprecated: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
@@ -1102,6 +1111,11 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
+  /fuse.js/6.5.3:
+    resolution: {integrity: sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==}
+    engines: {node: '>=10'}
+    dev: false
+
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
diff --git a/src/App.vue b/src/App.vue
index 2f41c5d..b9dde00 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,8 +7,14 @@
         <button id="fetch" @click="fetchUpdates()">Fetch Updates</button>
         <label for="user">User:</label>
         <input id="user" placeholder="username@hypothes.is" :value="user" @change="setUser" />
-        <button id="create" @click="loadPage(uri)">Get Selected Page</button>
-        <v-select ref="select" class="select" id="uri" v-model="uri" :options="uris" :clearable="false"></v-select>
+        <button id="create" @click="loadPage(item)">Get Selected Page</button>
+        <v-select ref="select" class="select" id="uri" v-model="item" :get-option-label="i => `${i.title} | ${i.uri}`" :filter="fuseSearch" :options="items" :clearable="false">
+          <template #option="{uri, title}">
+            <b>{{ title }}</b>
+            <br />
+            {{ uri }}
+          </template>
+        </v-select>
       </div>
     </div>
     <div v-if="fetching || updating" class="lds-ripple"><div></div><div></div></div>
@@ -17,6 +23,8 @@
 
 <script>
 import axios from 'axios';
+import Fuse from 'fuse.js';
+import { from as iterFrom } from "core-js-pure/features/iterator";
 
 const delay = (t = 100) => new Promise(r => setTimeout(r, t))
 const flatten = array => array.reduce((a, {children = []}) => a.concat(flatten(children)), array);
@@ -34,11 +42,11 @@ export default {
       apiToken: "",
       user: "",
       annotations: [],
-      uri: "",
+      item: {uri:"", title:""}
     }
   },
   computed: {
-    uris: function() { return [...new Set((this.annotations || []).map(a => a.uri))].reverse() }
+    items: function() { return [...iterFrom(new Map((this.annotations || []).map(a => [a.uri, a.document.title?.[0]])).entries()).map(([uri, title]) => {return {uri, title}})].reverse() }
   },
   mounted () {
     logseq.once('ui:visible:changed', ({ visible }) => {
@@ -54,6 +62,14 @@ export default {
     })
   },
   methods: {
+    fuseSearch(options, search) {
+      const fuse = new Fuse(options, {
+        keys: ['title', 'uri']
+      })
+      return search.length
+        ? fuse.search(search).map(({ item }) => item)
+        : fuse.list
+    },
     hideMainUI() {
       logseq.hideMainUI()
     },
@@ -159,7 +175,7 @@ export default {
 
       return {title, noteMap}
     },
-    async loadPage(uri) {
+    async loadPage({uri}) {
       if (!uri || this.updating) return
       this.updating = true;