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

Add loading progress bar to datatables.

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-07-04 13:00:26 +03:00
parent 617741e7a9
commit 400dd5093b
18 changed files with 79 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/pages/accounts/account-details/account-details.component.html
View File

@ -382,6 +382,11 @@
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="transactionsLoading">
<h2 class="text-center"><strong>Loading Transactions!</strong></h2>
<mat-progress-bar [mode]="'query'"></mat-progress-bar>
</div>
<table
mat-table
class="mat-elevation-z10"
@ -491,6 +496,11 @@
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="accountsLoading">
<h2 class="text-center"><strong>Loading Accounts!</strong></h2>
<mat-progress-bar [mode]="'query'"></mat-progress-bar>
</div>
<mat-table
class="mat-elevation-z10"
[dataSource]="userDataSource"

8
src/app/pages/accounts/account-details/account-details.component.ts
View File

@ -69,6 +69,8 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
category: string;
area: string;
areaType: string;
accountsLoading: boolean = true;
transactionsLoading: boolean = true;
constructor(
private formBuilder: FormBuilder,
@ -155,6 +157,9 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
this.userDataSource.paginator = this.userTablePaginator;
this.userDataSource.sort = this.userTableSort;
this.accounts = accounts;
if (accounts.length > 0) {
this.accountsLoading = false;
}
this.cdr.detectChanges();
});
@ -163,6 +168,9 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
this.transactionsDataSource.paginator = this.transactionTablePaginator;
this.transactionsDataSource.sort = this.transactionTableSort;
this.transactions = transactions;
if (transactions.length > 0) {
this.transactionsLoading = false;
}
this.cdr.detectChanges();
});
this.userService.getCategories();

5
src/app/pages/accounts/accounts.component.html
View File

@ -64,6 +64,11 @@
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="loading">
<h2 class="text-center"><strong>Loading Accounts!</strong></h2>
<mat-progress-bar [mode]="'query'"></mat-progress-bar>
</div>
<mat-table
class="mat-elevation-z10"
[dataSource]="dataSource"

4
src/app/pages/accounts/accounts.component.ts
View File

@ -31,6 +31,7 @@ export class AccountsComponent implements OnInit, AfterViewInit {
accountsType: string = 'all';
accountTypes: Array<string>;
tokenSymbol: string;
loading: boolean = true;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ -48,6 +49,9 @@ export class AccountsComponent implements OnInit, AfterViewInit {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.accounts = accounts;
if (accounts.length > 0) {
this.loading = false;
}
});
try {
// TODO it feels like this should be in the onInit handler

2
src/app/pages/accounts/accounts.module.ts
View File

@ -23,6 +23,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { ReactiveFormsModule } from '@angular/forms';
import { AccountSearchComponent } from './account-search/account-search.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
declarations: [
@ -51,6 +52,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
MatProgressSpinnerModule,
ReactiveFormsModule,
MatSnackBarModule,
MatProgressBarModule,
],
})
export class AccountsModule {}

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

@ -43,6 +43,11 @@
<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">

4
src/app/pages/admin/admin.component.ts
View File

@ -26,6 +26,7 @@ export class AdminComponent implements OnInit {
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;
@ -39,6 +40,9 @@ export class AdminComponent implements OnInit {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.actions = actions;
if (actions.length > 0) {
this.loading = false;
}
});
}

2
src/app/pages/admin/admin.module.ts
View File

@ -13,6 +13,7 @@ import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatButtonModule } from '@angular/material/button';
import { MatRippleModule } from '@angular/material/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
declarations: [AdminComponent],
@ -29,6 +30,7 @@ import { MatRippleModule } from '@angular/material/core';
MatPaginatorModule,
MatButtonModule,
MatRippleModule,
MatProgressBarModule,
],
})
export class AdminModule {}

8
src/app/pages/pages-routing.module.ts
View File

@ -22,10 +22,10 @@ const routes: Routes = [
path: 'tokens',
loadChildren: () => import('@pages/tokens/tokens.module').then((m) => m.TokensModule),
},
{
path: 'admin',
loadChildren: () => import('@pages/admin/admin.module').then((m) => m.AdminModule),
},
// {
// path: 'admin',
// loadChildren: () => import('@pages/admin/admin.module').then((m) => m.AdminModule),
// },
{ path: '**', redirectTo: 'home', pathMatch: 'full' },
];

7
src/app/pages/settings/settings.component.html
View File

@ -40,6 +40,7 @@
</div>
</div>
</div>
<div class="col-12 mb-2">
<div class="card">
<mat-card-title class="card-header">
@ -67,6 +68,12 @@
/>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="loading">
<h2 class="text-center"><strong>Loading Trusted Users!</strong></h2>
<mat-progress-bar [mode]="'query'"></mat-progress-bar>
</div>
<mat-table
class="mat-elevation-z10"
[dataSource]="dataSource"

4
src/app/pages/settings/settings.component.ts
View File

@ -17,6 +17,7 @@ export class SettingsComponent implements OnInit {
displayedColumns: Array<string> = ['name', 'email', 'userId'];
trustedUsers: Array<Staff>;
userInfo: Staff;
loading: boolean = true;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ -29,6 +30,9 @@ export class SettingsComponent implements OnInit {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.trustedUsers = users;
if (users.length > 0) {
this.loading = false;
}
});
this.userInfo = this.authService.getPrivateKeyInfo();
}

2
src/app/pages/settings/settings.module.ts
View File

@ -18,6 +18,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatMenuModule } from '@angular/material/menu';
import { ReactiveFormsModule } from '@angular/forms';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
declarations: [SettingsComponent, OrganizationComponent],
@ -38,6 +39,7 @@ import { ReactiveFormsModule } from '@angular/forms';
MatSelectModule,
MatMenuModule,
ReactiveFormsModule,
MatProgressBarModule,
],
})
export class SettingsModule {}

5
src/app/pages/tokens/tokens.component.html
View File

@ -45,6 +45,11 @@
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="loading">
<h2 class="text-center"><strong>Loading Tokens!</strong></h2>
<mat-progress-bar [mode]="'query'"></mat-progress-bar>
</div>
<mat-table
class="mat-elevation-z10 table-responsive"
[dataSource]="dataSource"

4
src/app/pages/tokens/tokens.component.ts
View File

@ -25,6 +25,7 @@ export class TokensComponent implements OnInit, AfterViewInit {
@ViewChild(MatSort) sort: MatSort;
tokens: Array<Token>;
token: Token;
loading: boolean = true;
constructor(private tokenService: TokenService) {}
@ -39,6 +40,9 @@ export class TokensComponent implements OnInit, AfterViewInit {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.tokens = tokens;
if (tokens.length > 0) {
this.loading = false;
}
});
}

2
src/app/pages/tokens/tokens.module.ts
View File

@ -17,6 +17,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
declarations: [TokensComponent, TokenDetailsComponent],
@ -37,6 +38,7 @@ import { MatCardModule } from '@angular/material/card';
MatToolbarModule,
MatCardModule,
MatRippleModule,
MatProgressBarModule,
],
})
export class TokensModule {}

5
src/app/pages/transactions/transactions.component.html
View File

@ -63,6 +63,11 @@
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<div *ngIf="loading">
<h2 class="text-center"><strong>Loading Transactions!</strong></h2>
<mat-progress-bar [mode]="'query'"></mat-progress-bar>
</div>
<table
mat-table
class="mat-elevation-z10"

4
src/app/pages/transactions/transactions.component.ts
View File

@ -29,6 +29,7 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
transactionsType: string = 'all';
transactionsTypes: Array<string>;
tokenSymbol: string;
loading: boolean = true;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ -47,6 +48,9 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
this.transactionDataSource.paginator = this.paginator;
this.transactionDataSource.sort = this.sort;
this.transactions = transactions;
if (transactions.length > 0) {
this.loading = false;
}
});
this.userService
.getTransactionTypes()

2
src/app/pages/transactions/transactions.module.ts
View File

@ -17,6 +17,7 @@ import { MatSelectModule } from '@angular/material/select';
import { MatCardModule } from '@angular/material/card';
import { MatRippleModule } from '@angular/material/core';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
declarations: [TransactionsComponent, TransactionDetailsComponent],
@ -37,6 +38,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
MatCardModule,
MatRippleModule,
MatSnackBarModule,
MatProgressBarModule,
],
})
export class TransactionsModule {}