Merge pull request #80 from feup-infolab/Cidoc-&-Templates-experiments

Template Creation Complete
feup-infolab · Jun 2, 2020 · b6770a2 · b6770a2
2 parents 513984a + 49feae1
commit b6770a2
Show file tree

Hide file tree

Showing 25 changed files with 507 additions and 37 deletions.
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -84,9 +84,14 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/popper.js/dist/popper.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
           }
         },
         "lint": {

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -54,12 +54,15 @@
     "@angular/platform-browser-dynamic": "^7.0.0",
     "@angular/router": "^7.0.0",
     "angular7-json-schema-form": "^1.0.4",
+    "bootstrap": "^4.4.1",
     "brace": "^0.11.1",
     "core-js": "^2.5.4",
+    "jquery": "^3.5.1",
     "jsonpath": "^1.0.2",
     "node-gyp": "^6.1.0",
     "node-sass": "^4.12.0",
     "omit-deep-lodash": "^1.1.4",
+    "popper.js": "^1.16.1",
     "rxjs": "^6.0.0",
     "tsickle": "^0.33.0",
     "zone.js": "^0.8.26"

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -12,15 +12,17 @@ import {FormsModule} from '@angular/forms';
 import {ComboBoxComponent} from './combo-box/combo-box.component';
 import { RouterModule, Routes } from '@angular/router';
 import { EditEntityComponent } from './components/edit-entity.component';
-import {MatIconModule} from "@angular/material/icon";
+import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material';
+import { EditTemplateComponent } from './edit-template/edit-template.component';
 import { ViewTemplateComponent } from './components/view-template.component';
 import { LayoutComponent } from './components/layout.component';
 
 const appRoutes: Routes = [
+  { path: 'edit-template/:id', component: EditTemplateComponent },
+  { path: ':uid', component: EditEntityComponent },
   { path: '', component: SearchComponent },
   { path: 'viewtemplate/:uid', component: ViewTemplateComponent },
-  { path: ':uid', component: EditEntityComponent }
 
 ];
 
@@ -32,7 +34,8 @@ const appRoutes: Routes = [
     ComboBoxComponent,
     EditEntityComponent,
     ViewTemplateComponent,
-    LayoutComponent
+    LayoutComponent,
+    EditTemplateComponent
   ],
   imports: [
     RouterModule.forRoot(

diff --git a/frontend/src/app/components/edit-entity.component.html b/frontend/src/app/components/edit-entity.component.html
@@ -1,4 +1,27 @@
+
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <a class="navbar-brand" href="#">
+    Archgraph Backend Demo
+  </a>
+
+  <button class="navbar-toggler" type="button">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+
+  <div class="collapse navbar-collapse">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="#">Search page</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+
+
 <div *ngIf="load" style="margin: 35px">
+
+
   <json-schema-form
     *ngIf="load"
     [form]= "form"
@@ -10,9 +33,6 @@
     (isValid)="isValid($event)">
   </json-schema-form>
 
-  <div class="example-button-row">
-    <button mat-raised-button color="primary" (click)="goBack()">Go back</button>
-  </div>
 </div>
 
 <!--

diff --git a/frontend/src/app/components/edit-entity.component.ts b/frontend/src/app/components/edit-entity.component.ts
@@ -30,6 +30,7 @@ export class EditEntityComponent implements OnInit {
     data: {},
     layout: []
   };
+  inName = 'Production Time';
 
   goBack() {
     this.location.back();
@@ -56,11 +57,14 @@ export class EditEntityComponent implements OnInit {
       .subscribe(returnedSchema => {
 
         this.form.layout = [];
+        console.log('Schema being returned:');
         console.log(returnedSchema);
         this.form.schema = this.refactorSchema(returnedSchema);
+        console.log('Refactored Schema');
+        console.log(this.form.schema);
         this.form.layout = ['*'];
 
-        this.getDataNodeWithTemplate(this.uid)
+        this.getDataNodeWithTemplate(this.uid);
         //  this.load = true;
       });
   }
@@ -70,6 +74,12 @@ export class EditEntityComponent implements OnInit {
       .subscribe(result => {
         this.form.data[this.uid] = result;
         console.log(result);
+        console.log('Form Data');
+        console.log(this.form.data);
+        console.log('ALl Form');
+        console.log(this.form.data[this.uid]);
+        console.log(this.form.data[this.uid].name);
+        this.inName = this.form.data[this.uid].name;
         this.load = true;
       });
   }
@@ -78,10 +88,13 @@ export class EditEntityComponent implements OnInit {
     const ref = jsonSchema.$ref;
     const path = ref.split('/');
     const schemaName = path[2];
+
+    const enName = schemaName.replace('Schema', '');
+    const finalName = enName.replace(/_/g, ' ');
     const properties = {};
     properties[this.uid] = {
       $ref: ref,
-      title: 'New relationship'
+      title: 'Editing ' + finalName + ' - ' + this.inName
     };
     jsonSchema.properties = properties;
     jsonSchema.desc = 'Description';

diff --git a/frontend/src/app/components/search.component.ts b/frontend/src/app/components/search.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild} from '@angular/core';
 import {MyServiceService} from '../service/my-service.service';
 import {CidocSearch} from '../models/CidocSearch';
 import {ComboBoxComponent} from '../combo-box/combo-box.component';
+import {ActivatedRoute} from '@angular/router';
+import {Location} from '@angular/common';
 
 @Component({
   selector: 'app-example',
@@ -51,6 +53,19 @@ export class SearchComponent implements OnInit {
 
   headers = ['name', 'uid', 'labels'];
 
+  uid = '';
+  jsonFormOptions = {
+    loadExternalAssets: true,
+  };
+  schema = {};
+  data = {};
+  load = false;
+  form = {
+    schema: {},
+    data: {},
+    layout: []
+  };
+
   searchDatabase(searched: string) {
     this.searched = searched;
     this.loadSearch = false;
@@ -65,7 +80,7 @@ export class SearchComponent implements OnInit {
     } else {
       this.service.getSearchJson(search)
         .subscribe(result => {
-          this.changeContent(result)
+          this.changeContent(result);
         });
     }
   }

diff --git a/frontend/src/app/components/view-template.component.html b/frontend/src/app/components/view-template.component.html
@@ -10,6 +10,11 @@
       Edit Entity
     </button>
   </div>
+  <div class="example-button-row">
+    <button type="button" class="btn btn-primary-outline pull-right" (click)="editTemplate();"><i class="fa fa-plus"></i>
+      Edit Template
+    </button>
+  </div>
 </div>
 
 <div class="row" *ngIf="!hasTemplate" style="align-content: center">

diff --git a/frontend/src/app/components/view-template.component.ts b/frontend/src/app/components/view-template.component.ts
@@ -41,6 +41,7 @@ export class ViewTemplateComponent implements OnInit {
   private getTemplatesFromEntity(uid: string) {
     this.service.getTemplatesFromEntity(uid)
       .subscribe(templates => {
+        console.log(templates);
         let index = 1;
         if (templates["message"]) {
           this.hasTemplate = false
@@ -83,4 +84,15 @@ export class ViewTemplateComponent implements OnInit {
 
 
   }
+
+  editTemplate() {
+    this.route.navigate(['/edit-template/', this.uid],
+      {
+        queryParams:
+          {
+            template: JSON.stringify(this.template)
+          }
+      }
+    );
+  }
 }
diff --git a/frontend/src/app/edit-template/edit-template.component.css b/frontend/src/app/edit-template/edit-template.component.css
diff --git a/frontend/src/app/edit-template/edit-template.component.html b/frontend/src/app/edit-template/edit-template.component.html
@@ -0,0 +1,31 @@
+<div *ngIf="load" style="margin: 35px">
+  <json-schema-form
+    *ngIf="load"
+    [form]= "form"
+    [options]='jsonFormOptions'
+    [framework]="'bootstrap-4'"
+    [widgets]= "yourWidgets">
+  </json-schema-form>
+</div>
+
+
+<div style="margin: 35px">
+  <app-combo-box [list]="props" class="form-control"></app-combo-box>
+  <button type="btn btn-primary" (click)="addProp()"> Create Field </button>
+  <button type="btn btn-primary" (click)="sendProps()"> Send Properties </button>
+</div>
+
+
+
+<!--
+<json-schema-form
+  loadExternalAssets="true"
+  [schema]="schema"
+  [(data)]='data'
+  [layout]='layout'
+  [options]="jsonFormOptions"
+  [framework]="'material-design'">
+(onChanges)="onChanges($event)"
+(onSubmit)="onSubmit($event)"
+(validationErrors)="validationErrors($event)">
+</json-schema-form>-->
diff --git a/frontend/src/app/edit-template/edit-template.component.spec.ts b/frontend/src/app/edit-template/edit-template.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditTemplateComponent } from './edit-template.component';
+
+describe('EditTemplateComponent', () => {
+  let component: EditTemplateComponent;
+  let fixture: ComponentFixture<EditTemplateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditTemplateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});