@acorex/platform 20.2.4-next.9 → 20.3.0-next.1
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/common/index.d.ts +5 -119
- package/core/index.d.ts +67 -71
- package/fesm2022/acorex-platform-common.mjs +9 -19
- package/fesm2022/acorex-platform-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-core.mjs +158 -113
- package/fesm2022/acorex-platform-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-builder.mjs +638 -1168
- package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-components.mjs +46 -1087
- package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-designer.mjs +137 -92
- package/fesm2022/acorex-platform-layout-designer.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-entity.mjs +1064 -3100
- package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-views.mjs +72 -332
- package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
- package/fesm2022/acorex-platform-themes-default-create-entity-view.component-SY0oMDoH.mjs +22 -0
- package/fesm2022/acorex-platform-themes-default-create-entity-view.component-SY0oMDoH.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-create-view.component-I7Eq8Nti.mjs → acorex-platform-themes-default-entity-master-create-view.component-hHXxHlFG.mjs} +3 -3
- package/fesm2022/{acorex-platform-themes-default-entity-master-create-view.component-I7Eq8Nti.mjs.map → acorex-platform-themes-default-entity-master-create-view.component-hHXxHlFG.mjs.map} +1 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-hf4QOz_4.mjs +665 -0
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-hf4QOz_4.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-modify-view.component-16sdMBvH.mjs → acorex-platform-themes-default-entity-master-modify-view.component-DC3MrDtI.mjs} +10 -3
- package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-DC3MrDtI.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-Bb90PeHq.mjs +236 -0
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-Bb90PeHq.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default.mjs +484 -39
- package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-column.component-DjKLg513.mjs → acorex-platform-themes-shared-color-chooser-column.component-DjKLg513.mjs} +1 -1
- package/fesm2022/acorex-platform-themes-shared-color-chooser-column.component-DjKLg513.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-view.component-DE0wO98F.mjs → acorex-platform-themes-shared-color-chooser-view.component-DE0wO98F.mjs} +1 -1
- package/fesm2022/acorex-platform-themes-shared-color-chooser-view.component-DE0wO98F.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-shared.mjs +13 -11
- package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
- package/fesm2022/{acorex-platform-widgets-button-widget-designer.component-BJtkWusr.mjs → acorex-platform-widgets-button-widget-designer.component-lNF95FJv.mjs} +3 -3
- package/fesm2022/acorex-platform-widgets-button-widget-designer.component-lNF95FJv.mjs.map +1 -0
- package/fesm2022/{acorex-platform-widgets-checkbox-widget-column.component-DeKpl0uK.mjs → acorex-platform-widgets-checkbox-widget-column.component-BNBOATPB.mjs} +2 -1
- package/fesm2022/acorex-platform-widgets-checkbox-widget-column.component-BNBOATPB.mjs.map +1 -0
- package/fesm2022/{acorex-platform-widgets-checkbox-widget-designer.component-Cv7dEMCm.mjs → acorex-platform-widgets-checkbox-widget-designer.component-BI18uzNZ.mjs} +2 -2
- package/fesm2022/acorex-platform-widgets-checkbox-widget-designer.component-BI18uzNZ.mjs.map +1 -0
- package/fesm2022/{acorex-platform-widgets-color-box-widget-designer.component-CohkI1w1.mjs → acorex-platform-widgets-color-box-widget-designer.component-pYOQv5g8.mjs} +2 -2
- package/fesm2022/acorex-platform-widgets-color-box-widget-designer.component-pYOQv5g8.mjs.map +1 -0
- package/fesm2022/{acorex-platform-widgets-file-list-popup.component-BafU5Lfl.mjs → acorex-platform-widgets-file-list-popup.component-DFbPO0ud.mjs} +4 -69
- package/fesm2022/acorex-platform-widgets-file-list-popup.component-DFbPO0ud.mjs.map +1 -0
- package/fesm2022/{acorex-platform-widgets-page-widget-designer.component-Cw9WcZze.mjs → acorex-platform-widgets-page-widget-designer.component-DRsLkulH.mjs} +64 -74
- package/fesm2022/acorex-platform-widgets-page-widget-designer.component-DRsLkulH.mjs.map +1 -0
- package/fesm2022/{acorex-platform-widgets-tabular-data-edit-popup.component-BDQIfr0g.mjs → acorex-platform-widgets-tabular-data-edit-popup.component-nLZYiPnF.mjs} +5 -5
- package/fesm2022/{acorex-platform-widgets-tabular-data-edit-popup.component-BDQIfr0g.mjs.map → acorex-platform-widgets-tabular-data-edit-popup.component-nLZYiPnF.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-widgets-tabular-data-view-popup.component-CmPqtt0G.mjs → acorex-platform-widgets-tabular-data-view-popup.component-D6kiasYM.mjs} +3 -3
- package/fesm2022/{acorex-platform-widgets-tabular-data-view-popup.component-CmPqtt0G.mjs.map → acorex-platform-widgets-tabular-data-view-popup.component-D6kiasYM.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-widgets-text-block-widget-designer.component-DaR4Nkv4.mjs → acorex-platform-widgets-text-block-widget-designer.component-CCMQtH3e.mjs} +12 -8
- package/fesm2022/acorex-platform-widgets-text-block-widget-designer.component-CCMQtH3e.mjs.map +1 -0
- package/fesm2022/acorex-platform-widgets.mjs +1442 -2641
- package/fesm2022/acorex-platform-widgets.mjs.map +1 -1
- package/fesm2022/acorex-platform-workflow.mjs +0 -3
- package/fesm2022/acorex-platform-workflow.mjs.map +1 -1
- package/layout/builder/index.d.ts +181 -367
- package/layout/components/index.d.ts +20 -217
- package/layout/designer/index.d.ts +47 -16
- package/layout/entity/index.d.ts +336 -196
- package/layout/views/index.d.ts +21 -118
- package/package.json +37 -23
- package/widgets/index.d.ts +224 -275
- package/workflow/index.d.ts +1 -3
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-D3VUh8K8.mjs +0 -707
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-D3VUh8K8.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-16sdMBvH.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-BMkhNfF4.mjs +0 -244
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-BMkhNfF4.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-shared-theme-color-chooser-column.component-DjKLg513.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-shared-theme-color-chooser-view.component-DE0wO98F.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-button-widget-designer.component-BJtkWusr.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-checkbox-widget-column.component-DeKpl0uK.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-checkbox-widget-designer.component-Cv7dEMCm.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-color-box-widget-designer.component-CohkI1w1.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-extra-properties-schema-widget-edit.component-B3SJUnGQ.mjs +0 -50
- package/fesm2022/acorex-platform-widgets-extra-properties-schema-widget-edit.component-B3SJUnGQ.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-extra-properties-schema-widget-view.component-BLR0JkRt.mjs +0 -42
- package/fesm2022/acorex-platform-widgets-extra-properties-schema-widget-view.component-BLR0JkRt.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-extra-properties-values-widget-edit.component-hzR2FgOm.mjs +0 -55
- package/fesm2022/acorex-platform-widgets-extra-properties-values-widget-edit.component-hzR2FgOm.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-extra-properties-values-widget-view.component-IDm6Clua.mjs +0 -50
- package/fesm2022/acorex-platform-widgets-extra-properties-values-widget-view.component-IDm6Clua.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-extra-properties-widget-edit.component-BRO9tYDa.mjs +0 -48
- package/fesm2022/acorex-platform-widgets-extra-properties-widget-edit.component-BRO9tYDa.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-extra-properties-widget-view.component-CkpLimyW.mjs +0 -42
- package/fesm2022/acorex-platform-widgets-extra-properties-widget-view.component-CkpLimyW.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-file-list-popup.component-BafU5Lfl.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-page-widget-designer.component-Cw9WcZze.mjs.map +0 -1
- package/fesm2022/acorex-platform-widgets-text-block-widget-designer.component-DaR4Nkv4.mjs.map +0 -1
package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-hf4QOz_4.mjs
ADDED
|
@@ -0,0 +1,665 @@
|
|
|
1
|
+
import { AXActionSheetModule } from '@acorex/components/action-sheet';
|
|
2
|
+
import * as i7 from '@acorex/components/data-table';
|
|
3
|
+
import { AXDataTableModule } from '@acorex/components/data-table';
|
|
4
|
+
import { AXDrawerModule } from '@acorex/components/drawer';
|
|
5
|
+
import * as i1$2 from '@acorex/core/platform';
|
|
6
|
+
import * as i0 from '@angular/core';
|
|
7
|
+
import { inject, input, viewChild, signal, ViewEncapsulation, Component, EventEmitter, effect, Output, Input, untracked, ChangeDetectionStrategy, computed } from '@angular/core';
|
|
8
|
+
import { ActivatedRoute, RouterModule } from '@angular/router';
|
|
9
|
+
import { AXBadgeModule } from '@acorex/components/badge';
|
|
10
|
+
import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
|
|
11
|
+
import * as i3$3 from '@acorex/components/button';
|
|
12
|
+
import { AXButtonModule } from '@acorex/components/button';
|
|
13
|
+
import * as i2 from '@acorex/components/decorators';
|
|
14
|
+
import { AXDecoratorModule } from '@acorex/components/decorators';
|
|
15
|
+
import { AXDialogModule } from '@acorex/components/dialog';
|
|
16
|
+
import { AXDropdownModule } from '@acorex/components/dropdown';
|
|
17
|
+
import { AXFormModule } from '@acorex/components/form';
|
|
18
|
+
import { AXLoadingModule } from '@acorex/components/loading';
|
|
19
|
+
import * as i3$5 from '@acorex/components/popover';
|
|
20
|
+
import { AXPopoverModule } from '@acorex/components/popover';
|
|
21
|
+
import * as i6 from '@acorex/components/search-box';
|
|
22
|
+
import { AXSearchBoxModule } from '@acorex/components/search-box';
|
|
23
|
+
import * as i3$4 from '@acorex/components/tabs';
|
|
24
|
+
import { AXTabsModule } from '@acorex/components/tabs';
|
|
25
|
+
import { AXTooltipModule } from '@acorex/components/tooltip';
|
|
26
|
+
import * as i3$1 from '@acorex/core/translation';
|
|
27
|
+
import { AXTranslationService, AXTranslationModule, translateSync } from '@acorex/core/translation';
|
|
28
|
+
import { AXPAuthModule } from '@acorex/platform/auth';
|
|
29
|
+
import * as i7$1 from '@acorex/platform/layout/builder';
|
|
30
|
+
import { AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
|
|
31
|
+
import { AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPLayoutFiltersComponent, AXPThemeLayoutStartSideComponent } from '@acorex/platform/layout/components';
|
|
32
|
+
import { AXPWidgetsModule } from '@acorex/platform/widgets';
|
|
33
|
+
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
34
|
+
import * as i1 from '@angular/common';
|
|
35
|
+
import { CommonModule } from '@angular/common';
|
|
36
|
+
import * as i1$1 from '@angular/forms';
|
|
37
|
+
import { FormsModule } from '@angular/forms';
|
|
38
|
+
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
|
|
39
|
+
import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
|
|
40
|
+
import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
|
|
41
|
+
import * as i3 from '@acorex/components/skeleton';
|
|
42
|
+
import { AXSkeletonModule } from '@acorex/components/skeleton';
|
|
43
|
+
import * as i2$1 from '@acorex/components/tree-view';
|
|
44
|
+
import { AXTreeViewModule } from '@acorex/components/tree-view';
|
|
45
|
+
import { AXPEntityResolver } from '@acorex/platform/layout/entity';
|
|
46
|
+
import * as i3$2 from '@acorex/components/switch';
|
|
47
|
+
import { AXSwitchModule } from '@acorex/components/switch';
|
|
48
|
+
import { AXPSettingService } from '@acorex/platform/common';
|
|
49
|
+
import { cloneDeep } from 'lodash-es';
|
|
50
|
+
import { AXImageModule } from '@acorex/components/image';
|
|
51
|
+
import { AXSelectBoxModule } from '@acorex/components/select-box';
|
|
52
|
+
import { AXPopupService } from '@acorex/components/popup';
|
|
53
|
+
import { AXTextBoxModule } from '@acorex/components/text-box';
|
|
54
|
+
|
|
55
|
+
class AXPEntityCategoryComponent {
|
|
56
|
+
constructor() {
|
|
57
|
+
this.entityResolver = inject(AXPEntityResolver);
|
|
58
|
+
this.translate = inject(AXTranslationService);
|
|
59
|
+
this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : []));
|
|
60
|
+
this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
|
|
61
|
+
this.searchValue = input('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
|
|
62
|
+
this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
63
|
+
this.basicQueryEvent = {
|
|
64
|
+
skip: 0,
|
|
65
|
+
take: 1000,
|
|
66
|
+
};
|
|
67
|
+
this.treeItems = signal([
|
|
68
|
+
{
|
|
69
|
+
expand: true,
|
|
70
|
+
children: [],
|
|
71
|
+
},
|
|
72
|
+
], ...(ngDevMode ? [{ debugName: "treeItems" }] : []));
|
|
73
|
+
}
|
|
74
|
+
ngOnInit() {
|
|
75
|
+
this.getCategories();
|
|
76
|
+
}
|
|
77
|
+
async handleCategorySearchChange(e) {
|
|
78
|
+
if (this.categoryEntityDef) {
|
|
79
|
+
this.isLoading.set(true);
|
|
80
|
+
const categoryInlineFilters = this.categoryEntityDef.properties.filter((p) => p.options?.filter?.inline?.enabled);
|
|
81
|
+
const event = {
|
|
82
|
+
...this.basicQueryEvent,
|
|
83
|
+
filter: {
|
|
84
|
+
filters: [
|
|
85
|
+
{
|
|
86
|
+
filters: categoryInlineFilters.map((cif) => ({
|
|
87
|
+
field: cif.name,
|
|
88
|
+
operator: {
|
|
89
|
+
type: 'contains',
|
|
90
|
+
},
|
|
91
|
+
value: e.value,
|
|
92
|
+
})),
|
|
93
|
+
logic: 'or',
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
value: true,
|
|
97
|
+
field: this.categoryEntityDef.parentKey,
|
|
98
|
+
operator: {
|
|
99
|
+
type: 'isEmpty',
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
],
|
|
103
|
+
logic: 'and',
|
|
104
|
+
},
|
|
105
|
+
};
|
|
106
|
+
const res = await this.categoryEntityQueryFunc(event);
|
|
107
|
+
this.treeItems.update((prev) => prev.map((item) => ({ ...item, children: res.items })));
|
|
108
|
+
this.isLoading.set(false);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
async getCategories() {
|
|
112
|
+
this.isLoading.set(true);
|
|
113
|
+
this.categoryEntityDef = await this.getCategoryEntityDef();
|
|
114
|
+
this.categoryEntityQueryFunc = this.categoryEntityDef?.queries.list?.execute;
|
|
115
|
+
const res = await this.categoryEntityQueryFunc(this.basicQueryEvent);
|
|
116
|
+
const textField = this.vm().entityDef.category?.textField || 'title';
|
|
117
|
+
const valueField = this.vm().entityDef.category?.valueField || 'id';
|
|
118
|
+
const updatedItems = {
|
|
119
|
+
expand: true,
|
|
120
|
+
[textField]: await this.translate.translateAsync('allItems'),
|
|
121
|
+
[valueField]: 'all',
|
|
122
|
+
children: res.items,
|
|
123
|
+
};
|
|
124
|
+
this.treeItems.update((prev) => prev.map((_) => updatedItems));
|
|
125
|
+
this.isLoading.set(false);
|
|
126
|
+
}
|
|
127
|
+
async handleCollapseChanged(e) {
|
|
128
|
+
this.tree()?.setNodeLoading(e.data.id, true);
|
|
129
|
+
const event = {
|
|
130
|
+
...this.basicQueryEvent,
|
|
131
|
+
filter: {
|
|
132
|
+
field: this.categoryEntityDef?.parentKey,
|
|
133
|
+
value: e.data.id,
|
|
134
|
+
operator: {
|
|
135
|
+
type: 'equal',
|
|
136
|
+
},
|
|
137
|
+
},
|
|
138
|
+
};
|
|
139
|
+
const children = await this.categoryEntityQueryFunc(event);
|
|
140
|
+
// Recursive function to update children at any depth
|
|
141
|
+
const updateChildrenAtPath = (items, targetId) => {
|
|
142
|
+
return items.map((item) => {
|
|
143
|
+
if (item.id === targetId) {
|
|
144
|
+
return { ...item, children: children.items };
|
|
145
|
+
}
|
|
146
|
+
if (item.children?.length) {
|
|
147
|
+
return { ...item, children: updateChildrenAtPath(item.children, targetId) };
|
|
148
|
+
}
|
|
149
|
+
return item;
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
this.treeItems.update((prev) => prev.map((i) => ({
|
|
153
|
+
...i,
|
|
154
|
+
children: updateChildrenAtPath(prev[0].children, e.data.id),
|
|
155
|
+
})));
|
|
156
|
+
this.tree()?.setNodeLoading(e.data.id, false);
|
|
157
|
+
}
|
|
158
|
+
async getCategoryEntityDef() {
|
|
159
|
+
const [module, entity] = this.vm().entityDef.category?.entity?.split('.') || [];
|
|
160
|
+
return await this.entityResolver.get(module, entity);
|
|
161
|
+
}
|
|
162
|
+
handleNodeClick(event) {
|
|
163
|
+
const filters = this.vm()
|
|
164
|
+
.entityDef.category?.applyConditions?.map((f) => {
|
|
165
|
+
console.log({ f });
|
|
166
|
+
return event.data[f.value] !== 'all'
|
|
167
|
+
? {
|
|
168
|
+
field: f.name,
|
|
169
|
+
value: event.data[f.value],
|
|
170
|
+
operator: f.operator,
|
|
171
|
+
}
|
|
172
|
+
: null;
|
|
173
|
+
})
|
|
174
|
+
.filter((item) => item != null);
|
|
175
|
+
const viewFilters = this.vm()
|
|
176
|
+
.view()
|
|
177
|
+
.conditions.map((i) => ({ ...i, field: i.name }));
|
|
178
|
+
console.log({ viewFilters });
|
|
179
|
+
const newFilters = [...viewFilters, ...filters];
|
|
180
|
+
// this.vm().filterQueries.update((prev) => [...prev, ...filters!]);
|
|
181
|
+
this.vm().dataSource.filter({
|
|
182
|
+
filters: newFilters,
|
|
183
|
+
logic: 'and',
|
|
184
|
+
});
|
|
185
|
+
this.vm().dataSource.refresh();
|
|
186
|
+
}
|
|
187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n <axp-layout-toolbar>\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"'search.placeholder' | translate | async\"\n >\n </ax-search-box>\n </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n @if(isLoading()){\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n }@else if (treeItems()[0].children.length) {\n <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n <ax-tree-view\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"vm().entityDef.category?.textField || 'title'\"\n [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n [expandedField]=\"'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view>\n </div>\n }@else {\n <div class=\"ax-flex ax-items-center ax-justify-center\">\n <span class=\"ax-text-center\"> No Record Found! </span>\n </div>\n }\n\n <ng-template #itemTemplate let-item>\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n {{ item.title }}\n </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$1.AXTreeViewComponent, selector: "ax-tree-view", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
189
|
+
}
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
|
|
191
|
+
type: Component,
|
|
192
|
+
args: [{ selector: 'axp-entity-category', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
|
|
193
|
+
CommonModule,
|
|
194
|
+
AXDecoratorModule,
|
|
195
|
+
AXTreeViewModule,
|
|
196
|
+
AXSkeletonModule,
|
|
197
|
+
AXPThemeLayoutBlockComponent,
|
|
198
|
+
AXSearchBoxModule,
|
|
199
|
+
AXPThemeLayoutHeaderComponent,
|
|
200
|
+
AXPThemeLayoutToolbarComponent,
|
|
201
|
+
AXTranslationModule,
|
|
202
|
+
], template: "<!-- <ax-tree-view [items]=\"treeItems()\"></ax-tree-view> -->\n\n<axp-layout-header>\n <axp-layout-title>{{ vm().entityDef.category?.title || 'category' | translate | async }}</axp-layout-title>\n <axp-layout-toolbar>\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"'search.placeholder' | translate | async\"\n >\n </ax-search-box>\n </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n @if(isLoading()){\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n }@else if (treeItems()[0].children.length) {\n <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n <ax-tree-view\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"vm().entityDef.category?.textField || 'title'\"\n [valueField]=\"vm().entityDef.category?.valueField || 'id'\"\n [expandedField]=\"'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view>\n </div>\n }@else {\n <div class=\"ax-flex ax-items-center ax-justify-center\">\n <span class=\"ax-text-center\"> No Record Found! </span>\n </div>\n }\n\n <ng-template #itemTemplate let-item>\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n {{ item.title }}\n </ng-template>\n</axp-layout-content>\n" }]
|
|
203
|
+
}] });
|
|
204
|
+
|
|
205
|
+
class AXPListViewOptionsColumnsComponent {
|
|
206
|
+
constructor() {
|
|
207
|
+
this.settings = inject(AXPSettingService);
|
|
208
|
+
this.onClosed = new EventEmitter();
|
|
209
|
+
this.columnsChanged = effect(() => {
|
|
210
|
+
this.vm.onColumnsChanged(this.vm.columns());
|
|
211
|
+
//.map((c) => ({ visible: c.visible, name: c.name }))
|
|
212
|
+
}, ...(ngDevMode ? [{ debugName: "columnsChanged" }] : []));
|
|
213
|
+
}
|
|
214
|
+
handleVisibilityChange(e, name) {
|
|
215
|
+
if (e.isUserInteraction) {
|
|
216
|
+
this.vm.columns.update((prev) => {
|
|
217
|
+
return prev.map((c) => {
|
|
218
|
+
return c.name === name ? { ...c, visible: e.value ?? true } : c;
|
|
219
|
+
});
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
drop(event) {
|
|
224
|
+
const columns = cloneDeep(this.vm.columns());
|
|
225
|
+
moveItemInArray(columns, event.previousIndex, event.currentIndex);
|
|
226
|
+
this.vm.columns.set(columns);
|
|
227
|
+
}
|
|
228
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPListViewOptionsColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPListViewOptionsColumnsComponent, isStandalone: true, selector: "axp-list-view-option-columns", inputs: { vm: ["viewModel", "vm"] }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for(item of vm.columns();track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-switch\n class=\"ax-sm\"\n [ngModel]=\"item.visible\"\n (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n ></ax-switch>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$2.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }] }); }
|
|
230
|
+
}
|
|
231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPListViewOptionsColumnsComponent, decorators: [{
|
|
232
|
+
type: Component,
|
|
233
|
+
args: [{ selector: 'axp-list-view-option-columns', imports: [
|
|
234
|
+
CommonModule,
|
|
235
|
+
FormsModule,
|
|
236
|
+
CdkDropList,
|
|
237
|
+
CdkDrag,
|
|
238
|
+
CdkDragHandle,
|
|
239
|
+
AXButtonModule,
|
|
240
|
+
AXDecoratorModule,
|
|
241
|
+
AXSwitchModule,
|
|
242
|
+
AXTranslationModule,
|
|
243
|
+
], template: "<div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for(item of vm.columns();track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-switch\n class=\"ax-sm\"\n [ngModel]=\"item.visible\"\n (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n ></ax-switch>\n </div>\n }\n </div>\n</div>\n" }]
|
|
244
|
+
}], propDecorators: { vm: [{
|
|
245
|
+
type: Input,
|
|
246
|
+
args: ['viewModel']
|
|
247
|
+
}], onClosed: [{
|
|
248
|
+
type: Output
|
|
249
|
+
}] } });
|
|
250
|
+
|
|
251
|
+
class AXPListViewOptionSortingComponent {
|
|
252
|
+
constructor() {
|
|
253
|
+
this.isSM = false;
|
|
254
|
+
this.onClosed = new EventEmitter();
|
|
255
|
+
}
|
|
256
|
+
drop(event) {
|
|
257
|
+
moveItemInArray(this.vm.sortedFields(), event.previousIndex, event.currentIndex);
|
|
258
|
+
}
|
|
259
|
+
changeItemSort(item) {
|
|
260
|
+
const newDirection = item.dir === 'asc' ? 'desc' : item.dir === 'desc' ? undefined : 'asc';
|
|
261
|
+
this.vm.sortedFields.update((prev) => {
|
|
262
|
+
return prev.map((field) => {
|
|
263
|
+
if (field.name === item.name) {
|
|
264
|
+
return { ...field, dir: newDirection };
|
|
265
|
+
}
|
|
266
|
+
return field;
|
|
267
|
+
});
|
|
268
|
+
});
|
|
269
|
+
item.dir = newDirection;
|
|
270
|
+
this.vm.applyFilterAndSort();
|
|
271
|
+
}
|
|
272
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPListViewOptionSortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
273
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPListViewOptionSortingComponent, isStandalone: true, selector: "axp-list-view-option-sorting", inputs: { vm: ["viewModel", "vm"] }, outputs: { onClosed: "onClosed" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for(item of vm.sortedFields();track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n <ax-icon\n [class.ax-text-primary]=\"item.dir === 'asc'\"\n class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n ></ax-icon>\n <ax-icon\n [class.ax-text-primary]=\"item.dir === 'desc'\"\n class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n ></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
274
|
+
}
|
|
275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPListViewOptionSortingComponent, decorators: [{
|
|
276
|
+
type: Component,
|
|
277
|
+
args: [{ selector: 'axp-list-view-option-sorting', imports: [
|
|
278
|
+
AXTranslationModule,
|
|
279
|
+
CommonModule,
|
|
280
|
+
FormsModule,
|
|
281
|
+
CdkDropList,
|
|
282
|
+
CdkDrag,
|
|
283
|
+
CdkDragHandle,
|
|
284
|
+
AXButtonModule,
|
|
285
|
+
AXImageModule,
|
|
286
|
+
AXDecoratorModule,
|
|
287
|
+
AXSwitchModule,
|
|
288
|
+
AXSelectBoxModule,
|
|
289
|
+
], template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for(item of vm.sortedFields();track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n <ax-icon\n [class.ax-text-primary]=\"item.dir === 'asc'\"\n class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n ></ax-icon>\n <ax-icon\n [class.ax-text-primary]=\"item.dir === 'desc'\"\n class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n ></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </div>\n</div>\n" }]
|
|
290
|
+
}], propDecorators: { onClosed: [{
|
|
291
|
+
type: Output
|
|
292
|
+
}], vm: [{
|
|
293
|
+
type: Input,
|
|
294
|
+
args: ['viewModel']
|
|
295
|
+
}] } });
|
|
296
|
+
|
|
297
|
+
class AXPEntityViewToolbarComponent {
|
|
298
|
+
constructor() {
|
|
299
|
+
this.popupService = inject(AXPopupService);
|
|
300
|
+
this.translate = inject(AXTranslationService);
|
|
301
|
+
this.tabs = viewChild('tabs', ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
302
|
+
this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
|
|
303
|
+
this.#effect = effect(() => {
|
|
304
|
+
if (!this.isMounted())
|
|
305
|
+
return;
|
|
306
|
+
const views = untracked(() => this.vm.views());
|
|
307
|
+
if (!views)
|
|
308
|
+
return;
|
|
309
|
+
const selectedTab = views.findIndex((v) => v.name == this.vm.view().name);
|
|
310
|
+
untracked(() => {
|
|
311
|
+
if (selectedTab != -1) {
|
|
312
|
+
this.tabs()?.select(selectedTab);
|
|
313
|
+
}
|
|
314
|
+
});
|
|
315
|
+
}, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
|
|
316
|
+
}
|
|
317
|
+
ngAfterViewInit() {
|
|
318
|
+
this.isMounted.set(true);
|
|
319
|
+
}
|
|
320
|
+
#effect;
|
|
321
|
+
async openCreatePopup() {
|
|
322
|
+
const comp = (await import('./acorex-platform-themes-default-create-entity-view.component-SY0oMDoH.mjs')).AXPEntityCreateViewComponent;
|
|
323
|
+
const popup = this.popupService.open(comp, {
|
|
324
|
+
title: await this.translate.translateAsync('entity.views.create'),
|
|
325
|
+
size: 'lg',
|
|
326
|
+
data: {
|
|
327
|
+
node: this.vm.view(),
|
|
328
|
+
},
|
|
329
|
+
});
|
|
330
|
+
}
|
|
331
|
+
createNew() {
|
|
332
|
+
this.openCreatePopup();
|
|
333
|
+
}
|
|
334
|
+
handleActiveChange(e) {
|
|
335
|
+
console.log(e);
|
|
336
|
+
}
|
|
337
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityViewToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
338
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityViewToolbarComponent, isStandalone: true, selector: "axp-entity-view-toolbar", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full ax-flex ax-items-center ax-gap-4" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n @for (item of vm.views(); track item.name) {\n <ax-tab-item\n (onClick)=\"vm.setView(item.name)\"\n [key]=\"item.name\"\n [text]=\"(item.title | translate | async) || 'item.title'\"\n >\n </ax-tab-item>\n }\n <!-- <ax-tab-item\n (onClick)=\"createNew()\"\n [key]=\"'create-new'\"\n [text]=\"('view.createNew' | translate | async) || 'Create New'\"\n >\n </ax-tab-item> -->\n</ax-tabs>\n<!-- <ax-button (onClick)=\"openCreatePopup()\" class=\"ax-me-2\" [iconOnly]=\"true\">\n <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n</ax-button> -->\n", styles: [".axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i3$4.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i3$4.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
339
|
+
}
|
|
340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityViewToolbarComponent, decorators: [{
|
|
341
|
+
type: Component,
|
|
342
|
+
args: [{ selector: 'axp-entity-view-toolbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXTextBoxModule, AXTabsModule], host: {
|
|
343
|
+
class: 'ax-w-full ax-flex ax-items-center ax-gap-4',
|
|
344
|
+
}, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n @for (item of vm.views(); track item.name) {\n <ax-tab-item\n (onClick)=\"vm.setView(item.name)\"\n [key]=\"item.name\"\n [text]=\"(item.title | translate | async) || 'item.title'\"\n >\n </ax-tab-item>\n }\n <!-- <ax-tab-item\n (onClick)=\"createNew()\"\n [key]=\"'create-new'\"\n [text]=\"('view.createNew' | translate | async) || 'Create New'\"\n >\n </ax-tab-item> -->\n</ax-tabs>\n<!-- <ax-button (onClick)=\"openCreatePopup()\" class=\"ax-me-2\" [iconOnly]=\"true\">\n <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n</ax-button> -->\n", styles: [".axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"] }]
|
|
345
|
+
}], ctorParameters: () => [], propDecorators: { vm: [{
|
|
346
|
+
type: Input,
|
|
347
|
+
args: ['viewModel']
|
|
348
|
+
}] } });
|
|
349
|
+
|
|
350
|
+
class AXPEntityMasterToolbarViewComponent {
|
|
351
|
+
constructor() {
|
|
352
|
+
this.layoutService = inject(AXPLayoutThemeService);
|
|
353
|
+
this.parent = inject(AXPEntityMasterListViewComponent);
|
|
354
|
+
this.initialFilters = signal([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : []));
|
|
355
|
+
this.filtersDefinitions = signal([], ...(ngDevMode ? [{ debugName: "filtersDefinitions" }] : []));
|
|
356
|
+
this.#effect = effect(() => {
|
|
357
|
+
this.initialFilters.set(this.vm.view().conditions.map((c) => ({
|
|
358
|
+
field: c.name,
|
|
359
|
+
operator: c.operator,
|
|
360
|
+
value: c.value,
|
|
361
|
+
})));
|
|
362
|
+
}, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
|
|
363
|
+
}
|
|
364
|
+
ngOnInit() {
|
|
365
|
+
this.filtersDefinitions.set(this.vm.filtersDef);
|
|
366
|
+
}
|
|
367
|
+
#effect;
|
|
368
|
+
onFiltersChanged(filters) {
|
|
369
|
+
this.vm.filterQueries.set(filters);
|
|
370
|
+
this.vm.applyFilterAndSort();
|
|
371
|
+
}
|
|
372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, ngImport: i0, template: "<axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n <axp-layout-filters\n [filtersDefinitions]=\"filtersDefinitions()\"\n [initialFilters]=\"initialFilters()\"\n (onFiltersChanged)=\"onFiltersChanged($event)\"\n ></axp-layout-filters>\n\n <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n <i class=\"fa-light fa-table-columns\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"30\"\n [target]=\"columnButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ 'entity.columns' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns>\n </div>\n </div>\n </ax-popover>\n @if (vm.canSort()) {\n <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n <i class=\"fa-light fa-sort-amount-up\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"10\"\n [target]=\"sortButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ 'entity.sorts' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting>\n </div>\n </div>\n </ax-popover>\n }\n @if (layoutService.isSmall()) {\n <ax-button (onClick)=\"parent.toggleCategoryDrawer()\" [iconOnly]=\"true\" [color]=\"'default'\">\n <i class=\"fa-light fa-bars\"></i>\n </ax-button>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutFiltersComponent, selector: "axp-layout-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "component", type: AXPEntityViewToolbarComponent, selector: "axp-entity-view-toolbar", inputs: ["viewModel"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$5.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPListViewOptionSortingComponent, selector: "axp-list-view-option-sorting", inputs: ["viewModel"], outputs: ["onClosed"] }, { kind: "component", type: AXPListViewOptionsColumnsComponent, selector: "axp-list-view-option-columns", inputs: ["viewModel"], outputs: ["onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
374
|
+
}
|
|
375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, decorators: [{
|
|
376
|
+
type: Component,
|
|
377
|
+
args: [{ selector: 'axp-entity-master-toolbar-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
378
|
+
CommonModule,
|
|
379
|
+
AXButtonModule,
|
|
380
|
+
AXDecoratorModule,
|
|
381
|
+
AXTranslationModule,
|
|
382
|
+
AXPLayoutFiltersComponent,
|
|
383
|
+
AXPEntityViewToolbarComponent,
|
|
384
|
+
AXPopoverModule,
|
|
385
|
+
AXPListViewOptionSortingComponent,
|
|
386
|
+
AXPListViewOptionsColumnsComponent,
|
|
387
|
+
], host: {
|
|
388
|
+
class: 'ax-w-full',
|
|
389
|
+
}, template: "<axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n <axp-layout-filters\n [filtersDefinitions]=\"filtersDefinitions()\"\n [initialFilters]=\"initialFilters()\"\n (onFiltersChanged)=\"onFiltersChanged($event)\"\n ></axp-layout-filters>\n\n <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n <i class=\"fa-light fa-table-columns\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"30\"\n [target]=\"columnButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ 'entity.columns' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns>\n </div>\n </div>\n </ax-popover>\n @if (vm.canSort()) {\n <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n <i class=\"fa-light fa-sort-amount-up\"></i>\n </ax-button>\n <ax-popover\n [adaptivityEnabled]=\"true\"\n [offsetY]=\"10\"\n [target]=\"sortButton\"\n [openOn]=\"'toggle'\"\n [closeOn]=\"'clickOut'\"\n #popover\n >\n <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n {{ 'entity.sorts' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting>\n </div>\n </div>\n </ax-popover>\n }\n @if (layoutService.isSmall()) {\n <ax-button (onClick)=\"parent.toggleCategoryDrawer()\" [iconOnly]=\"true\" [color]=\"'default'\">\n <i class=\"fa-light fa-bars\"></i>\n </ax-button>\n }\n </div>\n</div>\n" }]
|
|
390
|
+
}], propDecorators: { vm: [{
|
|
391
|
+
type: Input,
|
|
392
|
+
args: ['viewModel']
|
|
393
|
+
}] } });
|
|
394
|
+
|
|
395
|
+
class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
|
|
396
|
+
constructor(platform) {
|
|
397
|
+
super();
|
|
398
|
+
this.platform = platform;
|
|
399
|
+
this.activeRoute = inject(ActivatedRoute);
|
|
400
|
+
this.vm = this.activeRoute.snapshot.data['vm'];
|
|
401
|
+
//
|
|
402
|
+
this.store = inject(AXPLayoutThemeService);
|
|
403
|
+
//
|
|
404
|
+
this.searchBarShown = signal(true, ...(ngDevMode ? [{ debugName: "searchBarShown" }] : []));
|
|
405
|
+
this.activeEndSideView = signal('column', ...(ngDevMode ? [{ debugName: "activeEndSideView" }] : []));
|
|
406
|
+
this.categorySearchValue = signal('', ...(ngDevMode ? [{ debugName: "categorySearchValue" }] : []));
|
|
407
|
+
// @ViewChild('grid', { static: true}) grid: AXDataTableComponent;
|
|
408
|
+
this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
409
|
+
this.commandRowItems = computed(() => {
|
|
410
|
+
return this.vm.primaryRowActions().map((c) => {
|
|
411
|
+
return {
|
|
412
|
+
icon: c.icon,
|
|
413
|
+
name: c.name,
|
|
414
|
+
text: translateSync(c.title),
|
|
415
|
+
color: c.color,
|
|
416
|
+
disabled: c.disabled,
|
|
417
|
+
default: c.default,
|
|
418
|
+
};
|
|
419
|
+
});
|
|
420
|
+
}, ...(ngDevMode ? [{ debugName: "commandRowItems" }] : []));
|
|
421
|
+
this.getDropdownRowItems = (rowData) => {
|
|
422
|
+
return Promise.resolve(this.dropdownRowItems(rowData));
|
|
423
|
+
};
|
|
424
|
+
this.getCommandRowItems = () => {
|
|
425
|
+
return this.commandRowItems();
|
|
426
|
+
};
|
|
427
|
+
effect(() => {
|
|
428
|
+
if (this.grid()) {
|
|
429
|
+
this.grid().selectedRows = this.vm.selectedItems();
|
|
430
|
+
}
|
|
431
|
+
});
|
|
432
|
+
//
|
|
433
|
+
this.vm.events$.subscribe(async (e) => {
|
|
434
|
+
const refreshTargetId = e.meta?.refreshTargetId;
|
|
435
|
+
if (e.action == 'refresh') {
|
|
436
|
+
if (refreshTargetId) {
|
|
437
|
+
this.grid()?.refreshItemChildren(refreshTargetId);
|
|
438
|
+
}
|
|
439
|
+
else {
|
|
440
|
+
this.grid()?.refresh({
|
|
441
|
+
reset: false,
|
|
442
|
+
});
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
});
|
|
446
|
+
}
|
|
447
|
+
ngAfterViewInit() {
|
|
448
|
+
this.vm.setView();
|
|
449
|
+
}
|
|
450
|
+
// protected closeFiltersDrawer(e: AXDrawerComponent, collapsed: boolean) {
|
|
451
|
+
// if (collapsed) {
|
|
452
|
+
// e.close();
|
|
453
|
+
// this.vm.discardFilters();
|
|
454
|
+
// }
|
|
455
|
+
// }
|
|
456
|
+
// handleChangeSearchValue(e: AXValueChangedEvent) {
|
|
457
|
+
// if (e.isUserInteraction) {
|
|
458
|
+
// this.vm.applyInlineFilter(e.value);
|
|
459
|
+
// }
|
|
460
|
+
// }
|
|
461
|
+
onColumnSizeChanged(e) {
|
|
462
|
+
if (e.isUserInteraction && e.type === 'end') {
|
|
463
|
+
this.vm.saveSettings('columnSizes', e.data);
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
onPageChanged(e) {
|
|
467
|
+
if (e.isUserInteraction) {
|
|
468
|
+
const pageSizeChanged = e.take != this.vm.dataSource.pageSize;
|
|
469
|
+
if (pageSizeChanged) {
|
|
470
|
+
this.vm.saveSettings('pageSize', e.take);
|
|
471
|
+
}
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
async dropdownRowItems(rowData) {
|
|
475
|
+
return (await this.vm.secondaryRowActions(rowData)).map((c) => ({
|
|
476
|
+
icon: c.icon,
|
|
477
|
+
name: c.name,
|
|
478
|
+
text: c.title,
|
|
479
|
+
color: c.color,
|
|
480
|
+
disabled: c.disabled,
|
|
481
|
+
default: c.default,
|
|
482
|
+
}));
|
|
483
|
+
}
|
|
484
|
+
async handleRowDbClick(e) {
|
|
485
|
+
const allItems = [...this.commandRowItems(), ...(await this.dropdownRowItems(e.data))];
|
|
486
|
+
const defaultAction = allItems.find((c) => c.default) || allItems[0];
|
|
487
|
+
const d = {
|
|
488
|
+
component: e.component,
|
|
489
|
+
name: defaultAction.name,
|
|
490
|
+
data: e.data,
|
|
491
|
+
};
|
|
492
|
+
this.handleRowCommandClick(d);
|
|
493
|
+
}
|
|
494
|
+
async handleRowCommandClick(e) {
|
|
495
|
+
this.vm.executeCommand(e.name, e.data);
|
|
496
|
+
}
|
|
497
|
+
async handleSelectedRowsChange(rows) {
|
|
498
|
+
this.vm.selectedItems.set(rows);
|
|
499
|
+
}
|
|
500
|
+
makeResponsive(value) {
|
|
501
|
+
if (this.platform.is('Mobile') || this.platform.is('SM')) {
|
|
502
|
+
return '';
|
|
503
|
+
}
|
|
504
|
+
else {
|
|
505
|
+
return value;
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
toggleSideBar(sideBar) {
|
|
509
|
+
this.toggleEndSide();
|
|
510
|
+
if (sideBar) {
|
|
511
|
+
this.activeEndSideView.set(sideBar);
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
toggleSearchBar() {
|
|
515
|
+
this.searchBarShown.update((v) => !v);
|
|
516
|
+
}
|
|
517
|
+
handleResetClick(sideBar) {
|
|
518
|
+
switch (sideBar) {
|
|
519
|
+
case 'filter': {
|
|
520
|
+
this.vm.resetFilters();
|
|
521
|
+
break;
|
|
522
|
+
}
|
|
523
|
+
case 'sort': {
|
|
524
|
+
this.vm.resetSorts();
|
|
525
|
+
break;
|
|
526
|
+
}
|
|
527
|
+
case 'column': {
|
|
528
|
+
this.vm.resetColumns();
|
|
529
|
+
break;
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
// protected handleDiscardClick(sideBar: 'filter' | 'sort' | 'column') {
|
|
534
|
+
// switch (sideBar) {
|
|
535
|
+
// case 'filter': {
|
|
536
|
+
// this.vm.discardFilters();
|
|
537
|
+
// break;
|
|
538
|
+
// }
|
|
539
|
+
// case 'sort': {
|
|
540
|
+
// this.vm.resetSorts();
|
|
541
|
+
// break;
|
|
542
|
+
// }
|
|
543
|
+
// case 'column': {
|
|
544
|
+
// this.vm.resetColumns();
|
|
545
|
+
// break;
|
|
546
|
+
// }
|
|
547
|
+
// }
|
|
548
|
+
// }
|
|
549
|
+
handleApplyClick(sideBar) {
|
|
550
|
+
this.vm.applyFilterAndSort();
|
|
551
|
+
this.toggleEndSide();
|
|
552
|
+
}
|
|
553
|
+
ngOnDestroy() {
|
|
554
|
+
this.vm.destroy();
|
|
555
|
+
}
|
|
556
|
+
toggleCategoryDrawer() {
|
|
557
|
+
this.toggleStartSide();
|
|
558
|
+
}
|
|
559
|
+
getPageTitle() {
|
|
560
|
+
return this.vm.title();
|
|
561
|
+
}
|
|
562
|
+
async getPageDescription() {
|
|
563
|
+
const description = this.vm.description();
|
|
564
|
+
if (description) {
|
|
565
|
+
return this.translateService.translateAsync(description);
|
|
566
|
+
}
|
|
567
|
+
return '';
|
|
568
|
+
}
|
|
569
|
+
getPageBreadcrumbs() {
|
|
570
|
+
return this.vm.beardcrumbs();
|
|
571
|
+
}
|
|
572
|
+
async getPrimaryMenuItems() {
|
|
573
|
+
return (await this.vm.getPrimaryActions()).map((tr) => ({
|
|
574
|
+
name: tr.name,
|
|
575
|
+
title: tr.title,
|
|
576
|
+
icon: tr.icon,
|
|
577
|
+
color: tr.color,
|
|
578
|
+
disabled: tr.disabled,
|
|
579
|
+
command: {
|
|
580
|
+
name: tr.name,
|
|
581
|
+
options: tr.options,
|
|
582
|
+
metadata: tr.metadata,
|
|
583
|
+
},
|
|
584
|
+
}));
|
|
585
|
+
}
|
|
586
|
+
async getSecondaryMenuItems() {
|
|
587
|
+
return (await this.vm.getSecondaryActions()).map((tr) => ({
|
|
588
|
+
name: tr.name,
|
|
589
|
+
title: tr.title,
|
|
590
|
+
icon: tr.icon,
|
|
591
|
+
color: tr.color,
|
|
592
|
+
disabled: tr.disabled,
|
|
593
|
+
separated: tr.separated,
|
|
594
|
+
command: {
|
|
595
|
+
name: tr.name,
|
|
596
|
+
options: tr.options,
|
|
597
|
+
metadata: tr.metadata,
|
|
598
|
+
},
|
|
599
|
+
}));
|
|
600
|
+
}
|
|
601
|
+
async execute(command) {
|
|
602
|
+
if (command) {
|
|
603
|
+
this.vm.execute(command);
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityMasterListViewComponent, deps: [{ token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPEntityMasterListViewComponent, isStandalone: true, selector: "axp-entity-master-list", providers: [
|
|
608
|
+
{
|
|
609
|
+
provide: AXPPageLayoutBase,
|
|
610
|
+
useExisting: AXPEntityMasterListViewComponent,
|
|
611
|
+
},
|
|
612
|
+
], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n @if (vm.entityDef.category) {\n <axp-layout-start-side>\n <axp-entity-category class=\"ax-w-80\" [vm]=\"vm\" [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar>\n <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n </axp-page-toolbar>\n <axp-page-content class=\"ax-overflow-auto\">\n <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [paging]=\"true\" [fetchDataMode]=\"'manual'\"\n [parentField]=\"vm.parentKey()\" [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"vm.dataSource\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowDbClick)=\"handleRowDbClick($event)\"\n (onColumnSizeChanged)=\"onColumnSizeChanged($event)\" (onPageChanged)=\"onPageChanged($event)\">\n @if (vm.view().indexCol === true) {\n <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n }\n @if (vm.selectedScopeActionsCount()) {\n <ax-select-column fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n }\n @for (col of vm.columns(); track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n [caption]=\"(col.title | translate | async)!\" [node]=\"col.node()\"\n [customWidth]=\"col.width\"></axp-widget-column-renderer>\n }\n }\n @if (getCommandRowItems().length) {\n <ax-command-column fixed=\"end\" [width]=\"getCommandRowItems().length * 60 + 'px'\" [items]=\"getCommandRowItems()\"\n (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n }\n <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n </ax-data-table>\n </axp-page-content>\n</axp-page-layout>", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i7.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i7.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i7.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i7.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i7.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type:
|
|
613
|
+
//
|
|
614
|
+
AXPLayoutBuilderModule }, { kind: "component", type: i7$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type:
|
|
615
|
+
//
|
|
616
|
+
AXPEntityMasterToolbarViewComponent, selector: "axp-entity-master-toolbar-view", inputs: ["viewModel"] }, { kind: "component", type:
|
|
617
|
+
//
|
|
618
|
+
AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPEntityCategoryComponent, selector: "axp-entity-category", inputs: ["vm", "searchValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
619
|
+
}
|
|
620
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPEntityMasterListViewComponent, decorators: [{
|
|
621
|
+
type: Component,
|
|
622
|
+
args: [{ selector: 'axp-entity-master-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
623
|
+
CommonModule,
|
|
624
|
+
FormsModule,
|
|
625
|
+
RouterModule,
|
|
626
|
+
AXButtonModule,
|
|
627
|
+
AXDecoratorModule,
|
|
628
|
+
AXBadgeModule,
|
|
629
|
+
AXDropdownModule,
|
|
630
|
+
AXPopoverModule,
|
|
631
|
+
AXFormModule,
|
|
632
|
+
AXActionSheetModule,
|
|
633
|
+
AXDrawerModule,
|
|
634
|
+
AXDialogModule,
|
|
635
|
+
AXLoadingModule,
|
|
636
|
+
AXTabsModule,
|
|
637
|
+
AXTooltipModule,
|
|
638
|
+
AXBreadcrumbsModule,
|
|
639
|
+
AXDropdownButtonModule,
|
|
640
|
+
AXSearchBoxModule,
|
|
641
|
+
AXDataTableModule,
|
|
642
|
+
AXTranslationModule,
|
|
643
|
+
DragDropModule,
|
|
644
|
+
//
|
|
645
|
+
AXPLayoutBuilderModule,
|
|
646
|
+
AXPWidgetsModule,
|
|
647
|
+
AXPAuthModule,
|
|
648
|
+
//
|
|
649
|
+
AXPEntityMasterToolbarViewComponent,
|
|
650
|
+
//
|
|
651
|
+
AXPPageLayoutComponent,
|
|
652
|
+
AXPThemeLayoutBlockComponent,
|
|
653
|
+
AXDropdownButtonModule,
|
|
654
|
+
AXPThemeLayoutStartSideComponent,
|
|
655
|
+
AXPEntityCategoryComponent,
|
|
656
|
+
], providers: [
|
|
657
|
+
{
|
|
658
|
+
provide: AXPPageLayoutBase,
|
|
659
|
+
useExisting: AXPEntityMasterListViewComponent,
|
|
660
|
+
},
|
|
661
|
+
], template: "<axp-page-layout *translate=\"let t\">\n @if (vm.entityDef.category) {\n <axp-layout-start-side>\n <axp-entity-category class=\"ax-w-80\" [vm]=\"vm\" [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar>\n <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n </axp-page-toolbar>\n <axp-page-content class=\"ax-overflow-auto\">\n <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1\" [paging]=\"true\" [fetchDataMode]=\"'manual'\"\n [parentField]=\"vm.parentKey()\" [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"vm.dataSource\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowDbClick)=\"handleRowDbClick($event)\"\n (onColumnSizeChanged)=\"onColumnSizeChanged($event)\" (onPageChanged)=\"onPageChanged($event)\">\n @if (vm.view().indexCol === true) {\n <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n }\n @if (vm.selectedScopeActionsCount()) {\n <ax-select-column fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n }\n @for (col of vm.columns(); track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n [caption]=\"(col.title | translate | async)!\" [node]=\"col.node()\"\n [customWidth]=\"col.width\"></axp-widget-column-renderer>\n }\n }\n @if (getCommandRowItems().length) {\n <ax-command-column fixed=\"end\" [width]=\"getCommandRowItems().length * 60 + 'px'\" [items]=\"getCommandRowItems()\"\n (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n }\n <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowItems\"\n (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n </ax-data-table>\n </axp-page-content>\n</axp-page-layout>", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"] }]
|
|
662
|
+
}], ctorParameters: () => [{ type: i1$2.AXPlatform }] });
|
|
663
|
+
|
|
664
|
+
export { AXPEntityMasterListViewComponent };
|
|
665
|
+
//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-hf4QOz_4.mjs.map
|