@sd-angular/core 0.0.932 → 0.0.936
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/bundles/sd-angular-core-grid-material.umd.js +51 -21
- package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +2 -2
- package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
- package/esm2015/grid-material/src/lib/components/desktop-cell/desktop-cell.component.js +3 -2
- package/esm2015/grid-material/src/lib/grid-material.component.js +27 -8
- package/esm2015/grid-material/src/lib/models/grid-option.model.js +1 -1
- package/esm2015/grid-material/src/lib/models/grid.model.js +1 -1
- package/esm2015/grid-material/src/lib/pipes/editor-validate.pipe.js +10 -8
- package/fesm2015/sd-angular-core-grid-material.js +37 -15
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/grid-material/src/lib/components/desktop-cell/desktop-cell.component.d.ts +1 -0
- package/grid-material/src/lib/grid-material.component.d.ts +9 -5
- package/grid-material/src/lib/models/grid-option.model.d.ts +0 -7
- package/grid-material/src/lib/models/grid.model.d.ts +1 -0
- package/grid-material/src/lib/pipes/editor-validate.pipe.d.ts +4 -2
- package/package.json +1 -1
- package/{sd-angular-core-0.0.932.tgz → sd-angular-core-0.0.936.tgz} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1vcHRpb24ubW9kZWwuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9tb2RlbHMvZ3JpZC1vcHRpb24ubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFNkR3JpZE1hdGVyaWFsQ29sdW1uIH0gZnJvbSAnLi9ncmlkLWNvbHVtbi5tb2RlbCc7XHJcbmltcG9ydCB7IFNkR3JpZE1hdGVyaWFsQ29tbWFuZCB9IGZyb20gJy4vZ3JpZC1jb21tYW5kLm1vZGVsJztcclxuaW1wb3J0IHsgU2RHcmlkTWF0ZXJpYWxGaWx0ZXJSZXF1ZXN0LCBTZEdyaWRNYXRlcmlhbEZpbHRlck9wdGlvbiB9IGZyb20gJy4vZ3JpZC1maWx0ZXIubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbEV4cG9ydE9wdGlvbiB9IGZyb20gJy4vZ3JpZC1leHBvcnQubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbFJlbG9hZE9wdGlvbiB9IGZyb20gJy4vZ3JpZC1yZWxvYWQubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbENvbmZpZ09wdGlvbiB9IGZyb20gJy4vZ3JpZC1jb25maWcubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbFN1YkluZm9ybWF0aW9uIH0gZnJvbSAnLi9ncmlkLXN1Yi1pbmZvcm1hdGlvbi5tb2RlbCc7XHJcbmltcG9ydCB7IFNkR3JpZE1hdGVyaWFsU2VsZWN0aW9uIH0gZnJvbSAnLi9ncmlkLXNlbGVjdGlvbi5tb2RlbCc7XHJcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgU2RFZGl0b3IgfSBmcm9tICcuL2dyaWQtZWRpdG9yLm1vZGVsJztcclxuXHJcbmV4cG9ydCB0eXBlIFNkR3JpZE1hdGVyaWFsT3B0aW9uPFQgPSBhbnk+ID0gU2RHcmlkTWF0ZXJpYWxMb2NhbE9wdGlvbjxUPiB8IFNkR3JpZE1hdGVyaWFsU2VydmVyT3B0aW9uPFQ+
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1vcHRpb24ubW9kZWwuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9tb2RlbHMvZ3JpZC1vcHRpb24ubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFNkR3JpZE1hdGVyaWFsQ29sdW1uIH0gZnJvbSAnLi9ncmlkLWNvbHVtbi5tb2RlbCc7XHJcbmltcG9ydCB7IFNkR3JpZE1hdGVyaWFsQ29tbWFuZCB9IGZyb20gJy4vZ3JpZC1jb21tYW5kLm1vZGVsJztcclxuaW1wb3J0IHsgU2RHcmlkTWF0ZXJpYWxGaWx0ZXJSZXF1ZXN0LCBTZEdyaWRNYXRlcmlhbEZpbHRlck9wdGlvbiB9IGZyb20gJy4vZ3JpZC1maWx0ZXIubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbEV4cG9ydE9wdGlvbiB9IGZyb20gJy4vZ3JpZC1leHBvcnQubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbFJlbG9hZE9wdGlvbiB9IGZyb20gJy4vZ3JpZC1yZWxvYWQubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbENvbmZpZ09wdGlvbiB9IGZyb20gJy4vZ3JpZC1jb25maWcubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbFN1YkluZm9ybWF0aW9uIH0gZnJvbSAnLi9ncmlkLXN1Yi1pbmZvcm1hdGlvbi5tb2RlbCc7XHJcbmltcG9ydCB7IFNkR3JpZE1hdGVyaWFsU2VsZWN0aW9uIH0gZnJvbSAnLi9ncmlkLXNlbGVjdGlvbi5tb2RlbCc7XHJcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgU2RFZGl0b3IgfSBmcm9tICcuL2dyaWQtZWRpdG9yLm1vZGVsJztcclxuXHJcbmV4cG9ydCB0eXBlIFNkR3JpZE1hdGVyaWFsT3B0aW9uPFQgPSBhbnk+ID0gU2RHcmlkTWF0ZXJpYWxMb2NhbE9wdGlvbjxUPiB8IFNkR3JpZE1hdGVyaWFsU2VydmVyT3B0aW9uPFQ+O1xyXG5cclxuaW50ZXJmYWNlIFNkR3JpZE1hdGVyaWFsQmFzZU9wdGlvbjxUID0gYW55PiB7XHJcbiAgc2hhZG93PzogYm9vbGVhbjtcclxuICBtYXhIZWlnaHQ/OiBzdHJpbmc7XHJcbiAgbWluSGVpZ2h0Pzogc3RyaW5nO1xyXG4gIGtleT86IHN0cmluZztcclxuICBzZWxlY3Rpb24/OiBTZEdyaWRNYXRlcmlhbFNlbGVjdGlvbjxUPjtcclxuICBzb3J0YWJsZT86IGJvb2xlYW47XHJcbiAgZHJvcERyYWdDb2x1bW5FbmFibGU/OiBib29sZWFuO1xyXG4gIHBhZ2luYXRlPzoge1xyXG4gICAgcGFnZVNpemU/OiBudW1iZXI7XHJcbiAgICBwYWdlcz86IG51bWJlcltdO1xyXG4gICAgc2hvd0ZpcnN0TGFzdEJ1dHRvbnM/OiBib29sZWFuO1xyXG4gICAgaGlkZGVuPzogYm9vbGVhbjtcclxuICB9O1xyXG4gIGVkaXRvcj86IFNkRWRpdG9yPFQ+O1xyXG4gIHJlbG9hZD86IFNkR3JpZE1hdGVyaWFsUmVsb2FkT3B0aW9uPFQ+O1xyXG4gIGV4cG9ydD86IFNkR3JpZE1hdGVyaWFsRXhwb3J0T3B0aW9uPFQ+O1xyXG4gIGNvbmZpZz86IFNkR3JpZE1hdGVyaWFsQ29uZmlnT3B0aW9uPFQ+O1xyXG4gIGZpbHRlcj86IFNkR3JpZE1hdGVyaWFsRmlsdGVyT3B0aW9uO1xyXG4gIGNvbW1hbmRzPzogU2RHcmlkTWF0ZXJpYWxDb21tYW5kPFQ+W107XHJcbiAgY29sdW1uczogU2RHcmlkTWF0ZXJpYWxDb2x1bW48VD5bXTtcclxuICBzdWJJbmZvcm1hdGlvbj86IFNkR3JpZE1hdGVyaWFsU3ViSW5mb3JtYXRpb248VD47XHJcbiAgc3R5bGU/OiB7XHJcbiAgICBncmlkPzogJ3N0eWxlMScgfCAnc3R5bGUyJztcclxuICB9O1xyXG59XHJcblxyXG5pbnRlcmZhY2UgU2RHcmlkTWF0ZXJpYWxMb2NhbE9wdGlvbjxUID0gYW55PiBleHRlbmRzIFNkR3JpZE1hdGVyaWFsQmFzZU9wdGlvbjxUPiB7XHJcbiAgdHlwZTogJ2xvY2FsJztcclxuICBpdGVtczogKCgpID0+IFRbXSB8IFByb21pc2U8VFtdPik7XHJcbn1cclxuXHJcbmludGVyZmFjZSBTZEdyaWRNYXRlcmlhbFNlcnZlck9wdGlvbjxUID0gYW55PiBleHRlbmRzIFNkR3JpZE1hdGVyaWFsQmFzZU9wdGlvbjxUPiB7XHJcbiAgdHlwZTogJ3NlcnZlcic7XHJcbiAgaXRlbXM6IChmaWx0ZXJSZXF1ZXN0OiBTZEdyaWRNYXRlcmlhbEZpbHRlclJlcXVlc3QpID0+IFByb21pc2U8eyBpdGVtczogVFtdLCB0b3RhbDogbnVtYmVyIH0+IHwgT2JzZXJ2YWJsZTx7IGl0ZW1zOiBUW10sIHRvdGFsOiBudW1iZXIgfT47XHJcbn1cclxuIl19
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJDOi9Vc2Vycy9uZ2hpYXR0MTUvRGVza3RvcC9Xb3JraW5nLzFNRy9saWItY29yZS11aS9wcm9qZWN0cy9zZC1jb3JlL2dyaWQtbWF0ZXJpYWwvIiwic291cmNlcyI6WyJzcmMvbGliL21vZGVscy9ncmlkLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSBcInJ4anNcIjtcclxuZXhwb3J0IGludGVyZmFjZSBFZGl0b3JIYW5kbGVyIHtcclxuICBbY29sdW1uOiBzdHJpbmddOiB7XHJcbiAgICB2aXNpYmxlPzogYm9vbGVhbiB8ICdjcmVhdGUnIHwgJ3VwZGF0ZScsXHJcbiAgICBpdGVtcz86IGFueVtdIHwgT2JzZXJ2YWJsZTxhbnlbXT5cclxuICB9O1xyXG59XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFNkSXRlbSB7XHJcbiAgb3JpZ2luSXRlbT86IGFueTtcclxuICBpc1NlbGVjdGVkPzogYm9vbGVhbjtcclxuICBpc0V4cGFuZGVkPzogYm9vbGVhbjtcclxuICBpc0V4cGFuZGluZz86IGJvb2xlYW47XHJcbiAgZXhwYW5kRGV0YWlsPzogYW55O1xyXG4gIGVkaXRvclN0YXR1cz86ICdjcmVhdGUnIHwgJ3VwZGF0ZSc7XHJcbiAgZWRpdG9ySGFuZGxlclJvdz86IEVkaXRvckhhbmRsZXJSb3csXHJcbiAgZWRpdG9ySGFuZGxlckNvbHVtbj86IHtcclxuICAgIFtrZXk6IHN0cmluZ106IHtcclxuICAgICAgdmlzaWJsZTogYm9vbGVhbjtcclxuICAgICAgZXJyb3JNZXNzYWdlPzogc3RyaW5nO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBFZGl0b3JIYW5kbGVyUm93IHtcclxuICBzdGF0dXM/OiAnY3JlYXRlJyB8ICd1cGRhdGUnO1xyXG4gIHZpc2libGU/OiBib29sZWFuO1xyXG4gIGVkaXRhYmxlPzogYm9vbGVhbjtcclxuICByZW1vdmFibGU/OiBib29sZWFuO1xyXG4gIHNhdmFibGU/OiBib29sZWFuO1xyXG4gIGNhbmNlbGFibGU/OiBib29sZWFuO1xyXG4gIGVycm9yTWVzc2FnZT86IHN0cmluZztcclxuICB0ZW1wb3Jhcnk/OiBhbnk7XHJcbiAgc2F2aW5nPzogYm9vbGVhbjtcclxufVxyXG5cclxuZXhwb3J0IHR5cGUgU2RHcmlkTWF0ZXJpYWxJdGVtPFQgPSBhbnk+ID0gVCAmIFNkSXRlbTtcclxuXHJcblxyXG5cclxuLy8gZXhwb3J0IGludGVyZmFjZSBTZEdyaWRNYXRlcmlhbEl0ZW08VCA9IGFueT4ge1xyXG4vLyAgIGlzU2VsZWN0ZWQ/OiBib29sZWFuO1xyXG4vLyAgIGlzRXhwYW5kZWQ/OiBib29sZWFuO1xyXG4vLyAgIGlzRXhwYW5kaW5nPzogYm9vbGVhbjtcclxuLy8gICBleHBhbmREZXRhaWw/OiBhbnk7XHJcbi8vIH1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgR3JpZEl0ZW0ge1xyXG4gIGJsaW5rZXI/OiBhbnk7XHJcbiAgb3JpZ2luSXRlbT86IGFueTtcclxuICB0ZW1wb3Jhcnk/OiBhbnk7XHJcbiAgaXNDaGVja2VkPzogYm9vbGVhbjtcclxuICBlZGl0aW5nU3RhdHVzPzogJ2NyZWF0ZScgfCAndXBkYXRlJztcclxuICBlZGl0b3JIYW5kbGVyPzogRWRpdG9ySGFuZGxlciAmIHtcclxuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcclxuICAgIGVycm9yTWVzc2FnZT86IHN0cmluZztcclxuICAgIHNhdmluZz86IGJvb2xlYW47XHJcbiAgfTtcclxuICBzdWJJbmZvcm1hdGlvbj86IHtcclxuICAgIGlzT3BlbmVkPzogYm9vbGVhbjtcclxuICAgIGlzTG9hZGVkPzogYm9vbGVhbjtcclxuICAgIGlzTG9hZGluZz86IGJvb2xlYW47XHJcbiAgICBzdWJJdGVtcz86IGFueVtdO1xyXG4gIH07XHJcbiAgW2tleTogc3RyaW5nXTogYW55O1xyXG59Il19
|
|
@@ -4,9 +4,15 @@ export class SdEditorValidatePipe {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this.delay = 1000; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
|
|
6
6
|
}
|
|
7
|
-
transform(value, item,
|
|
7
|
+
transform(value, item, column, gridOption) {
|
|
8
|
+
var _a;
|
|
8
9
|
return __awaiter(this, void 0, void 0, function* () {
|
|
9
|
-
|
|
10
|
+
const { editor } = gridOption;
|
|
11
|
+
if (!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.visible)) {
|
|
12
|
+
return true;
|
|
13
|
+
}
|
|
14
|
+
if (!editor.validate) {
|
|
15
|
+
item.editorHandlerRow.errorMessage = null;
|
|
10
16
|
return true;
|
|
11
17
|
}
|
|
12
18
|
this.previous = new Date();
|
|
@@ -16,11 +22,7 @@ export class SdEditorValidatePipe {
|
|
|
16
22
|
if (dif < this.delay) {
|
|
17
23
|
return true;
|
|
18
24
|
}
|
|
19
|
-
|
|
20
|
-
item.editorHandlerRow.errorMessage = null;
|
|
21
|
-
return true;
|
|
22
|
-
}
|
|
23
|
-
const result = validate(item);
|
|
25
|
+
const result = editor.validate(item);
|
|
24
26
|
if (result instanceof Promise) {
|
|
25
27
|
item.editorHandlerRow.errorMessage = yield result;
|
|
26
28
|
return true;
|
|
@@ -37,4 +39,4 @@ SdEditorValidatePipe.decorators = [
|
|
|
37
39
|
name: 'sdEditorValidate'
|
|
38
40
|
},] }
|
|
39
41
|
];
|
|
40
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLXZhbGlkYXRlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9waXBlcy9lZGl0b3ItdmFsaWRhdGUucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFPcEQsTUFBTSxPQUFPLG9CQUFvQjtJQUhqQztRQUtVLFVBQUssR0FBRyxJQUFJLENBQUMsQ0FBQywwRkFBMEY7SUEwQmxILENBQUM7SUF6Qk8sU0FBUyxDQUFDLEtBQWEsRUFBRSxJQUFZLEVBQUUsTUFBNEIsRUFBRSxVQUFnQzs7O1lBQ3pHLE1BQU0sRUFBRSxNQUFNLEVBQUUsR0FBRyxVQUFVLENBQUM7WUFDOUIsSUFBSSxRQUFDLElBQUksQ0FBQyxnQkFBZ0IsMENBQUUsT0FBTyxDQUFBLEVBQUU7Z0JBQ25DLE9BQU8sSUFBSSxDQUFDO2FBQ2I7WUFDRCxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRTtnQkFDcEIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7Z0JBQzFDLE9BQU8sSUFBSSxDQUFDO2FBQ2I7WUFDRCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksSUFBSSxFQUFFLENBQUM7WUFDM0IsTUFBTSxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7WUFDOUQsTUFBTSxHQUFHLEdBQUcsSUFBSSxJQUFJLEVBQUUsQ0FBQztZQUN2QixNQUFNLEdBQUcsR0FBRyxHQUFHLENBQUMsT0FBTyxFQUFFLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNwRCxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFO2dCQUNwQixPQUFPLElBQUksQ0FBQzthQUNiO1lBQ0QsTUFBTSxNQUFNLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUNyQyxJQUFJLE1BQU0sWUFBWSxPQUFPLEVBQUU7Z0JBQzdCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLEdBQUcsTUFBTSxNQUFNLENBQUM7Z0JBQ2xELE9BQU8sSUFBSSxDQUFDO2FBQ2I7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksR0FBRyxNQUFNLENBQUM7Z0JBQzVDLE9BQU8sSUFBSSxDQUFDO2FBQ2I7O0tBQ0Y7OztZQTlCRixJQUFJLFNBQUM7Z0JBQ0osSUFBSSxFQUFFLGtCQUFrQjthQUN6QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU2RHcmlkTWF0ZXJpYWxDb2x1bW4gfSBmcm9tICcuLi9tb2RlbHMvZ3JpZC1jb2x1bW4ubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbE9wdGlvbiB9IGZyb20gJy4uL21vZGVscy9ncmlkLW9wdGlvbi5tb2RlbCc7XHJcbmltcG9ydCB7IFNkSXRlbSB9IGZyb20gJy4uL21vZGVscy9ncmlkLm1vZGVsJztcclxuQFBpcGUoe1xyXG4gIG5hbWU6ICdzZEVkaXRvclZhbGlkYXRlJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RFZGl0b3JWYWxpZGF0ZVBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcclxuICBwcml2YXRlIHByZXZpb3VzOiBEYXRlO1xyXG4gIHByaXZhdGUgZGVsYXkgPSAxMDAwOyAvLyBTYXUga2hv4bqjbmcgdGjhu51pIGdpYW4gZGVsYXkgbuG6v3Uga2jDtG5nIGPDsyB0aGF5IMSR4buVaSB0aMOsIHRow6wgbeG7m2kgYuG6r3QgxJHhuqd1IHRo4buxYyBoaeG7h24gdmFsaWRhdGVcclxuICBhc3luYyB0cmFuc2Zvcm0odmFsdWU6IHN0cmluZywgaXRlbTogU2RJdGVtLCBjb2x1bW46IFNkR3JpZE1hdGVyaWFsQ29sdW1uLCBncmlkT3B0aW9uOiBTZEdyaWRNYXRlcmlhbE9wdGlvbik6IFByb21pc2U8Ym9vbGVhbj4ge1xyXG4gICAgY29uc3QgeyBlZGl0b3IgfSA9IGdyaWRPcHRpb247XHJcbiAgICBpZiAoIWl0ZW0uZWRpdG9ySGFuZGxlclJvdz8udmlzaWJsZSkge1xyXG4gICAgICByZXR1cm4gdHJ1ZTtcclxuICAgIH1cclxuICAgIGlmICghZWRpdG9yLnZhbGlkYXRlKSB7XHJcbiAgICAgIGl0ZW0uZWRpdG9ySGFuZGxlclJvdy5lcnJvck1lc3NhZ2UgPSBudWxsO1xyXG4gICAgICByZXR1cm4gdHJ1ZTtcclxuICAgIH1cclxuICAgIHRoaXMucHJldmlvdXMgPSBuZXcgRGF0ZSgpO1xyXG4gICAgYXdhaXQgbmV3IFByb21pc2UocmVzb2x2ZSA9PiBzZXRUaW1lb3V0KHJlc29sdmUsIHRoaXMuZGVsYXkpKTtcclxuICAgIGNvbnN0IG5vdyA9IG5ldyBEYXRlKCk7XHJcbiAgICBjb25zdCBkaWYgPSBub3cuZ2V0VGltZSgpIC0gdGhpcy5wcmV2aW91cy5nZXRUaW1lKCk7XHJcbiAgICBpZiAoZGlmIDwgdGhpcy5kZWxheSkge1xyXG4gICAgICByZXR1cm4gdHJ1ZTtcclxuICAgIH1cclxuICAgIGNvbnN0IHJlc3VsdCA9IGVkaXRvci52YWxpZGF0ZShpdGVtKTtcclxuICAgIGlmIChyZXN1bHQgaW5zdGFuY2VvZiBQcm9taXNlKSB7XHJcbiAgICAgIGl0ZW0uZWRpdG9ySGFuZGxlclJvdy5lcnJvck1lc3NhZ2UgPSBhd2FpdCByZXN1bHQ7XHJcbiAgICAgIHJldHVybiB0cnVlO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgaXRlbS5lZGl0b3JIYW5kbGVyUm93LmVycm9yTWVzc2FnZSA9IHJlc3VsdDtcclxuICAgICAgcmV0dXJuIHRydWU7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -1117,7 +1117,7 @@ SdGridService.ctorParameters = () => [
|
|
|
1117
1117
|
{ type: SdUtilityService }
|
|
1118
1118
|
];
|
|
1119
1119
|
|
|
1120
|
-
var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems
|
|
1120
|
+
var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
|
|
1121
1121
|
class SdGridMaterial {
|
|
1122
1122
|
constructor(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, gridService) {
|
|
1123
1123
|
this.ref = ref;
|
|
@@ -1672,10 +1672,6 @@ class SdGridMaterial {
|
|
|
1672
1672
|
var _a;
|
|
1673
1673
|
(_a = this.gridFilter) === null || _a === void 0 ? void 0 : _a.setFilter(args);
|
|
1674
1674
|
};
|
|
1675
|
-
_generateEditorHanlder.set(this, (item) => {
|
|
1676
|
-
// item.editorHandler = item.editorHandler || {};
|
|
1677
|
-
// this.editorVisiblePipe.transform(null, item, this.gridOption);
|
|
1678
|
-
});
|
|
1679
1675
|
this.onCreate = () => {
|
|
1680
1676
|
var _a;
|
|
1681
1677
|
const { type, editor, columns } = this.gridOption;
|
|
@@ -1720,6 +1716,9 @@ class SdGridMaterial {
|
|
|
1720
1716
|
this.ref.detectChanges();
|
|
1721
1717
|
};
|
|
1722
1718
|
this.onSave = (item) => __awaiter(this, void 0, void 0, function* () {
|
|
1719
|
+
if (item.editorHandlerRow.saving) {
|
|
1720
|
+
return;
|
|
1721
|
+
}
|
|
1723
1722
|
const { editor } = this.gridOption;
|
|
1724
1723
|
try {
|
|
1725
1724
|
item.editorHandlerRow.saving = true;
|
|
@@ -1862,12 +1861,32 @@ class SdGridMaterial {
|
|
|
1862
1861
|
drop(event, columns) {
|
|
1863
1862
|
moveItemInArray(columns, event.previousIndex, event.currentIndex);
|
|
1864
1863
|
}
|
|
1864
|
+
get editedItems() {
|
|
1865
|
+
return this.items.filter(item => {
|
|
1866
|
+
if (!item.originItem) {
|
|
1867
|
+
return true;
|
|
1868
|
+
}
|
|
1869
|
+
if (Object.keys(item.originItem).some(key => item.originItem[key] !== item[key])) {
|
|
1870
|
+
return true;
|
|
1871
|
+
}
|
|
1872
|
+
return false;
|
|
1873
|
+
}).map(item => {
|
|
1874
|
+
const { editorStatus, editorHandlerRow, editorHandlerColumn, expandDetail, isExpanded, isExpanding, isSelected, originItem } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem"]);
|
|
1875
|
+
return Object.assign(Object.assign({}, result), { editorErrorMessage: editorHandlerRow === null || editorHandlerRow === void 0 ? void 0 : editorHandlerRow.errorMessage });
|
|
1876
|
+
});
|
|
1877
|
+
}
|
|
1878
|
+
get gridItems() {
|
|
1879
|
+
return this.items.map(item => {
|
|
1880
|
+
const { editorStatus, editorHandlerRow, editorHandlerColumn, expandDetail, isExpanded, isExpanding, isSelected, originItem } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem"]);
|
|
1881
|
+
return result;
|
|
1882
|
+
});
|
|
1883
|
+
}
|
|
1865
1884
|
}
|
|
1866
|
-
_paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap()
|
|
1885
|
+
_paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
|
|
1867
1886
|
SdGridMaterial.decorators = [
|
|
1868
1887
|
{ type: Component, args: [{
|
|
1869
1888
|
selector: 'sd-grid-material',
|
|
1870
|
-
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">edit</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [key]=\"key\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [key]=\"key\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \">\r\n <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-select>\r\n <sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n <sd-date-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \" [isOpened]=\"actions?.length\">\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>",
|
|
1889
|
+
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">edit</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \">\r\n <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-select>\r\n <sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n <sd-date-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \" [isOpened]=\"actions?.length\">\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>",
|
|
1871
1890
|
animations: [
|
|
1872
1891
|
trigger('detailExpand', [
|
|
1873
1892
|
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -2701,13 +2720,14 @@ class SdDesktopCell {
|
|
|
2701
2720
|
SdDesktopCell.decorators = [
|
|
2702
2721
|
{ type: Component, args: [{
|
|
2703
2722
|
selector: 'sd-desktop-cell',
|
|
2704
|
-
template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"item.editorHandlerRow;else useView\">\r\n <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else
|
|
2723
|
+
template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"item.editorHandlerRow;else useView\">\r\n <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n <ng-container *sdLet=\"item[column.field] | sdEditorValidate:item:column:gridOption\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: idx, isEdited: true }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [column]=\"column\" [item]=\"item\">\r\n </sd-desktop-cell-editor>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #useView>\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: idx }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n </sd-desktop-cell-view>\r\n </ng-template>\r\n</ng-container>",
|
|
2705
2724
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2706
2725
|
styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}.c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;padding:2px 12px;text-align:center}.c-badge.c-warning{background:#fff3e0;color:#ff9600}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-success{background:#e8f5e9;color:#4caf50}.c-badge.c-danger{background:#fee8e7;color:#f82c13}.c-badge.c-normal{background:rgba(0,0,0,.12);color:#000}.wes-status .c-material-icon{font-size:12px;height:12px;width:12px}.wes-status.text-secondary .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle .c-material-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle.c-secondary{color:#212121}.c-badge-circle.c-info{color:#2962ff}.c-badge-circle.c-success{color:#4caf50}.c-badge-circle.c-danger{color:#f82c13}.c-badge-circle.c-warning{color:#ff9600}"]
|
|
2707
2726
|
},] }
|
|
2708
2727
|
];
|
|
2709
2728
|
SdDesktopCell.ctorParameters = () => [];
|
|
2710
2729
|
SdDesktopCell.propDecorators = {
|
|
2730
|
+
value: [{ type: Input }],
|
|
2711
2731
|
key: [{ type: Input }],
|
|
2712
2732
|
column: [{ type: Input }],
|
|
2713
2733
|
item: [{ type: Input }],
|
|
@@ -2815,9 +2835,15 @@ class SdEditorValidatePipe {
|
|
|
2815
2835
|
constructor() {
|
|
2816
2836
|
this.delay = 1000; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
|
|
2817
2837
|
}
|
|
2818
|
-
transform(value, item,
|
|
2838
|
+
transform(value, item, column, gridOption) {
|
|
2839
|
+
var _a;
|
|
2819
2840
|
return __awaiter(this, void 0, void 0, function* () {
|
|
2820
|
-
|
|
2841
|
+
const { editor } = gridOption;
|
|
2842
|
+
if (!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.visible)) {
|
|
2843
|
+
return true;
|
|
2844
|
+
}
|
|
2845
|
+
if (!editor.validate) {
|
|
2846
|
+
item.editorHandlerRow.errorMessage = null;
|
|
2821
2847
|
return true;
|
|
2822
2848
|
}
|
|
2823
2849
|
this.previous = new Date();
|
|
@@ -2827,11 +2853,7 @@ class SdEditorValidatePipe {
|
|
|
2827
2853
|
if (dif < this.delay) {
|
|
2828
2854
|
return true;
|
|
2829
2855
|
}
|
|
2830
|
-
|
|
2831
|
-
item.editorHandlerRow.errorMessage = null;
|
|
2832
|
-
return true;
|
|
2833
|
-
}
|
|
2834
|
-
const result = validate(item);
|
|
2856
|
+
const result = editor.validate(item);
|
|
2835
2857
|
if (result instanceof Promise) {
|
|
2836
2858
|
item.editorHandlerRow.errorMessage = yield result;
|
|
2837
2859
|
return true;
|