This commit is contained in:
@@ -45,7 +45,13 @@ CURRENT ROADMAP
|
||||
CURRENT TODOs
|
||||
=-=-=-=-=-=-=
|
||||
|
||||
NOW: working on Custom2 biz rule when empty on regular record (not new yet, just getting it working on regular up front)
|
||||
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: Make sure can easily make new record in Widget form before getting into deeper stuff or making any other object forms.
|
||||
|
||||
@@ -59,25 +65,6 @@ TODO: Widget edit form, new record sb time and dates pre-filled in? Server invol
|
||||
- some objects may be configurable what the default date/time range is so maybe enable that for widget to test
|
||||
- SB defaults route on server or is this a profile thing and user selectable?
|
||||
|
||||
TODO: Widget edit form, new record cdata error as it's empty on new
|
||||
- To see, create new and edit the custom2
|
||||
|
||||
TODO: Custom fields
|
||||
- Needs to cache the customization data of the form and concurrency token used to fetch it and then it checks the concurrency token periodically
|
||||
- {"data":{"id":1,"concurrencyToken":3761005,"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\"}]"}}
|
||||
|
||||
- Needs to be aware of and handle the fact that the end user may change the data type
|
||||
- if it expects a type of value and finds one it can't co-erce into the new type then it should zap it or set it null by default.
|
||||
- This could get ugly so just stick to a simple system like wiping uncoercable data and fuck it, they made their choice :)
|
||||
- Implement then Componentize
|
||||
- Maybe start with a component first now that I have my feet wet in it, saves time
|
||||
- Have to think about the design, but probably most useful when on the same page as the main record just like in v7 windows
|
||||
- Should be a single component I can reference on the form that handles it all directly
|
||||
- Custom field "slot" maybe just like the VUE Way so that it can be easily optionally shown or not in it's slot
|
||||
- Though, these need to be part of the record as well, hmmm...maybe better if they appear to be just normal fields and are added dynamically??
|
||||
- It would be nice though to just insert a slot and let a component handle it rather than buncvh of code on every form...
|
||||
- It's kind of like one control that is bound to the JSON custom fields-field and it would update it as edited and required so I guess this is how to think about it and implement it, as a control
|
||||
|
||||
TODO: Form customize UI
|
||||
- Where you create custom fields and edit
|
||||
- If a user changes a field data type there needs to be a big warning before accepting it.
|
||||
|
||||
@@ -34,7 +34,18 @@
|
||||
px-2
|
||||
>
|
||||
<div v-if="item.type === 'currency'">
|
||||
CURRENCY 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))
|
||||
]"
|
||||
type="number"
|
||||
></v-text-field>
|
||||
</div>
|
||||
<div v-else-if="item.type === 'date'">
|
||||
DATE CONTROL HERE
|
||||
@@ -46,7 +57,6 @@
|
||||
DATE and TIME CONTROL HERE
|
||||
</div>
|
||||
<div v-else-if="item.type === 'text'">
|
||||
{{ lt(item.fld) }}
|
||||
<v-textarea
|
||||
v-model="_self[item.dataKey]"
|
||||
:readonly="readOnly"
|
||||
@@ -59,20 +69,6 @@
|
||||
auto-grow
|
||||
clearable
|
||||
></v-textarea>
|
||||
|
||||
<!-- <v-textarea
|
||||
v-model="obj.notes"
|
||||
:readonly="this.formState.readOnly"
|
||||
:label="lt('WidgetNotes')"
|
||||
:error-messages="form().serverErrors(this, 'notes')"
|
||||
ref="notes"
|
||||
@change="onChange('notes')"
|
||||
auto-grow
|
||||
|
||||
@change="onChange(item.fld)"
|
||||
|
||||
>
|
||||
></v-textarea> -->
|
||||
</div>
|
||||
<div v-else-if="item.type === 'number'">
|
||||
NUMBER INPUT CONTROL HERE
|
||||
@@ -131,21 +127,21 @@ CUSTOM FIELD DATA:
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
c1: null,
|
||||
// c2: null, this was replaced with a computed property as will all others
|
||||
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
|
||||
// c1: null,
|
||||
// // c2: null, this was replaced with a computed property as will all others
|
||||
// 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: {
|
||||
@@ -155,6 +151,14 @@ export default {
|
||||
parentVM: Object
|
||||
},
|
||||
computed: {
|
||||
c1: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c1");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c1", newValue);
|
||||
}
|
||||
},
|
||||
c2: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c2");
|
||||
@@ -162,12 +166,127 @@ export default {
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c2", newValue);
|
||||
}
|
||||
},
|
||||
c3: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c3");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c3", newValue);
|
||||
}
|
||||
},
|
||||
c4: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c4");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c4", newValue);
|
||||
}
|
||||
},
|
||||
c5: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c5");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c5", newValue);
|
||||
}
|
||||
},
|
||||
c6: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c6");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c6", newValue);
|
||||
}
|
||||
},
|
||||
c7: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c7");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c7", newValue);
|
||||
}
|
||||
},
|
||||
c8: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c8");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c8", newValue);
|
||||
}
|
||||
},
|
||||
c9: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c9");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c9", newValue);
|
||||
}
|
||||
},
|
||||
c10: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c10");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c10", newValue);
|
||||
}
|
||||
},
|
||||
c11: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c11");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c11", newValue);
|
||||
}
|
||||
},
|
||||
c12: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c12");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c12", newValue);
|
||||
}
|
||||
},
|
||||
c13: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c13");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c13", newValue);
|
||||
}
|
||||
},
|
||||
c14: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c14");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c14", newValue);
|
||||
}
|
||||
},
|
||||
c15: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c15");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c15", newValue);
|
||||
}
|
||||
},
|
||||
c16: {
|
||||
get: function() {
|
||||
return this.GetValueForField("c16");
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.SetValueForField("c16", newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
lt: function(ltkey) {
|
||||
return window.$gz.locale.get(ltkey);
|
||||
},
|
||||
ltFormat() {
|
||||
return window.$gz.locale.format();
|
||||
},
|
||||
form() {
|
||||
//nothing
|
||||
return window.$gz.form;
|
||||
@@ -199,14 +318,12 @@ export default {
|
||||
SetValueForField: function(dataKey, newValue) {
|
||||
//https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn
|
||||
|
||||
//debugger;
|
||||
|
||||
//Is this a new or empty custom fields object?
|
||||
if (this.value === null || this.value === undefined) {
|
||||
this.value = "{}"; //empty json fragment, field will be added later below
|
||||
}
|
||||
|
||||
//Get the data out of the json string value
|
||||
//Get the current data out of the json string value
|
||||
//
|
||||
var cData = JSON.parse(this.value);
|
||||
if (!window.$gz._.has(cData, dataKey)) {
|
||||
@@ -233,7 +350,6 @@ export default {
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
// console.log("custom-fields-control::BEFORECREATE: TOP");
|
||||
//check pre-requisites exist just in case
|
||||
if (window.$gz.errorHandler.devMode()) {
|
||||
if (!window.$gz._) {
|
||||
@@ -245,7 +361,6 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log("custom-fields-control::BEFORECREATE: TOP");
|
||||
if (window.$gz.errorHandler.devMode()) {
|
||||
//debugger;
|
||||
if (!this.formKey) {
|
||||
|
||||
Reference in New Issue
Block a user