User listing
This commit is contained in:
Adina Țeudan
parent
90aca7debc
commit
c11c9414f0
@ -32,55 +32,14 @@
|
||||
|
||||
<div class="red-content-inner">
|
||||
<div [class.extended]="collapsedDetails" class="content-container">
|
||||
<iqser-table-header
|
||||
<iqser-table
|
||||
[actionsTemplate]="actionsTemplate"
|
||||
[bulkActions]="bulkActions"
|
||||
[hasEmptyColumn]="true"
|
||||
[itemSize]="80"
|
||||
[noMatchText]="'user-listing.no-match.title' | translate"
|
||||
[selectionEnabled]="true"
|
||||
[tableColumnConfigs]="tableColumnConfigs"
|
||||
[tableHeaderLabel]="tableHeaderLabel"
|
||||
></iqser-table-header>
|
||||
|
||||
<iqser-empty-state *ngIf="noMatch$ | async" [text]="'user-listing.no-match.title' | translate"></iqser-empty-state>
|
||||
|
||||
<cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
|
||||
<!-- Table lines -->
|
||||
<div *cdkVirtualFor="let user of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey" class="table-item">
|
||||
<div (click)="toggleEntitySelected($event, user)" class="selection-column">
|
||||
<iqser-round-checkbox [active]="isSelected(user)"></iqser-round-checkbox>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
|
||||
</div>
|
||||
<div class="small-label">{{ user.email || '-' }}</div>
|
||||
<div class="center">
|
||||
<mat-slide-toggle
|
||||
(toggleChange)="toggleActive(user)"
|
||||
[checked]="user.isActive"
|
||||
color="primary"
|
||||
></mat-slide-toggle>
|
||||
</div>
|
||||
<div class="small-label">{{ getDisplayRoles(user) }}</div>
|
||||
<div class="actions-container">
|
||||
<div class="action-buttons">
|
||||
<iqser-circle-button
|
||||
(action)="openAddEditUserDialog($event, user)"
|
||||
[tooltip]="'user-listing.action.edit' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="iqser:edit"
|
||||
></iqser-circle-button>
|
||||
<iqser-circle-button
|
||||
(action)="openDeleteUsersDialog([user], $event)"
|
||||
[disabled]="user.id === userService.currentUser.id"
|
||||
[tooltip]="'user-listing.action.delete' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="red:trash"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scrollbar-placeholder"></div>
|
||||
</div>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
emptyColumnWidth="1fr"
|
||||
></iqser-table>
|
||||
</div>
|
||||
|
||||
<div [class.collapsed]="collapsedDetails" class="right-container" iqserHasScrollbar>
|
||||
@ -106,3 +65,43 @@
|
||||
tooltipPosition="after"
|
||||
></iqser-circle-button>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #nameTemplate let-user="entity">
|
||||
<div class="cell">
|
||||
<redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #emailTemplate let-user="entity">
|
||||
<div class="small-label cell">{{ user.email || '-' }}</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #activeTemplate let-user="entity">
|
||||
<div class="center cell">
|
||||
<mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="user.isActive" color="primary"></mat-slide-toggle>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #rolesTemplate let-user="entity">
|
||||
<div class="small-label cell">{{ getDisplayRoles(user) }}</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #actionsTemplate let-user="entity">
|
||||
<div class="actions-container">
|
||||
<div class="action-buttons">
|
||||
<iqser-circle-button
|
||||
(action)="openAddEditUserDialog($event, user)"
|
||||
[tooltip]="'user-listing.action.edit' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="iqser:edit"
|
||||
></iqser-circle-button>
|
||||
<iqser-circle-button
|
||||
(action)="openDeleteUsersDialog([user], $event)"
|
||||
[disabled]="user.id === userService.currentUser.id"
|
||||
[tooltip]="'user-listing.action.delete' | translate"
|
||||
[type]="circleButtonTypes.dark"
|
||||
icon="red:trash"
|
||||
></iqser-circle-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -1,23 +1,5 @@
|
||||
cdk-virtual-scroll-viewport {
|
||||
::ng-deep.cdk-virtual-scroll-content-wrapper {
|
||||
grid-template-columns: auto 2fr 1fr 1fr 1fr auto 11px;
|
||||
|
||||
.table-item {
|
||||
> div:not(.scrollbar-placeholder) {
|
||||
padding-left: 10px;
|
||||
|
||||
&.center {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-scrollbar:hover {
|
||||
::ng-deep.cdk-virtual-scroll-content-wrapper {
|
||||
grid-template-columns: auto 2fr 1fr 1fr 1fr auto;
|
||||
}
|
||||
}
|
||||
:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell.center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Injector, OnInit, QueryList, ViewChildren } from '@angular/core';
|
||||
import { Component, forwardRef, Injector, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
|
||||
import { UserService, UserWrapper } from '@services/user.service';
|
||||
import { UserControllerService } from '@redaction/red-ui-http';
|
||||
import { AdminDialogService } from '../../services/admin-dialog.service';
|
||||
@ -22,7 +22,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||
@Component({
|
||||
templateUrl: './user-listing-screen.component.html',
|
||||
styleUrls: ['./user-listing-screen.component.scss'],
|
||||
providers: [...DefaultListingServices]
|
||||
providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => UserListingScreenComponent) }]
|
||||
})
|
||||
export class UserListingScreenComponent extends ListingComponent<UserWrapper> implements OnInit {
|
||||
readonly translations = rolesTranslations;
|
||||
@ -31,14 +31,13 @@ export class UserListingScreenComponent extends ListingComponent<UserWrapper> im
|
||||
readonly currentUser = this.userService.currentUser;
|
||||
readonly canDeleteSelected$ = this._canDeleteSelected$;
|
||||
readonly tableHeaderLabel = _('user-listing.table-header.title');
|
||||
readonly tableColumnConfigs: TableColumnConfig<UserWrapper>[] = [
|
||||
{ label: _('user-listing.table-col-names.name') },
|
||||
{ label: _('user-listing.table-col-names.email') },
|
||||
{ label: _('user-listing.table-col-names.active'), class: 'flex-center' },
|
||||
{ label: _('user-listing.table-col-names.roles') }
|
||||
];
|
||||
tableColumnConfigs: TableColumnConfig<UserWrapper>[];
|
||||
collapsedDetails = false;
|
||||
chartData: DoughnutChartConfig[] = [];
|
||||
@ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
|
||||
@ViewChild('emailTemplate', { static: true }) emailTemplate: TemplateRef<never>;
|
||||
@ViewChild('activeTemplate', { static: true }) activeTemplate: TemplateRef<never>;
|
||||
@ViewChild('rolesTemplate', { static: true }) rolesTemplate: TemplateRef<never>;
|
||||
protected readonly _primaryKey = 'id';
|
||||
@ViewChildren(InitialsAvatarComponent)
|
||||
private readonly _avatars: QueryList<InitialsAvatarComponent>;
|
||||
@ -61,6 +60,7 @@ export class UserListingScreenComponent extends ListingComponent<UserWrapper> im
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this._configureTableColumns();
|
||||
await this._loadData();
|
||||
this.searchService.setSearchKey('searchKey');
|
||||
}
|
||||
@ -97,6 +97,15 @@ export class UserListingScreenComponent extends ListingComponent<UserWrapper> im
|
||||
this.openDeleteUsersDialog(this.entitiesService.all.filter(u => this.isSelected(u)));
|
||||
}
|
||||
|
||||
private _configureTableColumns() {
|
||||
this.tableColumnConfigs = [
|
||||
{ label: _('user-listing.table-col-names.name'), template: this.nameTemplate, width: '2fr' },
|
||||
{ label: _('user-listing.table-col-names.email'), template: this.emailTemplate },
|
||||
{ label: _('user-listing.table-col-names.active'), class: 'flex-center', template: this.activeTemplate },
|
||||
{ label: _('user-listing.table-col-names.roles'), template: this.rolesTemplate }
|
||||
];
|
||||
}
|
||||
|
||||
private async _loadData() {
|
||||
this.entitiesService.setEntities(await this.userService.loadAllUsers());
|
||||
await this.userService.loadAllUsers();
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 3c693625e774ff61f89a49bf8a915e012320acc8
|
||||
Subproject commit 7a59cd09946221a444fad4d2aaf82597819d5679
|
||||
Loading…
x
Reference in New Issue
Block a user