This commit is contained in:
2020-12-23 23:08:58 +00:00
parent 82749eb98b
commit d6e626b478
3 changed files with 117 additions and 118 deletions

View File

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

View File

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

View File

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