feat: валидация SiteDetails, правки валидации

components/SiteDetails.vue

@@ -4,9 +4,14 @@
     <div class="site-details__group" v-for="group in groups" :key="group.name">
       <div class="site-details__group-name"></div>
       <ul class="site-details__group-fields">
-        <li v-for="field in group.fields" :key="field.name" :title="field.name">
+        <li
+          v-for="field in group.fields"
+          :key="field.name"
+          :title="field.name"
+          :class="field.validateClass"
+        >
           <span class="site-details__label">{{ field.comment }}</span>
-          <span class="site-details__value">{{ field.value }}</span>
+          <span class="site-details__value">{{ field.valueText || field.value }}</span>
         </li>
       </ul>
     </div>
@@ -16,14 +21,6 @@
 <style lang="scss">
 .VueTables__child-row {
   background: none !important;
-
-  &-toggler {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
 }
 
 .site-details {
@@ -38,6 +35,30 @@
     &:hover {
       background: #fbfbfb;
     }
+
+    &.colored {
+      &.success .site-details__value {
+        color: #407927;
+      }
+      &.warning .site-details__value {
+        color: #a09600;
+      }
+      &.danger .site-details__value {
+        color: #94070a;
+      }
+
+      &:hover {
+        &.success {
+          background: #aaffaa;
+        }
+        &.warning {
+          background: #ffffaa;
+        }
+        &.danger {
+          background: #ffaaaa;
+        }
+      }
+    }
   }
 
   &__title {
@@ -87,7 +108,7 @@ export default {
         const fieldValue = this.site[fieldName];
         if (typeof fieldValue === "object") continue;
         if (fieldValue === "") continue;
-        const info = this.tests.find(test => test.name == fieldName);
+        const info = this.tests[fieldName];
         if (!info || !info.groups) {
           // groups.unnamed.fields.push(fieldValue);
           continue;
@@ -103,6 +124,15 @@ export default {
             groups[groupName] = { name: groupName, fields: [] };
           }
           info.value = fieldValue;
+          info.validateClass = this.$store.getters.getColumnValidateClass(
+            null,
+            this.site.domain,
+            fieldName
+          );
+          // console.log(fieldName + ' validateClass: ', info.validateClass);
+          if (info.type == "boolean") {
+            info.valueText = info.value ? "да" : "нет";
+          }
           groups[groupName].fields.push(info);
         }
       }

components/Toolbar.vue

@@ -87,7 +87,7 @@ export default {
       let groups = { unnamed: { name: "", fields: [] } };
       for (let i in this.availableFields) {
         const field = this.availableFields[i];
-        const info = this.tests.find(test => test.name == field.name);
+        const info = this.tests[field.name];
         if (!info || !info.groups) {
           groups.unnamed.fields.push(field);
           continue;

pages/index.scss

@@ -149,10 +149,18 @@
     text-align: left;
   }
 
+  .VueTables__child-row-toggler {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
   &__child-row-toggler {
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
+    width: 18px;
+    height: 30px;
+    line-height: 30px;
     display: block;
     margin: auto;
     text-align: center;

pages/index.vue

@@ -40,7 +40,6 @@
 import moment from "moment";
 import Toolbar from "~/components/Toolbar";
 import SiteDetails from "~/components/SiteDetails";
-import validateMap from "~/assets/js/validate.conf";
 import columnPresets from "~/assets/js/presets/columns.conf";
 
 export default {
@@ -154,7 +153,7 @@ export default {
             };
 
             // info from /etc/site-info.yml
-            const info = this.tests.find(test => test.name == fieldName);
+            const info = this.tests[fieldName];
             if (info) {
               if (info.comment) field.comment = info.comment;
               field.command = info.command;
@@ -250,7 +249,6 @@ export default {
     // дополняет колонки sites.json
     sitesProcessing(sites) {
       if (!sites) return [];
-
       const sitesData = sites.map(s => {
         let site = { ...s };
         // should be before site_info flatten
@@ -314,52 +312,7 @@ export default {
 
     // выдает класс валидации по домену сайта и имени колонки
     getColumnValidateClass(props, domain, column) {
-      const site = this.filteredSites.find(site => site.domain == domain);
-      let result;
-      if (!site) return "";
-
-      // пустые не валидируются
-      if ([undefined, ""].indexOf(site[column]) !== -1) return "";
-
-      // проверяет, попадает ли значение под лимиты
-      const isFits = (value, rules) => {
-        let valid = true;
-        if ("max" in rules && value > rules.max) return false;
-        if ("min" in rules && value < rules.min) return false;
-        return true;
-      };
-
-      // validate map
-      // проверка на соответствие из массива
-      if (column in validateMap) {
-        const r = validateMap[column];
-        if ("error" in r && isFits(site[column], r.error)) result = "fail";
-        else if ("warn" in r && isFits(site[column], r.warn)) result = "warn";
-        else result = "pass";
-      }
-
-      if (!result && site.tests) {
-        const test = site.tests.find(test => test.name == column);
-        if (!test || !test.valid) return "";
-        result = test.valid;
-      }
-
-      if (!result) return;
-
-      // console.log('props: ', props);
-      // console.log('domain: ', domain);
-      // console.log('column: ', column);
-
-      const validClassesMap = {
-        pass: "success",
-        warn: "warning",
-        fail: "danger"
-      };
-      return (
-        "colored " + validClassesMap[result] + " " + result ||
-        "noclass-" + result
-      );
-      return "success";
+      return this.$store.getters.getColumnValidateClass(props, domain, column);
     },
 
     // достает значение colName из row, со вложенностью

store/index.js

@@ -1,6 +1,7 @@
 import pjson from '~/package.json';
 import jsonQuery from 'json-query';
 import dateformat from 'dateformat';
+import validateMap from '~/assets/js/validate.conf';
 
 export const state = () => ({
   // data
@@ -45,7 +46,57 @@ export const getters = {
   getSiteByDomain(state) {
     return domain => {
       return state.filteredSites.find(site => site.domain == domain);
-    }
+    };
+  },
+
+  // выдает класс валидации по домену сайта и имени колонки
+  getColumnValidateClass(state) {
+    return (props, domain, column) => {
+      const site = state.filteredSites.find(site => site.domain == domain);
+      let result;
+      if (!site) return '';
+
+      // пустые не валидируются
+      if ([undefined, ''].indexOf(site[column]) !== -1) return '';
+
+      // проверяет, попадает ли значение под лимиты
+      const isFits = (value, rules) => {
+        if (Number.isInteger(rules)) return value != rules;
+        if ('max' in rules && value > rules.max) return false;
+        if ('min' in rules && value < rules.min) return false;
+        return true;
+      };
+
+      let r;
+      if (column in validateMap) r = validateMap[column];
+      else if (column in state.tests && state.tests[column].validate)
+        r = state.tests[column].validate;
+      else return;
+
+      // validate map
+      // проверка на соответствие из массива
+      if (Number.isInteger(r)) r = { error: r };
+      if ('error' in r && isFits(site[column], r.error)) result = 'fail';
+      else if ('warn' in r && isFits(site[column], r.warn)) result = 'warn';
+      else result = 'pass';
+
+      if (!result && site.tests) {
+        const test = state.tests[column];
+        if (!test || !test.valid) {
+          return '';
+        }
+        result = test.valid;
+      }
+
+      if (!result) return;
+
+      const validClassesMap = {
+        pass: 'success',
+        warn: 'warning',
+        fail: 'danger'
+      };
+      return 'colored ' + validClassesMap[result] + ' ' + result || 'noclass-' + result;
+    };
   }
 };
 
@@ -58,7 +109,11 @@ export const mutations = {
     state.filteredSites = newValue;
   },
   tests(state, newValue) {
-    state.tests = newValue;
+    const tests = {};
+    newValue.forEach(test => {
+      tests[test.name] = test;
+    });
+    state.tests = tests;
   },
   filteredSites(state, newValue) {
     state.filteredSites = newValue;