@planeasyinc/le-angular 0.0.21 → 0.0.23

package/dist/fesm2022/planeasyinc-le-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, signal, Injectable, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, ViewContainerRef, Injector, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, distinctUntilChanged, Subject, takeUntil, BehaviorSubject, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
+import { map, filter, distinctUntilChanged, Subject, takeUntil, BehaviorSubject, firstValueFrom, of, tap, catchError, switchMap, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
 import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
 import { Location, UpperCasePipe, JsonPipe, DatePipe, ViewportScroller } from '@angular/common';
 import { CdkDrag } from '@angular/cdk/drag-drop';
@@ -16,9 +16,9 @@ import { NestedTreeControl, CdkTree, CdkNestedTreeNode, CdkTreeNodeDef, CdkTreeN
 import { ArrayDataSource, SelectionModel } from '@angular/cdk/collections';
 import { CdkMenuTrigger, CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
 import { A11yModule } from '@angular/cdk/a11y';
+import { createEngine } from '@planeasyinc/fe-core';
 import { adaptOld } from '@planeasyinc/fe-adapters-old';
 import { adaptSections } from '@planeasyinc/fe-adapters-sections';
-import { createEngine } from '@planeasyinc/fe-core';
 import { FeFieldHost } from '@planeasyinc/fe-angular';
 import * as i1 from '@angular/forms';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -165,7 +165,8 @@ class LeNavigationService {
         if (!this.config.withRouting)
             return;
         const path = this.mapNodeToLocationPath(node);
-        this.location.go(`/v2/${path}`, undefined, { node });
+        const fullPath = [this.config.rootPath, path].filter(Boolean).join('/');
+        this.location.go(`/${fullPath}`, undefined, { node });
     }
     mapNodeToLocationPath(node) {
         let pathChunks = [];
@@ -173,13 +174,20 @@ class LeNavigationService {
         if (node.type === 'table') {
             pathChunks.push(node?.title || node?.dataSource?.entity);
             if (node?.dataSource?.params) {
-                query = Object.entries(node.dataSource.params).map(entry => entry.join('=')).join('&');
+                query = Object.entries(node.dataSource.params)
+                    .map((entry) => entry.join('='))
+                    .join('&');
             }
         }
-        if (node.type === 'form') {
+        else if (node.type === 'form') {
             pathChunks.push('details', node.controlSource?.kind, node.controlSource?.entity, node.controlSource?.params?.className, node.controlSource?.params?.address, node.controlSource?.params?.mode);
         }
-        const path = pathChunks.filter(v => !!v).join('/');
+        else {
+            const title = (node.title ?? '').replace(' ', '-');
+            if (title)
+                pathChunks.push(title);
+        }
+        const path = pathChunks.filter((v) => !!v).join('/');
         return query ? `${path}?${query}` : path;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1242,8 +1250,9 @@ class TableViewComponent {
         const result = [];
         const firstRow = this.data().getValueByIndex(0);
         const columnKeys = this.columns().map((column) => column.key);
+        const hasMetadata = !!(firstRow && firstRow._metadata);
         const hasVersion = !!(firstRow && firstRow._metadata && firstRow._metadata.object_version);
-        if (firstRow && !this.config()?.hideInfo) {
+        if (hasMetadata && !this.config()?.hideInfo) {
             result.push('info');
         }
         result.push(...columnKeys);
@@ -1342,11 +1351,11 @@ class TableViewComponent {
             injector: this.injector,
         })
             .subscribe({
-            next: event => {
+            next: (event) => {
                 if (event.type === 'cell_clicked') {
                     this.onCellClicked(event.data);
                 }
-            }
+            },
         });
     }
     onCellClicked(data) {
@@ -1382,6 +1391,20 @@ class TableViewComponent {
                 }
             });
         }
+        else if (type === 'update_form') {
+            if (clone.controlSource?.params) {
+                clone.controlSource.params = this.interpolateRowValues(clone.controlSource.params, row);
+            }
+            this.setView({
+                id: action.type,
+                type: 'form',
+                controlSource: {
+                    kind: clone.controlSource.kind,
+                    entity: clone.controlSource.entity,
+                    params: clone.controlSource.params,
+                },
+            });
+        }
     }
     processTableAction(action) {
         if (action.type === 'update_form') {
@@ -1425,7 +1448,7 @@ class TableViewComponent {
         }
         if (node.dataSource?.kind === 'transaction') {
             const body = Object.assign({}, node.dataSource.params, buildRequestBody(ctx));
-            this.apiService.executeTransaction(node.dataSource.entity, body);
+            return this.apiService.executeTransaction(node.dataSource.entity, body);
         }
         if (node.dataSource?.kind === 'object') {
             return this.apiService.getObjectByAddress(node.dataSource.entity, node.dataSource.params ?? {});
@@ -1784,31 +1807,82 @@ const getTabJSONControl = (control, engine) => {
     });
     return result;
 };
+const mapValueToString = (value) => {
+    if (typeof value === 'object' && value !== null) {
+        if (Array.isArray(value)) {
+            return value.map((chunk) => mapValueToString(chunk)).join('\n');
+        }
+        else {
+            return mapValueToString(Object.entries(value));
+        }
+    }
+    return `${value}`;
+};
+
+class ToastListItemComponent {
+    _engine = signal(null);
+    _sections = signal([]);
+    controls = input.required();
+    actions = output();
+    engine = this._engine.asReadonly();
+    sections = this._sections.asReadonly();
+    constructor() {
+        effect((onCleanup) => {
+            const controls = this.controls();
+            const form = adaptForm(controls);
+            const engine = createEngine(form);
+            let cleanup = () => { };
+            untracked(() => {
+                this._engine.set(engine);
+                this._sections.set(form.sections ?? []);
+                cleanup = engine.on('action', ({ action }) => {
+                    const actionObj = action;
+                    this.actions.emit(actionObj.actions);
+                });
+            });
+            onCleanup(() => {
+                cleanup();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListItemComponent, isStandalone: true, selector: "le-toast-list-item", inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actions: "actions" }, ngImport: i0, template: "@if (engine(); as engine) {\n  @for (section of sections(); track section) {\n    @for (control of section.controls; track control) {\n      <fe-field [engine]=\"engine\" [control]=\"control\"></fe-field>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: FeFieldHost, selector: "fe-field", inputs: ["engine", "control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-toast-list-item', imports: [FeFieldHost], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (engine(); as engine) {\n  @for (section of sections(); track section) {\n    @for (control of section.controls; track control) {\n      <fe-field [engine]=\"engine\" [control]=\"control\"></fe-field>\n    }\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class ToastListComponent {
     toastService = inject(LeToastService);
     toasts = this.toastService.toasts;
-    onButtonClick(actions) {
-        actions.forEach((action) => this.toastService.processAction(action));
+    onActions(actions) {
+        actions.forEach((action) => {
+            this.toastService.action$.next(action);
+            if (action.type === 'close_popup') {
+                this.toastService.remove(action.target_id);
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <div class=\"le-toast-text-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'text') {\n              <p class=\"le-toast-text\">\n                {{ control.value }}\n              </p>\n            }\n          }\n        </div>\n\n        <div class=\"le-toast-button-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'button') {\n              <button\n                class=\"le-button le-button-stroked\"\n                [class.le-button--success]=\"toast.type === 'success'\"\n                [class.le-button--info]=\"toast.type === 'info'\"\n                [class.le-button--warning]=\"toast.type === 'warning'\"\n                [class.le-button--error]=\"toast.type === 'error'\"\n                (click)=\"onButtonClick(control.actions)\"\n              >\n                {{ control.label }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ToastListComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <le-toast-list-item\n          [controls]=\"toast.controls\"\n          (actions)=\"onActions($event)\"\n        ></le-toast-list-item>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ToastListItemComponent, selector: "le-toast-list-item", inputs: ["controls"], outputs: ["actions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToastListComponent, decorators: [{
             type: Component,
-            args: [{ template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <div class=\"le-toast-text-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'text') {\n              <p class=\"le-toast-text\">\n                {{ control.value }}\n              </p>\n            }\n          }\n        </div>\n\n        <div class=\"le-toast-button-list\">\n          @for (control of toast.controls; track control) {\n            @if (control.type === 'button') {\n              <button\n                class=\"le-button le-button-stroked\"\n                [class.le-button--success]=\"toast.type === 'success'\"\n                [class.le-button--info]=\"toast.type === 'info'\"\n                [class.le-button--warning]=\"toast.type === 'warning'\"\n                [class.le-button--error]=\"toast.type === 'error'\"\n                (click)=\"onButtonClick(control.actions)\"\n              >\n                {{ control.label }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n" }]
+            args: [{ imports: [ToastListItemComponent], template: "@if (toasts().length) {\n  <div class=\"le-toast-list\">\n    @for (toast of toasts(); track toast.id) {\n      <div\n        class=\"le-toast\"\n        [class.le-toast--success]=\"toast.type === 'success'\"\n        [class.le-toast--info]=\"toast.type === 'info'\"\n        [class.le-toast--warning]=\"toast.type === 'warning'\"\n        [class.le-toast--error]=\"toast.type === 'error'\"\n      >\n        <le-toast-list-item\n          [controls]=\"toast.controls\"\n          (actions)=\"onActions($event)\"\n        ></le-toast-list-item>\n      </div>\n    }\n  </div>\n}\n" }]
         }] });
 
-let ID = 100_000_000;
+let ID$1 = 100_000_000;
 class LeToastService {
     overlayRef;
     overlay = inject(Overlay);
     _toasts = signal([]);
     toasts = this._toasts.asReadonly();
+    hasToasts = computed(() => this._toasts().length > 0);
+    action$ = new Subject();
     constructor() {
         effect(() => {
-            const toasts = this._toasts();
-            if (toasts.length > 0) {
+            if (this.hasToasts()) {
                 this.show();
             }
             else {
@@ -1834,11 +1908,6 @@ class LeToastService {
     remove(id) {
         this._toasts.update((toasts) => toasts.filter((toast) => toast.id !== id));
     }
-    processAction(action) {
-        if (action.type === 'close_popup') {
-            this.remove(action.target);
-        }
-    }
     show() {
         if (this.overlayRef)
             return;
@@ -1853,20 +1922,27 @@ class LeToastService {
         this.overlayRef = undefined;
     }
     buildToast(type, messages) {
-        const id = `${type}_${ID++}`;
-        const textControls = messages.map((message) => ({
-            type: 'text',
+        const id = `${type}_${ID$1++}`;
+        return {
+            id,
+            type,
+            controls: [...this.buildTextControls(id, messages), this.buildButtonControl(id)],
+        };
+    }
+    buildTextControls(id, messages) {
+        return messages.map((message, index) => ({
+            type: 'paragraph',
             value: message,
+            name: `${id}_${index}`
         }));
-        const buttonControl = {
+    }
+    buildButtonControl(id) {
+        return {
             type: 'button',
             label: 'Ok',
-            actions: [{ type: 'close_popup', target: id }],
-        };
-        return {
-            id,
-            type,
-            controls: [...textControls, buttonControl],
+            hideLabel: true,
+            name: `${id}_button`,
+            actions: [{ type: 'close_popup', target_id: id }],
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2039,12 +2115,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             type: Injectable
         }] });
 
+class LeActionsService {
+    _queue = [];
+    _data = null;
+    get hasActions() {
+        return this._queue.length > 0;
+    }
+    setActions(actions, data) {
+        this._queue = actions;
+        this._data = data;
+    }
+    getActions() {
+        const actions = this._queue.slice();
+        const data = Object.assign({}, this._data);
+        this._queue = [];
+        this._data = null;
+        return {
+            actions,
+            data,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeActionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeActionsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeActionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+let ID = 100_000_000;
 class FormViewComponent {
     apiService = inject(LEApiService);
     dataService = inject(LEDataService);
     attachmentService = inject(FormViewAttachmentService);
     viewportScroller = inject(ViewportScroller);
     toastService = inject(LeToastService);
+    actionsService = inject(LeActionsService);
     _isLoading = signal(false);
     _form = signal(null);
     _sections = signal([]);
@@ -2118,13 +2226,23 @@ class FormViewComponent {
             this.viewportScroller.scrollToPosition([0, 0]);
             return of(null);
         },
-        show_popup: (action) => {
+        show_popup: (action, response) => {
+            const rawControls = this.normalizeControls(action.controls);
+            const controls = this.populatePopupControlsWithResponseData(rawControls, response);
             this.toastService.notify({
-                ...action.item,
+                controls,
+                id: action.id,
                 type: 'success',
             });
             return of(null);
         },
+        close_popup: (action) => {
+            // TODO: models alignment required (to target_id)
+            // @ts-ignore
+            const id = action.target_id || action.target;
+            this.toastService.remove(id);
+            return of(null);
+        },
         open_url: (action) => {
             window.open(action.url, '_blank');
             return of(null);
@@ -2199,6 +2317,9 @@ class FormViewComponent {
                 this.init(form);
             });
         });
+        this.toastService.action$
+            .pipe(switchMap((action) => this.processAction(action)), takeUntilDestroyed())
+            .subscribe();
     }
     init(form) {
         this._sections.set(this.sortSections(form.sections));
@@ -2208,6 +2329,7 @@ class FormViewComponent {
             objectLatest: (className) => firstValueFrom(this.dataService.getObjectByClassName(className)),
         };
         this._engine.set(createEngine(form, {}, resolvers));
+        this.checkDelayedActions();
         // this._engine()?.on('valueChanges', (value) => {
         //   console.log('Value Changes', value);
         //   // this.cdr.markForCheck();
@@ -2288,12 +2410,47 @@ class FormViewComponent {
         };
     }
     processActionList(items, response) {
+        const updateViewActionIndex = items.findIndex((item) => item.type === 'update_form' || item.type === 'update_table');
+        if (updateViewActionIndex !== -1) {
+            const delayedActions = items.splice(updateViewActionIndex + 1);
+            this.actionsService.setActions(delayedActions, response ?? null);
+        }
         from(items)
             .pipe(concatMap((a) => this.processAction(a, response)), finalize(() => {
             this._isLoading.set(false);
         }))
             .subscribe();
     }
+    checkDelayedActions() {
+        if (this.actionsService.hasActions) {
+            const { actions, data } = this.actionsService.getActions();
+            this.processActionList(actions, data);
+        }
+    }
+    normalizeControls(controls) {
+        return controls.map((control) => {
+            if (!control.id) {
+                return {
+                    ...control,
+                    id: `${control.type}_${ID++}`,
+                };
+            }
+            return control;
+        });
+    }
+    populatePopupControlsWithResponseData(controls, response) {
+        return controls.map((control) => {
+            if (isPlaceholder(control.value)) {
+                const path = getPlaceholderValue(control.value);
+                const value = mapValueToString(getValueByPath({ response }, path));
+                return {
+                    ...control,
+                    value,
+                };
+            }
+            return control;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FormViewComponent, isStandalone: true, selector: "form-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, providers: [FormViewAttachmentService], ngImport: i0, template: "<h2>{{ node()?.title }}</h2>\n\n@if (isLoading()) {\n  <app-loading-view [rowCount]=\"5\"></app-loading-view>\n} @else {\n  @if (data(); as data) {\n    <le-form-renderer\n      [config]=\"config()\"\n      [engine]=\"data.engine\"\n      [sections]=\"data.sections\"\n      [customCss]=\"data.customCss\"\n      [topLevelControls]=\"data.topLevelControls\"\n      (event)=\"event.emit($event)\"\n    ></le-form-renderer>\n  }\n}\n", dependencies: [{ kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: FormRendererComponent, selector: "le-form-renderer", inputs: ["engine", "sections", "topLevelControls", "customCss", "config"], outputs: ["event"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }