# CICADA

### File

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

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties

- dataSource
- date
- displayedColumns
- paginator
- sort
- trustedUsers
- userInfo

###### Methods

- doFilter
- downloadCsv
- logout
- Async ngOnInit

### Constructor

`constructor(authService: AuthService)`
Defined in src/app/pages/settings/settings.component.ts:23

Parameters :

Name | Type | Optional
authService | `AuthService` | No

### Methods

doFilter
`doFilter(value: string)`
Defined in src/app/pages/settings/settings.component.ts:38

Parameters :

Name | Type | Optional
value | `string` | No

Returns : `void`

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

logout
`logout()`
Defined in src/app/pages/settings/settings.component.ts:46
Returns : `void`

Async ngOnInit
`ngOnInit()`
Defined in src/app/pages/settings/settings.component.ts:27
Returns : `Promise<void>`

### Properties

dataSource
Type : `MatTableDataSource<any>`
Defined in src/app/pages/settings/settings.component.ts:17

date
Type : `string`
Defined in src/app/pages/settings/settings.component.ts:16

displayedColumns
Type : `Array<string>`
Default value : `['name', 'email', 'userId']`
Defined in src/app/pages/settings/settings.component.ts:18

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

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

trustedUsers
Type : `Array<Staff>`
Defined in src/app/pages/settings/settings.component.ts:19

userInfo
Type : `Staff`
Defined in src/app/pages/settings/settings.component.ts:20

    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 { AuthService } from '@app/_services';
    import { Staff } from '@app/_models/staff';
    import { exportCsv } from '@app/_helpers';

    @Component({
      selector: 'app-settings',
      templateUrl: './settings.component.html',
      styleUrls: ['./settings.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class SettingsComponent implements OnInit {
      date: string;
      dataSource: MatTableDataSource<any>;
      displayedColumns: Array<string> = ['name', 'email', 'userId'];
      trustedUsers: Array<Staff>;
      userInfo: Staff;

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

      constructor(private authService: AuthService) {}

      async ngOnInit(): Promise<void> {
        await this.authService.init();
        this.authService.trustedUsersSubject.subscribe((users) => {
          this.dataSource = new MatTableDataSource<any>(users);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          this.trustedUsers = users;
        });
        this.userInfo = this.authService.getPrivateKeyInfo();
      }

      doFilter(value: string): void {
        this.dataSource.filter = value.trim().toLocaleLowerCase();
      }

      downloadCsv(): void {
        exportCsv(this.trustedUsers, 'users');
      }

      logout(): void {
        this.authService.logout();
      }
    }

    <!-- 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">Settings</li>
            </ol>
          </nav>
          <div class="row">
            <div class="col-12 mb-2">
              <div class="card">
                <mat-card-title class="card-header text-center"> ACCOUNT MANAGEMENT </mat-card-title>
                <div class="card-body">
                  <h4>CICADA Admin Credentials</h4>
                  <span><strong>UserId: </strong> {{ userInfo?.userid }} </span><br />
                  <span><strong>Username: </strong> {{ userInfo?.name }} </span><br />
                  <span><strong>Email: </strong> {{ userInfo?.email }} </span>
                </div>
                <hr />
                <div class="card-body">
                  <button
                    mat-raised-button
                    color="primary"
                    type="button"
                    class="btn btn-outline-primary"
                    (click)="logout()"
                  >
                    LOGOUT ADMIN
                  </button>
                </div>
              </div>
            </div>
            <div class="col-12 mb-2">
              <div class="card">
                <mat-card-title class="card-header">
                  <div class="row">
                    TRUSTED USERS
                    <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"
                    matSort
                    matSortActive="name"
                    matSortDirection="asc"
                    matSortDisableClear
                  >
                    <ng-container matColumnDef="name">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
                      <mat-cell *matCellDef="let user"> {{ user.name }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="email">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> EMAIL </mat-header-cell>
                      <mat-cell *matCellDef="let user"> {{ user.email }} </mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="userId">
                      <mat-header-cell *matHeaderCellDef mat-sort-header> USER ID </mat-header-cell>
                      <mat-cell *matCellDef="let user"> {{ user.userid }} </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let user; columns: displayedColumns"></mat-row>
                  </mat-table>

                  <mat-paginator
                    [pageSize]="5"
                    [pageSizeOptions]="[5, 10, 20, 50, 100]"
                    showFirstLastButtons
                  ></mat-paginator>
                </div>
              </div>
            </div>
          </div>
        </div>
        <app-footer appMenuSelection></app-footer>
      </div>
      <!-- ============================================================== -->
      <!-- End Page content -->
      <!-- ============================================================== -->
    </div>

`./settings.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""