ayanova/src/components/date-control.vue

@@ -38,7 +38,6 @@
         :value="readonlyFormat()"
         :label="label"
         readonly
-        disabled
         prepend-icon="$ayiCalendarAlt"
       ></v-text-field>
       <p v-show="error" class="form__error v-messages theme--light error--text">

ayanova/src/components/date-native-control.vue

@@ -19,7 +19,6 @@
         :value="readonlyFormat()"
         :label="label"
         readonly
-        disabled
       ></v-text-field>
     </template>
   </div>

ayanova/src/components/date-time-control.vue

@@ -1,87 +1,92 @@
 <template>
-  <v-row>
-    <template v-if="!readonly">
-      <v-col xs6>
-        <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="!!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>
-      <v-col xs6>
-        <v-dialog v-model="dlgtime" width="300px">
-          <template v-slot:activator="{ on }">
-            <v-text-field
-              v-on="on"
-              :value="readonlyTimeFormat()"
-              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"
-        readonly
-        disabled
-        prepend-icon="$ayiCalendarAlt"
-      ></v-text-field>
-      <p v-show="error" class="form__error v-messages theme--light error--text">
-        {{ error }}
-      </p>
-    </template>
-  </v-row>
+  <div>
+    <div>
+      <v-row>
+        <template v-if="!readonly">
+          <v-col xs6>
+            <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"
+                @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>
+          <v-col xs6>
+            <v-dialog v-model="dlgtime" width="300px">
+              <template v-slot:activator="{ on }">
+                <v-text-field
+                  v-on="on"
+                  :value="readonlyTimeFormat()"
+                  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"
+            readonly
+            prepend-icon="$ayiCalendarAlt"
+          ></v-text-field>
+        </template>
+      </v-row>
+    </div>
+    <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 */
@@ -98,17 +103,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,
@@ -130,9 +134,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/components/date-time-native-control.vue

@@ -32,7 +32,6 @@
         :value="readonlyFormat()"
         :label="label"
         readonly
-        disabled
       ></v-text-field>
     </template>
   </v-row>

ayanova/src/components/time-control.vue

@@ -42,7 +42,6 @@
         :value="readonlyFormat()"
         :label="label"
         prepend-icon="$ayiClock"
-        disabled
         readonly
       ></v-text-field>
       <p v-show="error" class="form__error v-messages theme--light error--text">

ayanova/src/components/time-native-control.vue

@@ -19,7 +19,6 @@
         :value="readonlyFormat()"
         :label="label"
         readonly
-        disabled
       ></v-text-field>
     </template>
   </div>