Tta 189 create an anchor for the edit a customer action (#953)

* noworking commit

* refactor: TTA-189 dropped unused function

* refactor: TTA-189 dropped another unused function

* refactor: TTA-189 erased test

Test erased for case being already covered in separate existing test.

* refactor: TTA-189 scrollToCustomerForm

* refactor: TTA-189 scrollToCustomer

Author: mmaquina

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">
+            (click)="editCustomer(customer.id); goToCustomerForm()"
+            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');
@@ -115,7 +115,7 @@ describe('CustomerTableListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new ResetProjectTypeToEdit());
   });
 
-  it('when you click close modal, you should close the modal, discard the current changes and load a new client for edit', () => {
+  it('when you click close modal, modal should close, discard the current changes and load a new client to edit', () => {
     spyOn(component.changeValueShowCustomerForm, 'emit');
     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,7 +123,7 @@ 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;
@@ -199,4 +205,8 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.store.dispatch(new UnarchiveCustomer(this.idToDelete, this.changeOppositeStatus(this.statusToEdit)));
   }
 
+  goToCustomerForm(){
+    scrollToCustomerForm();    
+  }
+
 }

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

@@ -1,17 +1,22 @@
 <div class="container-fluid px-0 full-height">
   <div class="row">
     <div style="padding: 15px;">
-      <button (click)="activateCustomerForm()" class="btn btn-primary">Add new customer</button>
+      <button (click)="activateCustomerForm(); goToCustomerForm()" class="btn btn-primary">Add new customer</button>
     </div>
   </div>
   <app-customer-list
     [showCustomerForm]="showCustomerForm"
     [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',
@@ -28,4 +30,9 @@ export class CustomerComponent {
   getChangesInputs(event) {
     this.hasChangeComponent = event;
   }
+
+  goToCustomerForm(){
+    scrollToCustomerForm();
+  }
+
 }