diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/api-commit.component.html b/front-end/app/studio/pages/apis/{apiId}/editor/components/api-commit.component.html similarity index 100% rename from front-end/app/studio/pages/apis/{apiId}/editor/api-commit.component.html rename to front-end/app/studio/pages/apis/{apiId}/editor/components/api-commit.component.html diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/api-commit.component.less b/front-end/app/studio/pages/apis/{apiId}/editor/components/api-commit.component.less similarity index 100% rename from front-end/app/studio/pages/apis/{apiId}/editor/api-commit.component.less rename to front-end/app/studio/pages/apis/{apiId}/editor/components/api-commit.component.less diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/api-commit.component.ts b/front-end/app/studio/pages/apis/{apiId}/editor/components/api-commit.component.ts similarity index 100% rename from front-end/app/studio/pages/apis/{apiId}/editor/api-commit.component.ts rename to front-end/app/studio/pages/apis/{apiId}/editor/components/api-commit.component.ts diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.html b/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.html new file mode 100644 index 000000000..4ed9ed166 --- /dev/null +++ b/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.html @@ -0,0 +1,61 @@ + +
+ +
diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.less b/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.less new file mode 100644 index 000000000..1febfca44 --- /dev/null +++ b/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.less @@ -0,0 +1,3 @@ +.example-section .example button { + margin-top: 5px; +} \ No newline at end of file diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.ts b/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.ts new file mode 100644 index 000000000..1b5e9a834 --- /dev/null +++ b/front-end/app/studio/pages/apis/{apiId}/editor/components/dialogs/add-definition.component.ts @@ -0,0 +1,145 @@ +/** + * @license + * Copyright 2017 JBoss Inc + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {Component, Output, EventEmitter, ViewChild, ViewChildren, QueryList} from "@angular/core"; +import {ModalDirective} from "ng2-bootstrap"; +import {AceEditorDirective} from "ng2-ace-editor"; + + +@Component({ + moduleId: module.id, + selector: "add-definition-dialog", + templateUrl: "add-definition.component.html", + styleUrls: ["add-definition.component.css"] +}) +export class AddDefinitionDialogComponent { + + @Output() onAdd: EventEmitter = new EventEmitter(); + + @ViewChildren("addDefinitionModal") addDefinitionModal: QueryList; + @ViewChildren("exampleEditor") exampleEditor: QueryList; + + protected _isOpen: boolean = false; + + protected name: string = ""; + + protected example: string = ""; + protected exampleValid: boolean = true; + protected exampleFormattable: boolean = false; + + /** + * Called to open the dialog. + */ + public open(): void { + console.info("Opening the Add Definition dialog!"); + this._isOpen = true; + this.addDefinitionModal.changes.subscribe( thing => { + if (this.addDefinitionModal.first) { + this.addDefinitionModal.first.show(); + } + }); + } + + /** + * Called to close the dialog. + */ + public close(): void { + this._isOpen = false; + this.name = ""; + this.example = ""; + this.exampleValid = false; + this.exampleFormattable = false; + } + + /** + * Called when the user clicks "add". + */ + protected add(): void { + let data: any = { + name: this.name, + example: this.example + }; + this.onAdd.emit(data); + this.cancel(); + } + + /** + * Called when the user clicks "cancel". + */ + protected cancel(): void { + this.addDefinitionModal.first.hide(); + } + + /** + * Returns true if the dialog is open. + * @return {boolean} + */ + public isOpen(): boolean { + return this._isOpen; + } + + /** + * Called when the user changes the example definition in the Add Definition modal dialog. + * @param definition + */ + public setExampleDefinition(definition: string): void { + this.example = definition; + if (this.example === "") { + this.exampleValid = true; + this.exampleFormattable = false; + } else { + try { + JSON.parse(this.example); + this.exampleValid = true; + this.exampleFormattable = true; + } catch (e) { + this.exampleValid = false; + this.exampleFormattable = false; + } + } + } + + /** + * Returns true if it's possible to format the example definition (it must be non-null and + * syntactically valid). + * @return {boolean} + */ + public isExampleDefinitionFormattable(): boolean { + return this.exampleFormattable; + } + + /** + * Returns true if the example definition added by the user in the Add Definition modal + * dialog is valid (syntactically). + * @return {boolean} + */ + public isExampleDefinitionValid(): boolean { + return this.exampleValid; + } + + /** + * Called to format the example definition. + */ + public formatExampleDefinition(): void { + if (this.exampleEditor.first) { + let jsObj: any = JSON.parse(this.example); + let nsrcStr: string = JSON.stringify(jsObj, null, 4); + this.exampleEditor.first.setText(nsrcStr); + } + } + +} diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.html b/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.html index 00ab3694a..990e3143f 100644 --- a/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.html +++ b/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.html @@ -54,7 +54,7 @@

{{ document().info.title }}

Definitions + (click)="addDefinitionDialog.open()">
{{ document().info.title }} Reusable types are useful!   + (click)="addDefinitionDialog.open()">Add Now
@@ -106,64 +106,7 @@

{{ document().info.title }}

(onDeselect)="deselectDefinition()" *ngIf="selectedType === 'definition'"> - - + diff --git a/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.ts b/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.ts index ff39c0d2d..458d86c05 100644 --- a/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.ts +++ b/front-end/app/studio/pages/apis/{apiId}/editor/editor.component.ts @@ -22,7 +22,6 @@ import {CommandsManager, ICommand} from "./commands.manager"; import {ModalDirective} from "ng2-bootstrap"; import {NewPathCommand} from "./commands/new-path.command"; import {NewDefinitionCommand} from "./commands/new-definition.command"; -import {AceEditorDirective} from "ng2-ace-editor"; @Component({ @@ -37,17 +36,10 @@ export class ApiEditorComponent { @Input() api: ApiDefinition; @Output() onDirty: EventEmitter = new EventEmitter(); - @ViewChild("addPathModal") public addPathModal: ModalDirective; - @ViewChild("addDefinitionModal") public addDefinitionModal: ModalDirective; - @ViewChild("exampleEditor") exampleEditor: AceEditorDirective; + @ViewChild("addPathModal") addPathModal: ModalDirective; public modals: any = { - addPath: {}, - addDefinition: { - exampleDefinition: "", - exampleDefinitionValid: true, - exampleDefinitionFormattable: false - } + addPath: {} }; private _library: OasLibraryUtils = new OasLibraryUtils(); @@ -262,15 +254,6 @@ export class ApiEditorComponent { return path; } - /** - * Called to initialize the definition name (each time the Add Definition dialog is opened). - */ - public initAddDefinition(): void { - this.modals.addDefinition.definitionName = ""; - this.modals.addDefinition.exampleDefinition = ""; - this.exampleEditor.setText(""); - } - /** * Called when the user fills out the Add Path modal dialog and clicks Add. */ @@ -363,12 +346,10 @@ export class ApiEditorComponent { /** * Called when the user fills out the Add Definition modal dialog and clicks Add. */ - public addDefinition(): void { - let command: ICommand = new NewDefinitionCommand(this.modals.addDefinition.definitionName, - this.modals.addDefinition.exampleDefinition); + public addDefinition(modalData: any): void { + let command: ICommand = new NewDefinitionCommand(modalData.name, modalData.example); this.onCommand(command); - this.addDefinitionModal.hide(); - this.selectDefinition(this.modals.addDefinition.definitionName); + this.selectDefinition(modalData.name); } /** @@ -424,53 +405,4 @@ export class ApiEditorComponent { return name.toLowerCase().indexOf(this.filterCriteria) != -1; } - /** - * Called when the user changes the example definition in the Add Definition modal dialog. - * @param definition - */ - public setExampleDefinition(definition: string): void { - console.info("Setting Example Def: %s", definition); - this.modals.addDefinition.exampleDefinition = definition; - if (this.modals.addDefinition.exampleDefinition === "") { - this.modals.addDefinition.exampleDefinitionValid = true; - this.modals.addDefinition.exampleDefinitionFormattable = false; - } else { - try { - JSON.parse(this.modals.addDefinition.exampleDefinition); - this.modals.addDefinition.exampleDefinitionValid = true; - this.modals.addDefinition.exampleDefinitionFormattable = true; - } catch (e) { - this.modals.addDefinition.exampleDefinitionValid = false; - this.modals.addDefinition.exampleDefinitionFormattable = false; - } - } - } - - /** - * Returns true if it's possible to format the example definition (it must be non-null and - * syntactically valid). - * @return {boolean} - */ - public isExampleDefinitionFormattable(): boolean { - return this.modals.addDefinition.exampleDefinitionFormattable; - } - - /** - * Returns true if the example definition added by the user in the Add Definition modal - * dialog is valid (syntactically). - * @return {boolean} - */ - public isExampleDefinitionValid(): boolean { - return this.modals.addDefinition.exampleDefinitionValid; - } - - /** - * Called to format the example definition. - */ - public formatExampleDefinition(): void { - let jsObj: any = JSON.parse(this.modals.addDefinition.exampleDefinition); - let nsrcStr: string = JSON.stringify(jsObj, null, 4); - this.exampleEditor.setText(nsrcStr); - } - } diff --git a/front-end/app/studio/studio.module.ts b/front-end/app/studio/studio.module.ts index cf7d86bac..4b9145c15 100644 --- a/front-end/app/studio/studio.module.ts +++ b/front-end/app/studio/studio.module.ts @@ -64,7 +64,7 @@ import {AddApiFormComponent} from "./pages/apis/add/add-form.component"; import {ApisListComponent} from "./pages/apis/apis-list.component"; import {ApisCardsComponent} from "./pages/apis/apis-cards.component"; import {ApiEditorComponent} from "./pages/apis/{apiId}/editor/editor.component"; -import {ApiCommitComponent} from "./pages/apis/{apiId}/editor/api-commit.component"; +import {ApiCommitComponent} from "./pages/apis/{apiId}/editor/components/api-commit.component"; /** Directives **/ import {TextAreaAutosize} from "./directives/autosize.directive"; @@ -88,6 +88,7 @@ import {DescriptionEditorQPComponent} from "./pages/apis/{apiId}/editor/componen import {TypeEditorOFComponent} from "./pages/apis/{apiId}/editor/components/operation-form/type-editor.component"; import {DefinitionFormComponent} from "./pages/apis/{apiId}/editor/components/definition-form.component"; import {SearchComponent} from "./pages/apis/{apiId}/editor/components/search.component"; +import {AddDefinitionDialogComponent} from "./pages/apis/{apiId}/editor/components/dialogs/add-definition.component"; @NgModule({ @@ -100,7 +101,7 @@ import {SearchComponent} from "./pages/apis/{apiId}/editor/components/search.com VersionEditorComponent, PathFormComponent, OperationFormComponent, SummaryEditorPFComponent, DescriptionEditorPFComponent, DescriptionEditorComponent, TextAreaAutosize, SummaryEditorOFComponent, DescriptionEditorOFComponent, RequestDescriptionEditorOFComponent, DescriptionEditorQPComponent, TypeEditorOFComponent, DefinitionFormComponent, - AceEditorComponent, SearchComponent], + AceEditorComponent, SearchComponent, AddDefinitionDialogComponent], providers: [ApisServiceProvider, AuthenticationServiceProvider, RecentApisResolve, ApiResolve, ApiDefinitionResolve, AuthenticationCanActivateGuard, ApiEditorPageGuard