### File

`src/app/pages/admin/admin.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `app-admin`
styleUrls | `./admin.component.scss`
templateUrl | `./admin.component.html`

### Index

###### Properties
action actions dataSource displayedColumns loading paginator sort
###### Methods
approvalStatus approveAction disapproveAction doFilter downloadCsv expandCollapse ngOnInit

### Constructor

`constructor(userService: UserService, loggingService: LoggingService)`
Defined in src/app/pages/admin/admin.component.ts:32
Parameters :
Name | Type | Optional
userService | `UserService` | No
loggingService | `LoggingService` | No

### Methods

approvalStatus
`approvalStatus(status: boolean)`
Defined in src/app/pages/admin/admin.component.ts:53
Parameters :
Name | Type | Optional
status | `boolean` | No
Returns : `string`

approveAction
`approveAction(action: any)`
Defined in src/app/pages/admin/admin.component.ts:57
Parameters :
Name | Type | Optional
action | `any` | No
Returns : `void`

disapproveAction
`disapproveAction(action: any)`
Defined in src/app/pages/admin/admin.component.ts:68
Parameters :
Name | Type | Optional
action | `any` | No
Returns : `void`

doFilter
`doFilter(value: string)`
Defined in src/app/pages/admin/admin.component.ts:49
Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

downloadCsv
`downloadCsv()`
Defined in src/app/pages/admin/admin.component.ts:83
Returns : `void`

expandCollapse
`expandCollapse(row)`
Defined in src/app/pages/admin/admin.component.ts:79
Parameters :
Name | Optional
row | No
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/pages/admin/admin.component.ts:36
Returns : `void`

### Properties

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

loading
Type : `boolean`
Default value : `true`
Defined in src/app/pages/admin/admin.component.ts:29

paginator
Type : `MatPaginator`
Decorators : `@ViewChild(MatPaginator)`
Defined in src/app/pages/admin/admin.component.ts:31

sort
Type : `MatSort`
Decorators : `@ViewChild(MatSort)`
Defined in src/app/pages/admin/admin.component.ts:32

    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 '@app/_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>;
      loading: boolean = true;

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;

      constructor(private userService: UserService, private loggingService: LoggingService) {}

      ngOnInit(): void {
        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;
          if (actions.length > 0) {
            this.loading = false;
          }
        });
      }

      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>

              <div *ngIf="loading">
                <h2 class="text-center"><strong>Loading Actions!</strong></h2>
                <mat-progress-bar [mode]="'query'"></mat-progress-bar>
              </div>

              <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;
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""