disables sidebar for unnecessary pages, e.g. interface, adapter fixes…

… for views and materialized view
polypheny · Apr 7, 2024 · 2a25316 · 2a25316
1 parent 5445237
commit 2a25316
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 21 deletions.
diff --git a/src/app/components/data-view/view/view.component.html b/src/app/components/data-view/view/view.component.html
@@ -15,8 +15,9 @@ <h5 cModalTitle>Create {{ !$result() ? "" : $result().dataModel | titlecase }} V
                         <p>CREATE <span
                                 class="text-primary">{{ $type() == ViewType.MATERIALIZED ? ViewType.MATERIALIZED : '' }}</span>
                             VIEW <span class="text-primary">{{ $viewName() }}</span> AS (<br>{{ $result().query }})
-                            <span *ngIf="$type()=== ViewType.MATERIALIZED">ON STORE {{ $store() }}</span>
-                            <span *ngIf="($freshness() === Freshness.INTERVAL || $freshness() === Freshness.UPDATE) && $type() === ViewType.MATERIALIZED">FRESHNESS <span
+                            <span *ngIf="$type()=== ViewType.MATERIALIZED">ON STORE <span
+                                    class="text-primary">{{ $store()?.name }}</span> </span>
+                            <span *ngIf="($freshness() === Freshness.INTERVAL || $freshness() === Freshness.UPDATE) && $type() === ViewType.MATERIALIZED"> FRESHNESS <span
                                     class="text-primary">{{ $freshness() }} {{ $freshnessMerged() }}</span></span>
                         </p>
                     } @else if ($result().dataModel == DataModel.DOCUMENT) {
@@ -41,19 +42,21 @@ <h5 cModalTitle>Create {{ !$result() ? "" : $result().dataModel | titlecase }} V
                     ViewType
                 </span>
                     <select cSelect #type [ngModel]="$type()" (change)="$type.set(ViewType[type.value])">
-                        <option [value]="ViewType.VIEW" selected>{{ ViewType.VIEW }}</option>
-                        <option [value]="ViewType.MATERIALIZED">{{ ViewType.MATERIALIZED }}</option>
+                        <option [value]="ViewType.VIEW" selected>{{ ViewType.VIEW | titlecase }}</option>
+                        <option [value]="ViewType.MATERIALIZED">{{ ViewType.MATERIALIZED | titlecase }}</option>
                     </select>
                 </c-input-group>
             }
             <c-input-group *ngIf="$type() === ViewType.MATERIALIZED">
                 <span cInputGroupText>
                     Store
                 </span>
-                <select cSelect #store [ngModel]="$store()" (change)="$store.set(getStore(store.value))">
-                    <option *ngFor="let store of $stores()">
-                        {{ store.name }} - {{ store.adapterName }}
-                    </option>
+                <select cSelect #store [ngModel]="$store()?.name" (change)="setStore(store.value)">
+                    @for (store of $stores(); track store.id) {
+                        <option [value]="store.name">
+                            {{ store.name }}
+                        </option>
+                    }
                 </select>
             </c-input-group>
             <c-input-group *ngIf="$type() === ViewType.MATERIALIZED">
@@ -86,9 +89,14 @@ <h5 cModalTitle>Create {{ !$result() ? "" : $result().dataModel | titlecase }} V
                        (input)="$updates.set(+updates.value)">
             </c-input-group>
 
-            <button cButton (click)="createViewCode(true)">
-                Create
-            </button>
+            <c-col class="d-flex justify-content-end">
+                <button cButton color="light" (click)="createViewCode(false)">
+                    Insert Query
+                </button>
+                <button cButton class="ms-3" (click)="createViewCode(true)">
+                    Create View
+                </button>
+            </c-col>
         </div>
     </c-modal-body>
 

diff --git a/src/app/components/data-view/view/view.component.ts b/src/app/components/data-view/view/view.component.ts
@@ -14,8 +14,10 @@ import {AdapterModel} from '../../../views/adapters/adapter.model';
 import {CatalogService} from '../../../services/catalog.service';
 import {ViewInformation} from '../data-view.component';
 import {ToastDuration, ToasterService} from '../../toast-exposer/toaster.service';
-import {DataModel} from '../../../models/ui-request.model';
+import {DataModel, QueryRequest} from '../../../models/ui-request.model';
 import {Result} from '../models/result-set.model';
+import {CrudService} from "../../../services/crud.service";
+import {firstValueFrom} from "rxjs";
 
 @Component({
     selector: 'poly-create-view',
@@ -28,6 +30,7 @@ export class ViewComponent {
 
 
     constructor() {
+
         this.$stores = computed(() => {
             const listener = this._catalog.listener();
             return this._catalog.getStores();
@@ -47,6 +50,7 @@ export class ViewComponent {
 
     private readonly _catalog = inject(CatalogService);
     private readonly _toast = inject(ToasterService);
+    private readonly _crud = inject(CrudService);
 
     public readonly $query: WritableSignal<string> = signal('');
     public readonly $showView: WritableSignal<boolean> = signal(false);
@@ -79,6 +83,7 @@ export class ViewComponent {
     }
 
     createViewCode(doExecute: boolean) {
+
         if (this.checkIfPossible()) {
             const info = new ViewInformation(this.$type(), this.$viewName());
             info.initialQuery = this.$query();
@@ -99,10 +104,30 @@ export class ViewComponent {
 
             this.viewQueryConsumer.emit(info);
 
+            if (doExecute) {
+                this.executeQuery(fullQuery)
+                    .then(() => {
+                        this.$showView.set(false);
+                        this._toast.success((this.$type() === ViewType.MATERIALIZED ? 'Materialized View "' : 'View "') + this.$viewName() + '" has been created successfully.', "Successfully Created View");
+                    }).catch(reason => {
+                        this._toast.error(reason)
+                        this.$showView.set(false);
+                    }
+                )
+                return;
+            } else {
+                this._toast.success('Query for view ' + this.$viewName() + ' has been inserted into editor.', "Query Inserted");
+            }
             this.$showView.set(false);
         }
     }
 
+    executeQuery(fullQuery: string) {
+        const request = new QueryRequest(fullQuery, false, true, this.$result().dataModel == DataModel.RELATIONAL ? 'sql' : 'mql', 'public');
+
+        return firstValueFrom(this._crud.anyQueryBlocking(request));
+    }
+
     private getViewQuery() {
         if (this.$result().dataModel === DataModel.DOCUMENT) {
             const query = this.getDocumentQuery();
@@ -120,8 +145,7 @@ export class ViewComponent {
         if (this.$query().startsWith('\n')) {
             this.$query.set(this.$query().replace('\n', ''));
         }
-        let query = `CREATE MATERIALIZED VIEW ${this.$viewName()} AS\n${this.$query()}\nON STORE ${this.$stores}\nFRESHNESS ${this.$freshness()}`;
-
+        let query = `CREATE MATERIALIZED VIEW ${this.$viewName()} AS\n${this.$query()}\nON STORE ${this.$store().name}\nFRESHNESS ${this.$freshness()}`;
 
         info.stores = this.$store().name;
         info.freshness = this.$freshnessMerged();
@@ -208,4 +232,9 @@ export class ViewComponent {
         }
         return [source.replace('"', ''), pipeline];
     }
+
+    setStore(name: string) {
+        const store = this._catalog.getStores().filter(s => s.name === name)[0];
+        this.$store.set(store);
+    }
 }
diff --git a/src/app/components/left-sidebar/left-sidebar.component.html b/src/app/components/left-sidebar/left-sidebar.component.html
@@ -1,6 +1,5 @@
 <div id="tree-outer-wrapper" class="schema-editing d-flex flex-column h-100 w-100 gap-2 overflow-x-hidden">
     <div class="d-flex">
-
         <c-input-group>
             <button cButton color="light" cInputGroupText id="basic-addon1" *ngIf="isExpandAndCollapseShown()">
                 <span (click)="collapseAll()" id="collapse">
@@ -14,12 +13,15 @@
                 </span>
             </button>
         </c-input-group>
-        <button cButton class="sidebar-toggle text-white border-0 cil-menu" *ngIf="!_sidebar.isVisible()" size="sm"
-                (click)="_sidebar.toggle()"></button>
-        <button cButton class="sidebar-toggle text-white border-0 open cil-x" (click)="_sidebar.toggle()"></button>
+        @if (sidebarAvailable()) {
+            <button cButton class="sidebar-toggle text-white border-0 cil-menu" *ngIf="!_sidebar.isVisible()" size="sm"
+                    (click)="_sidebar.toggle()"></button>
+            <button cButton class="sidebar-toggle text-white border-0 open cil-x" (click)="_sidebar.toggle()"></button>
+        }
     </div>
 
-    <div class="w-100 text-center flex-grow-1 d-flex align-items-center" *ngIf="this._catalog.state() !== CatalogState.UP_TO_DATE">
+    <div class="w-100 text-center flex-grow-1 d-flex align-items-center"
+         *ngIf="this._catalog.state() !== CatalogState.UP_TO_DATE">
         <c-spinner aria-hidden="true" size="xl" class="mx-auto"></c-spinner>
     </div>
     <c-button-group *ngIf="buttons.length > 0" role="group" class="ps-0">
@@ -30,7 +32,7 @@
     </c-button-group>
 
     <span *ngIf="error">
-        {{error}}
+        {{ error }}
     </span>
     <div id="tree-inner-wrapper"
          [classList]="this._catalog.state() === CatalogState.UP_TO_DATE ? 'flex-grow-1 overflow-y-hidden h-100' : 'flex-grow-0' ">

diff --git a/src/app/components/left-sidebar/left-sidebar.component.ts b/src/app/components/left-sidebar/left-sidebar.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, inject, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, computed, inject, OnInit, Signal, ViewChild} from '@angular/core';
 import * as $ from 'jquery';
 import {Router} from '@angular/router';
 import {LeftSidebarService} from './left-sidebar.service';
@@ -20,6 +20,8 @@ export class LeftSidebarComponent implements OnInit, AfterViewInit {
     public readonly _sidebar = inject(LeftSidebarService);
     public readonly _catalog = inject(CatalogService);
 
+    public readonly sidebarAvailable: Signal<boolean>;
+
     constructor() {
         this.router = this._router;
         //this.nodes = nodes;
@@ -61,6 +63,10 @@ export class LeftSidebarComponent implements OnInit, AfterViewInit {
                 this.error = error;
             }
         );
+
+        this.sidebarAvailable = computed(() => {
+            return this.buttons.length > 0 || this.error || this.nodes.length > 0
+        })
     }
 
     static readonly EXPAND_SHOWN_ROUTES: String[] = [