Add support for up to 4 fields to multipairfield (#15531)

4 files changed, 114 insertions, 22 deletions

diff --git a/plugins/CoreHome/angularjs/multipairfield/multipairfield.controller.js b/plugins/CoreHome/angularjs/multipairfield/multipairfield.controller.js
index ea3324be36..5d2a0a0ab2 100644
--- a/plugins/CoreHome/angularjs/multipairfield/multipairfield.controller.js
+++ b/plugins/CoreHome/angularjs/multipairfield/multipairfield.controller.js
@@ -34,6 +34,14 @@
             $scope.field2.templateFile = getTemplate($scope.field2);
         }
 
+        if ($scope.field3 && !$scope.field3.templateFile) {
+            $scope.field3.templateFile = getTemplate($scope.field3);
+        }
+
+        if ($scope.field4 && !$scope.field4.templateFile) {
+            $scope.field4.templateFile = getTemplate($scope.field4);
+        }
+
         var self = this;
         $scope.$watch('formValue', function () {
             if (!$scope.formValue || !$scope.formValue.length) {
@@ -50,19 +58,38 @@
                     hasAny = false;
                     return;
                 }
-                if ($scope.field1 && $scope.field2) {
-                    if (!table[$scope.field1.key] && !table[$scope.field2.key]) {
+
+                var fieldCount = 0;
+                if ($scope.field1 && $scope.field2 && $scope.field3 && $scope.field4) {
+                    fieldCount = 4;
+                } else if ($scope.field1 && $scope.field2 && $scope.field3) {
+                    fieldCount = 3;
+                } else if ($scope.field1 && $scope.field2) {
+                    fieldCount = 2;
+                } else if ($scope.field1) {
+                    fieldCount = 1;
+                }
+                table.fieldCount = fieldCount;
+
+                if (fieldCount === 4) {
+                    if (!table[$scope.field1.key] && !table[$scope.field2.key] && !table[$scope.field3.key] && !table[$scope.field4.key]) {
                         hasAny = false;
                     }
-                } else if ($scope.field1) {
-                    if (!table[$scope.field1.key]) {
+                } else if (fieldCount === 3) {
+                    if (!table[$scope.field1.key] && !table[$scope.field2.key] && !table[$scope.field3.key]) {
                         hasAny = false;
                     }
-                } else if ($scope.field2) {
-                    if (!table[$scope.field2.key]) {
+                } else if (fieldCount === 2) {
+                    if (!table[$scope.field1.key] && !table[$scope.field2.key]) {
+                        hasAny = false;
+                    }
+                } else if (fieldCount === 1) {
+                    if (!table[$scope.field1.key]) {
                         hasAny = false;
                     }
                 }
+
+
             });
             if (hasAny) {
                 this.addEntry();
@@ -78,6 +105,12 @@
                 if ($scope.field2 && $scope.field2.key) {
                     obj[$scope.field2.key] = '';
                 }
+                if ($scope.field3 && $scope.field3.key) {
+                    obj[$scope.field3.key] = '';
+                }
+                if ($scope.field4 && $scope.field4.key) {
+                    obj[$scope.field4.key] = '';
+                }
                 $scope.formValue.push(obj);
             }
         };
diff --git a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html
index 0510830f92..2eea7d959b 100644
--- a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html
+++ b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html
@@ -1,13 +1,13 @@
 <div class="multiPairField form-group">
     <div ng-repeat="(index, item) in formValue"
-         class="multiPairFieldTable multiPairFieldTable{{ index }} multiple valign-wrapper">
+         class="multiPairFieldTable multiPairFieldTable{{ index }} has{{ item.fieldCount }}Fields multiple valign-wrapper">
 
         <div piwik-field uicontrol="{{ field1.uiControl }}"
              data-title="{{ field1.title }}"
              full-width="true"
              ng-if="field1.templateFile"
              template-file="{{ field1.templateFile }}"
-             class="fieldUiControl1"
+             class="fieldUiControl fieldUiControl1"
              ng-class="{'hasMultiFields': (field1.templateFile && field2.templateFile)}"
              ng-model="formValue[index][field1.key]"
              options="field1.availableValues"
@@ -19,7 +19,7 @@
              data-title="{{ field2.title }}"
              full-width="true"
              ng-if="field2.templateFile"
-             class="fieldUiControl2"
+             class="fieldUiControl fieldUiControl2"
              template-file="{{ field2.templateFile }}"
              options="field2.availableValues"
              ng-change="multiPairField.onEntryChange()"
@@ -27,6 +27,30 @@
              placeholder=" ">
         </div>
 
+        <div piwik-field uicontrol="{{ field3.uiControl }}"
+             data-title="{{ field3.title }}"
+             full-width="true"
+             ng-if="field3.templateFile"
+             class="fieldUiControl fieldUiControl3"
+             template-file="{{ field3.templateFile }}"
+             options="field3.availableValues"
+             ng-change="multiPairField.onEntryChange()"
+             ng-model="formValue[index][field3.key]"
+             placeholder=" ">
+        </div>
+
+        <div piwik-field uicontrol="{{ field4.uiControl }}"
+             data-title="{{ field4.title }}"
+             full-width="true"
+             ng-if="field4.templateFile"
+             class="fieldUiControl fieldUiControl4"
+             template-file="{{ field4.templateFile }}"
+             options="field4.availableValues"
+             ng-change="multiPairField.onEntryChange()"
+             ng-model="formValue[index][field4.key]"
+             placeholder=" ">
+        </div>
+
         <span ng-click="multiPairField.removeEntry(index)"
               title="{{ 'General_Remove'|translate }}"
               ng-hide="(index + 1) == (formValue|length)"
diff --git a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js
index 81d9eb913e..58accd4d1e 100644
--- a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js
+++ b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.js
@@ -19,7 +19,9 @@
             restrict: 'A',
             scope: {
                 field1: '=',
-                field2: '='
+                field2: '=',
+                field3: '=',
+                field4: '='
             },
             require: "?ngModel",
             templateUrl: 'plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.html?cb=' + piwik.cacheBuster,
diff --git a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.less b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.less
index 78a9ca4577..3a2f34c736 100644
--- a/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.less
+++ b/plugins/CoreHome/angularjs/multipairfield/multipairfield.directive.less
@@ -6,21 +6,54 @@
     margin-bottom: 2px;
   }
 
-  .fieldUiControl1.hasMultiFields {
-    width: 160px;
-    display: inline-block;
-  }
+  .multiPairFieldTable {
+    
+    &.has1Fields {
+      .fieldUiControl1{
+        width: ~"calc(100% - 60px)";
+        padding-right: 0.75rem;
+      }
+    }
+  
+    &:not(.has1Fields) {
+      .fieldUiControl {
+        display: inline-block;
+        padding-right: 0.75rem;
+      }
+    }
 
-  .fieldUiControl1:not(.hasMultiFields) {
-    width: ~"calc(100% - 60px)";
-    padding-right: 0.75rem;
+    &.has2Fields {
+      .fieldUiControl1 {
+        width: 160px;
+      }
+      .fieldUiControl2 {
+        width: ~"calc(100% - 190px)";
+        padding: 0.75rem;
+      }
+    }
+  
+    &.has3Fields {
+      .fieldUiControl1 {
+        width: 120px;
+      }
+      .fieldUiControl2,
+      .fieldUiControl3 {
+        width: 220px;
+      }
+    }
+  
+    &.has4Fields {
+      .fieldUiControl1 {
+        width: 120px;
+      }
+      .fieldUiControl2,
+      .fieldUiControl3,
+      .fieldUiControl4 {
+        width: 148px;
+      }
+    }
   }
 
-  .fieldUiControl2 {
-    width: ~"calc(100% - 190px)";
-    padding: 0.75rem;
-    display: inline-block;
-  }
   .icon-minus {
     cursor: pointer;
   }