@acorex/platform 20.6.0-next.15 → 20.6.0-next.17
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/fesm2022/acorex-platform-layout-components.mjs +13 -13
- package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-entity.mjs +1617 -31
- package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-widgets.mjs +14 -2
- package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-xtWnr98z.mjs +136 -0
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-xtWnr98z.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-pBT9C2n8.mjs → acorex-platform-themes-default-entity-master-list-view.component-4nWLEm89.mjs} +207 -145
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-4nWLEm89.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default.mjs +4 -4
- package/layout/components/index.d.ts +4 -4
- package/layout/entity/index.d.ts +241 -7
- package/layout/widgets/index.d.ts +4 -0
- package/package.json +1 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-WbPPqDON.mjs +0 -115
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-WbPPqDON.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-pBT9C2n8.mjs.map +0 -1
|
@@ -4,11 +4,11 @@ import { AXDataTableModule } from '@acorex/components/data-table';
|
|
|
4
4
|
import { AXDrawerModule } from '@acorex/components/drawer';
|
|
5
5
|
import * as i1$1 from '@acorex/core/platform';
|
|
6
6
|
import * as i0 from '@angular/core';
|
|
7
|
-
import { inject, input, viewChild, signal, ViewEncapsulation, Component,
|
|
7
|
+
import { inject, input, viewChild, signal, computed, afterNextRender, ViewEncapsulation, Component, effect, Input, ChangeDetectionStrategy } from '@angular/core';
|
|
8
8
|
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
|
|
9
9
|
import { AXBadgeModule } from '@acorex/components/badge';
|
|
10
10
|
import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
|
|
11
|
-
import * as i3
|
|
11
|
+
import * as i3 from '@acorex/components/button';
|
|
12
12
|
import { AXButtonModule } from '@acorex/components/button';
|
|
13
13
|
import * as i2 from '@acorex/components/decorators';
|
|
14
14
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
|
@@ -17,7 +17,7 @@ import * as i5 from '@acorex/components/dropdown';
|
|
|
17
17
|
import { AXDropdownModule } from '@acorex/components/dropdown';
|
|
18
18
|
import { AXFormModule } from '@acorex/components/form';
|
|
19
19
|
import { AXLoadingModule } from '@acorex/components/loading';
|
|
20
|
-
import * as i3$
|
|
20
|
+
import * as i3$1 from '@acorex/components/popover';
|
|
21
21
|
import { AXPopoverModule } from '@acorex/components/popover';
|
|
22
22
|
import * as i6 from '@acorex/components/search-box';
|
|
23
23
|
import { AXSearchBoxModule } from '@acorex/components/search-box';
|
|
@@ -37,107 +37,149 @@ import { FormsModule } from '@angular/forms';
|
|
|
37
37
|
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
|
|
38
38
|
import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
|
|
39
39
|
import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
|
|
40
|
-
import * as
|
|
40
|
+
import * as i2$1 from '@acorex/components/skeleton';
|
|
41
41
|
import { AXSkeletonModule } from '@acorex/components/skeleton';
|
|
42
|
-
import
|
|
43
|
-
import {
|
|
42
|
+
import { AXTreeViewModule, AXTreeViewComponent } from '@acorex/components/tree-view';
|
|
43
|
+
import { AXPEntityResolver, AXPCategoryTreeService, AXPEntityListViewColumnViewModel } from '@acorex/platform/layout/entity';
|
|
44
44
|
import { AXPWorkflowService } from '@acorex/platform/workflow';
|
|
45
|
-
import { AXPEntityResolver, AXPEntityListViewColumnViewModel } from '@acorex/platform/layout/entity';
|
|
46
45
|
import { AXPDeviceService } from '@acorex/platform/core';
|
|
47
46
|
import { AXPSettingService, AXPCommonSettings } from '@acorex/platform/common';
|
|
48
47
|
import { isEqual } from 'lodash-es';
|
|
49
48
|
|
|
50
49
|
class AXPEntityCategoryComponent {
|
|
50
|
+
//#endregion
|
|
51
51
|
constructor() {
|
|
52
|
+
//#region ---- Services & Dependencies ----
|
|
52
53
|
this.entityResolver = inject(AXPEntityResolver);
|
|
53
54
|
this.translate = inject(AXTranslationService);
|
|
54
55
|
this.workflow = inject(AXPWorkflowService);
|
|
56
|
+
this.categoryTreeService = inject(AXPCategoryTreeService);
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region ---- Component Inputs & View Queries ----
|
|
55
59
|
this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : []));
|
|
56
60
|
this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
|
|
57
61
|
this.searchValue = input('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
|
|
62
|
+
//#endregion
|
|
63
|
+
//#region ---- Component State ----
|
|
58
64
|
this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
65
|
+
//#endregion
|
|
66
|
+
//#region ---- Private Properties ----
|
|
59
67
|
this.loadingTimeoutId = null;
|
|
60
68
|
this.LOADING_DELAY = 300; // Show skeleton only if loading takes more than 300ms
|
|
61
|
-
this.
|
|
62
|
-
|
|
63
|
-
|
|
69
|
+
this.treeData = null;
|
|
70
|
+
this.treeConfig = null;
|
|
71
|
+
this.searchResults = null;
|
|
72
|
+
// Computed values for field names to avoid repeated calculations
|
|
73
|
+
this.textField = computed(() => this.vm().entityDef.category?.textField || 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
|
|
74
|
+
this.valueField = computed(() => this.vm().entityDef.category?.valueField || 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
|
|
75
|
+
this.categoryEntityKey = computed(() => {
|
|
76
|
+
const key = this.vm().entityDef.category?.entity;
|
|
77
|
+
if (!key) {
|
|
78
|
+
throw new Error('Category entity is not configured');
|
|
79
|
+
}
|
|
80
|
+
return key;
|
|
81
|
+
}, ...(ngDevMode ? [{ debugName: "categoryEntityKey" }] : []));
|
|
82
|
+
//#region ---- Utility Methods ----
|
|
83
|
+
/** Datasource callback for tree-view component. */
|
|
84
|
+
this.datasource = async (id) => {
|
|
85
|
+
if (!this.treeData || !this.treeConfig) {
|
|
86
|
+
return [];
|
|
87
|
+
}
|
|
88
|
+
// If no id provided, return root nodes (or search results if available)
|
|
89
|
+
if (!id) {
|
|
90
|
+
// If we have search results, use them
|
|
91
|
+
if (this.searchResults) {
|
|
92
|
+
const rootNode = await this.categoryTreeService.createRootNode(this.searchResults, this.treeConfig);
|
|
93
|
+
return [rootNode];
|
|
94
|
+
}
|
|
95
|
+
// Otherwise load root categories
|
|
96
|
+
const items = await this.categoryTreeService.loadRootCategories(this.treeData, this.treeConfig);
|
|
97
|
+
if (!items) {
|
|
98
|
+
return [];
|
|
99
|
+
}
|
|
100
|
+
const rootNode = await this.categoryTreeService.createRootNode(items, this.treeConfig);
|
|
101
|
+
return [rootNode];
|
|
102
|
+
}
|
|
103
|
+
// Create a minimal node object with just the id (loadChildren only needs node.id)
|
|
104
|
+
const targetNode = {
|
|
105
|
+
id,
|
|
106
|
+
label: '',
|
|
107
|
+
data: {},
|
|
108
|
+
};
|
|
109
|
+
return await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
|
|
64
110
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
children: [],
|
|
69
|
-
},
|
|
70
|
-
], ...(ngDevMode ? [{ debugName: "treeItems" }] : []));
|
|
71
|
-
}
|
|
72
|
-
ngOnInit() {
|
|
73
|
-
this.getCategories();
|
|
111
|
+
afterNextRender(() => {
|
|
112
|
+
this.getCategories();
|
|
113
|
+
});
|
|
74
114
|
}
|
|
75
115
|
async handleCategorySearchChange(e) {
|
|
76
|
-
if (this.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
type: 'isEmpty',
|
|
99
|
-
},
|
|
100
|
-
},
|
|
101
|
-
],
|
|
102
|
-
logic: 'and',
|
|
103
|
-
},
|
|
104
|
-
};
|
|
105
|
-
const res = await this.categoryEntityQueryFunc(event);
|
|
106
|
-
this.treeItems.update((prev) => prev.map((item) => ({ ...item, children: res.items })));
|
|
116
|
+
if (!this.treeData || !this.treeConfig) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
this.setLoadingWithDelay(true);
|
|
120
|
+
try {
|
|
121
|
+
const items = await this.categoryTreeService.searchCategories(e.value, this.treeData, this.treeConfig);
|
|
122
|
+
if (!items) {
|
|
123
|
+
this.clearLoadingState();
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
// Store search results for datasource callback
|
|
127
|
+
this.searchResults = items;
|
|
128
|
+
// Trigger tree refresh
|
|
129
|
+
const treeComponent = this.tree();
|
|
130
|
+
if (treeComponent) {
|
|
131
|
+
treeComponent.refresh?.();
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
catch (error) {
|
|
135
|
+
console.error('Error searching categories:', error);
|
|
136
|
+
}
|
|
137
|
+
finally {
|
|
107
138
|
this.clearLoadingState();
|
|
108
139
|
}
|
|
109
140
|
}
|
|
110
141
|
async getCategories() {
|
|
111
|
-
// Set loading state with delay to avoid flickering
|
|
112
142
|
this.setLoadingWithDelay(true);
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
143
|
+
try {
|
|
144
|
+
const entityKey = this.categoryEntityKey();
|
|
145
|
+
this.treeConfig = {
|
|
146
|
+
entityKey,
|
|
147
|
+
textField: this.textField(),
|
|
148
|
+
valueField: this.valueField(),
|
|
149
|
+
};
|
|
150
|
+
this.treeData = await this.categoryTreeService.initializeCategoryTree(this.treeConfig);
|
|
151
|
+
if (!this.treeData) {
|
|
152
|
+
this.clearLoadingState();
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
// Get parentKey from entity definition
|
|
156
|
+
if (this.treeData.categoryEntityDef?.parentKey) {
|
|
157
|
+
this.treeConfig.parentKey = this.treeData.categoryEntityDef.parentKey;
|
|
158
|
+
}
|
|
159
|
+
// Tree will be loaded via datasource callback
|
|
160
|
+
// Clear any previous search results
|
|
161
|
+
this.searchResults = null;
|
|
162
|
+
}
|
|
163
|
+
catch (error) {
|
|
164
|
+
console.error('Error loading categories:', error);
|
|
165
|
+
}
|
|
166
|
+
finally {
|
|
167
|
+
this.clearLoadingState();
|
|
168
|
+
}
|
|
129
169
|
}
|
|
130
|
-
async
|
|
131
|
-
|
|
132
|
-
return await this.entityResolver.get(module, entity);
|
|
170
|
+
async onNodeToggle(event) {
|
|
171
|
+
// Tree component handles lazy loading via datasource callback
|
|
133
172
|
}
|
|
134
|
-
handleNodeClick(
|
|
135
|
-
const
|
|
136
|
-
|
|
137
|
-
|
|
173
|
+
handleNodeClick(node) {
|
|
174
|
+
const nodeData = (node.data || node);
|
|
175
|
+
const applyConditions = this.vm().entityDef.category?.applyConditions || [];
|
|
176
|
+
const filters = applyConditions
|
|
177
|
+
.map((f) => {
|
|
178
|
+
const value = nodeData[f.value];
|
|
179
|
+
return value !== 'all' && value != null
|
|
138
180
|
? {
|
|
139
181
|
field: f.name,
|
|
140
|
-
value
|
|
182
|
+
value,
|
|
141
183
|
operator: f.operator,
|
|
142
184
|
}
|
|
143
185
|
: null;
|
|
@@ -146,52 +188,31 @@ class AXPEntityCategoryComponent {
|
|
|
146
188
|
const viewFilters = this.vm()
|
|
147
189
|
.view()
|
|
148
190
|
.conditions.map((i) => ({ ...i, field: i.name }));
|
|
149
|
-
const newFilters = [...viewFilters, ...filters];
|
|
150
|
-
// this.vm().filterQueries.update((prev) => [...prev, ...filters!]);
|
|
151
191
|
this.vm().dataSource.filter({
|
|
152
|
-
filters:
|
|
192
|
+
filters: [...viewFilters, ...filters],
|
|
153
193
|
logic: 'and',
|
|
154
194
|
});
|
|
155
195
|
this.vm().dataSource.refresh();
|
|
156
196
|
}
|
|
157
|
-
|
|
158
|
-
/** Loads children for a given node id and updates the tree in place. */
|
|
197
|
+
/** Loads children for a given node id. Used for refresh operations. */
|
|
159
198
|
async loadChildrenAtNode(targetId) {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
field: this.categoryEntityDef?.parentKey,
|
|
165
|
-
value: targetId,
|
|
166
|
-
operator: { type: 'equal' },
|
|
167
|
-
},
|
|
168
|
-
};
|
|
169
|
-
const children = await this.categoryEntityQueryFunc(event);
|
|
170
|
-
const updateChildrenAtPath = (items, id) => {
|
|
171
|
-
return items.map((item) => {
|
|
172
|
-
if (item.id === id) {
|
|
173
|
-
return { ...item, children: children.items };
|
|
174
|
-
}
|
|
175
|
-
if (item.children?.length) {
|
|
176
|
-
return { ...item, children: updateChildrenAtPath(item.children, id) };
|
|
177
|
-
}
|
|
178
|
-
return item;
|
|
179
|
-
});
|
|
180
|
-
};
|
|
181
|
-
this.treeItems.update((prev) => prev.map((i) => ({ ...i, children: updateChildrenAtPath(prev[0].children, targetId) })));
|
|
182
|
-
this.tree()?.setNodeLoading(targetId, false);
|
|
199
|
+
// With the new datasource callback API, the tree component will automatically
|
|
200
|
+
// reload data when needed. For manual refresh, we may need to trigger
|
|
201
|
+
// the tree component's refresh mechanism if available.
|
|
202
|
+
// For now, the tree should handle refresh automatically via the datasource callback.
|
|
183
203
|
}
|
|
184
204
|
/** Returns the module.entity key for the configured category entity. */
|
|
185
205
|
getCategoryEntityKey() {
|
|
186
|
-
return this.
|
|
206
|
+
return this.categoryEntityKey();
|
|
187
207
|
}
|
|
188
208
|
/** Refresh tree after CRUD operations. */
|
|
189
209
|
async refreshAfterChange(parentId) {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
210
|
+
// Clear search results to show all categories
|
|
211
|
+
this.searchResults = null;
|
|
212
|
+
// Trigger tree refresh
|
|
213
|
+
const treeComponent = this.tree();
|
|
214
|
+
if (treeComponent) {
|
|
215
|
+
treeComponent.refresh?.();
|
|
195
216
|
}
|
|
196
217
|
}
|
|
197
218
|
//#endregion
|
|
@@ -200,49 +221,83 @@ class AXPEntityCategoryComponent {
|
|
|
200
221
|
async handleCreateRootClick(e) {
|
|
201
222
|
e.nativeEvent.preventDefault();
|
|
202
223
|
e.nativeEvent.stopPropagation();
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
224
|
+
try {
|
|
225
|
+
await this.workflow.execute('create-entity', {
|
|
226
|
+
entity: this.getCategoryEntityKey(),
|
|
227
|
+
options: { process: { redirect: false } },
|
|
228
|
+
});
|
|
229
|
+
await this.refreshAfterChange();
|
|
230
|
+
}
|
|
231
|
+
catch (error) {
|
|
232
|
+
console.error('Error creating root category:', error);
|
|
233
|
+
}
|
|
208
234
|
}
|
|
209
235
|
/** Create a new child under the given node. */
|
|
210
236
|
async handleCreateChildClick(node, e) {
|
|
211
237
|
e.nativeEvent.preventDefault();
|
|
212
238
|
e.nativeEvent.stopPropagation();
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
239
|
+
try {
|
|
240
|
+
const parentKey = this.treeData?.categoryEntityDef?.parentKey;
|
|
241
|
+
const data = {};
|
|
242
|
+
if (parentKey) {
|
|
243
|
+
data[parentKey] = node.id;
|
|
244
|
+
}
|
|
245
|
+
await this.workflow.execute('create-entity', {
|
|
246
|
+
entity: this.getCategoryEntityKey(),
|
|
247
|
+
data,
|
|
248
|
+
options: { process: { redirect: false, canCreateNewOne: true } },
|
|
249
|
+
});
|
|
250
|
+
await this.refreshAfterChange(node.id);
|
|
251
|
+
}
|
|
252
|
+
catch (error) {
|
|
253
|
+
console.error('Error creating child category:', error);
|
|
254
|
+
}
|
|
224
255
|
}
|
|
225
256
|
/** Update the given node. */
|
|
226
257
|
async handleEditNodeClick(node, e) {
|
|
227
258
|
e.nativeEvent.preventDefault();
|
|
228
259
|
e.nativeEvent.stopPropagation();
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
260
|
+
try {
|
|
261
|
+
const nodeData = (node.data || node);
|
|
262
|
+
await this.workflow.execute('quick-modify-entity', {
|
|
263
|
+
entity: this.getCategoryEntityKey(),
|
|
264
|
+
data: nodeData,
|
|
265
|
+
options: { layout: { size: 'md' } },
|
|
266
|
+
});
|
|
267
|
+
const parentKey = this.treeData?.categoryEntityDef?.parentKey;
|
|
268
|
+
if (parentKey && nodeData[parentKey]) {
|
|
269
|
+
await this.refreshAfterChange(nodeData[parentKey]);
|
|
270
|
+
}
|
|
271
|
+
else {
|
|
272
|
+
await this.refreshAfterChange();
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
catch (error) {
|
|
276
|
+
console.error('Error editing category:', error);
|
|
277
|
+
}
|
|
235
278
|
}
|
|
236
279
|
/** Delete the given node. */
|
|
237
280
|
async handleDeleteNodeClick(node, e) {
|
|
238
281
|
e.nativeEvent.preventDefault();
|
|
239
282
|
e.nativeEvent.stopPropagation();
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
283
|
+
try {
|
|
284
|
+
const nodeData = (node.data || node);
|
|
285
|
+
await this.workflow.execute('delete-entity', {
|
|
286
|
+
entity: this.getCategoryEntityKey(),
|
|
287
|
+
data: nodeData,
|
|
288
|
+
options: { process: { showResult: true } },
|
|
289
|
+
});
|
|
290
|
+
const parentKey = this.treeData?.categoryEntityDef?.parentKey;
|
|
291
|
+
if (parentKey && nodeData[parentKey]) {
|
|
292
|
+
await this.refreshAfterChange(nodeData[parentKey]);
|
|
293
|
+
}
|
|
294
|
+
else {
|
|
295
|
+
await this.refreshAfterChange();
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
catch (error) {
|
|
299
|
+
console.error('Error deleting category:', error);
|
|
300
|
+
}
|
|
246
301
|
}
|
|
247
302
|
//#endregion
|
|
248
303
|
//#region ---- Loading State Management ----
|
|
@@ -275,7 +330,7 @@ class AXPEntityCategoryComponent {
|
|
|
275
330
|
this.isLoading.set(false);
|
|
276
331
|
}
|
|
277
332
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
278
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n }}</axp-layout-title>\n <axp-layout-toolbar>\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"'@general:terms.interface.category.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 (treeData) {\n <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n <ax-tree-view\n [datasource]=\"datasource\"\n [showCheckbox]=\"false\"\n [showIcons]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n (onNodeToggle)=\"onNodeToggle($event)\"\n #tree\n >\n </ax-tree-view>\n </div>\n } @else {\n <axp-state-message\n icon=\"fa-light fa-folder-open\"\n [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n >\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.add-new.title' | translate | async\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let item = node.data || node;\n @let textField = vm().entityDef.category?.textField || 'title';\n @let valueField = vm().entityDef.category?.valueField || 'id';\n @let itemId = item[valueField] || node.id;\n @let itemTitle = item[textField] || node.label;\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\"\n (click)=\"handleNodeClick(node)\"\n >\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon\n class=\"fas fa-folder\"\n [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n ></ax-icon>\n <span class=\"ax-truncate\">{{ itemTitle }}</span>\n </div>\n @if (itemId && itemId !== 'all') {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n <ax-button-item\n (onClick)=\"handleCreateChildClick(node, $event)\"\n look=\"blank\"\n color=\"default\"\n text=\"Add New Child\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\" text=\"Edit\">\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(node, $event)\"\n color=\"danger\"\n look=\"blank\"\n text=\"Delete\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n } @else if (itemId === 'all') {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"], 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: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "showCheckbox", "checkChildrenOnSelect", "intermediateState", "checkOnClick", "dragMode", "dragOperationType", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "nodeHeight", "look", "itemTemplate"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.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", "autoSearch"], 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: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
279
334
|
}
|
|
280
335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
|
|
281
336
|
type: Component,
|
|
@@ -283,6 +338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
283
338
|
CommonModule,
|
|
284
339
|
AXDecoratorModule,
|
|
285
340
|
AXTreeViewModule,
|
|
341
|
+
AXTreeViewComponent,
|
|
286
342
|
AXSkeletonModule,
|
|
287
343
|
AXPThemeLayoutBlockComponent,
|
|
288
344
|
AXSearchBoxModule,
|
|
@@ -291,9 +347,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
291
347
|
AXTranslationModule,
|
|
292
348
|
AXButtonModule,
|
|
293
349
|
AXDropdownModule,
|
|
294
|
-
AXPStateMessageComponent
|
|
295
|
-
], template: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n
|
|
296
|
-
}], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }] } });
|
|
350
|
+
AXPStateMessageComponent,
|
|
351
|
+
], template: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n }}</axp-layout-title>\n <axp-layout-toolbar>\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"'@general:terms.interface.category.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 (treeData) {\n <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n <ax-tree-view\n [datasource]=\"datasource\"\n [showCheckbox]=\"false\"\n [showIcons]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n (onNodeToggle)=\"onNodeToggle($event)\"\n #tree\n >\n </ax-tree-view>\n </div>\n } @else {\n <axp-state-message\n icon=\"fa-light fa-folder-open\"\n [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n >\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.add-new.title' | translate | async\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let item = node.data || node;\n @let textField = vm().entityDef.category?.textField || 'title';\n @let valueField = vm().entityDef.category?.valueField || 'id';\n @let itemId = item[valueField] || node.id;\n @let itemTitle = item[textField] || node.label;\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\"\n (click)=\"handleNodeClick(node)\"\n >\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon\n class=\"fas fa-folder\"\n [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n ></ax-icon>\n <span class=\"ax-truncate\">{{ itemTitle }}</span>\n </div>\n @if (itemId && itemId !== 'all') {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n <ax-button-item\n (onClick)=\"handleCreateChildClick(node, $event)\"\n look=\"blank\"\n color=\"default\"\n text=\"Add New Child\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\" text=\"Edit\">\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(node, $event)\"\n color=\"danger\"\n look=\"blank\"\n text=\"Delete\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n } @else if (itemId === 'all') {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"] }]
|
|
352
|
+
}], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }] } });
|
|
297
353
|
|
|
298
354
|
class AXPEntityMasterToolbarViewComponent {
|
|
299
355
|
constructor() {
|
|
@@ -461,7 +517,7 @@ class AXPEntityMasterToolbarViewComponent {
|
|
|
461
517
|
// this.scheduleApply();
|
|
462
518
|
}
|
|
463
519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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<axp-query-views\n id=\"axp-toolbar-view-selector\"\n [views]=\"viewQueries()\"\n [selectedView]=\"selectedViewQuery()\"\n (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\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-query-filters\n id=\"axp-toolbar-filters\"\n [filtersDefinitions]=\"filtersDefinitions()\"\n [initialFilters]=\"initialFilters()\"\n (onFiltersChanged)=\"onFiltersChanged($event)\"\n ></axp-query-filters>\n\n <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n <ax-button\n id=\"axp-toolbar-btn-filter\"\n [title]=\"'@general:actions.apply.title'\"\n [iconOnly]=\"true\"\n #filterButton\n [color]=\"'primary'\"\n (onClick)=\"applyFilters()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-search\"></i>\n </ax-prefix>\n </ax-button>\n }\n <div>\n <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n <i class=\"fa-light fa-table-columns\"></i>\n </ax-button>\n <ax-popover\n id=\"axp-popover-columns\"\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 {{ '@general:terms.common.columns' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n <!-- <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns> -->\n </div>\n </div>\n </ax-popover>\n </div>\n\n @if (vm.canSort()) {\n <div>\n <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n <i class=\"fa-light fa-sort-amount-up\"></i>\n </ax-button>\n <ax-popover\n id=\"axp-popover-sort\"\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 {{ '@general:terms.common.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 <axp-query-sorts\n [sortDefinitions]=\"sortDefinitions()\"\n (sortQueriesChange)=\"onSortQueriesChange($event)\"\n [initialSortQueries]=\"sortQueries()\"\n ></axp-query-sorts>\n </div>\n </div>\n </ax-popover>\n </div>\n }\n @if (deviceService.isSmall()) {\n <ax-button\n id=\"axp-toolbar-btn-category\"\n (onClick)=\"parent.toggleCategoryDrawer()\"\n [iconOnly]=\"true\"\n [color]=\"'default'\"\n >\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
|
|
520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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<axp-query-views\n id=\"axp-toolbar-view-selector\"\n [views]=\"viewQueries()\"\n [selectedView]=\"selectedViewQuery()\"\n (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\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-query-filters\n id=\"axp-toolbar-filters\"\n [filtersDefinitions]=\"filtersDefinitions()\"\n [initialFilters]=\"initialFilters()\"\n (onFiltersChanged)=\"onFiltersChanged($event)\"\n ></axp-query-filters>\n\n <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n <ax-button\n id=\"axp-toolbar-btn-filter\"\n [title]=\"'@general:actions.apply.title'\"\n [iconOnly]=\"true\"\n #filterButton\n [color]=\"'primary'\"\n (onClick)=\"applyFilters()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-search\"></i>\n </ax-prefix>\n </ax-button>\n }\n <div>\n <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n <i class=\"fa-light fa-table-columns\"></i>\n </ax-button>\n <ax-popover\n id=\"axp-popover-columns\"\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 {{ '@general:terms.common.columns' | translate | async }}\n </ax-header>\n <div class=\"ax-py-2 ax-px-4\">\n <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n <!-- <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns> -->\n </div>\n </div>\n </ax-popover>\n </div>\n\n @if (vm.canSort()) {\n <div>\n <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n <i class=\"fa-light fa-sort-amount-up\"></i>\n </ax-button>\n <ax-popover\n id=\"axp-popover-sort\"\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 {{ '@general:terms.common.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 <axp-query-sorts\n [sortDefinitions]=\"sortDefinitions()\"\n (sortQueriesChange)=\"onSortQueriesChange($event)\"\n [initialSortQueries]=\"sortQueries()\"\n ></axp-query-sorts>\n </div>\n </div>\n </ax-popover>\n </div>\n }\n @if (deviceService.isSmall()) {\n <ax-button\n id=\"axp-toolbar-btn-category\"\n (onClick)=\"parent.toggleCategoryDrawer()\"\n [iconOnly]=\"true\"\n [color]=\"'default'\"\n >\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.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: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.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: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryViewsComponent, selector: "axp-query-views", inputs: ["views", "selectedView"], outputs: ["viewsChange", "selectedViewChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
465
521
|
}
|
|
466
522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, decorators: [{
|
|
467
523
|
type: Component,
|
|
@@ -628,7 +684,13 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
|
|
|
628
684
|
if (this.grid()?.dataSource.isLoading) {
|
|
629
685
|
return;
|
|
630
686
|
}
|
|
631
|
-
|
|
687
|
+
if (e.setLoading) {
|
|
688
|
+
e.setLoading(true);
|
|
689
|
+
}
|
|
690
|
+
await this.vm.executeCommand(e.name, e.data);
|
|
691
|
+
if (e.setLoading) {
|
|
692
|
+
e.setLoading(false);
|
|
693
|
+
}
|
|
632
694
|
}
|
|
633
695
|
async handleSelectedRowsChange(rows) {
|
|
634
696
|
this.vm.selectedItems.set(rows);
|
|
@@ -749,7 +811,7 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
|
|
|
749
811
|
provide: AXPPageLayoutBase,
|
|
750
812
|
useExisting: AXPEntityMasterListViewComponent,
|
|
751
813
|
},
|
|
752
|
-
], 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 id=\"axp-entity-category-drawer\">\n <axp-entity-category\n id=\"axp-entity-category\"\n class=\"ax-w-80\"\n [vm]=\"vm\"\n [searchValue]=\"categorySearchValue()\"\n ></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar id=\"axp-entity-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 ax-pt-0\">\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1\"\n [class.ax-invisible]=\"!grid.selectedRows.length\"\n >\n <span\n >{{ grid.selectedRows.length }}\n <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n </span>\n <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n </div>\n <ax-data-table\n id=\"axp-entity-table\"\n [allowReordering]=\"true\"\n (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\n #grid\n [showFooter]=\"false\"\n class=\"ax-flex-1\"\n [paging]=\"true\"\n [fetchDataMode]=\"'manual'\"\n [parentField]=\"vm.parentKey()\"\n [loading]=\"{ enabled: true, animation: true }\"\n [dataSource]=\"vm.dataSource\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\"\n (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n (onPageChanged)=\"onPageChanged($event)\"\n >\n @if (vm.view().indexCol === true) {\n <ax-index-column id=\"axp-table-col-index\" fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n }\n @if (vm.selectedScopeActionsCount()) {\n <ax-select-column id=\"axp-table-col-select\" 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\n [attr.id]=\"'axp-table-col-' + col.name\"\n [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n [caption]=\"(col.title | translate | async)!\"\n [node]=\"col.node()\"\n [customWidth]=\"col.width\"\n ></axp-widget-column-renderer>\n }\n }\n @if (getCommandRowItems().length) {\n <ax-command-column\n id=\"axp-table-col-commands\"\n fixed=\"end\"\n [width]=\"getCommandRowItems().length * 60 + 'px'\"\n [items]=\"getCommandRowItems()\"\n (onItemClick)=\"handleRowCommandClick($event)\"\n ></ax-command-column>\n }\n <ax-dropdown-command-column\n id=\"axp-table-col-dropdown-commands\"\n fixed=\"end\"\n [width]=\"'60px'\"\n [items]=\"getDropdownRowItems\"\n (onItemClick)=\"handleRowCommandClick($event)\"\n ></ax-dropdown-command-column>\n </ax-data-table>\n </axp-page-content>\n</axp-page-layout>\n", 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))}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}.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: "component", type: i3
|
|
814
|
+
], 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 id=\"axp-entity-category-drawer\">\n <axp-entity-category\n id=\"axp-entity-category\"\n class=\"ax-w-80\"\n [vm]=\"vm\"\n [searchValue]=\"categorySearchValue()\"\n ></axp-entity-category>\n </axp-layout-start-side>\n }\n <axp-page-toolbar id=\"axp-entity-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 ax-pt-0\">\n <div\n class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1\"\n [class.ax-invisible]=\"!grid.selectedRows.length\"\n >\n <span\n >{{ grid.selectedRows.length }}\n <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n </span>\n <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n </div>\n <ax-data-table\n id=\"axp-entity-table\"\n [allowReordering]=\"true\"\n (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\n #grid\n [showFooter]=\"false\"\n class=\"ax-flex-1\"\n [paging]=\"true\"\n [fetchDataMode]=\"'manual'\"\n [parentField]=\"vm.parentKey()\"\n [loading]=\"{ enabled: true, animation: true }\"\n [dataSource]=\"vm.dataSource\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\"\n (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n (onPageChanged)=\"onPageChanged($event)\"\n >\n @if (vm.view().indexCol === true) {\n <ax-index-column id=\"axp-table-col-index\" fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n }\n @if (vm.selectedScopeActionsCount()) {\n <ax-select-column id=\"axp-table-col-select\" 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\n [attr.id]=\"'axp-table-col-' + col.name\"\n [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n [caption]=\"(col.title | translate | async)!\"\n [node]=\"col.node()\"\n [customWidth]=\"col.width\"\n ></axp-widget-column-renderer>\n }\n }\n @if (getCommandRowItems().length) {\n <ax-command-column\n id=\"axp-table-col-commands\"\n fixed=\"end\"\n [width]=\"getCommandRowItems().length * 60 + 'px'\"\n [items]=\"getCommandRowItems()\"\n (onItemClick)=\"handleRowCommandClick($event)\"\n ></ax-command-column>\n }\n <ax-dropdown-command-column\n id=\"axp-table-col-dropdown-commands\"\n fixed=\"end\"\n [width]=\"'60px'\"\n [items]=\"getDropdownRowItems\"\n (onItemClick)=\"handleRowCommandClick($event)\"\n ></ax-dropdown-command-column>\n </ax-data-table>\n </axp-page-content>\n</axp-page-layout>\n", 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))}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}.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: "component", type: i3.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: "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", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i10.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type:
|
|
753
815
|
//
|
|
754
816
|
AXPWidgetCoreModule }, { 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:
|
|
755
817
|
//
|
|
@@ -802,4 +864,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
802
864
|
}], ctorParameters: () => [{ type: i1$1.AXPlatform }], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
|
|
803
865
|
|
|
804
866
|
export { AXPEntityMasterListViewComponent };
|
|
805
|
-
//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-
|
|
867
|
+
//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-4nWLEm89.mjs.map
|