Merge branch 'master' of git@gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot.git
This commit is contained in:
Nikolaos Laskaris
commit
c7e8fe4f5f
|
|
@ -1,5 +1,5 @@
|
||||||
<div [formGroup]="form" class="form-group">
|
<div [formGroup]="form" class="form-group">
|
||||||
|
<h4 [id]= "group.key">{{group.title}}</h4>
|
||||||
<div *ngFor="let field of group.groupFields" >
|
<div *ngFor="let field of group.groupFields" >
|
||||||
<df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
|
<df-field [field]="field" [form]="form" [dataModel] = "dataModel"></df-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
<div>{{field.description}}</div>
|
<div>{{field.description}}</div>
|
||||||
|
|
||||||
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
|
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
|
||||||
[(ngModel)]="field.value" [required]="field.required" [pattern] = "field.regex">
|
[(ngModel)]="field.value" [required]="field.required" [pattern] = "field.regex" (blur) = "toggleVisibility($event, field)">
|
||||||
|
|
||||||
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control"[formControlName]="field.key" [(ngModel)]="field.value" [required]="field.required">
|
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control"[formControlName]="field.key" [(ngModel)]="field.value" [required]="field.required">
|
||||||
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
|
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
|
||||||
|
|
|
||||||
|
|
@ -79,17 +79,36 @@ export class DynamicFormFieldComponent {
|
||||||
this.dataModel.getFieldByKey(rule._target).visible = false;
|
this.dataModel.getFieldByKey(rule._target).visible = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (rule._ruleStyle == "existence") {
|
||||||
|
if (field.visible == "true" || field.visible == true) {
|
||||||
|
this.dataModel.getFieldByKey(rule._target).visible = true;
|
||||||
|
this.AddvalidationRules(rule._target);
|
||||||
|
} else {
|
||||||
|
this.dataModel.getFieldByKey(rule._target).visible = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (rule._ruleStyle == "regex") {
|
||||||
|
if (new RegExp(rule.__cdata).test(field.value)) {
|
||||||
|
this.dataModel.getFieldByKey(rule._target).visible = true;
|
||||||
|
this.AddvalidationRules(rule._target);
|
||||||
|
} else {
|
||||||
|
this.dataModel.getFieldByKey(rule._target).visible = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleVisibility(e, field, ckb) { //ckb the checkbox only send this parameter, it's essential to change the field value
|
toggleVisibility(e, field, ckb) { //ckb the checkbox only send this parameter, it's essential to change the field value
|
||||||
if (ckb)
|
if (ckb)
|
||||||
field.value = ckb.checked;
|
field.value = ckb.checked;
|
||||||
field.rules.forEach(rule => {
|
if(field.rules.length != undefined && field.rules.length > 1)
|
||||||
if (rule._type == "fieldValue") {
|
field.rules.forEach(rule => {
|
||||||
this.FieldValueRuleMethod(field, rule);
|
if (rule._type == "fieldValue") {
|
||||||
}
|
this.FieldValueRuleMethod(field, rule);
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
else if(field.rules._type == "fieldValue"){
|
||||||
|
this.FieldValueRuleMethod(field,field.rules);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
AddvalidationRules(field) {
|
AddvalidationRules(field) {
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,26 @@
|
||||||
<body data-spy="scroll" data-target="#toc">
|
<body data-spy="scroll" data-target="#toc">
|
||||||
<nav id="toc" data-toggle="toc">
|
<nav id="toc" data-toggle="toc">
|
||||||
<ul class="nav flex-column">
|
<ul class="nav flex-column">
|
||||||
<li class="nav-item" >
|
<li class="nav-item">
|
||||||
<a class="nav-link" *ngFor ="let group of dataModel.groups" href="#group.key">{{group.title}}</a>
|
<div *ngFor="let group of dataModel.groups">
|
||||||
|
<ul>
|
||||||
|
<li><a class="nav-link" href="#group.key">{{group.title}}</a>
|
||||||
|
<ul *ngFor="let field of group.groupFields">
|
||||||
|
<li *ngIf= "field.visible == 'true'" >
|
||||||
|
<a class="nav-link" href="#field.key">{{field.label}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -6,16 +6,44 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> -->
|
<!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> -->
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
<form class="form-signin">
|
||||||
|
<h2 class="form-signin-heading">Please sign in</h2>
|
||||||
|
<label for="inputEmail" class="sr-only">Email address</label>
|
||||||
|
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||||
|
<label for="inputPassword" class="sr-only">Password</label>
|
||||||
|
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value="remember-me"> Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="form-signin">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h5>Sign in with</h5>
|
||||||
|
</div>
|
||||||
|
<google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- /container -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="container">
|
||||||
<div class="col-md-3 text-center">
|
<div class="col-md-3 text-center">
|
||||||
<h4>Please Sign in</h4>
|
<h4>Please Sign in with Google Account</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 text-center">
|
<div class="col-md-3 text-center">
|
||||||
<div>
|
<div>
|
||||||
<google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin>
|
<google-signin [clientId]="myClientId" (googleSignInSuccess)="onGoogleSignInSuccess($event)"></google-signin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<!-- <button routerLink="/dynamic-form">Go to form</button>
|
<!-- <button routerLink="/dynamic-form">Go to form</button>
|
||||||
<button routerLink="/projects">Go to projects</button> trial for routing -->
|
<button routerLink="/projects">Go to projects</button> trial for routing -->
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,12 @@ import { Project } from '../entities/model/project';
|
||||||
selector: 'projects',
|
selector: 'projects',
|
||||||
template: `
|
template: `
|
||||||
<h1 class="title">Projects</h1>
|
<h1 class="title">Projects</h1>
|
||||||
<a href="#" onclick="signOut();">Sign out</a>
|
|
||||||
<ul class="items">
|
<ul class="list-group col-md-4">
|
||||||
<li *ngFor="let project of projects"
|
<li *ngFor="let project of projects"
|
||||||
[class.selected]="project.id === selectedId">
|
class="list-group-item">
|
||||||
<a [routerLink]="['/dynamic-form', project.id]">
|
<a [routerLink]="['/dynamic-form', project.id]" >
|
||||||
<span class="badge">{{ project.id }}</span>{{ project.name }}
|
{{ project.name }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,42 @@
|
||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-signin {
|
||||||
|
max-width: 330px;
|
||||||
|
padding: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-shadow: 0px 0px 0px 1px #d8d4d4;
|
||||||
|
}
|
||||||
|
.form-signin .form-signin-heading,
|
||||||
|
.form-signin .checkbox {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.form-signin .checkbox {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.form-signin .form-control {
|
||||||
|
position: relative;
|
||||||
|
height: auto;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.form-signin .form-control:focus {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.form-signin input[type="email"] {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.form-signin input[type="password"] {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue