From 10d54efb461dcac04fad655cf5feff816bbb5821 Mon Sep 17 00:00:00 2001
From: Eslam Ashraf <eslamashraf.12342@gmail.com>
Date: Wed, 13 Mar 2024 04:39:21 +0200
Subject: [PATCH] [Edit] Better import for Plan Builder

---
 .../relational-algebra.component.html         | 105 ++++++++++++------
 .../relational-algebra.component.ts           |  72 +++++++++++-
 2 files changed, 137 insertions(+), 40 deletions(-)

diff --git a/src/app/views/querying/relational-algebra/relational-algebra.component.html b/src/app/views/querying/relational-algebra/relational-algebra.component.html
index be0fea36..aa2bdca1 100644
--- a/src/app/views/querying/relational-algebra/relational-algebra.component.html
+++ b/src/app/views/querying/relational-algebra/relational-algebra.component.html
@@ -4,35 +4,29 @@
 
     <div class="col-12" *ngIf="queryAnalysis">
         <app-information-manager [data]="queryAnalysis" [zoom]="_breadcrumb.getMasonryZoom()"
-                                 [hidden]="!showingAnalysis"></app-information-manager>
+            [hidden]="!showingAnalysis"></app-information-manager>
     </div>
 
     <div class="col-12" id="drop" cdkDropList cdkDropListSortingDisabled #dropArea (treeDrop)="treeDrop($event)"
-         [hidden]="showingAnalysis">
+        [hidden]="showingAnalysis">
         <ng-container *ngFor="let n of nodes | keyvalue; trackBy: trackNode">
-            <app-node [node]="n.value"
-                      (autocompleteChanged)="setAutocomplete()"
-                      (focusin)="n.value.zIndex = 2"
-                      (focusout)="setAutocomplete(); n.value.zIndex = 1"
-                      cdkDrag
-                      style="position:absolute;"
-                      [ngStyle]="{'top': n.value.top+'px', 'left':n.value.left+'px', 'z-index': n.value.zIndex}"
-                      [cdkDragFreeDragPosition]="{x: n.value.left, y: n.value.top}"
-                      (cdkDragStarted)="dragStart($event, n.value)"
-                      (cdkDragMoved)="draggingNode($event, n.value)"
-                      (cdkDragEnded)="savePos($event, n.value)"
-                      cdkDragBoundary="#drop">
+            <app-node [node]="n.value" (autocompleteChanged)="setAutocomplete()" (focusin)="n.value.zIndex = 2"
+                (focusout)="setAutocomplete(); n.value.zIndex = 1" cdkDrag style="position:absolute;"
+                [ngStyle]="{'top': n.value.top+'px', 'left':n.value.left+'px', 'z-index': n.value.zIndex}"
+                [cdkDragFreeDragPosition]="{x: n.value.left, y: n.value.top}"
+                (cdkDragStarted)="dragStart($event, n.value)" (cdkDragMoved)="draggingNode($event, n.value)"
+                (cdkDragEnded)="savePos($event, n.value)" cdkDragBoundary="#drop">
                 <!--<div *cdkDragPreview class="node-drag-preview">preview</div>-->
                 <div class="drag-handle card-header" cdkDragHandle>
                     {{n.value.type}}
                     <span>
-            &nbsp;(
-            <span *ngIf="n.value.relAlgSymbol" [innerHTML]="n.value.relAlgSymbol"></span>
-            <span *ngIf="!n.value.relAlgSymbol"><i [ngClass]="n.value.icon"></i></span>
-            )
-          </span>
-                    <span class="del float-right" (click)="deleteNode(n.value)"><i
-                            class="cui-trash"></i></span></div>
+                        &nbsp;(
+                        <span *ngIf="n.value.relAlgSymbol" [innerHTML]="n.value.relAlgSymbol"></span>
+                        <span *ngIf="!n.value.relAlgSymbol"><i [ngClass]="n.value.icon"></i></span>
+                        )
+                    </span>
+                    <span class="del float-right" (click)="deleteNode(n.value)"><i class="cui-trash"></i></span>
+                </div>
             </app-node>
         </ng-container>
 
@@ -40,7 +34,9 @@
         <div id="menu-top-left">
             <div class="btn-group">
                 <a [routerLink]="[]" class="btn btn-light btn-sm" (click)="exportTree()">export</a>
-                <a [routerLink]="[]" class="btn btn-light btn-sm" (click)="importTree()">import</a>
+                <a [routerLink]="[]" class="btn btn-light btn-sm" (click)="openImportModal()">
+                    import
+                </a>
             </div>
             <!-->
             <div class="analyze-query">
@@ -52,19 +48,15 @@
         </div>
 
         <svg width="100%" height="100%">
-            <marker id="arrowhead"
-                    viewBox="0 0 10 10" refX="0" refY="5"
-                    markerUnits="strokeWidth"
-                    markerWidth="5" markerHeight="5"
-                    orient="auto">
-                <path d="M 0,0 l 10,5 l -10,5 z"/>
+            <marker id="arrowhead" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="5"
+                markerHeight="5" orient="auto">
+                <path d="M 0,0 l 10,5 l -10,5 z" />
             </marker>
             <line *ngIf="temporalLine" [attr.x1]="temporalLine.x1" [attr.y1]="temporalLine.y1"
-                  [attr.x2]="temporalLine.x2"
-                  [attr.y2]="temporalLine.y2" marker-end="url(#arrowhead)"></line>
+                [attr.x2]="temporalLine.x2" [attr.y2]="temporalLine.y2" marker-end="url(#arrowhead)"></line>
             <line *ngFor="let conn of connections | keyvalue" [attr.x1]="getX1(conn.value.source)"
-                  [attr.y1]="getY1(conn.value.source)" [attr.x2]="getX2(conn.value.target)"
-                  [attr.y2]="getY2(conn.value.target)" marker-end="url(#arrowhead)"></line>
+                [attr.y1]="getY1(conn.value.source)" [attr.x2]="getX2(conn.value.target)"
+                [attr.y2]="getY2(conn.value.target)" marker-end="url(#arrowhead)"></line>
         </svg>
     </div>
 </div>
@@ -75,10 +67,10 @@
     <div class="card-header ">
         <span>{{resultSet.generatedQuery}}</span>
         <span class="badge pull-right" *ngIf="resultSet.error"
-              [ngClass]="{'badge-secondary': !resultSet.error, 'badge-danger': resultSet.error}">
+            [ngClass]="{'badge-secondary': !resultSet.error, 'badge-danger': resultSet.error}">
             <!--<ng-container *ngIf="!resultSet.error">{{resultSet.affectedRows}}</ng-container>-->
             <ng-container *ngIf="resultSet.error">!</ng-container>
-            </span>
+        </span>
     </div>
 
     <div class="card-body" style="padding-bottom: 0.25rem">
@@ -96,10 +88,51 @@
         <div class="row" *ngIf="resultSet && resultSet.data" [hidden]="showingAnalysis">
             <div class="col-lg-12">
                 <app-data-view [resultSet]="resultSet"
-                               [config]="{create: false, update: false, delete: false, sort: false, search: false, exploring: false}"
-                               (executeView)="createView($event)"></app-data-view>
+                    [config]="{create: false, update: false, delete: false, sort: false, search: false, exploring: false}"
+                    (executeView)="createView($event)"></app-data-view>
             </div>
         </div>
     </div>
 
 </div>
+
+<div bsModal #importModal="bs-modal" class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
+    aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Please paste your plan here or add json file.</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
+                    (click)="closeImportModal()">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form #importModal [formGroup]="importTextForm" (ngSubmit)="importTree()" autocomplete="off" (keydown.enter)="$event.preventDefault()">
+                    <div class="form-group">
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <label for="importText" class="input-group-text">Your Plan</label>
+                            </div>
+                                <textarea class="form-control" id="importText" formControlName="importText"
+                                [ngClass]="validate(importTextForm, 'importText')" rows="5"></textarea>
+                
+                            <div class="invalid-feedback">{{getFeedback()}}</div>
+
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="fileUpload" class="form-label">Upload JSON File</label>
+                        <input type="file" id="fileUpload" accept=".json" (change)="handleFileInput($event)" class="form-control-file">
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"
+                            (click)="closeImportModal()">Close</button>
+                        <button type="submit" class="btn btn-primary">Import</button>
+                    </div>
+                </form>
+            </div>
+
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/views/querying/relational-algebra/relational-algebra.component.ts b/src/app/views/querying/relational-algebra/relational-algebra.component.ts
index 4073420c..2ea45669 100644
--- a/src/app/views/querying/relational-algebra/relational-algebra.component.ts
+++ b/src/app/views/querying/relational-algebra/relational-algebra.component.ts
@@ -30,6 +30,8 @@ import {Subscription} from 'rxjs';
 import {WebSocket} from '../../../services/webSocket';
 import {UtilService} from '../../../services/util.service';
 import {ViewInformation} from '../../../components/data-view/data-view.component';
+import {ModalDirective} from 'ngx-bootstrap/modal';
+import { FormGroup,Validators ,FormControl} from '@angular/forms';
 
 @Component({
     selector: 'app-relational-algebra',
@@ -41,6 +43,10 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
 
     @ViewChild('dropArea', {static: false}) dropArea: ElementRef;
     @HostBinding('class.is-open')
+    @ViewChild('importModal', {static: false}) public importModal: ModalDirective;
+    
+    submitted: boolean = false;
+    importTextForm:FormGroup;
     resultSet: ResultSet;
     private counter = 0;
     public connections = new Map<string, Connection>();
@@ -100,8 +106,19 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
             }
         );
         this.subscriptions.add(sub2);
-    }
-
+        this.importTextForm = new FormGroup({
+            importText: new FormControl('', [Validators.required, this.jsonValidator()])        });
+    }
+    jsonValidator() {
+        return (control: FormControl): {[key: string]: any} | null => {
+          try {
+            JSON.parse(control.value);
+          } catch (error) {
+            return { invalidJson: true };
+          }
+          return null;
+        };
+      }
     ngAfterViewInit() {
         this.initDraggable();
         //to suppress expressionchangedafterithasbeencheckederror
@@ -632,8 +649,32 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
     /**
      * Import a tree in the JSON format
      */
+    validate(form: FormGroup, key) {
+        if(this.submitted){
+            if (form.controls[key].valid) {
+                return 'is-valid';
+            } else {
+                return 'is-invalid';
+            }
+        }
+    }
+    getFeedback() {
+        const errors = this.importTextForm.controls['importText'].errors;        if (errors) {
+            if (errors.required) {
+                return 'missing unique name';
+            } 
+            if (errors.invalidJson) {
+                return 'invalid JSON format';
+              }
+        }
+        return '';
+    }
     importTree() {
-        const input = prompt('Please paste your plan here.');
+        this.submitted = true; 
+        if (!this.importTextForm.valid) {
+            return;
+        }
+        const input = this.importTextForm.controls["importText"].value
         if (input === null || input === '') {
             return;
         }
@@ -657,9 +698,32 @@ export class RelationalAlgebraComponent implements OnInit, AfterViewInit, OnDest
             }
             this.connections = importedConnections;
         }
+        this.importModal.hide()
         this.setAutocomplete();
     }
-
+    openImportModal(){
+        this.submitted=false;
+        this.importModal.show()
+
+    }
+    closeImportModal(){
+        this.importModal.hide()
+
+    }
+    handleFileInput(event: any): void {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const content = reader.result as string;
+          // Assuming you want to populate the textarea with the content of the JSON file
+          this.importTextForm.patchValue({
+            importText: content
+          });
+          // Trigger importTree() method to process the imported JSON
+          this.importTree();
+        };
+        reader.readAsText(file);
+      }
     /**
      * Imports a Query Plan from a file.
      * Not necessary anymore - still left in the code, could be useful some time