From 2dc04fa0419228ea00405cb2767a590f36f2965f Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Wed, 11 Jul 2018 16:40:32 -0400
Subject: [PATCH] status filters for user list

---
 jslib                                         |  2 +-
 .../manage/people.component.html              | 28 ++++++++-------
 .../organizations/manage/people.component.ts  | 36 +++++++++++++++++--
 3 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/jslib b/jslib
index d7f3f942..ef75dc73 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit d7f3f9425ececd041bc1a3e0be3f9da157ac55c3
+Subproject commit ef75dc735e343f407f43a010ba97f8d3fb7fa583
diff --git a/src/app/organizations/manage/people.component.html b/src/app/organizations/manage/people.component.html
index baed0e92..1c7640db 100644
--- a/src/app/organizations/manage/people.component.html
+++ b/src/app/organizations/manage/people.component.html
@@ -1,18 +1,20 @@
 <div class="page-header d-flex">
     <h1>{{'people' | i18n}}</h1>
     <div class="ml-auto d-flex">
-        <div class="btn-group btn-group-toggle btn-group-sm" data-toggle="buttons">
-            <label class="btn btn-outline-secondary active">
-                <input type="radio" name="options" id="option1" autocomplete="off" checked> {{'all' | i18n}}
-            </label>
-            <label class="btn btn-outline-secondary">
-                <input type="radio" name="options" id="option3" autocomplete="off"> {{'invited' | i18n}}
-                <span class="badge badge-pill badge-info">4</span>
-            </label>
-            <label class="btn btn-outline-secondary">
-                <input type="radio" name="options" id="option2" autocomplete="off"> {{'accepted' | i18n}}
-                <span class="badge badge-pill badge-warning">4</span>
-            </label>
+        <div class="btn-group btn-group-sm" role="group">
+            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == null}" (click)="filter(null)">
+                {{'all' | i18n}}
+            </button>
+            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == organizationUserStatusType.Invited}"
+                (click)="filter(organizationUserStatusType.Invited)">
+                {{'invited' | i18n}}
+                <span class="badge badge-pill badge-info" *ngIf="invitedCount">{{invitedCount}}</span>
+            </button>
+            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == organizationUserStatusType.Accepted}"
+                (click)="filter(organizationUserStatusType.Accepted)">
+                {{'accepted' | i18n}}
+                <span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{acceptedCount}}</span>
+            </button>
         </div>
         <div class="ml-3">
             <label class="sr-only" for="search">{{'search' | i18n}}</label>
@@ -26,7 +28,7 @@
 </div>
 <i class="fa fa-spinner fa-spin text-muted" *ngIf="loading"></i>
 <ng-container *ngIf="!loading && (users | search:searchText:'name':'email':'id') as searchedUsers">
-    <p *ngIf="!searchedUsers.length">{{'noItemsInList' | i18n}}</p>
+    <p *ngIf="!searchedUsers.length">{{'noUsersInList' | i18n}}</p>
     <table class="table table-hover table-list" *ngIf="searchedUsers.length">
         <tbody>
             <tr *ngFor="let u of searchedUsers">
diff --git a/src/app/organizations/manage/people.component.ts b/src/app/organizations/manage/people.component.ts
index 57eaaaac..8e80defe 100644
--- a/src/app/organizations/manage/people.component.ts
+++ b/src/app/organizations/manage/people.component.ts
@@ -43,6 +43,8 @@ export class PeopleComponent implements OnInit {
     organizationId: string;
     users: OrganizationUserUserDetailsResponse[];
     searchText: string;
+    status: OrganizationUserStatusType = null;
+    statusMap = new Map<OrganizationUserStatusType, OrganizationUserUserDetailsResponse[]>();
     organizationUserType = OrganizationUserType;
     organizationUserStatusType = OrganizationUserStatusType;
     actionPromise: Promise<any>;
@@ -50,6 +52,7 @@ export class PeopleComponent implements OnInit {
     accessGroups = false;
 
     private modal: ModalComponent = null;
+    private allUsers: OrganizationUserUserDetailsResponse[];
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
         private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
@@ -79,12 +82,39 @@ export class PeopleComponent implements OnInit {
 
     async load() {
         const response = await this.apiService.getOrganizationUsers(this.organizationId);
-        const users = response.data != null && response.data.length > 0 ? response.data : [];
-        users.sort(Utils.getSortFunction(this.i18nService, 'email'));
-        this.users = users;
+        this.statusMap.clear();
+        this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
+        this.allUsers.sort(Utils.getSortFunction(this.i18nService, 'email'));
+        this.allUsers.forEach((u) => {
+            if (!this.statusMap.has(u.status)) {
+                this.statusMap.set(u.status, [u]);
+            } else {
+                this.statusMap.get(u.status).push(u);
+            }
+        });
+        this.filter(this.status);
         this.loading = false;
     }
 
+    filter(status: OrganizationUserStatusType) {
+        this.status = status;
+        if (this.status != null) {
+            this.users = this.statusMap.get(this.status);
+        } else {
+            this.users = this.allUsers;
+        }
+    }
+
+    get invitedCount() {
+        return this.statusMap.has(OrganizationUserStatusType.Invited) ?
+            this.statusMap.get(OrganizationUserStatusType.Invited).length : 0;
+    }
+
+    get acceptedCount() {
+        return this.statusMap.has(OrganizationUserStatusType.Accepted) ?
+            this.statusMap.get(OrganizationUserStatusType.Accepted).length : 0;
+    }
+
     edit(user: OrganizationUserUserDetailsResponse) {
         if (this.modal != null) {
             this.modal.close();