grassrootseconomics/cic-staff-client
8
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

Modify components to use behaviour subject.

Browse Source
This commit is contained in:
Spencer Ofwiti
2020-12-05 09:30:30 +03:00
parent 142654ed6d
commit f7f4fe77f6
40 changed files with 1215 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/pages/admin/admin.component.html
View File

@@ -10,6 +10,12 @@
<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">
Actions
@@ -22,37 +28,65 @@
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="user"
matSortDirection="asc" matSortDisableClear>
<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 mat-sort-header> NAME </mat-header-cell>
<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 mat-sort-header> ROLE </mat-header-cell>
<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 mat-sort-header> ACTION </mat-header-cell>
<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 mat-sort-header> STATUS </mat-header-cell>
<mat-cell *matCellDef="let action"><span class="badge badge-primary badge-pill"> {{approvalStatus(action.approval)}} </span></mat-cell>
<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 *ngIf="!action.approval" class="btn btn-outline-primary" (click)="approveAction(action)"> Approve </button>
<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)="revertAction(action)"> Revert </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 action; columns: displayedColumns"></mat-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>