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

admin editor UI changes

This commit is contained in:
Diamantis Tziotzios 2017-12-07 15:57:20 +02:00
parent 73c38f3ff3
commit 6599038b31
12 changed files with 1131 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

905
dmp-admin/package-lock.json generated
View File

@ -1241,6 +1241,7 @@
"requires": { "requires": {
"anymatch": "1.3.2", "anymatch": "1.3.2",
"async-each": "1.0.1", "async-each": "1.0.1",
"fsevents": "1.1.3",
"glob-parent": "2.0.0", "glob-parent": "2.0.0",
"inherits": "2.0.3", "inherits": "2.0.3",
"is-binary-path": "1.0.1", "is-binary-path": "1.0.1",
@ -2964,6 +2965,910 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true "dev": true
}, },
"fsevents": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz",
"integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==",
"dev": true,
"optional": true,
"requires": {
"nan": "2.7.0",
"node-pre-gyp": "0.6.39"
},
"dependencies": {
"abbrev": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
},
"ajv": {
"version": "4.11.8",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"co": "4.6.0",
"json-stable-stringify": "1.0.1"
}
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
},
"aproba": {
"version": "1.1.1",
"bundled": true,
"dev": true,
"optional": true
},
"are-we-there-yet": {
"version": "1.1.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"delegates": "1.0.0",
"readable-stream": "2.2.9"
}
},
"asn1": {
"version": "0.2.3",
"bundled": true,
"dev": true,
"optional": true
},
"assert-plus": {
"version": "0.2.0",
"bundled": true,
"dev": true,
"optional": true
},
"asynckit": {
"version": "0.4.0",
"bundled": true,
"dev": true,
"optional": true
},
"aws-sign2": {
"version": "0.6.0",
"bundled": true,
"dev": true,
"optional": true
},
"aws4": {
"version": "1.6.0",
"bundled": true,
"dev": true,
"optional": true
},
"balanced-match": {
"version": "0.4.2",
"bundled": true,
"dev": true
},
"bcrypt-pbkdf": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"tweetnacl": "0.14.5"
}
},
"block-stream": {
"version": "0.0.9",
"bundled": true,
"dev": true,
"requires": {
"inherits": "2.0.3"
}
},
"boom": {
"version": "2.10.1",
"bundled": true,
"dev": true,
"requires": {
"hoek": "2.16.3"
}
},
"brace-expansion": {
"version": "1.1.7",
"bundled": true,
"dev": true,
"requires": {
"balanced-match": "0.4.2",
"concat-map": "0.0.1"
}
},
"buffer-shims": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"caseless": {
"version": "0.12.0",
"bundled": true,
"dev": true,
"optional": true
},
"co": {
"version": "4.6.0",
"bundled": true,
"dev": true,
"optional": true
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
},
"combined-stream": {
"version": "1.0.5",
"bundled": true,
"dev": true,
"requires": {
"delayed-stream": "1.0.0"
}
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
},
"core-util-is": {
"version": "1.0.2",
"bundled": true,
"dev": true
},
"cryptiles": {
"version": "2.0.5",
"bundled": true,
"dev": true,
"requires": {
"boom": "2.10.1"
}
},
"dashdash": {
"version": "1.14.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "1.0.0"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"debug": {
"version": "2.6.8",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ms": "2.0.0"
}
},
"deep-extend": {
"version": "0.4.2",
"bundled": true,
"dev": true,
"optional": true
},
"delayed-stream": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"delegates": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"detect-libc": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
},
"ecc-jsbn": {
"version": "0.1.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"jsbn": "0.1.1"
}
},
"extend": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"extsprintf": {
"version": "1.0.2",
"bundled": true,
"dev": true
},
"forever-agent": {
"version": "0.6.1",
"bundled": true,
"dev": true,
"optional": true
},
"form-data": {
"version": "2.1.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"asynckit": "0.4.0",
"combined-stream": "1.0.5",
"mime-types": "2.1.15"
}
},
"fs.realpath": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"fstream": {
"version": "1.0.11",
"bundled": true,
"dev": true,
"requires": {
"graceful-fs": "4.1.11",
"inherits": "2.0.3",
"mkdirp": "0.5.1",
"rimraf": "2.6.1"
}
},
"fstream-ignore": {
"version": "1.0.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"fstream": "1.0.11",
"inherits": "2.0.3",
"minimatch": "3.0.4"
}
},
"gauge": {
"version": "2.7.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"aproba": "1.1.1",
"console-control-strings": "1.1.0",
"has-unicode": "2.0.1",
"object-assign": "4.1.1",
"signal-exit": "3.0.2",
"string-width": "1.0.2",
"strip-ansi": "3.0.1",
"wide-align": "1.1.2"
}
},
"getpass": {
"version": "0.1.7",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "1.0.0"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"glob": {
"version": "7.1.2",
"bundled": true,
"dev": true,
"requires": {
"fs.realpath": "1.0.0",
"inflight": "1.0.6",
"inherits": "2.0.3",
"minimatch": "3.0.4",
"once": "1.4.0",
"path-is-absolute": "1.0.1"
}
},
"graceful-fs": {
"version": "4.1.11",
"bundled": true,
"dev": true
},
"har-schema": {
"version": "1.0.5",
"bundled": true,
"dev": true,
"optional": true
},
"har-validator": {
"version": "4.2.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ajv": "4.11.8",
"har-schema": "1.0.5"
}
},
"has-unicode": {
"version": "2.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"hawk": {
"version": "3.1.3",
"bundled": true,
"dev": true,
"requires": {
"boom": "2.10.1",
"cryptiles": "2.0.5",
"hoek": "2.16.3",
"sntp": "1.0.9"
}
},
"hoek": {
"version": "2.16.3",
"bundled": true,
"dev": true
},
"http-signature": {
"version": "1.1.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "0.2.0",
"jsprim": "1.4.0",
"sshpk": "1.13.0"
}
},
"inflight": {
"version": "1.0.6",
"bundled": true,
"dev": true,
"requires": {
"once": "1.4.0",
"wrappy": "1.0.2"
}
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
},
"ini": {
"version": "1.3.4",
"bundled": true,
"dev": true,
"optional": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"requires": {
"number-is-nan": "1.0.1"
}
},
"is-typedarray": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"isarray": {
"version": "1.0.0",
"bundled": true,
"dev": true
},
"isstream": {
"version": "0.1.2",
"bundled": true,
"dev": true,
"optional": true
},
"jodid25519": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"jsbn": "0.1.1"
}
},
"jsbn": {
"version": "0.1.1",
"bundled": true,
"dev": true,
"optional": true
},
"json-schema": {
"version": "0.2.3",
"bundled": true,
"dev": true,
"optional": true
},
"json-stable-stringify": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"jsonify": "0.0.0"
}
},
"json-stringify-safe": {
"version": "5.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"jsonify": {
"version": "0.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"jsprim": {
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"assert-plus": "1.0.0",
"extsprintf": "1.0.2",
"json-schema": "0.2.3",
"verror": "1.3.6"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"mime-db": {
"version": "1.27.0",
"bundled": true,
"dev": true
},
"mime-types": {
"version": "2.1.15",
"bundled": true,
"dev": true,
"requires": {
"mime-db": "1.27.0"
}
},
"minimatch": {
"version": "3.0.4",
"bundled": true,
"dev": true,
"requires": {
"brace-expansion": "1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"dev": true,
"requires": {
"minimist": "0.0.8"
}
},
"ms": {
"version": "2.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"node-pre-gyp": {
"version": "0.6.39",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"detect-libc": "1.0.2",
"hawk": "3.1.3",
"mkdirp": "0.5.1",
"nopt": "4.0.1",
"npmlog": "4.1.0",
"rc": "1.2.1",
"request": "2.81.0",
"rimraf": "2.6.1",
"semver": "5.3.0",
"tar": "2.2.1",
"tar-pack": "3.4.0"
}
},
"nopt": {
"version": "4.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"abbrev": "1.1.0",
"osenv": "0.1.4"
}
},
"npmlog": {
"version": "4.1.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"are-we-there-yet": "1.1.4",
"console-control-strings": "1.1.0",
"gauge": "2.7.4",
"set-blocking": "2.0.0"
}
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
},
"oauth-sign": {
"version": "0.8.2",
"bundled": true,
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
"bundled": true,
"dev": true,
"optional": true
},
"once": {
"version": "1.4.0",
"bundled": true,
"dev": true,
"requires": {
"wrappy": "1.0.2"
}
},
"os-homedir": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
},
"os-tmpdir": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
},
"osenv": {
"version": "0.1.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"os-homedir": "1.0.2",
"os-tmpdir": "1.0.2"
}
},
"path-is-absolute": {
"version": "1.0.1",
"bundled": true,
"dev": true
},
"performance-now": {
"version": "0.2.0",
"bundled": true,
"dev": true,
"optional": true
},
"process-nextick-args": {
"version": "1.0.7",
"bundled": true,
"dev": true
},
"punycode": {
"version": "1.4.1",
"bundled": true,
"dev": true,
"optional": true
},
"qs": {
"version": "6.4.0",
"bundled": true,
"dev": true,
"optional": true
},
"rc": {
"version": "1.2.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"deep-extend": "0.4.2",
"ini": "1.3.4",
"minimist": "1.2.0",
"strip-json-comments": "2.0.1"
},
"dependencies": {
"minimist": {
"version": "1.2.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"readable-stream": {
"version": "2.2.9",
"bundled": true,
"dev": true,
"requires": {
"buffer-shims": "1.0.0",
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
"process-nextick-args": "1.0.7",
"string_decoder": "1.0.1",
"util-deprecate": "1.0.2"
}
},
"request": {
"version": "2.81.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"aws-sign2": "0.6.0",
"aws4": "1.6.0",
"caseless": "0.12.0",
"combined-stream": "1.0.5",
"extend": "3.0.1",
"forever-agent": "0.6.1",
"form-data": "2.1.4",
"har-validator": "4.2.1",
"hawk": "3.1.3",
"http-signature": "1.1.1",
"is-typedarray": "1.0.0",
"isstream": "0.1.2",
"json-stringify-safe": "5.0.1",
"mime-types": "2.1.15",
"oauth-sign": "0.8.2",
"performance-now": "0.2.0",
"qs": "6.4.0",
"safe-buffer": "5.0.1",
"stringstream": "0.0.5",
"tough-cookie": "2.3.2",
"tunnel-agent": "0.6.0",
"uuid": "3.0.1"
}
},
"rimraf": {
"version": "2.6.1",
"bundled": true,
"dev": true,
"requires": {
"glob": "7.1.2"
}
},
"safe-buffer": {
"version": "5.0.1",
"bundled": true,
"dev": true
},
"semver": {
"version": "5.3.0",
"bundled": true,
"dev": true,
"optional": true
},
"set-blocking": {
"version": "2.0.0",
"bundled": true,
"dev": true,
"optional": true
},
"signal-exit": {
"version": "3.0.2",
"bundled": true,
"dev": true,
"optional": true
},
"sntp": {
"version": "1.0.9",
"bundled": true,
"dev": true,
"requires": {
"hoek": "2.16.3"
}
},
"sshpk": {
"version": "1.13.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"asn1": "0.2.3",
"assert-plus": "1.0.0",
"bcrypt-pbkdf": "1.0.1",
"dashdash": "1.14.1",
"ecc-jsbn": "0.1.1",
"getpass": "0.1.7",
"jodid25519": "1.0.2",
"jsbn": "0.1.1",
"tweetnacl": "0.14.5"
},
"dependencies": {
"assert-plus": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
}
}
},
"string-width": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"requires": {
"code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0",
"strip-ansi": "3.0.1"
}
},
"string_decoder": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"requires": {
"safe-buffer": "5.0.1"
}
},
"stringstream": {
"version": "0.0.5",
"bundled": true,
"dev": true,
"optional": true
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"requires": {
"ansi-regex": "2.1.1"
}
},
"strip-json-comments": {
"version": "2.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"tar": {
"version": "2.2.1",
"bundled": true,
"dev": true,
"requires": {
"block-stream": "0.0.9",
"fstream": "1.0.11",
"inherits": "2.0.3"
}
},
"tar-pack": {
"version": "3.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"debug": "2.6.8",
"fstream": "1.0.11",
"fstream-ignore": "1.0.5",
"once": "1.4.0",
"readable-stream": "2.2.9",
"rimraf": "2.6.1",
"tar": "2.2.1",
"uid-number": "0.0.6"
}
},
"tough-cookie": {
"version": "2.3.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"punycode": "1.4.1"
}
},
"tunnel-agent": {
"version": "0.6.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.0.1"
}
},
"tweetnacl": {
"version": "0.14.5",
"bundled": true,
"dev": true,
"optional": true
},
"uid-number": {
"version": "0.0.6",
"bundled": true,
"dev": true,
"optional": true
},
"util-deprecate": {
"version": "1.0.2",
"bundled": true,
"dev": true
},
"uuid": {
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true
},
"verror": {
"version": "1.3.6",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"extsprintf": "1.0.2"
}
},
"wide-align": {
"version": "1.1.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"string-width": "1.0.2"
}
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
}
}
},
"fstream": { "fstream": {
"version": "1.0.11", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",

47
dmp-admin/src/app/compositefield-form/compositefield-form.component.html
View File

@ -1,8 +1,12 @@
<div> <div>
<label>
<input type="checkbox" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" /> Composite Field</label>
<label>
<input type="checkbox" [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)" /> Multiplicity</label>
<div [formGroup]="form"> <div [formGroup]="form">
<div class="form-row"> <div class="row">
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<div formGroupName="multiplicity"> <div *ngIf="isMultiplicityEnabled" formGroupName="multiplicity">
<div class="form-group"> <div class="form-group">
<h5 style="margin-left:15px; font-weight:bold;">Multiplicity</h5> <h5 style="margin-left:15px; font-weight:bold;">Multiplicity</h5>
<div class="col-md-2"> <div class="col-md-2">
@ -16,11 +20,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-md-4"> <div *ngIf="isComposite" class="form-group col-md-4">
<label>Ordinal</label> <label>Ordinal</label>
<input type="number" class="form-control" formControlName="ordinal"> <input type="number" class="form-control" formControlName="ordinal">
</div> </div>
<div class="form-group col-md-4"> <div *ngIf="isComposite" class="form-group col-md-4">
<label>Id</label> <label>Id</label>
<input type="string" class="form-control" formControlName="id"> <input type="string" class="form-control" formControlName="id">
</div> </div>
@ -28,24 +32,33 @@
</div> </div>
</div> </div>
<div *ngFor="let field of dataModel.fields let i=index;">
<h4 style="text-decoration: underline;">Fields
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteField(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</h4>
<field-form [form]="form.get('fields').get(''+i)" [dataModel]="field"></field-form>
<div> <field-form *ngIf="!isComposite" [form]="form.get('fields').get(''+0)" [dataModel]="dataModel.fields[0]" [showMultiplicity]="false" [indexPath]="indexPath + 'f' + 0"></field-form>
<a (click)="addNewField()" style="cursor: pointer">
Add another field + <div *ngIf="isComposite" class="panel-group" style="margin-top:10px;">
</a> <div *ngFor="let field of dataModel.fields let i=index;" class="panel panel-default">
<div class="panel-heading clearfix">
<a *ngIf="form.get('fields').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'f' + i}}" class="panel-title pull-left"
style="padding-top: 7.5px;">{{i + 1}}. {{form.get('fields').get(''+i).get('title').value}}</a>
<a *ngIf="!form.get('fields').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'f' + i}}" class="panel-title pull-left"
style="padding-top: 7.5px;">{{i + 1}}. Child Field {{i + 1}}</a>
<div class="btn-group pull-right">
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteField(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</div>
</div>
<div id="{{indexPath + 'f' + i}}" class="panel-collapse collapse in">
<div class="panel-body">
<field-form [form]="form.get('fields').get(''+i)" [dataModel]="field" [indexPath]="indexPath + 'f' + i"></field-form>
</div>
</div>
</div> </div>
</div> </div>
<div *ngIf="dataModel.fields.length == 0;"> <div *ngIf="isComposite">
<a (click)="addNewField()" style="cursor: pointer"> <a (click)="addNewField()" style="cursor: pointer">
Add another field + Add Child Field +
</a> </a>
</div> </div>

51
dmp-admin/src/app/compositefield-form/compositefield-form.component.ts
View File

@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { CompositeField } from '../models/CompositeField'; import { CompositeField } from '../models/CompositeField';
import { Field } from '../models/Field'; import { Field } from '../models/Field';
import { FormArray } from '@angular/forms/src/model'; import { FormArray, FormControl } from '@angular/forms/src/model';
@Component({ @Component({
selector: 'compositefield-form', selector: 'compositefield-form',
@ -11,22 +11,43 @@ import { FormArray } from '@angular/forms/src/model';
}) })
export class CompositeFieldFormComponent { export class CompositeFieldFormComponent {
@Input() form: FormGroup; @Input() form: FormGroup;
@Input() dataModel: CompositeField; @Input() dataModel: CompositeField;
@Input() indexPath: string;
isComposite: boolean = false;
isMultiplicityEnabled: boolean = false;
constructon(){} constructon() { }
ngOnInit(){ ngOnInit() {
//this.addNewField(); //this.addNewField();
} }
addNewField(){ onIsCompositeChange(isComposite: boolean) {
let field: Field = new Field(); if (!isComposite && (<FormArray>this.form.get("fields")).length > 1) {
this.dataModel.fields.push(field); for(let i = 0; i < (<FormArray>this.form.get("fields")).length - 1; i++) {
(<FormArray>this.form.get("fields")).push(field.buildForm()); (<FormArray>this.form.get("fields")).removeAt(1);
} }
DeleteField(index){ this.dataModel.fields.splice(1);
this.dataModel.fields.splice(index, 1); }
}
onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
if (!isMultiplicityEnabled) {
(<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
(<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
}
}
addNewField() {
let field: Field = new Field();
this.dataModel.fields.push(field);
(<FormArray>this.form.get("fields")).push(field.buildForm());
}
DeleteField(index) {
this.dataModel.fields.splice(index, 1);
(<FormArray>this.form.get("fields")).removeAt(index); (<FormArray>this.form.get("fields")).removeAt(index);
} }
} }

50
dmp-admin/src/app/field-form/field-form.component.html
View File

@ -1,6 +1,6 @@
<div> <div>
<div [formGroup]="form"> <div [formGroup]="form">
<div class="form-row"> <div class="row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label>Title</label> <label>Title</label>
<input type="text" class="form-control" formControlName="title"> <input type="text" class="form-control" formControlName="title">
@ -25,15 +25,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value"> <div class="form" [ngSwitch]="form.get('viewStyle').get('renderStyle').value">
<div *ngSwitchCase="'combobox'"> <div *ngSwitchCase="'combobox'">
<combobox-component [form]="form" [dataModel]= "dataModel"></combobox-component> <combobox-component [form]="form" [dataModel]="dataModel"></combobox-component>
</div> </div>
<div *ngSwitchCase="'radiobox'"> <div *ngSwitchCase="'radiobox'">
<radiobox-component [form]="form" [dataModel]= "dataModel"></radiobox-component> <radiobox-component [form]="form" [dataModel]="dataModel"></radiobox-component>
</div> </div>
</div> </div>
<div class="form-row"> <div class="row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label>description</label> <label>description</label>
<input type="text" class="form-control" formControlName="description"> <input type="text" class="form-control" formControlName="description">
@ -43,8 +43,8 @@
<input type="text" class="form-control" formControlName="extendedDescription"> <input type="text" class="form-control" formControlName="extendedDescription">
</div> </div>
</div> </div>
<div class="form-row"> <div class="row">
<div formGroupName="multiplicity"> <div *ngIf="isFieldMultiplicityEnabled" formGroupName="multiplicity">
<div class="form-group"> <div class="form-group">
<h5 style="margin-left:15px; font-weight:bold;">Multiplicity</h5> <h5 style="margin-left:15px; font-weight:bold;">Multiplicity</h5>
<div class="col-md-2"> <div class="col-md-2">
@ -79,20 +79,32 @@
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div *ngFor="let rule of dataModel.visible.rules let i=index;"> <label *ngIf="showMultiplicity">
<h4 style="text-decoration: underline;">Rules <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteRule(i);"><span class="glyphicon glyphicon-erase"></span></button></h4> <input type="checkbox" [(ngModel)]="isFieldMultiplicityEnabled" (ngModelChange)="onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled)"
<rule-form [form]="form.get('visible').get('rules').get(''+i)" [dataModel]="rule"></rule-form> /> Multiplicity</label>
<div>
<a (click)="addNewRule(form)" style="cursor: pointer"> <div class="panel-group" style="margin-top:10px;">
Add another rule + <div *ngFor="let rule of dataModel.visible.rules let i=index;" class="panel panel-default">
</a> <div class="panel-heading clearfix">
<a data-toggle="collapse" href="#{{indexPath + 'r' + i}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. Rule {{i + 1}}</a>
<div class="btn-group pull-right">
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteRule(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</div>
</div>
<div id="{{indexPath + 'r' + i}}" class="panel-collapse collapse in">
<div class="panel-body">
<rule-form [form]="form.get('visible').get('rules').get(''+i)" [dataModel]="rule"></rule-form>
</div>
</div>
</div> </div>
</div> </div>
<div *ngIf="dataModel.visible.rules.length == 0;"> <div>
<a (click)="addNewRule(form)" style="cursor: pointer"> <a (click)="addNewRule()" style="cursor: pointer">
Add another rule + Add Rule +
</a> </a>
</div> </div>

48
dmp-admin/src/app/field-form/field-form.component.ts
View File

@ -1,10 +1,10 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup, FormControl } from '@angular/forms';
import { Field } from '../models/Field'; import { Field } from '../models/Field';
import { Rule } from '../models/Rule'; import { Rule } from '../models/Rule';
import { Multiplicity } from '../models/Multiplicity'; import { Multiplicity } from '../models/Multiplicity';
import { FormArray } from '@angular/forms/src/model'; import { FormArray } from '@angular/forms/src/model';
import {ComboboxComponent} from '../combobox/combobox-component'; import { ComboboxComponent } from '../combobox/combobox-component';
@Component({ @Component({
selector: 'field-form', selector: 'field-form',
@ -13,25 +13,35 @@ import {ComboboxComponent} from '../combobox/combobox-component';
}) })
export class FieldFormComponent { export class FieldFormComponent {
@Input() form: FormGroup; @Input() form: FormGroup;
@Input() dataModel: Field; @Input() dataModel: Field;
@Input() showMultiplicity: boolean = true;
@Input() indexPath: string;
isFieldMultiplicityEnabled: boolean = false;
constructon(){} constructon() { }
ngOnInit(){ ngOnInit() {
console.log("init field") console.log("init field")
// this.addNewRule(); // this.addNewRule();
} }
addNewRule(){ onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) {
let rule: Rule = new Rule(); if (!isFieldMultiplicityEnabled) {
this.dataModel.visible.rules.push(rule); (<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
(<FormArray>this.form.get("visible").get("rules")).push(rule.buildForm()); (<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
} }
}
DeleteRule(index){ addNewRule() {
this.dataModel.visible.rules.splice(index, 1); let rule: Rule = new Rule();
(<FormArray>this.form.get("visible").get("rules")).removeAt(index); this.dataModel.visible.rules.push(rule);
} (<FormArray>this.form.get("visible").get("rules")).push(rule.buildForm());
}
DeleteRule(index) {
this.dataModel.visible.rules.splice(index, 1);
(<FormArray>this.form.get("visible").get("rules")).removeAt(index);
}
} }

39
dmp-admin/src/app/form/form.component.html
View File

@ -1,32 +1,37 @@
<div class="container"> <div class="container">
<div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;"> <div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;">
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> <form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-row"> <div class="row">
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<label>Label</label> <label>Label</label>
<input type="text" class="form-control" formControlName="label"> <input type="text" class="form-control" formControlName="label">
</div> </div>
</div> </div>
<div *ngFor="let section of dataModel.sections; let i=index;">
<h4 style="text-decoration: underline;">Section
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSection(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</h4>
<section-form [form]="form.get('sections').get(''+i)" [dataModel]="section" [index]="i"></section-form>
<div style="margin-top:20px; padding-left: 15px;">
<a (click)="addSection()" style="cursor: pointer">
Add another section +
</a>
</div>
<div class="panel-group" style="margin-top:10px;">
<div *ngFor="let section of dataModel.sections; let i=index;" class="panel panel-default">
<div class="panel-heading clearfix">
<a *ngIf="form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
style="padding-top: 7.5px;">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</a>
<a *ngIf="!form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
style="padding-top: 7.5px;">{{i + 1}}. Section {{i + 1}}</a>
<div class="btn-group pull-right">
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSection(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</div>
</div>
<div id="{{'s' + i}}" class="panel-collapse collapse in">
<div class="panel-body">
<section-form [form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"></section-form>
</div>
</div>
</div>
</div> </div>
<div style="margin-top:20px; padding-left: 15px;">
<div *ngIf="dataModel.sections.length == 0;" style="margin-top:20px; padding-left: 15px;">
<a (click)="addSection()" style="cursor: pointer"> <a (click)="addSection()" style="cursor: pointer">
Add another section + Add Section +
</a> </a>
</div> </div>

9
dmp-admin/src/app/form/form.component.ts
View File

@ -1,6 +1,6 @@
import { DatasetProfileService } from '../services/dataset-profile.service'; import { DatasetProfileService } from '../services/dataset-profile.service';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup, FormControl } from '@angular/forms';
import { JsonSerializer } from '../utilities/JsonSerializer'; import { JsonSerializer } from '../utilities/JsonSerializer';
import { SectionFormComponent } from '../section-form/section-form.component'; import { SectionFormComponent } from '../section-form/section-form.component';
import { Section } from '../models/Section'; import { Section } from '../models/Section';
@ -48,6 +48,13 @@ export class FormComponent {
// this.form = this.dataModel.buildForm(); // this.form = this.dataModel.buildForm();
} }
onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
if (!isMultiplicityEnabled) {
(<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
(<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
}
}
addSection() { addSection() {
let section: Section = new Section(); let section: Section = new Section();
this.dataModel.sections.push(section); this.dataModel.sections.push(section);

44
dmp-admin/src/app/groupfield-form/groupfield-form.component.html
View File

@ -1,7 +1,7 @@
<div> <div>
<!-- style="border-style: solid;"--> <!-- style="border-style: solid;"-->
<div [formGroup]="form"> <div [formGroup]="form">
<div class="form-row"> <div class="row">
<div class="form-group col-md-5"> <div class="form-group col-md-5">
<label>Title</label> <label>Title</label>
<input type="text" class="form-control" formControlName="title"> <input type="text" class="form-control" formControlName="title">
@ -24,7 +24,7 @@
</label> </label>
</div> </div>
</div> </div>
<div class="form-row"> <div class="row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label>Description</label> <label>Description</label>
<input type="text" class="form-control" formControlName="description"> <input type="text" class="form-control" formControlName="description">
@ -35,27 +35,33 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngFor="let field of dataModel.compositeFields let i=index;">
<h4 style="text-decoration: underline;">FieldSet
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldSet(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</h4>
<compositefield-form [form]="form.get('compositeFields').get(''+i)" [dataModel]="field"></compositefield-form>
<div> <div class="panel-group" style="margin-top:10px;">
<a (click)="addNewFieldSet()" style="cursor: pointer"> <div *ngFor="let field of dataModel.compositeFields let i=index;" class="panel panel-default">
Add another field Set (CompositeField) + <div class="panel-heading clearfix">
</a> <!-- <a *ngIf="form.get('compositeFields').get(''+i).get('title').value" data-toggle="collapse" href="#{{'compositeFieldCollapse' + i}}"
class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. {{form.get('compositeFields').get(''+i).get('title').value}}</a>
<a *ngIf="!form.get('compositeFields').get(''+i).get('title').value" data-toggle="collapse" href="#{{'compositeFieldCollapse' + i}}"
class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. Field {{i + 1}}</a> -->
<a data-toggle="collapse" href="#{{indexPath + 'cf' + i}}"
class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. Field {{i + 1}}</a>
<div class="btn-group pull-right">
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldSet(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</div>
</div>
<div id="{{indexPath + 'cf' + i}}" class="panel-collapse collapse in">
<div class="panel-body">
<compositefield-form [form]="form.get('compositeFields').get(''+i)" [dataModel]="field" [indexPath]="indexPath + 'cf' + i"></compositefield-form>
</div>
</div>
</div> </div>
</div> </div>
<div>
<div *ngIf="dataModel.compositeFields.length == 0;">
<a (click)="addNewFieldSet()" style="cursor: pointer"> <a (click)="addNewFieldSet()" style="cursor: pointer">
Add another field Set (CompositeField) + Add Field +
</a> </a>
</div> </div>
</div> </div>

3
dmp-admin/src/app/groupfield-form/groupfield-form.component.ts
View File

@ -14,7 +14,8 @@ import { Field } from '../models/Field';
export class GroupFieldFormComponent { export class GroupFieldFormComponent {
@Input() form: FormGroup; @Input() form: FormGroup;
@Input() dataModel: FieldGroup; @Input() dataModel: FieldGroup;
@Input() indexPath: string;
constructor(){} constructor(){}
ngOnInit(){ ngOnInit(){

5
dmp-admin/src/app/section-form/section-form.component.css Normal file
View File

@ -0,0 +1,5 @@
.section-container {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
padding: 24px;
}

60
dmp-admin/src/app/section-form/section-form.component.html
View File

@ -1,7 +1,6 @@
<div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;"> <div class="section-container">
<!--style="border-style: solid;"--> <div class="row" [formGroup]="form">
<div [formGroup]="form"> <div class="row">
<div class="form-row">
<div class="form-group col-md-5"> <div class="form-group col-md-5">
<label>Title</label> <label>Title</label>
<input type="text" class="form-control" formControlName="title"> <input type="text" class="form-control" formControlName="title">
@ -25,44 +24,29 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="dataModel.sections"> <div *ngIf="dataModel.fieldGroups" class="panel-group" style="margin-top:10px;">
<div *ngFor="let section of dataModel.sections let i=index;"> <div *ngFor="let fieldGroup of dataModel.fieldGroups let i=index;" class="panel panel-default">
<h4 style="text-decoration: underline;">Section <div class="panel-heading clearfix">
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSectionInSection(i);"> <a *ngIf="form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
<span class="glyphicon glyphicon-erase"></span> style="padding-top: 7.5px;">{{i + 1}}. {{form.get('fieldGroups').get(''+i).get('title').value}}</a>
</button> <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
</h4> style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a>
<section-form [form]="form.get('sections').get(''+i)" [dataModel]="section"></section-form> <div class="btn-group pull-right">
</div> <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldGroup(i);">
</div> <span class="glyphicon glyphicon-erase"></span>
<div *ngIf="dataModel.fieldGroups"> </button>
<div *ngFor="let fieldGroup of dataModel.fieldGroups let i=index;"> </div>
<h4 style="text-decoration: underline;">GroupFields </div>
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldGroup(i);"> <div id="{{indexPath + 'g' + i}}" class="panel-collapse collapse in">
<span class="glyphicon glyphicon-erase"></span> <div class="panel-body">
</button> <groupfield-form [form]="form.get('fieldGroups').get(''+i)" [dataModel]="fieldGroup" [indexPath]="indexPath + 'g' + i"></groupfield-form>
</h4> </div>
<groupfield-form [form]="form.get('fieldGroups').get(''+i)" [dataModel]="fieldGroup"></groupfield-form>
<div>
<a (click)="addGroupField()" style="cursor: pointer">
Add group +
</a>
</div> </div>
</div> </div>
</div> </div>
<div>
<div style="margin-top:20px; padding-left: 15px;">
<a (click)="addSectioninSection()" style="cursor: pointer">
Add section +
</a>
</div>
<div *ngIf="dataModel.fieldGroups.length == 0;">
<a (click)="addGroupField()" style="cursor: pointer"> <a (click)="addGroupField()" style="cursor: pointer">
Add group + Add Group +
</a> </a>
</div> </div>
</div> </div>

30
dmp-admin/src/app/section-form/section-form.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { Section } from '../models/Section'; import { Section } from '../models/Section';
import { FieldGroup } from '../models/FieldGroup'; import { FieldGroup } from '../models/FieldGroup';
@ -9,40 +9,42 @@ import { DatasetProfileModel } from '../models/DatasetProfileModel';
@Component({ @Component({
selector: 'section-form', selector: 'section-form',
templateUrl: './section-form.component.html', templateUrl: './section-form.component.html',
styleUrls: [] styleUrls: ['./section-form.component.css'],
encapsulation: ViewEncapsulation.None
}) })
export class SectionFormComponent { export class SectionFormComponent {
@Input() form: FormGroup; @Input() form: FormGroup;
@Input() dataModel:Section; @Input() dataModel: Section;
@Input() index:number; @Input() indexPath: string;
constructor(){ }
ngOnInit(){ constructor() { }
ngOnInit() {
//this.addGroupField(); //for new DatasetProfile //this.addGroupField(); //for new DatasetProfile
} }
addGroupField(){ addGroupField() {
let fieldGroup:FieldGroup = new FieldGroup(); let fieldGroup: FieldGroup = new FieldGroup();
if(this.dataModel.fieldGroups) if (this.dataModel.fieldGroups)
this.dataModel.fieldGroups.push(fieldGroup); this.dataModel.fieldGroups.push(fieldGroup);
(<FormArray>this.form.get("fieldGroups")).push(fieldGroup.buildForm()); (<FormArray>this.form.get("fieldGroups")).push(fieldGroup.buildForm());
} }
DeleteFieldGroup(index){ DeleteFieldGroup(index) {
this.dataModel.fieldGroups.splice(index, 1); this.dataModel.fieldGroups.splice(index, 1);
(<FormArray>this.form.get("fieldGroups")).removeAt(index) (<FormArray>this.form.get("fieldGroups")).removeAt(index)
} }
addSectioninSection(){ addSectioninSection() {
let section:Section = new Section(); let section: Section = new Section();
this.dataModel.sections.push(section); this.dataModel.sections.push(section);
(<FormArray>this.form.get("sections")).push(section.buildForm()); (<FormArray>this.form.get("sections")).push(section.buildForm());
} }
DeleteSectionInSection(index){ DeleteSectionInSection(index) {
this.dataModel.sections.splice(index); this.dataModel.sections.splice(index);
(<FormArray>this.form.get("sections")).removeAt(index); (<FormArray>this.form.get("sections")).removeAt(index);
} }
} }