Skip to content

Commit

Permalink
Página ver lista - Componente "product-list.component"
Browse files Browse the repository at this point in the history 
- Refactorización: Implementación del componente "product-list.component". El código eliminado se ha movido al nuevo componente.
  • Loading branch information
@nmarulo
nmarulo committed Nov 23, 2024
1 parent bee81a8 commit 093364f
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 134 deletions.
67 changes: 5 additions & 62 deletions src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
83 changes: 11 additions & 72 deletions src/app/modules/shopping-list/pages/shopping-list/shopping-list.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
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';
import {NavbarShoppingListComponent} from '../../layout/navbar-shopping-list/navbar-shopping-list.component';
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';
Expand All @@ -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',
Expand All @@ -39,8 +39,8 @@ import {
DialogModule,
ImageModule,
ReactiveFormsModule,
ProductModalShoppingListComponent,
TotalsSummaryComponent
TotalsSummaryComponent,
ProductListComponent
],
templateUrl: './shopping-list.component.html',
styleUrl: './shopping-list.component.css'
Expand All @@ -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) {
Expand All @@ -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
Expand Down Expand Up @@ -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 => {
Expand All @@ -198,6 +135,8 @@ export class ShoppingListComponent {
products
};
});

this.updateShoppingList([productReq]);
}

goToAddProductsEvent() {
Expand Down

0 comments on commit 093364f

Please sign in to comment.