Kw/widget contribution/document details (#601)

community/widgets/document-details/constants.ts

@@ -0,0 +1,7 @@
+export const widgetName = "document-details";
+export const widgetDisplayName = "Document details";
+export const widgetCategory = "Community";
+export const widgetSelector = "document-details";
+export const widgetRuntimeSelector = "document-details-runtime";
+export const widgetEditorSelector = "document-details-editor";
+export const defaultFileName = "sample_document.html";

community/widgets/document-details/documentDetails.design.module.ts

@@ -0,0 +1,16 @@
+import { IInjectorModule, IInjector } from "@paperbits/common/injection";
+import { DocumentDetailsEditor } from "./ko/documentDetailsEditorViewModel";
+import { DocumentDetailsHandlers } from "./documentDetailsHandlers";
+import { DocumentDetailsViewModel, DocumentDetailsViewModelBinder } from "./ko";
+import { DocumentDetailsModelBinder } from "./documentDetailsModelBinder";
+
+
+export class DocumentDetailsDesignModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bind("documentDetails", DocumentDetailsViewModel);
+        injector.bind("documentDetailsEditor", DocumentDetailsEditor);
+        injector.bindToCollection("modelBinders", DocumentDetailsModelBinder);
+        injector.bindToCollection("viewModelBinders", DocumentDetailsViewModelBinder);
+        injector.bindToCollection("widgetHandlers", DocumentDetailsHandlers);
+    }
+}

community/widgets/document-details/documentDetails.publish.module.ts

@@ -0,0 +1,13 @@
+import { IInjectorModule, IInjector } from "@paperbits/common/injection";
+import { DocumentDetailsViewModel } from "./ko/documentDetailsViewModel";
+import { DocumentDetailsModelBinder } from "./documentDetailsModelBinder";
+import { DocumentDetailsViewModelBinder } from "./ko/documentDetailsViewModelBinder";
+
+
+export class DocumentDetailsPublishModule implements IInjectorModule {
+    public register(injector: IInjector): void {        
+        injector.bind("documentDetails", DocumentDetailsViewModel);
+        injector.bindToCollection("modelBinders", DocumentDetailsModelBinder);
+        injector.bindToCollection("viewModelBinders", DocumentDetailsViewModelBinder);
+    }
+}

community/widgets/document-details/documentDetails.runtime.module.ts

@@ -0,0 +1,9 @@
+import { IInjector, IInjectorModule } from "@paperbits/common/injection";
+import { DocumentDetailsRuntime } from "./ko/runtime/document-details-runtime";
+
+
+export class DocumentDetailsRuntimeModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bind("documentDetailsRuntime", DocumentDetailsRuntime);
+    }
+}

community/widgets/document-details/documentDetailsContract.ts

@@ -0,0 +1,5 @@
+import { Contract } from "@paperbits/common";
+
+export interface DocumentDetailsContract extends Contract {
+    fileName: string;
+}

community/widgets/document-details/documentDetailsHandlers.ts

@@ -0,0 +1,22 @@
+import { IWidgetOrder, IWidgetHandler } from "@paperbits/common/editing";
+import { DocumentDetailsModel } from "./documentDetailsModel";
+import { widgetName, widgetDisplayName, widgetCategory,defaultFileName } from "./constants";
+
+
+export class DocumentDetailsHandlers implements IWidgetHandler {
+    public async getWidgetOrder(): Promise<IWidgetOrder> {
+        const widgetOrder: IWidgetOrder = {
+            name: widgetName,
+            displayName: widgetDisplayName,
+            category: widgetCategory,
+            iconClass: "paperbits-puzzle-10",
+            createModel: async () => {
+                const model = new DocumentDetailsModel();
+                model.fileName = defaultFileName;
+                return model;
+            }
+        };
+
+        return widgetOrder;
+    }
+}

community/widgets/document-details/documentDetailsModel.ts

@@ -0,0 +1,3 @@
+export class DocumentDetailsModel { 
+    public fileName: string;
+}

community/widgets/document-details/documentDetailsModelBinder.ts

@@ -0,0 +1,31 @@
+import { IModelBinder } from "@paperbits/common/editing";
+import { DocumentDetailsModel } from "./documentDetailsModel";
+import { Contract } from "@paperbits/common";
+import { widgetName, defaultFileName } from "./constants";
+import { DocumentDetailsContract } from "./documentDetailsContract";
+
+
+export class DocumentDetailsModelBinder implements IModelBinder<DocumentDetailsModel> {
+    public canHandleContract(contract: Contract): boolean {
+        return contract.type === widgetName;
+    }
+
+    public canHandleModel(model: DocumentDetailsModel): boolean {
+        return model instanceof DocumentDetailsModel;
+    }
+
+    public async contractToModel(contract: DocumentDetailsContract): Promise<DocumentDetailsModel> {
+        const model = new DocumentDetailsModel();
+        model.fileName = contract.fileName || defaultFileName;
+        return model;
+    }
+
+    public modelToContract(model: DocumentDetailsModel): Contract {
+        const contract: DocumentDetailsContract = {
+            type: widgetName,
+            fileName: model.fileName
+        };
+
+        return contract;
+    }
+}

community/widgets/document-details/index.ts

@@ -0,0 +1,4 @@
+export * from "./constants";
+export * from "./documentDetailsHandlers";
+export * from "./documentDetailsModel";
+export * from "./documentDetailsModelBinder";

community/widgets/document-details/ko/documentDetails.html

@@ -0,0 +1,3 @@
+<div class="w-100">
+    <document-details-runtime data-bind="attr: { params: runtimeConfig }"></document-details-runtime>
+<div>

community/widgets/document-details/ko/documentDetailsEditorView.html

@@ -0,0 +1,10 @@
+<fieldset class="form" data-bind="scrollable: true">
+    <div class="form-group">
+        <label class="form-label">
+            File Name
+            <button class="btn btn-info" type="button" title="Help"
+                data-bind="tooltipToggle: 'Name of the file'"></button>
+        </label>
+        <input type="string" class="form-control" data-bind="textInput: fileName" />
+    </div>
+</fieldset>

community/widgets/document-details/ko/documentDetailsEditorViewModel.ts

@@ -0,0 +1,36 @@
+import * as ko from "knockout";
+import template from "./documentDetailsEditorView.html";
+import { Component, OnMounted, Param, Event } from "@paperbits/common/ko/decorators";
+import { WidgetEditor } from "@paperbits/common/widgets";
+import { DocumentDetailsModel } from "../documentDetailsModel";
+import { widgetEditorSelector } from "..";
+
+
+@Component({
+    selector: widgetEditorSelector,
+    template: template
+})
+export class DocumentDetailsEditor implements WidgetEditor<DocumentDetailsModel> {
+    public readonly fileName: ko.Observable<string>;
+
+    constructor() {
+        this.fileName = ko.observable();
+    }
+
+    @Param()
+    public model: DocumentDetailsModel;
+
+    @Event()
+    public onChange: (model: DocumentDetailsModel) => void;
+
+    @OnMounted()
+    public async initialize(): Promise<void> {
+        this.fileName(this.model.fileName);
+        this.fileName.subscribe(this.applyChanges);
+    }
+
+    private applyChanges(): void {
+        this.model.fileName = this.fileName();
+        this.onChange(this.model);
+    }
+}

community/widgets/document-details/ko/documentDetailsViewModel.ts

@@ -0,0 +1,17 @@
+import * as ko from "knockout";
+import template from "./documentDetails.html";
+import { Component } from "@paperbits/common/ko/decorators";
+import { widgetSelector } from "../constants";
+
+
+@Component({
+    selector: widgetSelector,
+    template: template
+})
+export class DocumentDetailsViewModel {
+    public readonly runtimeConfig: ko.Observable<string>;
+
+    constructor() {
+        this.runtimeConfig = ko.observable();
+    }
+}

community/widgets/document-details/ko/documentDetailsViewModelBinder.ts

@@ -0,0 +1,43 @@
+import { Bag } from "@paperbits/common";
+import { EventManager } from "@paperbits/common/events";
+import { IWidgetBinding } from "@paperbits/common/editing";
+import { ViewModelBinder } from "@paperbits/common/widgets";
+import { DocumentDetailsViewModel } from "./documentDetailsViewModel";
+import { widgetName, widgetDisplayName, widgetEditorSelector } from "../constants";
+import { DocumentDetailsModel } from "../documentDetailsModel";
+
+
+export class DocumentDetailsViewModelBinder implements ViewModelBinder<DocumentDetailsModel, DocumentDetailsViewModel>  {
+    constructor(private readonly eventManager: EventManager) { }
+
+    public async updateViewModel(model: DocumentDetailsModel, viewModel: DocumentDetailsViewModel): Promise<void> {
+        viewModel.runtimeConfig(JSON.stringify({ fileName: model.fileName }));
+    }
+
+    public async modelToViewModel(model: DocumentDetailsModel, viewModel?: DocumentDetailsViewModel, bindingContext?: Bag<any>): Promise<DocumentDetailsViewModel> {
+        if (!viewModel) {
+            viewModel = new DocumentDetailsViewModel();
+
+            const binding: IWidgetBinding<DocumentDetailsModel> = {
+                name: widgetName,
+                displayName: widgetDisplayName,
+                readonly: bindingContext?.readonly,
+                model: model,
+                editor: widgetEditorSelector,
+                applyChanges: async () => {
+                    await this.updateViewModel(model, viewModel);
+                    this.eventManager.dispatchEvent("onContentUpdate");
+                }
+            };
+            viewModel["widgetBinding"] = binding;
+        }
+
+        this.updateViewModel(model, viewModel);
+
+        return viewModel;
+    }
+
+    public canHandleModel(model: DocumentDetailsModel): boolean {
+        return model instanceof DocumentDetailsModel;
+    }
+}

community/widgets/document-details/ko/index.ts

@@ -0,0 +1,3 @@
+export * from "./documentDetailsEditorViewModel";
+export * from "./documentDetailsViewModel";
+export * from "./documentDetailsViewModelBinder";

community/widgets/document-details/ko/runtime/document-details-runtime.html

@@ -0,0 +1,2 @@
+<h1><span data-bind="text: api"></span></h1>
+<p data-bind="html: sessionDescription"></p>

community/widgets/document-details/ko/runtime/document-details-runtime.ts

@@ -0,0 +1,48 @@
+
+import * as ko from "knockout";
+import template from "./document-details-runtime.html";
+import { HttpClient, HttpRequest } from "@paperbits/common/http";
+import { Component, RuntimeComponent, Param, OnMounted, OnDestroyed } from "@paperbits/common/ko/decorators";
+import { widgetRuntimeSelector } from "../..";
+import { RouteHelper } from "../../../../../src/routing/routeHelper";
+
+const documentApiUrl = "<URL of the document stored in the storage account>";
+
+@RuntimeComponent({
+    selector: widgetRuntimeSelector
+})
+@Component({
+    selector: widgetRuntimeSelector,
+    template: template
+})
+export class DocumentDetailsRuntime {
+    public readonly sessionDescription: ko.Observable<string>;
+
+    constructor(private readonly httpClient: HttpClient, private readonly routeHelper: RouteHelper) {
+        this.fileName = ko.observable();
+        this.api = ko.observable();
+        this.sessionDescription = ko.observable();
+    }
+
+    @Param()
+    public readonly fileName: ko.Observable<string>;
+    public readonly api: ko.Observable<string>;
+
+    @OnMounted()
+    public async initialize(): Promise<void> {
+        //const fileName = this.fileName();
+        const fileName = this.routeHelper.getFileName(); // This is how you get filename from URL hash part.
+        const api = this.routeHelper.getApiName();
+
+        const request: HttpRequest = {
+            url: `${documentApiUrl}/${fileName}`,
+            method: "GET"
+        };
+
+        const response = await this.httpClient.send<string>(request);
+        const sessionDescription = response.toText();
+
+        this.sessionDescription(sessionDescription);
+        this.api(api);
+    }
+}