Solicitudes PUT y PATCH

Yo hice esta solución que se actualice tanto en la sección de show cart como en pantalla generar
<updateProduct(){
    const changes: UpdateProduct = {
      title: 'Nuevo title',
      description: 'Esta es un prueba',
    }
    const id = this.productChosen.id;
    this.productsService.update(id,changes).subscribe(data =>{
      const productIndex = this.products.findIndex(
        item =>item.id ==this.productChosen.id
      );
      this.products[productIndex] = data;
      this.productChosen = data;
    })
  }> 

Pasa solucionar el problema de actualizar el producto en detalle solo hay que actualizar la variable productChosen con data.

updateProduct(){
    const changes = {
      title: 'Nuevo titulo klk',
    }
    const id = this.productChosen.id;
    this.productService.update(id,changes)
    .subscribe(data => {
      console.log('Updated:', data);
      const productIndex = this.products.findIndex(item => item.id === this.productChosen.id);
      this.products[productIndex] = data;
      this.productChosen = data;
    })
    
  }

Intenté hacerlo con patch y no funciona, esto es porque en el backend no hay un metodo con el llamado patch(por si a alguien mas le pasa)

Otra forma de crear el DTO para actualizar seria:

interface UpdateProductDTO extends Partial<Omit<Product, 'id', 'category'>> {
	categoryId: number;
}

Si siguieron mi consejo de separar el detalle de producto en un componente nuevo, puedes hacer las siguientes modificaciones para que la información se actualice cuando actualices el producto:

product-detail.component.ts

  @Output() productUpdated = new EventEmitter<Product>();

updateProduct(id: string){
    const changes: UpdateProductDTO = {
      title: 'Producto Editado v2'
    };
    this.productsService.update(id, changes)
    .subscribe(data=>{
      this.product = data;
      this.productUpdated.emit(this.product);
    })
  }

products.component.html

<app-product-detail
            *ngIf="productChosen"
            [product]="productChosen"
            (productUpdated)="onUpdatedProduct($event)"
        ></app-product-detail>

products.component.ts

  onUpdatedProduct(data:Product){
    const productIndex = this.products.findIndex(item => item.id === data.id)
    this.products[productIndex] = data;
  }

Me ha gustado la forma en que se definen las interfaces con el uso de la palabra Partial y de esta manera todos los campos del objeto son opcionales.

Hay otra manera de usar el Partial sin crear una nueva interfaz y es directamente en la funcion de update del product service.

update(dto: Partial <CreateProductDTO>){
    return this.http.patch<Product>(this.apiUrl, dto);
  }

Para que el cambio se vea reflejado en la vista Detalles solo es asignarle a
this.productChosen = data;

No se que rayos hice pero no tuve la necesidad de hacer nada más, el productChosen y el array se actualizaron solos :V

Genial el partial, con respecto a PUT y PATCH yo elegiría PATCH, ya que la mayoría de las veces solo que queremos actualizar un atributo o propiedad en específico, aunque como soy un poco purista jejeje si fue un proyecto personal me daría el tiempo para tener los dos métodos en mi backend 🙂. Para solucionar la actualización del detalle del producto lo mejor sería no realizar un get para ver lo detalles sino compartir los datos de la primera llamada en nuestro componente

Está buenisimo este curso!
Me encantarían más cursos de Nico para Angular 16!

Esta clase es una hermosura! he aprendido detalles MEGA IMPORTANTES con respecto al tema de las interfaces DTO !

Para recordar:

update(id: string, dto: UpdateProductDTO) {
    return this.http.put<Product>(`${this.apiUrl}/${id}`, dto);
    //* PUT: enviar toda la información
    //* PATCH: enviar solo la información modificada
  }

Nota aparte: confunde la pronunciación de put con pot.

mi solución:

  updateProduct() {
    const changes: UpdateProductDTO = {
      title: 'Nuevo Titulo Actualizado'
    }

    const id = this.productChosen.id;
    this.productsService.update(id, changes)
    .subscribe(
      data => {
        const productIndex = this.products.findIndex(p => p.id === id);
        this.products[productIndex] = data;
        this.productChosen = data;
        console.log(data);
    });
  }

Para solucionar actualizar producto

 updateProduct() {
    const changes = {
      title: 'Nuevo Producto',
    }

    const id = this.product.id;
    this.productsService.update(id, changes).subscribe(
      (product: Product) => {
        const productId = this.products.findIndex(p => p.id === id);
        this.products[productId] = product;
        this.product = product;
       console.log(product);
    });

  }