diff --git a/packages/modules/order/src/lib/components/order-view.component.ts b/packages/modules/order/src/lib/components/order-view.component.ts
index e8a3474e..8acaf6f1 100644
--- a/packages/modules/order/src/lib/components/order-view.component.ts
+++ b/packages/modules/order/src/lib/components/order-view.component.ts
@@ -1,8 +1,15 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ OnDestroy,
+ OnInit,
+} from '@angular/core';
import { Router } from '@angular/router';
import { combineLatest } from 'rxjs';
import { map, tap } from 'rxjs/operators';
+import { LayerRef, LayerService } from '@vcl/ng-vcl';
+
import { ROUTER } from '@console-core/config';
import {
OrderFacade,
@@ -11,19 +18,21 @@ import {
filterEmptyAndNullishAndUndefined,
} from '@console-core/state';
+import { OrderItemFormComponent } from '../modals/order-item/order-item-form.component';
+
@Component({
selector: 'app-module-order-view',
template: `
<ng-container *ngIf="vm$ | async as vm">
<rc-order-view
[order]="vm.order"
- [products]="vm.products"
+ (openAddItemModal)="onAddOrder()"
/>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class OrderViewComponent {
+export class OrderViewComponent implements OnInit, OnDestroy {
readonly vm$ = combineLatest({
id: this.routerFacade.params$.pipe(
map(({ id }) => id),
@@ -47,10 +56,36 @@ export class OrderViewComponent {
products: this.productFacade.all$,
});
+ addItemLayer!: LayerRef;
+
constructor(
private readonly router: Router,
private readonly routerFacade: RouterFacade,
private readonly productFacade: ProductFacade,
- private readonly orderFacade: OrderFacade
+ private readonly orderFacade: OrderFacade,
+ private layerService: LayerService
) {}
+
+ ngOnInit(): void {
+ this.addItemLayer = this.layerService.create(OrderItemFormComponent, {
+ closeOnBackdropClick: false,
+ closeOnEscape: false,
+ });
+ }
+
+ ngOnDestroy() {
+ this.addItemLayer?.destroy();
+ }
+
+ onAddOrder() {
+ this.addItemLayer
+ .open({
+ data: {
+ products: [], //this.products,
+ },
+ })
+ .subscribe((result) => {
+ console.log('Result: ' + result?.value);
+ });
+ }
}
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.html b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.html
similarity index 88%
rename from packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.html
rename to packages/modules/order/src/lib/modals/order-item/order-item-form.component.html
index 1a9fa0e4..ef5a4dc6 100644
--- a/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.html
+++ b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.html
@@ -5,8 +5,9 @@
<vcl-panel-title>Add item</vcl-panel-title>
<form
+ vclForm
[formGroup]="formGroup"
- action=""
+ (submit)="onSubmit()"
>
<vcl-form-control-group>
<vcl-label>Select a product</vcl-label>
@@ -89,5 +90,22 @@
</vcl-input-field>
</vcl-form-control-group>
</div>
+
+ <div class="loose-button-group">
+ <button
+ vcl-button
+ type="submit"
+ [disabled]="this.formGroup.invalid"
+ class="emphasized"
+ >
+ Submit
+ </button>
+ <button
+ vcl-button
+ type="button"
+ >
+ Reset
+ </button>
+ </div>
</form>
</vcl-panel-dialog>
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.ts b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.ts
similarity index 92%
rename from packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.ts
rename to packages/modules/order/src/lib/modals/order-item/order-item-form.component.ts
index 69fe8c54..5f5e6b5e 100644
--- a/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.ts
+++ b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.ts
@@ -13,11 +13,11 @@ import { IoRestorecommerceProductPhysicalVariant } from '@console-core/graphql';
import { IProduct } from '@console-core/types';
@Component({
- selector: 'rc-order-item-form',
+ selector: 'app-order-item-form',
templateUrl: './order-item-form.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class RcOrderItemFormComponent implements OnInit, OnDestroy {
+export class OrderItemFormComponent implements OnInit, OnDestroy {
private readonly subscriptions = new SubSink();
variants: IoRestorecommerceProductPhysicalVariant[] = [];
@@ -75,12 +75,10 @@ export class RcOrderItemFormComponent implements OnInit, OnDestroy {
return this.layer.data.products;
}
- onAction(_: string): void {
- // TODO
- }
-
onSubmit(): void {
- // TODO
+ if (this.formGroup.valid) {
+ console.log(this.formGroup.value);
+ }
}
close(value?: string) {
diff --git a/packages/modules/order/src/lib/modules-order.module.ts b/packages/modules/order/src/lib/modules-order.module.ts
index 4b07bd76..0a176114 100644
--- a/packages/modules/order/src/lib/modules-order.module.ts
+++ b/packages/modules/order/src/lib/modules-order.module.ts
@@ -9,6 +9,7 @@ import { OrderIndexComponent } from './components/order-index.component';
import { OrderViewComponent } from './components/order-view.component';
import { OrderTemplateComponent } from './components/template/order-template.component';
import { modulesOrderRoutes } from './lib.routes';
+import { OrderItemFormComponent } from './modals/order-item/order-item-form.component';
@NgModule({
declarations: [
@@ -17,6 +18,7 @@ import { modulesOrderRoutes } from './lib.routes';
OrderCreateComponent,
OrderEditComponent,
OrderViewComponent,
+ OrderItemFormComponent,
],
imports: [
ModulesUiModule.forChild(),
diff --git a/packages/modules/ui/src/lib/components/molecules/index.ts b/packages/modules/ui/src/lib/components/molecules/index.ts
index 7060b274..15dc90fa 100644
--- a/packages/modules/ui/src/lib/components/molecules/index.ts
+++ b/packages/modules/ui/src/lib/components/molecules/index.ts
@@ -6,5 +6,4 @@ export * from './product-variants/product-variant.component';
export * from './product-variants/product-variants.component';
export * from './product-variants/product-images.component';
export * from './order-address/order-address.component';
-export * from './order-items/order-item-form.component';
export * from './shop-info/shop-info.component';
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item.schema.ts b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.schema.ts
deleted file mode 100644
index 6ace3ee5..00000000
--- a/packages/modules/ui/src/lib/components/molecules/order-items/order-item.schema.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Validators } from '@angular/forms';
-
-import { conditional, VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
-
-import { IProduct } from '@console-core/types';
-
-interface ISchemaOptions {
- products: IProduct[];
-}
-
-export const buildOrderItemSchema = (
- options: ISchemaOptions
-): VCLFormFieldSchemaRoot => {
- return {
- type: 'form',
- fields: [
- {
- name: 'productId',
- label: 'Items',
- type: 'select',
- validators: [Validators.required],
- params: {
- placeholder: 'Select an item',
- search: true,
- options: options.products.map((product) => ({
- value: product.id,
- label: product.product.name,
- })),
- },
- },
- {
- name: 'variantId',
- label: 'Item variants',
- type: 'select',
- validators: [Validators.required],
- params: {
- placeholder: 'Select a variant',
- // search: true,
- options: (() => {
- const x = conditional(['productId'], (enabled) => !!enabled.value);
- console.log('xxx', x);
- return [{ value: 'ex', label: 'ddd' }];
- })(),
- },
- visible: conditional(['productId'], (enabled) => !!enabled.value),
- },
- {
- type: 'buttons',
- buttons: [
- {
- type: 'button',
- label: 'Cancel',
- action: 'reset',
- class: 'transparent',
- },
- {
- type: 'submit',
- label: 'Save',
- },
- ],
- },
- ],
- };
-};
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.html b/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.html
index 37dc9a50..14e7cc29 100644
--- a/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.html
+++ b/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.html
@@ -5,7 +5,7 @@
vcl-button
square
class="emphasized-transparent"
- (click)="openAddOrderItemComponent()"
+ (click)="openAddItemModal.emit()"
title="Add order item"
>
<vcl-icon
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.ts b/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.ts
index 0e241e1a..3de01541 100644
--- a/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.ts
+++ b/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.ts
@@ -1,54 +1,21 @@
import {
ChangeDetectionStrategy,
Component,
+ EventEmitter,
Input,
- OnDestroy,
- OnInit,
+ Output,
} from '@angular/core';
-import { LayerRef, LayerService } from '@vcl/ng-vcl';
-
import { IoRestorecommerceOrderItem } from '@console-core/graphql';
-import { IProduct } from '@console-core/types';
-
-import { RcOrderItemFormComponent } from './order-item-form.component';
@Component({
selector: 'rc-order-items',
templateUrl: './order-items.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class RcOrderItemsComponent implements OnInit, OnDestroy {
+export class RcOrderItemsComponent {
@Input({ required: true })
items: IoRestorecommerceOrderItem[] = [];
- @Input({ required: true })
- products: IProduct[] = [];
-
- addItemLayer!: LayerRef;
-
- constructor(private layerService: LayerService) {}
-
- ngOnInit(): void {
- this.addItemLayer = this.layerService.create(RcOrderItemFormComponent, {
- closeOnBackdropClick: false,
- closeOnEscape: false,
- });
- }
-
- ngOnDestroy() {
- this.addItemLayer?.destroy();
- }
-
- openAddOrderItemComponent() {
- this.addItemLayer
- .open({
- data: {
- products: this.products,
- },
- })
- .subscribe((result) => {
- console.log('Result: ' + result?.value);
- });
- }
+ @Output() openAddItemModal = new EventEmitter<void>();
}
diff --git a/packages/modules/ui/src/lib/components/organisms/order/order-view.component.html b/packages/modules/ui/src/lib/components/organisms/order/order-view.component.html
index 18f2226f..88d5199c 100644
--- a/packages/modules/ui/src/lib/components/organisms/order/order-view.component.html
+++ b/packages/modules/ui/src/lib/components/organisms/order/order-view.component.html
@@ -9,8 +9,8 @@
<div class="order-items">
<rc-order-items
- [products]="products"
[items]="order.items || []"
+ (openAddItemModal)="openAddItemModal.emit()"
/>
</div>
diff --git a/packages/modules/ui/src/lib/components/organisms/order/order-view.component.ts b/packages/modules/ui/src/lib/components/organisms/order/order-view.component.ts
index 8fa051ef..099472c3 100644
--- a/packages/modules/ui/src/lib/components/organisms/order/order-view.component.ts
+++ b/packages/modules/ui/src/lib/components/organisms/order/order-view.component.ts
@@ -1,15 +1,17 @@
import {
ChangeDetectionStrategy,
Component,
+ EventEmitter,
Input,
OnInit,
+ Output,
} from '@angular/core';
import {
IoRestorecommerceProductPhysicalVariant,
IoRestorecommerceUserUser,
} from '@console-core/graphql';
-import { IOrder, IProduct } from '@console-core/types';
+import { IOrder } from '@console-core/types';
@Component({
selector: 'rc-order-view',
@@ -18,7 +20,8 @@ import { IOrder, IProduct } from '@console-core/types';
})
export class RcOrderViewComponent implements OnInit {
@Input({ required: true }) order!: IOrder;
- @Input({ required: true }) products!: IProduct[];
+
+ @Output() openAddItemModal = new EventEmitter<void>();
product?: IoRestorecommerceProductPhysicalVariant | null;
customer?: IoRestorecommerceUserUser | null;
diff --git a/packages/modules/ui/src/lib/modules-ui.module.ts b/packages/modules/ui/src/lib/modules-ui.module.ts
index 0f5968b3..c8f4e69b 100644
--- a/packages/modules/ui/src/lib/modules-ui.module.ts
+++ b/packages/modules/ui/src/lib/modules-ui.module.ts
@@ -49,7 +49,6 @@ import {
RcProductVariantComponent,
RcProductVariantsComponent,
RcProductImagesComponent,
- RcOrderItemFormComponent,
} from './components/molecules';
import {
RcAppComponent,
@@ -167,7 +166,6 @@ const molecules = [
RcProductVariantComponent,
RcProductVariantsComponent,
RcProductImagesComponent,
- RcOrderItemFormComponent,
];
const organisms = [
diff --git a/packages/modules/ui/tsconfig.lib.json b/packages/modules/ui/tsconfig.lib.json
index 9b49be75..309cb6fb 100644
--- a/packages/modules/ui/tsconfig.lib.json
+++ b/packages/modules/ui/tsconfig.lib.json
@@ -13,5 +13,8 @@
"jest.config.ts",
"src/**/*.test.ts"
],
- "include": ["src/**/*.ts"]
+ "include": [
+ "src/**/*.ts",
+ "../order/src/lib/modals/order-item/order-item-form.component.ts"
+ ]
}