155 lines
4.4 KiB
Vue
155 lines
4.4 KiB
Vue
<template>
|
|
<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()"
|
|
: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-col cols="12">
|
|
<v-text-field
|
|
:value="readonlyFormat()"
|
|
:label="label"
|
|
prepend-icon="$ayiClock"
|
|
readonly
|
|
></v-text-field>
|
|
</v-col>
|
|
</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 */
|
|
//NOTE: this control also captures the date even though it's time only
|
|
//this is an intentional design decision to support field change to date or date AND time and is considered a display issue
|
|
export default {
|
|
data: () => ({
|
|
dlgtime: false,
|
|
//cache display format stuff
|
|
timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
|
|
languageName: window.$gz.locale.getResolvedLanguage(),
|
|
hour12: window.$gz.locale.getHour12()
|
|
// defaultLocale: window.$gz.locale.g etBrowserFirstLanguage().split("-", 1)[0]
|
|
}),
|
|
props: {
|
|
label: { type: String, default: null },
|
|
rules: { type: Array, default: undefined },
|
|
errorMessages: { type: Array, default: null },
|
|
value: { type: String, default: null },
|
|
readonly: { type: Boolean, default: false },
|
|
disabled: { type: Boolean, default: false },
|
|
testId: { type: String, default: null }
|
|
},
|
|
computed: {
|
|
hasErrors() {
|
|
return this.errorMessages != null && this.errorMessages.length > 0;
|
|
},
|
|
timeValue() {
|
|
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
|
|
this.value,
|
|
this.timeZoneName
|
|
);
|
|
},
|
|
dateValue() {
|
|
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
|
|
this.value,
|
|
this.timeZoneName
|
|
);
|
|
}
|
|
},
|
|
methods: {
|
|
setNow() {
|
|
let v = window.$gz.locale
|
|
.nowUTC8601String(this.timeZoneName)
|
|
.split("T")[1];
|
|
this.updateTimeValue(v);
|
|
this.dlgtime = false;
|
|
},
|
|
allErrors() {
|
|
let ret = "";
|
|
|
|
if (this.errorMessages != null && this.errorMessages.length > 0) {
|
|
ret += this.errorMessages.toString();
|
|
}
|
|
return ret;
|
|
},
|
|
readonlyFormat() {
|
|
return window.$gz.locale.utcDateToShortTimeLocalized(
|
|
this.value,
|
|
this.timeZoneName,
|
|
this.languageName,
|
|
this.hour12
|
|
);
|
|
},
|
|
updateTimeValue(v) {
|
|
this.updateValue(this.dateValue, v);
|
|
},
|
|
updateValue(theDate, theTime) {
|
|
let vm = this;
|
|
|
|
if (!theDate) {
|
|
let v = new Date();
|
|
let fullYear = v.getFullYear();
|
|
let fullMonth = v.getMonth() + 1;
|
|
if (fullMonth < 10) {
|
|
fullMonth = "0" + fullMonth.toString();
|
|
}
|
|
let fullDay = v.getDate();
|
|
if (fullDay < 10) {
|
|
fullDay = "0" + fullDay.toString();
|
|
}
|
|
theDate = fullYear + "-" + fullMonth + "-" + fullDay;
|
|
}
|
|
|
|
if (!theTime) {
|
|
theTime = "00:00:00";
|
|
}
|
|
|
|
let ret = window.$gz.locale.localTimeDateStringToUTC8601String(
|
|
theDate + "T" + theTime,
|
|
vm.timeZoneName
|
|
);
|
|
vm.$emit("input", ret);
|
|
}
|
|
}
|
|
};
|
|
</script>
|