ayanova/src/components/duration-control.vue

@@ -16,6 +16,7 @@
             :label="$ay.t('TimeSpanDays')"
             type="number"
             :data-cy="'durationdays:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
@@ -28,6 +29,7 @@
             :label="$ay.t('TimeSpanHours')"
             type="number"
             :data-cy="'durationhours:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
@@ -40,6 +42,7 @@
             :label="$ay.t('TimeSpanMinutes')"
             type="number"
             :data-cy="'durationminutes:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
@@ -53,14 +56,16 @@
             :label="$ay.t('TimeSpanSeconds')"
             type="number"
             :data-cy="'durationseconds:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
       </v-row>
     </template>
-
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
+    <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>
@@ -82,19 +87,19 @@ 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
-    },
+
     showSeconds: { type: Boolean, default: true },
     showDays: { type: Boolean, default: true },
     testId: String
   },
   computed: {
+    hasErrors() {
+      return this.errorMessages != null && this.errorMessages.length > 0;
+    },
     splitSpan() {
       let vm = this;
       let theDays = 0;
@@ -138,9 +143,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();
       }