Mirror/filebrowser
1
0
Fork 0
mirror of https://github.com/filebrowser/filebrowser.git synced 2024-06-07 23:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show search progressively

Browse Source 
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
Henrique Dias 2019-01-06 10:06:08 +00:00
parent ac512612e7
commit 7a6397af22
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Search.vue
View File

@ -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" },
@ -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
} }