Browse Source

Allow resizing and saving column widths

master
Garrett Mills 3 months ago
parent
commit
c4e236a0bf
Signed by: garrettmills GPG Key ID: D2BF5FBA8298F246
2 changed files with 45 additions and 3 deletions
  1. +2
    -0
      src/app/components/editor/database/database.component.html
  2. +43
    -3
      src/app/components/editor/database/database.component.ts

+ 2
- 0
src/app/components/editor/database/database.component.html View File

@ -23,6 +23,8 @@
suppressMovableColumns="true"
(rowClicked)="onRowClicked($event)"
(cellValueChanged)="onCellValueChanged()"
(gridReady)="onGridReady($event)"
(columnResized)="onColumnResize($event)"
#agGridElement
></ag-grid-angular>
</div>


+ 43
- 3
src/app/components/editor/database/database.component.ts View File

@ -15,7 +15,7 @@ import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
import {EditorService} from '../../../service/editor.service';
import {WysiwygEditorComponent} from './editors/wysiwyg/wysiwyg-editor.component';
import {debounce} from '../../../utility';
import {debounce, debug} from '../../../utility';
@Component({
selector: 'editor-database',
@ -86,6 +86,25 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
});
}
onGridReady($event) {
}
onColumnResize($event) {
if ( $event.source === 'uiColumnDragged' && $event.finished ) {
debug('Column resized: ', $event);
const state = $event.columnApi.getColumnState().find(x => x.colId === $event.column.colId );
if ( state ) {
const colDef = this.columnDefs.find(x => x.field === $event.column.colId);
if ( colDef ) {
colDef.width = state.width;
this.dirty = true;
this.triggerSaveDebounce();
}
}
}
}
onCellValueChanged() {
if ( !this.isInitialLoad ) {
this.dirty = true;
@ -161,6 +180,11 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
this.columnDefs = data.map(x => {
x.editable = !this.readonly;
x.minWidth = 150;
x.resizable = true;
if ( x.additionalData?.width ) {
x.width = x.additionalData.width;
}
// Set editors and renderers for different types
if ( x.Type === 'text' ) {
@ -186,7 +210,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
} else if ( x.Type === 'index' ) {
x.editable = false;
x.suppressSizeToFit = true;
x.width = 80;
if ( !x.width ) {
x.width = 80;
}
x.minWidth = 80;
} else if ( x.Type === 'wysiwyg' ) {
x.cellEditorFramework = WysiwygEditorComponent;
@ -253,9 +279,23 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
await this.api.deleteDatabase(this.page.UUID, this.node.UUID, this.node.Value.Value);
}
public getSaveColumns() {
return this.columnDefs.map(x => {
if ( !x.additionalData ) {
x.additionalData = {};
}
if ( x.width ) {
x.additionalData.width = x.width;
}
return x;
});
}
public async performSave(): Promise<void> {
// Save the columns first
await this.api.saveDatabaseColumns(this.page.UUID, this.node.UUID, this.node.Value.Value, this.columnDefs);
await this.api.saveDatabaseColumns(this.page.UUID, this.node.UUID, this.node.Value.Value, this.getSaveColumns());
// Save the data
const rows = await this.api.saveDatabaseEntries(this.page.UUID, this.node.UUID, this.node.Value.Value, this.rowData);


Loading…
Cancel
Save