feat: add menu context for product-variant

packages/modules/product/src/lib/components/product-variant-modal.component.ts

@@ -69,8 +69,6 @@ export class ProductVariantEditComponent {
       // REMOVE the field 'offerings'
       delete value.offerings;
 
-
-
       let product: IProduct;
 
       if (this.product.product.physical?.variants) {

packages/modules/product/src/lib/components/product-view.component.ts

@@ -12,6 +12,7 @@ import { SubSink } from 'subsink';
 import { LayerRef, LayerService } from '@vcl/ng-vcl';
 
 import { ROUTER } from '@console-core/config';
+import { IIoRestorecommerceProductPhysicalVariant } from '@console-core/graphql';
 import {
   ProductFacade,
   RouterFacade,
@@ -27,6 +28,7 @@ import { ProductVariantEditComponent } from './product-variant-modal.component';
     <ng-container *ngIf="vm$ | async as vm">
       <rc-product-view
         (addVariant)="onAddVariant(vm.product)"
+        (editVariant)="onEditVariant($event)"
         [product]="vm.product"
       />
     </ng-container>
@@ -88,8 +90,17 @@ export class ProductViewComponent implements OnInit, OnDestroy {
           product,
         },
       })
-      .subscribe((result) => {
-        console.log('Bar component result: ' + result?.value);
-      });
+      .subscribe();
+  }
+
+  onEditVariant(_: IIoRestorecommerceProductPhysicalVariant) {
+    this.subscriptions.sink = this.addVariantLayer
+      .open({
+        data: {
+          title: `Edit product variant`,
+          // product,
+        },
+      })
+      .subscribe();
   }
 }

packages/modules/ui/src/lib/components/molecules/product-variants/product-variant.component.html

@@ -1,8 +1,20 @@
-<div class="row">
-  <div class="flex-12">
-    <h4>
-      {{ variant.name }}
-    </h4>
+<div class="row align-items-center justify-content-between">
+  <h4>
+    {{ variant.name }}
+  </h4>
+  <div #target>
+    <button
+      vcl-button
+      square
+      class="emphasized-transparent"
+      title="Options"
+      (click)="popover.open()"
+    >
+      <vcl-icon
+        class="scale155p"
+        icon="mdi mdi-dots-vertical"
+      />
+    </button>
   </div>
 </div>
 
@@ -28,3 +40,37 @@ <h4>
     </p>
   </div>
 </div>
+
+<ng-template
+  vclPopover
+  #popover="vclPopover"
+  [closeOnOffClick]="true"
+  [target]="target"
+  [positions]="[
+    {
+      originX: 'end',
+      originY: 'bottom',
+      overlayX: 'end',
+      overlayY: 'top'
+    }
+  ]"
+>
+  <div>
+    <vcl-button-group class="vertical">
+      <button
+        vcl-button
+        class="transparent"
+        (click)="editVariant.emit(variant); popover.close()"
+      >
+        Edit
+      </button>
+      <button
+        class="transparent"
+        vcl-button
+        [value]="2"
+      >
+        Delete
+      </button>
+    </vcl-button-group>
+  </div>
+</ng-template>

packages/modules/ui/src/lib/components/molecules/product-variants/product-variant.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+} from '@angular/core';
 
 import { IIoRestorecommerceProductPhysicalVariant } from '@console-core/graphql';
 
@@ -8,6 +15,14 @@ import { IIoRestorecommerceProductPhysicalVariant } from '@console-core/graphql'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RcProductVariantComponent {
+  @HostBinding('class') className = 'w-100p';
+
   @Input({ required: true })
   variant!: IIoRestorecommerceProductPhysicalVariant;
+
+  @Output() editVariant =
+    new EventEmitter<IIoRestorecommerceProductPhysicalVariant>();
+
+  @Output() deleteVariant =
+    new EventEmitter<IIoRestorecommerceProductPhysicalVariant>();
 }

packages/modules/ui/src/lib/components/molecules/product-variants/product-variants.component.html

@@ -22,7 +22,10 @@
       class="row data-list-item product-item"
       *ngFor="let variant of variants"
     >
-      <rc-product-variant [variant]="variant" />
+      <rc-product-variant
+        [variant]="variant"
+        (editVariant)="editVariant.emit($event)"
+      />
     </li>
   </ul>
 </div>

packages/modules/ui/src/lib/components/molecules/product-variants/product-variants.component.ts

@@ -17,4 +17,7 @@ export class RcProductVariantsComponent {
   @Input({ required: true })
   variants!: IIoRestorecommerceProductPhysicalVariant[];
   @Output() addVariant = new EventEmitter<void>();
+
+  @Output() editVariant =
+    new EventEmitter<IIoRestorecommerceProductPhysicalVariant>();
 }

packages/modules/ui/src/lib/components/organisms/product/product-view.component.ts

@@ -6,7 +6,10 @@ import {
   Output,
 } from '@angular/core';
 
-import { IoRestorecommerceProductProduct } from '@console-core/graphql';
+import {
+  IIoRestorecommerceProductPhysicalVariant,
+  IoRestorecommerceProductProduct,
+} from '@console-core/graphql';
 
 @Component({
   selector: 'rc-product-view',
@@ -15,11 +18,14 @@ import { IoRestorecommerceProductProduct } from '@console-core/graphql';
     <rc-product-variants
       [variants]="product.product?.physical?.variants || []"
       (addVariant)="addVariant.emit()"
+      (editVariant)="editVariant.emit($event)"
     />
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RcProductViewComponent {
   @Input({ required: true }) product!: IoRestorecommerceProductProduct;
   @Output() addVariant = new EventEmitter<void>();
+  @Output() editVariant =
+    new EventEmitter<IIoRestorecommerceProductPhysicalVariant>();
 }

packages/modules/ui/src/lib/modules-ui.module.ts

@@ -29,6 +29,7 @@ import {
   VCLDataListModule,
   VCLPanelModule,
   VCLCheckboxModule,
+  VCLButtonGroupModule,
 } from '@vcl/ng-vcl';
 
 import {
@@ -144,6 +145,7 @@ const modules = [
   VCLPanelModule,
   VCLCheckboxModule,
   VCLPanelModule,
+  VCLButtonGroupModule,
 ];
 
 const atoms = [

packages/modules/ui/src/lib/styles/products.scss

@@ -7,6 +7,7 @@
 .product-item {
   border: 1px solid $console-gray-lighter;
   padding: 0 10px;
+  padding-right: 0;
   margin-bottom: 15px;
 }