diff --git a/src/components/Search.vue b/src/components/Search.vue index 7c6086f3..211baf23 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -23,7 +23,7 @@ > -
+
-
    -
  • +
      +
    • folder insert_drive_file @@ -69,8 +69,6 @@ import { mapState, mapGetters, mapMutations } from "vuex" import url from "@/utils/url" import { search } from "@/api" -// TODO: show fifty at the tie - var boxes = { image: { label: "images", icon: "insert_photo" }, audio: { label: "music", icon: "volume_up" }, @@ -92,7 +90,7 @@ export default { } }, watch: { - show(val, old) { + show (val, old) { this.active = val === "search" if (old === "search" && !this.active) { @@ -102,12 +100,19 @@ export default { document.body.style.overflow = "auto" this.reset() + this.value = '' + this.active = false this.$refs.input.blur() } else if (this.active) { this.reload = false this.$refs.input.focus() document.body.style.overflow = "hidden" } + }, + value () { + if (this.results.length) { + this.reset() + } } }, computed: { @@ -125,6 +130,9 @@ export default { } return this.value === '' ? this.$t("search.typeToSearch") : this.$t("search.pressToSearch") + }, + filteredResults () { + return this.results.slice(0, this.resultsCount) } }, mounted() { @@ -133,6 +141,12 @@ export default { this.closeHovers() } }) + + this.$refs.result.addEventListener('scroll', event => { + if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) { + this.resultsCount += 50 + } + }) }, methods: { ...mapMutations(["showHover", "closeHovers", "setReload"]), @@ -157,8 +171,6 @@ export default { this.$refs.input.focus() }, reset () { - this.value = '' - this.active = false this.ongoing = false this.resultsCount = 50 this.results = [] @@ -177,6 +189,7 @@ export default { this.ongoing = true + this.results = await search(path, this.value) this.ongoing = false }