Merge pull request #884 from lmcapacho/develop

Improve ComboboxField with size, callback, and add mode selection to basicCode

Author: cavearr

app/scripts/services/forms.js

@@ -534,16 +534,18 @@ angular
         //--   * value: Default Value for the option
         //--   * selected: If this option is the default
         //--   * label: Text assigned to the option
+        //--   * size: Size of the combobox
         //--
         //--  Returns:
         //--    -A string with the HTML code
         //-------------------------------------------------------------------------
-        constructor(options, label, value, formId) {
+        constructor(options, label, value, formId, size = null) {
           //-- Properties
           this.label = label;
           this.options = options;
           this.value = value;
           this.formId = formId;
+          this.size = size === null ? 'auto' : size;
 
           //-- Html template for building the combobox field
           //-- The parameters are:
@@ -559,7 +561,7 @@ angular
           //--  %ID% : Form identification number
           //--  %OPTIONS%: Array of available options
           this.htmlTemplate = `
-        <div class="form-group">
+        <div class="form-group" style="width:%SIZE%">
           <label style="font-weight:normal">%LABEL%</label>
           <select class="form-control" id="form%ID%">
             %OPTIONS%
@@ -625,6 +627,7 @@ angular
           let html = this.htmlTemplate.replace('%LABEL%', this.label);
           html = html.replace('%ID%', this.formId);
           html = html.replace('%OPTIONS%', opts);
+          html = html.replace('%SIZE%', this.size);
 
           return html;
         }
@@ -638,6 +641,17 @@ angular
 
           return value;
         }
+
+        //------------------------------------------------
+        //-- Attach a callback function to the change event
+        //-- INPUT:
+        //--   * callback: Function to execute on change
+        //------------------------------------------------
+        onChange(callback) {
+          $(`#form${this.formId}`).on('change', function () {
+            callback($(this).val());
+          });
+        }
       }
 
       //---------------------------------------------------------
@@ -1831,6 +1845,29 @@ angular
 
           this.addField(field6, toolsLabel);
 
+          //-------- Field 7: Combobox for selecting the display mode
+          //-- Options
+          let options = [
+            {
+              value: 1,
+              label: gettextCatalog.getString('Grid'),
+            },
+            {
+              value: 2,
+              label: gettextCatalog.getString('Manual'),
+            },
+          ];
+
+          let field7 = new ComboboxField(
+            options,
+            gettextCatalog.getString('Display mode:'), //-- Top message
+            1, //-- Default value
+            7, //-- Field id
+            'fit-content' //-- Width
+          );
+
+          this.addField(field7, modulePortsLabel);
+
           //-- Control the notifications generated by
           //-- the errors when processing the form
           this.resultAlert = null;