Download of Scaffolding.json file

CarreraPHP · Jan 10, 2017 · 9346920 · 9346920
1 parent 7100354
commit 9346920
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 10 deletions.
diff --git a/web/src/app/editor/editor.component.html b/web/src/app/editor/editor.component.html
@@ -2,6 +2,7 @@
   <!--<div class="card-header text-right">
     <button class="btn btn-success">Download Scaffolding.json</button>
   </div>-->
+  <a id="jsonDownload" download="scaffolding.json" style="display: none;"></a>
   <ngb-tabset>
     <ngb-tab>
       <template ngbTabTitle>

diff --git a/web/src/app/editor/editor.component.ts b/web/src/app/editor/editor.component.ts
@@ -1,6 +1,8 @@
 import {
+    ViewChild, Renderer,
     Component, OnInit, ChangeDetectionStrategy,
-    Injector, DoCheck, ViewEncapsulation
+    Injector, DoCheck, ViewEncapsulation,
+    AfterViewInit
 } from '@angular/core';
 import { MdDialog, MdDialogRef, MdSnackBar } from '@angular/material';
 
@@ -19,7 +21,12 @@ import * as json5 from 'json5';
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None
 })
-export class EditorComponent implements OnInit, DoCheck {
+export class EditorComponent implements OnInit, DoCheck, AfterViewInit {
+
+    @ViewChild('a#jsonDownload')
+    set downloadAnchor(v:HTMLAnchorElement) {
+        console.log("%c step 4: downloadAnchor", "color:red;font-size:medium;", arguments);
+    }
 
     public code: string = `{
         /*
@@ -90,7 +97,7 @@ export class EditorComponent implements OnInit, DoCheck {
     private codeJSONKeyList: Array<any> = [];
     private codeJSONUpdateTimeout: number = 0;
 
-    constructor(private _dialog: MdDialog) {
+    constructor(private _dialog: MdDialog, private renderer:Renderer) {
         this.cmOptions = {
             lineNumbers: true,
             // mode: {
@@ -514,6 +521,15 @@ export class EditorComponent implements OnInit, DoCheck {
         this.codeKeys = this.getKeyListfromObject(this.codeJSON, 1, "");
     }
 
+    downloadLatestJSON() : void {
+        console.log("%c step 3: Before Anchor click event triggered", "color:red;font-size:medium;");
+        const anchor:HTMLAnchorElement = this.renderer.selectRootElement("a#jsonDownload");
+        const blob:Blob = new Blob([JSON.stringify(this.codeJSON)], { type: "application/json"});
+        const url:string = URL.createObjectURL(blob);
+        anchor.href = url;
+        anchor.click();
+    }
+
     onRecordChange(record: Object) {
         this.record = record;
     }
@@ -531,4 +547,8 @@ export class EditorComponent implements OnInit, DoCheck {
 
     }
 
+    ngAfterViewInit() {
+        console.log("%c step 5: AfterViewInit", "color:red;font-size:medium;", arguments);
+    }
+
 }
diff --git a/web/src/app/header/header.component.html b/web/src/app/header/header.component.html
@@ -4,6 +4,9 @@
       <i class="fa fa-bars"></i>
     </button>
     <a class="title" href="#">Scaffolding-all: Scaffold Documentation</a>
-    <button class="btn btn-success pull-right">Download Scaffolding.json</button>
   </div>
-</nav>
+  <button class="btn btn-success" style="position: absolute; right: 1rem;"
+    (click)="generateJSONFile()">
+    Download Scaffolding.json file
+  </button>
+</nav>
diff --git a/web/src/app/header/header.component.ts b/web/src/app/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-header',
@@ -7,8 +7,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
+  @Output()
+  private generateFile: EventEmitter<any> = new EventEmitter();
+
   constructor() { }
 
+
+  generateJSONFile() : void {
+    console.log("%c step 1: button clicked", "color:red;font-size:medium;");
+    this.generateFile.emit();
+  }
+
   ngOnInit() {
   }
 

diff --git a/web/src/app/viewport/viewport.component.html b/web/src/app/viewport/viewport.component.html
@@ -1,12 +1,11 @@
 <md-sidenav-layout [class.m2app-dark]="isDarkTheme">
-  <app-header></app-header>
+  <app-header (generateFile)="downloadFile(editor)"></app-header>
   <app-sidenav></app-sidenav>
   <div class="app-content">
-    <app-editor></app-editor>
+    <app-editor #editor></app-editor>
   </div>
 </md-sidenav-layout>
 
-
 <span class="app-action" [class.m2app-dark]="isDarkTheme">
   <button md-fab><md-icon>check circle</md-icon></button>
 </span>
diff --git a/web/src/app/viewport/viewport.component.ts b/web/src/app/viewport/viewport.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {MdDialog, MdDialogRef, MdSnackBar} from '@angular/material';
 
 import { DialogContentComponent } from '../shared/dialog-content/dialog-content.component';
+import { EditorComponent } from '../editor/editor.component';
 
 @Component({
   selector: 'app-viewport',
@@ -28,6 +29,11 @@ export class ViewportComponent implements OnInit {
     }, 200);
   }
 
+  downloadFile(editEl:EditorComponent) {
+    console.log("%c step 2: Viewport method triggered", "color:red;font-size:medium;", arguments);
+    editEl.downloadLatestJSON();
+  }
+
   openDialog() {
     let dialogRef = this._dialog.open(DialogContentComponent);
 

diff --git a/web/src/styles.scss b/web/src/styles.scss
@@ -9,7 +9,7 @@ md-sidenav-layout.m2app-dark {
 }
 
 .app-content {
-  padding: .5rem .5rem 0;
+  padding: .5rem 0;
   margin: 3rem 0 0;
 }