1482 web fronted for sql playground sharing (#1523)

* added button and its functionality; Service still needs to be updated

* changed uri display to dialog

* changed service function

* changed service path

* refactoring

---------

Co-authored-by: Jonas Kuche <Zitrone44@users.noreply.github.com>

Author: trKhaled

modules/fbs-core/web/src/app/app.module.ts

@@ -108,6 +108,7 @@ import { HighlightedInputComponent } from "./page-components/sql-playground/sql-
 import "mathlive";
 import "@cortex-js/compute-engine";
 import { MathInputComponent } from "./tool-components/math-input/math-input.component";
+import { SharePlaygroundLinkDialogComponent } from "./dialogs/share-playground-link-dialog/share-playground-link-dialog.component";
 import { FbsModellingComponent } from "./page-components/fbs-modelling/fbs-modelling.component";
 import { I18NextModule } from "angular-i18next";
 import { I18N_PROVIDERS } from "./util/i18n";
@@ -213,6 +214,7 @@ export const httpInterceptorProviders = [
     ExportTasksDialogComponent,
     HighlightedInputComponent,
     MathInputComponent,
+    SharePlaygroundLinkDialogComponent,
     FbsModellingComponent,
     LanguageMenuComponent,
   ],

modules/fbs-core/web/src/app/dialogs/share-playground-link-dialog/share-playground-link-dialog.component.html

@@ -0,0 +1,23 @@
+<div class="container">
+  <div matDialogTitle>Temporäre Datenbank URI</div>
+  <mat-dialog-content style="max-height: 100%; overflow: hidden">
+    <mat-card-content class="content">
+      <mat-label>
+        <h3>{{ data.message }}</h3>
+      </mat-label>
+      <div class="uri">
+        <mat-label
+          ><i>{{ data.uri }}</i></mat-label
+        >
+        <button mat-icon-button (click)="copyURI()" matTooltip="URI kopieren">
+          <mat-icon>content_copy</mat-icon>
+        </button>
+      </div>
+    </mat-card-content>
+  </mat-dialog-content>
+  <mat-dialog-actions class="actions">
+    <button mat-flat-button color="warn" (click)="closeDialog()">
+      Abbrechen
+    </button>
+  </mat-dialog-actions>
+</div>

modules/fbs-core/web/src/app/dialogs/share-playground-link-dialog/share-playground-link-dialog.component.scss

@@ -0,0 +1,25 @@
+.container {
+  height: 100%;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  button {
+    margin-left: 16px;
+  }
+}
+
+.content {
+  display: block;
+  margin-top: 10px;
+}
+
+.uri{
+  margin-top: 30px;
+  button {
+    margin-left: 20px;
+  }
+}
+
+

modules/fbs-core/web/src/app/dialogs/share-playground-link-dialog/share-playground-link-dialog.component.ts

@@ -0,0 +1,38 @@
+import { Component, Inject } from "@angular/core";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+
+@Component({
+  selector: "app-db-uri-link-dialog",
+  templateUrl: "./share-playground-link-dialog.component.html",
+  styleUrls: ["./share-playground-link-dialog.component.scss"],
+})
+export class SharePlaygroundLinkDialogComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      message: string;
+      uri: string;
+    },
+    public dialogRef: MatDialogRef<SharePlaygroundLinkDialogComponent>,
+    private snackbar: MatSnackBar
+  ) {}
+
+  copyURI() {
+    navigator.clipboard.writeText(this.data.uri).then(
+      () => {
+        this.snackbar.open("URI erfolgreich kopiert!", "Ok", {
+          duration: 3000,
+        });
+      },
+      (error) => {
+        console.error("URI konnte nicht kopiert werden: ", error);
+        this.snackbar.dismiss();
+      }
+    );
+  }
+
+  closeDialog() {
+    this.dialogRef.close({ success: false });
+  }
+}

modules/fbs-core/web/src/app/page-components/sql-playground/db-control-panel/db-control-db-overview/db-control-db-overview.component.html

@@ -57,5 +57,14 @@
           | i18nextEager
       }}
     </button>
+
+    <button
+      mat-raised-button
+      class="url-btn"
+      (click)="getTempURI()"
+      [disabled]="collaborativeMode"
+    >
+      Verbindungs-URL anfordern
+    </button>
   </div>
 </div>

modules/fbs-core/web/src/app/page-components/sql-playground/db-control-panel/db-control-db-overview/db-control-db-overview.component.scss

@@ -31,6 +31,12 @@ mat-form-field {
   grid-column: 1 / 3;
 }
 
+.url-btn {
+  color: white;
+  background-color: rgba(25, 105, 243, 0.792);
+  grid-column: 1 / 3;
+}
+
 button {
   height: 30px;
   display: flex;

modules/fbs-core/web/src/app/page-components/sql-playground/db-control-panel/db-control-db-overview/db-control-db-overview.component.ts

@@ -8,6 +8,7 @@ import { JWTToken } from "src/app/model/JWTToken";
 import { TextConfirmDialogComponent } from "../../../../dialogs/text-confirm-dialog/text-confirm-dialog.component";
 import { NewDbDialogComponent } from "../../../../dialogs/new-db-dialog/new-db-dialog.component";
 import { MatDialog } from "@angular/material/dialog";
+import { SharePlaygroundLinkDialogComponent } from "src/app/dialogs/share-playground-link-dialog/share-playground-link-dialog.component";
 
 @Component({
   selector: "app-db-control-db-overview",
@@ -31,6 +32,7 @@ export class DbControlDbOverviewComponent implements OnInit {
   selectedDb: number = 0;
   token: JWTToken = this.authService.getToken();
   pending: boolean = false;
+  dbURI: string = "";
 
   ngOnInit(): void {
     this.sqlPlaygroundService.getDatabases(this.token.id).subscribe(
@@ -180,6 +182,22 @@ export class DbControlDbOverviewComponent implements OnInit {
     return dialogRef.afterClosed();
   }
 
+  getTempURI() {
+    const selectedDb = this.dbs.find((db) => db.id == this.selectedDb);
+    this.sqlPlaygroundService
+      .getSharePlaygroundURI(this.token.id, selectedDb.id)
+      .subscribe((uri) => (this.dbURI = uri));
+    this.dialog.open(SharePlaygroundLinkDialogComponent, {
+      height: "auto",
+      width: "50%",
+      autoFocus: false,
+      data: {
+        message: `Der URI-Link zu deiner Datenbank \" ${selectedDb.name} \" ist nur für 24 Stunden verfügbar!\n`,
+        uri: this.dbURI,
+      },
+    });
+  }
+
   addDb() {
     this.dialog
       .open(NewDbDialogComponent, {

modules/fbs-core/web/src/app/page-components/sql-playground/sql-playground.component.scss

@@ -31,16 +31,16 @@
 .db-grid {
   width: 100%;
   grid-row-start: 1;
-  grid-row-end: 4;
+  grid-row-end: 5;
   grid-column-start: 8;
   grid-column-end: 11;
   padding: none;
+  margin-bottom: 35px;
 }
 
 .db-schema-grid {
   width: 100%;
-  margin-top: 20px;
-  grid-row-start: 4;
+  grid-row-start: 5;
   grid-row-end: 9;
   grid-column-start: 8;
   grid-column-end: 11;

modules/fbs-core/web/src/app/service/sql-playground.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs";
+import { Observable, of } from "rxjs";
 import { Constraint } from "../model/sql_playground/Constraint";
 import { Database } from "../model/sql_playground/Database";
 import { Routine } from "../model/sql_playground/Routine";
@@ -9,6 +9,7 @@ import { SQLResponse } from "../model/sql_playground/SQLResponse";
 import { Table } from "../model/sql_playground/Table";
 import { Trigger } from "../model/sql_playground/Trigger";
 import { View } from "../model/sql_playground/View";
+import { map } from "rxjs/operators";
 
 @Injectable({
   providedIn: "root",
@@ -79,6 +80,17 @@ export class SqlPlaygroundService {
     );
   }
 
+  /**
+   * Get Database Temp URI
+   * @return the temporary database URI
+   */
+  getSharePlaygroundURI(uid: number, dbId: number): Observable<string> {
+    return this.http.post<any>(
+      `/api/v2/playground/${uid}/databases/${dbId}/dump`,
+      {}
+    );
+  }
+
   /**
    * get the result of a query
    * @param uid User id