Routing Projects, Table of Contents version 1, Sections in HTML

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

dmp-frontend/src/app/app.component.ts

@@ -7,7 +7,8 @@ import { JsonObjest } from '../app/entities/JsonObject.class';
 @Component({
   selector: 'app-root',
   template: `
-  <h1 class="title">Angular Router</h1>
+  <!-- <h1 class="title">Angular Router</h1>-->
+
   <router-outlet></router-outlet>
 `,
   // template: `

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]

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<any>[] = [];
    fields: FieldBase<any>[] = [];
    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

dmp-frontend/src/app/entities/model/project.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+export class Project {
+  name: string;
+  id: string;
+  
+}

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<any>[];
+}

dmp-frontend/src/app/form/dynamic-form-group/group-base.ts

@@ -9,6 +9,7 @@ export class GroupBase<T>{
     visible: boolean;
     order:number;
     controlType:string;
+    section:string;
     
     constructor(options: {
         value?: T,
@@ -19,6 +20,7 @@ export class GroupBase<T>{
         visible?: boolean,
         order?: number,
         controlType?: string
+        section?: string
     } = {}) {
         this.value = options.value;
         this.key = options.key || '';
@@ -28,5 +30,6 @@ export class GroupBase<T>{
         this.visible = options.visible;
         this.order = options.order === undefined ? 1 : options.order;
         this.controlType = options.controlType || '';
+        this.section = options.section || '';
     }
 }

dmp-frontend/src/app/form/dynamic-form.component.html

@@ -1,24 +1,46 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
+<div class="col-md-6">
+	<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
 
-	<div *ngFor="let field of dataModel.fields">
-		<div [formGroup]="form" class="form-group">
-			<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
+		<div *ngFor = "let section of dataModel.sections">			
+			<div *ngIf="section.groupFields.length>0 else sectionHeader">					
+					<h3>{{section.title}}</h3>
+					<div *ngFor="let group of section.groupFields">
+						<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
+					</div>					
+			</div>
+			<ng-template #sectionHeader>     
+				<h2>{{section.title}}</h2>
+			</ng-template>			
+		</div>		
+
+		<div *ngFor="let field of dataModel.fields">
+			<div [formGroup]="form" class="form-group">
+				<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
+			</div>
+		</div>
+
+		<!-- <div *ngFor="let group of dataModel.groups">
+			<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
+		</div> -->
+
+		<div>
+			<button type="submit" class="btn btn-default" [disabled]="!form.valid">Save</button>
+		</div>
+
+		<div *ngIf="payLoad" class="form-row">
+			<strong>Saved the following values</strong><br>{{payLoad}}
+		</div>
+
+	</form>
+	<p>Form value: {{ form.value | json }}</p>
+</div>
+
+
+<div class="col-md-6">
+		<h4>On this page:</h4>
+		<div *ngIf="dataModel.groups.length">
+				<toc [dataModel]="dataModel"></toc>
 		</div>
 	</div>
 
-	<div *ngFor="let group of dataModel.groups">
-		<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
-	</div>
-
-	<div>
-		<button type="submit" class="btn btn-default" [disabled]="!form.valid">Save</button>
-	</div>
-
-	<div *ngIf="payLoad" class="form-row">
-		<strong>Saved the following values</strong><br>{{payLoad}}
-	</div>
-
-</form>
-<p>Form value: {{ form.value | json }}</p>
-
 <a href="#" onclick="signOut();">Sign out</a>

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)
       );

dmp-frontend/src/app/form/tableOfContents/toc.component.html

@@ -0,0 +1,7 @@
+<nav id="toc" data-toggle="toc">
+<ul class="nav flex-column">
+    <li class="nav-item" >
+         <a class="nav-link" *ngFor ="let header of headers" href="#">{{header}}</a>
+        </li>
+    </ul>
+</nav>

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<len; i++){
+        this.headers.push (this.dataModel.groups[i].title)
+      }
+
+    }
+
+}

dmp-frontend/src/app/guards/auth.guard.ts

@@ -6,7 +6,7 @@ export class AuthGuard implements CanActivate {
 
     constructor(private router: Router) { }
 
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {debugger;
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
         if (localStorage.getItem('currentUser')) {
             // logged in so return true
             return true;

dmp-frontend/src/app/login/login-page.html

@@ -9,7 +9,8 @@
     
 
     <div> <google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin></div>  
-
+    <!-- <button routerLink="/dynamic-form">Go to form</button>
+    <button routerLink="/projects">Go to projects</button> trial for routing -->
     <!-- <a href="#" onclick="signOut();">Sign out</a> -->
 
 </body>

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']);
     }
 
 }

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 { }

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: `
+  <h2>HEROES</h2>
+  <div *ngIf="project">
+    <h3>"{{ project.name }}"</h3>
+    <div>
+      <label>Id: </label>{{ project.id }}</div>
+    <div>
+      <label>Name: </label>
+      <input [(ngModel)]="project.name" placeholder="name"/>
+    </div>
+  </div>
+  `
+})
+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')));
+  }
+
+}

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 {}

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: `
+  <h1 class="title">Projects</h1>
+  <a href="#" onclick="signOut();">Sign out</a>
+    <ul class="items">
+      <li *ngFor="let project of projects"
+        [class.selected]="project.id === selectedId">
+        <a [routerLink]="['/dynamic-form', project.id]">
+          <span class="badge">{{ project.id }}</span>{{ project.name }}
+        </a>
+      </li>
+    </ul>
+
+  <router-outlet></router-outlet>
+`,
+  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()
+}
+
+
+
+}

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<any>[]){
+        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;
+    }
   
 }

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;
+  }
+
 }

dmp-frontend/src/index.html

@@ -2,6 +2,10 @@
 <html lang="en">
 		<script src="https://apis.google.com/js/platform.js" ></script>
 		<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
+		
+		<link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.css"><!--bootstrap plugin for ToC-->
+		<!-- add after bootstrap.min.js -->
+		<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.js"></script>
 <head>
   <meta charset="utf-8">
   <title>Digital Management Plans - Manager</title>
@@ -27,8 +31,7 @@
 
 	<div class="panel panel-default" style="margin-top: 30px; margin-bottom: 30px; margin-right: 30px; margin-left: 30px;">
 	  <div class="panel-heading">
-	    <!-- <h3 class="panel-title" style="text-align: center;">Digital Management Plans Editor</h3> -->
-	    <h3 class="panel-title" style="text-align: center;">Sing in using gmail</h3>
+	    <h3 class="panel-title" style="text-align: center;">Digital Management Plans Editor</h3>
 	  </div>
 	  <div class="panel-body">