usermangementdatatable

ng6-seed/package-lock.json

@@ -4268,7 +4268,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4683,7 +4684,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4739,6 +4741,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4782,12 +4785,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

ng6-seed/src/app/settings/users/user-list/user-list.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="loader">
+<!-- <div *ngIf="loader">
     <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
  </div>
  <div style="text-align:  right;">
@@ -37,4 +37,69 @@
     </table>
 
 </div>
- </mat-card>
+ </mat-card> -->
+
+ <mat-card-content>
+    <div style="text-align: right;">
+      <button mat-raised-button color="primary" (click)="add()"> + Add Register</button>
+   </div>
+   <br>           
+    <div *ngIf="loader">
+      <mat-progress-bar mode="indeterminate" color="accent" class="mb-1"></mat-progress-bar>
+   </div>
+
+   <div class="example-header">
+     <mat-form-field>
+       <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+     </mat-form-field>
+   </div>
+   
+   <div class="example-container mat-elevation-z8">
+   
+     <mat-table [dataSource]="dataSource" matSort >
+   
+        <ng-container matColumnDef="SerialNo">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Sl </mat-header-cell>
+            <mat-cell *matCellDef="let row; let i = index;"> {{i+1}} </mat-cell>
+        </ng-container>
+
+       <ng-container matColumnDef="FullName">
+         <mat-header-cell *matHeaderCellDef mat-sort-header> Full Name </mat-header-cell>
+         <mat-cell *matCellDef="let us"> {{us.user_first_name}} {{us.user_last_name}} </mat-cell>
+       </ng-container>
+   
+       <ng-container matColumnDef="Email">
+         <mat-header-cell *matHeaderCellDef mat-sort-header> Email Id </mat-header-cell>
+         <mat-cell *matCellDef="let us"> {{us.email}} </mat-cell>
+       </ng-container>
+       <ng-container matColumnDef="Mobile">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No </mat-header-cell>
+        <mat-cell *matCellDef="let us"> {{us.mobile_no}} </mat-cell>
+      </ng-container>
+       
+       <ng-container matColumnDef="IsActive">
+         <mat-header-cell *matHeaderCellDef mat-sort-header> Is Active </mat-header-cell>
+         <mat-cell *matCellDef="let us"><!--{{row.isactive}}-->
+            <a (click)="isactive(us.userid,us.aws_name)"><mat-icon *ngIf="us.isactive == 1;else notactive;" class="active" matTooltip="Active" matTooltipPosition="above">done</mat-icon></a>
+            <a (click)="isactive(us.userid,us.aws_name)"><ng-template #notactive ><mat-icon class="deactive" matTooltip="Inactive" matTooltipPosition="above">close</mat-icon></ng-template></a>
+         </mat-cell>
+       </ng-container>
+
+       <ng-container matColumnDef="Actions">
+         <mat-header-cell *matHeaderCellDef>   Actions </mat-header-cell>
+         <mat-cell *matCellDef="let us"> 
+            <a mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editUserDetails(us.userid,us.aws_name)"><mat-icon>edit</mat-icon></a>
+            <a mat-icon-button class="hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="deleteuser(us)"><mat-icon>delete_forever</mat-icon></a>            
+          </mat-cell>
+       </ng-container>
+   
+       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+       <mat-row *matRowDef="let row; columns: displayedColumns;">
+       </mat-row>
+     </mat-table>
+
+     <!-- <div *ngIf="dataSource.length === 0">No records found</div> -->
+   
+     <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]"></mat-paginator>
+   </div>
+</mat-card-content>

ng6-seed/src/app/settings/users/user-list/user-list.component.scss

@@ -23,3 +23,24 @@ table {
   color: green;
     font-size: 25px;
 }
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+}
+
+.example-header {  
+  min-height: 64px;
+  padding: 8px 24px 0;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}

ng6-seed/src/app/settings/users/user-list/user-list.component.ts

@@ -1,31 +1,50 @@
 import { Component, OnInit, ViewChild, } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
 import { AwsService } from '../../../AwsService/aws.service';
-import { MatPaginator, MatTableDataSource } from '@angular/material';
+import { MatPaginator, MatTableDataSource,MatSort } from '@angular/material';
 import { UserService } from '../../service/user.service';
+import { DataSource } from '@angular/cdk/table';
+
 @Component({
   selector: 'app-user-list',
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.scss']
 })
 export class UserListComponent implements OnInit {
-  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  public dataLength: number;
+   public dataSource = new MatTableDataSource();
+   displayedColumns = ['SerialNo','FullName','Email','Mobile','Actions', 'IsActive'];
+ 
+   @ViewChild(MatPaginator) paginator: MatPaginator;
+   @ViewChild(MatSort) sort: MatSort;
 
   userdata: any = [];
   loader: boolean = false;
   
-  @ViewChild(MatPaginator) paginator: MatPaginator;
  
-  constructor(public aws: AwsService, public route: Router,public users:UserService) { }
+
+  constructor(public aws: AwsService, public route: Router,public users:UserService) { 
+
+    this.getusers();
+  }
 
 
 
 
   ngOnInit() {
-    this.getusers();
+    
     delete this.aws.localUserId;
   }
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
 
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+  }
   getusers() {
     this.loader = true;
     let data:any;
@@ -35,6 +54,9 @@ export class UserListComponent implements OnInit {
       data = res;
       if (data.status == 200) {
         this.userdata = data.records;
+        console.log(data.records.length);
+        this.dataLength = data.records.length;
+        this.dataSource.data = this.userdata;
       }
     })
   }
@@ -94,4 +116,9 @@ export class UserListComponent implements OnInit {
    add(){
     this.route.navigate(['setting/users/register']);
   }
+  // deleteuser(user){
+  //   this.aws.deleteAws(user).subscribe(res=>{
+  //     this.getusers();
+  //   });
+  // }
 }

ng6-seed/src/app/settings/users/users.module.ts

@@ -7,7 +7,9 @@ import {
   MatRadioModule, 
   MatButtonModule,MatTableModule,MatPaginatorModule,
   MatProgressBarModule,MatDialogModule, MatSortModule,
-  MatToolbarModule,MatSelectModule  } from '@angular/material';
+  MatToolbarModule,MatSelectModule,
+  MatListModule, MatMenuModule,
+} from '@angular/material';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -16,6 +18,8 @@ import { RouterModule } from '@angular/router';
 import { UserRoutes} from './users.routing';
 import { RegisterComponent } from './register/register.component';
 import { UserListComponent} from './user-list/user-list.component';
+
+import { NewPasswordDialog, ForgotPass } from '../../session/login/login.component';
 // import { HttpClientModule } from '@angular/common/http';
 @NgModule({
   imports: [
@@ -27,12 +31,13 @@ import { UserListComponent} from './user-list/user-list.component';
     MatRadioModule, 
     MatButtonModule,MatTableModule,MatPaginatorModule,
     MatProgressBarModule,MatDialogModule, MatSortModule,
-    MatToolbarModule,MatSelectModule,
+    MatToolbarModule,MatSelectModule,MatListModule, MatMenuModule,
     MatSlideToggleModule,
     FormsModule, ReactiveFormsModule,
     // HttpClientModule,
   ],
   declarations: [UserListComponent, RegisterComponent],
   
+  
 })
 export class UsersModule { }