Skip to content

Commit c5fcec5

Browse files
added generic service 🎉
1 parent cbc866f commit c5fcec5

17 files changed

+318
-244
lines changed

AngularUI/src/app/app.module.ts

+12-13
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ import { EmployeeComponent } from './components/employee/employee.component';
1010
import { ShowEmpComponent } from './components/employee/show-emp/show-emp.component';
1111
import { AddEditEmpComponent } from './components/employee/add-edit-emp/add-edit-emp.component';
1212

13-
import {HttpClientModule} from '@angular/common/http';
14-
import {FormsModule,ReactiveFormsModule} from '@angular/forms'
15-
import { SharedapiService } from './services/sharedapi.service';
13+
import { HttpClientModule } from '@angular/common/http';
14+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
1615
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
1716
import { ToastrModule } from 'ngx-toastr';
1817
import { MatGridListModule } from '@angular/material/grid-list';
@@ -23,16 +22,16 @@ import { MatButtonModule } from '@angular/material/button';
2322
import { LayoutModule } from '@angular/cdk/layout';
2423
import { MatFormFieldModule } from '@angular/material/form-field';
2524
import { MatTableModule } from '@angular/material/table';
26-
import {MatInputModule} from '@angular/material/input'
25+
import { MatInputModule } from '@angular/material/input';
2726
import { MatPaginatorModule } from '@angular/material/paginator';
2827
import { MatSortModule } from '@angular/material/sort';
29-
import {MatButtonToggleModule} from '@angular/material/button-toggle';
28+
import { MatButtonToggleModule } from '@angular/material/button-toggle';
3029
import { FlexLayoutModule } from '@angular/flex-layout';
31-
import {MatDialogModule} from '@angular/material/dialog';
30+
import { MatDialogModule } from '@angular/material/dialog';
3231
import { MatSelectModule } from '@angular/material/select';
33-
import {MatDatepickerModule} from '@angular/material/datepicker';
34-
import {MatNativeDateModule} from '@angular/material/core';
35-
import {MatToolbarModule} from '@angular/material/toolbar';
32+
import { MatDatepickerModule } from '@angular/material/datepicker';
33+
import { MatNativeDateModule } from '@angular/material/core';
34+
import { MatToolbarModule } from '@angular/material/toolbar';
3635

3736
@NgModule({
3837
declarations: [
@@ -69,9 +68,9 @@ import {MatToolbarModule} from '@angular/material/toolbar';
6968
MatSelectModule,
7069
MatDatepickerModule,
7170
MatNativeDateModule,
72-
MatToolbarModule
71+
MatToolbarModule,
7372
],
74-
providers: [SharedapiService],
75-
bootstrap: [AppComponent]
73+
providers: [],
74+
bootstrap: [AppComponent],
7675
})
77-
export class AppModule { }
76+
export class AppModule {}
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,70 @@
11
import { Component, Inject, Input, OnInit } from '@angular/core';
22
import { Department } from 'src/app/models/Department';
3-
import { SharedapiService } from 'src/app/services/sharedapi.service';
43
import { ToastrService } from 'ngx-toastr';
54
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
6-
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
5+
import {
6+
FormBuilder,
7+
FormControl,
8+
FormGroup,
9+
Validators,
10+
} from '@angular/forms';
11+
import { DepartmentService } from 'src/app/services/department/department.service';
712

813
@Component({
914
selector: 'app-add-edit-dep',
1015
templateUrl: './add-edit-dep.component.html',
11-
styleUrls: ['./add-edit-dep.component.css']
16+
styleUrls: ['./add-edit-dep.component.css'],
1217
})
1318
export class AddEditDepComponent {
14-
1519
addDepartmentForm: FormGroup;
1620
constructor(
17-
private service: SharedapiService,
21+
private depService: DepartmentService,
1822
private toastr: ToastrService,
1923
private fb: FormBuilder,
2024
private dialogRef: MatDialogRef<AddEditDepComponent>,
21-
@Inject(MAT_DIALOG_DATA) public data: [Department,boolean]
22-
) {
25+
@Inject(MAT_DIALOG_DATA) public data: [Department, boolean]
26+
) {
2327
this.addDepartmentForm = this.fb.group({
24-
DepartmentId: new FormControl(this.data[0] == null ? 0 : this.data[0].DepartmentId, Validators.required),
25-
DepartmentName: new FormControl(this.data[0] == null ? null : this.data[0].DepartmentName, Validators.required)
28+
DepartmentId: new FormControl(
29+
this.data[0] == null ? 0 : this.data[0].DepartmentId,
30+
Validators.required
31+
),
32+
DepartmentName: new FormControl(
33+
this.data[0] == null ? null : this.data[0].DepartmentName,
34+
Validators.required
35+
),
2636
});
27-
};
37+
}
2838

2939
updateClicked: boolean = this.data[1];
3040

31-
addDepartment(){
32-
this.service.addDepartment(this.addDepartmentForm.value).subscribe({
41+
addDepartment() {
42+
this.depService.add(this.addDepartmentForm.value).subscribe({
3343
next: (res) => {
34-
this.toastr.success("Added Successfully", "Add New Department");
44+
this.toastr.success('Added Successfully', 'Add New Department');
3545
this.CloseDialog();
3646
},
3747
error: (err) => {
3848
console.log(err);
39-
this.toastr.error("Error adding Department", "Add new department");
40-
}
49+
this.toastr.error('Error adding Department', 'Add new department');
50+
},
4151
});
42-
};
52+
}
4353

4454
CloseDialog() {
4555
this.dialogRef.close();
4656
}
4757

48-
updateDepartment(department:Department){
49-
this.service.updateDepartment(department).subscribe({
58+
updateDepartment(department: Department) {
59+
this.depService.update(department).subscribe({
5060
next: (res) => {
51-
this.toastr.success("Department Updated!", "Update Department");
61+
this.toastr.success('Department Updated!', 'Update Department');
5262
this.CloseDialog();
5363
},
5464
error: (err) => {
5565
console.log(err);
56-
this.toastr.error("Error updating Department", "Update Department");
57-
}
66+
this.toastr.error('Error updating Department', 'Update Department');
67+
},
5868
});
59-
};
60-
69+
}
6170
}

AngularUI/src/app/components/department/show-dep/show-dep.component.ts

+39-43
Original file line numberDiff line numberDiff line change
@@ -3,99 +3,95 @@ import { MatPaginator } from '@angular/material/paginator';
33
import { MatSort } from '@angular/material/sort';
44
import { MatTableDataSource } from '@angular/material/table';
55
import { Department } from 'src/app/models/Department';
6-
import { SharedapiService } from 'src/app/services/sharedapi.service';
76
import { MatDialog } from '@angular/material/dialog';
87
import { AddEditDepComponent } from '../add-edit-dep/add-edit-dep.component';
8+
import { DepartmentService } from 'src/app/services/department/department.service';
99

1010
@Component({
1111
selector: 'app-show-dep',
1212
templateUrl: './show-dep.component.html',
13-
styleUrls: ['./show-dep.component.css']
13+
styleUrls: ['./show-dep.component.css'],
1414
})
15-
export class ShowDepComponent implements OnInit,AfterViewInit {
16-
15+
export class ShowDepComponent implements OnInit, AfterViewInit {
1716
constructor(
18-
private service: SharedapiService,
17+
private depService: DepartmentService,
1918
private dialog: MatDialog
20-
)
21-
{
19+
) {
2220
this.dialog.afterAllClosed.subscribe(() => {
2321
this.refreshDepList();
2422
});
25-
};
23+
}
2624

27-
displayedColumns:string[]=['DepartmentId', 'DepartmentName','Options'];
25+
displayedColumns: string[] = ['DepartmentId', 'DepartmentName', 'Options'];
2826
dataSource = new MatTableDataSource<Department>();
2927

30-
@ViewChild(MatPaginator) paginator:MatPaginator;
31-
@ViewChild(MatSort) sort:MatSort;
32-
33-
DepartmentList:Department[]=[];
28+
@ViewChild(MatPaginator) paginator: MatPaginator;
29+
@ViewChild(MatSort) sort: MatSort;
3430

35-
ModalTitle:string;
36-
ActivateAddEditDepComp:boolean=false;
37-
dep:Department;
38-
updateClicked: boolean=false;
31+
DepartmentList: Department[] = [];
3932

40-
DepartmentIdFilter:string="";
41-
DepartmentNameFilter:string="";
42-
DepartmentListWithoutFilter:Department[]=[];
33+
ModalTitle: string;
34+
ActivateAddEditDepComp: boolean = false;
35+
dep: Department;
36+
updateClicked: boolean = false;
4337

38+
DepartmentIdFilter: string = '';
39+
DepartmentNameFilter: string = '';
40+
DepartmentListWithoutFilter: Department[] = [];
4441

4542
ngOnInit(): void {
4643
this.refreshDepList();
4744
}
4845

4946
ngAfterViewInit(): void {
50-
this.dataSource.paginator=this.paginator;
51-
this.dataSource.sort=this.sort;
47+
this.dataSource.paginator = this.paginator;
48+
this.dataSource.sort = this.sort;
5249
}
5350

54-
applyFilter(event:Event){
55-
const filterValue=(event.target as HTMLInputElement).value;
56-
this.dataSource.filter=filterValue.trim().toLowerCase();
51+
applyFilter(event: Event) {
52+
const filterValue = (event.target as HTMLInputElement).value;
53+
this.dataSource.filter = filterValue.trim().toLowerCase();
5754

58-
if(this.dataSource.paginator){
55+
if (this.dataSource.paginator) {
5956
this.dataSource.paginator.firstPage();
6057
}
6158
}
6259

6360
addDepartment() {
6461
this.updateClicked = false;
6562
this.dialog.open(AddEditDepComponent, {
66-
width: "60%",
67-
data: [this.dep, this.updateClicked]
63+
width: '60%',
64+
data: [this.dep, this.updateClicked],
6865
});
6966
}
7067

7168
editClick(item: Department) {
7269
this.updateClicked = true;
7370
this.dialog.open(AddEditDepComponent, {
74-
width: "60%",
75-
data: [item, this.updateClicked]
71+
width: '60%',
72+
data: [item, this.updateClicked],
7673
});
7774
}
7875

79-
deleteClick(item:Department){
80-
if(confirm("Are You Sure??")){
81-
this.service.deleteDepartment(item.DepartmentId).subscribe(data=>{
76+
deleteClick(item: Department) {
77+
if (confirm('Are You Sure??')) {
78+
this.depService.delete(item.DepartmentId).subscribe((data) => {
8279
alert(data.toString());
8380
this.refreshDepList();
84-
})
81+
});
8582
}
8683
}
8784

88-
closeClick(){
89-
this.ActivateAddEditDepComp=false;
85+
closeClick() {
86+
this.ActivateAddEditDepComp = false;
9087
this.refreshDepList();
9188
}
9289

93-
refreshDepList(){
94-
this.service.getDepList().subscribe((data:Department[])=>{
95-
this.DepartmentList=data;
96-
this.DepartmentListWithoutFilter=data;
97-
this.dataSource.data=data;
98-
})
90+
refreshDepList() {
91+
this.depService.getAll().subscribe((data: Department[]) => {
92+
this.DepartmentList = data;
93+
this.DepartmentListWithoutFilter = data;
94+
this.dataSource.data = data;
95+
});
9996
}
100-
10197
}

0 commit comments

Comments
 (0)