noworking commit

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); scrollToCustomerForm()"
+            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 hidden modal', () => {
     component.hasChange = false;
 
     spyOn(store, 'dispatch');
@@ -104,6 +104,17 @@ describe('CustomerTableListComponent', () => {
     expect(component.showModal).toBeFalse();
   });
 
+  it('onClick edit, if there are no unsaved changes customer edit form should be visible', () => {
+    component.hasChange = false;
+
+    spyOn(store, 'dispatch');
+
+    component.editCustomer('1');
+    const bottomElement = document.getElementById("bottom");
+    expect(bottomElement).toBeTrue();
+
+  });
+
   it('onClick edit, dispatch clean Forms in project and project type', () => {
     spyOn(store, 'dispatch');
 

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

@@ -117,14 +117,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));
+
     }
   }
 
@@ -199,4 +200,43 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.store.dispatch(new UnarchiveCustomer(this.idToDelete, this.changeOppositeStatus(this.statusToEdit)));
   }
 
+  scrollToCustomerForm(): void {
+    /* Makes the editCustomer form visible */
+    const element = document.getElementById("bottom");
+    element.scrollIntoView();
+  }
+
+
+  isVisible( elm ) {
+    /* Check if an element is visible on the screen */
+    const vpH = $(window).height(); // Viewport Height
+    const st = $(window).scrollTop(); // Scroll Top
+    const y = $(elm).offset().top;
+    const elementHeight = $(elm).height();
+    console.log(vpH, st, y, elementHeight);
+
+    return ((y < (vpH + st)) && (y > (st - elementHeight)));
+  }
+
+  waitForForm() {
+    const selector = "customerFormDiv";
+    return new Promise(resolve => {
+      if (document.querySelector(selector)) {
+        return resolve(document.querySelector(selector));
+      }
+
+      const observer = new MutationObserver(mutations => {
+        if (document.querySelector(selector)) {
+          resolve(document.querySelector(selector));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    });
+}
+
 }

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(); scrollToCustomerForm()" 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="bottom">
+    <div class="row" *ngIf="showCustomerForm">
+      <div class="col" id="customerFormDiv">
+        <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.spec.ts

@@ -54,4 +54,16 @@ describe('CustomerComponent', () => {
 
     expect(component.hasChangeComponent).toBe(true);
   });
+
+  
+
+  function isVisible( elm ) {
+    /* Check if an element is visible on the screen */
+    const vpH = $(window).height(); // Viewport Height
+    const st = $(window).scrollTop(); // Scroll Top
+    const y = $(elm).offset().top;
+    const elementHeight = $(elm).height();
+
+    return ((y < (vpH + st)) && (y > (st - elementHeight)));
+  }
 });

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

@@ -28,4 +28,22 @@ export class CustomerComponent {
   getChangesInputs(event) {
     this.hasChangeComponent = event;
   }
+
+
+  scrollToCustomerForm(): void {
+    const element = document.getElementById("bottom");
+    element.scrollIntoView();
+    this.isVisible(element);
+  }
+
+
+  isVisible( elm ) {
+    /* Check if an element is visible on the screen */
+    const vpH = $(window).height(); // Viewport Height
+    const st = $(window).scrollTop(); // Scroll Top
+    const y = $(elm).offset().top;
+    const elementHeight = $(elm).height();
+
+    return ((y < (vpH + st)) && (y > (st - elementHeight)));
+  }
 }

webpack.config.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack')
 const { addTailwindPlugin } = require("@ngneat/tailwind");
 const tailwindConfig = require("./tailwind.config.js");
-require('dotenv').config();
+require('dotenv').config({ path: './.dev.env' });
 
 module.exports = (config) => {
   const config_ = {