From 663c3a5f038306309b5f3aca7c93c089e2aeb27e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= <nmarulo@outlook.com>
Date: Sat, 23 Nov 2024 13:26:29 +0100
Subject: [PATCH 1/6] =?UTF-8?q?Modificado:=20Componente=20header=20-=20Aho?=
 =?UTF-8?q?ra=20se=20debe=20usar=20"content=20header".=20-=20Se=20eliminar?=
 =?UTF-8?q?=C3=A1n=20los=20content=20"left"=20y=20"right".=20Aun=20no=20lo?=
 =?UTF-8?q?=20hago=20hasta=20actualizar=20todas=20las=20p=C3=A1ginas.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout/header/header.component.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
index 901386a..cfebcae 100644
--- a/src/app/layout/header/header.component.html
+++ b/src/app/layout/header/header.component.html
@@ -14,4 +14,7 @@
   <ng-content select="[header-left]"/>
   <ng-content select="[header-right]"/>
 </div>
+<div class="d-flex align-items-center">
+  <ng-content select="[header]"/>
+</div>
 <ng-content/>

From aa61de397f60bff0ad3ecd2bfcfb66ce0a97ceab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= <nmarulo@outlook.com>
Date: Sat, 23 Nov 2024 13:33:18 +0100
Subject: [PATCH 2/6] =?UTF-8?q?Refactorizado:=20P=C3=A1gina=20ver=20lista?=
 =?UTF-8?q?=20-=20Encabezado=20-=20Cambios=20en=20el=20dise=C3=B1o=20del?=
 =?UTF-8?q?=20encabezado.=20Correcciones=20para=20textos=20largos.=20-=20A?=
 =?UTF-8?q?hora=20el=20formulario=20de=20edici=C3=B3n=20se=20tiene=20la=20?=
 =?UTF-8?q?opci=C3=B3n=20de=20cancelar.=20-=20Uso=20del=20nuevo=20"contain?=
 =?UTF-8?q?er=20header".?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../header-shopping-list.component.html       | 57 ++++++++++---------
 .../header-shopping-list.component.ts         | 54 ++++++++++++------
 2 files changed, 69 insertions(+), 42 deletions(-)

diff --git a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html
index 09d2fc8..3023858 100644
--- a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html
+++ b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html
@@ -1,34 +1,39 @@
 <app-header>
-  <ng-container header-left>
-    @if (isEditOrNew) {
-      <form class="flex-grow-1 mr-1">
-        <label class="sr-only"
-               for="name">Nombre</label>
-        <input type="text"
-               class="form-control"
-               [formControl]="nameShoppingListFormControl"
-               placeholder="Nombre de la lista"
-               id="name"
-               name="name">
+  <ng-container header>
+    @if (showEdit()) {
+      <form class="flex-grow-1 mr-1"
+            [formGroup]="shoppingListForm"
+            (submit)="saveShoppingListEvent()">
+        <div class="input-group">
+          <input type="text"
+                 class="form-control"
+                 formControlName="name"
+                 placeholder="Nombre de la lista"
+                 id="name"
+                 name="name">
+          <input type="hidden"
+                 formControlName="id">
+          <label class="sr-only"
+                 for="name">Nombre</label>
+          <div class="input-group-append">
+            <button class="btn btn-success"
+                    type="submit">
+              <i class="fas fa-save w-25px"></i>
+            </button>
+            <button class="btn btn-default"
+                    (click)="cancelEditEvent()"
+                    type="button">
+              <i class="fas fa-times w-25px"></i>
+            </button>
+          </div>
+        </div>
       </form>
     } @else {
-      <h1>{{ nameShoppingListFormControl.value }}</h1>
-    }
-  </ng-container>
-  <ng-container header-right>
-    @if (isEditOrNew) {
-      <button class="btn btn-primary"
-              (click)="saveClickEvent()"
-              type="button">
-        <i class="fas fa-save w-25px"></i>
-        Guardar
-      </button>
-    } @else {
-      <button class="btn btn-primary"
-              (click)="editClickEvent()"
+      <h1 class="text-break">{{ shoppingList().name }}</h1>
+      <button class="btn text-primary text-lg"
+              (click)="editEvent()"
               type="button">
         <i class="fas fa-edit w-25px"></i>
-        Editar
       </button>
     }
   </ng-container>
diff --git a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts
index be5a2ff..f78bb48 100644
--- a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts
+++ b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts
@@ -1,16 +1,15 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {RouterLink} from '@angular/router';
+import {Component, EventEmitter, input, Input, Output, signal} from '@angular/core';
 import {HeaderComponent} from '../../../../layout/header/header.component';
-import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
 import {ButtonModule} from 'primeng/button';
 import {DialogModule} from 'primeng/dialog';
 import {TabViewModule} from 'primeng/tabview';
+import {FindByIdShoppingListRes} from '@app/models/find-by-id-shopping-list-res';
 
 @Component({
   selector: 'app-header-shopping-list',
   standalone: true,
   imports: [
-    RouterLink,
     HeaderComponent,
     ReactiveFormsModule,
     ButtonModule,
@@ -22,22 +21,26 @@ import {TabViewModule} from 'primeng/tabview';
 })
 export class HeaderShoppingListComponent {
 
-  @Output() editEvent = new EventEmitter<void>();
-
   @Output() saveEvent = new EventEmitter<void>();
 
   @Input() isEditOrNew = false;
 
-  @Input({required: true})
-  set nameShoppingList(value: string) {
-    this.nameShoppingListFormControl.setValue(value, {emitEvent: false});
-  };
-
   @Output() nameShoppingListChange = new EventEmitter<string>();
 
   nameShoppingListFormControl = new FormControl('', {nonNullable: true});
 
-  constructor() {
+  shoppingList = input.required<FindByIdShoppingListRes>();
+
+  showEdit = signal<boolean | null>(null);
+
+  @Output() updateShoppingList = new EventEmitter<FindByIdShoppingListRes>();
+
+  shoppingListForm = this.formBuilder.nonNullable.group({
+    name: [''],
+    id: [0]
+  });
+
+  constructor(private formBuilder: FormBuilder) {
     this.nameShoppingListFormControl
         .valueChanges
         .subscribe(value => {
@@ -45,11 +48,30 @@ export class HeaderShoppingListComponent {
         });
   }
 
-  editClickEvent() {
-    this.editEvent.emit();
+  editEvent() {
+    //Comprueba el ID para conservar el valor anterior, en caso de cancelar.
+    if (this.shoppingListForm.value.id != this.shoppingList().id) {
+      this.shoppingListForm.setValue({
+        name: this.shoppingList().name,
+        id: this.shoppingList().id
+      });
+    }
+
+    this.showEdit.set(true);
   }
 
-  saveClickEvent() {
-    this.saveEvent.emit();
+  cancelEditEvent() {
+    this.showEdit.set(false);
+  }
+
+  saveShoppingListEvent() {
+    const response: FindByIdShoppingListRes = {
+      ...this.shoppingList(),
+      name: this.shoppingListForm.value.name!
+    };
+
+    this.updateShoppingList.emit(response);
+    this.showEdit.set(null);
   }
+  
 }

From 4a76782081c59bbc0481e04138e7c2e7ccd43760 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= <nmarulo@outlook.com>
Date: Sat, 23 Nov 2024 13:37:08 +0100
Subject: [PATCH 3/6] =?UTF-8?q?Refactorizado:=20P=C3=A1gina=20ver=20lista?=
 =?UTF-8?q?=20-=20Se=20ha=20simplificado=20como=20se=20graba=20y=20actuali?=
 =?UTF-8?q?za=20una=20lista.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shopping-list.component.html              | 20 ++--
 .../shopping-list/shopping-list.component.ts  | 92 ++++++-------------
 2 files changed, 34 insertions(+), 78 deletions(-)

diff --git a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
index 556d258..7a38868 100644
--- a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
+++ b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
@@ -4,23 +4,17 @@
                               (deleteShoppingList)="deleteShoppingListEvent()"/>
   </ng-container>
   <ng-container header>
-    <app-header-shopping-list [isEditOrNew]="isEditOrNew()"
-                              [nameShoppingList]="shoppingListRes().name"
-                              (nameShoppingListChange)="nameShoppingListChangeEvent($event)"
-                              (editEvent)="editEvent()"
-                              (saveEvent)="saveEvent()"/>
+    <app-header-shopping-list [shoppingList]="shoppingListRes()"
+                              (updateShoppingList)="updateShoppingListEvent($event)"/>
   </ng-container>
   <ng-container content>
 
     <app-totals-summary [shoppingList]="shoppingListRes()"/>
-
-    @if (isEditOrNew()) {
-      <a class="btn btn-success btn-block mb-3"
-         (click)="goToAddProductsEvent()">
-        <i class="fas fa-plus w-25px"></i>
-        Agregar producto
-      </a>
-    }
+    <a class="btn btn-success btn-block mb-3"
+       (click)="goToAddProductsEvent()">
+      <i class="fas fa-plus w-25px"></i>
+      Agregar producto
+    </a>
     <form [formGroup]="productShoppingListForm">
       <div class="list-group"
            formArrayName="productsShoppingListForm">
diff --git a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts
index da21e6d..4740ee4 100644
--- a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts
+++ b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts
@@ -76,12 +76,8 @@ export class ShoppingListComponent {
 
   shoppingListRes = signal(this._initShoppingList);
 
-  isEdit = signal(false);
-
   isNew = signal(false);
 
-  isNameChanged = signal(false);
-
   selectedProduct = signal<ProductShoppingList>(this._initProduct);
 
   productShoppingListForm = this.formBuilder.nonNullable.group({
@@ -144,71 +140,10 @@ export class ShoppingListComponent {
     return this.productShoppingListForm.get('productsShoppingListForm') as FormArray;
   }
 
-  isEditOrNew() {
-    return this.isEdit() || this.isNew();
-  }
-
-  editEvent() {
-    this.isEdit.set(!this.isEdit());
-  }
-
   showProductDetailsEvent(product: ProductShoppingList) {
     this.selectedProduct.set(product);
   }
 
-  saveEvent() {
-    this.isEdit.set(!this.isEditOrNew());
-
-    /*
-     * Por el momento el único valor que necesita actualizarse es el nombre.
-     * Si no ha cambiado, no es necesario realizar una petición a la API.
-     */
-    if (this.shoppingListRes().id && this.isNameChanged()) {
-      const request: UpdateShoppingListReq = {
-        name: this.shoppingListRes().name
-      };
-
-      this.isNameChanged.set(false);
-
-      this.shoppingListsService.update(this.shoppingListRes().id, request)
-          .subscribe({
-            error: error => {
-              console.log(error);
-            }
-          });
-    }
-
-    if (this.isNew()) {
-      const request: SaveShoppingListReq = {
-        name: this.shoppingListRes().name
-      };
-
-      this.isNew.set(false);
-
-      this.shoppingListsService.save(request)
-          .pipe(
-            tap(shoppingList => this.shoppingListRes.set({
-              ...this._initShoppingList,
-              id: shoppingList.id,
-              name: shoppingList.name
-            })),
-            tap(shoppingList => {
-              this.router.navigate(['shopping-list', shoppingList.id]);
-            })
-          )
-          .subscribe();
-    }
-  }
-
-  nameShoppingListChangeEvent($event: string) {
-    this.isNameChanged.set(true);
-    this.shoppingListRes.update(value => ({
-        ...value,
-        name: $event
-      })
-    );
-  }
-
   deleteEvent(response: ProductShoppingList) {
     const request: DeleteProductsShoppingListReq = {
       productsId: [
@@ -298,4 +233,31 @@ export class ShoppingListComponent {
         )
         .subscribe();
   }
+
+  updateShoppingListEvent($event: FindByIdShoppingListRes) {
+    this.shoppingListRes.update(value => ({
+        ...value,
+        ...$event
+      })
+    );
+
+    if (this.shoppingListRes().id) {
+      this.updateShoppingList([]);
+
+      return;
+    }
+
+    const request: SaveShoppingListReq = {
+      name: this.shoppingListRes().name
+    };
+
+    this.shoppingListsService.save(request)
+        .pipe(
+          tap(shoppingList => {
+            this.router.navigate(['shopping-list', shoppingList.id])
+                .then();
+          })
+        )
+        .subscribe();
+  }
 }

From b77f9073e0513b898bbff9692f215d32eeccbe28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= <nmarulo@outlook.com>
Date: Sat, 23 Nov 2024 15:32:44 +0100
Subject: [PATCH 4/6] =?UTF-8?q?Refactorizado:=20P=C3=A1gina=20ver=20lista?=
 =?UTF-8?q?=20-=20Encabezado=20-=20Olvide=20borrar=20algunas=20propiedades?=
 =?UTF-8?q?=20que=20ya=20no=20se=20usan.=20-=20Ahora=20cuando=20se=20carga?=
 =?UTF-8?q?=20la=20p=C3=A1gina=20para=20crear=20una=20nueva=20lista,=20sie?=
 =?UTF-8?q?mpre=20se=20mostrara=20el=20input=20para=20ingresar=20el=20nomb?=
 =?UTF-8?q?re=20de=20la=20lista.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../header-shopping-list.component.html       |  2 +-
 .../header-shopping-list.component.ts         | 19 ++++---------------
 .../shopping-list.component.html              |  3 ++-
 3 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html
index 3023858..6032209 100644
--- a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html
+++ b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.html
@@ -1,6 +1,6 @@
 <app-header>
   <ng-container header>
-    @if (showEdit()) {
+    @if (showEdit() || isNew()) {
       <form class="flex-grow-1 mr-1"
             [formGroup]="shoppingListForm"
             (submit)="saveShoppingListEvent()">
diff --git a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts
index f78bb48..5c36353 100644
--- a/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts
+++ b/src/app/modules/shopping-list/layout/header-shopping-list/header-shopping-list.component.ts
@@ -1,6 +1,6 @@
-import {Component, EventEmitter, input, Input, Output, signal} from '@angular/core';
+import {Component, EventEmitter, input, Output, signal} from '@angular/core';
 import {HeaderComponent} from '../../../../layout/header/header.component';
-import {FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {ButtonModule} from 'primeng/button';
 import {DialogModule} from 'primeng/dialog';
 import {TabViewModule} from 'primeng/tabview';
@@ -21,13 +21,7 @@ import {FindByIdShoppingListRes} from '@app/models/find-by-id-shopping-list-res'
 })
 export class HeaderShoppingListComponent {
 
-  @Output() saveEvent = new EventEmitter<void>();
-
-  @Input() isEditOrNew = false;
-
-  @Output() nameShoppingListChange = new EventEmitter<string>();
-
-  nameShoppingListFormControl = new FormControl('', {nonNullable: true});
+  isNew = input<boolean>();
 
   shoppingList = input.required<FindByIdShoppingListRes>();
 
@@ -41,11 +35,6 @@ export class HeaderShoppingListComponent {
   });
 
   constructor(private formBuilder: FormBuilder) {
-    this.nameShoppingListFormControl
-        .valueChanges
-        .subscribe(value => {
-          this.nameShoppingListChange.emit(value);
-        });
   }
 
   editEvent() {
@@ -73,5 +62,5 @@ export class HeaderShoppingListComponent {
     this.updateShoppingList.emit(response);
     this.showEdit.set(null);
   }
-  
+
 }
diff --git a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
index 7a38868..19233ff 100644
--- a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
+++ b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
@@ -5,7 +5,8 @@
   </ng-container>
   <ng-container header>
     <app-header-shopping-list [shoppingList]="shoppingListRes()"
-                              (updateShoppingList)="updateShoppingListEvent($event)"/>
+                              (updateShoppingList)="updateShoppingListEvent($event)"
+                              [isNew]="isNew()"/>
   </ng-container>
   <ng-container content>
 

From bee81a8a14eafbaa27fe972c7c5d5cb52e00d180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= <nmarulo@outlook.com>
Date: Sat, 23 Nov 2024 19:23:33 +0100
Subject: [PATCH 5/6] =?UTF-8?q?P=C3=A1gina=20ver=20lista=20-=20Nuevo=20"pr?=
 =?UTF-8?q?oduct-list.component"=20-=20Ahora=20este=20comente=20es=20el=20?=
 =?UTF-8?q?que=20se=20encargara=20de=20mostrar=20la=20lista=20de=20product?=
 =?UTF-8?q?os=20y=20la=20ventana=20modal.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../product-list/product-list.component.css   |   0
 .../product-list/product-list.component.html  |  62 +++++++++++
 .../product-list/product-list.component.ts    | 103 ++++++++++++++++++
 3 files changed, 165 insertions(+)
 create mode 100644 src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.css
 create mode 100644 src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.html
 create mode 100644 src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.ts

diff --git a/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.css b/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.html b/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.html
new file mode 100644
index 0000000..c643d39
--- /dev/null
+++ b/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.html
@@ -0,0 +1,62 @@
+<form [formGroup]="productListForm">
+  <div class="list-group mb-3"
+       formArrayName="productsForm">
+    @for (response of shoppingList().products; track response.product.id) {
+      <div class="list-group-item pr-0"
+           [formGroupName]="$index">
+        <div class="d-flex">
+          <div class="list-group-item-content flex-grow-1 text-truncate">
+            <div class="d-flex py-2">
+              <p-checkbox styleClass="mr-2"
+                          [binary]="true"
+                          checkboxIcon="fas fa-check"
+                          formControlName="selected"/>
+              <div class="text-truncate">
+                {{ response.product.name }}
+              </div>
+            </div>
+          </div>
+          <div class="dropdown">
+            <button type="button"
+                    data-toggle="dropdown"
+                    aria-expanded="false"
+                    class="btn text-body">
+              <i class="fas fa-ellipsis-v w-25px"></i>
+            </button>
+            <div class="dropdown-menu dropdown-menu-right">
+              <button class="dropdown-item"
+                      data-toggle="modal"
+                      data-target="#product-info-modal"
+                      (click)="showProductDetailsEvent(response)"
+                      type="button">
+                <i class="fas fa-expand-alt w-25px"></i>
+                <span>Ver</span>
+              </button>
+              <button class="dropdown-item"
+                      data-toggle="modal"
+                      data-target="#product-edit-modal"
+                      disabled
+                      type="button">
+                <i class="fas fa-edit w-25px"></i>
+                <span>Editar</span>
+              </button>
+              <button type="button"
+                      (click)="deleteProductEvent(response)"
+                      class="dropdown-item text-danger">
+                <i class="fas fa-trash w-25px"></i>
+                <span>Eliminar</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <input type="hidden"
+               formControlName="productId">
+        <input type="hidden"
+               formControlName="unitTypeId">
+      </div>
+    }
+  </div>
+</form>
+
+<app-product-modal-shopping-list [selectedProduct]="selectedProduct()"
+                                 (deleteProduct)="deleteProductEvent($event)"/>
diff --git a/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.ts b/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.ts
new file mode 100644
index 0000000..1cc5623
--- /dev/null
+++ b/src/app/modules/shopping-list/layout/shopping-list/product-list/product-list.component.ts
@@ -0,0 +1,103 @@
+import {Component, EventEmitter, input, OnChanges, Output, signal, SimpleChanges} from '@angular/core';
+import {FindByIdShoppingListRes, ProductShoppingList} from '@app/models/find-by-id-shopping-list-res';
+import {FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {CheckboxModule} from 'primeng/checkbox';
+import {ProductShoppingList as ProductUpdateShoppingListReq} from '@app/models/update-shopping-list-req';
+import {
+  ProductModalShoppingListComponent
+} from '@app/modules/shopping-list/layout/product-modal-shopping-list/product-modal-shopping-list.component';
+import {tap} from 'rxjs';
+
+@Component({
+  selector: 'app-product-list',
+  standalone: true,
+  imports: [
+    CheckboxModule,
+    ReactiveFormsModule,
+    ProductModalShoppingListComponent
+  ],
+  templateUrl: './product-list.component.html',
+  styleUrl: './product-list.component.css'
+})
+export class ProductListComponent implements OnChanges {
+
+  private readonly _initProduct: ProductShoppingList = {
+    product: {
+      id: 0,
+      name: '',
+      price: 0,
+      imgUrl: ''
+    },
+    unitType: {
+      id: 0,
+      name: ''
+    },
+    unitsPerProduct: 0,
+    totalPrice: 0,
+    selected: false
+  };
+
+  shoppingList = input.required<FindByIdShoppingListRes>();
+
+  selectedProduct = signal<ProductShoppingList>(this._initProduct);
+
+  @Output() updateProduct = new EventEmitter<ProductUpdateShoppingListReq>();
+
+  @Output() deleteProduct = new EventEmitter<ProductShoppingList>();
+
+  productListForm = this.formBuilder.nonNullable.group({
+    productsForm: this.formBuilder.array<FormGroup<{
+      selected: FormControl<boolean>;
+      productId: FormControl<number>;
+      unitTypeId: FormControl<number>;
+    }>>([])
+  });
+
+  constructor(private formBuilder: FormBuilder) {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.shoppingList().id || this.productsForm.length > 0) {
+      return;
+    }
+
+    this.shoppingList()
+        .products
+        .forEach(productShoppingList => {
+          const control = this.formBuilder.nonNullable.group({
+            selected: productShoppingList.selected,
+            productId: productShoppingList.product.id,
+            unitTypeId: productShoppingList.unitType.id
+          });
+
+          control.valueChanges
+                 .pipe(
+                   tap(value => {
+                     const productReq: ProductUpdateShoppingListReq = {
+                       selected: value.selected!,
+                       productId: value.productId!,
+                       unitTypeId: value.unitTypeId!
+                     };
+
+                     this.updateProduct.emit(productReq);
+                   })
+                 )
+                 .subscribe();
+
+          this.productsForm.push(control, {emitEvent: false});
+        });
+  }
+
+  get productsForm() {
+    return this.productListForm.get('productsForm') as FormArray;
+  }
+
+  showProductDetailsEvent(product: ProductShoppingList) {
+    this.selectedProduct.set(product);
+  }
+
+  deleteProductEvent(response: ProductShoppingList) {
+    this.deleteProduct.emit(response);
+  }
+
+}

From 093364ffd013da031850865c00873f00553b91c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Marulanda=20P?= <nmarulo@outlook.com>
Date: Sat, 23 Nov 2024 19:29:50 +0100
Subject: [PATCH 6/6] =?UTF-8?q?P=C3=A1gina=20ver=20lista=20-=20Componente?=
 =?UTF-8?q?=20"product-list.component"=20-=20Refactorizaci=C3=B3n:=20Imple?=
 =?UTF-8?q?mentaci=C3=B3n=20del=20componente=20"product-list.component".?=
 =?UTF-8?q?=20El=20c=C3=B3digo=20eliminado=20se=20ha=20movido=20al=20nuevo?=
 =?UTF-8?q?=20componente.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shopping-list.component.html              | 67 ++-------------
 .../shopping-list/shopping-list.component.ts  | 83 +++----------------
 2 files changed, 16 insertions(+), 134 deletions(-)

diff --git a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
index 19233ff..072ced1 100644
--- a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
+++ b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
@@ -10,73 +10,16 @@
   </ng-container>
   <ng-container content>
 
-    <app-totals-summary [shoppingList]="shoppingListRes()"/>
     <a class="btn btn-success btn-block mb-3"
        (click)="goToAddProductsEvent()">
       <i class="fas fa-plus w-25px"></i>
       Agregar producto
     </a>
-    <form [formGroup]="productShoppingListForm">
-      <div class="list-group"
-           formArrayName="productsShoppingListForm">
-        @for (response of shoppingListRes().products; track response.product.id) {
-          <div class="list-group-item pr-1"
-               [formGroupName]="$index">
-            <div class="d-flex justify-content-between">
-              <div class="list-group-item-content flex-grow-1">
-                <div class="d-flex justify-content-between align-items-center py-2">
-                  <p-checkbox styleClass="mr-2"
-                              [binary]="true"
-                              checkboxIcon="fas fa-check"
-                              formControlName="selected"/>
-                  <div class="flex-grow-1 text-truncate">
-                    {{ response.product.name }}
-                  </div>
-                </div>
-              </div>
-              <div class="dropdown">
-                <button type="button"
-                        data-toggle="dropdown"
-                        aria-expanded="false"
-                        class="btn text-body">
-                  <i class="fas fa-ellipsis-v w-25px"></i>
-                </button>
-                <div class="dropdown-menu dropdown-menu-right">
-                  <button class="dropdown-item"
-                          data-toggle="modal"
-                          data-target="#product-info-modal"
-                          (click)="showProductDetailsEvent(response)"
-                          type="button">
-                    <i class="fas fa-expand-alt w-25px"></i>
-                    <span>Ver</span>
-                  </button>
-                  <button class="dropdown-item"
-                          data-toggle="modal"
-                          data-target="#product-edit-modal"
-                          disabled
-                          type="button">
-                    <i class="fas fa-edit w-25px"></i>
-                    <span>Editar</span>
-                  </button>
-                  <button type="button"
-                          (click)="deleteEvent(response)"
-                          class="dropdown-item text-danger">
-                    <i class="fas fa-trash w-25px"></i>
-                    <span>Eliminar</span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <input type="hidden"
-                   formControlName="productId">
-            <input type="hidden"
-                   formControlName="unitTypeId">
-          </div>
-        }
-      </div>
-    </form>
+    <app-totals-summary [shoppingList]="shoppingListRes()"/>
+
+    <app-product-list [shoppingList]="shoppingListRes()"
+                      (updateProduct)="updateProductEvent($event)"
+                      (deleteProduct)="deleteProductEvent($event)"/>
 
-    <app-product-modal-shopping-list [selectedProduct]="selectedProduct()"
-                                     (deleteProduct)="deleteEvent($event)"/>
   </ng-container>
 </app-page>
diff --git a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts
index 4740ee4..74d3939 100644
--- a/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts
+++ b/src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts
@@ -1,4 +1,4 @@
-import {Component, effect, Input, signal} from '@angular/core';
+import {Component, Input, signal} from '@angular/core';
 import {tap} from 'rxjs';
 import {FindByIdShoppingListRes, ProductShoppingList} from '../../../../models/find-by-id-shopping-list-res';
 import {ShoppingListsService} from '../../../../services/pages/shopping-lists.service';
@@ -6,7 +6,7 @@ import {NavbarShoppingListComponent} from '../../layout/navbar-shopping-list/nav
 import {HeaderShoppingListComponent} from '../../layout/header-shopping-list/header-shopping-list.component';
 import {PageComponent} from '../../../../layout/page/page.component';
 import {CheckboxModule} from 'primeng/checkbox';
-import {FormArray, FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ButtonModule} from 'primeng/button';
 import {ButtonGroupModule} from 'primeng/buttongroup';
 import {DialogModule} from 'primeng/dialog';
@@ -18,12 +18,12 @@ import {
 import {DeleteProductsShoppingListReq} from '../../../../models/delete-products-shopping-list-req';
 import {SaveShoppingListReq} from '../../../../models/save-shopping-list-req';
 import {Router} from '@angular/router';
-import {
-  ProductModalShoppingListComponent
-} from '../../layout/product-modal-shopping-list/product-modal-shopping-list.component';
 import {
   TotalsSummaryComponent
 } from '@app/modules/shopping-list/layout/shopping-list/totals-summary/totals-summary.component';
+import {
+  ProductListComponent
+} from '@app/modules/shopping-list/layout/shopping-list/product-list/product-list.component';
 
 @Component({
   selector: 'app-shopping-list',
@@ -39,8 +39,8 @@ import {
     DialogModule,
     ImageModule,
     ReactiveFormsModule,
-    ProductModalShoppingListComponent,
-    TotalsSummaryComponent
+    TotalsSummaryComponent,
+    ProductListComponent
   ],
   templateUrl: './shopping-list.component.html',
   styleUrl: './shopping-list.component.css'
@@ -58,36 +58,10 @@ export class ShoppingListComponent {
     products: []
   };
 
-  private readonly _initProduct: ProductShoppingList = {
-    product: {
-      id: 0,
-      name: '',
-      price: 0,
-      imgUrl: ''
-    },
-    unitType: {
-      id: 0,
-      name: ''
-    },
-    unitsPerProduct: 0,
-    totalPrice: 0,
-    selected: false
-  };
-
   shoppingListRes = signal(this._initShoppingList);
 
   isNew = signal(false);
 
-  selectedProduct = signal<ProductShoppingList>(this._initProduct);
-
-  productShoppingListForm = this.formBuilder.nonNullable.group({
-    productsShoppingListForm: this.formBuilder.array<FormGroup<{
-      selected: FormControl<boolean>;
-      productId: FormControl<number>;
-      unitTypeId: FormControl<number>;
-    }>>([])
-  });
-
   @Input()
   set id(id: number) {
     if (id) {
@@ -103,48 +77,11 @@ export class ShoppingListComponent {
 
   constructor(
     private shoppingListsService: ShoppingListsService,
-    private formBuilder: FormBuilder,
     private router: Router
   ) {
-    effect(() => {
-      this.shoppingListRes()
-          .products
-          .forEach(productShoppingList => {
-            const control = this.formBuilder.nonNullable.group({
-              selected: productShoppingList.selected,
-              productId: productShoppingList.product.id,
-              unitTypeId: productShoppingList.unitType.id
-            });
-
-            control.valueChanges
-                   .pipe(
-                     tap(value => {
-                       const productReq: ProductUpdateShoppingListReq = {
-                         selected: value.selected!,
-                         productId: value.productId!,
-                         unitTypeId: value.unitTypeId!
-                       };
-
-                       this.updateShoppingListRes(productReq);
-                       this.updateShoppingList([productReq]);
-                     })
-                   )
-                   .subscribe();
-
-            this.productsShoppingListForm.push(control, {emitEvent: false});
-          });
-    });
-  }
-
-  get productsShoppingListForm() {
-    return this.productShoppingListForm.get('productsShoppingListForm') as FormArray;
-  }
-
-  showProductDetailsEvent(product: ProductShoppingList) {
-    this.selectedProduct.set(product);
   }
 
-  deleteEvent(response: ProductShoppingList) {
+  deleteProductEvent(response: ProductShoppingList) {
     const request: DeleteProductsShoppingListReq = {
       productsId: [
         response.product.id
@@ -173,7 +110,7 @@ export class ShoppingListComponent {
         .subscribe();
   }
 
-  private updateShoppingListRes(productReq: ProductUpdateShoppingListReq) {
+  updateProductEvent(productReq: ProductUpdateShoppingListReq) {
     this.shoppingListRes.update(value => {
       const products = value.products
                             .map(product => {
@@ -198,6 +135,8 @@ export class ShoppingListComponent {
         products
       };
     });
+
+    this.updateShoppingList([productReq]);
   }
 
   goToAddProductsEvent() {