chore: refactor the edit/add item Order modal

restorecommerce · Sep 1, 2024 · 9def96d · 9def96d
1 parent 716bd97
commit 9def96d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/packages/modules/order/src/lib/components/order-view.component.ts b/packages/modules/order/src/lib/components/order-view.component.ts
@@ -116,6 +116,7 @@ export class OrderViewComponent implements OnInit, OnDestroy {
     this.addItemLayer
       .open({
         data: {
+          title: 'Add item',
           order,
           products,
         },
@@ -147,6 +148,7 @@ export class OrderViewComponent implements OnInit, OnDestroy {
     this.editItemLayer
       .open({
         data: {
+          title: 'Edit item',
           orderItem,
           order,
           products,

diff --git a/packages/modules/order/src/lib/modals/order-item/order-item-form.component.html b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.html
@@ -2,7 +2,7 @@
   [showCloseButton]="true"
   (close)="close()"
 >
-  <vcl-panel-title>Add item</vcl-panel-title>
+  <vcl-panel-title>{{ title }}</vcl-panel-title>
 
   <form
     vclForm
@@ -35,8 +35,8 @@
           <div class="p-1">No Variant found!</div>
         </ng-container>
         <vcl-select-list
+          [disabled]="!!orderItem"
           formControlName="variantId"
-          [disabled]="false"
         >
           @for (variant of variants; track variant.id) {
           <vcl-select-list-item [value]="variant.id">{{

diff --git a/packages/modules/order/src/lib/modals/order-item/order-item-form.component.ts b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.ts
@@ -5,6 +5,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
+import { startWith } from 'rxjs';
 import { SubSink } from 'subsink';
 
 import { ComponentLayerRef } from '@vcl/ng-vcl';
@@ -53,19 +54,25 @@ export class OrderItemFormComponent implements OnInit, OnDestroy {
     this.subscriptions.add(
       this.formGroup
         .get('productId')
-        ?.valueChanges.subscribe((selectedProductId) => {
+        ?.valueChanges.pipe(startWith(this.orderItem?.productId))
+        .subscribe((selectedProductId) => {
           this.variants =
             this.products.find((p) => p.id === selectedProductId)?.product
               .physical?.variants || [];
 
-          this.formGroup.get('variantId')?.reset();
+          //  Always reset for a form that's on create mode.
+          if (!this.orderItem) {
+            this.formGroup.get('variantId')?.reset();
+          }
         })
     );
 
     this.subscriptions.add(
       this.formGroup
         .get('variantId')
-        ?.valueChanges.subscribe((selectedVariantId) => {
+        ?.valueChanges.pipe(startWith(this.orderItem?.variantId))
+        .subscribe((selectedVariantId) => {
+          console.log('selectedVariantId', selectedVariantId);
           const selectedVariant = this.variants.find(
             (item) => item.id === selectedVariantId
           );
@@ -85,6 +92,10 @@ export class OrderItemFormComponent implements OnInit, OnDestroy {
     this.subscriptions.unsubscribe();
   }
 
+  get title(): string {
+    return this.layer.data.title;
+  }
+
   get order(): IOrder {
     return this.layer.data.order;
   }