new tag array type (luyadev#370)

* new tag array type * add test, phpdoc and changelog * add since tag
slowfox089 · Dec 10, 2020 · c5d7047 · c5d7047
1 parent a1f6c22
commit c5d7047
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ In order to read more about upgrading and BC breaks have a look at the [UPGRADE
 
 ## 2.2.1
 
++ [#370](https://github.com/luyadev/luya-module-admin/pull/370) Added new `zaa-tag-array` directive which generates an array of selected tag ids assigned to the model.
 + [#369](https://github.com/luyadev/luya-module-admin/pull/369) Added `toggleRelation` option for Tags model and common api to toggle tags on a certain item.
 + [#367](https://github.com/luyadev/luya-module-admin/issues/367) Fixed bug with checkbox properties and default values in admin context.
 

diff --git a/src/base/TypesInterface.php b/src/base/TypesInterface.php
@@ -81,6 +81,12 @@ interface TypesInterface
      */
     const TYPE_DATETIME = 'zaa-datetime';
 
+    /**
+     * @var string The directive returns an array of tag ids assigned to the model.
+     * @since 2.2.1
+     */
+    const TYPE_TAG_ARRAY = 'zaa-tag-array';
+
     /**
      * @var integer If value is set (checkbox is checked) `1` will return otherwise `0`.
      */

diff --git a/src/helpers/Angular.php b/src/helpers/Angular.php
@@ -193,6 +193,20 @@ public static function sortRelationArray($ngModel, $label, array $sourceData, ar
         return self::injector(TypesInterface::TYPE_SORT_RELATION_ARRAY, $ngModel, $label, ['sourceData' => static::optionsArrayInput($sourceData)], $options);
     }
 
+    /**
+     * Generate a directive which assignes an array of selected tag ids to the model.
+     *
+     * @param string $ngModel The name of the ng model which should be used for data binding.
+     * @param string $label The label to display for the form input.
+     * @param array $options An array with optional properties for the tag creation, where key is the property name and value its content.
+     * @return AngularObject
+     * @since 2.2.1
+     */
+    public static function tagArray($ngModel, $label, array $options = [])
+    {
+        return self::injector(TypesInterface::TYPE_TAG_ARRAY, $ngModel, $label, [], $options);
+    }
+
     /**
      * zaaText directive
      *

diff --git a/src/resources/dist/main.js b/src/resources/dist/main.js
diff --git a/src/resources/js/directives.js b/src/resources/js/directives.js
@@ -938,6 +938,56 @@ zaa.directive("zaaSortRelationArray", function () {
     }
 });
 
+/**
+ * Generate an array of tag ids which are selected from the list of tags.
+ * 
+ * An example content of model could be `var model = [1,3,4]` where values are the TAG IDs.
+ * 
+ * @since 2.2.1
+ */
+zaa.directive("zaaTagArray", function() {
+    return {
+        restrict: "E",
+        scope: {
+            "model": "=",
+            "label": "@label",
+            "i18n": "@i18n",
+            "id": "@fieldid"
+        },
+        controller: ['$scope', '$http', function ($scope, $http) {
+            $scope.tags = [];
+
+            $http.get('admin/api-admin-common/tags').then(function(response) {
+                $scope.tags = response.data;
+            });
+
+            if ($scope.model == undefined) {
+                $scope.model = [];
+            }
+
+            $scope.isInSelection = function(id) {
+                return $scope.model.indexOf(id) !== -1;
+            };
+
+            $scope.toggleSelection = function(id) {
+                var i = $scope.model.indexOf(id);
+                if (i > -1) {
+                    $scope.model.splice(i, 1);
+                } else {
+                    $scope.model.push(id);
+                }
+            };
+        }],
+        template: function () {
+            return '<div class="form-group form-side-by-side" ng-class="{\'input--hide-label\': i18n}">' +
+                '<div class="form-side form-side-label"><label for="{{id}}">{{label}}</label></div><div class="form-side">' + 
+                    '<span ng-click="toggleSelection(tag.id)" ng-repeat="tag in tags" ng-class="{\'badge-primary\' : isInSelection(tag.id), \'badge-secondary\' : !isInSelection(tag.id)}" class="badge badge-pill mx-1 mb-2">{{tag.name}}</span>' + 
+                '</div>' + 
+            '</div>';
+        }
+    }
+});
+
 /**
  * <zaa-link model="linkinfo" />
  */

diff --git a/tests/admin/helpers/AngularTest.php b/tests/admin/helpers/AngularTest.php
@@ -41,4 +41,9 @@ public function testSchedule()
         $this->assertSame('<luya-schedule value="model" title="xyz" model-class="path/to/model" attribute-name="attribute_name" attribute-values=\'[{"label":"Off","value":0},{"label":"On","value":1}]\' primary-key-value="pkvalue"></luya-schedule>', Angular::schedule('model', 'label', 'pkvalue', [0 => 'Off', 1 => 'On'], 'path/to/model', 'attribute_name', ['title' => 'xyz'])->render());
         $this->assertSame('<luya-schedule value="model" title="label" model-class="path/to/model" attribute-name="attribute_name" attribute-values=\'[{"label":"Off","value":0},{"label":"On","value":1}]\' primary-key-value="pkvalue" only-icon="1"></luya-schedule>', Angular::schedule('model', 'label', 'pkvalue', [0 => 'Off', 1 => 'On'], 'path/to/model', 'attribute_name', ['only-icon' => 1])->render());
     }
+
+    public function testTagArray()
+    {
+        $this->assertSame('<zaa-tag-array model="barfoo" label="label" options=\'[]\' fieldid="barfoo-zaa-tag-array" fieldname="barfoo"></zaa-tag-array>', Angular::tagArray('barfoo', 'label')->render());
+    }
 }