From e5f0b9dd2d8caff4f91009b7b7578c30d17fcbd1 Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Thu, 4 Mar 2021 12:07:51 +0100
Subject: [PATCH] #1813  Enahance organisation list page

---
 .../admin/organisation/OrgListCtrl.js         | 98 +++++++++++++++++--
 .../partials/admin/organisation/list.html     | 65 ++++++++++--
 .../admin/organisation/list/toolbar.html      | 11 +++
 3 files changed, 158 insertions(+), 16 deletions(-)

diff --git a/frontend/app/scripts/controllers/admin/organisation/OrgListCtrl.js b/frontend/app/scripts/controllers/admin/organisation/OrgListCtrl.js
index c068b4d491..2bcc22a6e2 100644
--- a/frontend/app/scripts/controllers/admin/organisation/OrgListCtrl.js
+++ b/frontend/app/scripts/controllers/admin/organisation/OrgListCtrl.js
@@ -2,21 +2,54 @@
     'use strict';
 
     angular.module('theHiveControllers').controller('OrgListCtrl',
-        function($scope, $q, $uibModal, OrganisationSrv, NotificationSrv, appConfig) {
+        function($scope, $q, $uibModal, PaginatedQuerySrv, OrganisationSrv, NotificationSrv, FilteringSrv, appConfig) {
             var self = this;
 
             self.appConfig = appConfig;
 
-            self.load = function() {
-                OrganisationSrv.list()
-                    .then(function(response) {
-                        self.list = response.data;
-                    })
-                    .catch(function(err) {
-                        NotificationSrv.error('Error', 'Failed to list organisations', err.status);
+            this.$onInit = function() {
+                self.filtering = new FilteringSrv('organisation', 'organisation.list', {
+                    version: 'v1',
+                    defaults: {
+                        showFilters: true,
+                        showStats: false,
+                        pageSize: 15,
+                        sort: ['-_updatedAt']
+                    },
+                    defaultFilter: []
+                });
+                self.filtering.initContext('list')
+                    .then(function() {
+                        self.load();
+
+                        $scope.$watch('$vm.list.pageSize', function (newValue) {
+                            self.filtering.setPageSize(newValue);
+                        });
                     });
             };
 
+            this.load = function() {
+
+                this.list = new PaginatedQuerySrv({
+                    name: 'organisations',
+                    root: undefined,
+                    objectType: 'organisation',
+                    version: 'v1',
+                    scope: $scope,
+                    sort: self.filtering.context.sort,
+                    loadAll: false,
+                    pageSize: self.filtering.context.pageSize,
+                    filter: this.filtering.buildQuery(),
+                    operations: [
+                        {'_name': 'listOrganisation'}
+                    ],
+                    //extraData: ['observableStats', 'taskStats', 'isOwner', 'shareCount', 'permissions', 'actionRequired'],
+                    onUpdate: function() {
+                        // self.resetSelection();
+                    }
+                });
+            };
+
             self.showNewOrg = function(mode, org) {
                 var modal = $uibModal.open({
                     controller: 'OrgModalCtrl',
@@ -106,6 +139,53 @@
                     });
             };
 
-            self.load();
+            this.toggleFilters = function () {
+                this.filtering.toggleFilters();
+            };
+
+            this.filter = function () {
+                self.filtering.filter().then(this.applyFilters);
+            };
+
+            this.clearFilters = function () {
+                this.filtering.clearFilters()
+                    .then(self.search);
+            };
+
+            this.removeFilter = function (index) {
+                self.filtering.removeFilter(index)
+                    .then(self.search);
+            };
+
+            this.search = function () {
+                self.load();
+                self.filtering.storeContext();
+            };
+            this.addFilterValue = function (field, value) {
+                this.filtering.addFilterValue(field, value);
+                this.search();
+            };
+
+            this.sortBy = function(sort) {
+                this.list.sort = sort;
+                this.list.update();
+                this.filtering.setSort(sort);
+            };
+
+            this.sortByField = function(field) {
+                var context = this.filtering.context;
+                var currentSort = Array.isArray(context.sort) ? context.sort[0] : context.sort;
+                var sort = null;
+
+                if(currentSort.substr(1) !== field) {
+                    sort = ['+' + field];
+                } else {
+                    sort = [(currentSort === '+' + field) ? '-'+field : '+'+field];
+                }
+
+                self.list.sort = sort;
+                self.list.update();
+                self.filtering.setSort(sort);
+            };
         });
 })();
diff --git a/frontend/app/views/partials/admin/organisation/list.html b/frontend/app/views/partials/admin/organisation/list.html
index 15c94bebe5..f4e3665039 100644
--- a/frontend/app/views/partials/admin/organisation/list.html
+++ b/frontend/app/views/partials/admin/organisation/list.html
@@ -2,25 +2,67 @@
     <div class="col-md-12">
         <div class="box">
             <div class="box-header with-border">
-                <h3 class="box-title">List of organisations</h3>
+                <h3 class="box-title">List of organisations ({{$vm.list.values.length || 0}} of {{$vm.list.total}})</h3>
             </div>
             <div class="box-body">
                 <div ng-include="'views/partials/admin/organisation/list/toolbar.html'"></div>
 
+                <div class="mt-xs filter-panel" ng-include="'views/partials/admin/organisation/list/filters.html'" ng-show="$vm.filtering.context.showFilters"></div>
+
+                <!-- Filters preview  -->
+                <div class="row mt-xs">
+                    <div class="col-md-12 clearfix">
+                        <filters-preview filters="$vm.filtering.context.filters"
+                            on-clear-item="$vm.removeFilter(field)"
+                            on-clear-all="$vm.clearFilters()"></filters-preview>
+                    </div>
+                </div>
+
                 <!-- Datalist  -->
                 <div class="row mt-s">
                     <div class="col-md-12">
+                        <psearch control="$vm.list"></psearch>
+
                         <table class="table table-striped case-list">
                             <thead>
                                 <tr>
-                                    <th>Name</th>
-                                    <th style="width: 300px">Created By</th>
-                                    <th style="width: 160px">Created At</th>
+                                    <th>
+                                        <a href class="text-default" ng-click="$vm.sortByField('name')">
+                                            Name
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+name') === -1 && $vm.filtering.context.sort.indexOf('-name') === -1" class="fa fa-sort"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+name') !== -1" class="fa fa-caret-up"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('-name') !== -1" class="fa fa-caret-down"></i>
+                                        </a>
+                                    </th>
+                                    <th style="width: 300px">
+                                        <a href class="text-default" ng-click="$vm.sortByField('_createdBy')">
+                                            Created By
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdBy') === -1 && $vm.filtering.context.sort.indexOf('-_createdBy') === -1" class="fa fa-sort"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdBy') !== -1" class="fa fa-caret-up"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('-_createdBy') !== -1" class="fa fa-caret-down"></i>
+                                        </a>
+                                    </th>
+                                    <th style="width: 160px">
+                                        Dates
+
+                                        <a href class="text-default ml-xxxs" ng-click="$vm.sortByField('_createdAt')" uib-tooltip="Sort by creation date">
+                                            C.
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdAt') === -1 && $vm.filtering.context.sort.indexOf('-_createdAt') === -1" class="fa fa-sort"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_createdAt') !== -1" class="fa fa-caret-up"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('-_createdAt') !== -1" class="fa fa-caret-down"></i>
+                                        </a>
+                                        <a href class="text-default ml-xxxs" ng-click="$vm.sortByField('_updatedAt')" uib-tooltip="Sort by last update date">
+                                            U.
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_updatedAt') === -1 && $vm.filtering.context.sort.indexOf('-_updatedAt') === -1" class="fa fa-sort"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('+_updatedAt') !== -1" class="fa fa-caret-up"></i>
+                                            <i ng-show="$vm.filtering.context.sort.indexOf('-_updatedAt') !== -1" class="fa fa-caret-down"></i>
+                                        </a>
+                                    </th>
                                     <th style="width: 250px"></th>
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr ng-repeat="org in $vm.list">
+                                <tr ng-repeat="org in $vm.list.values">
                                     <td>
                                         <div class="org-name">
                                             <a ui-sref="app.administration.organisations-details({organisation: org.name})">{{::org.name}}</a>
@@ -39,9 +81,16 @@ <h3 class="box-title">List of organisations</h3>
                                     </td>
 
                                     <td class="clearfix">
-                                      <user user-id="org.createdBy" icon-only="false" icon-size="m"></user>
+                                      <user user-id="org._createdBy" icon-only="false" icon-size="m"></user>
+                                    </td>
+                                    <td>
+                                        <div ng-class="{'text-bold': $vm.filtering.context.sort.indexOf('+_createdAt') !== -1 || $vm.filtering.context.sort.indexOf('-_createdAt') !== -1}">
+                                            C. <a href ng-click="$vm.addFilterValue('_createdAt', org._createdAt)">{{org._createdAt | shortDate}}</a>
+                                        </div>
+                                        <div ng-if="org._updatedAt > 0" ng-class="{'text-bold': $vm.filtering.context.sort.indexOf('+_updatedAt') !== -1 || $vm.filtering.context.sort.indexOf('-_updatedAt') !== -1}">
+                                            U. <a href ng-click="$vm.addFilterValue('_updatedAt', org._updatedAt)">{{org._updatedAt | shortDate}}</a>
+                                        </div>
                                     </td>
-                                    <td>{{org.createdAt | shortDate}}</td>
                                     <td>
                                         <span class="mr-xs text-primary">
                                             <a ui-sref="app.administration.organisations-details({organisation: org.name})">
@@ -59,6 +108,8 @@ <h3 class="box-title">List of organisations</h3>
                                 </tr>
                             </tbody>
                         </table>
+
+                        <psearch control="$vm.list"></psearch>
                     </div>
                 </div>
             </div>
diff --git a/frontend/app/views/partials/admin/organisation/list/toolbar.html b/frontend/app/views/partials/admin/organisation/list/toolbar.html
index 0a51cd7f65..c5a259003c 100644
--- a/frontend/app/views/partials/admin/organisation/list/toolbar.html
+++ b/frontend/app/views/partials/admin/organisation/list/toolbar.html
@@ -1,12 +1,23 @@
 <div class="row">
     <div class="col-md-12">
         <div class="btn-toolbar" role="toolbar">
+
             <div class="btn-group">
                 <button class="btn btn-sm btn-primary" type="button" ng-click="$vm.showNewOrg('add')">
                     <i class="fa fa-plus"></i>
                     New Organisation
                 </button>
             </div>
+
+            <div class="btn-group pull-right" role="group">
+                <page-sizer collection="$vm.list" sizes="[10, 15, 30, 100]"></page-sizer>
+            </div>
+
+            <div class="btn-group pull-right" role="group">
+                <button class="btn btn-sm" ng-class="{true: 'btn-primary', false:'btn-default'}[$vm.filtering.context.showFilters]" type="button" ng-click="$vm.toggleFilters()">
+                    <i class="fa fa-search"></i> Filters
+                </button>
+            </div>
         </div>
     </div>
 </div>