implemented salary UI, added validation-summary component

suxrobGM · Oct 19, 2023 · 7ce6df6 · 7ce6df6
1 parent 9177b1d
commit 7ce6df6
Show file tree

Hide file tree

Showing 36 changed files with 391 additions and 121 deletions.
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/enums/enumLike.ts b/src/Client/Logistics.OfficeApp/src/app/core/enums/enumLike.ts
@@ -1,5 +1,5 @@
 export interface EnumValue {
-  value: string;
+  value: string | number;
   description: string;
 }
 
@@ -16,7 +16,7 @@ export function convertEnumToArray(enumLike: EnumLike): EnumValue[] {
   });
 }
 
-export function getEnumDescription(enumLike: EnumLike, enumValue: string): string {
+export function getEnumDescription(enumLike: EnumLike, enumValue: string | number): string {
   const enumItem = Object.values(enumLike).find(i => i.value === enumValue);
   return enumItem ? enumItem.description : 'Description not found';
 }

diff --git a/src/Client/Logistics.OfficeApp/src/app/core/enums/index.ts b/src/Client/Logistics.OfficeApp/src/app/core/enums/index.ts
@@ -5,3 +5,4 @@ export * from './paymentStatus';
 export * from './loadStatus';
 export * from './userRole';
 export * from './permissions';
+export * from './salaryType';
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/enums/loadStatus.ts b/src/Client/Logistics.OfficeApp/src/app/core/enums/loadStatus.ts
@@ -7,16 +7,7 @@ export enum LoadStatus {
 }
 
 export const LoadStatusEnum: EnumLike = {
-  Dispatched: {
-    value: '0',
-    description: 'Dispatched',
-  },
-  PickedUp: {
-    value: '1',
-    description: 'Picked Up',
-  },
-  Delivered: {
-    value: '2',
-    description: 'Delivered',
-  },
+  Dispatched: {value: 0, description: 'Dispatched'},
+  PickedUp: {value: 1, description: 'Picked Up'},
+  Delivered: {value: 2, description: 'Delivered'},
 };
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/enums/paymentFor.ts b/src/Client/Logistics.OfficeApp/src/app/core/enums/paymentFor.ts
@@ -8,8 +8,8 @@ export enum PaymentFor {
 }
 
 export const PaymentForEnum: EnumLike = {
-  Payroll: {value: '0', description: 'Payroll'},
-  Subscription: {value: '1', description: 'Subscription'},
-  Invoice: {value: '2', description: 'Invoice'},
-  Other: {value: '3', description: 'Other'}
+  Payroll: {value: 0, description: 'Payroll'},
+  Subscription: {value: 1, description: 'Subscription'},
+  Invoice: {value: 2, description: 'Invoice'},
+  Other: {value: 3, description: 'Other'}
 };
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/enums/paymentMethod.ts b/src/Client/Logistics.OfficeApp/src/app/core/enums/paymentMethod.ts
@@ -7,7 +7,7 @@ export enum PaymentMethod {
 }
 
 export const PaymentMethodEnum: EnumLike = {
-  BankAccount: {value: '0', description: 'Bank Account'},
-  CreditCard: {value: '1', description: 'Credit Card'},
-  Cash: {value: '2', description: 'Cash'}
+  BankAccount: {value: 0, description: 'Bank Account'},
+  CreditCard: {value: 1, description: 'Credit Card'},
+  Cash: {value: 2, description: 'Cash'}
 };
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/enums/paymentStatus.ts b/src/Client/Logistics.OfficeApp/src/app/core/enums/paymentStatus.ts
@@ -6,6 +6,6 @@ export enum PaymentStatus {
 }
 
 export const PaymentStatusEnum: EnumLike = {
-  Pending: {value: '0', description: 'Super Admin'},
-  Paid: {value: '1', description: 'Admin'}
+  Pending: {value: 0, description: 'Super Admin'},
+  Paid: {value: 1, description: 'Admin'}
 };
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/enums/salaryType.ts b/src/Client/Logistics.OfficeApp/src/app/core/enums/salaryType.ts
@@ -0,0 +1,15 @@
+import {EnumLike} from './enumLike';
+
+export enum SalaryType {
+  None,
+  Monthly,
+  Weekly,
+  ShareOfGross,
+}
+
+export const SalaryTypeEnum: EnumLike = {
+  None: {value: 0, description: 'None'},
+  Monthly: {value: 1, description: 'Monthly'},
+  Weekly: {value: 2, description: 'Weekly'},
+  ShareOfGross: {value: 3, description: 'Share of gross'},
+};
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/models/createEmployee.ts b/src/Client/Logistics.OfficeApp/src/app/core/models/createEmployee.ts
@@ -1,4 +1,8 @@
+import {SalaryType} from '@core/enums';
+
 export interface CreateEmployee {
   userId: string;
-  role: string;
+  role?: string;
+  salary: number;
+  salaryType: SalaryType;
 }
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/models/employee.ts b/src/Client/Logistics.OfficeApp/src/app/core/models/employee.ts
@@ -1,3 +1,4 @@
+import {SalaryType} from '@core/enums';
 import {Role} from './role';
 
 export interface Employee {
@@ -11,4 +12,6 @@ export interface Employee {
   joinedDate: Date;
   truckNumber?: string;
   truckId?: string;
+  salary?: number;
+  salaryType?: SalaryType;
 }
diff --git a/src/Client/Logistics.OfficeApp/src/app/core/models/updateEmployee.ts b/src/Client/Logistics.OfficeApp/src/app/core/models/updateEmployee.ts
@@ -1,4 +1,8 @@
+import {SalaryType} from '@core/enums';
+
 export interface UpdateEmployee {
   userId: string;
-  role: string;
+  role?: string;
+  salary?: number;
+  salaryType?: SalaryType;
 }
diff --git a/...lient/Logistics.OfficeApp/src/app/pages/employee/add-employee/add-employee.component.html b/...lient/Logistics.OfficeApp/src/app/pages/employee/add-employee/add-employee.component.html
@@ -6,7 +6,7 @@ <h1 class="text-center">Add a new employee</h1>
 <div class="row justify-content-center">
   <div class="col-12 col-md-6">
     <p-card>
-      <p-progressSpinner *ngIf="isBusy"></p-progressSpinner>
+      <p-progressSpinner *ngIf="isLoading"></p-progressSpinner>
 
       <form [formGroup]="form" (ngSubmit)="submit()">
         <div class="mb-3">
@@ -16,6 +16,16 @@ <h1 class="text-center">Add a new employee</h1>
             (completeMethod)="searchUser($event)">
           </p-autoComplete>
         </div>
+        <div class="mb-3">
+          <label for="salaryType" class="form-label">Salary Type</label>
+          <p-dropdown formControlName="salaryType" styleClass="w-100" [options]="salaryTypes" 
+            optionValue="name" optionLabel="description">
+          </p-dropdown>
+        </div>
+        <div class="mb-3">
+          <label for="salary" class="form-label">Salary</label>
+          <input name="salary" formControlName="salary" class="form-control" />
+        </div>
         <div class="mb-3">
           <label for="role" class="form-label">Role</label>
           <p-dropdown formControlName="role" styleClass="w-100" [options]="roles" 
@@ -28,7 +38,7 @@ <h1 class="text-center">Add a new employee</h1>
             type="submit"
             class="p-button-raised mt-3"
             icon="bi bi-pencil-square"
-            [disabled]="isBusy"
+            [disabled]="isLoading"
             label="Add">
           </button>
           <button pButton 

diff --git a/src/Client/Logistics.OfficeApp/src/app/pages/employee/add-employee/add-employee.component.ts b/src/Client/Logistics.OfficeApp/src/app/pages/employee/add-employee/add-employee.component.ts
@@ -9,6 +9,7 @@ import {ProgressSpinnerModule} from 'primeng/progressspinner';
 import {CardModule} from 'primeng/card';
 import {ConfirmDialogModule} from 'primeng/confirmdialog';
 import {ToastModule} from 'primeng/toast';
+import {EnumValue, SalaryType, SalaryTypeEnum, convertEnumToArray} from '@core/enums';
 import {CreateEmployee, Role, User} from '@core/models';
 import {ApiService, ToastService} from '@core/services';
 import {UserService} from '../services';
@@ -39,9 +40,10 @@ import {UserService} from '../services';
 })
 export class AddEmployeeComponent implements OnInit {
   public suggestedUsers: User[];
-  public form: FormGroup;
+  public form: FormGroup<CreateEmployeeForm>;
   public roles: Role[];
-  public isBusy: boolean;
+  public salaryTypes: EnumValue[];
+  public isLoading: boolean;
 
   constructor(
     private apiService: ApiService,
@@ -50,11 +52,14 @@ export class AddEmployeeComponent implements OnInit {
   {
     this.suggestedUsers = [];
     this.roles = [];
-    this.isBusy = false;
+    this.isLoading = false;
+    this.salaryTypes = convertEnumToArray(SalaryTypeEnum);
 
-    this.form = new FormGroup({
-      user: new FormControl('', Validators.required),
-      role: new FormControl('', Validators.required),
+    this.form = new FormGroup<CreateEmployeeForm>({
+      user: new FormControl(null, {validators: Validators.required}),
+      role: new FormControl(null, {validators: Validators.required}),
+      salary: new FormControl<number>(0, {validators: Validators.required, nonNullable: true}),
+      salaryType: new FormControl<SalaryType>(SalaryType.None, {validators: Validators.required, nonNullable: true})
     });
   }
 
@@ -86,29 +91,38 @@ export class AddEmployeeComponent implements OnInit {
 
     const newEmployee: CreateEmployee = {
       userId: user.id,
-      role: this.form.value.role,
+      role: this.form.value.role?.name,
+      salary: this.form.value.salary ?? 0,
+      salaryType: this.form.value.salaryType ?? SalaryType.None,
     };
 
-    this.isBusy = true;
+    this.isLoading = true;
     this.apiService.createEmployee(newEmployee).subscribe((result) => {
       if (result.isSuccess) {
         this.toastService.showSuccess('New employee has been added successfully');
         this.form.reset();
       }
 
-      this.isBusy = false;
+      this.isLoading = false;
     });
   }
 
   private fetchRoles() {
-    this.isBusy = true;
+    this.isLoading = true;
 
     this.userService.fetchRoles().subscribe((roles) => {
       if (roles) {
         this.roles = roles;
       }
 
-      this.isBusy = false;
+      this.isLoading = false;
     });
   }
 }
+
+interface CreateEmployeeForm {
+  user: FormControl<User | null>;
+  role: FormControl<Role | null>;
+  salary: FormControl<number>;
+  salaryType: FormControl<SalaryType>;
+}
diff --git a/...ent/Logistics.OfficeApp/src/app/pages/employee/edit-employee/edit-employee.component.html b/...ent/Logistics.OfficeApp/src/app/pages/employee/edit-employee/edit-employee.component.html
@@ -9,45 +9,77 @@ <h1 class="text-center">Edit Employee</h1>
     <p-card>
       <p-progressSpinner *ngIf="isLoading"></p-progressSpinner>
 
-      <div class="mb-3">
-        <label for="email" class="form-label">Email</label>
-        <input id="email" type="text" class="form-control" [disabled]="true" [value]="employee?.email" />
-      </div>
-      <div class="mb-3">
-        <label for="firstName" class="form-label">First name</label>
-        <input id="firstName" type="text" class="form-control" [disabled]="true" [value]="employee?.firstName" />
-      </div>
-      <div class="mb-3">
-        <label for="lastName" class="form-label">Last name</label>
-        <input id="lastName" type="text" class="form-control" [disabled]="true" [value]="employee?.lastName" />
-      </div>
-      <div class="mb-3">
-        <label for="roleName" class="form-label">Role</label>
-        <div class="input-group">
-          <input id="roleName" type="text" class="form-control" [disabled]="true" [value]="getEmployeeRoleNames()" />
-          <button pButton class="p-button-raised" type="button" (click)="openUpdateDialog()" [disabled]="!canChangeRole">
-            Change
-          </button>
+      <form [formGroup]="form" (ngSubmit)="updateEmployee()">
+        <app-validation-summary [form]="form"></app-validation-summary>
+        <div class="mb-3">
+          <label for="email" class="form-label">Email</label>
+          <input id="email" type="text" class="form-control" [disabled]="true" [value]="employee?.email" />
+        </div>
+        <div class="mb-3">
+          <label for="firstName" class="form-label">First name</label>
+          <input id="firstName" type="text" class="form-control" [disabled]="true" [value]="employee?.firstName" />
+        </div>
+        <div class="mb-3">
+          <label for="lastName" class="form-label">Last name</label>
+          <input id="lastName" type="text" class="form-control" [disabled]="true" [value]="employee?.lastName" />
         </div>
-      </div>
+        <div class="mb-3">
+          <label for="salaryType" class="form-label">Salary Type</label>
+          <p-dropdown formControlName="salaryType" styleClass="w-100" [options]="salaryTypes" 
+            optionValue="value" optionLabel="description">
+          </p-dropdown>
+        </div>
+        <div class="mb-3">
+          <label for="salary" class="form-label">Salary</label>
+          <div class="input-group" *ngIf="isShareOfGrossSalary() else fixedSalaryInput">
+            <span class="input-group-text">%</span>
+            <input id="salary" formControlName="salary" type="number" class="form-control" [min]="0" [max]="100" />
+          </div>
+
+          <ng-template #fixedSalaryInput>
+            <div class="input-group">
+              <span class="input-group-text">$$</span>
+              <input id="salary" formControlName="salary" type="number" class="form-control" [min]="0" />
+            </div>
+          </ng-template>
 
-      <div>
-        <button pButton 
-          type="button"
-          class="p-button-raised p-button-danger mt-3"
-          icon="bi bi bi-trash"
-          label="Delete"
-          [disabled]="isLoading"
-          (click)="confirmToDelete()">
-        </button>
-        <button pButton 
-          type="button"
-          class="p-button-raised mt-3 ms-2"
-          icon="bi bi-arrow-left-square"
-          routerLink="/employees"
-          label="Back to list">
-        </button>
-      </div>
+        </div>
+        <div class="mb-3">
+          <label for="roleName" class="form-label">Role</label>
+          <div class="input-group">
+            <input id="roleName" type="text" class="form-control" [disabled]="true" [value]="getEmployeeRoleNames()" />
+            <button pButton class="p-button-raised" type="button" (click)="openUpdateDialog()" [disabled]="!canChangeRole">
+              Change
+            </button>
+          </div>
+        </div>
+
+        <div>
+          <button pButton 
+            type="submit"
+            class="p-button-raised mt-3"
+            icon="bi bi-pencil-square"
+            [disabled]="isLoading"
+            label="Save">
+          </button>
+          <button pButton 
+            type="button"
+            class="p-button-raised p-button-danger mt-3"
+            icon="bi bi bi-trash"
+            [disabled]="isLoading"
+            (click)="confirmToDelete()">
+            Delete
+          </button>
+          <button pButton 
+            type="button"
+            class="p-button-raised mt-3 ms-2"
+            icon="bi bi-arrow-left-square"
+            routerLink="/employees">
+            Back to list
+          </button>
+        </div>
+      </form>
+
     </p-card>
   </div>
 </div>