Skip to content

Commit e698098

Browse files
suxrobGMsuxrobGM
committed
added customer list, add and edit pages
1 parent 723f8dd commit e698098

29 files changed

+340
-88
lines changed

‎src/Client/Logistics.OfficeApp/src/app/app.routes.ts

+7
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@ export const APP_ROUTES: Routes = [
4949
breadcrumb: 'Dashboard',
5050
},
5151
},
52+
{
53+
path: 'customers',
54+
loadChildren: () => import('./pages/customer').then((m) => m.CUSTOMER_ROUTES),
55+
data: {
56+
breadcrumb: 'Customers',
57+
},
58+
},
5259
{
5360
path: '**',
5461
redirectTo: '404',

‎src/Client/Logistics.OfficeApp/src/app/core/enums/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from './paymentMethod';
44
export * from './paymentStatus';
55
export * from './loadStatus';
66
export * from './userRole';
7+
export * from './permissions';

‎src/Client/Logistics.OfficeApp/src/app/core/helpers/permissions.ts ‎src/Client/Logistics.OfficeApp/src/app/core/enums/permissions.ts

+7
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,11 @@ export namespace Permissions {
3737
Edit = 'Permissions.Trucks.Edit',
3838
Delete = 'Permissions.Trucks.Delete'
3939
}
40+
41+
export enum Customers {
42+
Create = 'Permissions.Customers.Create',
43+
View = 'Permissions.Customers.View',
44+
Edit = 'Permissions.Customers.Edit',
45+
Delete = 'Permissions.Customers.Delete'
46+
}
4047
}

‎src/Client/Logistics.OfficeApp/src/app/core/helpers/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
export * from './permissions';
21
export * from './dateRange';
32
export * from './predefinedDateRanges';

‎src/Client/Logistics.OfficeApp/src/app/layout/sidebar/sidebar.component.html

+6
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@
3434
<span class="ms-2" *ngIf="isOpened">Employees</span>
3535
</a>
3636
</li>
37+
<li class="nav-item">
38+
<a class="nav-link border-bottom" [routerLink]="['/customers']">
39+
<i class="bi bi-building h1" pTooltip="Customers"></i>
40+
<span class="ms-2" *ngIf="isOpened">Customers</span>
41+
</a>
42+
</li>
3743
<li class="nav-item">
3844
<a class="nav-link border-bottom">
3945
<i *ngIf="isOpened else rightArrowIcon" class="bi bi-arrow-left h1" (click)="toggle()" pTooltip="Minimize menu" role="presentation"></i>

‎src/Client/Logistics.OfficeApp/src/app/pages/customer/customer.routes.ts

+21-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
11
import {Routes} from '@angular/router';
2-
import {Permissions} from '@core/helpers';
2+
import {Permissions} from '@core/enums';
33
import {AuthGuard} from '@core/guards';
44
import {ListCustomersComponent} from './list-customers/list-customers.component';
5+
import {EditCustomerComponent} from './edit-customer/edit-customer.component';
56

67

78
export const CUSTOMER_ROUTES: Routes = [
89
{
910
path: '',
10-
redirectTo: 'list',
11-
pathMatch: 'full',
11+
component: ListCustomersComponent,
12+
canActivate: [AuthGuard],
13+
data: {
14+
breadcrumb: '',
15+
permission: Permissions.Customers.View,
16+
},
1217
},
1318
{
14-
path: 'list',
15-
component: ListCustomersComponent,
19+
path: 'add',
20+
component: EditCustomerComponent,
21+
canActivate: [AuthGuard],
22+
data: {
23+
breadcrumb: 'Add',
24+
permission: Permissions.Customers.Create,
25+
},
26+
},
27+
{
28+
path: 'edit/:id',
29+
component: EditCustomerComponent,
1630
canActivate: [AuthGuard],
1731
data: {
18-
breadcrumb: 'List',
19-
permission: Permissions.Employees.View,
32+
breadcrumb: 'Edit',
33+
permission: Permissions.Customers.Edit,
2034
},
2135
},
2236
];

‎src/Client/Logistics.OfficeApp/src/app/pages/customer/edit-customer/edit-customer.component.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<h1 class="text-center">{{title}}</h1>
2+
<hr class="w-100">
3+
4+
<div class="row justify-content-center mx-0">
5+
<div class="col-12 col-md-6">
6+
<p-card>
7+
<p-progressSpinner *ngIf="isLoading"></p-progressSpinner>
8+
9+
<form [formGroup]="form" (ngSubmit)="submit()">
10+
<div class="mb-3">
11+
<label for="name" class="form-label">Customer Name</label>
12+
<input id="name" formControlName="name" class="form-control" />
13+
</div>
14+
15+
<div>
16+
<button pButton
17+
type="submit"
18+
class="p-button-raised mt-3"
19+
icon="bi bi-pencil-square"
20+
[disabled]="isLoading">
21+
Save
22+
</button>
23+
<button pButton
24+
type="button"
25+
class="p-button-raised mt-3 ms-2"
26+
icon="bi bi-arrow-left-square"
27+
[routerLink]="['/customers']">
28+
Back to list
29+
</button>
30+
</div>
31+
</form>
32+
</p-card>
33+
</div>
34+
</div>

‎src/Client/Logistics.OfficeApp/src/app/pages/customer/edit-customer/edit-customer.component.ts

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
2+
import {Component, OnInit} from '@angular/core';
3+
import {CommonModule} from '@angular/common';
4+
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
5+
import {ActivatedRoute, Router, RouterModule} from '@angular/router';
6+
import {CardModule} from 'primeng/card';
7+
import {ButtonModule} from 'primeng/button';
8+
import {ProgressSpinnerModule} from 'primeng/progressspinner';
9+
import {ApiService, ToastService} from '@core/services';
10+
import {UpdateCustomer} from '@core/models';
11+
12+
13+
@Component({
14+
selector: 'app-edit-customer',
15+
standalone: true,
16+
templateUrl: './edit-customer.component.html',
17+
styleUrls: [],
18+
imports: [
19+
CommonModule,
20+
CardModule,
21+
ButtonModule,
22+
ProgressSpinnerModule,
23+
ReactiveFormsModule,
24+
RouterModule,
25+
],
26+
})
27+
export class EditCustomerComponent implements OnInit {
28+
public title: string;
29+
public id: string | null;
30+
public form: FormGroup<CustomerForm>;
31+
public isLoading: boolean;
32+
33+
constructor(
34+
private apiService: ApiService,
35+
private toastService: ToastService,
36+
private route: ActivatedRoute,
37+
private router: Router)
38+
{
39+
this.title = 'Edit customer';
40+
this.id = null;
41+
this.isLoading = false;
42+
43+
this.form = new FormGroup<CustomerForm>({
44+
name: new FormControl<string>('', {validators: Validators.required, nonNullable: true})
45+
});
46+
}
47+
48+
ngOnInit(): void {
49+
this.route.params.subscribe((params) => {
50+
this.id = params['id'];
51+
});
52+
53+
if (this.id) {
54+
this.title = 'Edit customer';
55+
this.fetchCustomer();
56+
}
57+
else {
58+
this.title = 'Add a new customer';
59+
}
60+
}
61+
62+
submit() {
63+
if (this.id) {
64+
this.updateCustomer();
65+
}
66+
else {
67+
this.addCustomer();
68+
}
69+
}
70+
71+
private fetchCustomer() {
72+
this.isLoading = true;
73+
74+
this.apiService.getCustomer(this.id!).subscribe((result) => {
75+
if (result.isSuccess) {
76+
this.form.patchValue({name: result.data?.name});
77+
}
78+
79+
this.isLoading = false;
80+
})
81+
}
82+
83+
private addCustomer() {
84+
this.isLoading = true;
85+
86+
this.apiService.createCustomer({name: this.form.value.name!}).subscribe((result) => {
87+
if (result.isSuccess) {
88+
this.toastService.showSuccess('A new customer has been added successfully');
89+
this.router.navigateByUrl('/customers');
90+
}
91+
92+
this.isLoading = false;
93+
});
94+
}
95+
96+
private updateCustomer() {
97+
this.isLoading = true;
98+
99+
const commad: UpdateCustomer = {
100+
id: this.id!,
101+
name: this.form.value.name!,
102+
}
103+
104+
this.apiService.updateCustomer(commad).subscribe((result) => {
105+
if (result.isSuccess) {
106+
this.toastService.showSuccess('A new customer has been added successfully');
107+
this.router.navigateByUrl('/customers');
108+
}
109+
110+
this.isLoading = false;
111+
});
112+
}
113+
}
114+
115+
interface CustomerForm {
116+
name: FormControl<string>;
117+
}

‎src/Client/Logistics.OfficeApp/src/app/pages/customer/list-customers/list-customers.component.html

+30-38
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1+
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>
2+
13
<div class="d-flex align-items-center">
2-
<h1>List Employees</h1>
4+
<h1>List Customers</h1>
35
<button pButton pRipple
46
class="p-button-lg p-button-rounded p-button-text text-black ms-2"
57
icon="bi bi-plus-square-fill"
6-
pTooltip="Add a new employee"
7-
routerLink="/employee/add">
8+
pTooltip="Add a new customer"
9+
routerLink="/customers/add">
810
</button>
911
</div>
1012
<hr class="w-100">
1113

1214
<p-card>
1315
<div class="row">
1416
<div class="col-12">
15-
<p-table [value]="employees" responsiveLayout="scroll" [lazy]="true" [paginator]="true"
17+
<p-table [value]="customers" responsiveLayout="scroll" [lazy]="true" [paginator]="true"
1618
[showCurrentPageReport]="true" (onLazyLoad)="load($event)" [rows]="10" [(first)]="first"
17-
[totalRecords]="totalRecords" [loading]="isBusy" [rowsPerPageOptions]="[10,25,50]">
19+
[totalRecords]="totalRecords" [loading]="isLoading" [rowsPerPageOptions]="[10,25,50]">
1820
<ng-template pTemplate="caption">
1921
<div class="d-flex">
2022
<span class="p-input-icon-left">
@@ -25,47 +27,37 @@ <h1>List Employees</h1>
2527
</ng-template>
2628
<ng-template pTemplate="header">
2729
<tr>
28-
<th pSortableColumn="firstName">
29-
First Name
30-
<p-sortIcon field="firstName"></p-sortIcon>
31-
</th>
32-
<th pSortableColumn="lastName">
33-
Last Name
34-
<p-sortIcon field="lastName"></p-sortIcon>
35-
</th>
36-
<th pSortableColumn="email">
37-
Email
38-
<p-sortIcon field="email"></p-sortIcon>
30+
<th pSortableColumn="name">
31+
Name
32+
<p-sortIcon field="name"></p-sortIcon>
3933
</th>
40-
<th pSortableColumn="phoneNumber">
41-
Phone Number
42-
<p-sortIcon field="phoneNumber"></p-sortIcon>
43-
</th>
44-
<th>
45-
Role
46-
</th>
47-
<th pSortableColumn="joinedDate">
48-
Joined Date
49-
<p-sortIcon field="joinedDate"></p-sortIcon>
34+
<th class="text-center">
35+
Action
5036
</th>
5137
</tr>
5238
</ng-template>
53-
<ng-template pTemplate="body" let-employee>
39+
<ng-template pTemplate="body" let-customer>
5440
<tr>
5541
<td>
56-
<a [routerLink]="['/employee/edit', employee.id]">
57-
{{employee.firstName}}
58-
</a>
42+
{{customer.name}}
5943
</td>
60-
<td>
61-
<a [routerLink]="['/employee/edit', employee.id]">
62-
{{employee.lastName}}
63-
</a>
44+
<td class="text-center">
45+
<!-- <button pButton
46+
class="p-button-raised"
47+
label="View details"
48+
[routerLink]="['/customer/details', customer.id]">
49+
</button> -->
50+
<button pButton
51+
class="p-button-raised ms-2"
52+
[routerLink]="['/customers/edit', customer.id]">
53+
Edit
54+
</button>
55+
<button pButton
56+
class="p-button-raised p-button-danger ms-2"
57+
(click)="confirmToDelete(customer.id)">
58+
Delete
59+
</button>
6460
</td>
65-
<td>{{employee.email}}</td>
66-
<td>{{employee.phoneNumber}}</td>
67-
<td>{{employee.roles[0]?.displayName}}</td>
68-
<td>{{employee.joinedDate | date:'mediumDate'}}</td>
6961
</tr>
7062
</ng-template>
7163
</p-table>

‎src/Client/Logistics.OfficeApp/src/app/pages/customer/list-customers/list-customers.component.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)