ayanova/devdocs/todo.txt

@@ -49,9 +49,9 @@ TODO: Custom fields component
 	- implement each type of control
 	- Add code to coerce the value or handle a completely change of datatype on the record
 		- i.e. it was text and now is a date etc
-		
 
 
+TODO: Error handler is not recognizing the same error over and over again and it should stop after so many dev errors
 	
 TODO: Make sure can easily make new record in Widget form before getting into deeper stuff or making any other object forms.
 

ayanova/src/components/custom-fields-control.vue

@@ -48,13 +48,34 @@
               ></v-text-field>
             </div>
             <div v-else-if="item.type === 'date'">
-              DATE CONTROL HERE
+             <gz-date-picker
+                v-model="_self[item.dataKey]"
+                :readonly="readOnly"
+                :label="lt(item.fld)"
+                :ref="item.fld"
+                :error-messages="form().serverErrors(parentVM, item.fld)"
+                :rules="[
+                  form().customFieldsCheck(parentVM, item, _self, lt(item.fld))
+                ]"
+              ></gz-date-picker>
             </div>
             <div v-else-if="item.type === 'time'">
-              TIME CONTROL HERE
+              <!-- <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> -->
             </div>
             <div v-else-if="item.type === 'datetime'">
-              DATE and TIME CONTROL HERE
+              <gz-date-time-picker
+                v-model="_self[item.dataKey]"
+                :readonly="readOnly"
+                :label="lt(item.fld)"
+                :ref="item.fld"
+                :error-messages="form().serverErrors(parentVM, item.fld)"
+                :rules="[
+                  form().customFieldsCheck(parentVM, item, _self, lt(item.fld))
+                ]"
+              ></gz-date-time-picker>
             </div>
             <div v-else-if="item.type === 'text'">
               <v-textarea
@@ -71,10 +92,32 @@
               ></v-textarea>
             </div>
             <div v-else-if="item.type === 'number'">
-              NUMBER INPUT CONTROL HERE
+              <v-text-field
+                v-model="_self[item.dataKey]"
+                :readonly="readOnly"
+                :prefix="ltFormat().currencySymbol"
+                :label="lt(item.fld)"
+                :ref="item.fld"
+                :error-messages="form().serverErrors(parentVM, item.fld)"
+                :rules="[
+                  form().customFieldsCheck(parentVM, item, _self, lt(item.fld))
+                ]"
+                clearable
+                :counter="10"
+                type="number"
+              ></v-text-field>
             </div>
             <div v-else-if="item.type === 'bool'">
-              CHECKBOX INPUT CONTROL HERE
+              <v-checkbox
+                v-model="_self[item.dataKey]"
+                :readonly="readOnly"
+                :label="lt(item.fld)"
+                :ref="item.fld"
+                :error-messages="form().serverErrors(parentVM, item.fld)"
+                :rules="[
+                  form().customFieldsCheck(parentVM, item, _self, lt(item.fld))
+                ]"
+              ></v-checkbox>
             </div>
             <div v-else>
               <span class="error"

ayanova/src/components/date-control.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <v-row row wrap v-if="!readonly">
+      <v-col cols="12">
+        <v-dialog v-model="dlgdate" persistent width="290px">
+          <template v-slot:activator="{ on }">
+            <v-text-field
+              v-on="on"
+              prepend-icon="fa-calendar-alt"
+              @click:prepend="dlgdate = true"
+              v-model="formatDate"
+              v-bind:label="label"
+              v-bind:rules="rules"
+              readonly
+              :error="!!error"
+            ></v-text-field>
+          </template>
+          <v-date-picker v-model="dateOnly" @input="dlgdate = false">
+            <v-spacer></v-spacer>
+            <v-btn text color="primary" @click="dlgdate = false">Close</v-btn>
+          </v-date-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, dlgdate: 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>

ayanova/src/main.js

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