Tta 189 create an anchor for the edit a customer action

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

@@ -14,25 +14,24 @@
         <th class="col-2 text-center">Visibility</th>
       </tr>
     </thead>
-    <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
-    <tbody *ngIf="((isLoading$ | async) === false)">
+    <app-loading-bar *ngIf="isLoading$ | async"></app-loading-bar>
+    <tbody *ngIf="(isLoading$ | async) === false">
       <tr class="d-flex" *ngFor="let customer of customers">
         <td class="col-4 text-break">{{ customer.id }}</td>
         <td class="col-4 text-break">{{ customer.name }}</td>
         <td class="col-2 text-center">
           <button
             data-toggle="modal"
             (click)="editCustomer(customer.id)"
-            type="button" data-target="#editModal"
-            class="btn btn-sm btn-primary">
+            type="button"
+            data-target="#editModal"
+            class="btn btn-sm btn-primary"
+          >
             <i class="fa fa-pen fa-xs"></i>
           </button>
         </td>
         <td class="col-2 text-center">
-          <app-dropdown
-              [info] = "customer"
-              (updateInfo) = "switchStatus($event)"
-            > </app-dropdown>
+          <app-dropdown [info]="customer" (updateInfo)="switchStatus($event)"> </app-dropdown>
         </td>
       </tr>
     </tbody>
@@ -62,5 +61,5 @@
   [title]="'Edit Customer'"
   [body]="message"
   (closeModalEvent)="closeModal()"
-  >
+>
 </app-dialog>

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

@@ -84,15 +84,15 @@ describe('CustomerTableListComponent', () => {
 
   it('Onclick Edit, if there are changes, the modal must be presented ', () => {
     component.hasChange = true;
-    const expectMessage = 'Do you have changes in a client, do you want to discard them?';
+    const expectMessage = 'You have changes in a client, do you want to discard them?';
 
     component.editCustomer('1');
 
     expect(component.message).toEqual(expectMessage);
     expect(component.showModal).toBeTrue();
   });
 
-  it('onClick edit, if there are not have changes dispatch SetCustomerToEdit, enable customer form and hidden modal', () => {
+  it('onClick edit, if there are no unsaved changes dispatch SetCustomerToEdit, enable customer form and hide modal', () => {
     component.hasChange = false;
 
     spyOn(store, 'dispatch');

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

@@ -19,6 +19,12 @@ import { ResetProjectToEdit, SetProjectToEdit } from '../../../projects/componen
 import { ResetProjectTypeToEdit, SetProjectTypeToEdit } from '../../../projects-type/store';
 import { UnarchiveCustomer } from '../../../../store/customer-management.actions';
 
+
+export function scrollToCustomerForm(): void {
+  const element = document.getElementById('customerForm');
+  element.scrollIntoView();
+}
+
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
@@ -117,14 +123,15 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   editCustomer(customerId: string) {
     this.idToEdit = customerId;
     if (this.hasChange) {
-      this.message = 'Do you have changes in a client, do you want to discard them?';
+      this.message = 'You have changes in a client, do you want to discard them?';
       this.showModal = true;
     } else {
       this.showCustomerForm = true;
       this.showModal = false;
       this.changeValueShowCustomerForm.emit(this.showCustomerForm);
       this.resetProjectFieldsToEdit();
       this.store.dispatch(new SetCustomerToEdit(customerId));
+      scrollToCustomerForm();
     }
   }
 

src/app/modules/customer-management/pages/customer.component.html

@@ -9,9 +9,14 @@
     [hasChange]="hasChangeComponent"
     (changeValueShowCustomerForm)="showCustomerForm = $event"
   ></app-customer-list>
-  <div class="row" *ngIf="showCustomerForm">
-    <div class="col">
-      <app-management-customer-projects (sendChanges)="getChangesInputs($event)" (closeCustemerForm)="closeCustomerForm($event)"></app-management-customer-projects>
+  <div id="customerForm">
+    <div class="row" *ngIf="showCustomerForm">
+      <div class="col">
+        <app-management-customer-projects
+          (sendChanges)="getChangesInputs($event)"
+          (closeCustemerForm)="closeCustomerForm($event)"
+        ></app-management-customer-projects>
+      </div>
     </div>
   </div>
 </div>

src/app/modules/customer-management/pages/customer.component.ts

@@ -2,6 +2,8 @@ import { Store } from '@ngrx/store';
 import { Customer } from 'src/app/modules/shared/models';
 import { SetCustomerToEdit } from 'src/app/modules/customer-management/store';
 import { Component } from '@angular/core';
+import { scrollToCustomerForm } from '../components/customer-info/components/customer-list/customer-list.component';
+
 
 @Component({
   selector: 'app-customer',
@@ -19,6 +21,7 @@ export class CustomerComponent {
   activateCustomerForm() {
     this.store.dispatch(new SetCustomerToEdit(null));
     this.showCustomerForm = true;
+    scrollToCustomerForm();
   }
 
   closeCustomerForm(event) {
@@ -28,4 +31,5 @@ export class CustomerComponent {
   getChangesInputs(event) {
     this.hasChangeComponent = event;
   }
+
 }