admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Time control ported over

Browse Source
This commit is contained in:
John Cardinal
2020-11-30 19:12:53 +00:00
parent fb7ee4a077
commit ec3cf7589b
1 changed files with 83 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
ayanova/src/components/time-control.vue
View File

@@ -1,25 +1,30 @@
<template>
<div>
<v-row v-if="!readonly">
<v-row>
<template v-if="!readonly">
<v-col cols="12">
<v-dialog v-model="dlgtime" persistent width="290px">
<v-dialog v-model="dlgtime" width="290px">
<template v-slot:activator="{ on }">
<v-text-field
v-on="on"
v-model="formatTime"
:value="timeValue"
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'"
v-model="timeOnly"
>
: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="dlgtime = false">{{
$ay.t("OK")
@@ -27,26 +32,27 @@
</v-time-picker>
</v-dialog>
</v-col>
</v-row>
<v-text-field
v-if="readonly"
v-model="formatDateTime"
v-bind:label="label"
prepend-icon="$ayiCalendarAlt"
disabled
></v-text-field>
<p v-show="error" class="form__error v-messages theme--light error--text">
{{ error }}
</p>
</div>
</template>
<template v-else>
<v-text-field
: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">
{{ error }}
</p>
</template>
</v-row>
</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 */
//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: () => ({
date: null,
oldDate: null,
dlgtime: false,
//cache display format stuff
timeZoneName: window.$gz.locale.getBrowserTimeZoneName(),
@@ -57,33 +63,42 @@ export default {
props: {
label: String,
rules: Array,
"error-messages": { type: Array, default: null },
value: String,
readonly: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
error: {
type: String,
required: false
}
},
watch: {
date() {
//this tortuous fuckery is required so that the input and change events only fire on a real change, not initial page load
//also it shouldn't signal a change if the values are the same and nothing was effectively changed
let hasChanged = false;
if (this.date != this.oldDate) {
hasChanged = true;
}
this.oldDate = this.date;
if (hasChanged) {
this.$emit("input", this.date); //always in UTC
//this.$emit("change", this.date); //always in UTC
}
},
value() {
this.date = this.value; //always in UTC
}
testId: String
},
computed: {
formatDateTime() {
timeValue() {
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
this.value,
this.timeZoneName
);
},
dateValue() {
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
this.value,
this.timeZoneName
);
}
},
methods: {
allErrors() {
let ret = "";
if (this.error != null) {
ret = this.error;
}
if (this.errorMessages != null && this.errorMessages.length > 0) {
ret += this.errorMessages.toString();
}
return ret;
},
readonlyFormat() {
return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
this.value,
this.timeZoneName,
@@ -91,65 +106,35 @@ export default {
this.hour12
);
},
formatTime() {
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
);
},
dateOnly: {
get() {
//return date only portion converted to local working time zone: YYYY-MM-DD
return window.$gz.locale.utcDateStringToLocal8601DateOnlyString(
this.value,
this.timeZoneName
);
},
set(value) {
//2017-08-15T12:10:34.4443084+03:00
let TimePortion = this.timeOnly;
if (!TimePortion) {
TimePortion = "00:00:00";
}
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
value + "T" + TimePortion,
this.timeZoneName
);
}
},
timeOnly: {
//expects just the hours minutes seconds portion: 18:18:49
//Needs to convert into and out of the desired time zone or the control will show the UTC time instead
get() {
return window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
this.value,
this.timeZoneName
);
},
set(value) {
let DatePortion = this.dateOnly;
if (!DatePortion) {
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();
}
DatePortion = fullYear + "-" + fullMonth + "-" + fullDay;
}
this.date = window.$gz.locale.localTimeDateStringToUTC8601String(
DatePortion + "T" + value,
this.timeZoneName
);
}
vm.$emit("input", ret);
}
}
};