@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
|
@@ -365,20 +365,23 @@ class Grid {
|
|
|
365
365
|
return this.isCurrentActionsPosition(position) && this.isActionsVisible();
|
|
366
366
|
}
|
|
367
367
|
isCurrentActionsPosition(position) {
|
|
368
|
-
return position == this.getSetting(
|
|
368
|
+
return position == this.getSetting("actions.position");
|
|
369
369
|
}
|
|
370
370
|
isActionsVisible() {
|
|
371
|
-
return this.getSetting(
|
|
371
|
+
return (this.getSetting("actions.add", false) ||
|
|
372
|
+
this.getSetting("actions.edit", false) ||
|
|
373
|
+
this.getSetting("actions.delete", false) ||
|
|
374
|
+
!!this.getSetting("actions.custom", [])?.length);
|
|
372
375
|
}
|
|
373
376
|
isMultiSelectVisible() {
|
|
374
|
-
return this.getSetting(
|
|
377
|
+
return this.getSetting("selectMode") === "multi";
|
|
375
378
|
}
|
|
376
379
|
getNewRow() {
|
|
377
380
|
return this.dataSet.newRow;
|
|
378
381
|
}
|
|
379
382
|
setSettings(settings) {
|
|
380
383
|
this.settings = settings;
|
|
381
|
-
this.dataSet = new DataSet([], this.getSetting(
|
|
384
|
+
this.dataSet = new DataSet([], this.getSetting("columns"));
|
|
382
385
|
if (this.source) {
|
|
383
386
|
this.source.refresh();
|
|
384
387
|
}
|
|
@@ -389,8 +392,12 @@ class Grid {
|
|
|
389
392
|
setSource(source) {
|
|
390
393
|
this.source = this.prepareSource(source);
|
|
391
394
|
this.detach();
|
|
392
|
-
this.sourceOnChangedSubscription = this.source
|
|
393
|
-
|
|
395
|
+
this.sourceOnChangedSubscription = this.source
|
|
396
|
+
.onChanged()
|
|
397
|
+
.subscribe((changes) => this.processDataChange(changes));
|
|
398
|
+
this.sourceOnUpdatedSubscription = this.source
|
|
399
|
+
.onUpdated()
|
|
400
|
+
.subscribe((data) => {
|
|
394
401
|
const changedRow = this.dataSet.findRowByData(data);
|
|
395
402
|
if (changedRow) {
|
|
396
403
|
changedRow.setData(data);
|
|
@@ -423,21 +430,18 @@ class Grid {
|
|
|
423
430
|
}
|
|
424
431
|
create(row, confirmEmitter) {
|
|
425
432
|
const deferred = new Deferred();
|
|
426
|
-
deferred.promise
|
|
433
|
+
deferred.promise
|
|
434
|
+
.then((newData) => {
|
|
427
435
|
newData = newData ? newData : row.getNewData();
|
|
428
|
-
|
|
436
|
+
this.source.prepend(newData).then(() => {
|
|
429
437
|
this.createFormShown = false;
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
this.dataSet.createNewRow();
|
|
435
|
-
});
|
|
436
|
-
}
|
|
437
|
-
}).catch((err) => {
|
|
438
|
+
this.dataSet.createNewRow();
|
|
439
|
+
});
|
|
440
|
+
})
|
|
441
|
+
.catch((err) => {
|
|
438
442
|
// doing nothing
|
|
439
443
|
});
|
|
440
|
-
if (this.getSetting(
|
|
444
|
+
if (this.getSetting("add.confirmCreate")) {
|
|
441
445
|
confirmEmitter.emit({
|
|
442
446
|
newData: row.getNewData(),
|
|
443
447
|
source: this.source,
|
|
@@ -450,20 +454,17 @@ class Grid {
|
|
|
450
454
|
}
|
|
451
455
|
save(row, confirmEmitter) {
|
|
452
456
|
const deferred = new Deferred();
|
|
453
|
-
deferred.promise
|
|
457
|
+
deferred.promise
|
|
458
|
+
.then((newData) => {
|
|
454
459
|
newData = newData ? newData : row.getNewData();
|
|
455
|
-
|
|
460
|
+
this.source.update(row.getData(), newData).then(() => {
|
|
456
461
|
row.isInEditing = false;
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
row.isInEditing = false;
|
|
461
|
-
});
|
|
462
|
-
}
|
|
463
|
-
}).catch((err) => {
|
|
462
|
+
});
|
|
463
|
+
})
|
|
464
|
+
.catch((err) => {
|
|
464
465
|
// doing nothing
|
|
465
466
|
});
|
|
466
|
-
if (this.getSetting(
|
|
467
|
+
if (this.getSetting("edit.confirmSave")) {
|
|
467
468
|
confirmEmitter.emit({
|
|
468
469
|
data: row.getData(),
|
|
469
470
|
newData: row.getNewData(),
|
|
@@ -477,12 +478,14 @@ class Grid {
|
|
|
477
478
|
}
|
|
478
479
|
delete(row, confirmEmitter) {
|
|
479
480
|
const deferred = new Deferred();
|
|
480
|
-
deferred.promise
|
|
481
|
+
deferred.promise
|
|
482
|
+
.then(() => {
|
|
481
483
|
this.source.remove(row.getData());
|
|
482
|
-
})
|
|
484
|
+
})
|
|
485
|
+
.catch((err) => {
|
|
483
486
|
// doing nothing
|
|
484
487
|
});
|
|
485
|
-
if (this.getSetting(
|
|
488
|
+
if (this.getSetting("delete.confirmDelete")) {
|
|
486
489
|
confirmEmitter.emit({
|
|
487
490
|
data: row.getData(),
|
|
488
491
|
source: this.source,
|
|
@@ -498,17 +501,18 @@ class Grid {
|
|
|
498
501
|
}
|
|
499
502
|
processDataChange(changes) {
|
|
500
503
|
if (this.shouldProcessChange(changes)) {
|
|
501
|
-
if (changes[
|
|
504
|
+
if (changes["action"] === "load") {
|
|
502
505
|
this.dataSet.deselectAll();
|
|
503
506
|
}
|
|
504
|
-
this.dataSet.setData(changes[
|
|
507
|
+
this.dataSet.setData(changes["elements"]);
|
|
505
508
|
}
|
|
506
509
|
}
|
|
507
510
|
shouldProcessChange(changes) {
|
|
508
|
-
if ([
|
|
511
|
+
if (["filter", "sort", "page", "remove", "refresh", "load", "paging"].indexOf(changes["action"]) !== -1) {
|
|
509
512
|
return true;
|
|
510
513
|
}
|
|
511
|
-
else if ([
|
|
514
|
+
else if (["prepend", "append"].indexOf(changes["action"]) !== -1 &&
|
|
515
|
+
!this.getSetting("pager.display")) {
|
|
512
516
|
return true;
|
|
513
517
|
}
|
|
514
518
|
return false;
|
|
@@ -518,8 +522,8 @@ class Grid {
|
|
|
518
522
|
if (initialSort) {
|
|
519
523
|
source.setSort([initialSort], false);
|
|
520
524
|
}
|
|
521
|
-
if (this.getSetting(
|
|
522
|
-
source.setPaging(1, this.getSetting(
|
|
525
|
+
if (this.getSetting("pager.display") === true) {
|
|
526
|
+
source.setPaging(1, this.getSetting("pager.perPage"), false);
|
|
523
527
|
}
|
|
524
528
|
source.refresh();
|
|
525
529
|
return source;
|
|
@@ -531,7 +535,7 @@ class Grid {
|
|
|
531
535
|
}
|
|
532
536
|
return {
|
|
533
537
|
field: defaultSortColumn.id,
|
|
534
|
-
direction: defaultSortColumn.defaultSortDirection ||
|
|
538
|
+
direction: defaultSortColumn.defaultSortDirection || "asc",
|
|
535
539
|
compare: defaultSortColumn.getCompareFunction(),
|
|
536
540
|
};
|
|
537
541
|
}
|
|
@@ -2334,10 +2338,10 @@ class Ng2SmartTableTbodyComponent {
|
|
|
2334
2338
|
}
|
|
2335
2339
|
}
|
|
2336
2340
|
Ng2SmartTableTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2337
|
-
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
|
|
2341
|
+
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"] }] });
|
|
2338
2342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
|
|
2339
2343
|
type: Component,
|
|
2340
|
-
args: [{ selector: '[ng2-st-tbody]', template: "<tr
|
|
2344
|
+
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"] }]
|
|
2341
2345
|
}], propDecorators: { grid: [{
|
|
2342
2346
|
type: Input
|
|
2343
2347
|
}], source: [{
|