@sd-angular/core 0.0.928 → 0.0.932
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 +42 -17
- 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 +8 -4
- package/esm2015/grid-material/src/lib/components/desktop-cell-editor/desktop-cell-editor.component.js +2 -2
- package/esm2015/grid-material/src/lib/grid-material.component.js +27 -4
- package/esm2015/grid-material/src/lib/models/grid.model.js +1 -1
- package/esm2015/grid-material/src/lib/pipes/editor-handler-column.pipe.js +8 -9
- package/esm2015/grid-material/src/lib/pipes/editor-handler-row.pipe.js +4 -4
- package/fesm2015/sd-angular-core-grid-material.js +44 -18
- 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 +5 -0
- package/grid-material/src/lib/grid-material.component.d.ts +1 -0
- package/grid-material/src/lib/models/grid.model.d.ts +1 -0
- package/package.json +1 -1
- package/{sd-angular-core-0.0.928.tgz → sd-angular-core-0.0.932.tgz} +0 -0
|
@@ -2,26 +2,25 @@ import { Pipe } from '@angular/core';
|
|
|
2
2
|
export class SdEditorHandlerColumnPipe {
|
|
3
3
|
transform(value, item, column, gridOption) {
|
|
4
4
|
if (column.type === 'children' || column.type === 'children-col') {
|
|
5
|
-
return
|
|
5
|
+
return;
|
|
6
6
|
}
|
|
7
|
+
const { columns } = gridOption;
|
|
7
8
|
const visible = (col) => {
|
|
8
9
|
if (col.type === 'children' || col.type === 'children-col') {
|
|
9
10
|
return false;
|
|
10
11
|
}
|
|
11
|
-
let isDisabled = false;
|
|
12
12
|
// Kiểm tra xem có bị disabled hay không?
|
|
13
13
|
if (col.editor) {
|
|
14
|
-
isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
return false;
|
|
14
|
+
const isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
|
|
15
|
+
if (isDisabled) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
19
18
|
}
|
|
20
19
|
return true;
|
|
21
20
|
};
|
|
22
21
|
item.editorHandlerColumn = item.editorHandlerColumn || {};
|
|
23
22
|
item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible: visible(column) });
|
|
24
|
-
for (const col of
|
|
23
|
+
for (const col of columns.filter(e => { var _a, _b; return (_b = (_a = column.editor) === null || _a === void 0 ? void 0 : _a.relatedColumns) === null || _b === void 0 ? void 0 : _b.includes(e.field); })) {
|
|
25
24
|
item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: visible(col) });
|
|
26
25
|
}
|
|
27
26
|
return true;
|
|
@@ -32,4 +31,4 @@ SdEditorHandlerColumnPipe.decorators = [
|
|
|
32
31
|
name: 'sdEditorHandlerColumn'
|
|
33
32
|
},] }
|
|
34
33
|
];
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLWhhbmRsZXItY29sdW1uLnBpcGUuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9waXBlcy9lZGl0b3ItaGFuZGxlci1jb2x1bW4ucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQU9wRCxNQUFNLE9BQU8seUJBQXlCO0lBQ3BDLFNBQVMsQ0FBQyxLQUFVLEVBQUUsSUFBWSxFQUFFLE1BQTRCLEVBQUUsVUFBZ0M7UUFDaEcsSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLFVBQVUsSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLGNBQWMsRUFBRTtZQUNoRSxPQUFPO1NBQ1I7UUFDRCxNQUFNLEVBQUUsT0FBTyxFQUFFLEdBQUcsVUFBVSxDQUFDO1FBQy9CLE1BQU0sT0FBTyxHQUFHLENBQUMsR0FBeUIsRUFBRSxFQUFFO1lBQzVDLElBQUksR0FBRyxDQUFDLElBQUksS0FBSyxVQUFVLElBQUksR0FBRyxDQUFDLElBQUksS0FBSyxjQUFjLEVBQUU7Z0JBQzFELE9BQU8sS0FBSyxDQUFDO2FBQ2Q7WUFDRCx5Q0FBeUM7WUFDekMsSUFBSSxHQUFHLENBQUMsTUFBTSxFQUFFO2dCQUNkLE1BQU0sVUFBVSxHQUFHLE9BQU8sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDO2dCQUNqSCxJQUFJLFVBQVUsRUFBRTtvQkFDZCxPQUFPLEtBQUssQ0FBQztpQkFDZDthQUNGO1lBQ0QsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDLENBQUM7UUFDRixJQUFJLENBQUMsbUJBQW1CLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixJQUFJLEVBQUUsQ0FBQztRQUMxRCxJQUFJLENBQUMsbUJBQW1CLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxtQ0FDakMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FDekMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsR0FDekIsQ0FBQTtRQUNELEtBQUssTUFBTSxHQUFHLElBQUksT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxrQ0FBQyxNQUFNLENBQUMsTUFBTSwwQ0FBRSxjQUFjLDBDQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsS0FBSyxJQUFDLENBQUMsRUFBRTtZQUN2RixJQUFJLENBQUMsbUJBQW1CLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxtQ0FDOUIsSUFBSSxDQUFDLG1CQUFtQixDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsS0FDdEMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FDdEIsQ0FBQTtTQUNGO1FBQ0QsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDOzs7WUFsQ0YsSUFBSSxTQUFDO2dCQUNKLElBQUksRUFBRSx1QkFBdUI7YUFDOUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkR3JpZE1hdGVyaWFsQ29sdW1uIH0gZnJvbSAnLi4vbW9kZWxzL2dyaWQtY29sdW1uLm1vZGVsJztcclxuaW1wb3J0IHsgU2RHcmlkTWF0ZXJpYWxPcHRpb24gfSBmcm9tICcuLi9tb2RlbHMvZ3JpZC1vcHRpb24ubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEl0ZW0gfSBmcm9tICcuLi9tb2RlbHMvZ3JpZC5tb2RlbCc7XHJcbkBQaXBlKHtcclxuICBuYW1lOiAnc2RFZGl0b3JIYW5kbGVyQ29sdW1uJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RFZGl0b3JIYW5kbGVyQ29sdW1uUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG4gIHRyYW5zZm9ybSh2YWx1ZTogYW55LCBpdGVtOiBTZEl0ZW0sIGNvbHVtbjogU2RHcmlkTWF0ZXJpYWxDb2x1bW4sIGdyaWRPcHRpb246IFNkR3JpZE1hdGVyaWFsT3B0aW9uKSB7XHJcbiAgICBpZiAoY29sdW1uLnR5cGUgPT09ICdjaGlsZHJlbicgfHwgY29sdW1uLnR5cGUgPT09ICdjaGlsZHJlbi1jb2wnKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICAgIGNvbnN0IHsgY29sdW1ucyB9ID0gZ3JpZE9wdGlvbjtcclxuICAgIGNvbnN0IHZpc2libGUgPSAoY29sOiBTZEdyaWRNYXRlcmlhbENvbHVtbikgPT4ge1xyXG4gICAgICBpZiAoY29sLnR5cGUgPT09ICdjaGlsZHJlbicgfHwgY29sLnR5cGUgPT09ICdjaGlsZHJlbi1jb2wnKSB7XHJcbiAgICAgICAgcmV0dXJuIGZhbHNlO1xyXG4gICAgICB9XHJcbiAgICAgIC8vIEtp4buDbSB0cmEgeGVtIGPDsyBi4buLIGRpc2FibGVkIGhheSBraMO0bmc/XHJcbiAgICAgIGlmIChjb2wuZWRpdG9yKSB7XHJcbiAgICAgICAgY29uc3QgaXNEaXNhYmxlZCA9IHR5cGVvZiAoY29sLmVkaXRvci5kaXNhYmxlZCkgPT09ICdmdW5jdGlvbicgPyBjb2wuZWRpdG9yLmRpc2FibGVkKGl0ZW0pIDogY29sLmVkaXRvci5kaXNhYmxlZDtcclxuICAgICAgICBpZiAoaXNEaXNhYmxlZCkge1xyXG4gICAgICAgICAgcmV0dXJuIGZhbHNlO1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgICByZXR1cm4gdHJ1ZTtcclxuICAgIH07XHJcbiAgICBpdGVtLmVkaXRvckhhbmRsZXJDb2x1bW4gPSBpdGVtLmVkaXRvckhhbmRsZXJDb2x1bW4gfHwge307XHJcbiAgICBpdGVtLmVkaXRvckhhbmRsZXJDb2x1bW5bY29sdW1uLmZpZWxkXSA9IHtcclxuICAgICAgLi4uaXRlbS5lZGl0b3JIYW5kbGVyQ29sdW1uW2NvbHVtbi5maWVsZF0sXHJcbiAgICAgIHZpc2libGU6IHZpc2libGUoY29sdW1uKVxyXG4gICAgfVxyXG4gICAgZm9yIChjb25zdCBjb2wgb2YgY29sdW1ucy5maWx0ZXIoZSA9PiBjb2x1bW4uZWRpdG9yPy5yZWxhdGVkQ29sdW1ucz8uaW5jbHVkZXMoZS5maWVsZCkpKSB7XHJcbiAgICAgIGl0ZW0uZWRpdG9ySGFuZGxlckNvbHVtbltjb2wuZmllbGRdID0ge1xyXG4gICAgICAgIC4uLml0ZW0uZWRpdG9ySGFuZGxlckNvbHVtbltjb2wuZmllbGRdLFxyXG4gICAgICAgIHZpc2libGU6IHZpc2libGUoY29sKVxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICByZXR1cm4gdHJ1ZTtcclxuICB9XHJcbn1cclxuIl19
|
|
@@ -17,15 +17,15 @@ export class SdEditorHandlerRowPipe {
|
|
|
17
17
|
}
|
|
18
18
|
if (editor.type === 'inline') {
|
|
19
19
|
const removable = editor.removable;
|
|
20
|
-
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { editable: false, removable: status
|
|
20
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: true, editable: false, removable: status !== 'create' && (typeof (removable) === 'function' ? removable(item) : removable), savable: false, cancelable: status === 'create' });
|
|
21
21
|
}
|
|
22
22
|
else if (editor.type === 'focus') {
|
|
23
23
|
const editable = editor.editable;
|
|
24
|
-
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: !!status, cancelable: !!status });
|
|
24
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !!status, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: !!status, cancelable: !!status });
|
|
25
25
|
}
|
|
26
26
|
else if (editor.type === 'popup') {
|
|
27
27
|
const editable = editor.editable;
|
|
28
|
-
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: false, cancelable: false });
|
|
28
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: false, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: false, cancelable: false });
|
|
29
29
|
}
|
|
30
30
|
return item.editorHandlerRow;
|
|
31
31
|
}
|
|
@@ -35,4 +35,4 @@ SdEditorHandlerRowPipe.decorators = [
|
|
|
35
35
|
name: 'sdEditorHandlerRow'
|
|
36
36
|
},] }
|
|
37
37
|
];
|
|
38
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLWhhbmRsZXItcm93LnBpcGUuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9waXBlcy9lZGl0b3ItaGFuZGxlci1yb3cucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQU1wRCxNQUFNLE9BQU8sc0JBQXNCO0lBQ2pDLFNBQVMsQ0FBQyxNQUEyQixFQUFFLElBQVksRUFBRSxVQUFnQztRQUNuRixNQUFNLEVBQUUsTUFBTSxFQUFFLEdBQUcsVUFBVSxDQUFDO1FBQzlCLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDWCxPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsSUFBSSxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLElBQUksT0FBTyxDQUFDLE1BQU0sYUFBTixNQUFNLHVCQUFOLE1BQU0sQ0FBRSxRQUFRLENBQUMsS0FBSyxVQUFVLEVBQUU7WUFDNUMsVUFBVSxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDcEM7YUFBTTtZQUNMLFVBQVUsR0FBRyxNQUFNLGFBQU4sTUFBTSx1QkFBTixNQUFNLENBQUUsUUFBUSxDQUFDO1NBQy9CO1FBQ0QsSUFBRyxVQUFVLEVBQUU7WUFDYixPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLFFBQVEsRUFBRTtZQUM1QixNQUFNLFNBQVMsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDO1lBQ25DLElBQUksQ0FBQyxnQkFBZ0IsbUNBQ2hCLElBQUksQ0FBQyxnQkFBZ0IsS0FDeEIsT0FBTyxFQUFFLElBQUksRUFDYixRQUFRLEVBQUUsS0FBSyxFQUNmLFNBQVMsRUFBRSxNQUFNLEtBQUssUUFBUSxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsRUFDbkcsT0FBTyxFQUFFLEtBQUssRUFDZCxVQUFVLEVBQUUsTUFBTSxLQUFLLFFBQVEsR0FDaEMsQ0FBQTtTQUNGO2FBQU0sSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLE9BQU8sRUFBRTtZQUNsQyxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDO1lBQ2pDLElBQUksQ0FBQyxnQkFBZ0IsbUNBQ2hCLElBQUksQ0FBQyxnQkFBZ0IsS0FDeEIsT0FBTyxFQUFFLENBQUMsQ0FBQyxNQUFNLEVBQ2pCLFFBQVEsRUFBRSxDQUFDLE1BQU0sSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsS0FBSyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLEVBQ25GLFNBQVMsRUFBRSxLQUFLLEVBQ2hCLE9BQU8sRUFBRSxDQUFDLENBQUMsTUFBTSxFQUNqQixVQUFVLEVBQUUsQ0FBQyxDQUFDLE1BQU0sR0FDckIsQ0FBQTtTQUNGO2FBQU0sSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLE9BQU8sRUFBRTtZQUNsQyxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsUUFBUSxDQUFDO1lBQ2pDLElBQUksQ0FBQyxnQkFBZ0IsbUNBQ2hCLElBQUksQ0FBQyxnQkFBZ0IsS0FDeEIsT0FBTyxFQUFFLEtBQUssRUFDZCxRQUFRLEVBQUUsQ0FBQyxNQUFNLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxFQUNuRixTQUFTLEVBQUUsS0FBSyxFQUNoQixPQUFPLEVBQUUsS0FBSyxFQUNkLFVBQVUsRUFBRSxLQUFLLEdBQ2xCLENBQUE7U0FDRjtRQUNELE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDO0lBQy9CLENBQUM7OztZQWxERixJQUFJLFNBQUM7Z0JBQ0osSUFBSSxFQUFFLG9CQUFvQjthQUMzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU2RHcmlkTWF0ZXJpYWxPcHRpb24gfSBmcm9tICcuLi9tb2RlbHMvZ3JpZC1vcHRpb24ubW9kZWwnO1xyXG5pbXBvcnQgeyBFZGl0b3JIYW5kbGVyUm93LCBTZEl0ZW0gfSBmcm9tICcuLi9tb2RlbHMvZ3JpZC5tb2RlbCc7XHJcbkBQaXBlKHtcclxuICBuYW1lOiAnc2RFZGl0b3JIYW5kbGVyUm93J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RFZGl0b3JIYW5kbGVyUm93UGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG4gIHRyYW5zZm9ybShzdGF0dXM6ICdjcmVhdGUnIHwgJ3VwZGF0ZScsIGl0ZW06IFNkSXRlbSwgZ3JpZE9wdGlvbjogU2RHcmlkTWF0ZXJpYWxPcHRpb24pOiBFZGl0b3JIYW5kbGVyUm93IHtcclxuICAgIGNvbnN0IHsgZWRpdG9yIH0gPSBncmlkT3B0aW9uO1xyXG4gICAgaWYgKCFlZGl0b3IpIHtcclxuICAgICAgcmV0dXJuIG51bGw7XHJcbiAgICB9XHJcbiAgICBsZXQgaXNEaXNhYmxlZCA9IGZhbHNlO1xyXG4gICAgaWYgKHR5cGVvZiAoZWRpdG9yPy5kaXNhYmxlZCkgPT09ICdmdW5jdGlvbicpIHtcclxuICAgICAgaXNEaXNhYmxlZCA9IGVkaXRvci5kaXNhYmxlZChpdGVtKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGlzRGlzYWJsZWQgPSBlZGl0b3I/LmRpc2FibGVkO1xyXG4gICAgfVxyXG4gICAgaWYoaXNEaXNhYmxlZCkge1xyXG4gICAgICByZXR1cm4gbnVsbDtcclxuICAgIH1cclxuICAgIGlmIChlZGl0b3IudHlwZSA9PT0gJ2lubGluZScpIHtcclxuICAgICAgY29uc3QgcmVtb3ZhYmxlID0gZWRpdG9yLnJlbW92YWJsZTtcclxuICAgICAgaXRlbS5lZGl0b3JIYW5kbGVyUm93ID0ge1xyXG4gICAgICAgIC4uLml0ZW0uZWRpdG9ySGFuZGxlclJvdyxcclxuICAgICAgICB2aXNpYmxlOiB0cnVlLFxyXG4gICAgICAgIGVkaXRhYmxlOiBmYWxzZSxcclxuICAgICAgICByZW1vdmFibGU6IHN0YXR1cyAhPT0gJ2NyZWF0ZScgJiYgKHR5cGVvZiAocmVtb3ZhYmxlKSA9PT0gJ2Z1bmN0aW9uJyA/IHJlbW92YWJsZShpdGVtKSA6IHJlbW92YWJsZSksXHJcbiAgICAgICAgc2F2YWJsZTogZmFsc2UsXHJcbiAgICAgICAgY2FuY2VsYWJsZTogc3RhdHVzID09PSAnY3JlYXRlJ1xyXG4gICAgICB9XHJcbiAgICB9IGVsc2UgaWYgKGVkaXRvci50eXBlID09PSAnZm9jdXMnKSB7XHJcbiAgICAgIGNvbnN0IGVkaXRhYmxlID0gZWRpdG9yLmVkaXRhYmxlO1xyXG4gICAgICBpdGVtLmVkaXRvckhhbmRsZXJSb3cgPSB7XHJcbiAgICAgICAgLi4uaXRlbS5lZGl0b3JIYW5kbGVyUm93LFxyXG4gICAgICAgIHZpc2libGU6ICEhc3RhdHVzLFxyXG4gICAgICAgIGVkaXRhYmxlOiAhc3RhdHVzICYmICh0eXBlb2YgKGVkaXRhYmxlKSA9PT0gJ2Z1bmN0aW9uJyA/IGVkaXRhYmxlKGl0ZW0pIDogZWRpdGFibGUpLFxyXG4gICAgICAgIHJlbW92YWJsZTogZmFsc2UsXHJcbiAgICAgICAgc2F2YWJsZTogISFzdGF0dXMsXHJcbiAgICAgICAgY2FuY2VsYWJsZTogISFzdGF0dXNcclxuICAgICAgfVxyXG4gICAgfSBlbHNlIGlmIChlZGl0b3IudHlwZSA9PT0gJ3BvcHVwJykge1xyXG4gICAgICBjb25zdCBlZGl0YWJsZSA9IGVkaXRvci5lZGl0YWJsZTtcclxuICAgICAgaXRlbS5lZGl0b3JIYW5kbGVyUm93ID0ge1xyXG4gICAgICAgIC4uLml0ZW0uZWRpdG9ySGFuZGxlclJvdyxcclxuICAgICAgICB2aXNpYmxlOiBmYWxzZSxcclxuICAgICAgICBlZGl0YWJsZTogIXN0YXR1cyAmJiAodHlwZW9mIChlZGl0YWJsZSkgPT09ICdmdW5jdGlvbicgPyBlZGl0YWJsZShpdGVtKSA6IGVkaXRhYmxlKSxcclxuICAgICAgICByZW1vdmFibGU6IGZhbHNlLFxyXG4gICAgICAgIHNhdmFibGU6IGZhbHNlLFxyXG4gICAgICAgIGNhbmNlbGFibGU6IGZhbHNlXHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgIHJldHVybiBpdGVtLmVkaXRvckhhbmRsZXJSb3c7XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -1766,16 +1766,24 @@ class SdGridMaterial {
|
|
|
1766
1766
|
if (this.gridOption.type === 'local') {
|
|
1767
1767
|
const idx2 = this.localItems.indexOf(item);
|
|
1768
1768
|
this.localItems.splice(idx2, 1);
|
|
1769
|
+
this.localItems = [...this.localItems];
|
|
1769
1770
|
}
|
|
1770
1771
|
const idx1 = this.items.indexOf(item);
|
|
1771
1772
|
this.items.splice(idx1, 1);
|
|
1773
|
+
this.items = [...this.items];
|
|
1774
|
+
this.ref.detectChanges();
|
|
1775
|
+
return;
|
|
1772
1776
|
}
|
|
1773
1777
|
if (editor.type === 'focus') {
|
|
1774
1778
|
if (item.editorStatus === 'create') {
|
|
1775
1779
|
if (this.gridOption.type === 'local') {
|
|
1776
|
-
this.localItems.
|
|
1780
|
+
const idx2 = this.localItems.indexOf(item);
|
|
1781
|
+
this.localItems.splice(idx2, 1);
|
|
1782
|
+
this.localItems = [...this.localItems];
|
|
1777
1783
|
}
|
|
1778
|
-
this.items.
|
|
1784
|
+
const idx1 = this.items.indexOf(item);
|
|
1785
|
+
this.items.splice(idx1, 1);
|
|
1786
|
+
this.items = [...this.items];
|
|
1779
1787
|
}
|
|
1780
1788
|
else {
|
|
1781
1789
|
Object.assign(item, item.editorHandlerRow.temporary);
|
|
@@ -1784,6 +1792,21 @@ class SdGridMaterial {
|
|
|
1784
1792
|
item.editorStatus = undefined;
|
|
1785
1793
|
this.ref.detectChanges();
|
|
1786
1794
|
};
|
|
1795
|
+
this.onRemove = (item) => {
|
|
1796
|
+
const { editor } = this.gridOption;
|
|
1797
|
+
if (editor.type === 'inline') {
|
|
1798
|
+
if (this.gridOption.type === 'local') {
|
|
1799
|
+
const idx2 = this.localItems.indexOf(item);
|
|
1800
|
+
this.localItems.splice(idx2, 1);
|
|
1801
|
+
this.localItems = [...this.localItems];
|
|
1802
|
+
}
|
|
1803
|
+
const idx1 = this.items.indexOf(item);
|
|
1804
|
+
this.items.splice(idx1, 1);
|
|
1805
|
+
this.items = [...this.items];
|
|
1806
|
+
this.ref.detectChanges();
|
|
1807
|
+
return;
|
|
1808
|
+
}
|
|
1809
|
+
};
|
|
1787
1810
|
}
|
|
1788
1811
|
set _gridFilter(gridFilter) {
|
|
1789
1812
|
if (gridFilter && this.gridFilter !== gridFilter) {
|
|
@@ -1844,7 +1867,7 @@ _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap
|
|
|
1844
1867
|
SdGridMaterial.decorators = [
|
|
1845
1868
|
{ type: Component, args: [{
|
|
1846
1869
|
selector: 'sd-grid-material',
|
|
1847
|
-
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)=\"onCancel(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 <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: i }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\"\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 <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: i }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\"\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>",
|
|
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>",
|
|
1848
1871
|
animations: [
|
|
1849
1872
|
trigger('detailExpand', [
|
|
1850
1873
|
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -2671,12 +2694,14 @@ SdDynamicColumn.propDecorators = {
|
|
|
2671
2694
|
};
|
|
2672
2695
|
|
|
2673
2696
|
class SdDesktopCell {
|
|
2674
|
-
constructor() {
|
|
2697
|
+
constructor() {
|
|
2698
|
+
this.cellDef = {};
|
|
2699
|
+
}
|
|
2675
2700
|
}
|
|
2676
2701
|
SdDesktopCell.decorators = [
|
|
2677
2702
|
{ type: Component, args: [{
|
|
2678
2703
|
selector: 'sd-desktop-cell',
|
|
2679
|
-
template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"item.editorHandlerRow
|
|
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 useDisabledView\">\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, editorStatus: 'edited' }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-editor [column]=\"column\" [item]=\"item\"></sd-desktop-cell-editor>\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\"></sd-desktop-cell-view>\r\n </ng-template>\r\n <ng-template #useDisabledView>\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, editorStatus: 'disabled' }\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\"></sd-desktop-cell-view>\r\n </ng-template>\r\n</ng-container>",
|
|
2680
2705
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2681
2706
|
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}"]
|
|
2682
2707
|
},] }
|
|
@@ -2686,7 +2711,9 @@ SdDesktopCell.propDecorators = {
|
|
|
2686
2711
|
key: [{ type: Input }],
|
|
2687
2712
|
column: [{ type: Input }],
|
|
2688
2713
|
item: [{ type: Input }],
|
|
2689
|
-
gridOption: [{ type: Input }]
|
|
2714
|
+
gridOption: [{ type: Input }],
|
|
2715
|
+
cellDef: [{ type: Input }],
|
|
2716
|
+
idx: [{ type: Input }]
|
|
2690
2717
|
};
|
|
2691
2718
|
|
|
2692
2719
|
class SdDesktopCellEditor {
|
|
@@ -2703,7 +2730,7 @@ class SdDesktopCellEditor {
|
|
|
2703
2730
|
SdDesktopCellEditor.decorators = [
|
|
2704
2731
|
{ type: Component, args: [{
|
|
2705
2732
|
selector: 'sd-desktop-cell-editor',
|
|
2706
|
-
template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\">\r\n</sd-input>\r\n<sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n (sdChange)=\"onChange()\">\r\n</sd-input>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: true, display: column.option?.displayOnTrue || 'True' },\r\n { value: false, display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\">\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)]=\"item[column.field]\" (sdChange)=\"onChange()\" [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)]=\"item[column.field]\" (sdChange)=\"onChange()\">\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)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange()\">\r\n</sd-date-time>",
|
|
2733
|
+
template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: true, display: column.option?.displayOnTrue || 'True' },\r\n { value: false, display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\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)]=\"item[column.field]\" (sdChange)=\"onChange()\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" disableErrorMessage>\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)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\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)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-date-time>",
|
|
2707
2734
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2708
2735
|
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}"]
|
|
2709
2736
|
},] }
|
|
@@ -2732,15 +2759,15 @@ class SdEditorHandlerRowPipe {
|
|
|
2732
2759
|
}
|
|
2733
2760
|
if (editor.type === 'inline') {
|
|
2734
2761
|
const removable = editor.removable;
|
|
2735
|
-
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { editable: false, removable: status
|
|
2762
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: true, editable: false, removable: status !== 'create' && (typeof (removable) === 'function' ? removable(item) : removable), savable: false, cancelable: status === 'create' });
|
|
2736
2763
|
}
|
|
2737
2764
|
else if (editor.type === 'focus') {
|
|
2738
2765
|
const editable = editor.editable;
|
|
2739
|
-
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: !!status, cancelable: !!status });
|
|
2766
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !!status, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: !!status, cancelable: !!status });
|
|
2740
2767
|
}
|
|
2741
2768
|
else if (editor.type === 'popup') {
|
|
2742
2769
|
const editable = editor.editable;
|
|
2743
|
-
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: false, cancelable: false });
|
|
2770
|
+
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: false, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: false, cancelable: false });
|
|
2744
2771
|
}
|
|
2745
2772
|
return item.editorHandlerRow;
|
|
2746
2773
|
}
|
|
@@ -2754,26 +2781,25 @@ SdEditorHandlerRowPipe.decorators = [
|
|
|
2754
2781
|
class SdEditorHandlerColumnPipe {
|
|
2755
2782
|
transform(value, item, column, gridOption) {
|
|
2756
2783
|
if (column.type === 'children' || column.type === 'children-col') {
|
|
2757
|
-
return
|
|
2784
|
+
return;
|
|
2758
2785
|
}
|
|
2786
|
+
const { columns } = gridOption;
|
|
2759
2787
|
const visible = (col) => {
|
|
2760
2788
|
if (col.type === 'children' || col.type === 'children-col') {
|
|
2761
2789
|
return false;
|
|
2762
2790
|
}
|
|
2763
|
-
let isDisabled = false;
|
|
2764
2791
|
// Kiểm tra xem có bị disabled hay không?
|
|
2765
2792
|
if (col.editor) {
|
|
2766
|
-
isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
return false;
|
|
2793
|
+
const isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
|
|
2794
|
+
if (isDisabled) {
|
|
2795
|
+
return false;
|
|
2796
|
+
}
|
|
2771
2797
|
}
|
|
2772
2798
|
return true;
|
|
2773
2799
|
};
|
|
2774
2800
|
item.editorHandlerColumn = item.editorHandlerColumn || {};
|
|
2775
2801
|
item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible: visible(column) });
|
|
2776
|
-
for (const col of
|
|
2802
|
+
for (const col of columns.filter(e => { var _a, _b; return (_b = (_a = column.editor) === null || _a === void 0 ? void 0 : _a.relatedColumns) === null || _b === void 0 ? void 0 : _b.includes(e.field); })) {
|
|
2777
2803
|
item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: visible(col) });
|
|
2778
2804
|
}
|
|
2779
2805
|
return true;
|