fix: TT-29 Warn-of-unsaved-changes-on-customer-page

Author: jr-98

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html

@@ -1,12 +1,16 @@
 <div class="container">
-  <form style="width: 600px;" [formGroup]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
+  <form
+      style="width: 600px;"
+      [formGroup]="customerForm"
+      (ngSubmit)="onSubmit(customerForm.value)">
       <div class="form-group">
       <input
         class="form-control form-control-sm"
         id="customerName"
         type="text"
         formControlName="name"
         placeholder="Customer name"
+        (keydown)="getStatusCreateCustomerForm()"
         [class.is-invalid]="customerForm.invalid && customerForm.touched"
         required
       />
@@ -23,10 +27,20 @@
         rows="3"
         formControlName="description"
         placeholder="Customer description"
+        (keydown)="getStatusCreateCustomerForm()"
       ></textarea>
     </div>
-      <button type="submit" class="btn btn-primary" [disabled]="!customerForm.valid">Save</button>
-      <button (click)="resetCustomerForm()" id="cancel" type="button" class="btn btn-secondary mb-2 ml-2 mt-2">
+      <button
+        type="submit"
+        class="btn btn-primary"
+        [disabled]="!customerForm.valid">
+        Save
+      </button>
+      <button
+        (click)="resetCustomerForm()"
+        id="cancel"
+        type="button"
+        class="btn btn-secondary mb-2 ml-2 mt-2">
         Cancel
       </button>
   </form>

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts

@@ -27,6 +27,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   @Output() closeCustomerComponent = new EventEmitter<boolean>();
   customerToEdit: Customer;
   editSubscription: Subscription;
+  statusForm = false;
 
   constructor(private formBuilder: FormBuilder, private store: Store<CustomerState>) {
     this.customerForm = this.formBuilder.group({
@@ -94,4 +95,10 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
     this.store.dispatch(new ResetCustomerToEdit());
     this.closeCustomerComponent.emit(false);
   }
+  getStatusCreateCustomerForm(){
+    if (this.customerForm.dirty){
+       this.statusForm = true;
+       console.log(this.statusForm)
+    }
+  }
 }

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -4,8 +4,7 @@
     class="table table-bordered table-striped mb-0"
     datatable
     [dtTrigger]="dtTrigger"
-    [dtOptions]="dtOptions"
-  >
+    [dtOptions]="dtOptions">
     <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col-5 text-center">Customer ID</th>
@@ -20,19 +19,19 @@
         <td class="col-3 text-break">{{ customer.name }}</td>
         <td class="col-4 text-center">
           <button
-            (click)="editCustomer(customer.id)"
+            data-toggle="modal"
+            data-target="#editModal"
+            (click)="openEditModal(customer)"
             type="button"
-            class="btn btn-sm btn-primary"
-          >
+            class="btn btn-sm btn-primary">
             <i class="fa fa-pencil fa-xs"></i>
           </button>
           <button
             data-toggle="modal"
             data-target="#deleteModal"
             (click)="openModal(customer)"
             type="button"
-            class="btn btn-sm btn-danger ml-2"
-          >
+            class="btn btn-sm btn-danger ml-2">
             <i class="fa fa-trash-alt fa-xs"></i>
           </button>
         </td>
@@ -50,6 +49,16 @@
   aria-hidden="true"
   [title]="'Delete Customer'"
   [body]="message"
-  (closeModalEvent)="deleteCustomer()"
->
+  (closeModalEvent)="deleteCustomer()">
+</app-dialog>
+<app-dialog
+  *ngIf="showModal"
+  class="modal fade"
+  id="editModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [title]="'Edit Customer'"
+  [body]="message"
+  (closeModalEvent)="editCustomer()">
 </app-dialog>

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -13,6 +13,7 @@ import {
 } from './../../../../store/customer-management.actions';
 import { ResetProjectToEdit } from '../../../projects/components/store/project.actions';
 import { ResetProjectTypeToEdit } from '../../../projects-type/store';
+import { EntryState } from 'src/app/modules/time-clock/store/entry.reducer';
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
@@ -31,6 +32,7 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   changeCustomerSubscription: Subscription;
   showModal = false;
   idToDelete: string;
+  idToEdit: string;
   message: string;
   isLoading$: Observable<boolean>;
 
@@ -76,10 +78,10 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.dtTrigger.unsubscribe();
   }
 
-  editCustomer(customerId: string) {
+  editCustomer() {
     this.showCustomerForm = true;
     this.changeValueShowCustomerForm.emit(this.showCustomerForm);
-    this.store.dispatch(new SetCustomerToEdit(customerId));
+    this.store.dispatch(new SetCustomerToEdit(this.idToEdit));
     this.resetProjectFieldsToEdit();
   }
 
@@ -110,4 +112,13 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.showModal = true;
   }
 
+    openEditModal(item: Customer) {
+      this.idToEdit = item.id;
+    if (this.showCustomerForm === true) {
+      this.message = `The changes will lose. Are you sure you change to customer ${item.name}?`;
+      this.showModal = true;
+    } else {
+      this.editCustomer();
+    }
+  }
 }

src/app/modules/customer-management/components/management-customer-projects/management-customer-projects.component.ts

@@ -2,6 +2,7 @@ import { getCustomerUnderEdition } from './../../store/customer-management.selec
 import { Customer } from 'src/app/modules/shared/models';
 import { Store, select } from '@ngrx/store';
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Form } from '@angular/forms';
 
 @Component({
   selector: 'app-management-customer-projects',
@@ -41,5 +42,4 @@ export class ManagementCustomerProjectsComponent implements OnInit {
   showTab(activeTab: string) {
     this.activeTab = activeTab;
   }
-
 }

src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.html

@@ -1,13 +1,26 @@
-<form style="width: 600px;" [formGroup]="projectTypeForm" (ngSubmit)="onSubmit(projectTypeForm.value)">
+<form
+  style="width: 600px;"
+  [formGroup]="projectTypeForm"
+  (ngSubmit)="onSubmit(projectTypeForm.value)">
   <div class="form-group">
-    <input type="text" class="form-control form-control-sm" id="name" formControlName="name" aria-describedby=""
-      [class.is-invalid]="name.invalid && name.touched" required placeholder="Name" />
+    <input
+      type="text"
+      class="form-control form-control-sm"
+      id="name"
+      formControlName="name"
+      aria-describedby=""
+      [class.is-invalid]="name.invalid && name.touched"
+      required placeholder="Name" />
     <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
       Name is required.
     </div>
   </div>
   <div class="form-group">
-    <textarea class="form-control form-control-sm mt-2" id="descriptionTextArea" rows="3" placeholder="Description"
+    <textarea
+      class="form-control form-control-sm mt-2"
+      id="descriptionTextArea"
+      rows="3"
+      placeholder="Description"
       formControlName="description"></textarea>
   </div>
   <button type="submit" class="btn btn-primary" [disabled]="!projectTypeForm.valid">

src/app/modules/customer-management/components/projects/components/create-project/create-project.component.html

@@ -1,4 +1,7 @@
-<form style="width: 600px;" [formGroup]="projectForm" (ngSubmit)="onSubmit(projectForm.value)">
+<form
+  style="width: 600px;"
+  [formGroup]="projectForm"
+  (ngSubmit)="onSubmit(projectForm.value)">
   <div class="form-group">
     <input
       type="text"
@@ -28,8 +31,7 @@
     type="reset"
     [hidden]="!projectToEdit"
     (click)="cancelButton()"
-    class="btn btn-secondary mb-2 ml-2 mt-2"
-  >
+    class="btn btn-secondary mb-2 ml-2 mt-2">
     Cancel
   </button>
 </form>