From c85cc00c1fc48cab054aa46805fa836062f84c64 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Tue, 10 Nov 2020 09:40:10 -0600 Subject: [PATCH] Database - dynamic col size & mobile style fixes --- package-lock.json | 21 +++++++++++++++++++ package.json | 1 + src/app/app.module.ts | 2 ++ src/app/components/components.module.ts | 2 ++ .../editor/database/database.component.html | 4 ++-- .../editor/database/database.component.ts | 10 +++++++++ 6 files changed, 38 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8737f5f..202f9db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3112,6 +3112,22 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "angular-resize-event": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/angular-resize-event/-/angular-resize-event-2.0.1.tgz", + "integrity": "sha512-MSSsPb35nIBqPnLwslA3SC0ojTc4nBIaT4y0Plri+fCDUKCunPf7MpJrF/cTI/9wCpvVvEIcuzHfTrA6kp03mA==", + "requires": { + "css-element-queries": "^1.2.3", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -4911,6 +4927,11 @@ "timsort": "^0.3.0" } }, + "css-element-queries": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz", + "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q==" + }, "css-loader": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.2.tgz", diff --git a/package.json b/package.json index 6218b7f..b66cc1d 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@ng-stack/contenteditable": "^1.1.0", "ag-grid-angular": "^22.1.1", "ag-grid-community": "^22.1.1", + "angular-resize-event": "^2.0.1", "core-js": "^2.5.4", "dexie": "^3.0.2", "moment": "^2.24.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fba517f..f534f09 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,6 +18,7 @@ import { MarkdownModule } from 'ngx-markdown'; import {ConnectionServiceModule} from 'ng-connection-service'; import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment'; +import { AngularResizedEventModule } from 'angular-resize-event'; /** * This function is used internal to get a string instance of the `` value from `index.html`. @@ -49,6 +50,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string { MarkdownModule.forRoot(), ConnectionServiceModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), + AngularResizedEventModule, ], providers: [ StatusBar, diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index 1097a85..ec772a1 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -36,6 +36,7 @@ import {EditorPage} from '../pages/editor/editor.page'; import {WysiwygComponent} from './wysiwyg/wysiwyg.component'; import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-editor.component'; import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-modal.component'; +import {AngularResizedEventModule} from 'angular-resize-event'; @NgModule({ declarations: [ @@ -79,6 +80,7 @@ import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-m DirectivesModule, MarkdownModule, EditorPageRoutingModule, + AngularResizedEventModule, ], entryComponents: [ NodePickerComponent, diff --git a/src/app/components/editor/database/database.component.html b/src/app/components/editor/database/database.component.html index 8519ac9..c54399c 100644 --- a/src/app/components/editor/database/database.component.html +++ b/src/app/components/editor/database/database.component.html @@ -1,4 +1,4 @@ -
+
- +  Manage Columns  Insert Row  Delete Row diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts index bfa7b72..2b338a6 100644 --- a/src/app/components/editor/database/database.component.ts +++ b/src/app/components/editor/database/database.component.ts @@ -149,6 +149,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit { setColumns(data) { this.columnDefs = data.map(x => { x.editable = !this.readonly; + x.minWidth = 150; // Set editors and renderers for different types if ( x.Type === 'text' ) { @@ -160,6 +161,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit { } else if ( x.Type === 'boolean' ) { x.cellRendererFramework = BooleanRendererComponent; x.cellEditorFramework = BooleanEditorComponent; + x.suppressSizeToFit = true; } else if ( x.Type === 'select' ) { x.cellEditorFramework = SelectEditorComponent; } else if ( x.Type === 'multiselect' ) { @@ -172,6 +174,9 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit { x.cellRendererFramework = CurrencyRendererComponent; } else if ( x.Type === 'index' ) { x.editable = false; + x.suppressSizeToFit = true; + x.width = 80; + x.minWidth = 80; } else if ( x.Type === 'wysiwyg' ) { x.cellEditorFramework = WysiwygEditorComponent; } @@ -181,10 +186,15 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit { this.agGridElement.api.setColumnDefs([]); this.agGridElement.api.setColumnDefs(this.columnDefs); + this.agGridElement.api.sizeColumnsToFit(); this.dirty = true; this.editorService.triggerSave(); } + public onResized() { + this.agGridElement.api.sizeColumnsToFit(); + } + public async performLoad(): Promise { if ( !this.node.Value ) { this.node.Value = {};