entity users component

src/app/app.module.ts

@@ -33,6 +33,7 @@ import { TwoFactorOptionsComponent } from './accounts/two-factor-options.compone
 import { TwoFactorComponent } from './accounts/two-factor.component';
 
 import { CollectionsComponent as OrgManageCollectionsComponent } from './organizations/manage/collections.component';
+import { EntityUsersComponent as OrgEntityUsersComponent } from './organizations/manage/entity-users.component';
 import { EventsComponent as OrgEventsComponent } from './organizations/manage/events.component';
 import { GroupAddEditComponent as OrgGroupAddEditComponent } from './organizations/manage/group-add-edit.component';
 import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
@@ -171,6 +172,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         OrgAttachmentsComponent,
         OrgCiphersComponent,
         OrgCollectionsComponent,
+        OrgEntityUsersComponent,
         OrgEventsComponent,
         OrgExportComponent,
         OrgImportComponent,
@@ -228,6 +230,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         OrgAddEditComponent,
         OrgAttachmentsComponent,
         OrgCollectionsComponent,
+        OrgEntityUsersComponent,
         OrgGroupAddEditComponent,
         PasswordGeneratorHistoryComponent,
         PurgeVaultComponent,

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

@@ -41,3 +41,5 @@
         </tbody>
     </table>
 </ng-container>
+<ng-template #addEdit></ng-template>
+<ng-template #usersTemplate></ng-template>

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

@@ -1,6 +1,9 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
+    ViewChild,
+    ViewContainerRef,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -12,18 +15,26 @@ import { Collection } from 'jslib/models/domain/collection';
 import { CollectionDetailsResponse } from 'jslib/models/response/collectionResponse';
 import { CollectionView } from 'jslib/models/view/collectionView';
 
+import { ModalComponent } from '../../modal.component';
+import { EntityUsersComponent } from './entity-users.component';
+
 @Component({
     selector: 'app-org-manage-collections',
     templateUrl: 'collections.component.html',
 })
 export class CollectionsComponent implements OnInit {
+    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
+
     loading = true;
     organizationId: string;
     collections: CollectionView[];
     searchText: string;
 
+    private modal: ModalComponent = null;
+
     constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private collectionService: CollectionService) { }
+        private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async (params) => {
@@ -51,4 +62,24 @@ export class CollectionsComponent implements OnInit {
     async delete(collection: CollectionView) {
         //
     }
+
+    users(collection: CollectionView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.usersModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityUsersComponent>(
+            EntityUsersComponent, this.usersModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.entity = 'collection';
+        childComponent.entityId = collection.id;
+        childComponent.entityName = collection.name;
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
 }

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

@@ -0,0 +1,57 @@
+<div class="modal fade">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    {{'userAccess' | i18n}}
+                    <small>{{entityName}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted"></i>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <ng-container *ngIf="!users || !users.length">
+                    {{'noUsersInList' | i18n}}
+                </ng-container>
+                <table class="table table-hover table-list mb-0" *ngIf="users && users.length">
+                    <tbody>
+                        <tr *ngFor="let u of users">
+                            <td width="30">
+                                <app-avatar [data]="u.name || u.email" width="25" height="25" [circle]="true" [fontSize]="14"></app-avatar>
+                            </td>
+                            <td>
+                                {{u.email}}
+                                <span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
+                                <span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
+                                <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
+                            </td>
+                            <td *ngIf="entity === 'collection'">
+                                <i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i>
+                                <i class="fa fa-eye" *ngIf="u.readOnly" title="{{'readOnly' | i18n}}"></i>
+                            </td>
+                            <td>
+                                <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
+                                <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
+                                <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
+                            </td>
+                            <td class="table-list-options">
+                                <button type="button" class="btn btn-outline-danger" (click)="remove(u)" #removeBtn appBlurClick [disabled]="removeBtn.loading"
+                                    [appApiAction]="actionPromise" title="{{'remove' | i18n}}" *ngIf="!u.accessAll">
+                                    <i class="fa fa-remove fa-lg fa-fw" [hidden]="removeBtn.loading"></i>
+                                    <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!removeBtn.loading"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,94 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
+import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'app-entity-users',
+    templateUrl: 'entity-users.component.html',
+})
+export class EntityUsersComponent implements OnInit {
+    @Input() entity: 'group' | 'collection';
+    @Input() entityId: string;
+    @Input() entityName: string;
+    @Input() organizationId: string;
+    @Output() onRemovedUser = new EventEmitter();
+
+    organizationUserType = OrganizationUserType;
+    organizationUserStatusType = OrganizationUserStatusType;
+
+    loading = true;
+    users: any[] = [];
+    actionPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private platformUtilsService: PlatformUtilsService) { }
+
+    async ngOnInit() {
+        await this.loadUsers();
+        this.loading = false;
+    }
+
+    async loadUsers() {
+        let users: any[] = [];
+        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);
+        }
+        users.sort(Utils.getSortFunction(this.i18nService, 'email'));
+        this.users = users;
+    }
+
+    async remove(user: any) {
+        if (this.actionPromise != null || user.accessAll) {
+            return;
+        }
+
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('removeUserConfirmation'), user.email,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            if (this.entity === 'group') {
+                this.actionPromise = this.apiService.deleteGroupUser(this.organizationId, this.entityId,
+                    user.organizationUserId);
+                await this.actionPromise;
+                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('removedThing', this.i18nService.t('user').toLocaleLowerCase(), user.email));
+            this.onRemovedUser.emit();
+            const index = this.users.indexOf(user);
+            if (index > -1) {
+                this.users.splice(index, 1);
+            }
+        } catch { }
+    }
+}

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

@@ -42,3 +42,4 @@
     </table>
 </ng-container>
 <ng-template #addEdit></ng-template>
+<ng-template #usersTemplate></ng-template>

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

@@ -19,6 +19,7 @@ import { GroupResponse } from 'jslib/models/response/groupResponse';
 import { Utils } from 'jslib/misc/utils';
 
 import { ModalComponent } from '../../modal.component';
+import { EntityUsersComponent } from './entity-users.component';
 import { GroupAddEditComponent } from './group-add-edit.component';
 
 @Component({
@@ -27,6 +28,7 @@ import { GroupAddEditComponent } from './group-add-edit.component';
 })
 export class GroupsComponent implements OnInit {
     @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
 
     loading = true;
     organizationId: string;
@@ -98,7 +100,30 @@ export class GroupsComponent implements OnInit {
             this.analytics.eventTrack.next({ action: 'Deleted Group' });
             this.toasterService.popAsync('success', null,
                 this.i18nService.t('deletedThing', this.i18nService.t('group').toLocaleLowerCase(), group.name));
-            await this.load();
+            const index = this.groups.indexOf(group);
+            if (index > -1) {
+                this.groups.splice(index, 1);
+            }
         } catch { }
     }
+
+    users(group: GroupResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.usersModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityUsersComponent>(
+            EntityUsersComponent, this.usersModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.entity = 'group';
+        childComponent.entityId = group.id;
+        childComponent.entityName = group.name;
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
 }

src/locales/en/messages.json

@@ -1721,6 +1721,9 @@
   "deleteGroupConfirmation": {
     "message": "Are you sure you want to delete this group?"
   },
+  "removeUserConfirmation": {
+    "message": "Are you sure you want to remove this user?"
+  },
   "externalId": {
     "message": "External Id"
   },
@@ -1985,5 +1988,8 @@
   },
   "errorOccurred": {
     "message": "An error has occurred."
+  },
+  "userAccess": {
+    "message": "User Access"
   }
 }