Feature/new

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/>

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() || isNew()) {
+      <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>

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, Output, signal} from '@angular/core';
 import {HeaderComponent} from '../../../../layout/header/header.component';
-import {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';
+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,34 +21,46 @@ import {TabViewModule} from 'primeng/tabview';
 })
 export class HeaderShoppingListComponent {
 
-  @Output() editEvent = new EventEmitter<void>();
+  isNew = input<boolean>();
 
-  @Output() saveEvent = new EventEmitter<void>();
+  shoppingList = input.required<FindByIdShoppingListRes>();
 
-  @Input() isEditOrNew = false;
+  showEdit = signal<boolean | null>(null);
 
-  @Input({required: true})
-  set nameShoppingList(value: string) {
-    this.nameShoppingListFormControl.setValue(value, {emitEvent: false});
-  };
+  @Output() updateShoppingList = new EventEmitter<FindByIdShoppingListRes>();
 
-  @Output() nameShoppingListChange = new EventEmitter<string>();
+  shoppingListForm = this.formBuilder.nonNullable.group({
+    name: [''],
+    id: [0]
+  });
 
-  nameShoppingListFormControl = new FormControl('', {nonNullable: true});
+  constructor(private formBuilder: FormBuilder) {
+  }
+
+  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
+      });
+    }
 
-  constructor() {
-    this.nameShoppingListFormControl
-        .valueChanges
-        .subscribe(value => {
-          this.nameShoppingListChange.emit(value);
-        });
+    this.showEdit.set(true);
   }
 
-  editClickEvent() {
-    this.editEvent.emit();
+  cancelEditEvent() {
+    this.showEdit.set(false);
   }
 
-  saveClickEvent() {
-    this.saveEvent.emit();
+  saveShoppingListEvent() {
+    const response: FindByIdShoppingListRes = {
+      ...this.shoppingList(),
+      name: this.shoppingListForm.value.name!
+    };
+
+    this.updateShoppingList.emit(response);
+    this.showEdit.set(null);
   }
+
 }

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)"/>

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);
+  }
+
+}