1- import { Component , ViewChild , TemplateRef , OnInit , OnDestroy } from '@angular/core' ;
1+ import {
2+ Component ,
3+ ViewChild ,
4+ TemplateRef ,
5+ OnInit ,
6+ OnDestroy
7+ } from '@angular/core' ;
28import { DatatableComponent } from '@swimlane/ngx-datatable' ;
39import { BsModalService } from 'ngx-bootstrap/modal' ;
410import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service' ;
@@ -32,28 +38,27 @@ export class AppComponent implements OnInit, OnDestroy {
3238 { prop : 'name' } ,
3339 { name : 'Company' } ,
3440 { name : 'Gender' } ,
35- { name : 'Edit' }
41+ { name : 'Edit' }
3642 ] ;
37-
43+
3844 constructor (
39- private modalService : BsModalService ,
40- private employeeService : EmployeeService ,
45+ private modalService : BsModalService ,
46+ private employeeService : EmployeeService ,
4147 private http : HttpClient
42- ) { }
43-
44- ngOnInit ( ) {
48+ ) { }
49+
50+ ngOnInit ( ) {
4551 this . loading = true ;
4652 // Fetch employees from API on component init
47- this . employeeService . getEmployees ( )
48- . subscribe ( employees => {
49- this . employees = employees ;
50- // Add employees to temp array for search filtering
51- this . temp = [ ...employees ] ;
52- this . loading = false ;
53- } ) ;
53+ this . employeeService . getEmployees ( ) . subscribe ( employees => {
54+ this . employees = employees ;
55+ // Add employees to temp array for search filtering
56+ this . temp = [ ...employees ] ;
57+ this . loading = false ;
58+ } ) ;
5459 }
5560
56- ngOnDestroy ( ) {
61+ ngOnDestroy ( ) {
5762 //Unsubscribe any subscriptions
5863 this . modalSubscriptions . forEach ( ( subscription : Subscription ) => {
5964 subscription . unsubscribe ( ) ;
@@ -66,20 +71,24 @@ export class AppComponent implements OnInit, OnDestroy {
6671 console . log ( val ) ;
6772 // filter our data
6873 const temp = this . temp . filter ( function ( d ) {
69- return ( d . name . toLowerCase ( ) . indexOf ( val ) !== - 1 || d . gender . toLowerCase ( ) . indexOf ( val ) !== - 1 ) || ! val ;
74+ return (
75+ d . name . toLowerCase ( ) . indexOf ( val ) !== - 1 ||
76+ d . gender . toLowerCase ( ) . indexOf ( val ) !== - 1 ||
77+ ! val
78+ ) ;
7079 } ) ;
71- console . log ( temp )
80+ console . log ( temp ) ;
7281 // update the rows
7382 this . employees = temp ;
7483 // Whenever the filter changes, always go back to the first page
7584 this . table . offset = 0 ;
7685 }
7786
78- onSelect ( $event ) {
79- console . log ( $event ) ;
87+ onSelect ( $event ) {
88+ console . log ( $event ) ;
8089 }
8190
82- addNew ( ) {
91+ addNew ( ) {
8392 console . log ( this . employees ) ;
8493 // Set the initial state of the modal
8594 // Modal actions are performed based on action and lastId is only for mock api
@@ -88,16 +97,15 @@ export class AppComponent implements OnInit, OnDestroy {
8897 lastId : this . employees [ this . employees . length - 1 ] . id // Last employee ID
8998 } ;
9099 // Create reference to Modal
91- this . bsModalRef = this . modalService . show ( SimpleModalContentComponent , { initialState} ) ;
100+ this . bsModalRef = this . modalService . show ( SimpleModalContentComponent , {
101+ initialState
102+ } ) ;
92103 // Subscribe to onHide observable of Modal service
93104 this . modalSubscriptions . push (
94- this . modalService . onHide . pipe ( take ( 1 ) ) . subscribe ( ( employee ) => {
95- if ( employee ) {
96- // Push new employee on top of array
97- this . employees . push ( employee ) ;
98- this . employees = [ ...this . employees ] ;
99- console . log ( this . employees ) ;
100- this . table . offset = 0 ;
105+ this . modalService . onHide . pipe ( take ( 1 ) ) . subscribe ( employee => {
106+ if ( employee ) {
107+ this . loading = true ;
108+ this . addEmployee ( employee ) ;
101109 }
102110 } )
103111 ) ;
@@ -109,50 +117,79 @@ export class AppComponent implements OnInit, OnDestroy {
109117 employee : employee ,
110118 action : Action . Update
111119 } ;
112- this . bsModalRef = this . modalService . show ( SimpleModalContentComponent , { initialState} ) ;
120+ this . bsModalRef = this . modalService . show ( SimpleModalContentComponent , {
121+ initialState
122+ } ) ;
113123 this . bsModalRef . content . closeBtnName = 'Close' ;
114124 this . modalSubscriptions . push (
115- this . modalService . onHide . pipe ( take ( 1 ) ) . subscribe ( ( employee ) => {
116- if ( employee ) {
117- let itemIndex = this . employees . findIndex ( emp => emp . id == employee . id ) ;
118- this . employees [ itemIndex ] = employee ;
119- this . employees = [ ...this . employees ] ;
120- console . log ( this . employees ) ;
121- this . table . offset = 0 ;
125+ this . modalService . onHide . pipe ( take ( 1 ) ) . subscribe ( employee => {
126+ if ( employee ) {
127+ this . loading = true ;
128+ this . employeeService . updateEmployee ( employee ) . subscribe (
129+ res => {
130+ console . log ( 'Record updated' ) ;
131+ // replace updated employee in local array
132+ let itemIndex = this . employees . findIndex (
133+ emp => emp . id == employee . id
134+ ) ;
135+ this . employees [ itemIndex ] = employee ;
136+ this . employees = [ ...this . employees ] ;
137+ console . log ( this . employees ) ;
138+ this . table . offset = 0 ;
139+ } ,
140+ err => console . log ( err ) ,
141+ ( ) => ( this . loading = false )
142+ ) ;
122143 }
123144 } )
124145 ) ;
125- // this.bsModalRef.content.employee = employee;
126146 }
127147
128- openModalForCopying ( employee : Employee ) {
148+ openModalForCopying ( employee : Employee ) {
129149 const initialState = {
130150 title : `Copy Employee ${ employee . name } ,
131151 employee : employee ,
132152 action : Action . Copy
133153 } ;
134- this . bsModalRef = this . modalService . show ( SimpleModalContentComponent , { initialState} ) ;
154+ this . bsModalRef = this . modalService . show ( SimpleModalContentComponent , {
155+ initialState
156+ } ) ;
135157 this . bsModalRef . content . closeBtnName = 'Close' ;
136- this . bsModalRef . content . lastId = this . employees [ this . employees . length - 1 ] . id ,
137158 this . modalSubscriptions . push (
138- this . modalService . onHide . pipe ( take ( 1 ) ) . subscribe ( ( employee ) => {
139- if ( employee ) {
140- this . employees . push ( employee ) ;
141- this . employees = [ ...this . employees ] ;
142- console . log ( this . employees ) ;
143- this . table . offset = 0 ;
159+ this . modalService . onHide . pipe ( take ( 1 ) ) . subscribe ( employee => {
160+ if ( employee ) {
161+ this . loading = true ;
162+ this . addEmployee ( employee ) ;
144163 }
145164 } )
146165 ) ;
147166 }
148167
149- deleteRecord ( employee : Employee ) {
168+ deleteRecord ( employee : Employee ) {
150169 this . loading = true ;
151- this . employeeService . deleteEmployee ( employee ) . subscribe ( ( res ) => {
170+ this . employeeService . deleteEmployee ( employee ) . subscribe ( res => {
152171 console . log ( res ) ;
153172 this . employees = [ ...this . employees . filter ( item => item !== employee ) ] ;
154173 // this.employees = [...this.employees];
155174 this . loading = false ;
156- } )
175+ } ) ;
176+ }
177+
178+ addEmployee ( _employee : Employee ) {
179+ //Mock API doesn't auto increment the ID. So, we do it manually
180+ _employee . id = this . employees [ this . employees . length - 1 ] . id + 1 ;
181+
182+ this . employeeService . addEmployee ( _employee ) . subscribe (
183+ res => {
184+ console . log ( 'New record created' ) ;
185+ // Push new employee on top of array
186+ this . employees . push ( _employee ) ;
187+ this . employees = [ ...this . employees ] ;
188+ console . log ( this . employees ) ;
189+ this . table . offset = 0 ;
190+ } ,
191+ err => { } ,
192+ ( ) => ( this . loading = false )
193+ ) ;
157194 }
158195}
0 commit comments