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

switch back to vuetify datetime picker completed now to do date and time standalone

Browse Source
This commit is contained in:
John Cardinal
2020-11-30 18:52:36 +00:00
parent ffbc6be559
commit 78d114c662
4 changed files with 37 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ayanova/devdocs/rando-todo.txt
View File

@@ -84,7 +84,10 @@ todo: REPORTING bits and pieces
https://stackoverflow.com/questions/56959242/how-do-i-get-readable-browser-page-errors-out-of-puppeteer-sharp
todo: datetime controls, would be nice to add a More menu | that can be used to
pick date ranges like if it's a start date it can quickly be used to pick the first day last month or
last day of a pre-set range from our already defined date range choices for grid filters
some of the 3rd party date pickers were like that
todo: ON HOLD TIL LATER Lagging typing in name field on customize form for data grid filter
Giving up on this for now, but noticed the following:

30
ayanova/devdocs/todo.txt
View File

@@ -6,32 +6,18 @@
MISC ITEMS THAT CAME UP
todo: DATE / TIME / DATE_TIME controls switch back to vuetify ones
Look into code, the non native originals are outdated in the methods they use (watchers)
make copies of them for backup then morph them into the same type of code as the native ones use
as that is the most current performant reliable way to do it.
Ensure can clear completely to null value
Test it out thoroughly there was a reason I quit using it the first time
i18n
smoke test (maybe some way to bypass the control for test purposes)
Is it possible to still keep the native ones in there somehow with a v-if template and a setting?
maybe get the nonnative one working then look into supporting this for edge cases or future proofing
Lots of warnings about using native ones on the MDN site, looks like I should use a component of some kind
so if I do I might as well use the vuetify ones since there are no substantially greater options out there
It would be very nice though if I could opt to have the user be able to choose alternatives like a native input for when
browser makers actually get around to implementing them properly, some have and some are good but some like apple just don't work
bugbug datetime control clear buttons don't trigger emit of empty date times
contractexpires on customer form clearing it and saving sends date to server as if it wasn't cleared at all
Better solution: one clear button that clears all and emits properly and disable the built in if possible
Xdatetime
DateOnly
TimeOnly
Smoke test rewrite
todo: datetime testing make sure locale, am/pm etc are all honoured
test READ ONLY as well
todo: 24hr setting, where does it come from, is it detected? there is no forceful settingh for it anymore in user settings?!
todo: gz-data-table make sure unbounded notes column is bounded by some length restriction
mobile format is ok, it cuts off at one line, but for desktop we should have a sane limit as right now it's completely unbounded
this should apply to any column that displays text but particularly just the plain text ones

59
ayanova/src/components/date-time-control.vue
View File

@@ -1,13 +1,8 @@
<template>
<div>
<v-row v-if="!readonly">
<v-row>
<template v-if="!readonly">
<v-col xs6>
<v-dialog
ref="theDateDialog"
v-model="dlgdate"
persistent
width="290px"
>
<v-dialog ref="theDateDialog" v-model="dlgdate" width="290px">
<template v-slot:activator="{ on }">
<v-text-field
v-on="on"
@@ -28,6 +23,9 @@
: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")
@@ -36,12 +34,7 @@
</v-dialog>
</v-col>
<v-col xs6>
<v-dialog
ref="theTimeDialog"
v-model="dlgtime"
persistent
width="290px"
>
<v-dialog ref="theTimeDialog" v-model="dlgtime" width="290px">
<template v-slot:activator="{ on }">
<v-text-field
v-on="on"
@@ -63,6 +56,9 @@
ref="timeField"
: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")
@@ -70,18 +66,20 @@
</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"
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>
</template>
<script>
/* Xeslint-disable */
@@ -143,22 +141,14 @@ export default {
);
},
updateTimeValue(v) {
// console.log("updatedTimevalue", v);
// console.log("currentDateValue", this.dateValue);
this.updateValue(this.dateValue, v);
},
updateDateValue(v) {
// console.log("updatedDatevalue", v);
// console.log("currentTimeValue", this.timeValue);
this.updateValue(v, this.timeValue);
this.dlgdate = false;
},
updateValue(theDate, theTime) {
// console.log("updatevalue", v);
//@input="dlgdate = false"
let vm = this;
//console.log(vm.$refs.dateField.value);
// let dateValue = vm.$refs.dateField.$refs.input.value;
if (!theDate) {
let v = new Date();
@@ -174,7 +164,6 @@ export default {
theDate = fullYear + "-" + fullMonth + "-" + fullDay;
}
// let timeValue = vm.$refs.timeField.$refs.input.value;
if (!theTime) {
theTime = "00:00:00";
}

2
ayanova/src/views/cust-customer.vue
View File

@@ -2,7 +2,7 @@
<v-container fluid>
<gz-report-selector ref="reportSelector"></gz-report-selector>
<!-- {{ formState }} -->
{{ obj.contractExpires }}
<!-- {{ obj.contractExpires }} -->
<div v-if="formState.ready">
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>