feat: Orders module

packages/modules/order/src/lib/components/jss-forms/index.ts

@@ -0,0 +1 @@
+export * from './order.jss-form';

packages/modules/order/src/lib/components/jss-forms/order.jss-form.ts

@@ -0,0 +1,132 @@
+import { Validators } from '@angular/forms';
+
+import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+
+import { IoRestorecommerceOrderOrderState } from '@console-core/graphql';
+import { IOrder } from '@console-core/types';
+
+interface ISchemaOptions {
+  order?: IOrder;
+}
+
+export const buildOrderSchema = (
+  options: ISchemaOptions
+): VCLFormFieldSchemaRoot => {
+  return {
+    type: 'form',
+    fields: [
+      // {
+      //   name: 'orderState',
+      //   label: 'Order state',
+      //   type: 'input',
+      //   ...(options.order
+      //     ? { defaultValue: IoRestorecommerceOrderOrderState.Created }
+      //     : {}),
+      //   validators: [Validators.required],
+      //   params: {},
+      //   hints: [
+      //     {
+      //       type: 'error',
+      //       error: 'required',
+      //       message: 'This field is required.',
+      //     },
+      //   ],
+      // },
+      {
+        name: 'notificationEmail',
+        label: 'Notification email',
+        type: 'input',
+        ...(options.order
+          ? { defaultValue: options.order.notificationEmail }
+          : {}),
+        validators: [Validators.required, Validators.email],
+        params: {},
+        hints: [
+          {
+            type: 'error',
+            error: 'required',
+            message: 'This field is required.',
+          },
+          {
+            type: 'error',
+            error: 'email',
+            message: 'This field should be a valid email address.',
+          },
+        ],
+      },
+      {
+        name: 'orderState',
+        label: 'Order state',
+        type: 'select',
+        // disabled: true,
+        // defaultValue: [IoRestorecommerceOrderOrderState.Created],
+        ...(options.order
+          ? { defaultValue: IoRestorecommerceOrderOrderState.Created }
+          : {}),
+        validators: [Validators.required],
+        params: {
+          placeholder: 'Select order state',
+          selectionMode: 'single',
+          clearable: false,
+          search: false,
+          options: [
+            {
+              label: 'Created',
+              value: IoRestorecommerceOrderOrderState.Created,
+            },
+            {
+              label: 'In process',
+              value: IoRestorecommerceOrderOrderState.InProcess,
+            },
+            {
+              label: 'Submitted',
+              value: IoRestorecommerceOrderOrderState.Submitted,
+            },
+            {
+              label: 'Done',
+              value: IoRestorecommerceOrderOrderState.Done,
+            },
+            {
+              label: 'Invalid',
+              value: IoRestorecommerceOrderOrderState.Invalid,
+            },
+            {
+              label: 'Failed',
+              value: IoRestorecommerceOrderOrderState.Failed,
+            },
+            {
+              label: 'Withdrawn',
+              value: IoRestorecommerceOrderOrderState.Withdrawn,
+            },
+            {
+              label: 'Cancelled',
+              value: IoRestorecommerceOrderOrderState.Cancelled,
+            },
+          ],
+        },
+        hints: [
+          {
+            type: 'error',
+            error: 'required',
+            message: 'This field is required.',
+          },
+        ],
+      },
+      {
+        type: 'buttons',
+        buttons: [
+          {
+            type: 'button',
+            label: 'Cancel',
+            action: 'reset',
+            class: 'transparent',
+          },
+          {
+            type: 'submit',
+            label: 'Save',
+          },
+        ],
+      },
+    ],
+  };
+};

packages/modules/order/src/lib/components/order-create.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { combineLatest } from 'rxjs';
+
+import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+
+import { OrderFacade } from '@console-core/state';
+
+import { buildOrderSchema } from './jss-forms';
+
+@Component({
+  selector: 'app-module-order-create',
+  template: `
+    <ng-container *ngIf="vm$ | async as vm">
+      <div class="mt-2">
+        <rc-crud-create
+          [schema]="schema"
+          [create]="create"
+        />
+      </div>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrderCreateComponent {
+  schema: VCLFormFieldSchemaRoot = buildOrderSchema({});
+  create = this.orderFacade.create;
+
+  readonly vm$ = combineLatest({
+    order: this.orderFacade.selected$,
+  });
+
+  constructor(private readonly orderFacade: OrderFacade) {}
+}

packages/modules/order/src/lib/components/order-edit.component.ts

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { combineLatest } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+
+import { ROUTER } from '@console-core/config';
+import {
+  OrderFacade,
+  RouterFacade,
+  filterEmptyAndNullishAndUndefined,
+} from '@console-core/state';
+
+import { buildOrderSchema } from './jss-forms';
+
+@Component({
+  selector: 'app-module-order-edit',
+  template: `
+    <ng-container *ngIf="vm$ | async as vm">
+      <div class="mt-2">
+        <rc-crud-edit
+          [id]="vm.id"
+          [schema]="schema"
+          [update]="update"
+        />
+      </div>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrderEditComponent {
+  schema!: VCLFormFieldSchemaRoot;
+  update = this.orderFacade.update;
+
+  readonly vm$ = combineLatest({
+    id: this.routerFacade.params$.pipe(
+      map(({ id }) => id),
+      tap((id) => {
+        this.orderFacade.setSelectedId(id);
+      })
+    ),
+    order: this.orderFacade.selected$.pipe(
+      tap((order) => {
+        if (!order) {
+          this.orderFacade.setSelectedId(null);
+          this.router.navigate(
+            ROUTER.pages.main.children.orders.children.index.getLink()
+          );
+        }
+      }),
+      filterEmptyAndNullishAndUndefined(),
+      tap((order) => {
+        this.schema = buildOrderSchema({ order });
+      })
+    ),
+  });
+
+  constructor(
+    private readonly router: Router,
+    private readonly routerFacade: RouterFacade,
+    private readonly orderFacade: OrderFacade
+  ) {}
+}

packages/modules/order/src/lib/components/order-index.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { combineLatest } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+import { ROUTER } from '@console-core/config';
+import {
+  OrderFacade,
+  filterEmptyAndNullishAndUndefined,
+} from '@console-core/state';
+
+@Component({
+  selector: 'app-module-order',
+  template: `
+    <ng-container *ngIf="vm$ | async as vm">
+      <h3>Orders</h3>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrderIndexComponent {
+  readonly vm$ = combineLatest({
+    selectedOrderId: this.orderFacade.selectedId$.pipe(
+      filterEmptyAndNullishAndUndefined(),
+      tap((id) => {
+        this.router.navigate(
+          ROUTER.pages.main.children.orders.children.view.getLink({ id })
+        );
+      })
+    ),
+  });
+
+  constructor(
+    private readonly router: Router,
+    private readonly orderFacade: OrderFacade
+  ) {}
+}

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

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { combineLatest } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+import { ROUTER } from '@console-core/config';
+import {
+  OrderFacade,
+  RouterFacade,
+  filterEmptyAndNullishAndUndefined,
+} from '@console-core/state';
+
+@Component({
+  selector: 'app-module-order-view',
+  template: `
+    <ng-container *ngIf="vm$ | async as vm">
+      {{ vm | json }}
+      <rc-order-view [order]="vm.order" />
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrderViewComponent {
+  readonly vm$ = combineLatest({
+    id: this.routerFacade.params$.pipe(
+      map(({ id }) => id),
+      filterEmptyAndNullishAndUndefined(),
+      tap((id) => {
+        this.orderFacade.setSelectedId(id);
+      })
+    ),
+    order: this.orderFacade.selected$.pipe(
+      tap((order) => {
+        if (!order) {
+          this.orderFacade.setSelectedId(null);
+          this.router.navigate(
+            ROUTER.pages.main.children.orders.children.index.getLink()
+          );
+        }
+      }),
+      filterEmptyAndNullishAndUndefined()
+    ),
+  });
+
+  constructor(
+    private readonly router: Router,
+    private readonly orderFacade: OrderFacade,
+    private readonly routerFacade: RouterFacade
+  ) {}
+}

packages/modules/order/src/lib/components/template/order-template.component.html

@@ -0,0 +1,63 @@
+<rc-crud-main
+  *ngIf="vm$ | async as vm"
+  [feature]="feature"
+  [title]="vm.selectedOrder?.customerOrderNr || feature.name.singular"
+  [id]="vm.selectedOrderId"
+  [total]="vm.dataList.length"
+  [urlSegment]="vm.urlSegment"
+  [triggerRead]="triggerRead"
+  [triggerSelectId]="triggerSelectId"
+  [triggerRemove]="triggerRemove"
+>
+  {{ vm | json }}
+  <ng-container rc-crud-search>
+    <div
+      *ngIf="vm.dataList.length > 0"
+      class="flex"
+    >
+      <rc-searchbar
+        [value]="triggerSearch.value"
+        (search)="onSearch($event)"
+      />
+    </div>
+  </ng-container>
+
+  <ng-container rc-crud-data-list>
+    <ng-container *ngIf="vm.dataList.length > 0; else templateNoRecords">
+      <rc-data-list class="mb-4 pb-2">
+        <rc-data-list-item
+          *ngFor="let item of vm.dataList; trackBy: trackByFn"
+          (click)="triggerSelectId.next(vm.selectedOrderId)"
+          [ngClass]="{ selected: item.id === vm.selectedOrderId }"
+          [routerLink]="feature.links.view(item.id)"
+          role="option"
+        >
+          <rc-data-list-label
+            [innerHTML]="item.customerOrderNr | highlight : triggerSearch.value"
+          />
+          <rc-data-list-sublabel
+            [innerHTML]="item.orderState | highlight : triggerSearch.value"
+          />
+        </rc-data-list-item>
+      </rc-data-list>
+    </ng-container>
+  </ng-container>
+
+  <ng-container rc-crud-router-outlet>
+    <router-outlet />
+  </ng-container>
+
+  <ng-container rc-crud-meta>
+    <rc-meta
+      *ngIf="vm.selectedOrderId"
+      [id]="vm.selectedOrderId"
+      [meta]="vm.selectedOrder?.meta || null"
+    />
+  </ng-container>
+</rc-crud-main>
+
+<ng-template #templateNoRecords>
+  <div class="pt-4">
+    <rc-no-records message="No orders found!" />
+  </div>
+</ng-template>