feat(invoice): implement UI for invoice creation

Author: belsman

packages/core/state/src/lib/+state/invoice/invoice.effects.ts

@@ -22,6 +22,7 @@ import {
 import { ErrorHandlingService, InvoiceService } from '../../services';
 import { AppFacade } from '../app';
 import * as CustomerActions from '../management/customer/customer.actions';
+import * as IamActions from '../management/iam/iam.actions';
 import * as ShopActions from '../management/shop/shop.actions';
 
 import * as invoiceActions from './invoice.actions';
@@ -109,14 +110,13 @@ export class InvoiceEffects {
   preloadOnEdit$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(routerNavigationAction),
-      tap(() => console.log('Here is our edit page router action')),
       map((a) => a.payload.routerState?.url as string),
       filter(isInvoiceEdit),
-      tap(() => console.log('Should be ready to load something...')),
       // eslint-disable-next-line @ngrx/no-multiple-actions-in-effects
       mergeMap(() => [
         CustomerActions.customerReadRequest({ payload: {} }),
         ShopActions.shopReadRequest({ payload: {} }),
+        IamActions.userReadRequest({ payload: {} }),
       ])
     );
   });
@@ -130,8 +130,7 @@ export class InvoiceEffects {
       mergeMap(() => [
         CustomerActions.customerReadRequest({ payload: {} }),
         ShopActions.shopReadRequest({ payload: {} }),
-        // data only the create page needs (e.g. default terms, next invoice number, templates)
-        // InvoiceMetaActions.loadCreationDefaultsIfNeeded(),
+        IamActions.userReadRequest({ payload: {} }),
       ])
     );
   });

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

@@ -1,39 +1,60 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { combineLatest } from 'rxjs';
+import { combineLatest, map, shareReplay } from 'rxjs';
 
 import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 
-import { InvoiceFacade } from '@console-core/state';
+import {
+  CustomerFacade,
+  IamFacade,
+  InvoiceFacade,
+  ShopFacade,
+} from '@console-core/state';
 
 import { buildInvoiceSchema } from '../jss-forms';
 
 @Component({
   selector: 'app-module-invoice-create',
   template: `
-    <ng-container *ngIf="vm$ | async as vm">
-      <div class="mt-2">
-        <rc-crud-create
-          [schema]="schema"
-          [create]="create"
-        />
-      </div>
-    </ng-container>
+    @if (vm$ | async; as vm) {
+    <div class="mt-2">
+      <rc-crud-create
+        [schema]="vm.schema"
+        [create]="create"
+      />
+    </div>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
 export class InvoiceCreateComponent {
-  schema: VCLFormFieldSchemaRoot = buildInvoiceSchema({
-    customers: [],
-    users: [],
-    shops: [],
-  });
+  schema!: VCLFormFieldSchemaRoot;
 
   create = this.invoiceFacade.create;
 
   readonly vm$ = combineLatest({
-    invoice: this.invoiceFacade.selected$,
-  });
+    customers: this.customerFacade.all$,
+    shops: this.shopFacade.all$,
+    users: this.iamFacade.all$,
+  }).pipe(
+    map(({ customers, shops, users }) => {
+      const schema = buildInvoiceSchema({
+        customers,
+        shops,
+        users,
+      });
 
-  constructor(private readonly invoiceFacade: InvoiceFacade) {}
+      return {
+        schema,
+      };
+    }),
+    shareReplay({ bufferSize: 1, refCount: true })
+  );
+
+  constructor(
+    private readonly invoiceFacade: InvoiceFacade,
+    private readonly shopFacade: ShopFacade,
+    private readonly customerFacade: CustomerFacade,
+    private readonly iamFacade: IamFacade
+  ) {}
 }

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

@@ -8,6 +8,7 @@ import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 import { ROUTER } from '@console-core/config';
 import {
   CustomerFacade,
+  IamFacade,
   InvoiceFacade,
   RouterFacade,
   ShopFacade,
@@ -56,13 +57,14 @@ export class InvoiceEditComponent {
     ),
     customers: this.customerFacade.all$,
     shops: this.shopFacade.all$,
+    users: this.iamFacade.all$,
   }).pipe(
-    map(({ id, invoice, customers, shops }) => {
+    map(({ id, invoice, customers, shops, users }) => {
       const schema = buildInvoiceSchema({
         invoice,
         customers,
         shops,
-        users: [],
+        users,
       });
 
       return {
@@ -79,6 +81,7 @@ export class InvoiceEditComponent {
     private readonly routerFacade: RouterFacade,
     private readonly shopFacade: ShopFacade,
     private readonly customerFacade: CustomerFacade,
-    private readonly invoiceFacade: InvoiceFacade
+    private readonly invoiceFacade: InvoiceFacade,
+    private readonly iamFacade: IamFacade
   ) {}
 }