Merge pull request #89 from feup-infolab/lazaroDevelop

alternative interface finished

frontend/package.json

@@ -53,6 +53,7 @@
     "@angular/platform-browser": "^7.0.0",
     "@angular/platform-browser-dynamic": "^7.0.0",
     "@angular/router": "^7.0.0",
+    "angular-notifier": "^6.0.1",
     "angular7-json-schema-form": "^1.0.4",
     "bootstrap": "^4.4.1",
     "brace": "^0.11.1",

frontend/src/app/app.module.ts

@@ -1,17 +1,17 @@
 import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
-import { MyServiceService } from './service/my-service.service';
+import {MyServiceService} from './service/service-service';
 import {Bootstrap4FrameworkModule, MaterialDesignFrameworkModule} from 'angular7-json-schema-form';
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 import {HttpClientModule} from '@angular/common/http';
-import {SearchComponent} from './components/search.component';
+import {SearchComponent} from './components/search-component/search-component';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import {FlexLayoutModule} from '@angular/flex-layout';
 import {CommonModule} from '@angular/common';
 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 {RouterModule, Routes} from '@angular/router';
+import {EditEntityComponent} from './components/edit/edit-entity/edit-entity.component';
 import {MatIconModule} from '@angular/material/icon';
 import {
   MatButtonModule,
@@ -22,19 +22,64 @@ import {
   MatSelectModule,
   MatSliderModule
 } from '@angular/material';
-import { EditTemplateComponent } from './edit-template/edit-template.component';
-import { ViewTemplateComponent } from './components/view-template.component';
-import { LayoutComponent } from './components/layout.component';
-import { DocumentComponentComponent } from './document-component/document-component.component';
+import {EditTemplateComponent} from './components/edit/edit-template/edit-template.component';
+import {ViewTemplateComponent} from './components/view/view-template/view-template.component';
+import {LayoutComponent} from './components/view/layout-component/layout-component';
+import {DocumentComponentComponent} from './components/view/document-component/document-component.component';
+import {MatCardModule} from "@angular/material/card";
+import {NotifierModule, NotifierOptions} from 'angular-notifier';
 
 const appRoutes: Routes = [
-  { path: 'edit-template/:id', component: EditTemplateComponent },
-  { path: ':uid', component: EditEntityComponent },
-  { path: '', component: SearchComponent },
-  { path: 'viewtemplate/:uid', component: ViewTemplateComponent },
-  { path: 'uidglab/:uid', component: DocumentComponentComponent}
+  {path: 'edit-template/:id', component: EditTemplateComponent},
+  {path: ':uid', component: EditEntityComponent},
+  {path: '', component: SearchComponent},
+  {path: 'viewtemplate/:uid', component: ViewTemplateComponent},
+  {path: 'uidglab/:uid', component: DocumentComponentComponent}
 
 ];
+/**
+ * Custom angular notifier options
+ */
+const customNotifierOptions: NotifierOptions = {
+  position: {
+    horizontal: {
+      position: 'right',
+      distance: 20
+    },
+    vertical: {
+      position: 'top',
+      distance: 20,
+      gap: 20
+    }
+  },
+  theme: 'material',
+  behaviour: {
+    autoHide: 5000,
+    onClick: 'hide',
+    onMouseover: 'pauseAutoHide',
+    showDismissButton: true,
+    stacking: 4
+  },
+  animations: {
+    enabled: true,
+    show: {
+      preset: 'slide',
+      speed: 300,
+      easing: 'ease'
+    },
+    hide: {
+      preset: 'fade',
+      speed: 300,
+      easing: 'ease',
+      offset: 50
+    },
+    shift: {
+      speed: 300,
+      easing: 'ease'
+    },
+    overlap: 150
+  }
+};
 
 
 @NgModule({
@@ -53,6 +98,7 @@ const appRoutes: Routes = [
       appRoutes,
       {enableTracing: true} // <-- debugging purposes only
     ),
+    NotifierModule.withConfig(customNotifierOptions),
     BrowserModule,
     HttpClientModule,
     MaterialDesignFrameworkModule,
@@ -70,11 +116,13 @@ const appRoutes: Routes = [
     MatInputModule,
     MatOptionModule,
     MatSelectModule,
-    MatListModule
+    MatListModule,
+    MatCardModule
   ],
   providers: [MyServiceService],
-  bootstrap: [ AppComponent ],
+  bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class AppModule { }
+export class AppModule {
+}
 

frontend/src/app/combo-box/combo-box.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, Input, Output} from '@angular/core';
-import { MyServiceService} from '../service/my-service.service';
+import {MyServiceService} from '../service/service-service';
 
 @Component({
   selector: 'app-combo-box',
@@ -9,9 +9,11 @@ import { MyServiceService} from '../service/my-service.service';
 export class ComboBoxComponent implements OnInit {
   constructor() {
   }
+
   get inputIt() {
     return this.inputItem;
   }
+
   @Input() list: string[];
   // two way binding for input text
   @Input() inputItem = '';
@@ -25,20 +27,23 @@ export class ComboBoxComponent implements OnInit {
   ngOnInit() {
     this.filteredList = this.list;
   }
+
   // modifies the filtered list as per input
   getFilteredList() {
     this.listHidden = false;
     if (!this.listHidden && this.inputItem !== undefined) {
-      this.filteredList = this.list.filter((item) =>  item.toLowerCase().startsWith(this.inputItem.toLowerCase()));
+      this.filteredList = this.list.filter((item) => item.toLowerCase().startsWith(this.inputItem.toLowerCase()));
     }
   }
+
   // select highlighted item when enter is pressed or any item that is clicked
   selectItem(ind) {
     this.inputItem = this.filteredList[ind];
     this.listHidden = true;
     this.selectedIndex = ind;
     console.log(this.inputItem);
   }
+
   // navigate through the list of items
   onKeyPress(event) {
     if (!this.listHidden) {
@@ -65,6 +70,7 @@ export class ComboBoxComponent implements OnInit {
       }
     }
   }
+
   // show or hide the dropdown list when input is focused or moves out of focus
   toggleListDisplay(sender: number) {
     if (sender === 1) {

frontend/src/app/components/edit-entity.component.html → frontend/src/app/components/edit/edit-entity/edit-entity.component.html

@@ -1,4 +1,3 @@
-
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <a class="navbar-brand" href="#">
     Archgraph Backend Demo
@@ -24,7 +23,7 @@
 
   <json-schema-form
     *ngIf="load"
-    [form]= "form"
+    [form]="form"
     [options]='jsonFormOptions'
     [framework]="'bootstrap-4'"
     (onSubmit)="onSubmit($event)"

frontend/src/app/components/edit-entity.component.spec.ts → frontend/src/app/components/edit/edit-entity/edit-entity.component.spec.ts

@@ -1,16 +1,16 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { EditEntityComponent } from './edit-entity.component';
+import {EditEntityComponent} from './edit-entity.component';
 
 describe('EditEntityComponent', () => {
   let component: EditEntityComponent;
   let fixture: ComponentFixture<EditEntityComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ EditEntityComponent ]
+      declarations: [EditEntityComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

frontend/src/app/components/edit-entity.component.ts → frontend/src/app/components/edit/edit-entity/edit-entity.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {MyServiceService} from '../service/my-service.service';
+import {MyServiceService} from '../../../service/service-service';
 import {ActivatedRoute} from '@angular/router';
 import {Location} from '@angular/common';
 
@@ -46,7 +46,7 @@ export class EditEntityComponent implements OnInit {
         this.template = JSON.parse(query.get('template'));
         console.log(this.template)
         this.getSchemaNodeWithTemplate(this.uid, this.template)
-    });
+      });
 
     });
 

frontend/src/app/edit-template/edit-template.component.html → frontend/src/app/components/edit/edit-template/edit-template.component.html

@@ -1,22 +1,21 @@
 <div *ngIf="load" style="margin: 35px">
   <json-schema-form
     *ngIf="load"
-    [form]= "form"
+    [form]="form"
     [options]='jsonFormOptions'
     [framework]="'bootstrap-4'"
-    [widgets]= "yourWidgets">
+    [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>
+  <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"

frontend/src/app/edit-template/edit-template.component.spec.ts → frontend/src/app/components/edit/edit-template/edit-template.component.spec.ts

@@ -1,16 +1,16 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { EditTemplateComponent } from './edit-template.component';
+import {EditTemplateComponent} from './edit-template.component';
 
 describe('EditTemplateComponent', () => {
   let component: EditTemplateComponent;
   let fixture: ComponentFixture<EditTemplateComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ EditTemplateComponent ]
+      declarations: [EditTemplateComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

frontend/src/app/edit-template/edit-template.component.ts → frontend/src/app/components/edit/edit-template/edit-template.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MyServiceService} from '../service/my-service.service';
+import {MyServiceService} from '../../../service/service-service';
 import {ActivatedRoute} from '@angular/router';
 import {Location} from '@angular/common';
-import {ComboBoxComponent} from '../combo-box/combo-box.component';
+import {ComboBoxComponent} from '../../../combo-box/combo-box.component';
 import {NoneComponent} from 'angular7-json-schema-form';
 
 @Component({
@@ -69,7 +69,7 @@ export class EditTemplateComponent implements OnInit {
       .subscribe(returnedTemplate => {
         this.template = returnedTemplate[0];
         this.getSchemaNodeWithTemplate(uid, returnedTemplate[0]);
-    });
+      });
   }
 
   getSchemaNodeWithTemplate(uid, template) {
@@ -87,7 +87,7 @@ export class EditTemplateComponent implements OnInit {
   }
 
   getDataNodeWithTemplate(uid, template) {
-    this.service.getDataNodeWithTemplate(uid , template)
+    this.service.getDataNodeWithTemplate(uid, template)
       .subscribe(result => {
         this.form.data[this.uid] = result;
         console.log(result);
@@ -175,7 +175,7 @@ export class EditTemplateComponent implements OnInit {
     this.load = false;
     this.chosenprops.push(this.comboBoxReference.inputItem);
     this.form.data[this.uid][this.comboBoxReference.inputItem] = [];
-    this.form.data[this.uid][this.comboBoxReference.inputItem][0] = {name: '1', uid: '1' };
+    this.form.data[this.uid][this.comboBoxReference.inputItem][0] = {name: '1', uid: '1'};
     const schemaEntity = this.schemaname.replace('Schema', '');
     this.template[schemaEntity][this.comboBoxReference.inputItem] = this.allprops[this.comboBoxReference.inputItem].items.$ref
       .replace('Schema', '').replace('#/definitions/', '');
@@ -186,7 +186,7 @@ export class EditTemplateComponent implements OnInit {
 
   sendProps() {
     this.service.sendTemplate(this.uid, this.template)
-      .subscribe( result => {
+      .subscribe(result => {
         this.load = true;
       });
   }