use luya select for ngrest filters (#419)

* use luya select for ngrest filters

* add syntax error test

* changelog

* fix changelog

CHANGELOG.md

@@ -5,6 +5,7 @@ In order to read more about upgrading and BC breaks have a look at the [UPGRADE
 
 ## 2.4.0
 
++ [#419](https://github.com/luyadev/luya-module-admin/pull/419) NgRest Filters are rendered by LUYA admin select dropdown instead of browser dropdown, this allows to search in the list.
 + [#233](https://github.com/luyadev/luya-module-admin/issues/233) Improve error message for empty active window callback parameters.
 + [#413](https://github.com/luyadev/luya-module-admin/pull/413) Option to disable the auto bootstrap of the queue command in conflict siutations.
 + [#409](https://github.com/luyadev/luya-module-admin/issues/409) Bootstrap the native Yii Queue console command in order to use run and listen commands.

src/resources/dist/vendor.js

@@ -1,7 +1,7 @@
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 /*
- AngularJS v1.7.8
+ AngularJS v1.7.9
  (c) 2010-2018 Google, Inc. http://angularjs.org
  License: MIT
 */
@@ -21,7 +21,7 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
  return function () {
  var d = arguments[0],
  c;
- c = "[" + (a ? a + ":" : "") + d + "] http://errors.angularjs.org/1.7.8/" + (a ? a + "/" : "") + d;
+ c = "[" + (a ? a + ":" : "") + d + "] http://errors.angularjs.org/1.7.9/" + (a ? a + "/" : "") + d;
 
  for (d = 1; d < arguments.length; d++) {
  c = c + (1 == d ? "?" : "&") + "p" + (d - 1) + "=";
@@ -89,7 +89,7 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
  if (D(g) || B(g)) for (var k = Object.keys(g), h = 0, l = k.length; h < l; h++) {
  var m = k[h],
  p = g[m];
- d && D(p) ? ha(p) ? a[m] = new Date(p.valueOf()) : ab(p) ? a[m] = new RegExp(p) : p.nodeName ? a[m] = p.cloneNode(!0) : $b(p) ? a[m] = p.clone() : (D(a[m]) || (a[m] = H(p) ? [] : {}), Zb(a[m], [p], !0)) : a[m] = p;
+ d && D(p) ? ha(p) ? a[m] = new Date(p.valueOf()) : ab(p) ? a[m] = new RegExp(p) : p.nodeName ? a[m] = p.cloneNode(!0) : $b(p) ? a[m] = p.clone() : "__proto__" !== m && (D(a[m]) || (a[m] = H(p) ? [] : {}), Zb(a[m], [p], !0)) : a[m] = p;
  }
  }
 
@@ -881,7 +881,7 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
  $$cookieReader: kg
  });
  }]).info({
- angularVersion: "1.7.8"
+ angularVersion: "1.7.9"
  });
  }
 
@@ -6464,11 +6464,11 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
  Wc = !1,
  Pa = 3,
  Ke = {
- full: "1.7.8",
+ full: "1.7.9",
  major: 1,
  minor: 7,
- dot: 8,
- codeName: "enthusiastic-oblation"
+ dot: 9,
+ codeName: "pollution-eradication"
  };
 
  Y.expando = "ng339";
@@ -10049,9 +10049,9 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
  }],
  jf = Ra(function (a, b, d) {
  a.$watchCollection(d.ngStyle, function (a, d) {
- d && a !== d && (a || (a = {}), r(d, function (b, d) {
- null == a[d] && (a[d] = "");
- }));
+ d && a !== d && r(d, function (a, c) {
+ b.css(c, "");
+ });
  a && b.css(a);
  });
  }),

src/resources/js/directives.js

@@ -1483,16 +1483,47 @@ zaa.directive("zaaSelect", function () {
  "initvalue": "@initvalue"
  },
  controller: ['$scope', '$timeout', '$rootScope', function ($scope, $timeout, $rootScope) {
+ if ($scope.optionsvalue == undefined) {
+ $scope.optionsvalue = 'value';
+ }
+ if ($scope.optionslabel == undefined) {
+ $scope.optionslabel = 'label';
+ }
+ }],
+ 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">'+
+ '<luya-select ng-model="model" options="options" id="{{id}}" optionsvalue="{{optionsvalue}}" optionslabel="{{optionslabel}}" initvalue="{{initvalue}}" />' +
+ '</div>' +
+ '</div>';
+ }
+ }
+});
 
- /* default scope values */
+zaa.directive("luyaSelect", function() {
+ return {
+ restrict: "E",
+ scope: {
+ "model": "=ngModel",
+ "options": "=",
+ "optionsvalue": "@optionsvalue",
+ "optionslabel": "@optionslabel",
+ "id": "@fieldid",
+ "initvalue": "@initvalue",
+ ngChange : "&"
+ },
+ controller: ['$scope', '$timeout', '$rootScope', function ($scope, $timeout, $rootScope) {
 
  $scope.isOpen = 0;
 
- if ($scope.optionsvalue == undefined) {
+ if ($scope.optionsvalue == undefined || $scope.optionsvalue == "") {
  $scope.optionsvalue = 'value';
  }
 
- if ($scope.optionslabel == undefined) {
+ if ($scope.optionslabel == undefined || $scope.optionslabel == "") {
  $scope.optionslabel = 'label';
  }
 
@@ -1520,6 +1551,8 @@ zaa.directive("zaaSelect", function () {
  $scope.model = $scope.initvalue;
  }
  }
+
+
  });
  });
 
@@ -1547,7 +1580,8 @@ zaa.directive("zaaSelect", function () {
  };
 
  $scope.setModelValue = function (option) {
- $scope.model = option[$scope.optionsvalue];
+ $scope.model = angular.isObject(option) ? option[$scope.optionsvalue] : option;
+ $timeout($scope.ngChange, 0);
  $scope.closeSelect();
  };
 
@@ -1573,33 +1607,26 @@ zaa.directive("zaaSelect", function () {
  };
  }],
  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">' +
- '<div class="zaaselect" ng-class="{\'open\':isOpen, \'selected\':hasSelectedValue()}">' +
- '<select class="zaaselect-select" ng-model="model">' +
- '<option ng-repeat="opt in options" ng-value="opt[optionsvalue]">{{opt[optionslabel]}}</option>' +
- '</select>' +
- '<div class="zaaselect-selected">' +
- '<span class="zaaselect-selected-text" ng-click="toggleIsOpen()">{{getSelectedLabel()}}</span>' +
- '<i class="material-icons zaaselect-clear-icon" ng-click="model=initvalue">clear</i>' +
- '<i class="material-icons zaaselect-dropdown-icon" ng-click="toggleIsOpen()">keyboard_arrow_down</i>' +
- '</div>' +
- '<div class="zaaselect-dropdown">' +
- '<div class="zaaselect-search">' +
- '<input class="zaaselect-search-input" type="search" focus-me="isOpen" ng-model="searchQuery" />' +
- '</div>' +
- '<div class="zaaselect-overflow">' +
- '<div class="zaaselect-item" ng-repeat="opt in options | filter:searchQuery">' +
- '<span class="zaaselect-label" ng-class="{\'zaaselect-label-active\': opt[optionsvalue] == model}" ng-click="opt[optionsvalue] == model ? false : setModelValue(opt)">{{opt[optionslabel]}}</span>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '</div>';
+ return '<div class="zaaselect" ng-class="{\'open\':isOpen, \'selected\':hasSelectedValue()}">' +
+ '<select class="zaaselect-select" ng-model="model">' +
+ '<option ng-repeat="opt in options" ng-value="opt[optionsvalue]">{{opt[optionslabel]}}</option>' +
+ '</select>' +
+ '<div class="zaaselect-selected">' +
+ '<span class="zaaselect-selected-text" ng-click="toggleIsOpen()">{{getSelectedLabel()}}</span>' +
+ '<i class="material-icons zaaselect-clear-icon" ng-click="setModelValue(initvalue)">clear</i>' +
+ '<i class="material-icons zaaselect-dropdown-icon" ng-click="toggleIsOpen()">keyboard_arrow_down</i>' +
+ '</div>' +
+ '<div class="zaaselect-dropdown">' +
+ '<div class="zaaselect-search">' +
+ '<input class="zaaselect-search-input" type="search" focus-me="isOpen" ng-model="searchQuery" />' +
+ '</div>' +
+ '<div class="zaaselect-overflow">' +
+ '<div class="zaaselect-item" ng-repeat="opt in options | filter:searchQuery">' +
+ '<span class="zaaselect-label" ng-class="{\'zaaselect-label-active\': opt[optionsvalue] == model}" ng-click="opt[optionsvalue] == model ? false : setModelValue(opt)">{{opt[optionslabel]}}</span>' +
+ '</div>' +
+ '</div>' +
+ '</div>' +
+ '</div>';
  }
  }
 });

src/views/ngrest/crud.php

@@ -2,6 +2,8 @@
 use luya\admin\ngrest\render\RenderCrud;
 use luya\admin\Module;
 use luya\admin\helpers\Angular;
+use luya\helpers\ArrayHelper;
+use luya\helpers\Json;
 
 /** @var $config \luya\admin\ngrest\ConfigInterface */
 /** @var $this \luya\admin\ngrest\render\RenderCrudView */
@@ -10,6 +12,9 @@
 /** @var $modelSelection string|boolean Whether a model can be selected from isInline call, if yes it contains the value from the previous selected model in order to highlight this id. If false the selection is disabled. */
 $this->beginPage();
 $this->beginBody();
+
+$filters = ArrayHelper::combine(array_keys($config->getFilters()));
+$filters = Angular::optionsArrayInput($filters);
 ?>
 <?php $this->registerAngularControllerScript(); ?>
 <div ng-controller="<?= $config->hash; ?>" class="crud">
@@ -127,12 +132,7 @@
  </div>
  <?php if (!empty($config->getFilters())): ?>
  <div class="col-md-4 col-lg-3 col-xl-3 col-xxxl-2">
- <select class="form-control" ng-model="config.filter" ng-change="changeNgRestFilter()">
- <option value="0"><?= Module::t('ngrest_crud_filter_prompt'); ?></option>
- <?php foreach (array_keys($config->getFilters()) as $name): ?>
- <option value="<?= $name; ?>"><?= $name; ?></option>
- <?php endforeach; ?>
- </select>
+ <luya-select ng-model="config.filter" initvalue="0" ng-change="changeNgRestFilter()" options='<?= Json::htmlEncode($filters); ?>' />
  </div>
  <?php endif; ?>
  </div>

tests/admin/ngrest/base/ControllerTest.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace admintests\admin\ngrest\base;
+
+use admintests\AdminModelTestCase;
+use luya\admin\models\User;
+use luya\admin\ngrest\base\Controller;
+use luya\testsuite\fixtures\NgRestModelFixture;
+use luya\testsuite\scopes\PermissionScope;
+use luya\testsuite\traits\AdminDatabaseTableTrait;
+
+class ControllerTest extends AdminModelTestCase
+{
+ use AdminDatabaseTableTrait;
+
+ public function testIndex()
+ {
+ $fixture = new NgRestModelFixture([
+ 'modelClass' => User::class,
+ ]);
+
+ PermissionScope::run($this->app, function(PermissionScope $scope) {
+ $scope->loginUser();
+
+ $stub = new StubController('id', $this->app);
+ $html = $stub->actionIndex();
+
+ $this->assertNotEmpty($html);
+ });
+
+ }
+}
+
+class StubController extends Controller
+{
+ public $modelClass = User::class;
+}