Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-24 12:06:15 +01:00
Code Issues Projects Releases Wiki Activity

filtering

Browse Source
This commit is contained in:
Kyle Spearrin 2018-10-18 12:15:13 -04:00
parent 7ab132bbf6
commit 323e54b4bd
3 changed files with 106 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/app/organizations/manage/entity-users.component.html
View File

@ -10,57 +10,80 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body" *ngIf="loading"> <div class="modal-body" *ngIf="loading || !users">
<i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i> <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
</div> </div>
<div class="modal-body" *ngIf="!loading"> <div class="modal-body" *ngIf="!loading && users && (users | search:searchText:'name':'email':'id') as searchedUsers">
<ng-container *ngIf="!users || !users.length"> <div class="d-flex">
<div class="mr-3">
<label class="sr-only" for="search">{{'search' | i18n}}</label>
<input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
name="SearchText" [(ngModel)]="searchText">
</div>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-secondary" [ngClass]="{active: !showSelected}"
(click)="filterSelected(false)">
{{'all' | i18n}}
</button>
<button type="button" class="btn btn-outline-secondary" [ngClass]="{active: showSelected}"
(click)="filterSelected(true)">
{{'selected' | i18n}}
<span class="badge badge-pill badge-info" *ngIf="selectedCount">{{selectedCount}}</span>
</button>
</div>
</div>
<ng-container *ngIf="!searchedUsers.length">
<hr>
{{'noUsersInList' | i18n}} {{'noUsersInList' | i18n}}
</ng-container> </ng-container>
<table class="table table-hover table-list mb-0" *ngIf="users && users.length"> <ng-container *ngIf="searchedUsers.length">
<thead> <table class="table table-hover table-list mb-0">
<tr> <thead>
<th>&nbsp;</th> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
<th>{{'name' | i18n}}</th> <th>&nbsp;</th>
<th *ngIf="entity === 'collection'">&nbsp;</th> <th>{{'name' | i18n}}</th>
<th>{{'userType' | i18n}}</th> <th *ngIf="entity === 'collection'">&nbsp;</th>
<th width="100" class="text-center" *ngIf="entity === 'collection'">{{'readOnly' | i18n}}</th> <th>{{'userType' | i18n}}</th>
</tr> <th width="100" class="text-center" *ngIf="entity === 'collection'">{{'readOnly' |
</thead> i18n}}</th>
<tbody> </tr>
<tr *ngFor="let u of users; let i = index"> </thead>
<td class="table-list-checkbox" (click)="check(u)"> <tbody>
<input type="checkbox" [(ngModel)]="u.checked" name="Users[{{i}}].Checked" [disabled]="u.accessAll" <tr *ngFor="let u of searchedUsers">
appStopProp> <td class="table-list-checkbox" (click)="check(u)">
</td> <input type="checkbox" [(ngModel)]="u.checked" name="{{u.id.substr(0,8)}}_Checked"
<td width="30" (click)="check(u)"> [disabled]="u.accessAll" (change)="selectedChanged(u)" appStopProp>
<app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true" </td>
[fontSize]="14"></app-avatar> <td width="30" (click)="check(u)">
</td> <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
<td> [fontSize]="14"></app-avatar>
{{u.email}} </td>
<span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' <td>
| i18n}}</span> {{u.email}}
<span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' <span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited'
| i18n}}</span> | i18n}}</span>
<small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small> <span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted'
</td> | i18n}}</span>
<td *ngIf="entity === 'collection'"> <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
<i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i> </td>
</td> <td *ngIf="entity === 'collection'">
<td> <i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i>
<span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span> </td>
<span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span> <td>
<span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span> <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
<span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span> <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
</td> <span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span>
<td class="text-center" *ngIf="entity === 'collection'"> <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
<input type="checkbox" [(ngModel)]="u.readOnly" name="Users[{{i}}].ReadOnly" [disabled]="u.accessAll || !u.checked"> </td>
</td> <td class="text-center" *ngIf="entity === 'collection'">
</tr> <input type="checkbox" [(ngModel)]="u.readOnly" name="{{u.id.substr(0,8)}}_ReadOnly"
</tbody> [disabled]="u.accessAll || !u.checked">
</table> </td>
</tr>
</tbody>
</table>
</ng-container>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"> <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">

36
src/app/organizations/manage/entity-users.component.ts
View File

@ -33,9 +33,12 @@ export class EntityUsersComponent implements OnInit {
organizationUserType = OrganizationUserType; organizationUserType = OrganizationUserType;
organizationUserStatusType = OrganizationUserStatusType; organizationUserStatusType = OrganizationUserStatusType;
showSelected = false;
loading = true; loading = true;
users: OrganizationUserUserDetailsResponse[] = [];
formPromise: Promise<any>; formPromise: Promise<any>;
selectedCount = 0;
private allUsers: OrganizationUserUserDetailsResponse[] = [];
constructor(private apiService: ApiService, private i18nService: I18nService, constructor(private apiService: ApiService, private i18nService: I18nService,
private analytics: Angulartics2, private toasterService: ToasterService) { } private analytics: Angulartics2, private toasterService: ToasterService) { }
@ -45,9 +48,17 @@ export class EntityUsersComponent implements OnInit {
this.loading = false; this.loading = false;
} }
get users() {
if (this.showSelected) {
return this.allUsers.filter((u) => (u as any).checked);
} else {
return this.allUsers;
}
}
async loadUsers() { async loadUsers() {
const users = await this.apiService.getOrganizationUsers(this.organizationId); const users = await this.apiService.getOrganizationUsers(this.organizationId);
this.users = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, 'email')); this.allUsers = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, 'email'));
if (this.entity === 'group') { if (this.entity === 'group') {
const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId); const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId);
if (response != null && users.data.length > 0) { if (response != null && users.data.length > 0) {
@ -71,10 +82,13 @@ export class EntityUsersComponent implements OnInit {
} }
} }
this.users.forEach((u) => { this.allUsers.forEach((u) => {
if (u.accessAll) { if (u.accessAll) {
(u as any).checked = true; (u as any).checked = true;
} }
if ((u as any).checked) {
this.selectedCount++;
}
}); });
} }
@ -83,6 +97,22 @@ export class EntityUsersComponent implements OnInit {
return; return;
} }
(u as any).checked = !(u as any).checked; (u as any).checked = !(u as any).checked;
this.selectedChanged(u);
}
selectedChanged(u: OrganizationUserUserDetailsResponse) {
if ((u as any).checked) {
this.selectedCount++;
} else {
if (this.entity === 'collection') {
(u as any).readOnly = false;
}
this.selectedCount--;
}
}
filterSelected(showSelected: boolean) {
this.showSelected = showSelected;
} }
async submit() { async submit() {

3
src/locales/en/messages.json
View File

@ -2495,5 +2495,8 @@
}, },
"updatedUsers": { "updatedUsers": {
"message": "Updated users" "message": "Updated users"
},
"selected": {
"message": "Selected"
} }
} }