feat: правильное автодополнение, когда выдается нулевой результат

components/QueryInput.vue

@@ -5,7 +5,6 @@
       ref="input"
       placeholder="query"
       v-model="q"
-      autofocus
       title="Например:
   engine=bitrix&prod=1"
       v-bind:style="{width: filterWidth + 'px'}"
@@ -75,7 +74,6 @@
 <script>
 import _ from "lodash";
 export default {
-  props: ["availableFields"],
   data() {
     return {
       q: "",
@@ -90,6 +88,10 @@ export default {
       return this.$store.state.tests;
     },
 
+    allFields() {
+      return this.$store.state.allFields;
+    },
+
     globalQ() {
       return this.$store.state.q;
     },
@@ -111,6 +113,8 @@ export default {
     },
     globalQ() {
       // update local data when store value changes
+      // console.log('this.q: ', this.q);
+      // console.log('this.globalQ: ', this.globalQ);
       this.q = this.globalQ;
       this.$refs.input.focus();
     }
@@ -177,6 +181,9 @@ export default {
     },
 
     // autocomplete of query
+    // подсказывает из доступных полей и значений
+    // если кол-во полей или значений равно нулю, тогда подсказки берутся из всех полей и сайтов,
+    // это нужно, чтобы выбраться из сломанного запроса
     queryComplete(q, cb) {
       // в q старое значение, надо брать this.q
       if (!this.q || this.completionProcess) return cb([]);
@@ -188,30 +195,30 @@ export default {
         this.completionProcess = false;
       }, 500);
 
-      if (lastPart.match(/=/)) {
+      if (lastPart.match(/[<=>]/)) {
         // field value completion
         this.currentPart = "value";
-        const fieldMatch = lastPart.match(/(.*?)=/);
+        const fieldMatch = lastPart.match(/(.*?)[<=>]/);
         const fieldName = fieldMatch[1];
-        const matchFields = this.availableFields.filter(
+        const matchFields = this.allFields.filter(
           filter => filter.name == fieldName
         );
         const valueMatch = lastPart.match(/=(.*)/);
-        const qValue = valueMatch ? valueMatch[1] : "";
-        const qRegex = new RegExp(qValue, "i");
-
-        const filteredSites = this.$store.state.filteredSites;
-        const values = filteredSites.map(site => {
-          console.log("site: ", site);
-          console.log("fieldName: ", fieldName);
+        const fieldValue = valueMatch ? valueMatch[1] : "";
+        const qRegex = new RegExp(fieldValue, "i");
+
+        const sites =
+          this.$store.state.filteredSites.length > 0
+            ? this.$store.state.filteredSites
+            : this.$store.state.sites;
+        const values = sites.map(site => {
           if (
-            !qValue ||
-            (site[fieldName] && site[fieldName].includes(qValue))
+            !fieldValue ||
+            (site[fieldName] && site[fieldName].toString().includes(fieldValue))
           ) {
             return site[fieldName];
           }
         });
-        console.log("values: ", values);
         const uniqueValues = values.filter((v, i, a) => a.indexOf(v) === i);
         const sortedValues = uniqueValues.sort();
         cb(
@@ -222,7 +229,11 @@ export default {
       } else {
         // field name completion
         this.currentPart = "name";
-        const matchFields = this.availableFields.filter(filter =>
+        const fields =
+          this.$store.state.availableFields.length > 0
+            ? this.$store.state.availableFields
+            : this.allFields;
+        const matchFields = fields.filter(filter =>
           filter.name.includes(lastPart)
         );
         const sortedFields = matchFields.sort((a, b) =>
@@ -267,11 +278,11 @@ export default {
 
     // название тега в выбранных фильтрах
     tagName(tag) {
-      let tagName = tag.replace(/=1$/, "").replace(/([<>=])/, " $1 ");
+      let tagName = tag.replace(/=1$/, "").replace(/([<=>])/, " $1 ");
       const match = tag.match(/^([a-z0-9_]+)(.*)/);
       if (match) {
         let fieldName = match[1];
-        let fieldValue = match[2].replace(/([<>=])/, " $1 ");
+        let fieldValue = match[2].replace(/([<=>])/, " $1 ");
         const info = this.tests[fieldName];
         if (info) {
           if (info.comment) fieldName = info.comment;

components/Toolbar.vue

@@ -26,7 +26,7 @@
       ></FieldGroup>
     </div>
 
-    <QueryInput class="filter__query" :availableFields="availableFields"></QueryInput>
+    <QueryInput class="filter__query"></QueryInput>
 
     <div class="filter-presets">filters:
       <FilterPresetButton :preset="preset" v-for="preset in filterPresets" :key="preset.name"></FilterPresetButton>

store/index.js

@@ -4,6 +4,65 @@ import dateformat from 'dateformat';
 import validateMap from '~/assets/js/validate.conf';
 import moment from 'moment';
 
+const fieldsBySites = (sites, tests) => {
+  let excludedFields = [
+    // objects
+    'id',
+    'tests',
+    // duplicates
+    'meta_engine',
+    'meta_screenshots',
+    'meta_prod',
+    'site_root',
+    // not working
+    'total_pages_load_time',
+    'result',
+    'max_result',
+    'result_percent'
+  ];
+
+  let fields = [];
+  let fieldPaths = [];
+
+  for (let siteInd in sites) {
+    let site = sites[siteInd];
+
+    // раньше из некоторых вложенных объектов доставались поля,
+    // теперь они прессуются в одномерный объект
+    let objs = {
+      '': site
+      // 'site_info.': site.site_info,
+      // 'meta.': site.meta
+    };
+
+    for (let prefix in objs) {
+      const obj = objs[prefix];
+      for (let fieldName in obj) {
+        let fieldPath = prefix + fieldName;
+        if (excludedFields.includes(fieldPath)) continue;
+        if (fieldPaths.includes(fieldPath)) continue;
+
+        let field = {
+          name: fieldPath,
+          title: fieldName
+        };
+
+        // info from /etc/site-info.yml
+        const info = tests[fieldName];
+        if (info) {
+          if (info.comment) field.comment = info.comment;
+          field.command = info.command;
+        }
+
+        fields.push(field);
+        fieldPaths.push(fieldPath);
+      }
+    }
+  }
+
+  return fields;
+};
+
 export const state = () => ({
   // data
   sites: [],
@@ -22,6 +81,7 @@ export const state = () => ({
   // app state
   fields: [],
   availableFields: [],
+  allFields: [],
   q: ''
 });
 
@@ -181,67 +241,6 @@ export const getters = {
       };
       return 'colored ' + validClassesMap[result] + ' ' + result || 'noclass-' + result;
     };
-  },
-
-  availableFields(state) {
-    return () => {
-      let excludedFields = [
-        // objects
-        'id',
-        'tests',
-        // duplicates
-        'meta_engine',
-        'meta_screenshots',
-        'meta_prod',
-        'site_root',
-        // not working
-        'total_pages_load_time',
-        'result',
-        'max_result',
-        'result_percent'
-      ];
-
-      let fields = [];
-      let fieldPaths = [];
-
-      for (let siteInd in state.filteredSites) {
-        let site = state.filteredSites[siteInd];
-
-        // раньше из некоторых вложенных объектов доставались поля,
-        // теперь они прессуются в одномерный объект
-        let objs = {
-          '': site
-          // 'site_info.': site.site_info,
-          // 'meta.': site.meta
-        };
-
-        for (let prefix in objs) {
-          const obj = objs[prefix];
-          for (let fieldName in obj) {
-            let fieldPath = prefix + fieldName;
-            if (excludedFields.includes(fieldPath)) continue;
-            if (fieldPaths.includes(fieldPath)) continue;
-
-            let field = {
-              name: fieldPath,
-              title: fieldName
-            };
-
-            // info from /etc/site-info.yml
-            const info = state.tests[fieldName];
-            if (info) {
-              if (info.comment) field.comment = info.comment;
-              field.command = info.command;
-            }
-
-            fields.push(field);
-            fieldPaths.push(fieldPath);
-          }
-        }
-      }
-
-      return fields;
-    };
   }
 };
 
@@ -266,6 +265,9 @@ export const mutations = {
   availableFields(state, newValue) {
     state.availableFields = newValue;
   },
+  allFields(state, newValue) {
+    state.allFields = newValue;
+  },
   q(state, newValue) {
     if (!newValue) newValue = '';
     state.q = newValue;
@@ -285,6 +287,7 @@ export const actions = {
   sites({ commit, state, getters }, sites) {
     const sitesData = getters.sitesProcessing(sites);
     commit('sites', sitesData);
+    commit('allFields', fieldsBySites(state.sites, state.tests));
   },
 
   // фильтрует sites на основе q
@@ -346,7 +349,7 @@ export const actions = {
     }
 
     commit('filteredSites', filteredSites);
-    commit('availableFields', getters.availableFields());
+    commit('availableFields', fieldsBySites(state.filteredSites, state.tests));
   },
 
   q({ commit, dispatch }, q) {