File

src/app/pages/accounts/account-details/account-details.component.ts

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-account-details
styleUrls ./account-details.component.scss
templateUrl ./account-details.component.html

Index

Properties
Methods
Accessors

Constructor

constructor(formBuilder: FormBuilder, locationService: LocationService, transactionService: TransactionService, userService: UserService, route: ActivatedRoute, router: Router, tokenService: TokenService, loggingService: LoggingService, blockSyncService: BlockSyncService, cdr: ChangeDetectorRef, snackBar: MatSnackBar)
Parameters :
Name Type Optional
formBuilder FormBuilder No
locationService LocationService No
transactionService TransactionService No
userService UserService No
route ActivatedRoute No
router Router No
tokenService TokenService No
loggingService LoggingService No
blockSyncService BlockSyncService No
cdr ChangeDetectorRef No
snackBar MatSnackBar No

Methods

copyAddress
copyAddress()
Returns : void
doTransactionFilter
doTransactionFilter(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
doUserFilter
doUserFilter(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
downloadCsv
downloadCsv(data: any, filename: string)
Parameters :
Name Type Optional
data any No
filename string No
Returns : void
filterAccounts
filterAccounts()
Returns : void
filterTransactions
filterTransactions()
Returns : void
ngOnInit
ngOnInit()
Returns : void
resetPin
resetPin()
Returns : void
Async saveInfo
saveInfo()
Returns : Promise<void>
viewAccount
viewAccount(account)
Parameters :
Name Optional
account No
Returns : void
viewTransaction
viewTransaction(transaction)
Parameters :
Name Optional
transaction No
Returns : void

Properties

account
Type : AccountDetails
accountAddress
Type : string
accountInfoForm
Type : FormGroup
accounts
Type : Array<AccountDetails>
Default value : []
accountStatus
Type : any
accountsType
Type : string
Default value : 'all'
accountTypes
Type : Array<string>
areaNames
Type : Array<AreaName>
areaTypes
Type : Array<AreaType>
bloxbergLink
Type : string
categories
Type : Array<Category>
genders
Type : Array<string>
matcher
Type : CustomErrorStateMatcher
Default value : new CustomErrorStateMatcher()
submitted
Type : boolean
Default value : false
transaction
Type : any
transactions
Type : Array<Transaction>
transactionsDataSource
Type : MatTableDataSource<any>
transactionsDefaultPageSize
Type : number
Default value : 10
transactionsDisplayedColumns
Type : Array<string>
Default value : ['sender', 'recipient', 'value', 'created', 'type']
transactionsPageSizeOptions
Type : Array<number>
Default value : [10, 20, 50, 100]
transactionsType
Type : string
Default value : 'all'
transactionsTypes
Type : Array<string>
transactionTablePaginator
Type : MatPaginator
Decorators :
@ViewChild('TransactionTablePaginator', {static: true})
transactionTableSort
Type : MatSort
Decorators :
@ViewChild('TransactionTableSort', {static: true})
userDataSource
Type : MatTableDataSource<any>
userDisplayedColumns
Type : Array<string>
Default value : ['name', 'phone', 'created', 'balance', 'location']
usersDefaultPageSize
Type : number
Default value : 10
usersPageSizeOptions
Type : Array<number>
Default value : [10, 20, 50, 100]
userTablePaginator
Type : MatPaginator
Decorators :
@ViewChild('UserTablePaginator', {static: true})
userTableSort
Type : MatSort
Decorators :
@ViewChild('UserTableSort', {static: true})

Accessors

accountInfoFormStub
getaccountInfoFormStub()
import {ChangeDetectionStrategy, ChangeDetectorRef, 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 {BlockSyncService, LocationService, LoggingService, TokenService, TransactionService, UserService} from '@app/_services';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {first} from 'rxjs/operators';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {copyToClipboard, CustomErrorStateMatcher, exportCsv} from '@app/_helpers';
import {MatSnackBar} from '@angular/material/snack-bar';
import {add0x, strip0x} from '@src/assets/js/ethtx/dist/hex';
import {environment} from '@src/environments/environment';
import {AccountDetails, AreaName, AreaType, Category, Transaction} from '@app/_models';

@Component({
  selector: 'app-account-details',
  templateUrl: './account-details.component.html',
  styleUrls: ['./account-details.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AccountDetailsComponent implements OnInit {
  transactionsDataSource: MatTableDataSource<any>;
  transactionsDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
  transactionsDefaultPageSize: number = 10;
  transactionsPageSizeOptions: Array<number> = [10, 20, 50, 100];
  @ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator;
  @ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort;

  userDataSource: MatTableDataSource<any>;
  userDisplayedColumns: Array<string> = ['name', 'phone', 'created', 'balance', 'location'];
  usersDefaultPageSize: number = 10;
  usersPageSizeOptions: Array<number> = [10, 20, 50, 100];
  @ViewChild('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator;
  @ViewChild('UserTableSort', {static: true}) userTableSort: MatSort;

  accountInfoForm: FormGroup;
  account: AccountDetails;
  accountAddress: string;
  accountStatus: any;
  accounts: Array<AccountDetails> = [];
  accountsType: string = 'all';
  categories: Array<Category>;
  areaNames: Array<AreaName>;
  areaTypes: Array<AreaType>;
  transaction: any;
  transactions: Array<Transaction>;
  transactionsType: string = 'all';
  accountTypes: Array<string>;
  transactionsTypes: Array<string>;
  genders: Array<string>;
  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
  submitted: boolean = false;
  bloxbergLink: string;

  constructor(
    private formBuilder: FormBuilder,
    private locationService: LocationService,
    private transactionService: TransactionService,
    private userService: UserService,
    private route: ActivatedRoute,
    private router: Router,
    private tokenService: TokenService,
    private loggingService: LoggingService,
    private blockSyncService: BlockSyncService,
    private cdr: ChangeDetectorRef,
    private snackBar: MatSnackBar,
  ) {
    this.accountInfoForm = this.formBuilder.group({
      name: ['', Validators.required],
      phoneNumber: ['', Validators.required],
      age: ['', Validators.required],
      type: ['', Validators.required],
      bio: ['', Validators.required],
      gender: ['', Validators.required],
      businessCategory: ['', Validators.required],
      userLocation: ['', Validators.required],
      location: ['', Validators.required],
      locationType: ['', Validators.required],
    });
    this.route.paramMap.subscribe(async (params: Params) => {
      this.accountAddress = add0x(params.get('id'));
      this.bloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions';
      (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(async res => {
        if (res !== undefined) {
          this.account = res;
          this.cdr.detectChanges();
          this.loggingService.sendInfoLevelMessage(this.account);
          // this.userService.getAccountStatus(this.account.vcard?.tel[0].value).pipe(first())
          //   .subscribe(response => this.accountStatus = response);
          this.accountInfoForm.patchValue({
            name: this.account.vcard?.fn[0].value,
            phoneNumber: this.account.vcard?.tel[0].value,
            age: this.account.age,
            type: this.account.type,
            bio: this.account.products,
            gender: this.account.gender,
            businessCategory: this.account.category,
            userLocation: this.account.location.area_name,
            location: this.account.location.area,
            locationType: this.account.location.area_type,
          });
        } else {
          alert('Account not found!');
        }
      });
      this.blockSyncService.blockSync(this.accountAddress);
    });
    this.userService.getCategories().pipe(first()).subscribe(res => this.categories = res);
    this.locationService.getAreaNames().pipe(first()).subscribe(res => this.areaNames = res);
    this.locationService.getAreaTypes().pipe(first()).subscribe(res => this.areaTypes = res);
    this.userService.getAccountTypes().pipe(first()).subscribe(res => this.accountTypes = res);
    this.userService.getTransactionTypes().pipe(first()).subscribe(res => this.transactionsTypes = res);
    this.userService.getGenders().pipe(first()).subscribe(res => this.genders = res);
  }

  ngOnInit(): void {
    this.userService.accountsSubject.subscribe(accounts => {
      this.userDataSource = new MatTableDataSource<any>(accounts);
      this.userDataSource.paginator = this.userTablePaginator;
      this.userDataSource.sort = this.userTableSort;
      this.accounts = accounts;
    });

    this.transactionService.transactionsSubject.subscribe(transactions => {
      this.transactionsDataSource = new MatTableDataSource<any>(transactions);
      this.transactionsDataSource.paginator = this.transactionTablePaginator;
      this.transactionsDataSource.sort = this.transactionTableSort;
      this.transactions = transactions;
    });
  }

  doTransactionFilter(value: string): void {
    this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
  }

  doUserFilter(value: string): void {
    this.userDataSource.filter = value.trim().toLocaleLowerCase();
  }

  viewTransaction(transaction): void {
    this.transaction = transaction;
  }

  viewAccount(account): void {
    this.router.navigateByUrl(`/accounts/${strip0x(account.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`);
  }

  get accountInfoFormStub(): any { return this.accountInfoForm.controls; }

  async saveInfo(): Promise<void> {
    this.submitted = true;
    if (this.accountInfoForm.invalid || !confirm('Change user\'s profile information?')) { return; }
    const accountKey = await this.userService.changeAccountInfo(
      this.accountAddress,
      this.accountInfoFormStub.name.value,
      this.accountInfoFormStub.phoneNumber.value,
      this.accountInfoFormStub.age.value,
      this.accountInfoFormStub.type.value,
      this.accountInfoFormStub.bio.value,
      this.accountInfoFormStub.gender.value,
      this.accountInfoFormStub.businessCategory.value,
      this.accountInfoFormStub.userLocation.value,
      this.accountInfoFormStub.location.value,
      this.accountInfoFormStub.locationType.value
    );
    this.submitted = false;
  }

  filterAccounts(): void {
    if (this.accountsType === 'all') {
      this.userService.accountsSubject.subscribe(accounts => {
        this.userDataSource.data = accounts;
        this.accounts = accounts;
      });
    } else {
      this.userDataSource.data = this.accounts.filter(account => account.type === this.accountsType);
    }
  }

  filterTransactions(): void {
    if (this.transactionsType === 'all') {
      this.transactionService.transactionsSubject.subscribe(transactions => {
        this.transactionsDataSource.data = transactions;
        this.transactions = transactions;
      });
    } else {
      this.transactionsDataSource.data = this.transactions.filter(transaction => transaction.type === this.transactionsType);
    }
  }

  resetPin(): void {
    if (!confirm('Reset user\'s pin?')) { return; }
    this.userService.resetPin(this.account.vcard.tel[0].value).pipe(first()).subscribe(res => {
      this.loggingService.sendInfoLevelMessage(`Response: ${res}`);
    });
  }

  downloadCsv(data: any, filename: string): void {
    exportCsv(data, filename);
  }

  copyAddress(): void {
    if (copyToClipboard(this.accountAddress)) {
      this.snackBar.open(this.accountAddress + ' copied successfully!', 'Close', { duration: 3000 });
    }
  }
}
<!-- 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"><a routerLink="/accounts">Accounts</a></li>
          <li *ngIf="account" class="breadcrumb-item active" aria-current="page">{{account?.vcard?.fn[0].value}}</li>
        </ol>
      </nav>
      <div *ngIf="!account" class="text-center">
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div *ngIf="account" class="card mb-3">
        <div class="row card-body">
          <h3>
            <strong> {{account?.vcard?.fn[0].value}} </strong>
          </h3>
          <span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} SRF</span>
          <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | date}}</span>
          <span class="ml-2"><strong>Address:</strong>
            <a href="{{bloxbergLink}}" target="_blank"> {{accountAddress}} </a>
            <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress()" alt="Copy">
          </span>
        </div>
      </div>
      <div *ngIf="account" class="card mt-3 mb-3">
        <div class="card-body">
          <form [formGroup]="accountInfoForm" (ngSubmit)="saveInfo()">
            <div class="row form-inline">

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Name(s): *</mat-label>
                  <input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
                         value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Phone Number: </mat-label>
                  <input matInput type="text" id="phoneNumber" placeholder="{{account?.vcard?.tel[0].value}}"
                         value="{{account?.vcard?.tel[0].value}}" formControlName="phoneNumber" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Age: </mat-label>
                  <input matInput type="text" id="age" placeholder="{{account?.age}}"
                         value="{{account?.age}}" formControlName="age" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.age.errors">Age is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> ACCOUNT TYPE: </mat-label>
                  <mat-select id="accountType" [(value)]="account.type" formControlName="type"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
                      {{accountType | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.type.errors">Type is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Bio: </mat-label>
                  <input matInput type="text" id="bio" placeholder="{{account?.products}}" value="{{account?.products}}"
                         formControlName="bio" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors">Bio is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> GENDER: </mat-label>
                  <mat-select id="gender" [(value)]="account.gender" formControlName="gender"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let gender of genders" [value]="gender">
                      {{gender | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.gender.errors">Gender is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> BUSINESS CATEGORY: </mat-label>
                  <mat-select id="businessCategory" [(value)]="account.category" formControlName="businessCategory"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let category of categories" [value]="category">
                      {{category | titlecase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.businessCategory.errors">
                    Category is required.
                  </mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>User Location: </mat-label>
                  <input matInput type="text" id="userLocation" placeholder="{{account?.location.area_name}}"
                         value="{{account?.location.area_name}}" formControlName="userLocation"
                         [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.userLocation.errors">
                    User Location is required.
                  </mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> LOCATION: </mat-label>
                  <mat-select id="location" [(value)]="account.location.area" formControlName="location"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let area of areaNames" [value]="area">
                      {{area | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.location.errors">Location is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> LOCATION TYPE: </mat-label>
                  <mat-select id="locationType" [(value)]="account.location.area_type" formControlName="locationType"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let type of areaTypes" [value]="type">
                      {{type | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.locationType.errors">Location Type is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary mb-3">
                  Add User KYC
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-success mb-3"
                        (click)="resetPin()">
                  Reset Pin
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger mb-3">
                  Delete User
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary">
                  SAVE DETAILS
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="card mb-3">
        <mat-card-title class="card-header">
          USER
        </mat-card-title>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <caption> 1 user </caption>
              <thead class="thead-dark">
              <tr>
                <th scope="col">NAME</th>
                <th scope="col">BALANCE</th>
                <th scope="col">CREATED</th>
                <th scope="col">STATUS</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>{{account?.vcard?.fn[0].value}}</td>
                <td>{{account?.balance | tokenRatio}}</td>
                <td>{{account?.date_registered | date}}</td>
                <td>
                  <span *ngIf="accountStatus === 'active'" class="badge badge-success badge-pill">
                    {{accountStatus}}
                  </span>
                  <span *ngIf="accountStatus === 'blocked'" class="badge badge-danger badge-pill">
                    {{accountStatus}}
                  </span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start">
        <mat-tab label="Transactions">
          <app-transaction-details [transaction]="transaction"></app-transaction-details>
          <div class="card mt-1">
            <div class="card-header">
              <div class="row">
                <mat-form-field appearance="outline">
                  <mat-label> TRANSACTION TYPE </mat-label>
                  <mat-select id="transferSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
                    <mat-option value="all">ALL TRANSFERS</mat-option>
                    <mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
                      {{transactionType | uppercase}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(transactions, 'transactions')"> EXPORT </button>
              </div>
            </div>

            <div class="card-body">
              <mat-form-field appearance="outline">
                <mat-label> Filter </mat-label>
                <input matInput type="text" (keyup)="doTransactionFilter($event.target.value)" placeholder="Filter">
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
                         #TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear>

                <ng-container matColumnDef="sender">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
                  <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
                </ng-container>

                <ng-container matColumnDef="recipient">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
                  <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
                </ng-container>

                <ng-container matColumnDef="value">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
                  <td mat-cell *matCellDef="let transaction">
                    <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span>
                    <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span>
                  </td>
                </ng-container>

                <ng-container matColumnDef="created">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
                  <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | date}} </td>
                </ng-container>

                <ng-container matColumnDef="type">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </th>
                  <td mat-cell *matCellDef="let transaction">
                    <span class="badge badge-success badge-pill"> {{transaction?.type}} </span>
                  </td>
                </ng-container>

                <mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
                <mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
                         (click)="viewTransaction(transaction)"></mat-row>
              </mat-table>

              <mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="transactionsDefaultPageSize"
                             [pageSizeOptions]="transactionsPageSizeOptions" showFirstLastButtons></mat-paginator>

            </div>
          </div>
        </mat-tab>

        <mat-tab label="Users">
          <div class="card mt-1">
            <mat-card-title class="card-header">
              Accounts
            </mat-card-title>
            <div class="card-body">
              <div class="row card-header">
                <mat-form-field appearance="outline">
                  <mat-label> ACCOUNT TYPE </mat-label>
                  <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
                    <mat-option value="all">ALL</mat-option>
                    <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
                      {{accountType | uppercase}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(accounts, 'accounts')"> EXPORT </button>
              </div>

              <mat-form-field appearance="outline">
                <mat-label> Filter </mat-label>
                <input matInput type="text" (keyup)="doUserFilter($event.target.value)" placeholder="Filter">
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table class="mat-elevation-z10" [dataSource]="userDataSource" matSort #UserTableSort="matSort"
                         matSortActive="created" matSortDirection="desc" matSortDisableClear>

                <ng-container matColumnDef="name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="phone">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="created">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.date_registered | date}} </mat-cell>
                </ng-container>

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

                <ng-container matColumnDef="location">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row>
                <mat-row *matRowDef="let account; columns: userDisplayedColumns" (click)="viewAccount(account)"
                         matRipple></mat-row>
              </mat-table>

              <mat-paginator #UserTablePaginator="matPaginator" [pageSize]="usersDefaultPageSize"
                             [pageSizeOptions]="usersPageSizeOptions" showFirstLastButtons></mat-paginator>
            </div>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
    <app-footer appMenuSelection></app-footer>
  </div>
  <!-- ============================================================== -->
  <!-- End Page content -->
  <!-- ============================================================== -->
</div>

./account-details.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""