@smallpearl/ngx-helper 0.33.24 → 0.33.26

package/fesm2022/smallpearl-ngx-helper-mat-entity-crud.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@angular/common/http';
-import { HttpContextToken, HttpParams, HttpContext } from '@angular/common/http';
+import { HttpContextToken, HttpParams, HttpContext, HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, computed, signal, viewChild, ViewContainerRef, Component, ChangeDetectionStrategy, viewChildren, EventEmitter, effect, ContentChildren, Output, ChangeDetectorRef } from '@angular/core';
 import * as i4 from '@angular/common';
@@ -31,6 +31,7 @@ import { Observable, of, Subscription, tap, switchMap, firstValueFrom, map, catc
 import * as i1$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { setServerErrorsAsFormErrors } from '@smallpearl/ngx-helper/forms';
+import { sideloadToComposite } from '@smallpearl/ngx-helper/sideload';
 
 const SP_MAT_ENTITY_CRUD_HTTP_CONTEXT = new HttpContextToken(() => ({
     entityName: '',
@@ -120,6 +121,16 @@ class FormViewHostComponent {
         this.params.set(params);
         this.createClientView();
     }
+    // BEGIN SPMatEntityCrudCreateEditBridge METHODS //
+    getEntityName() {
+        return this.entityCrudComponentBase().getEntityName();
+    }
+    getIdKey() {
+        return this.entityCrudComponentBase().getIdKey();
+    }
+    getEntityUrl(entityId) {
+        return this.entityCrudComponentBase().getEntityUrl(entityId);
+    }
     close(cancel) {
         this.entityCrudComponentBase().closeCreateEdit(cancel);
         // destroy the client's form component
@@ -150,6 +161,10 @@ class FormViewHostComponent {
             ?.update(id, entityValue)
             .pipe(tap(() => this.close(false)));
     }
+    loadEntity(id, params) {
+        return this.entityCrudComponentBase().loadEntity(id, params);
+    }
+    // END SPMatEntityCrudCreateEditBridge METHODS //
     /**
      * Creates the client view provided via template
      */
@@ -184,14 +199,30 @@ class FormViewHostComponent {
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: FormViewHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: FormViewHostComponent, isStandalone: true, selector: "sp-create-edit-entity-host", inputs: { entityCrudComponentBase: { classPropertyName: "entityCrudComponentBase", publicName: "entityCrudComponentBase", isSignal: true, isRequired: true, transformFunction: null }, clientViewTemplate: { classPropertyName: "clientViewTemplate", publicName: "clientViewTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["clientFormContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
-    <div [class]="'sp-mat-crud-form-wrapper ' + entityCrudComponentBase().getFormPaneWrapperClass()"  spHostBusyWheel="formBusyWheel" *transloco="let t">
-      <div [class]="'sp-mat-crud-form-content ' + entityCrudComponentBase().getFormPaneContentClass()">
+    <div
+      [class]="
+        'sp-mat-crud-form-wrapper ' +
+        entityCrudComponentBase().getFormPaneWrapperClass()
+      "
+      spHostBusyWheel="formBusyWheel"
+      *transloco="let t"
+    >
+      <div
+        [class]="
+          'sp-mat-crud-form-content ' +
+          entityCrudComponentBase().getFormPaneContentClass()
+        "
+      >
         <div class="create-edit-topbar">
           <div class="title">
             @if (title()) {
-              {{ title() | async }}
+            {{ title() | async }}
             } @else {
-              {{ t(('spMatEntityCrud.' + (entity() ? 'editItem' : 'newItem')), { item: (this._itemLabel() | async )}) }}
+            {{
+              t('spMatEntityCrud.' + (entity() ? 'editItem' : 'newItem'), {
+                item: (this._itemLabel() | async)
+              })
+            }}
             }
           </div>
           <div class="spacer"></div>
@@ -217,14 +248,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                         TranslocoModule,
                         SPMatHostBusyWheelDirective,
                     ], selector: 'sp-create-edit-entity-host', template: `
-    <div [class]="'sp-mat-crud-form-wrapper ' + entityCrudComponentBase().getFormPaneWrapperClass()"  spHostBusyWheel="formBusyWheel" *transloco="let t">
-      <div [class]="'sp-mat-crud-form-content ' + entityCrudComponentBase().getFormPaneContentClass()">
+    <div
+      [class]="
+        'sp-mat-crud-form-wrapper ' +
+        entityCrudComponentBase().getFormPaneWrapperClass()
+      "
+      spHostBusyWheel="formBusyWheel"
+      *transloco="let t"
+    >
+      <div
+        [class]="
+          'sp-mat-crud-form-content ' +
+          entityCrudComponentBase().getFormPaneContentClass()
+        "
+      >
         <div class="create-edit-topbar">
           <div class="title">
             @if (title()) {
-              {{ title() | async }}
+            {{ title() | async }}
             } @else {
-              {{ t(('spMatEntityCrud.' + (entity() ? 'editItem' : 'newItem')), { item: (this._itemLabel() | async )}) }}
+            {{
+              t('spMatEntityCrud.' + (entity() ? 'editItem' : 'newItem'), {
+                item: (this._itemLabel() | async)
+              })
+            }}
             }
           </div>
           <div class="spacer"></div>
@@ -662,6 +709,16 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
     refresh(force = false) {
         this.spEntitiesList()?.refresh(force);
     }
+    //  BEGIN SPMatEntityCrudComponentBase METHODS //
+    getEntityName() {
+        return this.entityName();
+    }
+    getEntityNamePlural() {
+        return this._entityNamePlural();
+    }
+    getIdKey() {
+        return this.idKey();
+    }
     closeCreateEdit(cancelled) {
         this.createEditViewActive.set(false);
         this.entityViewPaneActivated.emit({
@@ -733,6 +790,22 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
             }
         }));
     }
+    loadEntity(id, params) {
+        const crudOpFn = this.crudOpFn();
+        if (crudOpFn) {
+            return crudOpFn('get', id, undefined, this);
+        }
+        else {
+            const httpParams = params instanceof HttpParams
+                ? params
+                : new HttpParams({ fromString: params });
+            return this.http.get(this.getEntityUrl(id), {
+                context: this.getCrudReqHttpContext('retrieve'),
+                params: httpParams,
+            });
+        }
+    }
+    // END SPMatEntityCrudComponentBase METHODS //
     /**
      * Thunk these methods to the internal <sp-mat-entity-list> component.
      */
@@ -834,10 +907,11 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
                 return;
             }
         }
-        this.doEntityAction(entity[this.idKey()], verb, httpRequestParameters.params || new HttpParams(), httpRequestParameters.body).pipe(tap((response) => {
+        this.doEntityAction(entity[this.idKey()], verb, httpRequestParameters.params || new HttpParams(), httpRequestParameters.body)
+            .pipe(tap((response) => {
             const successMessage = actionItem?.successMessage ||
                 this.transloco.translate('spMatEntityCrud.done');
-            this.snackBar.open(successMessage || "Done");
+            this.snackBar.open(successMessage || 'Done');
         }), catchError((error) => {
             /**
              * If an errorMessage is specified in the actionItem, display it.
@@ -849,7 +923,8 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
                 return EMPTY;
             }
             return throwError(() => error);
-        })).subscribe();
+        }))
+            .subscribe();
     }
     onCreate(event) {
         // If newItemLink() has not been provided, check if createEditFormTemplate
@@ -1053,7 +1128,8 @@ class SPMatEntityCrudComponent extends SPMatEntityListComponent {
                     // be an array of HttpContextToken key, value pairs.
                     contextParamToHttpContext(context, crudHttpReqContext);
                 }
-                else if (typeof crudHttpReqContext === 'object' && op &&
+                else if (typeof crudHttpReqContext === 'object' &&
+                    op &&
                     Object.keys(crudHttpReqContext).find((k) => k === op)) {
                     // HttpContext specific to this crud operation, 'create'|'retrieve'|'update'|'delete'
                     contextParamToHttpContext(context, crudHttpReqContext[op]);
@@ -1678,22 +1754,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
  *    ```
  *
  * 3. If you form's value requires manipulation before being sent to the
- *    server, override getFormValue() method and do it there before returning
+ *    server, override `getFormValue()` method and do it there before returning
  *    the modified values.
  *
  * 4. Wire up the form in the template as:
  *
  *    ```
+ *    @if (loadEntity$ | async) {
  *    <form [formGroup]='form'.. (ngSubmit)="onSubmit()">
  *      <button type="submit">Submit</button>
  *    </form>
+ *    } @else {
+ *     <div>Loading...</div>
+ *    }
  *    ```
+ *    Here `loadEntity$` is an Observable<boolean> that upon emission of `true`
+ *    indicates that the entity has been loaded from server (in case of edit)
+ *    and the form is ready to be displayed. Note that if the full entity was
+ *    passed in the `entity` input property, then no server load is necessary
+ *    and the form will be created immediately.
+ *
+ * 5. If the entity shape required by the form requires additional parameters
+ *    to be loaded from server, initialize `entity` property with it's id.
+ *    Then override the `getLoadEntityParams()` method to return the additional
+ *    load parameters. The parameters returned by this method will be
+ *    passed to the `loadEntity()` method of the bridge interface.
  */
 class SPMatEntityCrudFormBase {
     _form = signal(undefined);
     entity = input.required();
     bridge = input.required();
     params = input();
+    loadEntity$;
+    _entity = signal(undefined);
     sub$ = new Subscription();
     // Force typecast to TFormGroup so that we can use it in the template
     // without having to use the non-nullable operator ! with every reference
@@ -1701,9 +1794,10 @@ class SPMatEntityCrudFormBase {
     // method after the form is created. And if form() is not set, then there
     // will be errors while loading the form in the template.
     form = computed(() => this._form());
-    crudConfig = getEntityCrudConfig();
+    // crudConfig = getEntityCrudConfig();
     transloco = inject(TranslocoService);
     cdr = inject(ChangeDetectorRef);
+    http = inject(HttpClient);
     canCancelEdit = () => {
         return this._canCancelEdit();
     };
@@ -1715,12 +1809,50 @@ class SPMatEntityCrudFormBase {
         return true;
     }
     ngOnInit() {
-        this._form.set(this.createForm(this.entity()));
-        this.bridge()?.registerCanCancelEditCallback(this.canCancelEdit);
+        this.loadEntity$ = (typeof this.entity() === 'object' || this.entity() === undefined
+            ? new Observable((subscriber) => {
+                subscriber.next(this.entity());
+                subscriber.complete();
+            })
+            : this.bridge()?.loadEntity(this.entity(), this.getLoadEntityParams())).pipe(map((resp) => {
+            const compositeEntity = this.getEntityFromLoadResponse(resp);
+            this._entity.set(compositeEntity);
+            this._form.set(this.createForm(compositeEntity));
+            this.bridge()?.registerCanCancelEditCallback(this.canCancelEdit);
+            return true;
+        }));
     }
     ngOnDestroy() {
         this.sub$.unsubscribe();
     }
+    /**
+     * Additional parameters for loading the entity, in case this.entity() value
+     * is of type TEntity[IdKey].
+     * @returns
+     */
+    getLoadEntityParams() {
+        return '';
+    }
+    /**
+     * Return the TEntity object from the response returned by the
+     * loadEntity() method of the bridge. Typically entity load return the actual
+     * entity object itself. In some cases, where response is sideloaded, the
+     * default implementation here uses the `sideloadToComposite()` utility to
+     * extract the entity from the response after merging (inplace) the
+     * sideloaded data into a composite.
+     *
+     * If you have a different response shape, override this method to
+     * extract the TEntity object from the response.
+     * @param resp
+     * @returns
+     */
+    getEntityFromLoadResponse(resp) {
+        if (!resp) {
+            return undefined;
+        }
+        const sideloaded = sideloadToComposite(resp, this.bridge().getEntityName(), this.bridge().getIdKey());
+        return sideloaded;
+    }
     /**
      * Override to customize the id key name if it's not 'id'
      * @returns The name of the unique identifier key that will be used to
@@ -1753,8 +1885,9 @@ class SPMatEntityCrudFormBase {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: SPMatEntityCrudFormBase, decorators: [{
             type: Component,
             args: [{
-                    selector: '_#_sp-mat-entity-crud-form-base_#_', template: ``,
-                    standalone: false
+                    selector: '_#_sp-mat-entity-crud-form-base_#_',
+                    template: ``,
+                    standalone: false,
                 }]
         }] });