Add methods for templates to set selected values and options list in …

…multiselect component (#3595) Signed-off-by: freddidierRTE <frederic-f.didier@rte-france.com>
opfab · Sep 22, 2022 · ad4c5e3 · ad4c5e3
1 parent d064182
commit ad4c5e3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/src/docs/asciidoc/reference_doc/template_description.adoc b/src/docs/asciidoc/reference_doc/template_description.adoc
@@ -647,10 +647,33 @@ OperatorFabric provides a multiselect component based on https://sa-si-dev.githu
   usercardTemplateGateway.getSpecificCardInformation = function () {
 
         const selectedValues = myMultiSelect.getSelectedValues(); 
+  ...
+  
+....
 
-      ....
+
+You can set selected values via method setSelectedValues();
+
+....
+  myMultiSelect.setSelectedValues(['A','B']);
 ....
 
+
+If you want to set the options list after init use setOptions method : 
+
+....
+
+  var options = [
+    { label: 'Options 1', value: '1' },
+    { label: 'Options 2', value: '2' },
+    { label: 'Options 3', value: '3' },
+  ];
+
+  myMultiSelect.setOptions(options);
+....
+
+
+
 WARNING: It strongly advice to NOT use directly virtual select (always use OperatorFabric js object and css) otherwise you will not be guaranteed compatibility when upgrading.
 
 

diff --git a/src/test/resources/bundles/defaultProcess_V1/template/usercard_process.handlebars b/src/test/resources/bundles/defaultProcess_V1/template/usercard_process.handlebars
@@ -31,27 +31,36 @@
         },
 
         initMultiSelect: function () {
-            opfab.multiSelect.init({
+            stateSelect = opfab.multiSelect.init({
                 id: "state-select",
                 options: [
                     {label: 'Started', value: 'start'},
                     {label: 'Calculation 1 done', value: 'calcul1'},
                     {label: 'Calculation 2 done', value: 'calcul2'},
-                    {label: 'Calculation 3 done', value: 'calcul3'},
+                    {label: 'Calculation 3 done', value: 'calcul3'}
                 ],
                 multiple: false,
                 search: true
             });
 
-            opfab.multiSelect.init({
+            statusSelect = opfab.multiSelect.init({
                 id: "status-select",
-                options: [
-                    {label: 'Ok', value: 'ok'},
-                    {label: 'Error', value: 'error'},
-                ],
+                options: [],
                 multiple: false,
                 search: false
             });
+            // Init multiselect option list via setOptions() instead of init  
+            // to have the method  setOptions() used in  cypress tests 
+            statusSelect.setOptions([
+                {label: 'Ok', value: 'ok'},
+                {label: 'Error', value: 'error'},
+            ],)
+
+            selectedProcessState = "{{card.data.state}}";
+            if (selectedProcessState.length > 0) stateSelect.setSelectedValues([selectedProcessState]);
+            
+            selectedProcessStatus = "{{card.data.status}}";
+            if (selectedProcessStatus.length > 0) statusSelect.setSelectedValues([selectedProcessStatus]);
 
         },
 

diff --git a/ui/main/src/assets/js/opfab.js b/ui/main/src/assets/js/opfab.js
@@ -22,6 +22,12 @@ opfab.multiSelect = {
             id: config.id,
             getSelectedValues() {
                 return document.querySelector('#' + config.id).value;
+            },
+            setSelectedValues(values) {
+                document.querySelector('#' + config.id).setValue(values);
+            },
+            setOptions(options) {
+                document.querySelector('#' + config.id).setOptions(options);
             }
         };
         VirtualSelect.init({