@den4ik92/ng2-smart-table 2.0.4 → 2.0.6
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/esm2020/lib/components/cell/cell-edit-mode/edit-cell-default.mjs +1 -1
- package/esm2020/lib/components/cell/cell-view-mode/view-cell.mjs +1 -1
- package/esm2020/lib/components/tbody/tbody.component.mjs +3 -3
- package/esm2020/lib/lib/grid.mjs +45 -41
- package/esm2020/lib/lib/helpers.mjs +1 -1
- package/esm2020/lib/lib/interfaces/smart-table.models.mjs +1 -1
- package/fesm2015/den4ik92-ng2-smart-table.mjs +43 -39
- package/fesm2015/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/fesm2020/den4ik92-ng2-smart-table.mjs +43 -39
- package/fesm2020/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/lib/components/cell/cell-edit-mode/edit-cell-default.d.ts +1 -1
- package/lib/components/cell/cell-view-mode/view-cell.d.ts +3 -3
- package/lib/lib/grid.d.ts +8 -8
- package/lib/lib/helpers.d.ts +2 -2
- package/lib/lib/interfaces/smart-table.models.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1391,10 +1391,10 @@ class Ng2SmartTableTbodyComponent {
|
|
|
1391
1391
|
}
|
|
1392
1392
|
}
|
|
1393
1393
|
Ng2SmartTableTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1394
|
-
Ng2SmartTableTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "<tr
|
|
1394
|
+
Ng2SmartTableTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "<tr\n *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\"\n (click)=\"userClickedRow.emit(row)\"\n class=\"ng2-smart-row\"\n [className]=\"rowClassFunction(row)\"\n [ngClass]=\"{ selected: row.isSelected }\"\n>\n <td\n *ngIf=\"isMultiSelectVisible\"\n class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n (click)=\"multipleSelectRow.emit(row); $event.stopPropagation()\"\n >\n <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\" />\n </td>\n <td\n *ngIf=\"!row.isInEditing && showActionColumnLeft\"\n class=\"ng2-smart-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng2-st-tbody-custom\n [grid]=\"grid\"\n (custom)=\"custom.emit($event)\"\n [row]=\"row\"\n [source]=\"source\"\n ></ng2-st-tbody-custom>\n\n <ng2-st-tbody-edit-delete\n [grid]=\"grid\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n (edit)=\"edit.emit(row)\"\n (delete)=\"delete.emit(row)\"\n (editRowSelect)=\"editRowSelect.emit($event)\"\n [row]=\"row\"\n [source]=\"source\"\n >\n </ng2-st-tbody-edit-delete>\n </td>\n <td *ngIf=\"row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\">\n <ng2-st-tbody-create-cancel\n [grid]=\"grid\"\n [row]=\"row\"\n [editConfirm]=\"editConfirm\"\n [editCancel]=\"editCancel\"\n ></ng2-st-tbody-create-cancel>\n </td>\n <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n <ng2-smart-table-cell\n [cell]=\"cell\"\n [grid]=\"grid\"\n [row]=\"row\"\n [isNew]=\"false\"\n [mode]=\"mode\"\n [editConfirm]=\"editConfirm\"\n [inputClass]=\"editInputClass\"\n [isInEditing]=\"row.isInEditing\"\n >\n </ng2-smart-table-cell>\n </td>\n\n <td\n *ngIf=\"row.isInEditing && showActionColumnRight\"\n class=\"ng2-smart-actions\"\n >\n <ng2-st-tbody-create-cancel\n [grid]=\"grid\"\n [row]=\"row\"\n [editConfirm]=\"editConfirm\"\n ></ng2-st-tbody-create-cancel>\n </td>\n\n <td\n *ngIf=\"!row.isInEditing && showActionColumnRight\"\n class=\"ng2-smart-actions\"\n >\n <ng2-st-tbody-custom\n [grid]=\"grid\"\n (custom)=\"custom.emit($event)\"\n [row]=\"row\"\n [source]=\"source\"\n ></ng2-st-tbody-custom>\n\n <ng2-st-tbody-edit-delete\n [grid]=\"grid\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n [row]=\"row\"\n [source]=\"source\"\n (edit)=\"edit.emit(row)\"\n (delete)=\"delete.emit(row)\"\n (editRowSelect)=\"editRowSelect.emit($event)\"\n >\n </ng2-st-tbody-edit-delete>\n </td>\n</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n <td [attr.colspan]=\"tableColumnsCount\">\n {{ noDataMessage }}\n </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] });
|
|
1395
1395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
|
|
1396
1396
|
type: Component,
|
|
1397
|
-
args: [{ selector: '[ng2-st-tbody]', template: "<tr
|
|
1397
|
+
args: [{ selector: '[ng2-st-tbody]', template: "<tr\n *ngFor=\"let row of grid.getRows(); trackBy: trackByIdOrIndex\"\n (click)=\"userClickedRow.emit(row)\"\n class=\"ng2-smart-row\"\n [className]=\"rowClassFunction(row)\"\n [ngClass]=\"{ selected: row.isSelected }\"\n>\n <td\n *ngIf=\"isMultiSelectVisible\"\n class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n (click)=\"multipleSelectRow.emit(row); $event.stopPropagation()\"\n >\n <input type=\"checkbox\" class=\"form-control\" [ngModel]=\"row.isSelected\" />\n </td>\n <td\n *ngIf=\"!row.isInEditing && showActionColumnLeft\"\n class=\"ng2-smart-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng2-st-tbody-custom\n [grid]=\"grid\"\n (custom)=\"custom.emit($event)\"\n [row]=\"row\"\n [source]=\"source\"\n ></ng2-st-tbody-custom>\n\n <ng2-st-tbody-edit-delete\n [grid]=\"grid\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n (edit)=\"edit.emit(row)\"\n (delete)=\"delete.emit(row)\"\n (editRowSelect)=\"editRowSelect.emit($event)\"\n [row]=\"row\"\n [source]=\"source\"\n >\n </ng2-st-tbody-edit-delete>\n </td>\n <td *ngIf=\"row.isInEditing && showActionColumnLeft\" class=\"ng2-smart-actions\">\n <ng2-st-tbody-create-cancel\n [grid]=\"grid\"\n [row]=\"row\"\n [editConfirm]=\"editConfirm\"\n [editCancel]=\"editCancel\"\n ></ng2-st-tbody-create-cancel>\n </td>\n <td *ngFor=\"let cell of getVisibleCells(row.cells)\">\n <ng2-smart-table-cell\n [cell]=\"cell\"\n [grid]=\"grid\"\n [row]=\"row\"\n [isNew]=\"false\"\n [mode]=\"mode\"\n [editConfirm]=\"editConfirm\"\n [inputClass]=\"editInputClass\"\n [isInEditing]=\"row.isInEditing\"\n >\n </ng2-smart-table-cell>\n </td>\n\n <td\n *ngIf=\"row.isInEditing && showActionColumnRight\"\n class=\"ng2-smart-actions\"\n >\n <ng2-st-tbody-create-cancel\n [grid]=\"grid\"\n [row]=\"row\"\n [editConfirm]=\"editConfirm\"\n ></ng2-st-tbody-create-cancel>\n </td>\n\n <td\n *ngIf=\"!row.isInEditing && showActionColumnRight\"\n class=\"ng2-smart-actions\"\n >\n <ng2-st-tbody-custom\n [grid]=\"grid\"\n (custom)=\"custom.emit($event)\"\n [row]=\"row\"\n [source]=\"source\"\n ></ng2-st-tbody-custom>\n\n <ng2-st-tbody-edit-delete\n [grid]=\"grid\"\n [deleteConfirm]=\"deleteConfirm\"\n [editConfirm]=\"editConfirm\"\n [row]=\"row\"\n [source]=\"source\"\n (edit)=\"edit.emit(row)\"\n (delete)=\"delete.emit(row)\"\n (editRowSelect)=\"editRowSelect.emit($event)\"\n >\n </ng2-st-tbody-edit-delete>\n </td>\n</tr>\n\n<tr *ngIf=\"grid.getRows().length == 0\">\n <td [attr.colspan]=\"tableColumnsCount\">\n {{ noDataMessage }}\n </td>\n</tr>\n", styles: [":host .ng2-smart-row.selected{background:rgba(0,0,0,.05)}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
|
|
1398
1398
|
}], propDecorators: { grid: [{
|
|
1399
1399
|
type: Input
|
|
1400
1400
|
}], source: [{
|
|
@@ -2373,21 +2373,24 @@ class Grid {
|
|
|
2373
2373
|
return this.isCurrentActionsPosition(position) && this.isActionsVisible();
|
|
2374
2374
|
}
|
|
2375
2375
|
isCurrentActionsPosition(position) {
|
|
2376
|
-
return position == this.getSetting(
|
|
2376
|
+
return position == this.getSetting("actions.position");
|
|
2377
2377
|
}
|
|
2378
2378
|
isActionsVisible() {
|
|
2379
2379
|
var _a;
|
|
2380
|
-
return this.getSetting(
|
|
2380
|
+
return (this.getSetting("actions.add", false) ||
|
|
2381
|
+
this.getSetting("actions.edit", false) ||
|
|
2382
|
+
this.getSetting("actions.delete", false) ||
|
|
2383
|
+
!!((_a = this.getSetting("actions.custom", [])) === null || _a === void 0 ? void 0 : _a.length));
|
|
2381
2384
|
}
|
|
2382
2385
|
isMultiSelectVisible() {
|
|
2383
|
-
return this.getSetting(
|
|
2386
|
+
return this.getSetting("selectMode") === "multi";
|
|
2384
2387
|
}
|
|
2385
2388
|
getNewRow() {
|
|
2386
2389
|
return this.dataSet.newRow;
|
|
2387
2390
|
}
|
|
2388
2391
|
setSettings(settings) {
|
|
2389
2392
|
this.settings = settings;
|
|
2390
|
-
this.dataSet = new DataSet([], this.getSetting(
|
|
2393
|
+
this.dataSet = new DataSet([], this.getSetting("columns"));
|
|
2391
2394
|
if (this.source) {
|
|
2392
2395
|
this.source.refresh();
|
|
2393
2396
|
}
|
|
@@ -2398,8 +2401,12 @@ class Grid {
|
|
|
2398
2401
|
setSource(source) {
|
|
2399
2402
|
this.source = this.prepareSource(source);
|
|
2400
2403
|
this.detach();
|
|
2401
|
-
this.sourceOnChangedSubscription = this.source
|
|
2402
|
-
|
|
2404
|
+
this.sourceOnChangedSubscription = this.source
|
|
2405
|
+
.onChanged()
|
|
2406
|
+
.subscribe((changes) => this.processDataChange(changes));
|
|
2407
|
+
this.sourceOnUpdatedSubscription = this.source
|
|
2408
|
+
.onUpdated()
|
|
2409
|
+
.subscribe((data) => {
|
|
2403
2410
|
const changedRow = this.dataSet.findRowByData(data);
|
|
2404
2411
|
if (changedRow) {
|
|
2405
2412
|
changedRow.setData(data);
|
|
@@ -2432,21 +2439,18 @@ class Grid {
|
|
|
2432
2439
|
}
|
|
2433
2440
|
create(row, confirmEmitter) {
|
|
2434
2441
|
const deferred = new Deferred();
|
|
2435
|
-
deferred.promise
|
|
2442
|
+
deferred.promise
|
|
2443
|
+
.then((newData) => {
|
|
2436
2444
|
newData = newData ? newData : row.getNewData();
|
|
2437
|
-
|
|
2445
|
+
this.source.prepend(newData).then(() => {
|
|
2438
2446
|
this.createFormShown = false;
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
this.dataSet.createNewRow();
|
|
2444
|
-
});
|
|
2445
|
-
}
|
|
2446
|
-
}).catch((err) => {
|
|
2447
|
+
this.dataSet.createNewRow();
|
|
2448
|
+
});
|
|
2449
|
+
})
|
|
2450
|
+
.catch((err) => {
|
|
2447
2451
|
// doing nothing
|
|
2448
2452
|
});
|
|
2449
|
-
if (this.getSetting(
|
|
2453
|
+
if (this.getSetting("add.confirmCreate")) {
|
|
2450
2454
|
confirmEmitter.emit({
|
|
2451
2455
|
newData: row.getNewData(),
|
|
2452
2456
|
source: this.source,
|
|
@@ -2459,20 +2463,17 @@ class Grid {
|
|
|
2459
2463
|
}
|
|
2460
2464
|
save(row, confirmEmitter) {
|
|
2461
2465
|
const deferred = new Deferred();
|
|
2462
|
-
deferred.promise
|
|
2466
|
+
deferred.promise
|
|
2467
|
+
.then((newData) => {
|
|
2463
2468
|
newData = newData ? newData : row.getNewData();
|
|
2464
|
-
|
|
2469
|
+
this.source.update(row.getData(), newData).then(() => {
|
|
2465
2470
|
row.isInEditing = false;
|
|
2466
|
-
}
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
row.isInEditing = false;
|
|
2470
|
-
});
|
|
2471
|
-
}
|
|
2472
|
-
}).catch((err) => {
|
|
2471
|
+
});
|
|
2472
|
+
})
|
|
2473
|
+
.catch((err) => {
|
|
2473
2474
|
// doing nothing
|
|
2474
2475
|
});
|
|
2475
|
-
if (this.getSetting(
|
|
2476
|
+
if (this.getSetting("edit.confirmSave")) {
|
|
2476
2477
|
confirmEmitter.emit({
|
|
2477
2478
|
data: row.getData(),
|
|
2478
2479
|
newData: row.getNewData(),
|
|
@@ -2486,12 +2487,14 @@ class Grid {
|
|
|
2486
2487
|
}
|
|
2487
2488
|
delete(row, confirmEmitter) {
|
|
2488
2489
|
const deferred = new Deferred();
|
|
2489
|
-
deferred.promise
|
|
2490
|
+
deferred.promise
|
|
2491
|
+
.then(() => {
|
|
2490
2492
|
this.source.remove(row.getData());
|
|
2491
|
-
})
|
|
2493
|
+
})
|
|
2494
|
+
.catch((err) => {
|
|
2492
2495
|
// doing nothing
|
|
2493
2496
|
});
|
|
2494
|
-
if (this.getSetting(
|
|
2497
|
+
if (this.getSetting("delete.confirmDelete")) {
|
|
2495
2498
|
confirmEmitter.emit({
|
|
2496
2499
|
data: row.getData(),
|
|
2497
2500
|
source: this.source,
|
|
@@ -2507,17 +2510,18 @@ class Grid {
|
|
|
2507
2510
|
}
|
|
2508
2511
|
processDataChange(changes) {
|
|
2509
2512
|
if (this.shouldProcessChange(changes)) {
|
|
2510
|
-
if (changes[
|
|
2513
|
+
if (changes["action"] === "load") {
|
|
2511
2514
|
this.dataSet.deselectAll();
|
|
2512
2515
|
}
|
|
2513
|
-
this.dataSet.setData(changes[
|
|
2516
|
+
this.dataSet.setData(changes["elements"]);
|
|
2514
2517
|
}
|
|
2515
2518
|
}
|
|
2516
2519
|
shouldProcessChange(changes) {
|
|
2517
|
-
if ([
|
|
2520
|
+
if (["filter", "sort", "page", "remove", "refresh", "load", "paging"].indexOf(changes["action"]) !== -1) {
|
|
2518
2521
|
return true;
|
|
2519
2522
|
}
|
|
2520
|
-
else if ([
|
|
2523
|
+
else if (["prepend", "append"].indexOf(changes["action"]) !== -1 &&
|
|
2524
|
+
!this.getSetting("pager.display")) {
|
|
2521
2525
|
return true;
|
|
2522
2526
|
}
|
|
2523
2527
|
return false;
|
|
@@ -2527,8 +2531,8 @@ class Grid {
|
|
|
2527
2531
|
if (initialSort) {
|
|
2528
2532
|
source.setSort([initialSort], false);
|
|
2529
2533
|
}
|
|
2530
|
-
if (this.getSetting(
|
|
2531
|
-
source.setPaging(1, this.getSetting(
|
|
2534
|
+
if (this.getSetting("pager.display") === true) {
|
|
2535
|
+
source.setPaging(1, this.getSetting("pager.perPage"), false);
|
|
2532
2536
|
}
|
|
2533
2537
|
source.refresh();
|
|
2534
2538
|
return source;
|
|
@@ -2540,7 +2544,7 @@ class Grid {
|
|
|
2540
2544
|
}
|
|
2541
2545
|
return {
|
|
2542
2546
|
field: defaultSortColumn.id,
|
|
2543
|
-
direction: defaultSortColumn.defaultSortDirection ||
|
|
2547
|
+
direction: defaultSortColumn.defaultSortDirection || "asc",
|
|
2544
2548
|
compare: defaultSortColumn.getCompareFunction(),
|
|
2545
2549
|
};
|
|
2546
2550
|
}
|