Added "enable console" option to the operation details editor. (#352)

Author: azaslonov

src/components/operations/operation-details/ko/operationDetails.html

@@ -1 +1 @@
-<operation-details></operation-details>
+<operation-details data-bind="attr: { params: config }"></operation-details>

src/components/operations/operation-details/ko/operationDetailsEditor.html

@@ -1,6 +1,8 @@
 <fieldset class="form flex-item flex-item-grow" data-bind="scrollable: {}">
-    <b>Coming soon</b>
-    <p>
-        An editor for this widget is not yet ready.<br />
-    </p>
+    <div class="form-group">
+        <label for="enableConsole" class="form-label">
+            <input type="checkbox" id="allowSelection" name="enableConsole" data-bind="checked: enableConsole" />
+            Enable API console
+        </label>
+    </div>
 </fieldset>

src/components/operations/operation-details/ko/operationDetailsEditor.ts

@@ -9,7 +9,11 @@ import { OperationDetailsModel } from "../operationDetailsModel";
     injectable: "operationDetailsEditor"
 })
 export class OperationDetailsEditor {
-    constructor() { }
+    public readonly enableConsole: ko.Observable<boolean>;
+
+    constructor() {
+        this.enableConsole = ko.observable();
+    }
 
     @Param()
     public model: OperationDetailsModel;
@@ -19,6 +23,12 @@ export class OperationDetailsEditor {
 
     @OnMounted()
     public async initialize(): Promise<void> {
-        // TODO: Implement
+        this.enableConsole(this.model.enableConsole);
+        this.enableConsole.subscribe(this.applyChanges);
+    }
+
+    private applyChanges(): void {
+        this.model.enableConsole = this.enableConsole();
+        this.onChange(this.model);
     }
 }

src/components/operations/operation-details/ko/operationDetailsViewModel.ts

@@ -1,3 +1,4 @@
+import * as ko from "knockout";
 import template from "./operationDetails.html";
 import { Component } from "@paperbits/common/ko/decorators";
 
@@ -6,4 +7,9 @@ import { Component } from "@paperbits/common/ko/decorators";
     template: template
 })
 export class OperationDetailsViewModel {
+    public readonly config?: ko.Observable<string>;
+
+    constructor() {
+        this.config = ko.observable();
+    }
 }

src/components/operations/operation-details/ko/operationDetailsViewModelBinder.ts

@@ -1,20 +1,27 @@
 import { ViewModelBinder } from "@paperbits/common/widgets";
+import { EventManager } from "@paperbits/common/events";
 import { OperationDetailsViewModel } from "./operationDetailsViewModel";
 import { OperationDetailsModel } from "../operationDetailsModel";
 import { Bag } from "@paperbits/common";
 
+
 export class OperationDetailsViewModelBinder implements ViewModelBinder<OperationDetailsModel, OperationDetailsViewModel> {
+    constructor(private readonly eventManager: EventManager) { }
+    
     public async modelToViewModel(model: OperationDetailsModel, viewModel?: OperationDetailsViewModel, bindingContext?: Bag<any>): Promise<OperationDetailsViewModel> {
         if (!viewModel) {
             viewModel = new OperationDetailsViewModel();
         }
 
+        viewModel.config(JSON.stringify({ enableConsole: model.enableConsole }));
+
         viewModel["widgetBinding"] = {
             displayName: "Operation: Details",
             model: model,
             editor: "operation-details-editor",
             applyChanges: async (updatedModel: OperationDetailsModel) => {
-                this.modelToViewModel(updatedModel, viewModel, bindingContext);
+                await this.modelToViewModel(updatedModel, viewModel, bindingContext);
+                this.eventManager.dispatchEvent("onContentUpdate");
             }
         };
 

src/components/operations/operation-details/ko/runtime/operation-details.html

@@ -11,8 +11,10 @@
         <h2 class="operation-name" data-bind="click: $component.openConsole">
             <span data-bind="text: operation().displayName"></span>
         </h2>
+        <!-- ko if: $component.enableConsole -->
         <button class="open-console-button" data-bind="click: $component.openConsole">Try it <i class="icon icon-play"></i>
         </button>
+        <!-- /ko -->
     </div>
 
     <!-- ko if: operation().description  -->

src/components/operations/operation-details/ko/runtime/operation-details.ts

@@ -2,7 +2,7 @@ import { Representation } from "./../../../../../models/representation";
 import * as ko from "knockout";
 import template from "./operation-details.html";
 import { Router } from "@paperbits/common/routing";
-import { Component, RuntimeComponent, OnMounted, OnDestroyed } from "@paperbits/common/ko/decorators";
+import { Component, RuntimeComponent, OnMounted, OnDestroyed, Param } from "@paperbits/common/ko/decorators";
 import { Api } from "../../../../../models/api";
 import { Operation } from "../../../../../models/operation";
 import { ApiService } from "../../../../../services/apiService";
@@ -66,6 +66,9 @@ export class OperationDetails {
         });
     }
 
+    @Param()
+    public enableConsole: boolean;
+
     @OnMounted()
     public async initialize(): Promise<void> {
         await this.loadGatewayInfo();

src/components/operations/operation-details/operationDetailsContract.ts

@@ -1,3 +1,8 @@
 import { Contract } from "@paperbits/common";
 
-export interface OperationDetailsContract extends Contract { }
+export interface OperationDetailsContract extends Contract { 
+    /**
+     * Indicates whether "Try" button should appear on the operation details widget.
+     */
+    enableConsole?: boolean;
+}

src/components/operations/operation-details/operationDetailsModel.ts

@@ -1 +1,10 @@
-export class OperationDetailsModel { }
+export class OperationDetailsModel {
+    /**
+     * Indicates whether "Try" button should appear on the operation details widget.
+     */
+    public enableConsole?: boolean;
+
+    constructor() {
+        this.enableConsole = true;
+    }
+}

src/components/operations/operation-details/operationDetailsModelBinder.ts

@@ -13,12 +13,16 @@ export class OperationDetailsModelBinder implements IModelBinder<OperationDetail
     }
 
     public async contractToModel(contract: OperationDetailsContract): Promise<OperationDetailsModel> {
-        return new OperationDetailsModel();
+        const model = new OperationDetailsModel();
+        model.enableConsole = contract.enableConsole === true;
+
+        return model;
     }
 
     public modelToContract(model: OperationDetailsModel): Contract {
         const contract: OperationDetailsContract = {
-            type: "operationDetails"
+            type: "operationDetails",
+            enableConsole: model.enableConsole
         };
 
         return contract;