people listing

jslib

@@ -1 +1 @@
-Subproject commit e25ad93082c7a9f4db46b84e67d1403996337bcc
+Subproject commit 7b23b90054f18c2093386d62cc39abb9be67b075

src/app/organizations/manage/groups.component.ts

@@ -9,6 +9,8 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
 
 import { GroupResponse } from 'jslib/models/response/groupResponse';
 
+import { Utils } from 'jslib/misc/utils';
+
 @Component({
     selector: 'app-org-groups',
     templateUrl: 'groups.component.html',
@@ -32,20 +34,7 @@ export class GroupsComponent implements OnInit {
     async load() {
         const response = await this.apiService.getGroups(this.organizationId);
         const groups = response.data != null && response.data.length > 0 ? response.data : [];
-        groups.sort((a, b) => {
-            if (a.name == null && b.name != null) {
-                return -1;
-            }
-            if (a.name != null && b.name == null) {
-                return 1;
-            }
-            if (a.name == null && b.name == null) {
-                return 0;
-            }
-
-            return this.i18nService.collator ? this.i18nService.collator.compare(a.name, b.name) :
-                a.name.localeCompare(b.name);
-        });
+        groups.sort(Utils.getSortFunction(this.i18nService, 'name'));
         this.groups = groups;
         this.loading = false;
     }

src/app/organizations/manage/people.component.html

@@ -1,3 +1,51 @@
-<div class="page-header">
+<div class="page-header d-flex">
     <h1>{{'people' | i18n}}</h1>
+    <div class="ml-auto d-flex">
+        <div>
+            <label class="sr-only" for="search">{{'search' | i18n}}</label>
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}" [(ngModel)]="searchText">
+        </div>
+        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
+            <i class="fa fa-plus fa-fw"></i>
+            {{'inviteUser' | i18n}}
+        </button>
+    </div>
 </div>
+<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading"></i>
+<ng-container *ngIf="!loading && (users | search:searchText:'name':'email') as searchedUsers">
+    <p *ngIf="!searchedUsers.length">{{'noItemsInList' | i18n}}</p>
+    <table class="table table-hover table-list" *ngIf="searchedUsers.length">
+        <tbody>
+            <tr *ngFor="let u of searchedUsers">
+                <td width="30">
+                    <app-avatar [data]="u.name || u.email" width="25" height="25" [circle]="true" [fontSize]="14"></app-avatar>
+                </td>
+                <td class="normal-lh">
+                    <a href="#" appStopClick (click)="edit(u)">{{u.email}}</a>
+                    <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
+                </td>
+                <td class="table-list-options">
+                    <div class="dropdown" appListDropdown>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <a class="dropdown-item" href="#" appStopClick (click)="groups(u)">
+                                <i class="fa fa-fw fa-sitemap"></i>
+                                {{'groups' | i18n}}
+                            </a>
+                            <a class="dropdown-item" href="#" appStopClick (click)="events(u)">
+                                <i class="fa fa-fw fa-file-text-o"></i>
+                                {{'eventLogs' | i18n}}
+                            </a>
+                            <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
+                                <i class="fa fa-fw fa-remove"></i>
+                                {{'remove' | i18n}}
+                            </a>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</ng-container>

src/app/organizations/manage/people.component.ts

@@ -1,7 +1,41 @@
-import { Component } from '@angular/core';
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { OrganizationUserUserDetailsResponse } from 'jslib/models/response/organizationUserResponse';
+
+import { Utils } from 'jslib/misc/utils';
 
 @Component({
     selector: 'app-org-people',
     templateUrl: 'people.component.html',
 })
-export class PeopleComponent { }
+export class PeopleComponent implements OnInit {
+    loading = true;
+    organizationId: string;
+    users: OrganizationUserUserDetailsResponse[];
+    searchText: string;
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private i18nService: I18nService) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+        });
+        await this.load();
+    }
+
+    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.loading = false;
+    }
+}

src/app/settings/organizations.component.ts

@@ -15,6 +15,8 @@ import { UserService } from 'jslib/abstractions/user.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 
+import { Utils } from 'jslib/misc/utils';
+
 @Component({
     selector: 'app-organizations',
     templateUrl: 'organizations.component.html',
@@ -37,20 +39,7 @@ export class OrganizationsComponent implements OnInit {
 
     async load() {
         const orgs = await this.userService.getAllOrganizations();
-        orgs.sort((a, b) => {
-            if (a.name == null && b.name != null) {
-                return -1;
-            }
-            if (a.name != null && b.name == null) {
-                return 1;
-            }
-            if (a.name == null && b.name == null) {
-                return 0;
-            }
-
-            return this.i18nService.collator ? this.i18nService.collator.compare(a.name, b.name) :
-                a.name.localeCompare(b.name);
-        });
+        orgs.sort(Utils.getSortFunction(this.i18nService, 'name'));
         this.organizations = orgs;
         this.loaded = true;
     }