From 8e10af4c96a265919138bbb9212fda6a409e70bd Mon Sep 17 00:00:00 2001
From: nurjinn jafar <nurjin.jafar@nordeck.net>
Date: Fri, 4 Dec 2020 17:47:45 +0100
Subject: [PATCH] created new config component for whiteboard in admin area
 with editable board url

---
 src/integrations/Widget.ts                    |  4 +++
 .../whiteboard/whiteboard.component.html      | 22 ++++++++++++
 .../whiteboard/whiteboard.component.scss      |  0
 .../whiteboard/whiteboard.component.ts        | 35 +++++++++++++++++++
 web/app/admin/widgets/widgets.component.ts    |  4 ++-
 web/app/app.module.ts                         |  5 ++-
 6 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 web/app/admin/widgets/whiteboard/whiteboard.component.html
 create mode 100644 web/app/admin/widgets/whiteboard/whiteboard.component.scss
 create mode 100644 web/app/admin/widgets/whiteboard/whiteboard.component.ts

diff --git a/src/integrations/Widget.ts b/src/integrations/Widget.ts
index e29da8c..c348834 100644
--- a/src/integrations/Widget.ts
+++ b/src/integrations/Widget.ts
@@ -5,6 +5,10 @@ export interface EtherpadWidgetOptions {
     defaultUrl: string;
 }
 
+export interface WhiteboardWidgetOptions {
+    defaultUrl: string;
+}
+
 export interface JitsiWidgetOptions {
     jitsiDomain: string;
     scriptUrl: string;
diff --git a/web/app/admin/widgets/whiteboard/whiteboard.component.html b/web/app/admin/widgets/whiteboard/whiteboard.component.html
new file mode 100644
index 0000000..68fc80c
--- /dev/null
+++ b/web/app/admin/widgets/whiteboard/whiteboard.component.html
@@ -0,0 +1,22 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>Whiteboard Widget Configuration</h4>
+    </div>
+    <div class="dialog-content">
+        <label class="label-block">
+            Default Board URL Template
+            <span class="text-muted ">$boardName and $roomId will be replaced during creation to help create a unique pad URL.</span>
+            <input type="text" class="form-control"
+                   placeholder="https://cloud13.de/testwhiteboard/?whiteboardid=$roomId_$boardName"
+                   [(ngModel)]="widget.options.defaultUrl" [disabled]="isUpdating"/>
+        </label>
+    </div>
+    <div class="dialog-footer">
+        <button type="button" (click)="save()" title="save" class="btn btn-primary btn-sm">
+            <i class="far fa-save"></i> Save
+        </button>
+        <button type="button" (click)="dialog.close()" title="close" class="btn btn-secondary btn-sm">
+            <i class="far fa-times-circle"></i> Cancel
+        </button>
+    </div>
+</div>
diff --git a/web/app/admin/widgets/whiteboard/whiteboard.component.scss b/web/app/admin/widgets/whiteboard/whiteboard.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/web/app/admin/widgets/whiteboard/whiteboard.component.ts b/web/app/admin/widgets/whiteboard/whiteboard.component.ts
new file mode 100644
index 0000000..6b9c01b
--- /dev/null
+++ b/web/app/admin/widgets/whiteboard/whiteboard.component.ts
@@ -0,0 +1,35 @@
+import { Component } from "@angular/core";
+import { FE_WhiteBoardWidget } from "../../../shared/models/integration";
+import { ToasterService } from "angular2-toaster";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { WidgetConfigDialogContext } from "../widgets.component";
+import { AdminIntegrationsApiService } from "../../../shared/services/admin/admin-integrations-api.service";
+
+@Component({
+    templateUrl: "./whiteboard.component.html",
+    styleUrls: ["./whiteboard.component.scss", "../config-dialog.scss"],
+})
+export class AdminWidgetWhiteboardConfigComponent implements ModalComponent<WidgetConfigDialogContext> {
+
+    public isUpdating = false;
+    public widget: FE_WhiteBoardWidget;
+    private originalWidget: FE_WhiteBoardWidget;
+
+    constructor(public dialog: DialogRef<WidgetConfigDialogContext>, private adminIntegrationsApi: AdminIntegrationsApiService, private toaster: ToasterService) {
+        this.originalWidget = dialog.context.widget;
+        this.widget = JSON.parse(JSON.stringify(this.originalWidget));
+    }
+
+    public save() {
+        this.isUpdating = true;
+        this.adminIntegrationsApi.setIntegrationOptions(this.widget.category, this.widget.type, this.widget.options).then(() => {
+            this.originalWidget.options = this.widget.options;
+            this.toaster.pop("success", "Widget updated");
+            this.dialog.close();
+        }).catch(err => {
+            this.isUpdating = false;
+            console.error(err);
+            this.toaster.pop("error", "Error updating widget");
+        });
+    }
+}
diff --git a/web/app/admin/widgets/widgets.component.ts b/web/app/admin/widgets/widgets.component.ts
index 5debd8e..6aab37c 100644
--- a/web/app/admin/widgets/widgets.component.ts
+++ b/web/app/admin/widgets/widgets.component.ts
@@ -6,6 +6,7 @@ import { Modal, overlayConfigFactory } from "ngx-modialog";
 import { BSModalContext } from "ngx-modialog/plugins/bootstrap";
 import { AdminWidgetJitsiConfigComponent } from "./jitsi/jitsi.component";
 import { AdminIntegrationsApiService } from "../../shared/services/admin/admin-integrations-api.service";
+import { AdminWidgetWhiteboardConfigComponent } from "./whiteboard/whiteboard.component";
 
 export class WidgetConfigDialogContext extends BSModalContext {
     public widget: FE_Widget;
@@ -50,6 +51,7 @@ export class AdminWidgetsComponent {
 
         if (widget.type === "etherpad") component = AdminWidgetEtherpadConfigComponent;
         if (widget.type === "jitsi") component = AdminWidgetJitsiConfigComponent;
+        if (widget.type === "whiteboard") component = AdminWidgetWhiteboardConfigComponent;
 
         if (!component) {
             console.error("No known dialog component for " + widget.type);
@@ -67,6 +69,6 @@ export class AdminWidgetsComponent {
 
     public hasConfiguration(widget: FE_Widget) {
         // Currently only Jitsi and Etherpad have additional configuration
-        return widget.type === "jitsi" || widget.type === "etherpad";
+        return widget.type === "jitsi" || widget.type === "etherpad" || widget.type === "whiteboard";
     }
 }
diff --git a/web/app/app.module.ts b/web/app/app.module.ts
index 7263068..7eb6e69 100644
--- a/web/app/app.module.ts
+++ b/web/app/app.module.ts
@@ -119,6 +119,7 @@ import { AdminNewEditTermsComponent } from "./admin/terms/new-edit/new-edit.comp
 import { AdminTermsNewEditPublishDialogComponent } from "./admin/terms/new-edit/publish/publish.component";
 import { TermsWidgetWrapperComponent } from "./widget-wrappers/terms/terms.component";
 import { WhiteboardWidgetComponent } from "./configs/widget/whiteboard/whiteboard.widget.component";
+import { AdminWidgetWhiteboardConfigComponent } from "./admin/widgets/whiteboard/whiteboard.component";
 
 @NgModule({
     imports: [
@@ -216,7 +217,8 @@ import { WhiteboardWidgetComponent } from "./configs/widget/whiteboard/whiteboar
         AdminNewEditTermsComponent,
         AdminTermsNewEditPublishDialogComponent,
         TermsWidgetWrapperComponent,
-        WhiteboardWidgetComponent
+        WhiteboardWidgetComponent,
+        AdminWidgetWhiteboardConfigComponent
 
         // Vendor
     ],
@@ -273,6 +275,7 @@ import { WhiteboardWidgetComponent } from "./configs/widget/whiteboard/whiteboar
         AdminSlackBridgeManageSelfhostedComponent,
         AdminLogoutConfirmationDialogComponent,
         AdminTermsNewEditPublishDialogComponent,
+        AdminWidgetWhiteboardConfigComponent
     ]
 })
 export class AppModule {