feat(admin-ui): Add price field on variation dialog modal (#2378)

vendure-ecommerce · Sep 7, 2023 · 5b99bae · 5b99bae
1 parent d752f8d
commit 5b99bae
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 25 deletions.
diff --git a/...src/components/create-product-variant-dialog/create-product-variant-dialog.component.html b/...src/components/create-product-variant-dialog/create-product-variant-dialog.component.html
@@ -4,21 +4,12 @@
 <form [formGroup]="form">
     <div formGroupName="options" class="form-grid">
         <vdr-form-field [label]="optionGroup.name" *ngFor="let optionGroup of product.optionGroups">
-            <ng-select
-                [items]="optionGroup.options"
-                [formControlName]="optionGroup.code"
-                bindLabel="name"
-                bindValue="id"
-                appendTo="body"
-            >
+            <ng-select [items]="optionGroup.options" [formControlName]="optionGroup.code" bindLabel="name"
+                bindValue="id" appendTo="body">
             </ng-select>
         </vdr-form-field>
-        <clr-alert
-            *ngIf="product.optionGroups.length === 0"
-            clrAlertType="warning"
-            [clrAlertClosable]="false"
-            class="form-grid-span"
-        >
+        <clr-alert *ngIf="product.optionGroups.length === 0" clrAlertType="warning" [clrAlertClosable]="false"
+            class="form-grid-span">
             <clr-alert-item>
                 <span class="alert-text">
                     {{ 'catalog.cannot-create-variants-without-options' | translate }}
@@ -31,7 +22,7 @@
             <clr-alert-item>
                 <span class="alert-text">
                     {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{
-                        existingVariant.sku
+                    existingVariant.sku
                     }})
                 </span>
             </clr-alert-item>
@@ -44,16 +35,15 @@
         <vdr-form-field [label]="'catalog.sku' | translate">
             <input type="text" formControlName="sku" />
         </vdr-form-field>
+        <vdr-form-field [label]="'catalog.price' | translate">
+            <vdr-currency-input name="price" [currencyCode]="currencyCode" formControlName="price" />
+        </vdr-form-field>
     </div>
 </form>
 <ng-template vdrDialogButtons>
     <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
-    <button
-        type="submit"
-        (click)="confirm()"
-        class="btn btn-primary"
-        [disabled]="form.invalid || existingVariant || product.optionGroups.length === 0"
-    >
+    <button type="submit" (click)="confirm()" class="btn btn-primary"
+        [disabled]="form.invalid || existingVariant || product.optionGroups.length === 0">
         {{ 'common.confirm' | translate }}
     </button>
-</ng-template>
+</ng-template>
diff --git a/...g/src/components/create-product-variant-dialog/create-product-variant-dialog.component.ts b/...g/src/components/create-product-variant-dialog/create-product-variant-dialog.component.ts
@@ -1,7 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormRecord, Validators } from '@angular/forms';
-import { CreateProductVariantInput, Dialog, GetProductVariantOptionsQuery } from '@vendure/admin-ui/core';
+import { FormBuilder, FormControl, FormGroup, FormRecord, Validators } from '@angular/forms';
+import {
+    CreateProductVariantInput,
+    CurrencyCode,
+    Dialog,
+    GetProductVariantOptionsQuery,
+} from '@vendure/admin-ui/core';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import { combineLatest } from 'rxjs';
 
 @Component({
     selector: 'vdr-create-product-variant-dialog',
@@ -15,13 +21,16 @@ export class CreateProductVariantDialogComponent implements Dialog<CreateProduct
     form = this.formBuilder.group({
         name: ['', Validators.required],
         sku: ['', Validators.required],
+        price: ['', Validators.required],
         options: this.formBuilder.record<string>({}),
     });
     existingVariant: NonNullable<GetProductVariantOptionsQuery['product']>['variants'][number] | undefined;
+    currencyCode: CurrencyCode;
 
     constructor(private formBuilder: FormBuilder) {}
 
     ngOnInit() {
+        this.currencyCode = this.product.variants[0].currencyCode;
         for (const optionGroup of this.product.optionGroups) {
             (this.form.get('options') as FormRecord).addControl(
                 optionGroup.code,
@@ -57,14 +66,16 @@ export class CreateProductVariantDialogComponent implements Dialog<CreateProduct
     }
 
     confirm() {
-        const { name, sku, options } = this.form.value;
-        if (!name || !sku || !options) {
+        const { name, sku, options, price } = this.form.value;
+        if (!name || !sku || !options || !price) {
             return;
         }
+
         const optionIds = Object.values(options).filter(notNullOrUndefined);
         this.resolveWith({
             productId: this.product.id,
             sku,
+            price: Number(price),
             optionIds,
             translations: [
                 {