ayanova/src/components/date-control.vue

@@ -1,50 +1,54 @@
 <template>
-  <v-row>
-    <template v-if="!readonly">
-      <v-col cols="12">
-        <v-dialog v-model="dlgdate" width="290px">
-          <template v-slot:activator="{ on }">
-            <v-text-field
-              v-on="on"
-              prepend-icon="$ayiCalendarAlt"
-              @click:prepend="dlgdate = true"
+  <div>
+    <v-row>
+      <template v-if="!readonly">
+        <v-col cols="12">
+          <v-dialog v-model="dlgdate" width="290px">
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-on="on"
+                prepend-icon="$ayiCalendarAlt"
+                @click:prepend="dlgdate = true"
+                :value="dateValue"
+                v-bind:label="label"
+                v-bind:rules="rules"
+                readonly
+                :error="!!hasErrors"
+                :data-cy="'dtfpick:' + testId"
+              ></v-text-field>
+            </template>
+            <v-date-picker
               :value="dateValue"
-              v-bind:label="label"
-              v-bind:rules="rules"
-              readonly
-              :error="!!error"
-              :data-cy="'dtfpick:' + testId"
-            ></v-text-field>
-          </template>
-          <v-date-picker
-            :value="dateValue"
-            @input="updateDateValue"
-            :locale="defaultLocale"
-            :data-cy="'dpick:' + testId"
-          >
-            <v-btn text color="primary" @click="$emit('input', null)">{{
-              $ay.t("Delete")
-            }}</v-btn>
-            <v-spacer></v-spacer>
-            <v-btn text color="primary" @click="dlgdate = false">{{
-              $ay.t("OK")
-            }}</v-btn>
-          </v-date-picker>
-        </v-dialog>
-      </v-col>
-    </template>
-    <template v-else>
-      <v-text-field
-        :value="readonlyFormat()"
-        :label="label"
-        readonly
-        prepend-icon="$ayiCalendarAlt"
-      ></v-text-field>
-      <p v-show="error" class="form__error v-messages theme--light error--text">
-        {{ error }}
-      </p>
-    </template>
-  </v-row>
+              @input="updateDateValue"
+              :locale="defaultLocale"
+              :data-cy="'dpick:' + testId"
+            >
+              <v-btn text color="primary" @click="$emit('input', null)">{{
+                $ay.t("Delete")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary" @click="dlgdate = false">{{
+                $ay.t("OK")
+              }}</v-btn>
+            </v-date-picker>
+          </v-dialog>
+        </v-col>
+      </template>
+      <template v-else>
+        <v-text-field
+          :value="readonlyFormat()"
+          :label="label"
+          readonly
+          prepend-icon="$ayiCalendarAlt"
+        ></v-text-field>
+      </template>
+    </v-row>
+    <div class="v-messages theme--light error--text mt-n5" role="alert">
+      <div class="v-messages__wrapper">
+        <div class="v-messages__message">{{ allErrors() }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 /*  Xeslint-disable */
@@ -60,17 +64,17 @@ export default {
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
+    errorMessages: { type: Array, default: null },
     value: { type: String, default: null },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
+
     testId: String
   },
   computed: {
+    hasErrors() {
+      return this.errorMessages != null && this.errorMessages.length > 0;
+    },
     timeValue() {
       return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
         this.value,
@@ -87,9 +91,7 @@ export default {
   methods: {
     allErrors() {
       let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
+
       if (this.errorMessages != null && this.errorMessages.length > 0) {
         ret += this.errorMessages.toString();
       }

ayanova/src/components/time-control.vue

@@ -1,54 +1,58 @@
 <template>
-  <v-row>
-    <template v-if="!readonly">
-      <v-col cols="12">
-        <v-dialog v-model="dlgtime" width="300px">
-          <template v-slot:activator="{ on }">
-            <v-text-field
-              v-on="on"
-              :value="readonlyFormat()"
-              v-bind:label="label"
-              prepend-icon="$ayiClock"
-              @click:prepend="dlgtime = true"
-              readonly
-              :error="!!error"
-              :data-cy="'ttfpick:' + testId"
-            ></v-text-field>
-          </template>
-          <v-time-picker
-            scrollable
-            ampm-in-title
-            :format="hour12 ? 'ampm' : '24hr'"
-            :value="timeValue"
-            @input="updateTimeValue"
-            :data-cy="'tpick:' + testId"
-            ><v-btn text color="primary" @click="$emit('input', null)">{{
-              $ay.t("Delete")
-            }}</v-btn>
-            <v-spacer></v-spacer>
-            <v-btn text color="primary" @click="setNow()">{{
-              $ay.t("Now")
-            }}</v-btn>
-            <v-spacer></v-spacer>
-            <v-btn text color="primary" @click="dlgtime = false">{{
-              $ay.t("OK")
-            }}</v-btn>
-          </v-time-picker>
-        </v-dialog>
-      </v-col>
-    </template>
-    <template v-else>
-      <v-text-field
-        :value="readonlyFormat()"
-        :label="label"
-        prepend-icon="$ayiClock"
-        readonly
-      ></v-text-field>
-      <p v-show="error" class="form__error v-messages theme--light error--text">
-        {{ error }}
-      </p>
-    </template>
-  </v-row>
+  <div>
+    <v-row>
+      <template v-if="!readonly">
+        <v-col cols="12">
+          <v-dialog v-model="dlgtime" width="300px">
+            <template v-slot:activator="{ on }">
+              <v-text-field
+                v-on="on"
+                :value="readonlyFormat()"
+                v-bind:label="label"
+                prepend-icon="$ayiClock"
+                @click:prepend="dlgtime = true"
+                readonly
+                :error="!!hasErrors"
+                :data-cy="'ttfpick:' + testId"
+              ></v-text-field>
+            </template>
+            <v-time-picker
+              scrollable
+              ampm-in-title
+              :format="hour12 ? 'ampm' : '24hr'"
+              :value="timeValue"
+              @input="updateTimeValue"
+              :data-cy="'tpick:' + testId"
+              ><v-btn text color="primary" @click="$emit('input', null)">{{
+                $ay.t("Delete")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary" @click="setNow()">{{
+                $ay.t("Now")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn text color="primary" @click="dlgtime = false">{{
+                $ay.t("OK")
+              }}</v-btn>
+            </v-time-picker>
+          </v-dialog>
+        </v-col>
+      </template>
+      <template v-else>
+        <v-text-field
+          :value="readonlyFormat()"
+          :label="label"
+          prepend-icon="$ayiClock"
+          readonly
+        ></v-text-field>
+      </template>
+    </v-row>
+    <div class="v-messages theme--light error--text mt-n5" role="alert">
+      <div class="v-messages__wrapper">
+        <div class="v-messages__message">{{ allErrors() }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 /*  Xeslint-disable */
@@ -66,17 +70,16 @@ export default {
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
+    errorMessages: { type: Array, default: null },
     value: String,
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
     testId: String
   },
   computed: {
+    hasErrors() {
+      return this.errorMessages != null && this.errorMessages.length > 0;
+    },
     timeValue() {
       return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
         this.value,
@@ -98,9 +101,7 @@ export default {
     },
     allErrors() {
       let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
+
       if (this.errorMessages != null && this.errorMessages.length > 0) {
         ret += this.errorMessages.toString();
       }

ayanova/src/views/widget.vue

@@ -50,8 +50,7 @@
                 ref="count"
                 data-cy="count"
                 :rules="[form().integerValid(this, 'count')]"
-                :error-messages="['blah', 'blah2']"
-                :serror-messages="form().serverErrors(this, 'count')"
+                :error-messages="form().serverErrors(this, 'count')"
                 @input="fieldValueChanged('count')"
                 type="number"
               ></v-text-field>
@@ -86,14 +85,11 @@
                 :readonly="formState.readOnly"
                 ref="startDate"
                 testId="startDate"
-                :error-messages="[
-                  'blah',
-                  'blah2 teh quick brown fox jumped over teh six lazy dogs'
-                ]"
+                :error-messages="form().serverErrors(this, 'startDate')"
                 @input="fieldValueChanged('startDate')"
               ></gz-date-time-picker>
             </v-col>
-            <!-- :error-messages="form().serverErrors(this, 'startDate')" -->
+
             <v-col cols="12" sm="6" lg="4" xl="3">
               <gz-date-time-picker
                 :label="$ay.t('WidgetEndDate')"