Show label for input checkbox widget

src/app/gui/inputs/checkbox/service.js

@@ -1,29 +1,25 @@
 const Service           = require('gui/inputs/service');
 module.exports = class CheckBoxService extends Service {
   constructor(opts = {}) {
-    const value = opts.state.input.options.values.find(v => false === v.checked);
     opts.validatorOptions = {
       values: opts.state.input.options.values.map(v => v)
     };
-    if (null === opts.state.value && !opts.state.forceNull) {
-      opts.state.value = value.value
-    }
     super(opts);
   }
 
   convertCheckedToValue(checked) {
     checked          = [null, undefined].includes(checked) ? false : checked;
-    this.state.value = (this.state.input.options.values.find(v => checked === v.checked) || {}).value;
-
+    this.state.value = [true, false].includes(this.state.value) //check if is a boolean value
+      ? (this.state.input.options.values.find(v => checked === v.checked) || {}).value //get boolean value
+      : `${(this.state.input.options.values.find(v => checked === v.checked) || {}).value}`; // Need to convert it to string because server return always string value
     return this.state.value;
   };
 
   convertValueToChecked() {
-    const valueToCheck = this.state.value;
-    if ([null, undefined].includes(valueToCheck)) { return false }
-    let option = this.state.input.options.values.find(value => valueToCheck == value.value);
+    if ([null, undefined].includes(this.state.value)) { return false }
+    let option = this.state.input.options.values.find(v => this.state.value == v.value);
     if (undefined === option) {
-      option = this.state.input.options.values.find(value => false === value.checked);
+      option = this.state.input.options.values.find(v => false === v.checked);
       this.state.value = option.value;
     }
     return option.checked;

src/components/GlobalTabs.vue

@@ -207,8 +207,7 @@
                 const field = this.fields.find(f => c === f.name);
                 this.unwatch.push(
                   this.$watch(() => field.value,
-                    async (v) => {
-                      this.feature.set(field.name, v);
+                    async () => {
                       await this.setVisibility(tab);
                     })
                 )

src/components/InputCheckbox.vue

@@ -36,7 +36,7 @@ export default {
     return {
       value: null,
       label: null,
-      id: getUniqueDomId() // new id
+      id:    getUniqueDomId() // new id
     }
   },
   methods: {
@@ -58,9 +58,8 @@ export default {
     }
   },
   mounted() {
-    if (this.state.forceNull) {
-      this.setLabel();
-    }
+    //Need to set label and value
+    this.stateValueChanged();
   }
 };
 </script>

src/components/g3w-form.js

@@ -162,7 +162,7 @@ export class FormService extends G3WObject {
 
     /**
      * Force update state of the service
-     * (eg. setted on a child to parent form service relation)
+     * (e.g., setted on a child to parent form service relation)
      */
     this.state = {
       layerid:              layer.getId(),
@@ -180,7 +180,7 @@ export class FormService extends G3WObject {
       update:               feature.isNew(), // set update in case or not is a new feature
       // when input change will be updated
       tovalidate:           {},
-      feature,
+      feature:              this.feature, //need to get feature cloned
       componentstovalidate: {},
       footer,
       ready:                false
@@ -228,6 +228,8 @@ export class FormService extends G3WObject {
    * @param input
    */
   changeInput(input) {
+    //need to set property
+    this.feature.set(input.name, input.value);
     if (true === this.listenChangeInput) {
       this.evaluateFilterExpressionFields(input);
       this.evaluateDefaultExpressionFields(input);
@@ -273,7 +275,6 @@ export class FormService extends G3WObject {
   evaluateDefaultExpressionFields(input = {}) {
     const filter = this.default_expression_fields_dependencies[input.name];
     if (filter) {
-      this.feature.set(input.name, input.value);
       filter.forEach(dependency_field => {
         getDefaultExpression({
           parentData:   this.parentData,
@@ -295,8 +296,6 @@ export class FormService extends G3WObject {
     if (filter) {
       // on form service inititalization `filter_expression` option has
       // `referencing_fields` or `referenced_columns` from another layer
-      const fieldForm = this._getField(input.name);
-      if (fieldForm) { this.feature.set(fieldForm.name, fieldForm.value) }
       filter.forEach(dependency_field => {
         getFilterExpression({
           parentData:   this.parentData,