src/app/pages/admin/admin.component.ts
changeDetection | ChangeDetectionStrategy.OnPush |
selector | app-admin |
styleUrls | ./admin.component.scss |
templateUrl | ./admin.component.html |
Properties |
Methods |
constructor(userService: UserService, loggingService: LoggingService)
|
|||||||||
Defined in src/app/pages/admin/admin.component.ts:31
|
|||||||||
Parameters :
|
approvalStatus | ||||||
approvalStatus(status: boolean)
|
||||||
Defined in src/app/pages/admin/admin.component.ts:50
|
||||||
Parameters :
Returns :
string
|
approveAction | ||||||
approveAction(action: any)
|
||||||
Defined in src/app/pages/admin/admin.component.ts:54
|
||||||
Parameters :
Returns :
void
|
disapproveAction | ||||||
disapproveAction(action: any)
|
||||||
Defined in src/app/pages/admin/admin.component.ts:65
|
||||||
Parameters :
Returns :
void
|
doFilter | ||||||
doFilter(value: string)
|
||||||
Defined in src/app/pages/admin/admin.component.ts:46
|
||||||
Parameters :
Returns :
void
|
downloadCsv |
downloadCsv()
|
Defined in src/app/pages/admin/admin.component.ts:80
|
Returns :
void
|
expandCollapse | ||||
expandCollapse(row)
|
||||
Defined in src/app/pages/admin/admin.component.ts:76
|
||||
Parameters :
Returns :
void
|
Async ngOnInit |
ngOnInit()
|
Defined in src/app/pages/admin/admin.component.ts:35
|
Returns :
Promise<void>
|
action |
Type : Action
|
Defined in src/app/pages/admin/admin.component.ts:27
|
actions |
Type : Array<Action>
|
Defined in src/app/pages/admin/admin.component.ts:28
|
dataSource |
Type : MatTableDataSource<any>
|
Defined in src/app/pages/admin/admin.component.ts:25
|
displayedColumns |
Type : Array<string>
|
Default value : ['expand', 'user', 'role', 'action', 'status', 'approve']
|
Defined in src/app/pages/admin/admin.component.ts:26
|
paginator |
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
Defined in src/app/pages/admin/admin.component.ts:30
|
sort |
Type : MatSort
|
Decorators :
@ViewChild(MatSort)
|
Defined in src/app/pages/admin/admin.component.ts:31
|
import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { LoggingService, UserService } from '@app/_services';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { first } from 'rxjs/operators';
import { exportCsv } from '@app/_helpers';
import { Action } from '../../_models';
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: 0, visibility: 'hidden' })),
state('expanded', style({ height: '*', visibility: 'visible' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class AdminComponent implements OnInit {
dataSource: MatTableDataSource<any>;
displayedColumns: Array<string> = ['expand', 'user', 'role', 'action', 'status', 'approve'];
action: Action;
actions: Array<Action>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private userService: UserService, private loggingService: LoggingService) {}
async ngOnInit(): Promise<void> {
await this.userService.init();
this.userService.getActions();
this.userService.actionsSubject.subscribe((actions) => {
this.dataSource = new MatTableDataSource<any>(actions);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.actions = actions;
});
}
doFilter(value: string): void {
this.dataSource.filter = value.trim().toLocaleLowerCase();
}
approvalStatus(status: boolean): string {
return status ? 'Approved' : 'Unapproved';
}
approveAction(action: any): void {
if (!confirm('Approve action?')) {
return;
}
this.userService
.approveAction(action.id)
.pipe(first())
.subscribe((res) => this.loggingService.sendInfoLevelMessage(res));
this.userService.getActions();
}
disapproveAction(action: any): void {
if (!confirm('Disapprove action?')) {
return;
}
this.userService
.revokeAction(action.id)
.pipe(first())
.subscribe((res) => this.loggingService.sendInfoLevelMessage(res));
this.userService.getActions();
}
expandCollapse(row): void {
row.isExpanded = !row.isExpanded;
}
downloadCsv(): void {
exportCsv(this.actions, 'actions');
}
}
<!-- Begin page -->
<div class="wrapper">
<app-sidebar></app-sidebar>
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div id="content">
<app-topbar></app-topbar>
<!-- Start Content-->
<div class="container-fluid" appMenuSelection>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Admin</li>
</ol>
</nav>
<div class="card">
<mat-card-title class="card-header">
<div class="row">
Actions
<button
mat-raised-button
color="primary"
type="button"
class="btn btn-outline-primary ml-auto mr-2"
(click)="downloadCsv()"
>
EXPORT
</button>
</div>
</mat-card-title>
<div class="card-body">
<mat-form-field appearance="outline">
<mat-label> Filter </mat-label>
<input
matInput
type="text"
(keyup)="doFilter($event.target.value)"
placeholder="Filter"
/>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" multiTemplateDataRows>
<!-- Expand Column -->
<ng-container matColumnDef="expand">
<mat-header-cell *matHeaderCellDef> Expand </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="expandCollapse(element)">
<span *ngIf="!element.isExpanded" class="signs"> + </span>
<span *ngIf="element.isExpanded" class="signs"> - </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="user">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let action"> {{ action.user }} </mat-cell>
</ng-container>
<ng-container matColumnDef="role">
<mat-header-cell *matHeaderCellDef> ROLE </mat-header-cell>
<mat-cell *matCellDef="let action"> {{ action.role }} </mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef> ACTION </mat-header-cell>
<mat-cell *matCellDef="let action"> {{ action.action }} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> STATUS </mat-header-cell>
<mat-cell *matCellDef="let action">
<span *ngIf="action.approval == true" class="badge badge-success badge-pill">
{{ approvalStatus(action.approval) }}
</span>
<span *ngIf="action.approval == false" class="badge badge-danger badge-pill">
{{ approvalStatus(action.approval) }}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="approve">
<mat-header-cell *matHeaderCellDef> APPROVE </mat-header-cell>
<mat-cell *matCellDef="let action">
<button
mat-raised-button
color="primary"
*ngIf="!action.approval"
class="btn btn-outline-success"
(click)="approveAction(action)"
>
Approve
</button>
<button
mat-raised-button
color="warn"
*ngIf="action.approval"
class="btn btn-outline-danger"
(click)="disapproveAction(action)"
>
Disapprove
</button>
</mat-cell>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let action">
<div>
<span><strong>Staff Name:</strong> {{ action.user }}</span
><br />
<span><strong>Role:</strong> {{ action.role }}</span
><br />
<span><strong>Action Details:</strong> {{ action.action }}</span
><br />
<span><strong>Approval Status:</strong> {{ action.approval }}</span
><br />
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"
matRipple
class="element-row"
[class.expanded]="row.isExpanded"
></mat-row>
<mat-row
*matRowDef="let row; columns: ['expandedDetail']"
[@detailExpand]="row.isExpanded == true ? 'expanded' : 'collapsed'"
style="overflow: hidden"
></mat-row>
</mat-table>
<mat-paginator
[pageSize]="10"
[pageSizeOptions]="[10, 20, 50, 100]"
showFirstLastButtons
></mat-paginator>
</div>
</div>
</div>
<app-footer appMenuSelection></app-footer>
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
./admin.component.scss
button {
width: 6rem;
}