usermangementdatatable

2018-09-24 13:09:51 +05:30 · 2018-09-24 13:09:51 +05:30 · 17a78672a1
commit 17a78672a1
parent 7892db4e68
5 changed files with 136 additions and 13 deletions
--- a/ng6-seed/package-lock.json
+++ b/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
        }
      }
    },
--- a/ng6-seed/src/app/settings/users/user-list/user-list.component.html
+++ b/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>
--- a/ng6-seed/src/app/settings/users/user-list/user-list.component.scss
+++ b/ng6-seed/src/app/settings/users/user-list/user-list.component.scss
@ -22,4 +22,25 @@ table {
 .deactive:hover{
  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;
 }
--- a/ng6-seed/src/app/settings/users/user-list/user-list.component.ts
+++ b/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();
+  //   });
+  // }
 }
--- a/ng6-seed/src/app/settings/users/users.module.ts
+++ b/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 { }