From 51db10bd8b6345eecd4bf3839d167dd27ad45aa1 Mon Sep 17 00:00:00 2001
From: annampak <annampak@hotmail.com>
Date: Wed, 4 Oct 2017 16:30:38 +0300
Subject: [PATCH] Toc improvements, visibility rules

---
 .../fields/dynamic-form-field.component.html  |  2 +-
 .../fields/dynamic-form-field.component.ts    | 31 +++++++++++++++----
 .../form/tableOfContents/toc.component.html   | 30 +++++++++++++-----
 3 files changed, 49 insertions(+), 14 deletions(-)
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
index fd9c32563..c54268fc0 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
@@ -33,7 +33,7 @@
     <div>{{field.description}}</div>
     
     <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">
       <option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
index 0104b2ac4..20a468b6c 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
+++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
@@ -79,17 +79,36 @@ export class DynamicFormFieldComponent {
                 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
         if (ckb)
             field.value = ckb.checked;
-        field.rules.forEach(rule => {
-            if (rule._type == "fieldValue") {
-                this.FieldValueRuleMethod(field, rule);
-            }
-        });
-
+        if(field.rules.length != undefined && field.rules.length > 1)
+            field.rules.forEach(rule => {
+                if (rule._type == "fieldValue") {
+                    this.FieldValueRuleMethod(field, rule);
+                }
+            });
+        else if(field.rules._type ==  "fieldValue"){
+            this.FieldValueRuleMethod(field,field.rules);
+        }
     }
 
     AddvalidationRules(field) {
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
index 4af29a0dc..40a6f0e3c 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
@@ -1,10 +1,26 @@
 <body data-spy="scroll" data-target="#toc">
-        <nav id="toc" data-toggle="toc">
-                <ul class="nav flex-column">
-                    <li class="nav-item" >
-                         <a class="nav-link" *ngFor ="let group of dataModel.groups" href="#group.key">{{group.title}}</a>
+    <nav id="toc" data-toggle="toc">
+        <ul class="nav flex-column">
+            <li class="nav-item">
+                <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>
-                    </ul>
-                </nav>
-</body>
 
+                    </ul>
+                        
+                        
+                </div>               
+
+                        
+
+
+            </li>
+        </ul>
+    </nav>
+</body>
