MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

no message

This commit is contained in:
Diamantis Tziotzios 2017-12-11 15:47:52 +02:00
parent 869d69bc0d
commit cde1596c35
10 changed files with 175 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/app.component.css
View File

@ -18,5 +18,5 @@ app-root {
}
html {
overflow-y: hidden
/* overflow-y: hidden */
}

9
dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
View File

@ -6,7 +6,16 @@
<i>{{group.extendedDescription}}</i>
</h5> -->
<div *ngFor="let compositeField of group.compositeFields; let i = index;">
<div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)">
<a (click)="addMultipleField(i)" style="cursor: pointer">
Add one more field +
</a>
</div>
<df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
<div *ngFor="let multipleCompositeField of compositeField.multiplicityItems; let j = index;">
<df-composite-field [compositeField]="multipleCompositeField" [form]="form.get('compositeFields').get(''+i).get('multiplicityItems').get(''+j)"
[path]="path" [pathName]="pathName+'.compositeFields.'+i+'.multiplicityItems.'+j"></df-composite-field>
</div>
</div>
</div>
</div>

19
dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
View File

@ -1,9 +1,10 @@
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import { FieldGroup } from '../../models/FieldGroup';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, Validators, FormControl } from '@angular/forms';
import { FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Rule } from '../../entities/common/rule';
import { CompositeField } from '../../models/CompositeField';
@ -16,12 +17,12 @@ import { Rule } from '../../entities/common/rule';
export class DynamicFormGroupComponent implements OnInit {
@Input() group: FieldGroup
@Input() form: FormGroup;
@Input() pathName:string;
@Input() path:string;
@Input() pathName: string;
constructor(private visibilityRulesService:VisibilityRulesService) {
@Input() path: string;
constructor(private visibilityRulesService: VisibilityRulesService) {
}
ngOnInit() {
@ -43,6 +44,12 @@ export class DynamicFormGroupComponent implements OnInit {
}
addMultipleField(fieldsetIndex: number) {
let compositeField: CompositeField = this.group.compositeFields[fieldsetIndex].cloneForMultiplicity();
this.group.compositeFields[fieldsetIndex].multiplicityItems.push(compositeField);
(<FormArray>(this.form.get("compositeFields").get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm());
}
addFieldSet() {
/* debugger;
let subgroup: any = {};

8
dmp-frontend/src/app/form/dynamic-form.component.css
View File

@ -17,3 +17,11 @@
.ui-steps .ui-steps-item {
min-width: 10%;
}
ng-sidebar-container {
overflow: inherit !important;
}
/* .ng-sidebar__content {
overflow: inherit !important;
} */

4
dmp-frontend/src/app/form/dynamic-form.component.html
View File

@ -19,8 +19,8 @@
<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
<div *ngFor="let section of dataModel.sections; let i = index;">
<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)"
[path]="i+1" [pathName]="'sections.'+i"></df-section>
<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1"
[pathName]="'sections.'+i"></df-section>
</div>
</form>
</div>

46
dmp-frontend/src/app/models/CompositeField.ts
View File

@ -2,30 +2,56 @@ import { FormGroup } from '@angular/forms';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Serializable } from './interfaces/Serializable';
import { BaseModel } from './BaseModel';
import {Field} from './Field'
import { Field } from './Field'
import { Multiplicity } from './Multiplicity';
export class CompositeField extends BaseModel implements Serializable<CompositeField> {
public fields:Array<Field> = new Array<Field>();
public ordinal:number
public id:number
fromJSONObject(item:any):CompositeField{
this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields,Field);
public fields: Array<Field> = new Array<Field>();
public ordinal: number
public id: number
public multiplicity: Multiplicity;
public multiplicityItems: Array<CompositeField> = new Array<CompositeField>();
fromJSONObject(item: any): CompositeField {
this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields, Field);
this.ordinal = item.ordinal;
this.id = item.id;
//this.multiplicity = new JsonSerializer<Multiplicity>().fromJSONObject(item.multiplicity, Multiplicity);
this.multiplicity = new Multiplicity();
this.multiplicity.max = 2;
this.multiplicityItems = new JsonSerializer<CompositeField>().fromJSONArray(item.multiplicityItems, CompositeField);
return this;
}
buildForm():FormGroup{
buildForm(): FormGroup {
let formGroup = this.formBuilder.group({
ordinal:this.ordinal
ordinal: this.ordinal
});
let fieldsFormArray = new Array<FormGroup>();
let fieldsFormArray = new Array<FormGroup>();
this.fields.forEach(item => {
let form: FormGroup = item.buildForm();
fieldsFormArray.push(form)
})
formGroup.addControl('fields', this.formBuilder.array(fieldsFormArray));
let multiplicityItemsFormArray = new Array<FormGroup>();
this.multiplicityItems.forEach(item => {
let form: FormGroup = item.buildForm();
multiplicityItemsFormArray.push(form)
})
formGroup.addControl('multiplicityItems', this.formBuilder.array(multiplicityItemsFormArray));
return formGroup;
}
cloneForMultiplicity(): CompositeField {
let newItem: CompositeField = new CompositeField();
this.fields.forEach(field => {
newItem.fields.push(field.cloneForMultiplicity());
});
newItem.ordinal = this.ordinal;
return newItem;
}
}

53
dmp-frontend/src/app/models/Field.ts
View File

@ -3,42 +3,61 @@ import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Serializable } from './interfaces/Serializable';
export class Field extends BaseModel implements Serializable<Field>,FormGenerator<FormGroup>{
import { Multiplicity } from './Multiplicity';
export class Field extends BaseModel implements Serializable<Field>, FormGenerator<FormGroup>{
public id:string;
public title:string;
public value:string;
public description:string;
public extendedDescription:string;
public viewStyle:string;
public defaultVisibility:boolean;
public page:number;
public data:any;
fromJSONObject(item:any):Field{
public id: string;
public title: string;
public value: string;
public description: string;
public extendedDescription: string;
public viewStyle: string;
public defaultVisibility: boolean;
public page: number;
public multiplicity: Multiplicity;
public data: any;
fromJSONObject(item: any): Field {
this.id = item.id;
this.title = item.title;
this.value = item.value;
this.description = item.description;
this.extendedDescription = item.extendedDescription;
this.extendedDescription = item.extendedDescription;
this.viewStyle = item.viewStyle;
this.defaultVisibility = item.defaultVisibility;
this.page = item.page;
this.multiplicity = new JsonSerializer<Multiplicity>().fromJSONObject(item.multiplicity, Multiplicity);
this.data = item.data;
return this;
}
buildForm():FormGroup{
buildForm(): FormGroup {
let formGroup = this.formBuilder.group({
id: [this.id],
/* title: [this.title], */
id: [this.id],
/* title: [this.title], */
value: [this.value]/* ,
description: [this.description],
extendedDescription:[this.extendedDescription],
viewStyle: [this.viewStyle],
defaultVisibility:[this.defaultVisibility],
page:[this.page],
data:[this.data] */
});
data:[this.data] */
});
return formGroup;
}
cloneForMultiplicity(): Field {
let newItem: Field = new Field();
newItem.id = this.id;
newItem.title = this.title;
newItem.description = this.description;
newItem.extendedDescription = this.extendedDescription;
newItem.viewStyle = this.viewStyle;
newItem.defaultVisibility = this.defaultVisibility;
newItem.page = this.page;
newItem.multiplicity = null;
newItem.data = this.data;
return newItem;
}
}

23
dmp-frontend/src/app/models/Multiplicity.ts Normal file
View File

@ -0,0 +1,23 @@
import { BaseModel } from './BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { Serializable } from './interfaces/Serializable';
export class Multiplicity extends BaseModel implements Serializable<Multiplicity>, FormGenerator<FormGroup>{
public min: number;
public max: number;
fromJSONObject(item: any): Multiplicity {
this.min = item.min;
this.max = item.max;
return this;
}
buildForm(): FormGroup {
let formGroup = this.formBuilder.group({
min: [this.min],
max: [this.max]
});
return formGroup;
}
}

2
dmp-frontend/src/app/utilities/JsonSerializer.ts
View File

@ -2,7 +2,7 @@ import { Serializable } from '../models/interfaces/Serializable';
export class JsonSerializer<T extends Serializable<T>>{
public fromJSONArray(items: any[], type: { new(): T; }): T[] {
if(!items)return null;
if(!items)return new Array<T>();
const objectList: T[] = new Array<T>();
for (let i = 0; i < items.length; i++) {
objectList.push(new type().fromJSONObject(items[i]))

89
dmp-frontend/src/index.html
View File

@ -1,56 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Management Plans Creator</title>
<base href="/">
<meta name="csrf-token" content="2c64def7de30197c40276fe1a7ea874ca8871f70be7d7dc3305465a4d5c565e4">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--
<head>
<meta charset="utf-8">
<title>Data Management Plans Creator</title>
<base href="/">
<meta name="csrf-token" content="2c64def7de30197c40276fe1a7ea874ca8871f70be7d7dc3305465a4d5c565e4">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--
<script src="https://apis.google.com/js/platform.js" ></script>
-->
<link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.css"><!--bootstrap plugin for ToC-->
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.js"></script>
<!-- XML to json and vice versa lib -->
<script src="assets/xml2json.min.js"></script>
<!-- Json formatter lib -->
<link rel="stylesheet" type="text/css" href="assets/jquery.json-viewer.css">
<script src="assets/jquery.json-viewer.js"></script>
<!-- lib 4 pretty-printing xml and json -->
<script src="assets/vkbeautify.0.99.00.js"></script>
<!-- Nice BS notifications -->
<script src="assets/bootstrap-notify.min.js"></script>
<!-- that's google sign in library -->
<script src="https://apis.google.com/js/platform.js"></script>
<!-- font-awesome css -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.css">
<!--bootstrap plugin for ToC-->
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.js"></script>
<!-- Customized scrollbars source: https://github.com/utatti/perfect-scrollbar -->
<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>
<!-- XML to json and vice versa lib -->
<script src="assets/xml2json.min.js"></script>
<!-- Json formatter lib -->
<link rel="stylesheet" type="text/css" href="assets/jquery.json-viewer.css">
<script src="assets/jquery.json-viewer.js"></script>
<!-- lib 4 pretty-printing xml and json -->
<script src="assets/vkbeautify.0.99.00.js"></script>
<!-- Nice BS notifications -->
<script src="assets/bootstrap-notify.min.js"></script>
<!-- that's google sign in library -->
<script src="https://apis.google.com/js/platform.js"></script>
<!-- font-awesome css -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- my custom global code and css -->
<link rel="stylesheet" type="text/css" href="assets/custom.css">
<script src="assets/custom.js"></script>
<!-- Customized scrollbars source: https://github.com/utatti/perfect-scrollbar -->
<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>
<!-- my custom global code and css -->
<link rel="stylesheet" type="text/css" href="assets/custom.css">
<script src="assets/custom.js"></script>
</head>
<body>
<app-root class="full-height full-width"></app-root>
<app-root ></app-root>
</body>
</html>