From 1e6cabe36b34bcf93bed810c22377c5f7968a3d3 Mon Sep 17 00:00:00 2001 From: Daniel Florian Date: Tue, 19 Jun 2018 10:39:48 -0500 Subject: [PATCH] Started work on the property editors area - added initial implementation of ViewPropertyEditorsComponent that is the UI for editing view, column, and join properties - created ViewEditorI18n to keep all text that should eventually be localized - fixed some lint errors --- .../app/dataservices/dataservices.module.ts | 4 +- .../odata-control/odata-control.component.ts | 3 +- .../view-editor/command/command-factory.ts | 4 +- .../connection-table-dialog.component.html | 4 +- .../connection-table-dialog.component.ts | 11 ++- ...connection-tree-selector.component.spec.ts | 7 +- .../editor-views/editor-views.component.html | 4 +- .../editor-views/editor-views.component.ts | 11 ++- .../message-log/message-log.component.css | 2 +- .../message-log/message-log.component.ts | 11 ++- .../editor-views/message-log/problem.ts | 13 +-- .../view-preview/view-preview.component.ts | 5 +- ...iew-editor-save-progress-change-id.enum.ts | 2 +- .../view-canvas/view-canvas.component.html | 5 +- .../view-canvas/view-canvas.component.spec.ts | 11 ++- .../view-canvas/view-canvas.component.ts | 4 + .../view-editor-header.component.html | 10 +- .../view-editor-header.component.ts | 8 ++ .../view-editor/view-editor-i18n.ts | 71 +++++++++++++- .../view-editor/view-editor.component.spec.ts | 16 ++-- .../view-editor/view-editor.component.ts | 63 ++++++------ .../view-editor/view-editor.service.ts | 2 +- .../view-property-editors.component.css | 23 +++++ .../view-property-editors.component.html | 13 +++ .../view-property-editors.component.spec.ts | 45 +++++++++ .../view-property-editors.component.ts | 96 +++++++++++++++++++ .../view-editor/view-validator.ts | 7 -- 27 files changed, 362 insertions(+), 93 deletions(-) create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.css create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.html create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.spec.ts create mode 100644 ngapp/src/app/dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component.ts diff --git a/ngapp/src/app/dataservices/dataservices.module.ts b/ngapp/src/app/dataservices/dataservices.module.ts index 1fe8eca5..a99ef378 100644 --- a/ngapp/src/app/dataservices/dataservices.module.ts +++ b/ngapp/src/app/dataservices/dataservices.module.ts @@ -70,6 +70,7 @@ import { VirtualizationComponent } from "./virtualization/virtualization.compone import { ConnectionTreeSelectorComponent } from './virtualization/view-editor/connection-table-dialog/connection-tree-selector/connection-tree-selector.component'; import { ConnectionTableDialogComponent } from './virtualization/view-editor/connection-table-dialog/connection-table-dialog.component'; import { ProgressDialogComponent } from "@shared/progress-dialog/progress-dialog.component"; +import { ViewPropertyEditorsComponent } from './virtualization/view-editor/view-property-editors/view-property-editors.component'; @NgModule({ imports: [ @@ -119,7 +120,8 @@ import { ProgressDialogComponent } from "@shared/progress-dialog/progress-dialog MessageLogComponent, EditorViewsComponent, ConnectionTreeSelectorComponent, - ConnectionTableDialogComponent + ConnectionTableDialogComponent, + ViewPropertyEditorsComponent ], providers: [ { diff --git a/ngapp/src/app/dataservices/odata-control/odata-control.component.ts b/ngapp/src/app/dataservices/odata-control/odata-control.component.ts index 92e5bf08..10913865 100644 --- a/ngapp/src/app/dataservices/odata-control/odata-control.component.ts +++ b/ngapp/src/app/dataservices/odata-control/odata-control.component.ts @@ -205,14 +205,13 @@ export class OdataControlComponent implements OnChanges { } public get metadataFailureMsg(): string { - let msg = this.i18n.metadataFetchFailure + '
'; + const msg = this.i18n.metadataFetchFailure + '
'; if (_.isEmpty(this.dataservice.getOdataRootUrl())) return msg + this.i18n.metadataFetchFailureNoOdataRoot; if (_.isEmpty(this.dataservice.getServiceViewModel())) return msg + this.i18n.metadataFetchFailureNoViewModel; - return msg + this.i18n.metadataFetchFailureUrl + '
' + '' + this.metadataUrl + ''; } diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/command/command-factory.ts b/ngapp/src/app/dataservices/virtualization/view-editor/command/command-factory.ts index 0620b356..40fd71a4 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/command/command-factory.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/command/command-factory.ts @@ -184,10 +184,10 @@ export class CommandFactory { for ( const entry of json[ Command.argsPropJson ] ) { if ( entry[ Command.argNameJson ] === UpdateViewNameCommand.newName ) { - newViewName = entry[ "value" ]; + newViewName = entry[ Command.argValueJson ]; } else if ( entry[ Command.argNameJson ] === UpdateViewNameCommand.oldName ) { - replacedViewName = entry[ "value" ]; + replacedViewName = entry[ Command.argValueJson ]; } if ( newViewName && replacedViewName ) { diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.html b/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.html index eb5c4a56..e62fd861 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.html +++ b/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.html @@ -5,12 +5,12 @@

{{ title }}

- Expand connection and select a source for your view + {{message}}
-

Current Selection:

+

{{currentSelectionMsg}}

{{ selectionText }}
diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.ts index 72375337..5017a33b 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-table-dialog.component.ts @@ -25,6 +25,7 @@ import { ConnectionsConstants } from "@connections/shared/connections-constants" import { LoadingState } from "@shared/loading-state.enum"; import { ConnectionService } from "@connections/shared/connection.service"; import { LoggerService } from "@core/logger.service"; +import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; @Component({ selector: "app-connection-table-dialog", @@ -52,12 +53,14 @@ export class ConnectionTableDialogComponent implements OnInit { @Output() public okAction = new EventEmitter(); - public title = "Select Source for View"; - public cancelButtonText = "Cancel"; - public okButtonText = "OK"; + public readonly title = ViewEditorI18n.connectionTableSelectionDialogTitle; + public readonly message = ViewEditorI18n.connectionTableSelectionDialogMessage; + public readonly cancelButtonText = ViewEditorI18n.cancelButtonText; + public readonly okButtonText = ViewEditorI18n.okButtonText; public okButtonEnabled = false; public bsModalRef: BsModalRef; - public selectionText = "Nothing selected"; + public selectionText = ViewEditorI18n.noSelection; + public readonly currentSelectionMsg = ViewEditorI18n.currentSelection; private connectionService: ConnectionService; private selectedTreeNodes: SchemaNode[] = []; diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-tree-selector/connection-tree-selector.component.spec.ts b/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-tree-selector/connection-tree-selector.component.spec.ts index e597e01d..dbad97a6 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-tree-selector/connection-tree-selector.component.spec.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/connection-table-dialog/connection-tree-selector/connection-tree-selector.component.spec.ts @@ -10,7 +10,7 @@ import { VdbService } from "@dataservices/shared/vdb.service"; import { MockVdbService } from "@dataservices/shared/mock-vdb.service"; import { AppSettingsService } from "@core/app-settings.service"; import { NotifierService } from "@dataservices/shared/notifier.service"; -import { SchemaNode } from "@connections/shared/schema-node.model"; +import { MockAppSettingsService } from "@core/mock-app-settings.service"; describe("ConnectionTreeSelectorComponent", () => { let component: ConnectionTreeSelectorComponent; @@ -20,7 +20,10 @@ describe("ConnectionTreeSelectorComponent", () => { TestBed.configureTestingModule({ imports: [ HttpModule, TreeModule ], declarations: [ ConnectionTreeSelectorComponent ], - providers: [ AppSettingsService, LoggerService, NotifierService, + providers: [ + { provide: AppSettingsService, useClass: MockAppSettingsService }, + LoggerService, + NotifierService, { provide: ConnectionService, useClass: MockConnectionService }, { provide: VdbService, useClass: MockVdbService }, ] diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.html b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.html index 9cead9cc..e9cca771 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.html +++ b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.html @@ -4,7 +4,7 @@ (deselect)="tabSelected(tabs[0], false)"> - Preview + {{previewTabName}} @@ -13,7 +13,7 @@ (deselect)="tabSelected(tabs[1], false)"> - Messages + {{messagesTabName}} diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.ts index bbc68844..d75a6769 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/editor-views.component.ts @@ -16,11 +16,12 @@ */ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { Subscription } from "rxjs/Subscription"; -import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service"; -import { ViewEditorEvent } from "@dataservices/virtualization/view-editor/event/view-editor-event"; import { LoggerService } from "@core/logger.service"; +import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service"; import { ViewEditorPart } from "@dataservices/virtualization/view-editor/view-editor-part.enum"; +import { ViewEditorEvent } from "@dataservices/virtualization/view-editor/event/view-editor-event"; +import { Subscription } from "rxjs/Subscription"; +import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; @Component({ encapsulation: ViewEncapsulation.None, @@ -30,6 +31,10 @@ import { ViewEditorPart } from "@dataservices/virtualization/view-editor/view-ed }) export class EditorViewsComponent implements OnInit, OnDestroy { + // text used by html + public readonly messagesTabName = ViewEditorI18n.messagesTabName; + public readonly previewTabName = ViewEditorI18n.previewTabName; + private readonly previewIndex = 0; private readonly messagesIndex = 1; diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.css b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.css index bb4dd829..86c72b61 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.css +++ b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.css @@ -1,5 +1,5 @@ /* - * The container for the mesage log table. + * The container for the message log table. */ #view-editor-message-log { align-items: center; diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.ts index 1968a00b..7805e289 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/message-log.component.ts @@ -20,6 +20,7 @@ import { LoggerService } from "@core/logger.service"; import { ViewEditorService } from "@dataservices/virtualization/view-editor/view-editor.service"; import { EmptyStateConfig, NgxDataTableConfig, TableConfig } from "patternfly-ng"; import { Message } from "@dataservices/virtualization/view-editor/editor-views/message-log/message"; +import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; @Component({ encapsulation: ViewEncapsulation.None, @@ -49,19 +50,19 @@ export class MessageLogComponent implements OnInit { public ngOnInit(): void { this.columns = [ { - name: "ID", + name: ViewEditorI18n.idColumnName, prop: Message.ID_PROP_NAME }, { - name: "Type", + name: ViewEditorI18n.typeColumnName, prop: Message.TYPE_PROP_NAME }, { - name: "Description", + name: ViewEditorI18n.descriptionColumnName, prop: Message.DESCRIPTION_PROP_NAME }, { - name: "Context", + name: ViewEditorI18n.contextColumnName, prop: Message.CONTEXT_PROP_NAME }, ]; @@ -74,7 +75,7 @@ export class MessageLogComponent implements OnInit { } as NgxDataTableConfig; this.emptyStateConfig = { - title: "No messages found" + title: ViewEditorI18n.noMessagesFound } as EmptyStateConfig; this.tableConfig = { diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/problem.ts b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/problem.ts index a83fcc33..439d31be 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/problem.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/message-log/problem.ts @@ -15,18 +15,13 @@ * limitations under the License. */ import { MessageType } from "@dataservices/virtualization/view-editor/editor-views/message-log/message-type.enum"; +import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; export class Problem { - public static readonly ERR0100 = new Problem( "ERR0100", - MessageType.ERROR, - "There must be a virtualization selected in order to use this editor." ); - public static readonly ERR0110 = new Problem( "ERR0110", - MessageType.ERROR, - "A view must have a name." ); - public static readonly ERR0120 = new Problem( "ERR0120", - MessageType.ERROR, - "A view must have at least one source." ); + public static readonly ERR0100 = new Problem( "ERR0100", MessageType.ERROR, ViewEditorI18n.error0100 ); + public static readonly ERR0110 = new Problem( "ERR0110", MessageType.ERROR, ViewEditorI18n.error0110 ); + public static readonly ERR0120 = new Problem( "ERR0120", MessageType.ERROR, ViewEditorI18n.error0120 ); private readonly _id: string; private readonly _description: string; diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/view-preview/view-preview.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/view-preview/view-preview.component.ts index 2e4ff31f..4a13a145 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/view-preview/view-preview.component.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/editor-views/view-preview/view-preview.component.ts @@ -24,6 +24,7 @@ import { ColumnData } from "@dataservices/shared/column-data.model"; import { RowData } from "@dataservices/shared/row-data.model"; import { EmptyStateConfig, NgxDataTableConfig, TableConfig } from "patternfly-ng"; import { Subscription } from "rxjs/Subscription"; +import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; @Component({ encapsulation: ViewEncapsulation.None, @@ -102,7 +103,7 @@ export class ViewPreviewComponent implements OnInit, OnDestroy { } as NgxDataTableConfig; this.emptyStateConfig = { - title: "Preview data unavailable" + title: ViewEditorI18n.previewDataUnavailable } as EmptyStateConfig; this.tableConfig = { @@ -129,7 +130,7 @@ export class ViewPreviewComponent implements OnInit, OnDestroy { // Define the row data let firstTime = true; - const rowNumHeader = "ROW #"; + const rowNumHeader = ViewEditorI18n.rowNumberColumnName; for ( let rowIndex = 0; rowIndex < rowData.length; rowIndex++ ) { const row = rowData[ rowIndex ]; diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/event/view-editor-save-progress-change-id.enum.ts b/ngapp/src/app/dataservices/virtualization/view-editor/event/view-editor-save-progress-change-id.enum.ts index 6d540a01..96cd03cb 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/event/view-editor-save-progress-change-id.enum.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/event/view-editor-save-progress-change-id.enum.ts @@ -20,7 +20,7 @@ export enum ViewEditorSaveProgressChangeId { /** * Indicates the view save is in progress. */ - IN_PROGESS = "IN_PROGRESS", + IN_PROGRESS = "IN_PROGRESS", /** * Indicates the view save has completed successfully. diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.html b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.html index 39ae9ebe..1a456e45 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.html +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.html @@ -8,7 +8,7 @@
- Select a source for the view + {{noSourcesAlert}}
@@ -20,7 +20,8 @@
Properties + id="view-editor-properties-container"> +
diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts index 3e8f87d0..4f9ef228 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.spec.ts @@ -19,6 +19,8 @@ import { import { VdbService } from "@dataservices/shared/vdb.service"; import { MockVdbService } from "@dataservices/shared/mock-vdb.service"; import { NotifierService } from "@dataservices/shared/notifier.service"; +import { ViewPropertyEditorsComponent } from "@dataservices/virtualization/view-editor/view-property-editors/view-property-editors.component"; +import { TabsModule } from "ngx-bootstrap"; describe('ViewCanvasComponent', () => { let component: ViewCanvasComponent; @@ -36,9 +38,14 @@ describe('ViewCanvasComponent', () => { SortModule, TableModule, WizardModule, - HttpModule + HttpModule, + TabsModule.forRoot() + ], + declarations: [ + SelectedNodeComponent, + ViewCanvasComponent, + ViewPropertyEditorsComponent ], - declarations: [ ViewCanvasComponent, SelectedNodeComponent ], providers: [ { provide: AppSettingsService, useClass: MockAppSettingsService }, LoggerService, diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.ts index 26e1bcf5..0d16900b 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.ts +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-canvas/view-canvas.component.ts @@ -23,6 +23,7 @@ import { Subscription } from "rxjs/Subscription"; import { SchemaNode } from "@connections/shared/schema-node.model"; import { ViewEditorPart } from "@dataservices/virtualization/view-editor/view-editor-part.enum"; import { ViewStateChangeId } from "@dataservices/virtualization/view-editor/event/view-state-change-id.enum"; +import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n"; @Component({ encapsulation: ViewEncapsulation.None, @@ -32,6 +33,9 @@ import { ViewStateChangeId } from "@dataservices/virtualization/view-editor/even }) export class ViewCanvasComponent implements OnInit, OnDestroy { + // used by html + public readonly noSourcesAlert = ViewEditorI18n.noSourcesAlert; + private readonly logger: LoggerService; private readonly editorService: ViewEditorService; private subscription: Subscription; diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.html b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.html index b85f69f4..4c89a6a6 100644 --- a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.html +++ b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.html @@ -19,13 +19,13 @@
Show Description + (change)="showDescription = $event.target.checked">{{showDescriptionCheckbox}}
@@ -52,13 +52,13 @@ *ngIf="showDescription">