Merge pull request #2401 from ReliefApplications/2.8.x

refactor: tagbox using tag mode can now be disabled / enabled

Author: AntoineRelief

libs/shared/src/lib/components/dashboard-filter/filter-builder-modal/filter-builder-modal.component.ts

@@ -113,6 +113,7 @@ const CORE_QUESTION_ALLOWED_PROPERTIES = [
   'readOnly',
   'isRequired',
   'placeHolder',
+  'useSummaryTagMode',
   'enableIf',
   'visibleIf',
   'tooltip',

libs/shared/src/lib/survey/widgets/tagbox-widget.ts

@@ -43,30 +43,44 @@ export const init = (
       return question.getType() === componentName;
     },
     init: () => {
-      if (Serializer.findClass(componentName)) return;
-      Serializer.addClass(
-        componentName,
-        [
-          { name: 'hasOther:boolean', visible: false },
-          { name: 'hasSelectAll:boolean', visible: false },
-          { name: 'hasNone:boolean', visible: false },
-          { name: 'otherText', visible: false },
-          { name: 'selectAllText', visible: false },
-          { name: 'noneText', visible: false },
-        ],
-        () => null,
-        'checkbox'
-      );
-      Serializer.addProperty(componentName, {
-        name: 'placeholder',
-        category: 'general',
-        default: '',
-      });
-      Serializer.addProperty(componentName, {
-        name: 'allowAddNewTag:boolean',
-        category: 'general',
-        default: false,
-      });
+      if (Serializer.findClass(componentName)) {
+        Serializer.addProperty(componentName, {
+          name: 'useSummaryTagMode',
+          type: 'boolean',
+          category: 'general',
+          default: false,
+        });
+      } else {
+        Serializer.addClass(
+          componentName,
+          [
+            { name: 'hasOther:boolean', visible: false },
+            { name: 'hasSelectAll:boolean', visible: false },
+            { name: 'hasNone:boolean', visible: false },
+            { name: 'otherText', visible: false },
+            { name: 'selectAllText', visible: false },
+            { name: 'noneText', visible: false },
+          ],
+          () => null,
+          'checkbox'
+        );
+        Serializer.addProperty(componentName, {
+          name: 'placeholder',
+          category: 'general',
+          default: '',
+        });
+        Serializer.addProperty(componentName, {
+          name: 'useSummaryTagMode',
+          type: 'boolean',
+          category: 'general',
+          default: false,
+        });
+        Serializer.addProperty(componentName, {
+          name: 'allowAddNewTag:boolean',
+          category: 'general',
+          default: false,
+        });
+      }
     },
     isDefaultRender: false,
     afterRender: (question: any, el: HTMLElement): void => {
@@ -142,6 +156,18 @@ export const init = (
           tagboxInstance.disabled = value;
         }
       );
+      question.registerFunctionOnPropertyValueChanged(
+        'useSummaryTagMode',
+        (value: boolean) => {
+          if (value) {
+            tagboxInstance.tagMapper = (tags: any[]) => {
+              return tags.length < 2 ? tags : [tags];
+            };
+          } else {
+            tagboxInstance.tagMapper = () => null;
+          }
+        }
+      );
       if (question.visibleChoices.length) {
         updateChoices(tagboxInstance, question, currentSearchValue);
       }
@@ -186,9 +212,12 @@ export const init = (
     tagboxInstance.valueField = 'value';
     tagboxInstance.popupSettings = { appendTo: 'component' };
     tagboxInstance.fillMode = 'none';
-    tagboxInstance.tagMapper = (tags: any[]) => {
-      return tags.length < 2 ? tags : [tags];
-    };
+    if (question.useSummaryTagMode) {
+      tagboxInstance.tagMapper = (tags: any[]) => {
+        return tags.length < 2 ? tags : [tags];
+      };
+    }
+
     return tagboxInstance;
   };
   // ⚠ danger ⚠