import { Component , OnInit , ViewChild , ElementRef } from '@angular/core' ; import { AUserService } from './user.service' ; import { MatSort , MatPaginator , Sort } from '@angular/material' ; import { UserDatabase } from './user-database.component' ; import { UserDataSource } from './user-datasource.component' ; import { ModalComponent } from '../../modal.component' ; import { NgbModal , ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap' ; import { fromEvent } from 'rxjs' ; import { debounceTime , distinctUntilChanged } from 'rxjs/operators' ; @ Component ( { selector : 'ngx-user-component' , templateUrl : './user-component.html' , styleUrls : [ './user-component.scss' ] , } ) export class FormsUserComponent implements OnInit { constructor ( private user_service , private modalService ) { } aUser : UserDataSource | null ; length : number ; closeResult : any ; displayedColumns = [ 'ID' , 'username' , 'first_name' , 'last_name' , 'email' , 'Operations' ] ; @ ViewChild ( MatSort , { static : false } ) sort : MatSort ; @ ViewChild ( MatPaginator , { static : false } ) paginator : MatPaginator ; @ ViewChild ( 'filter' , { static : false } ) filter : ElementRef ; ngOnInit ( ) { this . getUserlist ( ) ; } getUserlist ( ) { this . user_service . get_UserList ( ) . then ( data => { this . length = data . length ; this . aUser = new UserDataSource ( new UserDatabase ( data ) , this . sort , this . paginator ) ; const sortState = { active : 'ID' , direction : 'desc' } ; this . sort . active = sortState . active ; this . sort . direction = sortState . direction ; this . sort . sortChange . emit ( sortState ) ; fromEvent ( this . filter . nativeElement , 'keyup' ) . pipe ( debounceTime ( 150 ) , distinctUntilChanged ( ) ) . subscribe ( ( ) => { if ( ! this . aUser ) { return ; } this . aUser . filter = this . filter . nativeElement . value ; } ) ; } ) ; } deleteUser ( user_id ) { this . user_service . delete_User ( user_id ) . then ( response => { } ) . catch ( this . handleError ) ; this . getUserlist ( ) ; } showStaticModal ( name , user_id ) { const activeModal = this . modalService . open ( ModalComponent , { size : 'sm' , container : 'nb-layout' , } ) ; activeModal . componentInstance . modalHeader = 'Alert' ; activeModal . componentInstance . modalContent = `Are you sure you want to delete ${ name }?` ; activeModal . result . then ( ( result ) => { this . closeResult = result ; if ( this . closeResult === 'yes_click' ) { this . deleteUser ( user_id ) ; } } , ( reason ) => { this . closeResult = this . getDismissReason ( reason ) ; } ) ; } private getDismissReason ( reason ) { if ( reason === ModalDismissReasons . ESC ) { return 'by pressing ESC' ; } else if ( reason === ModalDismissReasons . BACKDROP_CLICK ) { return 'by clicking on a backdrop' ; } else { return `with: ${ reason }` ; } } private handleError ( error ) { console . error ( 'An error occurred' , error ) ; return Promise . reject ( error . message || error ) ; } }