197 lines
7.4 KiB
Vue
197 lines
7.4 KiB
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'">
|
|
<v-textarea
|
|
v-model="_self[item.dataKey]"
|
|
:readonly="readOnly"
|
|
:label="lt(item.fld)"
|
|
auto-grow
|
|
></v-textarea>
|
|
</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>
|
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
/* eslint-disable */
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
/**
|
|
* v-if="item.hide == false"
|
|
*
|
|
* some discussion here might be useful: https://github.com/vuejs/vue/issues/1056
|
|
*
|
|
* 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";
|
|
|
|
|
|
FORMKEY: widget
|
|
TEMPLATE: [ { "fld": "WidgetNotes", "required": "true" }, { "fld": "WidgetCustom1", "hide": "false", "required": "false", "type": "datetime" }, { "fld": "WidgetCustom2", "hide": "false", "required": "true", "type": "text" }, { "fld": "WidgetCustom3", "hide": "false", "required": "false", "type": "number" }, { "fld": "WidgetCustom4", "hide": "false", "required": "false", "type": "bool" }, { "fld": "WidgetCustom5", "hide": "false", "required": "false", "type": "currency" }, { "fld": "WidgetCustom6", "hide": "false", "required": "false", "type": "date" }, { "fld": "WidgetCustom7", "hide": "false", "required": "false", "type": "time" } ]
|
|
CUSTOM FIELD DATA:
|
|
{"c1":"2020-03-12T16:37:39.9094856Z","c2":"Sint laborum quisquam dolorem ipsum architecto voluptate consequatur tempora praesentium. Nemo aliquam amet aut aliquid perspiciatis adipisci excepturi. Officia ea voluptatem dolore suscipit ipsa itaque. Quaerat nostrum ut qui dignissimos nesciunt quasi laudantium dicta. Ut nihil doloribus illum rem quas sed.","c3":30453626,"c4":false,"c5":0.529134196010015}
|
|
|
|
|
|
* 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 {
|
|
c1: null,
|
|
//c2: "Here is my WidgetCustom2 Data!",
|
|
c3: null,
|
|
c4: null,
|
|
c5: null,
|
|
c6: null,
|
|
c7: null,
|
|
c8: null,
|
|
c9: null,
|
|
c10: null,
|
|
c12: null,
|
|
c13: null,
|
|
c14: null,
|
|
c15: null,
|
|
c16: null
|
|
};
|
|
},
|
|
props: {
|
|
value: String,
|
|
formKey: String, //used to grab template from store
|
|
readOnly: Boolean
|
|
},
|
|
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: {
|
|
c2: {
|
|
get: function() {
|
|
return this.GetValueForField("c2");
|
|
},
|
|
set: function(newValue) {
|
|
this.SetValueForField("c2", newValue);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
lt: function(ltkey) {
|
|
return this.$gzlocale.get(ltkey);
|
|
},
|
|
GetValueForField: function(dataKey) {
|
|
if (!this.value) {
|
|
return null;
|
|
}
|
|
// debugger;
|
|
var cData = JSON.parse(this.value);
|
|
// debugger;
|
|
return cData[dataKey];
|
|
},
|
|
SetValueForField: function(dataKey, newValue) {
|
|
console.log("Setting " + dataKey + " TO " + newValue);
|
|
}
|
|
},
|
|
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";
|
|
}
|
|
}
|
|
//debugger;
|
|
// this.$set(this.obj, "c1", "2020-03-12T16:37:39.9094856Z");
|
|
// this.$set(
|
|
// this.obj,
|
|
// "c2",
|
|
// "Sint laborum quisquam dolorem ipsum architecto voluptate consequatur tempora praesentium. Nemo aliquam amet aut aliquid perspiciatis adipisci excepturi. Officia ea voluptatem dolore suscipit ipsa itaque. Quaerat nostrum ut qui dignissimos nesciunt quasi laudantium dicta. Ut nihil doloribus illum rem quas sed."
|
|
// );
|
|
// this.$set(this.obj, "c3", 30453626);
|
|
// this.$set(this.obj, "c4", false);
|
|
// this.$set(this.obj, "c5", 5.55);
|
|
},
|
|
created() {
|
|
if (this.$gzdevmode()) {
|
|
//debugger;
|
|
if (!this.formKey) {
|
|
throw "custom-fields-control: formKey property is required and missing";
|
|
}
|
|
}
|
|
//{"c1":"2020-03-12T16:37:39.9094856Z","c2":"Sint laborum quisquam dolorem ipsum architecto voluptate consequatur tempora praesentium. Nemo aliquam amet aut aliquid perspiciatis adipisci excepturi. Officia ea voluptatem dolore suscipit ipsa itaque. Quaerat nostrum ut qui dignissimos nesciunt quasi laudantium dicta. Ut nihil doloribus illum rem quas sed.",
|
|
//"c3":30453626,"c4":false,"c5":0.529134196010015}
|
|
}
|
|
};
|
|
|
|
// //////////////////////
|
|
// // Get the data for the specified field key from the custom fields object
|
|
// // coerce the type if necessary / handle incompatible types
|
|
// function GetDataForField(fldKey, vm) {
|
|
// debugger;
|
|
// var cData = JSON.parse(vm.value);
|
|
// debugger;
|
|
// return "BaLH";
|
|
// }
|
|
</script>
|