feat: TT-26 detect changes in projects and project types

Author: scastillo-jp

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

@@ -8,7 +8,7 @@
         formControlName="name"
         placeholder="Customer name"
         [class.is-invalid]="customerForm.invalid && customerForm.touched"
-        (input)="onSearchChange($event.target.value)"
+        (input)="onSearchChanges($event.target.value)"
         required
       />
       <span
@@ -24,7 +24,7 @@
         rows="3"
         formControlName="description"
         placeholder="Customer description"
-        (input)="onSearchChange($event.target.value)"
+        (input)="onSearchChanges($event.target.value)"
       ></textarea>
     </div>
       <button type="submit" class="btn btn-primary" [disabled]="!customerForm.valid">Save</button>

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

@@ -24,7 +24,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   customerForm: FormGroup;
   @Input() areTabsActive: boolean;
   @Input() haveChanges: boolean;
-  @Output() ishaveChanges = new EventEmitter<boolean>();
+  @Output() isHaveChanges = new EventEmitter<boolean>();
   @Output() changeValueAreTabsActives = new EventEmitter<boolean>();
   @Output() closeCustomerComponent = new EventEmitter<boolean>();
   customerToEdit: Customer;
@@ -70,7 +70,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
       this.store.dispatch(new LoadProjectTypes(customerData.id));
       this.store.dispatch(new LoadCustomerProjects(customerData.id));
       this.changeValueAreTabsActives.emit(true);
-      this.ishaveChanges.emit(this.haveChanges = false);
+      this.isHaveChanges.emit(this.haveChanges = false);
       this.customerForm.setValue({
         name: customerData.name,
         description: customerData.description,
@@ -98,13 +98,8 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
     this.closeCustomerComponent.emit(false);
   }
 
-  onSearchChange(searchValue: string): void {
-    if (searchValue) {
-      this.haveChanges = true;
-      this.ishaveChanges.emit(this.haveChanges);
-    } else {
-      this.haveChanges = false;
-      this.ishaveChanges.emit(this.haveChanges);
-    }
+  onSearchChanges(searchValue: string): void {
+    return searchValue ? this.isHaveChanges.emit(this.haveChanges = true) :
+      this.isHaveChanges.emit(this.haveChanges = false);
   }
 }

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

@@ -32,7 +32,6 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   changeCustomerSubscription: Subscription;
   showModal = false;
   idToDelete: string;
-  idToEdit: string;
   message: string;
   isLoading$: Observable<boolean>;
 

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

@@ -55,7 +55,7 @@ <h4 class="navbar-brand nav-title">{{customerName}}</h4>
       <app-create-customer
         [areTabsActive]="areTabsActive"
         (changeValueAreTabsActives)="activeTabs($event)"
-        (ishaveChanges)="getChangesInputs($event)"
+        (isHaveChanges)="getChanges($event)"
         (closeCustomerComponent)="closeCustomer($event)"
       ></app-create-customer>
     </div>
@@ -67,7 +67,7 @@ <h4 class="navbar-brand nav-title">{{customerName}}</h4>
       aria-labelledby="projects-type-tab"
     >
       <div class="container">
-        <app-create-project-type></app-create-project-type>
+        <app-create-project-type (isHaveChanges)="getChanges($event)"></app-create-project-type>
         <app-project-type-list></app-project-type-list>
       </div>
     </div>
@@ -79,7 +79,7 @@ <h4 class="navbar-brand nav-title">{{customerName}}</h4>
       aria-labelledby="projects-tab"
     >
       <div class="container mb-1">
-        <app-create-project></app-create-project>
+        <app-create-project (isHaveChanges)="getChanges($event)"></app-create-project>
         <app-project-list></app-project-list>
       </div>
     </div>

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

@@ -44,7 +44,8 @@ export class ManagementCustomerProjectsComponent implements OnInit {
     this.activeTab = activeTab;
   }
 
-  getChangesInputs($haveChanges: boolean) {
+  getChanges($haveChanges: boolean) {
+    console.log('llegando cambios', $haveChanges);
     setTimeout(() => {
       this.haveChanges = $haveChanges;
       this.sendChanges.emit($haveChanges);

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

@@ -1,14 +1,26 @@
 <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"
+      (input)="onSearchChanges($event.target.value)"
+    />
     <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"
-      formControlName="description"></textarea>
+    <textarea class="form-control
+      form-control-sm mt-2"
+      id="descriptionTextArea"
+      rows="3"
+      placeholder="Description"
+      formControlName="description"
+      (input)="onSearchChanges($event.target.value)"
+    ></textarea>
   </div>
   <button type="submit" class="btn btn-primary" [disabled]="!projectTypeForm.valid">
     Save

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
@@ -14,6 +14,8 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./create-project-type.component.scss'],
 })
 export class CreateProjectTypeComponent implements OnInit, OnDestroy {
+  @Input() haveChanges: boolean;
+  @Output() isHaveChanges = new EventEmitter<boolean>();
   projectTypeForm: FormGroup;
   projectTypeToEdit: ProjectType;
   customerId: string;
@@ -63,9 +65,11 @@ export class CreateProjectTypeComponent implements OnInit, OnDestroy {
         id: this.projectTypeToEdit.id,
       };
       this.store.dispatch(new UpdateProjectType(projectType));
+      this.isHaveChanges.emit(this.haveChanges = false);
     } else {
       this.store.dispatch(new CreateProjectType({ ...projectTypeData, customer_id: this.customerId }));
       this.projectTypeForm.get('description').setValue('');
+      this.isHaveChanges.emit(this.haveChanges = false);
     }
   }
 
@@ -76,4 +80,9 @@ export class CreateProjectTypeComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.getCustomerIdSubscription.unsubscribe();
   }
+
+  onSearchChanges(searchValue: string): void {
+    return searchValue ? this.isHaveChanges.emit(this.haveChanges = true) :
+      this.isHaveChanges.emit(this.haveChanges = false);
+  }
 }

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

@@ -6,6 +6,7 @@
       placeholder="Project name"
       formControlName="name"
       [class.is-invalid]="name.invalid && name.touched"
+      (input)="onSearchChanges($event.target.value)"
     />
     <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
       Project name is required.
@@ -16,6 +17,7 @@
     rows="3"
     formControlName="description"
     placeholder="Description"
+    (input)="onSearchChanges($event.target.value)"
   ></textarea>
   <div class="form-group">
     <select class="custom-select custom-select-sm mt-2" formControlName="project_type_id">

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { Store, select } from '@ngrx/store';
 
@@ -16,6 +16,8 @@ import { getCustomerId } from 'src/app/modules/customer-management/store/custome
   styleUrls: ['./create-project.component.scss'],
 })
 export class CreateProjectComponent implements OnInit, OnDestroy {
+  @Input() haveChanges: boolean;
+  @Output() isHaveChanges = new EventEmitter<boolean>();
   projectForm;
   projectToEdit: Project;
   projectsTypes: ProjectType[] = [];
@@ -107,4 +109,9 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
       project_type_id: null,
     });
   }
+
+  onSearchChanges(searchValue: string): void {
+    return searchValue ? this.isHaveChanges.emit(this.haveChanges = true) :
+      this.isHaveChanges.emit(this.haveChanges = false);
+  }
 }

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

@@ -27,5 +27,4 @@ export class CustomerComponent {
   getChangesInputs(event) {
     this.haveChanges = event;
   }
-
 }