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

Browse Source
This commit is contained in:
John Cardinal
2019-11-26 21:16:14 +00:00
parent d6a4ca637a
commit 0eb4c481ba
2 changed files with 287 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
ayanova/src/components/time-control.vue Normal file
View File

@@ -0,0 +1,285 @@
<template>
<div>
<v-row row wrap v-if="!readonly">
<v-col cols="12">
<v-dialog v-model="dlgtime" persistent width="290px">
<template v-slot:activator="{ on }">
<v-text-field
v-on="on"
v-model="formatTime"
label
prepend-icon="fa-clock"
@click:prepend="dlgtime = true"
readonly
:error="!!error"
></v-text-field>
</template>
<v-time-picker scrollable ampm-in-title v-model="timeOnly">
<v-spacer></v-spacer>
<v-btn text color="primary" @click="dlgtime = false">OK</v-btn>
</v-time-picker>
</v-dialog>
</v-col>
</v-row>
<v-text-field
v-if="readonly"
v-model="formatDateTime"
v-bind:label="label"
prepend-icon="fa-calendar-alt"
disabled
></v-text-field>
<p v-show="error" class="form__error v-messages theme--light error--text">
{{ error }}
</p>
</div>
</template>
<script>
/* Xeslint-disable */
export default {
beforeCreate() {
//debugger;
//this is a nothing line as a test
//check pre-requisites exist just in case
if (window.$gz.errorHandler.devMode()) {
if (!window.$gz.dayjs) {
throw "DateTimeControl: the DayJS library is required and missing";
}
if (!window.$gz.locale) {
throw "DateTimeControl: $gz.locale is required and missing";
}
}
},
data: () => ({ date: null, oldDate: null, dlgtime: false }),
props: {
label: String,
rules: Array,
value: String,
readonly: { 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
var hasChanged = false;
if (this.oldDate != null && 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
}
},
computed: {
formatDateTime() {
return this.value
? window.$gz.dayjs
.utc(this.value)
.add(window.$gz.locale.format().timeZoneOffset, "hour")
.format(window.$gz.locale.format().shortDateAndTime)
: "";
},
formatDate() {
return this.value
? window.$gz.dayjs
.utc(this.value)
.add(window.$gz.locale.format().timeZoneOffset, "hour")
.format(window.$gz.locale.format().shortDate)
: "";
},
formatTime() {
return this.value
? window.$gz.dayjs
.utc(this.value)
.add(window.$gz.locale.format().timeZoneOffset, "hour")
.format(window.$gz.locale.format().shortTime)
: "";
},
dateOnly: {
get() {
//TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
var defaultDateString = window.$gz
.dayjs()
.utc()
.add(window.$gz.locale.format().timeZoneOffset, "hour")
.format("YYYY-MM-DD");
return this.value
? window.$gz.dayjs
.utc(this.value)
.add(window.$gz.locale.format().timeZoneOffset, "hour")
.format("YYYY-MM-DD")
: defaultDateString;
},
set(value) {
this.date = window.$gz.dayjs
.utc(value + " " + this.timeOnly)
.subtract(window.$gz.locale.format().timeZoneOffset, "hour")
.toISOString();
}
},
timeOnly: {
get() {
//TODO: this will likely need an improvement for forms where there should be an automatic pre-set time chosen like workorder labor;
var defaultTimeString = window.$gz.dayjs
.utc()
.add(window.$gz.locale.format().timeZoneOffset, "hour")
.format("HH:mm:ss");
return this.value
? window.$gz.dayjs
.utc(this.value)
.add(window.$gz.locale.format().timeZoneOffset, "hour")
.format("HH:mm:ss")
: defaultTimeString;
},
set(value) {
this.date = window.$gz.dayjs
.utc(this.dateOnly + " " + value)
.subtract(window.$gz.locale.format().timeZoneOffset, "hour")
.toISOString();
}
}
}
};
</script>
//
<!--
// NOTE: this component was created based on a reddit query and answer below.
// Note also that the date and time coming in to this component are expected to be an ISO8601 format date and time string in UTC
// and it's kept in UTC and only localized temporarily for display and selection and update after selection in the date and time picker components
// re: combined date/time component
// from theRetrograde sent 4 hours ago
// We are using this in a dynamic form that will display a textbox, when the user clicks the textbox a modal opens to show the pickers.
// I'm not sure why it wouldn't be rendering initially.
// Here are the props we pass to the component, maybe this will help:
// <template v-else-if="get_field_type(key) == 'datetime'">
// <AppDateTimePicker
// v-model="editedItem[key]"
// v-bind:key="key"
// v-bind:readonly="is_readonly(key)"
// v-bind:label="pretty_field(key)">
// </AppDateTimePicker>
// </template>
// <template>
// <div>
// <v-layout row wrap v-if="!readonly">
// <v-flex xs6>
// <v-dialog v-model="modal" persistent lazy full-width width="290px">
// <v-text-field
// slot="activator"
// v-model="formatDate"
// v-bind:label="label"
// prepend-icon="event"
// readonly
// ></v-text-field>
// <v-date-picker v-model="dateOnly" @input="modal = false">
// <v-spacer></v-spacer>
// <v-btn flat color="primary" @click="modal = false">Close</v-btn>
// </v-date-picker>
// </v-dialog>
// </v-flex>
// <v-flex xs6>
// <v-dialog v-model="modal2" persistent lazy full-width width="290px">
// <v-text-field
// slot="activator"
// v-model="formatTime"
// label
// prepend-icon="access_time"
// readonly
// ></v-text-field>
// <v-time-picker v-model="timeOnly">
// <v-spacer></v-spacer>
// <v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
// </v-time-picker>
// </v-dialog>
// </v-flex>
// </v-layout>
// <v-text-field
// v-else
// v-model="formatDateTime"
// v-bind:label="label"
// prepend-icon="event"
// disabled
// ></v-text-field>
// </div>
// </template>
// // <script>
// // export default {
// // data: () => ({ date: null, modal: false, modal2: false }),
// // props: { label: String, value: String, readonly: Boolean },
// // watch: {
// // date() {
// // this.$emit("input", this.date);
// // },
// // value() {
// // this.date = this.value;
// // }
// // },
// // computed: {
// // formatDateTime() {
// // let momentObj = this.$moment.utc();
// // if (this.value) {
// // momentObj = this.$moment.utc(this.value);
// // }
// // return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
// // },
// // formatDate() {
// // let momentObj = this.$moment.utc();
// // if (this.value) {
// // momentObj = this.$moment.utc(this.value);
// // }
// // return momentObj.local().format("dddd MM/DD/YYYY");
// // },
// // dateOnly: {
// // get() {
// // let momentObj = this.$moment.utc();
// // if (this.value) {
// // momentObj = this.$moment.utc(this.value);
// // }
// // return momentObj.local().format("YYYY-MM-DD");
// // },
// // set(value) {
// // this.date = value + " " + this.timeOnly;
// // }
// // },
// // timeOnly: {
// // get() {
// // let momentObj = this.$moment.utc();
// // if (this.value) {
// // momentObj = this.$moment.utc(this.value);
// // }
// // return momentObj.local().format("HH:mm:ss");
// // },
// // set(value) {
// // this.date = this.dateOnly + " " + value;
// // }
// // },
// // formatTime() {
// // let momentObj = this.$moment.utc();
// // if (this.value) {
// // momentObj = this.$moment.utc(this.value);
// // }
// // return momentObj.local().format("h:mm a");
// // }
// // }
// // };
// // </script>
// -->

2
ayanova/src/main.js
View File

@@ -33,6 +33,7 @@ import "@/assets/css/main.css";
//controls
import dateTimeControl from "./components/date-time-control.vue";
import dateControl from "./components/date-control.vue";
import timeControl from "./components/time-control.vue";
import tagPicker from "./components/tag-picker.vue";
import customFieldsControl from "./components/custom-fields-control.vue";
import errorhandler from "./api/errorhandler";
@@ -165,6 +166,7 @@ Vue.filter("boolastext", function vueFilterBoolAsText(value) {
//
Vue.component("gz-date-time-picker", dateTimeControl);
Vue.component("gz-date-picker", dateControl);
Vue.component("gz-time-picker", timeControl);
Vue.component("gz-tag-picker", tagPicker);
Vue.component("gz-custom-fields", customFieldsControl);