feat: дополнение: подсказка значений, переводы, css

- уменьшены пункты дополнения
- добавлены русские названия полей
- добавлена очистка всего запроса

components/QueryInput.vue

@@ -10,9 +10,16 @@
   engine=bitrix&prod=1"
       v-bind:style="{width: filterWidth + 'px'}"
       :fetch-suggestions="queryComplete"
+      valueKey="name"
+      :clearable="true"
       @select="querySelect"
       @keyup.enter.native="queryChangeAction"
-    ></el-autocomplete>
+    >
+      <template slot-scope="slotProps">
+        <span class="query-input__field-name">{{ slotProps.item.name }}</span>
+        <span class="query-input__field-label">{{ slotProps.item.comment }}</span>
+      </template>
+    </el-autocomplete>
 
     <div class="filter__query-tags">
       <el-tag
@@ -28,8 +35,36 @@
 </template>
 
 <style lang="scss">
+.query-input {
+  input {
+    min-width: 85px;
+    font-family: monospace;
+  }
+
+  // автодополнение
+  &__field-name {
+    font-weight: bold;
+    font-size: 12px;
+  }
+  &__field-label {
+    margin-left: 10px;
+    color: #999;
+  }
+}
+
 .el-autocomplete-suggestion {
   min-width: 360px;
+
+  &__wrap {
+    padding: 0;
+    max-height: 60vh;
+  }
+
+  li {
+    padding: 0 5px;
+    font-size: 10px;
+    line-height: 1.5rem;
+  }
 }
 .el-tag {
   margin: 0 5px;
@@ -43,7 +78,9 @@ export default {
   data() {
     return {
       q: "",
-      lastQ: ""
+      lastQ: "",
+      currentPart: "",
+      completionProcess: false
     };
   },
 
@@ -57,8 +94,8 @@ export default {
     },
 
     filterWidth() {
-      const padding = 15;
-      return (this.q.length + 1) * 10 + padding;
+      const padding = 45; // paddings and close button
+      return (this.q.length + 1) * 8 + padding;
     }
   },
 
@@ -68,6 +105,7 @@ export default {
       // this.debouncedQueryChangeAction(); // задержка после ввода фильтра
     },
     globalQ() {
+      // update local data when store value changes
       this.q = this.globalQ;
     }
   },
@@ -78,17 +116,22 @@ export default {
 
   methods: {
     queryChangeAction() {
-      this.q = this.normalizeQuery(this.q);
+      if (this.completionProcess) {
+        this.completionProcess = false;
+        return;
+      }
+
+      // this.q = this.normalizeQuery(this.q);
       this.$store.dispatch("q", this.q);
     },
 
-    normalizeQuery(q) {
+    /* normalizeQuery(q) {
       const parts = q.split("&");
       const normalizedParts = parts.map(part => {
         return part.replace(/^([a-z_0-9]+)$/, "$1=1"); // prod => prod=1
       });
       return normalizedParts.join("&");
-    },
+    }, */
 
     // сворачивает/разворачивает одну группу
     changeGroupOpened(group) {
@@ -129,28 +172,78 @@ export default {
 
     // autocomplete of query
     queryComplete(q, cb) {
+      if (!q || this.completionProcess) return cb([]);
       const parts = q.split("&");
       const lastPart = parts[parts.length - 1];
-      const matchFields = this.availableFields.filter(filter =>
-        filter.name.includes(lastPart)
-      );
-      const sortedFields = matchFields.sort((a, b) =>
-        a.name > b.name ? 1 : b.name > a.name ? -1 : 0
-      );
-      cb(
-        sortedFields.map(field => {
-          return { value: field.name };
-        })
-      );
+
+      this.completionProcess = true;
+      setTimeout(() => {
+        this.completionProcess = false;
+      }, 500);
+
+      if (lastPart.match(/=/)) {
+        // field value completion
+        this.currentPart = "value";
+        const fieldMatch = lastPart.match(/(.*?)=/);
+        const fieldName = fieldMatch[1];
+        const matchFields = this.availableFields.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);
+          if(!qValue || site[fieldName] && site[fieldName].includes(qValue)){
+            return site[fieldName];
+          }
+        });
+        console.log('values: ', values);
+        const uniqueValues = values.filter((v, i, a) => a.indexOf(v) === i);
+        const sortedValues = uniqueValues.sort();
+        cb(
+          sortedValues.map(name => {
+            return { name };
+          })
+        );
+      } else {
+        // field name completion
+        this.currentPart = "name";
+        const matchFields = this.availableFields.filter(filter =>
+          filter.name.includes(lastPart)
+        );
+        const sortedFields = matchFields.sort((a, b) =>
+          a.name > b.name ? 1 : b.name > a.name ? -1 : 0
+        );
+        cb(sortedFields);
+      }
     },
 
     // выбор автодополнения
     querySelect(q) {
       this.$refs.input.focus();
       let parts = this.lastQ.split("&");
-      parts[parts.length - 1] = q.value;
+
+      if (this.currentPart == "name") {
+        parts[parts.length - 1] = q.name; // + "=";
+        // this.$refs.input.$el.querySelector('input').dispatchEvent(new Event('change'));
+      }
+
+      if (this.currentPart == "value") {
+        parts[parts.length - 1] = parts[parts.length - 1].replace(/=.*/, '') + '=' + q.name;
+      }
+
       this.q = parts.join("&");
-      this.queryChangeAction();
+
+      // без этого сразу фильтрует при вводе имени
+      setTimeout(() => {
+        this.completionProcess = false;
+      }, 500);
+
+      if (this.currentPart == "value") this.queryChangeAction();
     },
 
     handleTagClose(tag) {

pages/index.vue

@@ -158,7 +158,7 @@ export default {
             };
 
             // info from /etc/site-info.yml
-            const info = this.$store.state.tests.find(
+            const info = this.tests.find(
               test => test.name == fieldName
             );
             if (info) {