better search with configurable simultaneous search limit, fixes #234

configuration_sample.php

@@ -19,6 +19,7 @@ return [
         'editable' => ['.txt', '.css', '.js', '.ts', '.html', '.php', '.json', '.md'],
         'date_format' => 'YY/MM/DD hh:mm:ss', // see: https://momentjs.com/docs/#/displaying/format/
         'guest_redirection' => '', // useful for external auth adapters
+        'search_simultaneous' => 5,
         'filter_entries' => [],
     ],
 

frontend/views/partials/Search.vue

@@ -4,11 +4,11 @@
       <p class="modal-card-title">
         {{ lang('Search') }}
       </p>
+      <b-loading :is-full-page="false" :active.sync="searching" />
     </header>
     <section class="modal-card-body">
       <b-input ref="input" v-model="term" @input="searchFiles" :placeholder="lang('Name')" />
       <br>
-      <b-loading :is-full-page="false" :active.sync="searching" />
       <ul ref="results">
         <li v-for="(item, index) in results" :key="index">
           <a @click="select(item)">{{ item.file.path }}</a>
@@ -33,6 +33,7 @@ export default {
     return {
       active: false,
       searching: false,
+      pending_getdirs: 0,
       term: '',
       results: [],
     }
@@ -40,7 +41,12 @@ export default {
   mounted() {
     this.active = true
     this.searching = false
+    this.pending_getdirs = 0
     this.$refs.input.focus()
+    if (!this.$store.state.config.search_simultaneous) {
+      this.$store.state.config.search_simultaneous = 5
+    }
+
   },
   beforeDestroy() {
     this.active = false
@@ -55,17 +61,26 @@ export default {
       this.results = []
       if (val.length > 0) {
         this.searching = true
-        this.getDir('/')
+        this.getDirLimited('/')
       }
     }, 1000),
+    getDirLimited(path) {
+      let interval = setInterval(() => {
+        if (this.active && this.pending_getdirs < this.$store.state.config.search_simultaneous) {
+          this.pending_getdirs++
+          clearInterval(interval)
+          this.getDir(path)
+        }
+      }, 200)
+    },
     getDir(path) {
-      if (!this.active) return
       this.searching = true
       api.getDir({
         dir: path
       })
         .then(ret => {
           this.searching = false
+          this.pending_getdirs--
           _.forEach(ret.files, item => {
             if (item.name.toLowerCase().indexOf(this.term.toLowerCase()) > -1) {
               this.results.push({
@@ -75,7 +90,7 @@ export default {
             }
           })
           _.forEach(_.filter(ret.files, ['type', 'dir']), subdir => {
-            this.getDir(subdir.path)
+            this.getDirLimited(subdir.path)
           })
         })
         .catch(error => this.handleError(error))