Permalink
Browse files

[1.2.0] upload json

  • Loading branch information...
dog-ears committed Feb 27, 2018
1 parent 6f57386 commit 8bbbfea2d9b493b12e951cbce644e3304008d91f
@@ -22,6 +22,7 @@ import { ModalModelComponent } from './modal-model/modal-model.component';
import { ModalSchemaComponent } from './modal-schema/modal-schema.component';
import { ModalRelationComponent } from './modal-relation/modal-relation.component';
import { ModalDownloadComponent } from './modal-download/modal-download.component';
import { ModalUploadComponent } from './modal-upload/modal-upload.component';
@NgModule({
declarations: [
@@ -34,6 +35,7 @@ import { ModalDownloadComponent } from './modal-download/modal-download.componen
ModalSchemaComponent,
ModalRelationComponent,
ModalDownloadComponent,
ModalUploadComponent,
],
imports: [
BrowserModule,
@@ -53,6 +55,7 @@ import { ModalDownloadComponent } from './modal-download/modal-download.componen
ModalSchemaComponent,
ModalRelationComponent,
ModalDownloadComponent,
ModalUploadComponent,
]
})
export class AppModule { }
@@ -12,11 +12,7 @@ export class Data {
private _next_model_id: number;
constructor() {
this.app_type = 'web';
this.use_laravel_auth = false;
this.models = [];
this.tool = 'ER-DIAGRAM-TOOL';
this._next_model_id = 1;
this.clearData();
}
public getNewModelId(): number{
@@ -25,20 +21,67 @@ export class Data {
}
public getModelById(model_id:number): Model{
return this.models.filter( (v,i) => v.id===model_id )[0];
var filtered_models = this.models.filter( (v,i) => v.id===model_id );
if(filtered_models.length > 0){
return filtered_models[0];
}else{
return null;
}
}
public getModelByElementH2Id(model_element_h2_id:string): Model{
return this.models.filter( (v,i) => v.getElementH2Id()===model_element_h2_id )[0];
var filtered_models = this.models.filter( (v,i) => v.getElementH2Id()===model_element_h2_id );
if(filtered_models.length > 0){
return filtered_models[0];
}else{
return null;
}
}
public getModelByName(model_name:string): Model{
return this.models.filter( (v,i) => v.name===model_name )[0];
var filtered_models = this.models.filter( (v,i) => v.name===model_name );
if(filtered_models.length > 0){
return filtered_models[0];
}else{
return null;
}
}
public getSchemaByElementId( schema_element_id:string ):Schema{
console.log('Data.getSchemaByElementId() is called!');
var ids = schema_element_id.replace('model','').split('-schema');
return this.getModelById( Number(ids[0]) ).getSchemaById( Number(ids[1]) );
var filtered_model = this.getModelById(Number(ids[0]));
if( filtered_model ){
var filtered_schema = filtered_model.getSchemaById( Number(ids[1]));
if( filtered_schema ){
return filtered_schema;
}
}
return null;
}
public clearData():void{
console.log('Data.clearData() is called!');
this.app_type = 'web';
this.use_laravel_auth = false;
this.models = [];
this.tool = 'ER-DIAGRAM-TOOL';
this._next_model_id = 1;
}
public loadData(data):void{
console.log('Data.loadData() is called!');
this.app_type = data.app_type;
this.use_laravel_auth = data.use_laravel_auth;
this.models = [];
for(let i=0; i<data.models.length; i++){
var model = new Model(data.models[i]);
this.models.push(model);
}
this.tool = data.tool;
this._next_model_id = data._next_model_id;
}
}
@@ -14,16 +14,34 @@ export class Model {
private _next_schema_id: number;
constructor() {
this.id = 0;
this.name = '';
this.display_name = '';
this.use_soft_delete = false;
this.schemas = [];
this.is_pivot = false;
this.pos_x = 0;
this.pos_y = 0;
this._next_schema_id = 1;
constructor(model_data=null) {
if(model_data){
this.id = model_data.id;
this.name = model_data.name;
this.display_name = model_data.display_name;
this.use_soft_delete = model_data.use_soft_delete;
this.schemas = [];
for(let i=0; i<model_data.schemas.length; i++){
let schema = new Schema(model_data.schemas[i]);
this.schemas.push(schema);
}
this.is_pivot = model_data.is_pivot;
this.pos_x = model_data.pos_x;
this.pos_y = model_data.pos_y;
this._next_schema_id = model_data._next_schema_id;
}else{
this.id = 0;
this.name = '';
this.display_name = '';
this.use_soft_delete = false;
this.schemas = [];
this.is_pivot = false;
this.pos_x = 0;
this.pos_y = 0;
this._next_schema_id = 1;
}
}
public getNewSchemaId(): number{
@@ -40,6 +58,11 @@ export class Model {
}
public getSchemaById(schema_id:number): Schema{
return this.schemas.filter( (v,i)=> v.id===schema_id )[0];
var schemas_filterded = this.schemas.filter( (v,i)=> v.id===schema_id );
if(schemas_filterded.length > 0){
return schemas_filterded[0];
}else{
return null;
}
}
}
@@ -14,20 +14,36 @@ export class Schema {
public belongsto_column: string;
public parent_id: number;
constructor() {
this.id = 0;
this.name = '';
this.display_name = '';
this.type = '';
this.input_type = '';
this.varidate = '';
this.faker_type = '';
this.nullable = false;
this.show_in_list = true;
this.show_in_detail = true;
this.belongsto = '';
this.belongsto_column = '';
this.parent_id = 0;
constructor(schema_data=null) {
if(schema_data){
this.id = schema_data.id;
this.name = schema_data.name;
this.display_name = schema_data.display_name;
this.type = schema_data.type;
this.input_type = schema_data.input_type;
this.varidate = schema_data.varidate;
this.faker_type = schema_data.faker_type;
this.nullable = schema_data.nullable;
this.show_in_list = schema_data.show_in_list;
this.show_in_detail = schema_data.show_in_detail;
this.belongsto = schema_data.belongsto;
this.belongsto_column = schema_data.belongsto_column;
this.parent_id = schema_data.parent_id;
}else{
this.id = 0;
this.name = '';
this.display_name = '';
this.type = '';
this.input_type = '';
this.varidate = '';
this.faker_type = '';
this.nullable = false;
this.show_in_list = true;
this.show_in_detail = true;
this.belongsto = '';
this.belongsto_column = '';
this.parent_id = 0;
}
}
public getElementId():string{
@@ -5,6 +5,6 @@ <h5 class="modal-title">Download JSON</h5>
</button>
</div>
<div class="modal-footer">
<a [href]="uri" class="btn btn-primary" download="crud-d-scaffold.json">Download JSON</a>
<a [href]="uri" class="btn btn-primary" download="crud-d-scaffold.json" (click)="bsModalRef.hide()">Download JSON</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="bsModalRef.hide()">Close</button>
</div>
@@ -0,0 +1,13 @@
<div class="modal-header">
<h5 class="modal-title">Upload JSON</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<input type="file" (change)="onFileSelected($event)" accept=".json">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="uploadJson()" [disabled]="!_flg_file_loaded">Upload JSON</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="bsModalRef.hide()">Close</button>
</div>
@@ -0,0 +1,54 @@
// core
import { Component } from '@angular/core';
// ngx-bootstrap
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
// service
import { DataService } from '../service/data.service';
import { JsPlumbService } from '../service/jsPlumb.service';
@Component({
selector: 'modal',
templateUrl: './modal-upload.component.html'
})
export class ModalUploadComponent {
private _flg_file_selected: boolean;
private _flg_file_loaded: boolean;
private _data;
constructor( private bsModalRef: BsModalRef, private dataService: DataService, private jsPlumbService: JsPlumbService ) {
this._flg_file_selected = false;
this._flg_file_loaded = false;
}
private onFileSelected(event){
console.log('ModalUploadComponent.onFileSelected() is called!');
if(event.target.files.length <= 0){
this._flg_file_selected = false;
this._flg_file_loaded = false;
return false;
}
this._flg_file_selected = true;
let reader = new FileReader();
reader.readAsText(event.target.files[0]);
reader.addEventListener('load',()=>{
console.log( JSON.parse(reader.result) );
this._flg_file_loaded = true;
this._data = JSON.parse(reader.result);
});
}
private uploadJson(){
console.log('ModalUploadComponent.uploadJson() is called!');
this.jsPlumbService.deleteAll();
this.dataService.loadData(this._data);
this.bsModalRef.hide();
}
}
@@ -1,4 +1,4 @@
<div id="{{myModel.getElementId()}}" class="model-node list-group d-inline-flex">
<div id="{{myModel.getElementId()}}" class="model-node list-group d-inline-flex" [style.left.px]="myModel.pos_x" [style.top.px]="myModel.pos_y">
<h2 id="{{myModel.getElementH2Id()}}" class="list-group-item list-group-item-primary d-flex" [class.list-group-item-primary]="myModel.is_pivot === false" [class.list-group-item-secondary]="myModel.is_pivot === true" (mousedown)="startDrag()" (mouseup)="endDrag()">
<span class="align-self-center mr-auto">{{myModel.id}}:{{myModel.name}}</span>
@@ -7,15 +7,16 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent" [collapse]="isCollapsed">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown" dropdown>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" dropdownToggle>Edit</a>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" dropdownToggle>File</a>
<div class="dropdown-menu" *dropdownMenu>
<a class="dropdown-item" (click)="createModel()">Create Model</a>
<a class="dropdown-item" (click)="importJson()">Load</a>
<a class="dropdown-item" (click)="exportJson()">Save</a>
</div>
</li>
<li class="nav-item dropdown" dropdown>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" dropdownToggle>Export</a>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" dropdownToggle>Edit</a>
<div class="dropdown-menu" *dropdownMenu>
<a class="dropdown-item" (click)="exportJson()">Export JSON</a>
<a class="dropdown-item" (click)="createModel()">Create Model</a>
</div>
</li>
<li class="nav-item dropdown" dropdown>
@@ -13,6 +13,7 @@ import { DataService } from '../service/data.service';
import { ModalDataComponent } from '../modal-data/modal-data.component';
import { ModalModelComponent } from '../modal-model/modal-model.component';
import { ModalDownloadComponent } from '../modal-download/modal-download.component';
import { ModalUploadComponent } from '../modal-upload/modal-upload.component';
// class
import { Model } from '../class/model';
@@ -49,6 +50,11 @@ export class NavbarComponent {
}
private importJson():void{
console.log('NavbarComponent.importJson() is called!');
this.bsModalRef = this.bsModalService.show( ModalUploadComponent );
}
private dataSetting():void{
console.log('NavbarComponent.dataSetting() is called!');
@@ -149,4 +149,15 @@ export class DataService {
this.data.models.push(pivot_model);
}
public clearData(){
console.log('DataService.clearData() is called!');
this.data.clearData();
}
public loadData(data){
console.log('DataService.loadData() is called!');
this.clearData();
this.data.loadData(data);
}
}
@@ -75,9 +75,10 @@ export class JsPlumbService {
for( let i=0 ; i < connections_to_delete.length; i++){
var schema_to_delete = this.dataService.data.getSchemaByElementId( connections_to_delete[i].targetId );
this.dataService.deleteSchema( schema_to_delete );
if( schema_to_delete ){
this.dataService.deleteSchema( schema_to_delete );
}
}
}
public initSchema(schema:Schema){
@@ -126,4 +127,9 @@ export class JsPlumbService {
console.log('JsPlumbService.repaintEverything() is called!');
this._instance.repaintEverything();
}
public deleteAll(): void{
console.log('JsPlumbService.deleteAll() is called!');
this._instance.deleteEveryEndpoint();
}
}

0 comments on commit 8bbbfea

Please sign in to comment.