@planeasyinc/le-angular 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fesm2022/planeasyinc-le-angular.mjs +103 -10
- package/dist/fesm2022/planeasyinc-le-angular.mjs.map +1 -1
- package/dist/lib/templates/reference.template.d.ts +11 -2
- package/dist/lib/views/form-view/form-view.component.d.ts +2 -0
- package/dist/lib/views/table-view/table-view-cell.directive.d.ts +4 -1
- package/dist/lib/views/table-view/table-view.component.d.ts +2 -1
- package/package.json +4 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, inject, signal, Injectable, computed, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, effect, untracked, ViewContainerRef, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
|
|
3
3
|
import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
|
|
4
|
-
import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent,
|
|
4
|
+
import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, takeUntil, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent, startWith } from 'rxjs';
|
|
5
5
|
import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
|
|
6
6
|
import { CdkDrag } from '@angular/cdk/drag-drop';
|
|
7
7
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
@@ -771,13 +771,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
771
771
|
|
|
772
772
|
class ReferenceTemplate {
|
|
773
773
|
data = input.required();
|
|
774
|
+
attribute = input.required();
|
|
775
|
+
metadata = input.required();
|
|
776
|
+
reference = computed(() => {
|
|
777
|
+
const data = this.data();
|
|
778
|
+
return {
|
|
779
|
+
text: this.generateText(data),
|
|
780
|
+
href: this.generateLink(data),
|
|
781
|
+
};
|
|
782
|
+
});
|
|
783
|
+
onClick(event) {
|
|
784
|
+
event.stopImmediatePropagation();
|
|
785
|
+
}
|
|
786
|
+
generateText(data) {
|
|
787
|
+
if (data && data.ref) {
|
|
788
|
+
return data.ref.display_name || data.ref.object_id;
|
|
789
|
+
}
|
|
790
|
+
return '';
|
|
791
|
+
}
|
|
792
|
+
generateLink(data) {
|
|
793
|
+
if (data && data.ref) {
|
|
794
|
+
const href = `/details/object/${data.ref.class_name}/${data.ref.resource}%2523${data.ref.class_name}%253A${data.ref.class_version}%253A${data.ref.object_id}%253A${data.ref.object_version}`;
|
|
795
|
+
return data.ref?.address ? `${href}?address=${data.ref.address}` : href;
|
|
796
|
+
}
|
|
797
|
+
}
|
|
774
798
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
775
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
799
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ReferenceTemplate, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attribute: { classPropertyName: "attribute", publicName: "attribute", isSignal: true, isRequired: true, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
800
|
+
<span class="le-table-template le-template-reference">
|
|
801
|
+
@if (reference(); as reference) {
|
|
802
|
+
@if (reference.href) {
|
|
803
|
+
<a
|
|
804
|
+
[href]="reference.href"
|
|
805
|
+
[attr.aria-label]="reference.text"
|
|
806
|
+
(click)="onClick($event)"
|
|
807
|
+
target="_blank"
|
|
808
|
+
>{{ reference.text }}</a
|
|
809
|
+
>
|
|
810
|
+
} @else {
|
|
811
|
+
{{ reference.text }}
|
|
812
|
+
}
|
|
813
|
+
}
|
|
814
|
+
</span>
|
|
815
|
+
`, isInline: true });
|
|
776
816
|
}
|
|
777
817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ReferenceTemplate, decorators: [{
|
|
778
818
|
type: Component,
|
|
779
819
|
args: [{
|
|
780
|
-
template:
|
|
820
|
+
template: `
|
|
821
|
+
<span class="le-table-template le-template-reference">
|
|
822
|
+
@if (reference(); as reference) {
|
|
823
|
+
@if (reference.href) {
|
|
824
|
+
<a
|
|
825
|
+
[href]="reference.href"
|
|
826
|
+
[attr.aria-label]="reference.text"
|
|
827
|
+
(click)="onClick($event)"
|
|
828
|
+
target="_blank"
|
|
829
|
+
>{{ reference.text }}</a
|
|
830
|
+
>
|
|
831
|
+
} @else {
|
|
832
|
+
{{ reference.text }}
|
|
833
|
+
}
|
|
834
|
+
}
|
|
835
|
+
</span>
|
|
836
|
+
`,
|
|
781
837
|
}]
|
|
782
838
|
}] });
|
|
783
839
|
|
|
@@ -814,6 +870,8 @@ class TableViewCellDirective {
|
|
|
814
870
|
componentRef;
|
|
815
871
|
type = input();
|
|
816
872
|
data = input.required();
|
|
873
|
+
column = input();
|
|
874
|
+
metadata = input();
|
|
817
875
|
constructor() {
|
|
818
876
|
this.setEffects();
|
|
819
877
|
}
|
|
@@ -821,6 +879,8 @@ class TableViewCellDirective {
|
|
|
821
879
|
effect(() => {
|
|
822
880
|
const type = this.type();
|
|
823
881
|
const data = this.data();
|
|
882
|
+
const column = this.column();
|
|
883
|
+
const metadata = this.metadata();
|
|
824
884
|
untracked(() => {
|
|
825
885
|
const component = (type && TABLE_CELL_TEMPLATES[type]) || TABLE_CELL_TEMPLATES['StringTemplate'];
|
|
826
886
|
if (this.componentRef) {
|
|
@@ -828,11 +888,19 @@ class TableViewCellDirective {
|
|
|
828
888
|
}
|
|
829
889
|
this.componentRef = this.vcr.createComponent(component);
|
|
830
890
|
this.componentRef?.setInput('data', data);
|
|
891
|
+
if (type === 'ReferenceTemplate') {
|
|
892
|
+
if (column) {
|
|
893
|
+
this.componentRef?.setInput('attribute', column);
|
|
894
|
+
}
|
|
895
|
+
if (metadata) {
|
|
896
|
+
this.componentRef?.setInput('metadata', metadata);
|
|
897
|
+
}
|
|
898
|
+
}
|
|
831
899
|
});
|
|
832
900
|
});
|
|
833
901
|
}
|
|
834
902
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
835
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TableViewCellDirective, isStandalone: true, selector: "[tableViewCell]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
903
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TableViewCellDirective, isStandalone: true, selector: "[tableViewCell]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
836
904
|
}
|
|
837
905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewCellDirective, decorators: [{
|
|
838
906
|
type: Directive,
|
|
@@ -882,6 +950,10 @@ class TableViewComponent {
|
|
|
882
950
|
constructor() {
|
|
883
951
|
this.setEffects();
|
|
884
952
|
}
|
|
953
|
+
ngOnDestroy() {
|
|
954
|
+
this._cancelRequest$.next();
|
|
955
|
+
this._cancelRequest$.complete();
|
|
956
|
+
}
|
|
885
957
|
onPageChange(pageChange) {
|
|
886
958
|
this._pageSize.set(pageChange.pageSize);
|
|
887
959
|
this._pageIndex.set(pageChange.pageIndex);
|
|
@@ -936,7 +1008,9 @@ class TableViewComponent {
|
|
|
936
1008
|
getTableData(node, ctx) {
|
|
937
1009
|
this._isLoading.set(true);
|
|
938
1010
|
this._cancelRequest$.next();
|
|
939
|
-
this.buildRequest(node, ctx)
|
|
1011
|
+
this.buildRequest(node, ctx)
|
|
1012
|
+
.pipe(takeUntil(this._cancelRequest$))
|
|
1013
|
+
.subscribe({
|
|
940
1014
|
next: (response) => {
|
|
941
1015
|
this.handleTableDataSuccessResponse(response);
|
|
942
1016
|
},
|
|
@@ -1038,7 +1112,7 @@ class TableViewComponent {
|
|
|
1038
1112
|
});
|
|
1039
1113
|
}
|
|
1040
1114
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1041
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"le-toolbar\">\n @if (node(); as node) {\n <h2>{{ node?.title }}</h2>\n\n\n <span class=\"spacer\"></span>\n\n @if (filters().length) {\n <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n }\n\n @if (node.actions?.tableActions) {\n <table-view-actions\n [actions]=\"node.actions!.tableActions\"\n (actionClicked)=\"onToolbarActionClick($event)\"\n ></table-view-actions>\n }\n }\n</div>\n\n@if (pageSize()) {\n <table-view-pagination\n [pageSize]=\"pageSize()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [entriesCount]=\"entriesCount()\"\n (pageChange)=\"onPageChange($event)\"\n ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n @if (displayedColumns().length) {\n <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n @for (column of columns(); track column) {\n <ng-container [cdkColumnDef]=\"column.key\">\n <th\n class=\"le-table-header-cell\"\n cdk-header-cell\n *cdkHeaderCellDef\n [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n >\n <div class=\"le-cell-content\">\n <ng-template\n tableViewCell\n [data]=\"column.label\"\n [type]=\"column.column_format?.headerTemplate\"\n ></ng-template>\n\n @if (sortColumnKeys().has(column.key)) {\n <div class=\"le-sort-container\">\n @if (sortMap().has(column.key)) {\n <div class=\"le-sort-icon\">\n <i\n class=\"le-sort-arrow\"\n [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n ></i>\n </div>\n\n <div class=\"le-sort-order\">\n @if (sortOrder().has(column.key)) {\n <span>\n {{ sortOrder().get(column.key) }}\n </span>\n }\n </div>\n } @else {\n
|
|
1115
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"le-toolbar\">\n @if (node(); as node) {\n <h2>{{ node?.title }}</h2>\n\n\n <span class=\"spacer\"></span>\n\n @if (filters().length) {\n <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n }\n\n @if (node.actions?.tableActions) {\n <table-view-actions\n [actions]=\"node.actions!.tableActions\"\n (actionClicked)=\"onToolbarActionClick($event)\"\n ></table-view-actions>\n }\n }\n</div>\n\n@if (pageSize()) {\n <table-view-pagination\n [pageSize]=\"pageSize()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [entriesCount]=\"entriesCount()\"\n (pageChange)=\"onPageChange($event)\"\n ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n @if (displayedColumns().length) {\n <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n @for (column of columns(); track column) {\n <ng-container [cdkColumnDef]=\"column.key\">\n <th\n class=\"le-table-header-cell\"\n cdk-header-cell\n *cdkHeaderCellDef\n [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n >\n <div class=\"le-cell-content\">\n <ng-template\n tableViewCell\n [data]=\"column.label\"\n [type]=\"column.column_format?.headerTemplate\"\n ></ng-template>\n\n @if (sortColumnKeys().has(column.key)) {\n <div class=\"le-sort-container\">\n @if (sortMap().has(column.key)) {\n <div class=\"le-sort-icon\">\n <i\n class=\"le-sort-arrow\"\n [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n ></i>\n </div>\n\n <div class=\"le-sort-order\">\n @if (sortOrder().has(column.key)) {\n <span>\n {{ sortOrder().get(column.key) }}\n </span>\n }\n </div>\n } @else {\n <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n }\n </div>\n }\n </div>\n </th>\n\n <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n <ng-template\n tableViewCell\n [data]=\"row[column.key]\"\n [type]=\"column.column_format?.cellTemplate\"\n [column]=\"column\"\n [metadata]=\"row._metadata\"\n ></ng-template>\n </td>\n </ng-container>\n }\n\n <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n <tr\n cdk-row\n class=\"le-table-row\"\n [tabindex]=\"0\"\n [class.le-table-row--clickable]=\"hasRowClickAction()\"\n *cdkRowDef=\"let row; columns: displayedColumns()\"\n (click)=\"onRowClick(row)\"\n ></tr>\n </table>\n }\n</div>\n\n@if (data().count === 0) {\n @if (isLoading()) {\n <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n } @else {\n <div class=\"no-entities\">\n <span>No Entities</span>\n </div>\n }\n}\n", dependencies: [{ kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: TableViewPaginationComponent, selector: "table-view-pagination", inputs: ["pageSize", "pageSizeOptions", "entriesCount"], outputs: ["pageChange"] }, { kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: TableViewActions, selector: "table-view-actions", inputs: ["actions"], outputs: ["actionClicked"] }, { kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data", "column", "metadata"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1042
1116
|
}
|
|
1043
1117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, decorators: [{
|
|
1044
1118
|
type: Component,
|
|
@@ -1058,7 +1132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
|
|
|
1058
1132
|
TableViewActions,
|
|
1059
1133
|
TableViewCellDirective,
|
|
1060
1134
|
LeIconComponent,
|
|
1061
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-toolbar\">\n @if (node(); as node) {\n <h2>{{ node?.title }}</h2>\n\n\n <span class=\"spacer\"></span>\n\n @if (filters().length) {\n <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n }\n\n @if (node.actions?.tableActions) {\n <table-view-actions\n [actions]=\"node.actions!.tableActions\"\n (actionClicked)=\"onToolbarActionClick($event)\"\n ></table-view-actions>\n }\n }\n</div>\n\n@if (pageSize()) {\n <table-view-pagination\n [pageSize]=\"pageSize()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [entriesCount]=\"entriesCount()\"\n (pageChange)=\"onPageChange($event)\"\n ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n @if (displayedColumns().length) {\n <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n @for (column of columns(); track column) {\n <ng-container [cdkColumnDef]=\"column.key\">\n <th\n class=\"le-table-header-cell\"\n cdk-header-cell\n *cdkHeaderCellDef\n [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n >\n <div class=\"le-cell-content\">\n <ng-template\n tableViewCell\n [data]=\"column.label\"\n [type]=\"column.column_format?.headerTemplate\"\n ></ng-template>\n\n @if (sortColumnKeys().has(column.key)) {\n <div class=\"le-sort-container\">\n @if (sortMap().has(column.key)) {\n <div class=\"le-sort-icon\">\n <i\n class=\"le-sort-arrow\"\n [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n ></i>\n </div>\n\n <div class=\"le-sort-order\">\n @if (sortOrder().has(column.key)) {\n <span>\n {{ sortOrder().get(column.key) }}\n </span>\n }\n </div>\n } @else {\n
|
|
1135
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-toolbar\">\n @if (node(); as node) {\n <h2>{{ node?.title }}</h2>\n\n\n <span class=\"spacer\"></span>\n\n @if (filters().length) {\n <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n }\n\n @if (node.actions?.tableActions) {\n <table-view-actions\n [actions]=\"node.actions!.tableActions\"\n (actionClicked)=\"onToolbarActionClick($event)\"\n ></table-view-actions>\n }\n }\n</div>\n\n@if (pageSize()) {\n <table-view-pagination\n [pageSize]=\"pageSize()\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n [entriesCount]=\"entriesCount()\"\n (pageChange)=\"onPageChange($event)\"\n ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n @if (displayedColumns().length) {\n <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n @for (column of columns(); track column) {\n <ng-container [cdkColumnDef]=\"column.key\">\n <th\n class=\"le-table-header-cell\"\n cdk-header-cell\n *cdkHeaderCellDef\n [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n >\n <div class=\"le-cell-content\">\n <ng-template\n tableViewCell\n [data]=\"column.label\"\n [type]=\"column.column_format?.headerTemplate\"\n ></ng-template>\n\n @if (sortColumnKeys().has(column.key)) {\n <div class=\"le-sort-container\">\n @if (sortMap().has(column.key)) {\n <div class=\"le-sort-icon\">\n <i\n class=\"le-sort-arrow\"\n [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n ></i>\n </div>\n\n <div class=\"le-sort-order\">\n @if (sortOrder().has(column.key)) {\n <span>\n {{ sortOrder().get(column.key) }}\n </span>\n }\n </div>\n } @else {\n <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n }\n </div>\n }\n </div>\n </th>\n\n <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n <ng-template\n tableViewCell\n [data]=\"row[column.key]\"\n [type]=\"column.column_format?.cellTemplate\"\n [column]=\"column\"\n [metadata]=\"row._metadata\"\n ></ng-template>\n </td>\n </ng-container>\n }\n\n <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n <tr\n cdk-row\n class=\"le-table-row\"\n [tabindex]=\"0\"\n [class.le-table-row--clickable]=\"hasRowClickAction()\"\n *cdkRowDef=\"let row; columns: displayedColumns()\"\n (click)=\"onRowClick(row)\"\n ></tr>\n </table>\n }\n</div>\n\n@if (data().count === 0) {\n @if (isLoading()) {\n <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n } @else {\n <div class=\"no-entities\">\n <span>No Entities</span>\n </div>\n }\n}\n" }]
|
|
1062
1136
|
}], ctorParameters: () => [] });
|
|
1063
1137
|
|
|
1064
1138
|
const isSectionsSchema = (raw) => {
|
|
@@ -1426,6 +1500,7 @@ class FormViewComponent {
|
|
|
1426
1500
|
_sections = signal([]);
|
|
1427
1501
|
_topLevelControls = signal([]);
|
|
1428
1502
|
_engine = signal(null);
|
|
1503
|
+
_cancelRequest$ = new Subject();
|
|
1429
1504
|
_actionHandlers = {
|
|
1430
1505
|
invoke: (action) => {
|
|
1431
1506
|
const engine = this._engine();
|
|
@@ -1473,6 +1548,11 @@ class FormViewComponent {
|
|
|
1473
1548
|
}
|
|
1474
1549
|
return of(null);
|
|
1475
1550
|
},
|
|
1551
|
+
update_table: (action) => {
|
|
1552
|
+
const node = this.mapUpdateTableActionToTableNode(action.data_source);
|
|
1553
|
+
this.dataService.setView(node);
|
|
1554
|
+
return of(null);
|
|
1555
|
+
},
|
|
1476
1556
|
update_value: (action, response) => {
|
|
1477
1557
|
return of(action).pipe(filter((action) => isPlaceholder(action.value)), map((action) => mapResponseToRequestBody({ [action.field_id]: action.value }, { response })), tap((result) => {
|
|
1478
1558
|
if (result[action.field_id]) {
|
|
@@ -1521,11 +1601,14 @@ class FormViewComponent {
|
|
|
1521
1601
|
};
|
|
1522
1602
|
});
|
|
1523
1603
|
constructor() {
|
|
1524
|
-
effect(() => {
|
|
1604
|
+
effect((onCleanup) => {
|
|
1525
1605
|
const node = this.node();
|
|
1526
1606
|
if (node) {
|
|
1527
|
-
this.getFormData(node).subscribe();
|
|
1607
|
+
this.getFormData(node).pipe(takeUntil(this._cancelRequest$)).subscribe();
|
|
1528
1608
|
}
|
|
1609
|
+
onCleanup(() => {
|
|
1610
|
+
this._cancelRequest$.next();
|
|
1611
|
+
});
|
|
1529
1612
|
});
|
|
1530
1613
|
effect(() => {
|
|
1531
1614
|
const form = this._form();
|
|
@@ -1596,6 +1679,17 @@ class FormViewComponent {
|
|
|
1596
1679
|
}
|
|
1597
1680
|
return null;
|
|
1598
1681
|
}
|
|
1682
|
+
mapUpdateTableActionToTableNode(source) {
|
|
1683
|
+
return {
|
|
1684
|
+
id: source.entity_name,
|
|
1685
|
+
title: source.entity_name,
|
|
1686
|
+
type: 'table',
|
|
1687
|
+
dataSource: {
|
|
1688
|
+
kind: source.type,
|
|
1689
|
+
entity: source.entity_name,
|
|
1690
|
+
},
|
|
1691
|
+
};
|
|
1692
|
+
}
|
|
1599
1693
|
processActionList(items, response) {
|
|
1600
1694
|
from(items)
|
|
1601
1695
|
.pipe(concatMap((a) => this.processAction(a, response)), finalize(() => {
|
|
@@ -1776,7 +1870,6 @@ class FiltersComponent {
|
|
|
1776
1870
|
.pipe(startWith(''), map((value) => this.filter(value)), takeUntilDestroyed())
|
|
1777
1871
|
.subscribe((filters) => {
|
|
1778
1872
|
this._filteredOptions.set(filters);
|
|
1779
|
-
console.log(filters);
|
|
1780
1873
|
});
|
|
1781
1874
|
}
|
|
1782
1875
|
listenSelectionChanges() {
|