mirror of
https://github.com/filebrowser/filebrowser.git
synced 2024-06-07 23:00:43 +00:00
feat: show search progressively
License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
parent
ac512612e7
commit
7a6397af22
@ -23,7 +23,7 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="result">
|
<div id="result" ref="result">
|
||||||
<div>
|
<div>
|
||||||
<template v-if="isEmpty">
|
<template v-if="isEmpty">
|
||||||
<p>{{ text }}</p>
|
<p>{{ text }}</p>
|
||||||
@ -47,8 +47,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<ul v-else-if="results.length > 0">
|
<ul v-show="results.length > 0">
|
||||||
<li v-for="(s,k) in results" :key="k">
|
<li v-for="(s,k) in filteredResults" :key="k">
|
||||||
<router-link @click.native="close" :to="'./' + s.path">
|
<router-link @click.native="close" :to="'./' + s.path">
|
||||||
<i v-if="s.dir" class="material-icons">folder</i>
|
<i v-if="s.dir" class="material-icons">folder</i>
|
||||||
<i v-else class="material-icons">insert_drive_file</i>
|
<i v-else class="material-icons">insert_drive_file</i>
|
||||||
@ -69,8 +69,6 @@ import { mapState, mapGetters, mapMutations } from "vuex"
|
|||||||
import url from "@/utils/url"
|
import url from "@/utils/url"
|
||||||
import { search } from "@/api"
|
import { search } from "@/api"
|
||||||
|
|
||||||
// TODO: show fifty at the tie
|
|
||||||
|
|
||||||
var boxes = {
|
var boxes = {
|
||||||
image: { label: "images", icon: "insert_photo" },
|
image: { label: "images", icon: "insert_photo" },
|
||||||
audio: { label: "music", icon: "volume_up" },
|
audio: { label: "music", icon: "volume_up" },
|
||||||
@ -92,7 +90,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
show(val, old) {
|
show (val, old) {
|
||||||
this.active = val === "search"
|
this.active = val === "search"
|
||||||
|
|
||||||
if (old === "search" && !this.active) {
|
if (old === "search" && !this.active) {
|
||||||
@ -102,12 +100,19 @@ export default {
|
|||||||
|
|
||||||
document.body.style.overflow = "auto"
|
document.body.style.overflow = "auto"
|
||||||
this.reset()
|
this.reset()
|
||||||
|
this.value = ''
|
||||||
|
this.active = false
|
||||||
this.$refs.input.blur()
|
this.$refs.input.blur()
|
||||||
} else if (this.active) {
|
} else if (this.active) {
|
||||||
this.reload = false
|
this.reload = false
|
||||||
this.$refs.input.focus()
|
this.$refs.input.focus()
|
||||||
document.body.style.overflow = "hidden"
|
document.body.style.overflow = "hidden"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
value () {
|
||||||
|
if (this.results.length) {
|
||||||
|
this.reset()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -125,6 +130,9 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return this.value === '' ? this.$t("search.typeToSearch") : this.$t("search.pressToSearch")
|
return this.value === '' ? this.$t("search.typeToSearch") : this.$t("search.pressToSearch")
|
||||||
|
},
|
||||||
|
filteredResults () {
|
||||||
|
return this.results.slice(0, this.resultsCount)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -133,6 +141,12 @@ export default {
|
|||||||
this.closeHovers()
|
this.closeHovers()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this.$refs.result.addEventListener('scroll', event => {
|
||||||
|
if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) {
|
||||||
|
this.resultsCount += 50
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(["showHover", "closeHovers", "setReload"]),
|
...mapMutations(["showHover", "closeHovers", "setReload"]),
|
||||||
@ -157,8 +171,6 @@ export default {
|
|||||||
this.$refs.input.focus()
|
this.$refs.input.focus()
|
||||||
},
|
},
|
||||||
reset () {
|
reset () {
|
||||||
this.value = ''
|
|
||||||
this.active = false
|
|
||||||
this.ongoing = false
|
this.ongoing = false
|
||||||
this.resultsCount = 50
|
this.resultsCount = 50
|
||||||
this.results = []
|
this.results = []
|
||||||
@ -177,6 +189,7 @@ export default {
|
|||||||
|
|
||||||
this.ongoing = true
|
this.ongoing = true
|
||||||
|
|
||||||
|
|
||||||
this.results = await search(path, this.value)
|
this.results = await search(path, this.value)
|
||||||
this.ongoing = false
|
this.ongoing = false
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user