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

<template>
  <div v-if="this.$store.state.formCustomTemplate[formKey]">
    <span class="v-label v-label--active theme--light">
      {{ this.$gzlocale.get("ObjectCustomFieldCustomGrid") }}
    </span>
    <div>
      <h5>FORMKEY: {{ formKey }}</h5>
      <h5>TEMPLATE: {{ this.$store.state.formCustomTemplate[formKey] }}</h5>
      <h5>CUSTOM FIELD DATA:</h5>
      <span class="caption">
        {{ value }}
      </span>
    </div>
    <hr />
    <div>
      <v-layout align-center justify-left row wrap>
        <template v-for="item in this.$store.state.formCustomTemplate[formKey]">
          <v-flex v-if="item.type" :key="item.fld" xs12 sm6 lg4 xl3 px-2>
            <div v-if="item.type === 'currency'">
              CURRENCY CONTROL HERE
            </div>
            <div v-else-if="item.type === 'date'">
              DATE CONTROL HERE
            </div>
            <div v-else-if="item.type === 'time'">
              TIME CONTROL HERE
            </div>
            <div v-else-if="item.type === 'datetime'">
              DATE and TIME CONTROL HERE
            </div>
            <div v-else-if="item.type === 'text'">
              TEXT INPUT CONTROL HERE
            </div>
            <div v-else-if="item.type === 'number'">
              NUMBER INPUT CONTROL HERE
            </div>
            <div v-else-if="item.type === 'bool'">
              CHECKBOX INPUT CONTROL HERE
            </div>
            <div v-else><span class="error">UNKNOWN CUSTOM CONTROL TYPE: {{ item.type }}</span></div>
          </v-flex>
        </template>
      </v-layout>
    </div>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  xeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
 * v-if="item.hide == false"
 *
 * TODO: have the template, have the custom field data, now just need to show it all properly and update the fragment of json when changes made which then updates the
 * parent object.
 *
 * 1) read the template, extract out only the Custom fields, use pattern XXXXCustomXXX to match?  Nope, if it has a "type" then it's custom for sure.
 * 
 * 2) Generate the controls dynamically based on the template
 * Possible types are:
 * 
        public const string Currency = "currency";
        public const string Date = "date";
        public const string Time = "time";
        public const string DateTime = "datetime";
        public const string Text = "text";
        public const string Number = "number"; //decimal regardless
        public const string Bool = "bool";

                TEMPLATE: [ { "fld": "WidgetNotes", "required": "true" }, { "fld": "WidgetCustom1", "hide": "false", "required": "false", "type": "date" }, 
                { "fld": "WidgetCustom2", "hide": "false", "required": "true", "type": "text" }, { "fld": "WidgetCustom3", "hide": "false", "required": "false", "type": "int" },
                { "fld": "WidgetCustom4", "hide": "false", "required": "false", "type": "bool" }, { "fld": "WidgetCustom5", "hide": "false", "required": "false", "type": "decimal" } ]
 * 3) bind to the data somehow (might have to warp the data to fit the controls in some cases due to changed template design)
    - computed properties that sit above the json and translate into and out of it, custom1, custom2 etc.  If empty then it's just empty.
 * 4) Profit$
 *
 */
export default {
  data() {
    return {
      obj: { blah: "blah", rhubarb: "rhubarb" }
    };
  },
  props: {
    value: String,
    formKey: String //used to grab template from store
  },
  watch: {
    value(val) {
      //this ensures the parent form gets the onchange event
      //not actually sure why there are two here but it worked with the datetime picker so I replicated it here
      this.$emit("input", val);
      this.$emit("change", val);
    }
  },
  // computed: {
  //   //todo: make this work with a text field first to make life easier and get the concept rolling then extend out
  //   custom1: {
  //     get: function() {
  //       //TODO: move all this functionality to quick easy methods to call for each custom type
  //       //get the cx name of this field
  //       //get the type of this field expected from the store template
  //       //get the value in the json, co-erce it to the expected type and return it
  //     },
  //     set: function(newValue) {
  //       //get the cx name of this field
  //       //store the value in the json or update it with the textual representation of this field's data
  //       //might need to mark dirty as well or push an event of change?
  //     }
  //   },
  //   custom2: {
  //     get: function() {
  //       //get the cx name of this field
  //       //get the type of this field expected from the store template
  //       //get the value in the json, co-erce it to the expected type and return it
  //     },
  //     set: function(newValue) {
  //       //get the cx name of this field
  //       //store the value in the json or update it with the textual representation of this field's data
  //       //might need to mark dirty as well or push an event of change?
  //     }
  //   }
  // },
  methods: {},
  beforeCreate() {
    //check pre-requisites exist just in case
    if (this.$gzdevmode()) {
      if (!this.$_) {
        throw "custom-fields-control: $_ (lodash) is required and missing";
      }
      if (!this.$gzlocale) {
        throw "custom-fields-control: $gzlocale is required and missing";
      }
    }
  },
  created() {
    if (this.$gzdevmode()) {
      //debugger;
      if (!this.formKey) {
        throw "custom-fields-control: formKey property is required and missing";
      }
    }
  }
};
</script>