manage collection users for entity-users

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

@@ -135,6 +135,10 @@ export class CollectionsComponent implements OnInit {
         childComponent.entityId = collection.id;
         childComponent.entityName = collection.name;
 
+        childComponent.onEditedUsers.subscribe(() => {
+            this.load();
+            this.modal.close();
+        });
         this.modal.onClosed.subscribe(() => {
             this.modal = null;
         });

src/app/organizations/manage/entity-users.component.html

@@ -1,6 +1,6 @@
 <div class="modal fade">
     <div class="modal-dialog modal-lg">
-        <div class="modal-content">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
                 <h2 class="modal-title">
                     {{'userAccess' | i18n}}
@@ -19,9 +19,14 @@
                 </ng-container>
                 <table class="table table-hover table-list mb-0" *ngIf="users && users.length">
                     <tbody>
-                        <tr *ngFor="let u of users">
+                        <tr *ngFor="let u of users; let i = index">
-                            <td width="30">
+                            <td class="table-list-checkbox" (click)="check(u)">
-                                <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true" [fontSize]="14"></app-avatar>
+                                <input type="checkbox" [(ngModel)]="u.checked" name="Users[{{i}}].Checked" [disabled]="u.accessAll"
+                                    appStopProp>
+                            </td>
+                            <td width="30" (click)="check(u)">
+                                <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                                    [fontSize]="14"></app-avatar>
                             </td>
                             <td>
                                 {{u.email}}
@@ -39,20 +44,17 @@
                                 <span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span>
                                 <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
                             </td>
-                            <td class="table-list-options wider">
-                                <button type="button" class="btn btn-sm btn-outline-danger btn-submit" (click)="remove(u)" #removeBtn [disabled]="removeBtn.loading"
-                                    [appApiAction]="actionPromise" *ngIf="entity !== 'collection' || !u.accessAll">
-                                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-                                    <span>{{'remove' | i18n}}</span>
-                                </button>
-                            </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
             <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
             </div>
-        </div>
+        </form>
     </div>
 </div>

src/app/organizations/manage/entity-users.component.ts

@@ -15,6 +15,8 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
 import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
 import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
+import { OrganizationUserUserDetailsResponse } from 'jslib/models/response/organizationUserResponse';
 
 import { Utils } from 'jslib/misc/utils';
 
@@ -27,14 +29,14 @@ export class EntityUsersComponent implements OnInit {
     @Input() entityId: string;
     @Input() entityName: string;
     @Input() organizationId: string;
-    @Output() onRemovedUser = new EventEmitter();
+    @Output() onEditedUsers = new EventEmitter();
 
     organizationUserType = OrganizationUserType;
     organizationUserStatusType = OrganizationUserStatusType;
 
     loading = true;
-    users: any[] = [];
+    users: OrganizationUserUserDetailsResponse[] = [];
-    actionPromise: Promise<any>;
+    formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private analytics: Angulartics2, private toasterService: ToasterService,
@@ -46,49 +48,54 @@ export class EntityUsersComponent implements OnInit {
     }
 
     async loadUsers() {
-        let users: any[] = [];
+        const users = await this.apiService.getOrganizationUsers(this.organizationId);
+        this.users = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, 'email'));
         if (this.entity === 'group') {
             const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId);
-            users = response.data.map((r) => r);
         } else if (this.entity === 'collection') {
             const response = await this.apiService.getCollectionUsers(this.organizationId, this.entityId);
-            users = response.data.map((r) => r);
+            if (response != null && users.data.length > 0) {
+                response.data.forEach((s) => {
+                    const user = users.data.filter((u) => !u.accessAll && u.id === s.id);
+                    if (user != null && user.length > 0) {
+                        (user[0] as any).checked = true;
+                        (user[0] as any).readOnly = s.readOnly;
+                    }
+                });
+            }
         }
-        users.sort(Utils.getSortFunction(this.i18nService, 'email'));
+
-        this.users = users;
+        this.users.forEach((u) => {
+            if (u.accessAll) {
+                (u as any).checked = true;
+            }
+        });
     }
 
-    async remove(user: any) {
+    check(u: OrganizationUserUserDetailsResponse) {
-        if (this.actionPromise != null || (this.entity === 'collection' && user.accessAll)) {
+        if (u.accessAll) {
             return;
         }
+        (u as any).checked = !(u as any).checked;
+    }
 
-        const confirmed = await this.platformUtilsService.showDialog(
+    async submit() {
-            this.i18nService.t('removeUserConfirmation'), user.email,
+        const selections = this.users.filter((u) => (u as any).checked && !u.accessAll)
-            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+            .map((u) => new SelectionReadOnlyRequest(u.id, !!(u as any).readOnly));
-        if (!confirmed) {
-            return false;
-        }
 
         try {
             if (this.entity === 'group') {
-                this.actionPromise = this.apiService.deleteGroupUser(this.organizationId, this.entityId,
+                //
-                    user.organizationUserId);
+            } else {
-                await this.actionPromise;
+                this.formPromise = this.apiService.putCollectionUsers(this.organizationId, this.entityId, selections);
-                this.analytics.eventTrack.next({ action: 'Removed User From Group' });
-            } else if (this.entity === 'collection') {
-                this.actionPromise = this.apiService.deleteCollectionUser(this.organizationId, this.entityId,
-                    user.organizationUserId);
-                await this.actionPromise;
-                this.analytics.eventTrack.next({ action: 'Removed User From Collection' });
-            }
-
-            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', user.email));
-            this.onRemovedUser.emit();
-            const index = this.users.indexOf(user);
-            if (index > -1) {
-                this.users.splice(index, 1);
             }
+            await this.formPromise;
+            this.analytics.eventTrack.next({
+                action: this.entity === 'group' ? 'Edited Group Users' :
+                    'Edited Collection Users',
+            });
+            this.toasterService.popAsync('success', null, this.i18nService.t('updatedUsers'));
+            this.onEditedUsers.emit();
         } catch { }
     }
 }

src/locales/en/messages.json

@@ -2492,5 +2492,8 @@
   },
   "licenseIsExpired": {
     "message": "License is expired."
+  },
+  "updatedUsers": {
+    "message": "Updated users"
   }
 }