diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts index be8d688d6..af24b0197 100644 --- a/dmp-frontend/src/app/app-routing.module.ts +++ b/dmp-frontend/src/app/app-routing.module.ts @@ -4,10 +4,12 @@ import { PageNotFoundComponent } from './not-found.component'; import { DynamicFormComponent } from './form/dynamic-form.component'; import { LoginComponent } from './login/login-page'; import { AuthGuard } from './guards/auth.guard'; +import { ProjectsComponent } from './projects/projects.component'; const appRoutes: Routes = [ - { path: 'dynamic-form.component', component: DynamicFormComponent, canActivate: [AuthGuard] }, + { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] }, { path: 'login-page', component: LoginComponent }, + //{ path: 'projects', component: ProjectsComponent}, { path: '', redirectTo: '/login-page', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @@ -15,12 +17,7 @@ const appRoutes: Routes = [ @NgModule({ imports: [ RouterModule.forRoot( - appRoutes, - { - enableTracing: true // <-- debugging purposes only - - } - ) + appRoutes) ], exports: [ RouterModule diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts index b882c0b15..aa430ebb5 100644 --- a/dmp-frontend/src/app/app.component.ts +++ b/dmp-frontend/src/app/app.component.ts @@ -7,7 +7,8 @@ import { JsonObjest } from '../app/entities/JsonObject.class'; @Component({ selector: 'app-root', template: ` -

Angular Router

+ + `, // template: ` diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index 45f2c6c19..d95a89b22 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -16,6 +16,8 @@ import {GoogleSignInComponent} from 'angular-google-signin'; import { AppRoutingModule } from './app-routing.module'; import { AuthGuard } from './guards/auth.guard'; import { PageNotFoundComponent } from './not-found.component'; +import { TocComponent } from './form/tableOfContents/toc.component'; +import { ProjectsModule } from './projects/project.module'; @NgModule({ declarations: [ @@ -23,6 +25,7 @@ import { PageNotFoundComponent } from './not-found.component'; DynamicFormComponent, DynamicFormFieldComponent, DynamicFormGroupComponent, + TocComponent, LoginComponent, GoogleSignInComponent, PageNotFoundComponent @@ -33,7 +36,9 @@ import { PageNotFoundComponent } from './not-found.component'; FormsModule, HttpModule, HttpClientModule, + ProjectsModule, AppRoutingModule + ], providers: [ServerService, dataModelBuilder, AuthGuard], bootstrap: [AppComponent] diff --git a/dmp-frontend/src/app/entities/DataModel.ts b/dmp-frontend/src/app/entities/DataModel.ts index f6e823937..a53bc12ec 100644 --- a/dmp-frontend/src/app/entities/DataModel.ts +++ b/dmp-frontend/src/app/entities/DataModel.ts @@ -2,6 +2,7 @@ import { GroupBase } from '../form/dynamic-form-group/group-base'; import { FieldBase } from '../form/fields/field-base'; import { Attribute } from './model/attribute'; import { Source } from './model/source'; +import { Section } from './model/section'; export class DataModel { @@ -11,6 +12,7 @@ export class DataModel { groups: GroupBase[] = []; fields: FieldBase[] = []; semanticAttr: Attribute[]; + sections: Section[]; //need to add more class fields to describe the remaining elements of the json object fetched from the service. //e.g. the current dataset's metadata information, the DataRepository description information, etc diff --git a/dmp-frontend/src/app/entities/model/project.ts b/dmp-frontend/src/app/entities/model/project.ts new file mode 100644 index 000000000..5253552fa --- /dev/null +++ b/dmp-frontend/src/app/entities/model/project.ts @@ -0,0 +1,7 @@ +import { Injectable } from '@angular/core'; + +export class Project { + name: string; + id: string; + +} \ No newline at end of file diff --git a/dmp-frontend/src/app/entities/model/section.ts b/dmp-frontend/src/app/entities/model/section.ts new file mode 100644 index 000000000..76ed51722 --- /dev/null +++ b/dmp-frontend/src/app/entities/model/section.ts @@ -0,0 +1,12 @@ +import { Injectable } from '@angular/core'; +import { GroupBase } from '../../form/dynamic-form-group/group-base'; + +@Injectable() +export class Section { + title: string; + description:string; + id: string; + defaultVisibility: boolean; + ordinal: number; + groupFields: GroupBase[]; +} \ No newline at end of file diff --git a/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts b/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts index 9ec514c25..750184084 100644 --- a/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts +++ b/dmp-frontend/src/app/form/dynamic-form-group/group-base.ts @@ -9,6 +9,7 @@ export class GroupBase{ visible: boolean; order:number; controlType:string; + section:string; constructor(options: { value?: T, @@ -19,6 +20,7 @@ export class GroupBase{ visible?: boolean, order?: number, controlType?: string + section?: string } = {}) { this.value = options.value; this.key = options.key || ''; @@ -28,5 +30,6 @@ export class GroupBase{ this.visible = options.visible; this.order = options.order === undefined ? 1 : options.order; this.controlType = options.controlType || ''; + this.section = options.section || ''; } } diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index 2268be27f..8c1474cf7 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -1,24 +1,46 @@ -
+
+ -
-
- +
+
+

{{section.title}}

+
+ +
+
+ +

{{section.title}}

+ +
+ +
+
+ +
+
+ + + +
+ +
+ +
+ Saved the following values
{{payLoad}} +
+ + +

Form value: {{ form.value | json }}

+
+ + +
+

On this page:

+
+
-
- -
- -
- -
- -
- Saved the following values
{{payLoad}} -
- - -

Form value: {{ form.value | json }}

- Sign out diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts index 73c3ef2b3..30e735907 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.ts +++ b/dmp-frontend/src/app/form/dynamic-form.component.ts @@ -1,6 +1,8 @@ import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core'; import { FormGroup, Validators } from '@angular/forms'; import { NgForm } from '@angular/forms'; +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; +import 'rxjs/add/operator/switchMap'; //import { FieldBase } from '../../app/form/fields/field-base'; import { FieldControlService } from '../../app/services/field-control.service'; @@ -8,7 +10,7 @@ import { ServerService } from '../../app/services/server.service'; import { dataModelBuilder } from '../../app/services/dataModelBuilder.service'; import { DataModel } from '../entities/DataModel'; import { GroupBase } from './dynamic-form-group/group-base'; -import { Router, ActivatedRoute } from '@angular/router'; + @Component({ selector: 'dynamic-form', @@ -68,7 +70,8 @@ export class DynamicFormComponent implements OnInit { console.log("SUMMARY: ======>"); console.log(this.dataModel); console.log(this.form); - + + this.route.paramMap //this is how i get the projects's id }, (error) => console.log(error) ); diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html new file mode 100644 index 000000000..5c978b824 --- /dev/null +++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html @@ -0,0 +1,7 @@ + diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts new file mode 100644 index 000000000..92b58bffc --- /dev/null +++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { DataModel } from '../../entities/DataModel'; + +@Component({ + selector: 'toc', + templateUrl: '/toc.component.html', + providers: [] +}) +export class TocComponent implements OnInit{ + @Input() dataModel: DataModel; + private headers = new Array(); + + ngOnInit(){ + var len = this.dataModel.groups.length; + for (var i=0; i
- + diff --git a/dmp-frontend/src/app/login/login-page.ts b/dmp-frontend/src/app/login/login-page.ts index 798278bc1..a2853c275 100644 --- a/dmp-frontend/src/app/login/login-page.ts +++ b/dmp-frontend/src/app/login/login-page.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, NgZone } from '@angular/core'; import {GoogleSignInSuccess} from 'angular-google-signin'; import { Router, ActivatedRoute } from '@angular/router'; @@ -12,7 +12,8 @@ export class LoginComponent implements OnInit{ constructor( private route: ActivatedRoute, - private router: Router){ + private router: Router, + private ngZone: NgZone){ } @@ -34,7 +35,9 @@ export class LoginComponent implements OnInit{ .getId()); // Do not send to your backend! Use an ID token instead. console.log('Name: ' + profile.getName()); localStorage.setItem('currentUser', JSON.stringify(googleUser)); - this.router.navigateByUrl('dynamic-form.component'); + //this.router.navigateByUrl('dynamic-form'); + this.ngZone.run(() => this.router.navigateByUrl('projects')) + //this.router.navigate(['/projects']); } } diff --git a/dmp-frontend/src/app/projects/project-routing.module.ts b/dmp-frontend/src/app/projects/project-routing.module.ts new file mode 100644 index 000000000..77d2e8c2e --- /dev/null +++ b/dmp-frontend/src/app/projects/project-routing.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { ProjectsComponent } from './projects.component'; +import { ProjectDetailComponent } from './project.detail'; +import { DynamicFormComponent } from '../form/dynamic-form.component'; +import { AuthGuard } from '../guards/auth.guard'; + +const projectsRoutes: Routes = [ + { path: 'projects', component: ProjectsComponent }, + { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(projectsRoutes) + ], + exports: [ + RouterModule + ] +}) +export class ProjectRoutingModule { } \ No newline at end of file diff --git a/dmp-frontend/src/app/projects/project.detail.ts b/dmp-frontend/src/app/projects/project.detail.ts new file mode 100644 index 000000000..0044e67d1 --- /dev/null +++ b/dmp-frontend/src/app/projects/project.detail.ts @@ -0,0 +1,35 @@ +import 'rxjs/add/operator/switchMap'; +import { Component, OnInit, HostBinding } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { Router, ActivatedRoute, ParamMap } from '@angular/router'; + +@Component({ + template: ` +

HEROES

+
+

"{{ project.name }}"

+
+ {{ project.id }}
+
+ + +
+
+ ` +}) +export class ProjectDetailComponent implements OnInit { + + + constructor( + private route: ActivatedRoute, + private router: Router, + ) {} + + ngOnInit() { + debugger; + // this.hero$ = this.route.paramMap + // .switchMap((params: ParamMap) => + // this.service.getHero(params.get('id'))); + } + +} \ No newline at end of file diff --git a/dmp-frontend/src/app/projects/project.module.ts b/dmp-frontend/src/app/projects/project.module.ts new file mode 100644 index 000000000..88ccf03ce --- /dev/null +++ b/dmp-frontend/src/app/projects/project.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { ProjectsComponent } from './projects.component'; + +import { ProjectRoutingModule } from './project-routing.module'; +import { ProjectDetailComponent } from './project.detail'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + ProjectRoutingModule + ], + declarations: [ + ProjectsComponent, + ProjectDetailComponent + ], + providers: [ ] +}) +export class ProjectsModule {} \ No newline at end of file diff --git a/dmp-frontend/src/app/projects/projects.component.ts b/dmp-frontend/src/app/projects/projects.component.ts new file mode 100644 index 000000000..594be4f9f --- /dev/null +++ b/dmp-frontend/src/app/projects/projects.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; +import {GoogleSignInSuccess} from 'angular-google-signin'; +import { Router, ActivatedRoute } from '@angular/router'; +import { ServerService } from '../../app/services/server.service'; +import { Project } from '../entities/model/project'; + +@Component({ + selector: 'projects', + template: ` +

Projects

+ Sign out + + + +`, + providers: [ServerService] +}) + +export class ProjectsComponent implements OnInit{ + returnUrl: string; + projects: Project[]; + + constructor( + private serverService: ServerService, + private route: ActivatedRoute, + private router: Router){ + + } + + ngOnInit() {debugger; + this.projects = this.serverService.getDummyProjects() +} + + + +} diff --git a/dmp-frontend/src/app/services/dataModelBuilder.service.ts b/dmp-frontend/src/app/services/dataModelBuilder.service.ts index 876faa092..caf0eab5d 100644 --- a/dmp-frontend/src/app/services/dataModelBuilder.service.ts +++ b/dmp-frontend/src/app/services/dataModelBuilder.service.ts @@ -9,6 +9,7 @@ import {Rule} from '../entities/common/rule'; import { GroupBase } from '../form/dynamic-form-group/group-base'; import { Attribute } from '../entities/model/attribute'; import { Param } from '../entities/model/param'; +import { Section } from '../entities/model/section'; @Injectable() export class dataModelBuilder { @@ -27,6 +28,7 @@ export class dataModelBuilder { this.dataModel.semanticAttr = new Array(new Attribute); //this.dataModel.semanticAttr = data.dataset.profile.definition.root.fields.field; this.dataModel.semanticAttr = this.getFieldsAttributes(data.dataset.profile.definition.root.fields.field, this.fields) ; + this.dataModel.sections = this.getSections(data.dataset.profile.viewstyle.definition.root.sections.section, this.dataModel.groups) ; this.dataModel.buildIndex(); return this.dataModel; @@ -136,6 +138,7 @@ export class dataModelBuilder { }); newfldGroup.title = fieldGroup.title.__cdata; newfldGroup.key = fieldGroup._id; + newfldGroup.section = fieldGroup._section; groups.push(newfldGroup) }); } @@ -143,7 +146,7 @@ export class dataModelBuilder { else{ let newfldGroup = new GroupBase(); newfldGroup.groupFields = new Array(); - fields.forEach(field => { //for one fieldgroup, beacouse xml to json transformation doesn't create array of one fieldfroup + fields.forEach(field => { //for one fieldgroup, because xml to json transformation doesn't create array of one fieldfroup if(fieldGroups._id == field.group){ newfldGroup.groupFields.push(field); }else @@ -151,6 +154,7 @@ export class dataModelBuilder { }); newfldGroup.title = fieldGroups.title.__cdata; newfldGroup.key = fieldGroups._id; + newfldGroup.section = fieldGroups._section; groups.push(newfldGroup) } return groups; @@ -236,5 +240,28 @@ export class dataModelBuilder { return attribute; } + + private getSections(sections:any, fieldGroups:GroupBase[]){ + let sects: Section[]= []; + + if(sections.length){ + sections.forEach(section => { + let newSection = new Section(); + newSection.defaultVisibility = section.defaultVisibility; + newSection.description = section.description; + newSection.id = section._id; + newSection.title = section.title; + newSection.ordinal = section._ordinal; + newSection.groupFields = new Array(); + fieldGroups.forEach(fldgroup => { + if(fldgroup.section == newSection.id) + newSection.groupFields.push(fldgroup); + }) + sects.push(newSection); + }); + } + sects.sort((a, b) => a.ordinal - b.ordinal); + return sects; + } } \ No newline at end of file diff --git a/dmp-frontend/src/app/services/server.service.ts b/dmp-frontend/src/app/services/server.service.ts index 8db7199c3..6ad7b6013 100644 --- a/dmp-frontend/src/app/services/server.service.ts +++ b/dmp-frontend/src/app/services/server.service.ts @@ -5,7 +5,8 @@ import {FieldBase} from '../../app/form/fields/field-base'; import {JsonObjest} from '../../app/entities/JsonObject.class'; import {dataModelBuilder} from '../../app/services/dataModelBuilder.service'; import { DatasetProfile } from '../entities/datasetprofile'; -import {DataModel} from '../entities/DataModel' +import {DataModel} from '../entities/DataModel'; +import {Project} from '../entities/model/project'; import './../../assets/xml2json.min.js'; @@ -53,7 +54,6 @@ export class ServerService { //can be converted back to xml (which shouldn't be needed) with this.xml2jsonOBJ.json2xml_str this.data = data; //cache it for subsequent calls - return data; } ); @@ -89,4 +89,22 @@ export class ServerService { } ); } + getDummyProjects(){ + let projects :Project[] =[]; + + let project = new Project; + project.name = "Project1"; + project.id = "Project1Id"; + + projects.push(project); + + let project2 = new Project; + project2.name = "Project2"; + project2.id = "Project2Id"; + + projects.push(project2); + + return projects; + } + } \ No newline at end of file diff --git a/dmp-frontend/src/index.html b/dmp-frontend/src/index.html index a5826e456..62b87e749 100644 --- a/dmp-frontend/src/index.html +++ b/dmp-frontend/src/index.html @@ -2,6 +2,10 @@ + + + + Digital Management Plans - Manager @@ -27,8 +31,7 @@
- -

Sing in using gmail

+

Digital Management Plans Editor