Create organization-search-new

src/management/organizers/new/organization-search-controller-new.js

@@ -0,0 +1,88 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name udb.management.organizers.controller:OrganizationSearchControllerNew
+ * @description
+ * # Organization Search Controller
+ */
+angular
+  .module('udb.management.organizers')
+  .controller('OrganizationSearchControllerNew', OrganizationSearchControllerNew);
+
+/* @ngInject */
+function OrganizationSearchControllerNew(SearchResultGenerator, rx, $scope, OrganizerManager) {
+  var controller = this;
+
+  var itemsPerPage = 10;
+  var minQueryLength = 3;
+  var query$ = rx.createObservableFunction(controller, 'queryChanged');
+  var filteredQuery$ = query$.filter(ignoreShortQueries(minQueryLength));
+  var page$ = rx.createObservableFunction(controller, 'pageChanged');
+  var searchResultGenerator = new SearchResultGenerator(OrganizerManager, filteredQuery$, page$, itemsPerPage);
+  var searchResult$ = searchResultGenerator.getSearchResult$();
+
+  /**
+   * @param {number} minQueryLength
+   * @return {Function}
+   */
+  function ignoreShortQueries(minQueryLength) {
+    /**
+     * @param {string} query
+     */
+    return function (query) {
+      return query === '' || query.length >= minQueryLength;
+    };
+  }
+
+  /**
+   * @param {ApiProblem} problem
+   */
+  function showProblem(problem) {
+    controller.problem = problem;
+  }
+
+  function clearProblem()
+  {
+    controller.problem = false;
+  }
+
+  /**
+   * @param {(PagedCollection|ApiProblem)} searchResult
+   */
+  function showSearchResult(searchResult) {
+    var problem = searchResult.error;
+
+    if (problem) {
+      showProblem(problem);
+      controller.searchResult = {};
+    } else {
+      clearProblem();
+      controller.searchResult = searchResult;
+    }
+
+    controller.loading = false;
+  }
+
+  controller.loading = false;
+  controller.query = '';
+  controller.page = 0;
+  controller.minQueryLength = minQueryLength;
+
+  query$
+    .safeApply($scope, function (query) {
+      controller.query = query;
+    })
+    .subscribe();
+
+  searchResult$
+    .safeApply($scope, showSearchResult)
+    .subscribe();
+
+  filteredQuery$
+    .merge(page$)
+    .safeApply($scope, function () {
+      controller.loading = true;
+    })
+    .subscribe();
+}

src/management/organizers/new/organization-search-item-new.directive.js

@@ -0,0 +1,62 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name udb.management.organizers.directive:udbOrganizationSearchItemNew
+ * @var udbOrganizationSearchItemNew osic
+ * @description
+ * # Organizer search item Directive
+ */
+angular
+  .module('udb.management.organizers')
+  .directive('udbOrganizationSearchItemNew', OrganizationSearchItemNew);
+
+function OrganizationSearchItemNew() {
+  return {
+    restrict: 'A',
+    templateUrl: 'templates/organization-search-item-new.html',
+    bindToController: {
+      organizationSearchItem: '<udbOrganizationSearchItemNew'
+    },
+    controller: OrganizationSearchItemControllerNew,
+    controllerAs: 'osic'
+  };
+}
+
+/* @ngInject */
+function OrganizationSearchItemControllerNew($rootScope, jsonLDLangFilter, $translate) {
+  var controller = this;
+  var organizationDeletedListener = $rootScope.$on('organizationDeleted', matchAndMarkAsDeleted);
+  var defaultLanguage = $translate.use() || 'nl';
+
+  showOrganization(controller.organizationSearchItem);
+
+  /**
+   *
+   * @param {UdbOrganizer} organization
+   */
+  function showOrganization(organization) {
+    controller.organization = organization;
+    controller.organization.id = controller.organization['@id'].split('/').pop();
+    controller.organization = jsonLDLangFilter(controller.organization, defaultLanguage, true);
+  }
+
+  function markAsDeleted() {
+    organizationDeletedListener();
+    controller.organizationDeleted = true;
+  }
+
+  /**
+   * @param {Object} angularEvent
+   * @param {UdbOrganizer} deletedOrganization
+   */
+  function matchAndMarkAsDeleted(angularEvent, deletedOrganization) {
+    if (!controller.organization) {
+      return;
+    }
+
+    if (controller.organization.id === deletedOrganization.id) {
+      markAsDeleted();
+    }
+  }
+}

src/management/organizers/new/organization-search-item-new.html

@@ -0,0 +1,19 @@
+<tr class="organization-search-item" ng-class="{'deleted': osic.organizationDeleted}" ng-if="::osic.organization">
+    <td style="padding-left: 30px"><strong><a ng-bind="::osic.organization.name" ui-sref="split.organizerDetail({id: osic.organization.id})"></a></strong></td>
+    <td ng-if="::osic.organization.address.addressLocality">
+        <span ng-bind="::osic.organization.address.streetAddress"></span>
+        <br>
+        <span ng-bind="::osic.organization.address.addressLocality"></span>
+    </td>
+    <td ng-if="::!osic.organization.address.addressLocality">
+        <span translate-once="search.organization.noAddress"></span>
+    </td>
+    <td style="padding-right: 30px">
+        <div ng-if="::osic.organization.created">
+            <i class="fa fa-clock"></i> <span ng-bind="::osic.organization.created | amDateFormat:'DD/MM/YYYY HH:mm'"></span>
+        </div>
+        <div ng-if="::osic.organization.creator">
+            <i class="fa fa-user"></i> <span ng-bind="::osic.organization.creator"></span>
+        </div>
+    </td>
+</tr>

src/management/organizers/new/organization-search-new.html

@@ -0,0 +1,53 @@
+<div class="row" style="margin-top: 2rem">
+    <div class="col-md-9"> 
+    <udb-query-search-bar search-label="search.organization.searchOrganization"
+                          on-change="$ctrl.queryChanged(query)"></udb-query-search-bar>
+    </div>
+<div class="col-md-1">
+    <i ng-show="$ctrl.loading" class="fa fa-circle-o-notch fa-spin"></i>
+</div>
+<div class="col-md-2 text-right">
+    <a class="btn btn-primary pull-right" ui-sref="split.organizer">
+        <i class="fa fa-plus-circle"></i> <span translate-once="search.organization.addOrganizer"></span>
+    </a>
+</div>
+</div>
+<div class="row search-result-block" ng-cloak>
+<div class="col-md-12">
+    <div ng-show="$ctrl.query.length >= $ctrl.minQueryLength && $ctrl.searchResult.totalItems === 0"
+         class="alert alert-warning" role="alert">
+        <p translate-once="search.organization.notFound"></p>
+    </div>
+    <div ng-show="$ctrl.problem" class="alert alert-warning" role="alert">
+        <span translate-once="search.organization.error"></span>
+        <br>
+        <strong ng-bind="$ctrl.problem.title"></strong>
+    </div>
+    <div class="query-search-result organization-search-results"
+         ng-class="{'loading-search-result': $ctrl.loading}"
+         ng-show="$ctrl.searchResult.totalItems > 0">
+      <div class="table-responsive">
+        <table class="table">
+            <thead>
+            <tr>
+                <th class="col-md-5" style="padding-left: 30px" translate-once="search.organization.name"></th>
+                <th class="col-md-3" translate-once="search.organization.address"></th>
+                <th class="col-md-4" style="padding-right: 30px" translate-once="search.organization.info"></th>
+            </tr>
+            </thead>
+            <tbody udb-organization-search-item="organization" ng-repeat="organization in $ctrl.searchResult.member">
+            </tbody>
+        </table>
+        <div class="panel-footer">
+            <uib-pagination
+                    total-items="$ctrl.searchResult.totalItems"
+                    ng-model="$ctrl.page"
+                    items-per-page="$ctrl.searchResult.itemsPerPage"
+                    max-size="10"
+                    ng-change="$ctrl.pageChanged($ctrl.page)">
+            </uib-pagination>
+        </div>
+      </div>
+    </div>
+</div>
+</div>