ayanova/devdocs/todo.txt

@@ -16,8 +16,11 @@ TODO NEXT
 
 
 DATETIME
-- sb able to click on buttons as well as the actual numbers, see if that's possible
-- Does it validate properly?
+
+- Does it validate properly? NO.  Get validation working!!
+	- possibly helpful https://stackoverflow.com/questions/47982820/vuejs-vee-validate-in-custom-components
+	- or https://duckduckgo.com/?q=vee+validate+with+custom+component&t=ffab&atb=v134-6__&ia=web
+	
 - Test on mobile and desktop all browsers before moving on, it must be solid with error handling (required, after before etc) and etc and then if all is well we can move on to the other field types
 
 

ayanova/src/views/inventory-widget-edit.vue

@@ -10,7 +10,7 @@
               :counter="255"
               :error-messages="errors.collect('name')"
               :label="this.$gzlocale.get('WidgetName')"
-              data-vv-name="name"
+              name="name"
               required
             ></v-text-field>
           </v-flex>
@@ -21,7 +21,7 @@
               :counter="10"
               :error-messages="errors.collect('serial')"
               :label="this.$gzlocale.get('WidgetSerial')"
-              data-vv-name="serial"
+              name="serial"
               required
             ></v-text-field>
           </v-flex>
@@ -32,7 +32,7 @@
               :counter="10"
               :error-messages="errors.collect('count')"
               :label="this.$gzlocale.get('WidgetCount')"
-              data-vv-name="count"
+              name="count"
               required
             ></v-text-field>
           </v-flex>
@@ -44,13 +44,31 @@
               v-validate="this.$gzlocale.decimalValidate(true)"
               :error-messages="errors.collect('dollarAmount')"
               :label="this.$gzlocale.get('WidgetDollarAmount')"
-              data-vv-name="dollarAmount"
+              name="dollarAmount"
               required
             ></v-text-field>
           </v-flex>
 
           <v-flex xs12 sm6 lg4 xl3 px-2>
-            <gz-date-time-picker label="Start" v-model="obj.startDate"></gz-date-time-picker>
+            <gz-date-time-picker
+              :label="this.$gzlocale.get('WidgetStartDate')"
+              v-model="obj.startDate"
+              name="startDate"
+              :error-messages="errors.collect('startDate')"
+              v-validate="'before:endDate'"
+              ref="startDate"
+            ></gz-date-time-picker>
+          </v-flex>
+
+          <v-flex xs12 sm6 lg4 xl3 px-2>
+            <gz-date-time-picker
+              :label="this.$gzlocale.get('WidgetEndDate')"
+              v-model="obj.endDate"
+              name="endDate"
+              :error-messages="errors.collect('endDate')"
+              v-validate="'after:startDate'"
+              ref="endDate"
+            ></gz-date-time-picker>
           </v-flex>
 
           <v-flex xs12 sm6 lg4 xl3 px-2>
@@ -60,11 +78,21 @@
               :error-messages="errors.collect('checkbox')"
               value="1"
               :label="this.$gzlocale.get('Active')"
-              data-vv-name="checkbox"
+              name="checkbox"
               required
             ></v-checkbox>
           </v-flex>
+          <v-flex xs12 sm6 lg4 xl3 px-2>
+            <ul>
+              <li v-for="(group, index) in errors.collect()" :key="index">
+                <ul>
+                  <li v-for="(error,index) in group" :key="index">{{ error }}</li>
+                </ul>
+              </li>
+            </ul>
+          </v-flex>
         </v-layout>
+
         <v-layout align-center justify-space-around row wrap mt-5>
           <v-flex xs1>
             <v-btn>one</v-btn>
@@ -138,6 +166,7 @@ export default {
       });
     },
     submit() {
+      // debugger;
       this.$validator.validateAll();
     }
   }