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

Add user settings page.

Browse Source
This commit is contained in:
Spencer Ofwiti
2020-11-25 10:59:48 +03:00
parent 588fd4817d
commit 4ee55c2bc0
14 changed files with 460 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/app/pages/settings/settings.component.html Normal file
View File

@@ -0,0 +1,129 @@
<!-- 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>
<div class="row">
<div class="col-md-6 mb-2">
<div class="card">
<div class="card-header text-center">
SETTINGS
</div>
<div class="card-body">
<h4>Kobo Toolbox Credentials</h4>
<p><strong>Username: </strong> admin_reserve </p>
<p><strong>Password: </strong> p@55w0rd </p>
</div>
<hr>
<div class="card-body">
<h4>Account Status: </h4>
<span><i class="fa fa-check-circle"></i> Please contact support.</span>
</div>
<hr>
<div class="card-body">
<h4>Support</h4>
<span><i class="fa fa-commenting"></i> Chat</span><br>
<span><i class="fa fa-book"></i> Help Center</span>
</div>
<hr>
<div class="card-body">
<h4>Organization Settings</h4>
<p routerLink="/settings/organization"><i>Update your organization settings</i></p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="card">
<div class="card-header text-center">
ACCOUNT MANAGEMENT
</div>
<div class="card-body">
<h4>Change Password</h4>
<p><i>Change your account password</i></p>
</div>
<hr>
<div class="card-body">
<h4>Two-step authentication</h4>
<p><i>Secure your account with two step verification</i></p>
</div>
<hr>
<div class="card-body">
<button mat-raised-button type="button" class="btn btn-outline-primary"> LOGOUT ADMIN </button>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card mb-3">
<div class="card-header">
<div class="row">
USERS
<button mat-raised-button routerLink="/settings/invite" type="button" class="btn btn-outline-primary ml-auto"><i class="fa fa-plus"> NEW USER </i></button>
</div>
</div>
<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="accountType">
<mat-header-cell *matHeaderCellDef mat-sort-header> ACCOUNT TYPE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.accountType}} </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.created}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
<mat-cell *matCellDef="let user"><span class="badge badge-primary badge-pill"> {{user.status}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="options">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let user" class="dropdown">
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn btn-outline-danger ml-1"><i class="fa fa-ellipsis-h"></i></button>
<mat-menu #menu='matMenu'>
<button mat-menu-item>Change to Super Admin</button>
<button mat-menu-item>Change to Admin</button>
<button mat-menu-item>Change to Enroller</button>
<button mat-menu-item>Change to View Only</button>
<button mat-menu-item>Disable User</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let transaction; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
<app-footer appMenuSelection></app-footer>
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>