diff --git a/packages/grid/src/datasource/dataContainer.ts b/packages/grid/src/datasource/dataContainer.ts index 5e054a5a..1a61d1ab 100644 --- a/packages/grid/src/datasource/dataContainer.ts +++ b/packages/grid/src/datasource/dataContainer.ts @@ -14,7 +14,6 @@ export const getNextKey = function () { */ export class DataContainer { private __collection: Entity[] = []; - private __markedForDeletion: Entity[] = []; private __keyAttribute = ''; private EntityHandler = EntityHandler; /** @@ -66,16 +65,55 @@ export class DataContainer { * @returns */ public getMarkedForDeletion() { - return this.__markedForDeletion; + return this.__collection.filter((e) => e.__controller.__isDeleted); } /** - * resets data, all edits are resets and marked for deletetion if returned + * for selected rows only + * resets data, all edits are resets/tags are reset + * new entities are removed + */ + public resetDataSelection(data: Entity[]) { + const newEntities: Entity[] = []; + + if (data) { + if (Array.isArray(data)) { + data.forEach((d) => { + const i = this.__collection.indexOf(d); + if (i !== -1 && this.__collection[i]) { + const row = this.__collection[i]; + if (row.__controller.__isDeleted) { + row.__controller.__isDeleted = false; + } + if (row.__controller.__isNew) { + newEntities.push(row); + } + if (row.__controller.__edited) { + for (const k in row.__controller.__originalValues) { + row[k] = row.__controller.__originalValues[k]; + } + row.__controller.__editedProps = {}; + row.__controller.__edited = false; + } + } + }); + } + } + + this.removeData(newEntities); + } + + /** + * resets data, all edits are resets/tags are reset + * new entities are removed */ public resetData() { const newEntities: Entity[] = []; - this.setData(this.__markedForDeletion, true); + this.__collection.forEach((row) => { + if (row.__controller.__isDeleted) { + row.__controller.__isDeleted = false; + } if (row.__controller.__isNew) { newEntities.push(row); } @@ -88,8 +126,6 @@ export class DataContainer { } }); this.removeData(newEntities); - - this.__markedForDeletion = []; } /** @@ -98,9 +134,13 @@ export class DataContainer { */ public getChanges() { const newEntities: Entity[] = []; - const deletedEntities: Entity[] = this.__markedForDeletion.slice(); + const deletedEntities: Entity[] = []; const modifiedEntities: Entity[] = []; this.__collection.forEach((row) => { + if (row.__controller.__isDeleted) { + deletedEntities.push(row); + return; + } if (row.__controller.__isNew) { newEntities.push(row); return; @@ -129,25 +169,36 @@ export class DataContainer { */ public markForDeletion(data: Entity | Entity[], all = false) { if (all) { - const removed = this.__collection.slice(); - this.__collection = []; - this.__markedForDeletion = removed; + this.__collection.forEach((e) => { + if (e.__controller.__isNew) { + const i = this.__collection.indexOf(e); + this.__collection.splice(i, 1)[0]; + } else { + e.__controller.__isDeleted = true; + } + }); } if (data) { if (Array.isArray(data)) { - const removed: Entity[] = []; data.forEach((d) => { const i = this.__collection.indexOf(d); if (i !== -1) { - removed.push(this.__collection.splice(i, 1)[0]); + if (this.__collection[i]?.__controller.__isNew) { + this.__collection.splice(i, 1)[0]; + } else { + this.__collection[i].__controller.__isDeleted = true; + } } }); - this.__markedForDeletion = this.__markedForDeletion.concat(removed); } else { const i = this.__collection.indexOf(data); if (i !== -1) { - this.__markedForDeletion.push(this.__collection.splice(i, 1)[0]); + if (this.__collection[i]?.__controller.__isNew) { + this.__collection.splice(i, 1)[0]; + } else { + this.__collection[i].__controller.__isDeleted = true; + } } } } @@ -157,7 +208,18 @@ export class DataContainer { * */ public clearMarkedForDeletion() { - this.__markedForDeletion = []; + const tempArr: Entity[] = []; + this.__collection.forEach((e) => { + if (e.__controller.__isDeleted) { + tempArr.push(e); + } + }); + tempArr.forEach((e) => { + const i = this.__collection.indexOf(e); + if (i !== -1) { + this.__collection.splice(i, 1)[0]; + } + }); } /** @@ -203,7 +265,6 @@ export class DataContainer { */ public setData(data: any[], add = false, tagAsNew = false): Entity[] | void { if (!add) { - this.__markedForDeletion = []; this.__collection = []; } diff --git a/packages/grid/src/datasource/dataSource.ts b/packages/grid/src/datasource/dataSource.ts index 4a3a44cc..c77e9e22 100644 --- a/packages/grid/src/datasource/dataSource.ts +++ b/packages/grid/src/datasource/dataSource.ts @@ -153,6 +153,17 @@ export class Datasource { } } + /** + * resets all edited data and brings back marked for deletion + */ + public resetDataSelectionOnly() { + this.__dataContainer.resetDataSelection(this.getSelectedRows()); + const eventTriggered = this.__internalUpdate(true); + if (!eventTriggered) { + this.__callSubscribers('collection-filtered', { info: 'resetData' }); + } + } + /** * returns copy of all modified, new or marked for deletion * changes to these do not edit anything in grid @@ -772,7 +783,10 @@ export class Datasource { public reloadDatasource() { this.__collectionFiltered = this.getAllData(); - this.__internalUpdate(true); + const eventTriggered = this.__internalUpdate(true); + if (!eventTriggered) { + this.__callSubscribers('collection-filtered', { info: 'filter' }); + } } public getFilterString(ctx?: Grid) { diff --git a/packages/grid/src/datasource/entityHandler.ts b/packages/grid/src/datasource/entityHandler.ts index 04244e73..67350fe7 100644 --- a/packages/grid/src/datasource/entityHandler.ts +++ b/packages/grid/src/datasource/entityHandler.ts @@ -12,7 +12,8 @@ export class EntityHandler { __currentValues?: Record = {}; __newprops?: Record = {}; __isNew? = false; - __edited? = false; + __isDeleted? = false; + __edited? = false; // change to isModified? __controller?: EntityHandler; __KEY?: string | number; __KEYSTRING?: string | number; @@ -36,6 +37,7 @@ export class EntityHandler { if ( [ '__KEY', + '__rowState', '__group', '__groupID', '__groupName', @@ -49,9 +51,22 @@ export class EntityHandler { if (this.__KEYSTRING) { return target[this.__KEYSTRING]; } + } else if (prop === '__rowState') { + if (this.__isDeleted) { + return 'D'; + } + if (this.__isNew) { + return 'N'; + } + + if (this.__edited) { + return 'M'; + } } + return this[prop]; } + return target[prop]; } @@ -63,6 +78,7 @@ export class EntityHandler { if ( [ '__KEY', + '__rowState', '__group', '__groupID', '__groupName', @@ -78,6 +94,8 @@ export class EntityHandler { } else { this[prop] = value; } + } else if (prop === '__rowState') { + // nothing } else { this[prop] = value; } diff --git a/packages/grid/src/grid.css b/packages/grid/src/grid.css index a481b11f..2e6fece5 100644 --- a/packages/grid/src/grid.css +++ b/packages/grid/src/grid.css @@ -760,6 +760,7 @@ input { filter: opacity(0.5); } + .simple-html-grid-col-resize { position: absolute; bottom: 0; diff --git a/packages/grid/src/grid/gridFunctions/autoResizeColumns.ts b/packages/grid/src/grid/gridFunctions/autoResizeColumns.ts index 5193ca80..5cc5a9e3 100644 --- a/packages/grid/src/grid/gridFunctions/autoResizeColumns.ts +++ b/packages/grid/src/grid/gridFunctions/autoResizeColumns.ts @@ -77,7 +77,7 @@ export function autoResizeColumns(ctx: Grid, onlyResizeAttribute?: string) { if (attributeKeys.indexOf(rowAttribute) !== -1) { const xx = widths[attributeKeys.indexOf(rowAttribute)]; if (xx > x) { - x = getTextWidth(ctx, text[attributeKeys.indexOf(rowAttribute)]) + 5; + x = getTextWidth(ctx, text[attributeKeys.indexOf(rowAttribute)]) + 15; } } } diff --git a/packages/grid/src/grid/gridFunctions/rebuildHeaderColumns.ts b/packages/grid/src/grid/gridFunctions/rebuildHeaderColumns.ts index 5c77c6a4..f5194414 100644 --- a/packages/grid/src/grid/gridFunctions/rebuildHeaderColumns.ts +++ b/packages/grid/src/grid/gridFunctions/rebuildHeaderColumns.ts @@ -204,8 +204,8 @@ export function rebuildHeaderColumns(ctx: Grid) { col.width = originalWidth + (event.clientX - clientX); } - if (col.width < 50) { - col.width = 50; + if (col.width < 25) { + col.width = 25; } ctx.gridInterface.__parseConfig(); updateMainElementSizes(ctx); diff --git a/packages/grid/src/grid/gridFunctions/renderRowSelector.ts b/packages/grid/src/grid/gridFunctions/renderRowSelector.ts index 39c5e657..612dac71 100644 --- a/packages/grid/src/grid/gridFunctions/renderRowSelector.ts +++ b/packages/grid/src/grid/gridFunctions/renderRowSelector.ts @@ -47,8 +47,29 @@ export function renderRowSelector( } }} > - ${row + 1} +
+ ${row + 1} +
`, cell as any ); } + +// helper to add class so we can override color when row is modified +function isModified(rowData: Entity) { + if (rowData?.__controller?.__isDeleted) { + return 'row-is-deleted'; + } + + if (rowData?.__controller?.__isNew) { + return 'row-is-new'; + } + + if (rowData?.__controller?.__edited) { + return 'row-is-modified'; + } + + return ''; +} diff --git a/samples/grid01/gridConfig.ts b/samples/grid01/gridConfig.ts index 0c8eda36..db6b3166 100644 --- a/samples/grid01/gridConfig.ts +++ b/samples/grid01/gridConfig.ts @@ -31,6 +31,12 @@ export const gridConfig: GridConfig = { }, ], */ columnsCenter: [ + { + // you almost need to include this now + // N = new, D = deleted, M=modified + rows: ['__rowState'], + width: 20 + }, { rows: ['company', 'country'], width: 200 @@ -106,6 +112,11 @@ export const gridConfig: GridConfig = { } ], attributes: [ + { + attribute:'__rowState', // N = new, D = deleted, M=modified + label: "RS", + readonly: true + }, { attribute: 'isActive', type: 'boolean' diff --git a/samples/grid01/index.ts b/samples/grid01/index.ts index bff99838..974fdd2e 100644 --- a/samples/grid01/index.ts +++ b/samples/grid01/index.ts @@ -216,10 +216,20 @@ createButton('reset data/changes', () => { datasource.resetData(); }); +createButton('reset data/changes -selection', () => { + datasource.resetDataSelectionOnly(); +}); + createButton('get changes (ses console)', () => { console.log(datasource.getChanges()); }); +createButton('remove marked for deleted (no undo)', () => { + + datasource.getDataContainer().clearMarkedForDeletion(); + datasource.reloadDatasource(); +}); + createButton('use init config', () => { gridInterface.loadConfig(gridConfig); }); diff --git a/samples/grid01/toggelDarkGrid.ts b/samples/grid01/toggelDarkGrid.ts index 550e5f90..bd2c5715 100644 --- a/samples/grid01/toggelDarkGrid.ts +++ b/samples/grid01/toggelDarkGrid.ts @@ -47,6 +47,22 @@ export function toggelDarkGrid() { border-top: 0px; } + + + .simple-html-selector-text.row-is-modified { + color: #9595f1; + } + + .simple-html-selector-text.row-is-new { + color: #5ff95f; + } + + .simple-html-selector-text.row-is-deleted { + color: red; + } + + + .simple-html-grid .filter-dialog-bottom-row button{ border: 1px solid #515458; }