@ai-table/grid 0.0.6 → 0.0.8
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/components/cell-editors/abstract-cell-editor.component.d.ts.map +1 -1
- package/components/cell-editors/cell-editor.scss +22 -2
- package/components/cell-editors/select/select-editor.component.d.ts +7 -8
- package/components/cell-editors/select/select-editor.component.d.ts.map +1 -1
- package/components/cell-views/select/option.component.d.ts +11 -0
- package/components/cell-views/select/option.component.d.ts.map +1 -0
- package/components/field-property-editor/field-property-editor.component.d.ts +13 -4
- package/components/field-property-editor/field-property-editor.component.d.ts.map +1 -1
- package/components/index.d.ts +1 -0
- package/components/index.d.ts.map +1 -1
- package/constants/field.d.ts.map +1 -1
- package/core/action/field.d.ts +3 -3
- package/core/action/field.d.ts.map +1 -1
- package/core/action/general.d.ts +1 -1
- package/core/action/general.d.ts.map +1 -1
- package/core/action/index.d.ts +1 -1
- package/core/action/record.d.ts +3 -3
- package/core/action/record.d.ts.map +1 -1
- package/core/constants/field.d.ts +22 -4
- package/core/constants/field.d.ts.map +1 -1
- package/core/types/action.d.ts +10 -8
- package/core/types/action.d.ts.map +1 -1
- package/core/types/core.d.ts +30 -18
- package/core/types/core.d.ts.map +1 -1
- package/core/utils/field.d.ts +1 -1
- package/core/utils/id-creator.d.ts +1 -1
- package/core/utils/id-creator.d.ts.map +1 -1
- package/core/utils/queries.d.ts +5 -4
- package/core/utils/queries.d.ts.map +1 -1
- package/esm2022/components/cell-editors/abstract-cell-editor.component.mjs +6 -8
- package/esm2022/components/cell-editors/date-time/date-time-editor.component.mjs +3 -3
- package/esm2022/components/cell-editors/link/number-editor.component.mjs +3 -3
- package/esm2022/components/cell-editors/number/number-editor.component.mjs +3 -3
- package/esm2022/components/cell-editors/progress/progress-editor.component.mjs +3 -3
- package/esm2022/components/cell-editors/rating/rating-editor.component.mjs +3 -3
- package/esm2022/components/cell-editors/select/select-editor.component.mjs +37 -27
- package/esm2022/components/cell-editors/text/text-editor.component.mjs +3 -3
- package/esm2022/components/cell-views/select/option.component.mjs +27 -0
- package/esm2022/components/field-menu/field-menu.component.mjs +3 -3
- package/esm2022/components/field-property-editor/field-property-editor.component.mjs +17 -13
- package/esm2022/components/index.mjs +2 -1
- package/esm2022/constants/field.mjs +3 -4
- package/esm2022/core/action/field.mjs +12 -9
- package/esm2022/core/action/general.mjs +45 -32
- package/esm2022/core/action/record.mjs +1 -1
- package/esm2022/core/constants/field.mjs +10 -2
- package/esm2022/core/types/action.mjs +1 -1
- package/esm2022/core/types/core.mjs +8 -1
- package/esm2022/core/utils/field.mjs +3 -3
- package/esm2022/core/utils/id-creator.mjs +4 -10
- package/esm2022/core/utils/queries.mjs +12 -12
- package/esm2022/grid.component.mjs +19 -13
- package/esm2022/pipes/grid.pipe.mjs +67 -7
- package/esm2022/services/event.service.mjs +8 -5
- package/esm2022/services/field.service.mjs +6 -6
- package/esm2022/services/selection.service.mjs +3 -3
- package/esm2022/types/field.mjs +1 -1
- package/esm2022/types/grid.mjs +1 -1
- package/esm2022/utils/build.mjs +4 -27
- package/fesm2022/ai-table-grid.mjs +275 -177
- package/fesm2022/ai-table-grid.mjs.map +1 -1
- package/grid.component.d.ts +2 -1
- package/grid.component.d.ts.map +1 -1
- package/package.json +4 -3
- package/pipes/grid.pipe.d.ts +22 -2
- package/pipes/grid.pipe.d.ts.map +1 -1
- package/services/event.service.d.ts +1 -0
- package/services/event.service.d.ts.map +1 -1
- package/services/field.service.d.ts +1 -1
- package/services/field.service.d.ts.map +1 -1
- package/styles/styles.scss +2 -3
- package/types/field.d.ts +4 -1
- package/types/field.d.ts.map +1 -1
- package/types/grid.d.ts +2 -1
- package/types/grid.d.ts.map +1 -1
- package/utils/build.d.ts +2 -3
- package/utils/build.d.ts.map +1 -1
@@ -6,6 +6,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
7
7
|
import { FormsModule } from '@angular/forms';
|
8
8
|
import { ThyAction } from 'ngx-tethys/action';
|
9
|
+
import * as i4 from 'ngx-tethys/avatar';
|
10
|
+
import { ThyAvatarModule } from 'ngx-tethys/avatar';
|
9
11
|
import * as i3 from 'ngx-tethys/checkbox';
|
10
12
|
import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
|
11
13
|
import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
|
@@ -19,12 +21,15 @@ import { ThyRate } from 'ngx-tethys/rate';
|
|
19
21
|
import { ThyAutofocusDirective, ThyEnterDirective, ThyOption, ThyStopPropagationDirective } from 'ngx-tethys/shared';
|
20
22
|
import { ThyTag } from 'ngx-tethys/tag';
|
21
23
|
import { mergeWith } from 'rxjs/operators';
|
24
|
+
import ObjectID from 'bson-objectid';
|
22
25
|
import { helpers, isUndefinedOrNull } from 'ngx-tethys/util';
|
23
26
|
import { createDraft, finishDraft } from 'immer';
|
24
27
|
import { ThyTimePickerModule } from 'ngx-tethys/time-picker';
|
25
28
|
import { ThyInputNumber } from 'ngx-tethys/input-number';
|
26
29
|
import { ThySlider } from 'ngx-tethys/slider';
|
27
30
|
import { ThyInputDirective, ThyInputGroup, ThyInputCount, ThyInput } from 'ngx-tethys/input';
|
31
|
+
import { ThyDot } from 'ngx-tethys/dot';
|
32
|
+
import { ThyTooltipModule } from 'ngx-tethys/tooltip';
|
28
33
|
import * as i2 from 'ngx-tethys/form';
|
29
34
|
import { ThyUniqueCheckValidator, ThyFormModule, ThyConfirmValidatorDirective } from 'ngx-tethys/form';
|
30
35
|
import { ThyButton } from 'ngx-tethys/button';
|
@@ -32,8 +37,7 @@ import { ThyListItem } from 'ngx-tethys/list';
|
|
32
37
|
import { of, Subject, fromEvent, debounceTime } from 'rxjs';
|
33
38
|
import { ThyDivider } from 'ngx-tethys/divider';
|
34
39
|
import { ThySelect } from 'ngx-tethys/select';
|
35
|
-
import
|
36
|
-
import { ThyAvatarModule } from 'ngx-tethys/avatar';
|
40
|
+
import { Overlay } from '@angular/cdk/overlay';
|
37
41
|
|
38
42
|
var AITableFieldType;
|
39
43
|
(function (AITableFieldType) {
|
@@ -73,6 +77,13 @@ var AITableStatType;
|
|
73
77
|
AITableStatType[AITableStatType["PercentChecked"] = 16] = "PercentChecked";
|
74
78
|
AITableStatType[AITableStatType["PercentUnChecked"] = 17] = "PercentUnChecked";
|
75
79
|
})(AITableStatType || (AITableStatType = {}));
|
80
|
+
var AITableSelectOptionStyle;
|
81
|
+
(function (AITableSelectOptionStyle) {
|
82
|
+
AITableSelectOptionStyle["text"] = "text";
|
83
|
+
AITableSelectOptionStyle["tag"] = "tag";
|
84
|
+
AITableSelectOptionStyle["dot"] = "dot";
|
85
|
+
AITableSelectOptionStyle["piece"] = "piece";
|
86
|
+
})(AITableSelectOptionStyle || (AITableSelectOptionStyle = {}));
|
76
87
|
|
77
88
|
var ActionName;
|
78
89
|
(function (ActionName) {
|
@@ -92,15 +103,8 @@ var ExecuteType;
|
|
92
103
|
ExecuteType[ExecuteType["Redo"] = 2] = "Redo";
|
93
104
|
})(ExecuteType || (ExecuteType = {}));
|
94
105
|
|
95
|
-
function idCreator(
|
96
|
-
|
97
|
-
const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /**** Easily confusing characters are removed by default oOLl,9gq,Vv,Uu,I1****/
|
98
|
-
const maxPosition = $chars.length;
|
99
|
-
let key = '';
|
100
|
-
for (let i = 0; i < length; i++) {
|
101
|
-
key += $chars.charAt(Math.floor(Math.random() * maxPosition));
|
102
|
-
}
|
103
|
-
return key;
|
106
|
+
function idCreator() {
|
107
|
+
return ObjectID().toHexString();
|
104
108
|
}
|
105
109
|
|
106
110
|
const BasicFields = [
|
@@ -117,7 +121,15 @@ const BasicFields = [
|
|
117
121
|
icon: 'check-circle',
|
118
122
|
width: 200
|
119
123
|
},
|
120
|
-
|
124
|
+
{
|
125
|
+
type: AITableFieldType.select,
|
126
|
+
name: '多选',
|
127
|
+
icon: 'list-check',
|
128
|
+
width: 200,
|
129
|
+
settings: {
|
130
|
+
is_multiple: true
|
131
|
+
}
|
132
|
+
},
|
121
133
|
{
|
122
134
|
type: AITableFieldType.number,
|
123
135
|
name: '数字',
|
@@ -185,7 +197,7 @@ const Fields = [...BasicFields];
|
|
185
197
|
const FieldsMap = helpers.keyBy([...BasicFields], 'type');
|
186
198
|
|
187
199
|
function getDefaultFieldValue(field) {
|
188
|
-
if ([AITableFieldType.member, AITableFieldType.createdBy, AITableFieldType.updatedBy].includes(field.type)) {
|
200
|
+
if ([AITableFieldType.select, AITableFieldType.member, AITableFieldType.createdBy, AITableFieldType.updatedBy].includes(field.type)) {
|
189
201
|
return [];
|
190
202
|
}
|
191
203
|
return '';
|
@@ -193,7 +205,7 @@ function getDefaultFieldValue(field) {
|
|
193
205
|
function createDefaultFieldName(aiTable, type = AITableFieldType.text) {
|
194
206
|
const fields = aiTable.fields();
|
195
207
|
const count = fields.filter((item) => item.type === type).length;
|
196
|
-
return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + count;
|
208
|
+
return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + ' ' + count;
|
197
209
|
}
|
198
210
|
function createDefaultField(aiTable, type = AITableFieldType.text) {
|
199
211
|
return { _id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
|
@@ -243,19 +255,19 @@ function getDefaultRecord(fields) {
|
|
243
255
|
}
|
244
256
|
|
245
257
|
const AITableQueries = {
|
246
|
-
|
258
|
+
findRecordPath(aiTable, record) {
|
247
259
|
const recordIndex = record && aiTable.records().indexOf(record);
|
248
|
-
const fieldIndex = field && aiTable.fields().indexOf(field);
|
249
|
-
if (!isUndefinedOrNull(recordIndex) && recordIndex > -1 && !isUndefinedOrNull(fieldIndex) && fieldIndex > -1) {
|
250
|
-
return [recordIndex, fieldIndex];
|
251
|
-
}
|
252
260
|
if (!isUndefinedOrNull(recordIndex) && recordIndex > -1) {
|
253
261
|
return [recordIndex];
|
254
262
|
}
|
263
|
+
throw new Error(`can not find the record path: ${JSON.stringify({ ...(record || {}) })}`);
|
264
|
+
},
|
265
|
+
findFieldPath(aiTable, field) {
|
266
|
+
const fieldIndex = field && aiTable.fields().indexOf(field);
|
255
267
|
if (!isUndefinedOrNull(fieldIndex) && fieldIndex > -1) {
|
256
268
|
return [fieldIndex];
|
257
269
|
}
|
258
|
-
throw new Error(`can not find the path: ${JSON.stringify({ ...(field || {})
|
270
|
+
throw new Error(`can not find the field path: ${JSON.stringify({ ...(field || {}) })}`);
|
259
271
|
},
|
260
272
|
getFieldValue(aiTable, path) {
|
261
273
|
if (!aiTable) {
|
@@ -270,11 +282,11 @@ const AITableQueries = {
|
|
270
282
|
if (!path) {
|
271
283
|
throw new Error(`path does not exist as path [${path}]`);
|
272
284
|
}
|
273
|
-
const
|
274
|
-
if (
|
275
|
-
throw new Error(`can not find
|
285
|
+
const recordIndex = aiTable.records().findIndex((item) => item._id === path[0]);
|
286
|
+
if (recordIndex < 0) {
|
287
|
+
throw new Error(`can not find record at path [${path}]`);
|
276
288
|
}
|
277
|
-
return aiTable.records()[
|
289
|
+
return aiTable.records()[recordIndex].values[path[1]];
|
278
290
|
},
|
279
291
|
getField(aiTable, path) {
|
280
292
|
if (!aiTable) {
|
@@ -283,7 +295,7 @@ const AITableQueries = {
|
|
283
295
|
if (!path) {
|
284
296
|
throw new Error(`path does not exist as path [${path}]`);
|
285
297
|
}
|
286
|
-
return aiTable.fields()
|
298
|
+
return aiTable.fields().find(item => item._id === path[0]);
|
287
299
|
},
|
288
300
|
getRecord(aiTable, path) {
|
289
301
|
if (!aiTable) {
|
@@ -322,20 +334,23 @@ function removeField(aiTable, path) {
|
|
322
334
|
function setField(aiTable, value, path) {
|
323
335
|
const field = AITableQueries.getField(aiTable, path);
|
324
336
|
if (field) {
|
325
|
-
const
|
326
|
-
const
|
327
|
-
for (const
|
328
|
-
|
337
|
+
const properties = {};
|
338
|
+
const newProperties = {};
|
339
|
+
for (const key in value) {
|
340
|
+
const k = key;
|
341
|
+
if (field[k]?.toString() !== value[k]?.toString()) {
|
329
342
|
if (field.hasOwnProperty(k)) {
|
330
|
-
|
343
|
+
properties[k] = field[k];
|
344
|
+
}
|
345
|
+
if (newProperties[k] !== null) {
|
346
|
+
newProperties[k] = value[k];
|
331
347
|
}
|
332
|
-
newField[k] = value[k];
|
333
348
|
}
|
334
349
|
}
|
335
350
|
const operation = {
|
336
351
|
type: ActionName.SetField,
|
337
|
-
|
338
|
-
|
352
|
+
properties,
|
353
|
+
newProperties,
|
339
354
|
path
|
340
355
|
};
|
341
356
|
aiTable.apply(operation);
|
@@ -348,30 +363,30 @@ const FieldActions = {
|
|
348
363
|
setField
|
349
364
|
};
|
350
365
|
|
351
|
-
const apply = (aiTable, records, fields,
|
352
|
-
switch (
|
366
|
+
const apply = (aiTable, records, fields, action) => {
|
367
|
+
switch (action.type) {
|
353
368
|
case ActionName.UpdateFieldValue: {
|
354
|
-
const [
|
355
|
-
if (
|
356
|
-
const
|
357
|
-
records[recordIndex].values[fieldId] =
|
369
|
+
const [recordId, fieldId] = action.path;
|
370
|
+
if (recordId && fieldId) {
|
371
|
+
const recordIndex = aiTable.records().findIndex((item) => item._id === recordId);
|
372
|
+
records[recordIndex].values[fieldId] = action.newFieldValue;
|
358
373
|
}
|
359
374
|
break;
|
360
375
|
}
|
361
376
|
case ActionName.AddRecord: {
|
362
|
-
const [recordIndex] =
|
377
|
+
const [recordIndex] = action.path;
|
363
378
|
if (recordIndex > -1) {
|
364
|
-
records.splice(recordIndex, 0,
|
379
|
+
records.splice(recordIndex, 0, action.record);
|
365
380
|
}
|
366
381
|
break;
|
367
382
|
}
|
368
383
|
case ActionName.AddField: {
|
369
|
-
const [fieldIndex] =
|
384
|
+
const [fieldIndex] = action.path;
|
370
385
|
if (fieldIndex > -1) {
|
371
|
-
const newField =
|
386
|
+
const newField = action.field;
|
372
387
|
fields.splice(fieldIndex, 0, newField);
|
373
388
|
const newRecord = {
|
374
|
-
[newField._id]:
|
389
|
+
[newField._id]: getDefaultFieldValue(action.field)
|
375
390
|
};
|
376
391
|
records.forEach((item) => {
|
377
392
|
item.values = {
|
@@ -383,27 +398,27 @@ const apply = (aiTable, records, fields, options) => {
|
|
383
398
|
break;
|
384
399
|
}
|
385
400
|
case ActionName.MoveRecord: {
|
386
|
-
if (isPathEqual(
|
401
|
+
if (isPathEqual(action.path, action.newPath)) {
|
387
402
|
return;
|
388
403
|
}
|
389
|
-
const record = records[
|
390
|
-
records.splice(
|
391
|
-
records.splice(
|
404
|
+
const record = records[action.path[0]];
|
405
|
+
records.splice(action.path[0], 1);
|
406
|
+
records.splice(action.newPath[0], 0, record);
|
392
407
|
break;
|
393
408
|
}
|
394
409
|
case ActionName.MoveField: {
|
395
|
-
if (isPathEqual(
|
410
|
+
if (isPathEqual(action.path, action.newPath)) {
|
396
411
|
return;
|
397
412
|
}
|
398
|
-
const field = fields[
|
399
|
-
fields.splice(
|
400
|
-
fields.splice(
|
413
|
+
const field = fields[action.path[0]];
|
414
|
+
fields.splice(action.path[0], 1);
|
415
|
+
fields.splice(action.newPath[0], 0, field);
|
401
416
|
break;
|
402
417
|
}
|
403
418
|
case ActionName.RemoveField: {
|
404
|
-
const [
|
419
|
+
const [fieldId] = action.path;
|
420
|
+
const fieldIndex = aiTable.fields().findIndex((item) => item._id === fieldId);
|
405
421
|
if (fieldIndex > -1) {
|
406
|
-
const fieldId = aiTable.fields()[fieldIndex]._id;
|
407
422
|
fields.splice(fieldIndex, 1);
|
408
423
|
records.forEach((item) => {
|
409
424
|
delete item.values[fieldId];
|
@@ -412,19 +427,32 @@ const apply = (aiTable, records, fields, options) => {
|
|
412
427
|
break;
|
413
428
|
}
|
414
429
|
case ActionName.RemoveRecord: {
|
415
|
-
const [
|
430
|
+
const [recordId] = action.path;
|
431
|
+
const recordIndex = aiTable.records().findIndex((item) => item._id === recordId);
|
416
432
|
if (recordIndex > -1) {
|
417
433
|
records.splice(recordIndex, 1);
|
418
434
|
}
|
419
435
|
break;
|
420
436
|
}
|
421
437
|
case ActionName.SetField: {
|
422
|
-
const
|
423
|
-
if (
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
438
|
+
const field = fields.find((item) => item._id === action.path[0]);
|
439
|
+
if (field) {
|
440
|
+
for (const key in action.newProperties) {
|
441
|
+
const k = key;
|
442
|
+
const value = action.newProperties[k];
|
443
|
+
if (value == null) {
|
444
|
+
delete field[k];
|
445
|
+
}
|
446
|
+
else {
|
447
|
+
field[k] = value;
|
448
|
+
}
|
449
|
+
}
|
450
|
+
// properties that were previously defined, but are now missing, must be deleted
|
451
|
+
for (const key in action.properties) {
|
452
|
+
if (!action.newProperties.hasOwnProperty(key)) {
|
453
|
+
delete field[key];
|
454
|
+
}
|
455
|
+
}
|
428
456
|
}
|
429
457
|
break;
|
430
458
|
}
|
@@ -435,10 +463,10 @@ const apply = (aiTable, records, fields, options) => {
|
|
435
463
|
};
|
436
464
|
};
|
437
465
|
const GeneralActions = {
|
438
|
-
transform(aiTable,
|
466
|
+
transform(aiTable, action) {
|
439
467
|
const records = createDraft(aiTable.records());
|
440
468
|
const fields = createDraft(aiTable.fields());
|
441
|
-
apply(aiTable, records, fields,
|
469
|
+
apply(aiTable, records, fields, action);
|
442
470
|
aiTable.fields.update(() => {
|
443
471
|
return finishDraft(fields);
|
444
472
|
});
|
@@ -504,21 +532,19 @@ class AbstractEditCellEditor {
|
|
504
532
|
}
|
505
533
|
ngOnInit() {
|
506
534
|
this.modelValue = computed(() => {
|
507
|
-
|
508
|
-
return AITableQueries.getFieldValue(this.aiTable, path);
|
535
|
+
return AITableQueries.getFieldValue(this.aiTable, [this.record()._id, this.field()._id]);
|
509
536
|
})();
|
510
537
|
}
|
511
538
|
updateFieldValue() {
|
512
|
-
|
513
|
-
Actions.updateFieldValue(this.aiTable, this.modelValue, path);
|
539
|
+
Actions.updateFieldValue(this.aiTable, this.modelValue, [this.record()._id, this.field()._id]);
|
514
540
|
}
|
515
541
|
closePopover() {
|
516
542
|
this.thyPopoverRef?.close();
|
517
543
|
}
|
518
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0
|
544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
520
546
|
}
|
521
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
|
522
548
|
type: Component,
|
523
549
|
args: [{
|
524
550
|
selector: 'abstract-edit-cell',
|
@@ -557,8 +583,8 @@ class DateTimeCellEditorComponent extends AbstractEditCellEditor {
|
|
557
583
|
this.closePopover();
|
558
584
|
}
|
559
585
|
}
|
560
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
561
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0
|
586
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DateTimeCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
587
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: DateTimeCellEditorComponent, isStandalone: true, selector: "date-time-cell-editor", inputs: { dateShowTime: { classPropertyName: "dateShowTime", publicName: "dateShowTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "date-time-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
|
562
588
|
<thy-date-picker
|
563
589
|
class="h-100"
|
564
590
|
thyTimestampPrecision="milliseconds"
|
@@ -576,7 +602,7 @@ class DateTimeCellEditorComponent extends AbstractEditCellEditor {
|
|
576
602
|
</thy-date-picker>
|
577
603
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyDatePicker, selector: "thy-date-picker", exportAs: ["thyDatePicker"] }, { kind: "ngmodule", type: ThyTimePickerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
578
604
|
}
|
579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DateTimeCellEditorComponent, decorators: [{
|
580
606
|
type: Component,
|
581
607
|
args: [{
|
582
608
|
selector: 'date-time-cell-editor',
|
@@ -611,10 +637,10 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
|
|
611
637
|
this.updateFieldValue();
|
612
638
|
this.closePopover();
|
613
639
|
}
|
614
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0
|
640
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
641
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
616
642
|
}
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
643
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
|
618
644
|
type: Component,
|
619
645
|
args: [{
|
620
646
|
selector: 'link-cell-editor',
|
@@ -630,8 +656,8 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
|
|
630
656
|
this.updateFieldValue();
|
631
657
|
this.closePopover();
|
632
658
|
}
|
633
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
634
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0
|
659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", host: { classAttribute: "number-cell-editor" }, usesInheritance: true, ngImport: i0, template: `<thy-input-number
|
635
661
|
class="h-100"
|
636
662
|
[thyAutoFocus]="true"
|
637
663
|
[(ngModel)]="modelValue"
|
@@ -639,7 +665,7 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
|
|
639
665
|
(thyBlur)="updateValue()"
|
640
666
|
/> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
641
667
|
}
|
642
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
668
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
|
643
669
|
type: Component,
|
644
670
|
args: [{
|
645
671
|
selector: 'number-cell-editor',
|
@@ -681,8 +707,8 @@ class ProgressEditorComponent extends AbstractEditCellEditor {
|
|
681
707
|
updateValue(value) {
|
682
708
|
this.updateFieldValue();
|
683
709
|
}
|
684
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
685
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0
|
710
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProgressEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
711
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: ProgressEditorComponent, isStandalone: true, selector: "progress-editor", host: { listeners: { "mousedown": "mousedownHandler($event)" }, properties: { "attr.type": "field().type", "attr.fieldId": "field()._id", "attr.recordId": "record()._id" }, classAttribute: "grid-cell progress-editor" }, usesInheritance: true, ngImport: i0, template: `
|
686
712
|
<thy-slider
|
687
713
|
[(ngModel)]="modelValue"
|
688
714
|
[thyMax]="config?.max || 100"
|
@@ -696,7 +722,7 @@ class ProgressEditorComponent extends AbstractEditCellEditor {
|
|
696
722
|
<span class="progress-text">{{ modelValue }}{{ config?.suffix || '%' }}</span>
|
697
723
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySlider, selector: "thy-slider", inputs: ["thyVertical", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyType", "thyColor", "thySize"], outputs: ["thyAfterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
698
724
|
}
|
699
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ProgressEditorComponent, decorators: [{
|
700
726
|
type: Component,
|
701
727
|
args: [{
|
702
728
|
selector: 'progress-editor',
|
@@ -732,10 +758,10 @@ class RatingCellEditorComponent extends AbstractEditCellEditor {
|
|
732
758
|
updateValue() {
|
733
759
|
this.updateFieldValue();
|
734
760
|
}
|
735
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
736
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0
|
761
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RatingCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
762
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: RatingCellEditorComponent, isStandalone: true, selector: "rating-cell-editor", host: { classAttribute: "d-flex align-items-center h-100 px-3" }, usesInheritance: true, ngImport: i0, template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
737
763
|
}
|
738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: RatingCellEditorComponent, decorators: [{
|
739
765
|
type: Component,
|
740
766
|
args: [{
|
741
767
|
selector: 'rating-cell-editor',
|
@@ -776,8 +802,8 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
|
|
776
802
|
this.updateFieldValue();
|
777
803
|
this.closePopover();
|
778
804
|
}
|
779
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
780
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0
|
805
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
806
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
|
781
807
|
<textarea
|
782
808
|
placeholder=""
|
783
809
|
rows="1"
|
@@ -790,7 +816,7 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
|
|
790
816
|
></textarea>
|
791
817
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
792
818
|
}
|
793
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
819
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextCellEditorComponent, decorators: [{
|
794
820
|
type: Component,
|
795
821
|
args: [{
|
796
822
|
selector: 'text-cell-editor',
|
@@ -815,12 +841,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
815
841
|
}]
|
816
842
|
}], ctorParameters: () => [] });
|
817
843
|
|
844
|
+
class SelectOptionComponent {
|
845
|
+
constructor() {
|
846
|
+
this.field = input.required();
|
847
|
+
this.displayOption = input.required();
|
848
|
+
this.optionStyle = computed(() => {
|
849
|
+
return this.field().settings.option_style || AITableSelectOptionStyle.tag;
|
850
|
+
});
|
851
|
+
this.AITableSelectOptionStyle = AITableSelectOptionStyle;
|
852
|
+
}
|
853
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
854
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SelectOptionComponent, isStandalone: true, selector: "select-option", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, displayOption: { classPropertyName: "displayOption", publicName: "displayOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "d-flex align-items-center select-option" }, ngImport: i0, template: "@if (displayOption(); as displayOption) {\n @switch (optionStyle()) {\n @case (AITableSelectOptionStyle.dot) {\n @if (displayOption.bg_color) {\n <thy-dot [thyColor]=\"displayOption.bg_color\" [thySize]=\"'sm'\" class=\"mr-2\"></thy-dot>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n }\n @case (AITableSelectOptionStyle.tag) {\n @if (displayOption.bg_color || displayOption.color; as color) {\n <thy-tag thyTheme=\"fill\" thyShape=\"pill\" [thyColor]=\"color\">\n @if (displayOption['icon']) {\n <thy-icon class=\"text-white\" [thyIconName]=\"displayOption['icon']\"></thy-icon>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n </thy-tag>\n }\n }\n @case (AITableSelectOptionStyle.piece) {\n @if (displayOption.bg_color || displayOption.color; as color) {\n <thy-dot thyShape=\"square\" [thyColor]=\"color\" [thySize]=\"'sm'\" class=\"mr-2\"></thy-dot>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n }\n @default {\n @if (displayOption['icon']) {\n <thy-icon [thyIconName]=\"displayOption['icon']\" [style.color]=\"displayOption.color\"></thy-icon>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n }\n }\n}\n", dependencies: [{ kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: ThyDot, selector: "thy-dot,[thy-dot],[thyDot]", inputs: ["thyColor", "thySize", "thyTheme", "thyShape"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
855
|
+
}
|
856
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionComponent, decorators: [{
|
857
|
+
type: Component,
|
858
|
+
args: [{ selector: 'select-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
859
|
+
class: 'd-flex align-items-center select-option'
|
860
|
+
}, imports: [ThyTag, ThyIcon, ThyTooltipModule, ThyDot, ThyFlexibleText], template: "@if (displayOption(); as displayOption) {\n @switch (optionStyle()) {\n @case (AITableSelectOptionStyle.dot) {\n @if (displayOption.bg_color) {\n <thy-dot [thyColor]=\"displayOption.bg_color\" [thySize]=\"'sm'\" class=\"mr-2\"></thy-dot>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n }\n @case (AITableSelectOptionStyle.tag) {\n @if (displayOption.bg_color || displayOption.color; as color) {\n <thy-tag thyTheme=\"fill\" thyShape=\"pill\" [thyColor]=\"color\">\n @if (displayOption['icon']) {\n <thy-icon class=\"text-white\" [thyIconName]=\"displayOption['icon']\"></thy-icon>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n </thy-tag>\n }\n }\n @case (AITableSelectOptionStyle.piece) {\n @if (displayOption.bg_color || displayOption.color; as color) {\n <thy-dot thyShape=\"square\" [thyColor]=\"color\" [thySize]=\"'sm'\" class=\"mr-2\"></thy-dot>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n }\n @default {\n @if (displayOption['icon']) {\n <thy-icon [thyIconName]=\"displayOption['icon']\" [style.color]=\"displayOption.color\"></thy-icon>\n }\n <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n }\n }\n}\n" }]
|
861
|
+
}] });
|
862
|
+
|
818
863
|
class AITableFieldPropertyEditor {
|
819
864
|
constructor() {
|
820
|
-
this.
|
865
|
+
this.aiEditField = model.required();
|
821
866
|
this.aiExternalTemplate = null;
|
822
867
|
this.fieldType = computed(() => {
|
823
|
-
return FieldsMap[this.
|
868
|
+
return FieldsMap[this.aiEditField().type];
|
824
869
|
});
|
825
870
|
this.fieldMaxLength = 32;
|
826
871
|
this.validatorConfig = {
|
@@ -835,29 +880,33 @@ class AITableFieldPropertyEditor {
|
|
835
880
|
this.thyPopoverRef = inject((ThyPopoverRef));
|
836
881
|
this.checkUniqueName = (fieldName) => {
|
837
882
|
fieldName = fieldName?.trim();
|
838
|
-
return of(!!this.aiTable.fields()?.find((field) => field.name === fieldName && this.
|
883
|
+
return of(!!this.aiTable.fields()?.find((field) => field.name === fieldName && this.aiEditField()?._id !== field._id));
|
839
884
|
};
|
840
885
|
}
|
841
|
-
selectFieldType(
|
842
|
-
this.
|
886
|
+
selectFieldType(field) {
|
887
|
+
this.aiEditField.update((item) => {
|
888
|
+
const width = item.width ?? field.width;
|
889
|
+
const name = createDefaultFieldName(this.aiTable, field.type);
|
890
|
+
const settings = field.settings;
|
891
|
+
return { ...item, ...field, width, name, settings };
|
892
|
+
});
|
843
893
|
}
|
844
894
|
editFieldProperty() {
|
845
895
|
if (this.isUpdate) {
|
846
|
-
|
847
|
-
Actions.setField(this.aiTable, this.aiField(), [path]);
|
896
|
+
Actions.setField(this.aiTable, this.aiEditField(), [this.aiEditField()._id]);
|
848
897
|
}
|
849
898
|
else {
|
850
|
-
Actions.addField(this.aiTable, this.
|
899
|
+
Actions.addField(this.aiTable, this.aiEditField(), [this.aiTable.fields().length]);
|
851
900
|
}
|
852
901
|
this.thyPopoverRef.close();
|
853
902
|
}
|
854
903
|
cancel() {
|
855
904
|
this.thyPopoverRef.close();
|
856
905
|
}
|
857
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
858
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0
|
906
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldPropertyEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableFieldPropertyEditor, isStandalone: true, selector: "ai-table-field-property-editor", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: false, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { aiEditField: "aiEditFieldChange" }, host: { classAttribute: "field-property-editor d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"aiEditField().name\"\n required\n placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n [thyUniqueCheck]=\"checkUniqueName\"\n />\n <ng-template #suffix>\n <thy-input-count></thy-input-count>\n </ng-template>\n </thy-input-group>\n </thy-form-group>\n <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n <div class=\"ml-n5 mr-n5\">\n <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n <span>\n <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n <span>{{ fieldType().name }}</span>\n </span>\n <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n </thy-list-item>\n </div>\n </thy-form-group>\n <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTemplate>\n <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n </ng-template>\n <thy-form-group-footer thyAlign=\"right\">\n <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n @for (item of selectableFields; track $index) {\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item)\">\n <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n </a>\n }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "component", type: ThyListItem, selector: "thy-list-item,[thy-list-item]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
859
908
|
}
|
860
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
909
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldPropertyEditor, decorators: [{
|
861
910
|
type: Component,
|
862
911
|
args: [{ selector: 'ai-table-field-property-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
863
912
|
NgIf,
|
@@ -882,7 +931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
882
931
|
ThyAutofocusDirective
|
883
932
|
], host: {
|
884
933
|
class: 'field-property-editor d-block pl-5 pr-5 pb-5 pt-4'
|
885
|
-
}, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"
|
934
|
+
}, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"aiEditField().name\"\n required\n placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n [thyUniqueCheck]=\"checkUniqueName\"\n />\n <ng-template #suffix>\n <thy-input-count></thy-input-count>\n </ng-template>\n </thy-input-group>\n </thy-form-group>\n <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n <div class=\"ml-n5 mr-n5\">\n <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n <span>\n <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n <span>{{ fieldType().name }}</span>\n </span>\n <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n </thy-list-item>\n </div>\n </thy-form-group>\n <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n </ng-container>\n <ng-template #defaultTemplate>\n <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n </ng-template>\n <thy-form-group-footer thyAlign=\"right\">\n <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n @for (item of selectableFields; track $index) {\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item)\">\n <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n </a>\n }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
|
886
935
|
}], ctorParameters: () => [], propDecorators: { aiTable: [{
|
887
936
|
type: Input,
|
888
937
|
args: [{ required: true }]
|
@@ -893,7 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
893
942
|
args: [{ transform: booleanAttribute }]
|
894
943
|
}] } });
|
895
944
|
|
896
|
-
const buildGridData = (recordValue, fieldsValue
|
945
|
+
const buildGridData = (recordValue, fieldsValue) => {
|
897
946
|
const fields = fieldsValue.map((item) => {
|
898
947
|
return {
|
899
948
|
...item,
|
@@ -901,34 +950,12 @@ const buildGridData = (recordValue, fieldsValue, references) => {
|
|
901
950
|
width: item.width || FieldsMap[item.type].width
|
902
951
|
};
|
903
952
|
});
|
904
|
-
let records = buildRecordsByReferences(recordValue, fieldsValue, references);
|
905
953
|
return {
|
906
954
|
type: 'grid',
|
907
955
|
fields,
|
908
|
-
records
|
956
|
+
records: recordValue
|
909
957
|
};
|
910
958
|
};
|
911
|
-
function buildRecordsByReferences(records, fields, references) {
|
912
|
-
if (!references) {
|
913
|
-
return records;
|
914
|
-
}
|
915
|
-
const memberFields = fields.filter((field) => [AITableFieldType.createdBy, AITableFieldType.updatedBy, AITableFieldType.member].includes(field.type));
|
916
|
-
if (memberFields.length) {
|
917
|
-
const uidToMember = references.members.reduce((map, member) => {
|
918
|
-
map[member.uid] = member;
|
919
|
-
return map;
|
920
|
-
}, {});
|
921
|
-
const draftRecords = createDraft(records);
|
922
|
-
draftRecords.forEach((record) => {
|
923
|
-
memberFields.forEach((field) => {
|
924
|
-
const value = record.values[field._id];
|
925
|
-
record.values[field._id] = value.map((uid) => uidToMember[uid]).filter(Boolean);
|
926
|
-
});
|
927
|
-
});
|
928
|
-
records = finishDraft(draftRecords);
|
929
|
-
}
|
930
|
-
return records;
|
931
|
-
}
|
932
959
|
|
933
960
|
function getRecordOrField(value, _id) {
|
934
961
|
return computed(() => {
|
@@ -941,10 +968,10 @@ class FieldMenu {
|
|
941
968
|
const field = getRecordOrField(this.aiTable.fields, this.fieldId);
|
942
969
|
menu.exec && menu.exec(this.aiTable, field, this.origin);
|
943
970
|
}
|
944
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0
|
971
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
972
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin" }, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n @if (menu.type === 'divider') {\n <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n } @else {\n <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ menu.name! }}</span>\n </a>\n }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
946
973
|
}
|
947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, decorators: [{
|
948
975
|
type: Component,
|
949
976
|
args: [{ selector: 'field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
950
977
|
ThyIcon,
|
@@ -992,7 +1019,7 @@ class AITableGridFieldService {
|
|
992
1019
|
initAIFieldConfig(aiFieldConfig) {
|
993
1020
|
this.aiFieldConfig = aiFieldConfig;
|
994
1021
|
}
|
995
|
-
editFieldProperty(origin, aiTable,
|
1022
|
+
editFieldProperty(origin, aiTable, aiEditField, isUpdate) {
|
996
1023
|
const component = this.aiFieldConfig?.fieldPropertyEditor ?? AITableFieldPropertyEditor;
|
997
1024
|
this.thyPopover.open(component, {
|
998
1025
|
origin: origin,
|
@@ -1000,15 +1027,15 @@ class AITableGridFieldService {
|
|
1000
1027
|
placement: 'bottomLeft',
|
1001
1028
|
initialState: {
|
1002
1029
|
aiTable,
|
1003
|
-
|
1030
|
+
aiEditField,
|
1004
1031
|
isUpdate
|
1005
1032
|
}
|
1006
1033
|
});
|
1007
1034
|
}
|
1008
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
1009
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0
|
1035
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
1036
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridFieldService }); }
|
1010
1037
|
}
|
1011
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
1038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridFieldService, decorators: [{
|
1012
1039
|
type: Injectable
|
1013
1040
|
}], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
|
1014
1041
|
|
@@ -1030,8 +1057,7 @@ const RemoveFieldItem = {
|
|
1030
1057
|
name: '删除列',
|
1031
1058
|
icon: 'trash',
|
1032
1059
|
exec: (aiTable, field) => {
|
1033
|
-
|
1034
|
-
Actions.removeField(aiTable, path);
|
1060
|
+
Actions.removeField(aiTable, [field()._id]);
|
1035
1061
|
}
|
1036
1062
|
};
|
1037
1063
|
const DefaultFieldMenus = [EditFieldPropertyItem, RemoveFieldItem];
|
@@ -1040,37 +1066,101 @@ class SelectOptionPipe {
|
|
1040
1066
|
transform(_id, options) {
|
1041
1067
|
return options.find((item) => item._id === _id);
|
1042
1068
|
}
|
1043
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
1044
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0
|
1069
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
1070
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionPipe, isStandalone: true, name: "selectOption" }); }
|
1045
1071
|
}
|
1046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
1072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionPipe, decorators: [{
|
1047
1073
|
type: Pipe,
|
1048
1074
|
args: [{
|
1049
1075
|
name: 'selectOption',
|
1050
1076
|
standalone: true
|
1051
1077
|
}]
|
1052
1078
|
}] });
|
1079
|
+
class SelectOptionsPipe {
|
1080
|
+
transform(ids, options = []) {
|
1081
|
+
return ids.map((id) => {
|
1082
|
+
return options.find((item) => item._id === id);
|
1083
|
+
});
|
1084
|
+
}
|
1085
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
1086
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionsPipe, isStandalone: true, name: "selectOptions" }); }
|
1087
|
+
}
|
1088
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectOptionsPipe, decorators: [{
|
1089
|
+
type: Pipe,
|
1090
|
+
args: [{
|
1091
|
+
name: 'selectOptions',
|
1092
|
+
standalone: true
|
1093
|
+
}]
|
1094
|
+
}] });
|
1053
1095
|
class IsSelectRecordPipe {
|
1054
1096
|
transform(recordId, selection) {
|
1055
1097
|
return selection.selectedRecords.has(recordId);
|
1056
1098
|
}
|
1057
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
1058
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0
|
1099
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsSelectRecordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
1100
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: IsSelectRecordPipe, isStandalone: true, name: "isSelectRecord" }); }
|
1059
1101
|
}
|
1060
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
1102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsSelectRecordPipe, decorators: [{
|
1061
1103
|
type: Pipe,
|
1062
1104
|
args: [{
|
1063
1105
|
name: 'isSelectRecord',
|
1064
1106
|
standalone: true
|
1065
1107
|
}]
|
1066
1108
|
}] });
|
1109
|
+
class UserPipe {
|
1110
|
+
transform(values, references) {
|
1111
|
+
return values.map((item) => {
|
1112
|
+
return references.members[item] || {};
|
1113
|
+
});
|
1114
|
+
}
|
1115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
1116
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: UserPipe, isStandalone: true, name: "user" }); }
|
1117
|
+
}
|
1118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: UserPipe, decorators: [{
|
1119
|
+
type: Pipe,
|
1120
|
+
args: [{
|
1121
|
+
name: 'user',
|
1122
|
+
standalone: true
|
1123
|
+
}]
|
1124
|
+
}] });
|
1125
|
+
class SelectSettingPipe {
|
1126
|
+
transform(settings) {
|
1127
|
+
return settings;
|
1128
|
+
}
|
1129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
1130
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: SelectSettingPipe, isStandalone: true, name: "selectSetting" }); }
|
1131
|
+
}
|
1132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectSettingPipe, decorators: [{
|
1133
|
+
type: Pipe,
|
1134
|
+
args: [{
|
1135
|
+
name: 'selectSetting',
|
1136
|
+
standalone: true
|
1137
|
+
}]
|
1138
|
+
}] });
|
1139
|
+
class MemberSettingPipe {
|
1140
|
+
transform(settings) {
|
1141
|
+
return settings;
|
1142
|
+
}
|
1143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MemberSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
1144
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MemberSettingPipe, isStandalone: true, name: "memberSetting" }); }
|
1145
|
+
}
|
1146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MemberSettingPipe, decorators: [{
|
1147
|
+
type: Pipe,
|
1148
|
+
args: [{
|
1149
|
+
name: 'memberSetting',
|
1150
|
+
standalone: true
|
1151
|
+
}]
|
1152
|
+
}] });
|
1067
1153
|
|
1068
1154
|
class SelectCellEditorComponent extends AbstractEditCellEditor {
|
1069
1155
|
constructor() {
|
1070
1156
|
super();
|
1071
1157
|
this.selectOptions = computed(() => {
|
1072
|
-
return this.field().options;
|
1158
|
+
return this.field().settings.options;
|
1073
1159
|
});
|
1160
|
+
this.optionStyle = computed(() => {
|
1161
|
+
return this.field().settings.option_style || AITableSelectOptionStyle.tag;
|
1162
|
+
});
|
1163
|
+
this.AITableSelectOptionStyle = AITableSelectOptionStyle;
|
1074
1164
|
}
|
1075
1165
|
updateValue(value) {
|
1076
1166
|
if (!value) {
|
@@ -1078,28 +1168,28 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
|
|
1078
1168
|
this.closePopover();
|
1079
1169
|
}
|
1080
1170
|
}
|
1081
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
1082
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
1083
|
-
<thy-option *ngFor="let option of selectOptions()" [thyValue]="option._id" [thyLabelText]="option.text"> </thy-option>
|
1084
|
-
</thy-select> `, isInline: true, dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
1172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { properties: { "class.tag": "field()!.settings.option_style === AITableSelectOptionStyle.tag" }, classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n [(ngModel)]=\"modelValue\"\n [thyAutoExpand]=\"true\"\n [thyAllowClear]=\"true\"\n [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n [thyPreset]=\"'tag'\"\n (thyOnExpandStatusChange)=\"updateValue($event)\"\n>\n <ng-template #selectedDisplay let-option>\n @if (optionStyle() === AITableSelectOptionStyle.tag) {\n <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n } @else {\n <div thyTag class=\"mb-1 mr-1\">\n <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n </div>\n }\n </ng-template>\n @for (option of selectOptions(); track option._id) {\n <thy-option [thyValue]=\"option._id\" [thyRawValue]=\"option\" [thyShowOptionCustom]=\"true\" [thyLabelText]=\"option.text\">\n <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n </thy-option>\n }\n</thy-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1085
1173
|
}
|
1086
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
1174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
|
1087
1175
|
type: Component,
|
1088
|
-
args: [{
|
1089
|
-
|
1090
|
-
|
1091
|
-
|
1092
|
-
|
1093
|
-
|
1094
|
-
|
1095
|
-
|
1096
|
-
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1100
|
-
|
1101
|
-
|
1102
|
-
|
1176
|
+
args: [{ selector: 'select-cell-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
1177
|
+
class: 'd-block h-100 select-cell-editor',
|
1178
|
+
'[class.tag]': 'field()!.settings.option_style === AITableSelectOptionStyle.tag'
|
1179
|
+
}, imports: [
|
1180
|
+
FormsModule,
|
1181
|
+
NgTemplateOutlet,
|
1182
|
+
ThySelect,
|
1183
|
+
ThyOption,
|
1184
|
+
ThyTag,
|
1185
|
+
ThyIcon,
|
1186
|
+
ThyTooltipModule,
|
1187
|
+
ThyDot,
|
1188
|
+
ThyFlexibleText,
|
1189
|
+
SelectOptionPipe,
|
1190
|
+
SelectOptionComponent
|
1191
|
+
], template: "<thy-select\n [(ngModel)]=\"modelValue\"\n [thyAutoExpand]=\"true\"\n [thyAllowClear]=\"true\"\n [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n [thyPreset]=\"'tag'\"\n (thyOnExpandStatusChange)=\"updateValue($event)\"\n>\n <ng-template #selectedDisplay let-option>\n @if (optionStyle() === AITableSelectOptionStyle.tag) {\n <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n } @else {\n <div thyTag class=\"mb-1 mr-1\">\n <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n </div>\n }\n </ng-template>\n @for (option of selectOptions(); track option._id) {\n <thy-option [thyValue]=\"option._id\" [thyRawValue]=\"option\" [thyShowOptionCustom]=\"true\" [thyLabelText]=\"option.text\">\n <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n </thy-option>\n }\n</thy-select>\n" }]
|
1192
|
+
}], ctorParameters: () => [] });
|
1103
1193
|
|
1104
1194
|
const GRID_CELL_EDITOR_MAP = {
|
1105
1195
|
[AITableFieldType.text]: TextCellEditorComponent,
|
@@ -1120,6 +1210,7 @@ class AITableGridEventService {
|
|
1120
1210
|
this.globalMouseoverEvent$ = new Subject();
|
1121
1211
|
this.globalMousedownEvent$ = new Subject();
|
1122
1212
|
this.destroyRef = inject(DestroyRef);
|
1213
|
+
this.overlay = inject(Overlay);
|
1123
1214
|
this.thyPopover = inject(ThyPopover);
|
1124
1215
|
}
|
1125
1216
|
initialize(aiTable, aiFieldRenderers) {
|
@@ -1189,14 +1280,15 @@ class AITableGridEventService {
|
|
1189
1280
|
hasBackdrop: false,
|
1190
1281
|
manualClosure: true,
|
1191
1282
|
animationDisabled: true,
|
1192
|
-
autoAdaptive: true
|
1283
|
+
autoAdaptive: true,
|
1284
|
+
scrollStrategy: this.overlay.scrollStrategies.close()
|
1193
1285
|
});
|
1194
1286
|
return ref;
|
1195
1287
|
}
|
1196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
1197
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0
|
1288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
1289
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridEventService }); }
|
1198
1290
|
}
|
1199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
1291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridEventService, decorators: [{
|
1200
1292
|
type: Injectable
|
1201
1293
|
}] });
|
1202
1294
|
|
@@ -1263,10 +1355,10 @@ class AITableGridSelectionService {
|
|
1263
1355
|
this.clearSelection();
|
1264
1356
|
}
|
1265
1357
|
}
|
1266
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
1267
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0
|
1358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
1359
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService }); }
|
1268
1360
|
}
|
1269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
1361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService, decorators: [{
|
1270
1362
|
type: Injectable
|
1271
1363
|
}], ctorParameters: () => [] });
|
1272
1364
|
|
@@ -1279,13 +1371,14 @@ class AITableGrid {
|
|
1279
1371
|
this.aiPlugins = input();
|
1280
1372
|
this.aiReferences = input();
|
1281
1373
|
this.AITableFieldType = AITableFieldType;
|
1374
|
+
this.AITableSelectOptionStyle = AITableSelectOptionStyle;
|
1282
1375
|
this.isSelectedAll = computed(() => {
|
1283
1376
|
return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
|
1284
1377
|
});
|
1285
1378
|
this.onChange = output();
|
1286
1379
|
this.aiTableInitialized = output();
|
1287
1380
|
this.gridData = computed(() => {
|
1288
|
-
return buildGridData(this.aiRecords(), this.aiFields()
|
1381
|
+
return buildGridData(this.aiRecords(), this.aiFields());
|
1289
1382
|
});
|
1290
1383
|
this.ngZone = inject(NgZone);
|
1291
1384
|
this.elementRef = inject(ElementRef);
|
@@ -1358,8 +1451,7 @@ class AITableGrid {
|
|
1358
1451
|
dblClick(event) {
|
1359
1452
|
const cellDom = event.target.closest('.grid-cell');
|
1360
1453
|
const type = cellDom && cellDom.getAttribute('type');
|
1361
|
-
|
1362
|
-
if (type && !readonly && DBL_CLICK_EDIT_TYPE.includes(type)) {
|
1454
|
+
if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
|
1363
1455
|
this.aiTableGridEventService.openEdit(cellDom);
|
1364
1456
|
}
|
1365
1457
|
}
|
@@ -1382,10 +1474,10 @@ class AITableGrid {
|
|
1382
1474
|
}
|
1383
1475
|
}
|
1384
1476
|
}
|
1385
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0
|
1386
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", onChange: "onChange", aiTableInitialized: "aiTableInitialized" }, host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], ngImport: i0, template: "<div class=\"grid-header d-flex\">\n <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n </div>\n @for (field of gridData().fields; track field._id) {\n <div\n class=\"grid-cell grid-field\"\n #fieldAction\n [attr.fieldId]=\"field._id\"\n [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n [ngStyle]=\"{ width: field.width + 'px' }\"\n >\n <span class=\"text-truncate\">\n <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n <span>{{ field.name }}</span>\n </span>\n <a\n class=\"grid-field-action\"\n thyAction\n thyActiveClass=\"active\"\n thyIcon=\"more-vertical\"\n [thyDropdown]=\"fieldMenu\"\n href=\"javascript:;\"\n >\n <thy-dropdown-menu #fieldMenu>\n <field-menu [origin]=\"fieldAction\" [fieldId]=\"field._id\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n </thy-dropdown-menu>\n </a>\n </div>\n }\n <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n </div>\n</div>\n<div class=\"grid-body d-flex\">\n @for (record of gridData().records; track record._id; let index = $index) {\n <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n <div class=\"grid-row-index grid-checkbox\">\n <label\n [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n thyCheckbox\n thyLabelText=\"\"\n [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n (ngModelChange)=\"selectRecord(record._id)\"\n ></label>\n <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n {{ index + 1 }}\n </span>\n </div>\n @for (field of gridData().fields; track field._id) {\n <div\n #cell\n class=\"grid-cell\"\n [ngClass]=\"{\n highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n }\"\n [attr.type]=\"[field.type]\"\n [attr.fieldId]=\"[field._id]\"\n [attr.readonly]=\"[field?.readonly]\"\n [attr.recordId]=\"[record._id]\"\n [ngStyle]=\"{ width: field.width + 'px' }\"\n >\n @switch (field.type) {\n @case (AITableFieldType.select) {\n @if (!field.isMultiple && record.values[field._id] | selectOption: field['options']; as selectedOption) {\n <thy-tag [thyColor]=\"selectedOption!.color! || selectedOption!.bg_color! || 'default'\">{{\n selectedOption.text\n }}</thy-tag>\n }\n }\n @case (AITableFieldType.date) {\n {{ record.values[field._id] | thyDatePickerFormat }}\n }\n @case (AITableFieldType.updatedAt) {\n <div class=\"d-block user-select-none\">\n <span class=\"text-truncate\">\n {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n </span>\n </div>\n }\n @case (AITableFieldType.createdAt) {\n <div class=\"d-block user-select-none\">\n <span class=\"text-truncate\">\n {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n </span>\n </div>\n }\n @case (AITableFieldType.rate) {\n <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n }\n @case (AITableFieldType.link) {\n <a\n class=\"d-block\"\n target=\"_blank\"\n [href]=\"record.values[field._id]?.url\"\n thyStopPropagation\n thyFlexibleText\n [thyTooltipContent]=\"record.values[field._id]?.text\"\n >\n {{ record.values[field._id]?.text }}\n </a>\n }\n @case (AITableFieldType.progress) {\n <thy-progress\n class=\"w-100\"\n [thyValue]=\"record.values[field._id]\"\n [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n >\n <span> {{ record.values[field._id] }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n </thy-progress>\n }\n @case (AITableFieldType.member) {\n @if (!field.isMultiple) {\n @if (record.values[field._id][0]; as recordValue) {\n <thy-avatar\n [thyName]=\"recordValue.display_name\"\n [thySrc]=\"recordValue.avatar\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n } @else {\n <thy-avatar-list thyAvatarSize=\"xs\">\n @for (item of record.values[field._id]; track $index) {\n <thy-avatar [thyName]=\"item.display_name\" [thySrc]=\"item.avatar\"></thy-avatar>\n }\n </thy-avatar-list>\n }\n }\n @case (AITableFieldType.createdBy) {\n @if (record.values[field._id][0]; as recordValue) {\n <thy-avatar\n [thyName]=\"recordValue.display_name\"\n [thySrc]=\"recordValue.avatar\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n }\n @case (AITableFieldType.updatedBy) {\n @if (record.values[field._id][0]; as recordValue) {\n <thy-avatar\n [thyName]=\"recordValue.display_name\"\n [thySrc]=\"recordValue.avatar\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n }\n @default {\n <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n }\n }\n <div class=\"autofill-container\"></div>\n </div>\n }\n <div class=\"grid-column-blank\"></div>\n </div>\n }\n <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: FieldMenu, selector: "field-menu", inputs: ["fieldId", "aiTable", "fieldMenus", "origin"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1477
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
1478
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", onChange: "onChange", aiTableInitialized: "aiTableInitialized" }, host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], ngImport: i0, template: "<div class=\"grid-header d-flex\">\n <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n </div>\n @for (field of gridData().fields; track field._id) {\n <div\n class=\"grid-cell grid-field\"\n #fieldAction\n [attr.fieldId]=\"field._id\"\n [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n [ngStyle]=\"{ width: field.width + 'px' }\"\n >\n <span class=\"text-truncate\">\n <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n <span>{{ field.name }}</span>\n </span>\n <a\n class=\"grid-field-action\"\n thyAction\n thyActiveClass=\"active\"\n thyIcon=\"more-vertical\"\n [thyDropdown]=\"fieldMenu\"\n href=\"javascript:;\"\n >\n <thy-dropdown-menu #fieldMenu>\n <field-menu [origin]=\"fieldAction\" [fieldId]=\"field._id\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n </thy-dropdown-menu>\n </a>\n </div>\n }\n <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n </div>\n</div>\n<div class=\"grid-body d-flex\">\n @for (record of gridData().records; track record._id; let index = $index) {\n <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n <div class=\"grid-row-index grid-checkbox\">\n <label\n [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n thyCheckbox\n thyLabelText=\"\"\n [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n (ngModelChange)=\"selectRecord(record._id)\"\n ></label>\n <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n {{ index + 1 }}\n </span>\n </div>\n @for (field of gridData().fields; track field._id) {\n <div\n #cell\n class=\"grid-cell\"\n [ngClass]=\"{\n highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n }\"\n [attr.type]=\"[field.type]\"\n [attr.fieldId]=\"[field._id]\"\n [attr.recordId]=\"[record._id]\"\n [ngStyle]=\"{ width: field.width + 'px' }\"\n >\n @switch (field.type) {\n @case (AITableFieldType.select) {\n @let fieldValue = record.values[field._id];\n @let settings = field.settings! | selectSetting;\n @let options = settings['options'];\n @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n @if (isTagStyle) {\n <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n } @else {\n <div thyTag class=\"mb-1 mr-1\">\n <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n </div>\n }\n } @else {\n @let maxShowCount = 2;\n\n <div class=\"d-flex\">\n @if (fieldValue | selectOptions: options; as selectedOptions) {\n @for (option of selectedOptions; track option!._id; let i = $index) {\n @if (i + 1 <= maxShowCount) {\n @if (isTagStyle) {\n <select-option\n class=\"mb-1 mr-1\"\n [field]=\"field\"\n [displayOption]=\"option!\"\n ></select-option>\n } @else {\n <div thyTag class=\"mb-1 mr-1\">\n <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n </div>\n }\n }\n }\n\n @let selectedLength = selectedOptions.length || 0;\n @if (selectedOptions && maxShowCount < selectedLength) {\n @let shape = isTagStyle ? 'pill' : 'rectangle';\n @let isHidden = maxShowCount >= selectedLength;\n\n <thy-tag\n class=\"cursor-pointer\"\n [class.multi-property-value-hidden]=\"isHidden\"\n [thyShape]=\"shape\"\n >\n <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n </thy-tag>\n }\n }\n </div>\n }\n }\n @case (AITableFieldType.date) {\n {{ record.values[field._id] | thyDatePickerFormat }}\n }\n @case (AITableFieldType.updatedAt) {\n <div class=\"d-block user-select-none\">\n <span class=\"text-truncate\">\n {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n </span>\n </div>\n }\n @case (AITableFieldType.createdAt) {\n <div class=\"d-block user-select-none\">\n <span class=\"text-truncate\">\n {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n </span>\n </div>\n }\n @case (AITableFieldType.rate) {\n <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n }\n @case (AITableFieldType.link) {\n <a\n class=\"d-block\"\n target=\"_blank\"\n [href]=\"record.values[field._id]?.url\"\n thyStopPropagation\n thyFlexibleText\n [thyTooltipContent]=\"record.values[field._id]?.text\"\n >\n {{ record.values[field._id]?.text }}\n </a>\n }\n @case (AITableFieldType.progress) {\n <thy-progress\n class=\"w-100\"\n [thyValue]=\"record.values[field._id] || 0\"\n [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n >\n <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n </thy-progress>\n }\n @case (AITableFieldType.member) {\n @let settings = field.settings! | memberSetting;\n\n @if (!settings!['is_multiple']) {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n @if (recordValues && recordValues.length) {\n <thy-avatar\n [thyName]=\"recordValues[0].display_name!\"\n [thySrc]=\"recordValues[0].avatar!\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n } @else {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n <thy-avatar-list thyAvatarSize=\"xs\">\n @for (item of recordValues; track $index) {\n <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n }\n </thy-avatar-list>\n }\n }\n @case (AITableFieldType.createdBy) {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n @if (recordValues && recordValues.length) {\n <thy-avatar\n [thyName]=\"recordValues[0].display_name!\"\n [thySrc]=\"recordValues[0].avatar!\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n }\n @case (AITableFieldType.updatedBy) {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n @if (recordValues && recordValues.length) {\n <thy-avatar\n [thyName]=\"recordValues[0].display_name!\"\n [thySrc]=\"recordValues[0].avatar!\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n }\n @default {\n <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n }\n }\n <div class=\"autofill-container\"></div>\n </div>\n }\n <div class=\"grid-column-blank\"></div>\n </div>\n }\n <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: FieldMenu, selector: "field-menu", inputs: ["fieldId", "aiTable", "fieldMenus", "origin"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1387
1479
|
}
|
1388
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0
|
1480
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, decorators: [{
|
1389
1481
|
type: Component,
|
1390
1482
|
args: [{ selector: 'ai-table-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
1391
1483
|
class: 'ai-table-grid'
|
@@ -1396,6 +1488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
1396
1488
|
CommonModule,
|
1397
1489
|
FormsModule,
|
1398
1490
|
SelectOptionPipe,
|
1491
|
+
SelectOptionsPipe,
|
1399
1492
|
ThyTag,
|
1400
1493
|
ThyPopoverModule,
|
1401
1494
|
ThyIcon,
|
@@ -1413,13 +1506,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
1413
1506
|
ProgressEditorComponent,
|
1414
1507
|
ThyAvatarModule,
|
1415
1508
|
NgTemplateOutlet,
|
1416
|
-
IsSelectRecordPipe
|
1417
|
-
|
1509
|
+
IsSelectRecordPipe,
|
1510
|
+
ProgressEditorComponent,
|
1511
|
+
SelectOptionComponent,
|
1512
|
+
UserPipe,
|
1513
|
+
SelectSettingPipe,
|
1514
|
+
MemberSettingPipe
|
1515
|
+
], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div class=\"grid-header d-flex\">\n <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n </div>\n @for (field of gridData().fields; track field._id) {\n <div\n class=\"grid-cell grid-field\"\n #fieldAction\n [attr.fieldId]=\"field._id\"\n [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n [ngStyle]=\"{ width: field.width + 'px' }\"\n >\n <span class=\"text-truncate\">\n <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n <span>{{ field.name }}</span>\n </span>\n <a\n class=\"grid-field-action\"\n thyAction\n thyActiveClass=\"active\"\n thyIcon=\"more-vertical\"\n [thyDropdown]=\"fieldMenu\"\n href=\"javascript:;\"\n >\n <thy-dropdown-menu #fieldMenu>\n <field-menu [origin]=\"fieldAction\" [fieldId]=\"field._id\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n </thy-dropdown-menu>\n </a>\n </div>\n }\n <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n </div>\n</div>\n<div class=\"grid-body d-flex\">\n @for (record of gridData().records; track record._id; let index = $index) {\n <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n <div class=\"grid-row-index grid-checkbox\">\n <label\n [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n thyCheckbox\n thyLabelText=\"\"\n [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n (ngModelChange)=\"selectRecord(record._id)\"\n ></label>\n <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n {{ index + 1 }}\n </span>\n </div>\n @for (field of gridData().fields; track field._id) {\n <div\n #cell\n class=\"grid-cell\"\n [ngClass]=\"{\n highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n }\"\n [attr.type]=\"[field.type]\"\n [attr.fieldId]=\"[field._id]\"\n [attr.recordId]=\"[record._id]\"\n [ngStyle]=\"{ width: field.width + 'px' }\"\n >\n @switch (field.type) {\n @case (AITableFieldType.select) {\n @let fieldValue = record.values[field._id];\n @let settings = field.settings! | selectSetting;\n @let options = settings['options'];\n @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n @if (isTagStyle) {\n <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n } @else {\n <div thyTag class=\"mb-1 mr-1\">\n <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n </div>\n }\n } @else {\n @let maxShowCount = 2;\n\n <div class=\"d-flex\">\n @if (fieldValue | selectOptions: options; as selectedOptions) {\n @for (option of selectedOptions; track option!._id; let i = $index) {\n @if (i + 1 <= maxShowCount) {\n @if (isTagStyle) {\n <select-option\n class=\"mb-1 mr-1\"\n [field]=\"field\"\n [displayOption]=\"option!\"\n ></select-option>\n } @else {\n <div thyTag class=\"mb-1 mr-1\">\n <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n </div>\n }\n }\n }\n\n @let selectedLength = selectedOptions.length || 0;\n @if (selectedOptions && maxShowCount < selectedLength) {\n @let shape = isTagStyle ? 'pill' : 'rectangle';\n @let isHidden = maxShowCount >= selectedLength;\n\n <thy-tag\n class=\"cursor-pointer\"\n [class.multi-property-value-hidden]=\"isHidden\"\n [thyShape]=\"shape\"\n >\n <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n </thy-tag>\n }\n }\n </div>\n }\n }\n @case (AITableFieldType.date) {\n {{ record.values[field._id] | thyDatePickerFormat }}\n }\n @case (AITableFieldType.updatedAt) {\n <div class=\"d-block user-select-none\">\n <span class=\"text-truncate\">\n {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n </span>\n </div>\n }\n @case (AITableFieldType.createdAt) {\n <div class=\"d-block user-select-none\">\n <span class=\"text-truncate\">\n {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n </span>\n </div>\n }\n @case (AITableFieldType.rate) {\n <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n }\n @case (AITableFieldType.link) {\n <a\n class=\"d-block\"\n target=\"_blank\"\n [href]=\"record.values[field._id]?.url\"\n thyStopPropagation\n thyFlexibleText\n [thyTooltipContent]=\"record.values[field._id]?.text\"\n >\n {{ record.values[field._id]?.text }}\n </a>\n }\n @case (AITableFieldType.progress) {\n <thy-progress\n class=\"w-100\"\n [thyValue]=\"record.values[field._id] || 0\"\n [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n >\n <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n </thy-progress>\n }\n @case (AITableFieldType.member) {\n @let settings = field.settings! | memberSetting;\n\n @if (!settings!['is_multiple']) {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n @if (recordValues && recordValues.length) {\n <thy-avatar\n [thyName]=\"recordValues[0].display_name!\"\n [thySrc]=\"recordValues[0].avatar!\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n } @else {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n <thy-avatar-list thyAvatarSize=\"xs\">\n @for (item of recordValues; track $index) {\n <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n }\n </thy-avatar-list>\n }\n }\n @case (AITableFieldType.createdBy) {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n @if (recordValues && recordValues.length) {\n <thy-avatar\n [thyName]=\"recordValues[0].display_name!\"\n [thySrc]=\"recordValues[0].avatar!\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n }\n @case (AITableFieldType.updatedBy) {\n @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n @if (recordValues && recordValues.length) {\n <thy-avatar\n [thyName]=\"recordValues[0].display_name!\"\n [thySrc]=\"recordValues[0].avatar!\"\n thySize=\"xs\"\n thyShowName=\"true\"\n ></thy-avatar>\n }\n }\n @default {\n <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n }\n }\n <div class=\"autofill-container\"></div>\n </div>\n }\n <div class=\"grid-column-blank\"></div>\n </div>\n }\n <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n <thy-icon thyIconName=\"plus\"></thy-icon>\n </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
|
1418
1516
|
}] });
|
1419
1517
|
|
1420
1518
|
/**
|
1421
1519
|
* Generated bundle index. Do not edit.
|
1422
1520
|
*/
|
1423
1521
|
|
1424
|
-
export { AITableFieldPropertyEditor, AITableFieldType, AITableGrid, AITableQueries, AITableStatType, ActionName, Actions, BasicFields, DBL_CLICK_EDIT_TYPE, DEFAULT_COLUMN_WIDTH, DateTimeCellEditorComponent, DefaultFieldMenus, DividerMenuItem, EditFieldPropertyItem, ExecuteType, FLUSHING, Fields, FieldsMap, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RemoveFieldItem, RowHeight, SelectOptionPipe, TextCellEditorComponent,
|
1522
|
+
export { AITableFieldPropertyEditor, AITableFieldType, AITableGrid, AITableQueries, AITableSelectOptionStyle, AITableStatType, ActionName, Actions, BasicFields, DBL_CLICK_EDIT_TYPE, DEFAULT_COLUMN_WIDTH, DateTimeCellEditorComponent, DefaultFieldMenus, DividerMenuItem, EditFieldPropertyItem, ExecuteType, FLUSHING, Fields, FieldsMap, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RemoveFieldItem, RowHeight, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, TextCellEditorComponent, UserPipe, buildGridData, createAITable, createDefaultField, createDefaultFieldName, getDefaultFieldValue, getDefaultRecord, getRecordOrField, idCreator, isPathEqual };
|
1425
1523
|
//# sourceMappingURL=ai-table-grid.mjs.map
|