feat: search
This commit is contained in:
liyasthomas
@@ -20,13 +20,13 @@
|
||||
class="rounded"
|
||||
@click.native="showInstallPrompt()"
|
||||
/>
|
||||
<!-- <ButtonSecondary
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${$t('app.search')} <kbd>/</kbd>`"
|
||||
svg="search"
|
||||
class="rounded"
|
||||
@click.native="showSearch = true"
|
||||
/> -->
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="`${$t('support.title')} <kbd>?</kbd>`"
|
||||
@@ -83,7 +83,7 @@
|
||||
<AppAnnouncement v-if="!isOnLine" />
|
||||
<FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
|
||||
<AppSupport :show="showSupport" @hide-modal="showSupport = false" />
|
||||
<!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" /> -->
|
||||
<AppSearch :show="showSearch" @hide-modal="showSearch = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -98,19 +98,19 @@ import { defineActionHandler } from "~/helpers/actions"
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const showSupport = ref(false)
|
||||
// const showSearch = ref(false)
|
||||
const showSearch = ref(false)
|
||||
|
||||
defineActionHandler("modals.support.toggle", () => {
|
||||
showSupport.value = !showSupport.value
|
||||
})
|
||||
// defineActionHandler("modals.search.toggle", () => {
|
||||
// showSearch.value = !showSearch.value
|
||||
// })
|
||||
defineActionHandler("modals.search.toggle", () => {
|
||||
showSearch.value = !showSearch.value
|
||||
})
|
||||
|
||||
return {
|
||||
currentUser: useReadonlyStream(currentUser$, null),
|
||||
showSupport,
|
||||
// showSearch,
|
||||
showSearch,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
229
components/app/Lunr.vue
Normal file
229
components/app/Lunr.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div key="outputHash">
|
||||
<div
|
||||
v-for="(shortcut, shortcutIndex) in theOutput"
|
||||
:key="`shortcut-${shortcutIndex}`"
|
||||
class="
|
||||
rounded
|
||||
cursor-pointer
|
||||
flex
|
||||
py-2
|
||||
px-4
|
||||
transition
|
||||
items-center
|
||||
group
|
||||
hover:bg-primaryLight
|
||||
"
|
||||
@click="$emit('action', shortcut.action)"
|
||||
>
|
||||
<i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
|
||||
{{ shortcut.icon }}
|
||||
</i>
|
||||
<span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
|
||||
{{ $t(shortcut.label) }}
|
||||
</span>
|
||||
<span
|
||||
v-for="(key, keyIndex) in shortcut.keys"
|
||||
:key="`shortcut-${shortcutIndex}-key-${keyIndex}`"
|
||||
class="shortcut-key"
|
||||
>
|
||||
{{ key }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lunr from "lunr"
|
||||
|
||||
export default {
|
||||
props: {
|
||||
input: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
search: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 1000,
|
||||
},
|
||||
stopWords: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
log: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
fields: {
|
||||
type: Object,
|
||||
default() {
|
||||
if (typeof this.input[0] === "object") {
|
||||
return this.input[0]
|
||||
}
|
||||
return {}
|
||||
},
|
||||
},
|
||||
perpendKey: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
outputHash: "",
|
||||
theOutput: [],
|
||||
cache: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hashInput() {
|
||||
return this.hashThis(JSON.stringify(this.input))
|
||||
},
|
||||
idx() {
|
||||
if (!this.input[0]) return {}
|
||||
const loaded = this.cache[this.hashInput]
|
||||
return loaded ? lunr.Index.load(loaded) : this.makeIndex(this.hashInput)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
search: {
|
||||
handler(search = "") {
|
||||
if (
|
||||
(!search.trim() || search === "undefined") &&
|
||||
Array.isArray(this.input)
|
||||
) {
|
||||
this.$emit("results-length", this.input.length)
|
||||
this.$emit("results", this.input.slice(0, this.limit))
|
||||
this.theOutput = this.input.slice(0, this.limit)
|
||||
return
|
||||
}
|
||||
const update = (output) => {
|
||||
if (output.then) {
|
||||
const that = this
|
||||
return output.then((newOutput) => {
|
||||
const hash = that.hashThis(JSON.stringify(newOutput))
|
||||
if (that.outputHash === hash) return
|
||||
that.outputHash = hash
|
||||
that.$emit("results-length", newOutput.length)
|
||||
that.$emit("results", newOutput.slice(0, that.limit))
|
||||
that.theOutput = newOutput.slice(0, that.limit)
|
||||
})
|
||||
}
|
||||
const hash = this.hashThis(JSON.stringify(output))
|
||||
if (this.outputHash === hash) return
|
||||
this.outputHash = hash
|
||||
try {
|
||||
this.$emit("results-length", output.length)
|
||||
this.$emit("results", output.slice(0, this.limit))
|
||||
this.theOutput = output.slice(0, this.limit)
|
||||
} catch (e) {
|
||||
console.warn(e, "???", output)
|
||||
}
|
||||
}
|
||||
if (this.output.then) {
|
||||
return this.output(search).then(async (output) => {
|
||||
update(await output)
|
||||
})
|
||||
}
|
||||
update(this.output(search))
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async output(search) {
|
||||
const that = this
|
||||
if ((await this.idx) && (await this.idx.search)) {
|
||||
return this.idx.search(`${search}*`).map(function (valu) {
|
||||
return that.input[+valu.ref]
|
||||
}, that)
|
||||
}
|
||||
if (this.idx.then)
|
||||
return this.idx.then((index) => {
|
||||
return index.search(`${search}*`).map(function (valu) {
|
||||
return that.input[+valu.ref]
|
||||
}, that)
|
||||
})
|
||||
// no index
|
||||
return this.input
|
||||
},
|
||||
makeIndex(hashInput) {
|
||||
const that = this
|
||||
if (this.input[0] && this.search) {
|
||||
const first = this.fields
|
||||
// if (this.log) console.log("feilds from ", first)
|
||||
|
||||
const stopWords = this.stopWords
|
||||
const documents = this.input.map(function (val, i) {
|
||||
const doc = {}
|
||||
const seen = []
|
||||
function replacer(key, value) {
|
||||
if (key[0] === "_") {
|
||||
return
|
||||
} else if (typeof value === "object" && value !== null) {
|
||||
if (seen.includes(key)) return
|
||||
else seen.push(key)
|
||||
}
|
||||
return value
|
||||
}
|
||||
Object.keys(val).forEach(function (key) {
|
||||
doc[key] = JSON.stringify(val[key], replacer)
|
||||
})
|
||||
return { __id: i, ...val }
|
||||
})
|
||||
const idx = lunr(function () {
|
||||
this.ref("__id")
|
||||
if (!stopWords) {
|
||||
this.pipeline.remove(lunr.stopWordFilter)
|
||||
this.pipeline.remove(lunr.stemmer)
|
||||
}
|
||||
Object.keys(first).forEach(function (key) {
|
||||
if (key[0] !== "_") {
|
||||
this.field(key)
|
||||
}
|
||||
}, this)
|
||||
documents.forEach(function (doc) {
|
||||
this.add(doc)
|
||||
}, this)
|
||||
// if (that.log) console.log(this)
|
||||
})
|
||||
that.cache[hashInput] = idx.toJSON()
|
||||
return idx
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
hashThis(message, n = 8) {
|
||||
if (+n === 0) return message
|
||||
let hash = 0
|
||||
if (message.length === 0) return this.hashThis(this.hex32(hash), n - 1)
|
||||
for (let i = 0; i < message.length; i++) {
|
||||
const char = message.charCodeAt(i)
|
||||
hash = (hash << 5) - hash + char
|
||||
hash = hash & hash // Convert to 32bit integer
|
||||
}
|
||||
return this.hashThis(this.hex32(hash), n - 1)
|
||||
},
|
||||
hex32(val) {
|
||||
val &= 0xffffffff
|
||||
const hex = val.toString(16).toUpperCase()
|
||||
return ("00000000" + hex).slice(-8)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shortcut-key {
|
||||
@apply bg-dividerLight;
|
||||
@apply rounded;
|
||||
@apply ml-2;
|
||||
@apply py-1;
|
||||
@apply px-2;
|
||||
@apply inline-flex;
|
||||
}
|
||||
</style>
|
||||
@@ -18,7 +18,15 @@
|
||||
pb-6
|
||||
"
|
||||
/>
|
||||
<AppLunr
|
||||
v-if="search"
|
||||
log
|
||||
:input="lunr"
|
||||
:search="search"
|
||||
@action="runAction"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="
|
||||
divide-y divide-dividerLight
|
||||
flex flex-col
|
||||
@@ -28,10 +36,7 @@
|
||||
hide-scrollbar
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(map, mapIndex) in filteredMappings"
|
||||
:key="`map-${mapIndex}`"
|
||||
>
|
||||
<div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
|
||||
<h5 class="my-2 text-secondaryLight py-2 px-4">
|
||||
{{ $t(map.section) }}
|
||||
</h5>
|
||||
@@ -49,10 +54,7 @@
|
||||
group
|
||||
hover:bg-primaryLight
|
||||
"
|
||||
@click="
|
||||
runAction(shortcut.action)
|
||||
hideModal()
|
||||
"
|
||||
@click="runAction(shortcut.action)"
|
||||
>
|
||||
<i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
|
||||
{{ shortcut.icon }}
|
||||
@@ -77,7 +79,7 @@
|
||||
<script>
|
||||
import { defineComponent } from "@nuxtjs/composition-api"
|
||||
import { invokeAction } from "~/helpers/actions"
|
||||
import { spotlight } from "~/helpers/shortcuts"
|
||||
import { spotlight, lunr } from "~/helpers/shortcuts"
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
@@ -87,25 +89,17 @@ export default defineComponent({
|
||||
return {
|
||||
search: "",
|
||||
mappings: spotlight,
|
||||
lunr,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredMappings() {
|
||||
return this.mappings.filter((mapping) =>
|
||||
mapping.shortcuts.some((shortcut) =>
|
||||
shortcut.keywords.some((keyword) =>
|
||||
keyword.toLowerCase().includes(this.search.toLowerCase())
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hideModal() {
|
||||
this.$emit("hide-modal")
|
||||
},
|
||||
runAction(command) {
|
||||
invokeAction(command, "path_from_invokeAction")
|
||||
this.search = ""
|
||||
this.hideModal()
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<ButtonSecondary svg="x" class="rounded" @click.native="close()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-primary border-b border-dividerLight">
|
||||
<!-- <div class="bg-primary border-b border-dividerLight">
|
||||
<div class="flex flex-col my-4 mx-6">
|
||||
<input
|
||||
v-model="filterText"
|
||||
@@ -37,7 +37,7 @@
|
||||
:placeholder="$t('action.search')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
class="
|
||||
divide-y divide-dividerLight
|
||||
@@ -86,7 +86,7 @@ export default defineComponent({
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterText: "",
|
||||
// filterText: "",
|
||||
mappings: shortcuts,
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user