Issue #SH-429 merge: Merge pull request #1018 from NavKumarV/release-…

…3.1.0 Issue #SH-429 fix: Updating the common forms with closure
Sunbird-Ed · Jul 4, 2020 · e857ffc · e857ffc
2 parents c26cc28 + 54c1711
commit e857ffc
Show file tree

Hide file tree

Showing 25 changed files with 1,281 additions and 399 deletions.
diff --git a/buildConfig/data/staging/form/form-user_manageduser_create_v2.json b/buildConfig/data/staging/form/form-user_manageduser_create_v2.json
@@ -0,0 +1,51 @@
+{
+  "id": "api.form.read",
+  "params": {
+    "resmsgid": "e6af6255-4c10-440d-ba35-9fc870a04163",
+    "msgid": "573d138b-846d-4b26-9c21-a173433073c0",
+    "status": "successful"
+  },
+  "responseCode": "OK",
+  "result": {
+    "form": {
+      "type": "user",
+      "subType": "manageduser",
+      "action": "create_v2",
+      "component": "app",
+      "framework": "*",
+      "rootOrgId": "*",
+      "data": {
+        "templateName": "manageduser",
+        "action": "create",
+        "fields": [
+          {
+            "code": "name",
+            "type": "input",
+            "templateOptions": {
+              "label": "FULL_NAME",
+              "placeholder": "ENTER_USER_NAME"
+            },
+            "validations": [
+              {
+                "type": "required",
+                "value": true,
+                "message": "NAME_IS_REQUIRED"
+              }
+            ]
+          },
+          {
+            "code": "updatePreference",
+            "type": "label",
+            "templateOptions": {
+              "label": "PREFERENCES_CAN_BE_UPDATED"
+            }
+          }
+        ]
+      },
+      "created_on": "2019-06-28T05:55:40.560Z",
+      "last_modified_on": null
+    }
+  },
+  "ts": "2019-06-28T07:21:30.126Z",
+  "ver": "1.0"
+}
diff --git a/main.js b/main.js
@@ -54,6 +54,11 @@ var formRequestArray = [{
         'subType': 'manageduser',
         'action': 'create'
     },
+    {
+        'type': 'user',
+        'subType': 'manageduser',
+        'action': 'create_v2'
+    },
     {
         'type': 'group',
         'subType': 'activities',

diff --git a/src/app/components/common-forms/common-forms.component.html b/src/app/components/common-forms/common-forms.component.html
@@ -1,52 +1,115 @@
-<form [formGroup]="commonFormGroup">
-
-  <ng-container *ngFor = "let formElement of formList; let i=index">    
-
-    <ng-container *ngIf="commonFormGroup.get(formElement.code); let formControl">
-      <ion-item class="input-item cf-input-primary" *ngIf="formElement.type === formInputTypes.INPUT"
-        [ngClass]="{'': (formControl.dirty || formControl.touched) && !formControl.errors ,'cf-input-error': (formControl.dirty || formControl.touched) && formControl.errors }"> 
-        <ion-label position="stacked" class="label-font align-text ion-text-capitalize">{{ formElement.templateOptions?.label | translate }}</ion-label>
-        <ion-input formControlName="{{formElement.code}}" (input)="onInputChange()" placeholder="{{ formElement.templateOptions?.placeHolder | translate}}"></ion-input>
-        <ng-container *ngFor="let validation of formElement.validations">
-          <div class="cf-error" *ngIf="(validation.type && (validation.type).toLowerCase && validation.message && formControl.errors && formControl.errors[(validation.type).toLowerCase()] && (formControl.dirty || formControl.touched))">
-            {{ validation.message | translate }}
+<div [formGroup]="formGroup">
+  <ng-container *ngFor="let field of config; let index = i">
+
+    <div *ngIf="field.type === FieldConfigInputType.SELECT || field.type === FieldConfigInputType.NESTED_SELECT"
+      [hidden]="field.templateOptions?.hidden || null">
+      <div class="sb-dropdown">
+          <ion-item class="input-item">
+            <ion-label position="stacked" class="label-font align-text">
+              {{ field.templateOptions?.label | translate }} 
+              <ion-text *ngIf="field.templateOptions?.label && requiredFieldsMap[field.code]">
+                <span class="required-star">&nbsp;*</span>
+              </ion-text>
+            </ion-label>
+            <ion-select [formControl]="formGroup.get(field.code)" [multiple]="false"
+              [interfaceOptions]="{
+                header: field.templateOptions?.label,
+                cssClass: 'select-box',
+                animated: false
+              }"
+              [disabled]="field.disabled || (field.context && formGroup.get(field.context).invalid)"
+              [compareWith]="ValueComparator.valueComparator"
+              placeholder="{{ field.templateOptions?.placeHolder | translate }}"
+              okText="{{'BTN_SUBMIT' | translate}}" cancelText="{{'CANCEL' | translate}}">
+
+              <ng-container *ngIf="isOptionsArray(field.templateOptions?.options)">
+                <ion-select-option *ngFor="let option of field.templateOptions?.options" [value]="option?.value">
+                  {{option?.label}}
+                </ion-select-option>
+              </ng-container>
+
+              <ng-container *ngIf="isOptionsClosure(field.templateOptions?.options) && optionsMap$[field.code]">
+                <ion-select-option *ngFor="let option of (optionsMap$[field.code]) | async" [value]="option?.value">
+                  {{option?.label}}
+                </ion-select-option>
+              </ng-container>
+
+            </ion-select>
+
+          </ion-item>
+      </div>
+    </div>
+
+    <div *ngIf="field.type === FieldConfigInputType.INPUT" [hidden]="field.templateOptions?.hidden || null">
+      <ng-container *ngIf="formGroup.get(field.code); let formControl">
+        <ion-item class="input-item cf-input-primary">
+          <ion-label position="stacked" class="label-font align-text ion-text-capitalize">
+            {{ field.templateOptions?.label | translate }}
+            <ion-text *ngIf="field.templateOptions?.label && requiredFieldsMap[field.code]">
+              <span class="required-star">&nbsp;*</span>
+            </ion-text>
+          </ion-label>
+
+          <div class="W100 merged-input-container MT16" style="text-align:start"
+            [ngClass]="{'': (!formControl.dirty || !formControl.touched) && !formControl.errors ,'cf-input-error': (formControl.dirty || formControl.touched) && formControl.errors }">
+
+            <span class="prefix" *ngIf="field.templateOptions?.prefix">{{field.templateOptions?.prefix}}</span>
+
+            <ion-input formControlName="{{field.code}}"
+              placeholder="{{ field.templateOptions?.placeHolder | translate}}" class="form-control custom">
+            </ion-input>
+
+            <span class="otp-validator" *ngIf="field.asyncValidation"> 
+              <img *ngIf="formControl.value && formControl.status === 'VALID'" src="assets/imgs/green_tick.svg" alt="verification success">
+              <img *ngIf="formControl.value && formControl.status !== 'VALID'" src="assets/imgs/red_exclamation.svg" alt="verification failure">
+              <img *ngIf="!formControl.value" src="assets/imgs/empty_circle.svg" alt="empty field">
+            </span>
+
+          </div>
+
+          <ng-container *ngFor="let validation of field.validations">
+            <div class="cf-error"
+              *ngIf="(validation.type && (validation.type).toLowerCase && validation.message && formControl.errors && formControl.errors[(validation.type).toLowerCase()] && (formControl.dirty || formControl.touched))">
+              {{ validation.message | translate }}
+            </div>
+          </ng-container>
+        </ion-item>
+
+        <ng-container *ngIf="field.asyncValidation?.trigger">
+          <div class="verification-btn" [hidden]="formControl.status === 'VALID' || formControl.status !== 'PENDING' || !formControl.value">
+            <ion-button class="ion-text-capitalize"
+              shape="round"
+              #validationTrigger
+              [attr.data-marker]="field.asyncValidation.marker">
+                {{field.asyncValidation.trigger}}
+            </ion-button>
           </div>
         </ng-container>
-      </ion-item>
-    </ng-container>
-
-    <ion-item class="input-item" appCustomIonSelect *ngIf="formElement.type === formInputTypes.SELECT">
-      <ion-label position="stacked" class="label-font align-text">{{ formElement.templateOptions?.label | translate }}</ion-label>
-      <ion-select
-        formControlName="{{formElement.code}}"
-        [multiple]="formElement.templateOptions?.multiple"
-        [interfaceOptions]="fetchInterfaceOption(formElement.templateOptions?.label)"
-        [disabled]="!formElement.templateOptions?.options?.length || checkDisableCondition(formElement)"
-        placeholder="{{ formElement.templateOptions?.placeHolder | translate }}"
-        okText="{{'BTN_SUBMIT' | translate}}"
-        cancelText="{{'CANCEL' | translate}}"
-        (ionChange)="onInputChange($event)">
-        <ion-select-option *ngFor="let selectElement of formElement.templateOptions?.options" value="{{selectElement?.value}}">
-          {{selectElement?.label}}
-        </ion-select-option>
-      </ion-select>
-    </ion-item>
-
-    <div class="flex-container M16" *ngIf="formElement.type === formInputTypes.CHECKBOX">
+      </ng-container>
+
+    </div>
+
+    <div class="flex-container M16" *ngIf="field.type === FieldConfigInputType.CHECKBOX"
+      [hidden]="field.templateOptions?.hidden || null">
       <div>
-        <ion-checkbox formControlName="{{formElement.code}}" (ionChange)="onInputChange()"></ion-checkbox>
+        <ion-checkbox formControlName="{{field.code}}"></ion-checkbox>
       </div>
-      <ng-container *ngIf="formElement.templateOptions?.label">
-        <span>{{ formElement.templateOptions?.label | translate}}</span>
+      <ng-container *ngIf="field.templateOptions?.label">
+        <span>{{ field.templateOptions?.label | translate}}</span>
       </ng-container>
-      <ng-container *ngIf="formElement.templateOptions?.labelHtml">
-        <div [innerHTML]="formElement.templateOptions?.labelHtml | translateHtml" (click)="handleClick($event)"></div>
+      <ng-container *ngIf="field.templateOptions?.labelHtml">
+        <div [innerHTML]="field.templateOptions?.labelHtml | translateHtml" (click)="handleLinkClick($event)"></div>
       </ng-container>
     </div>
 
-    <div class="M16" *ngIf="formElement.type === formInputTypes.LABEL">
-      {{formElement.templateOptions?.label | translate}}
+    <div class="M16" *ngIf="field.type === FieldConfigInputType.LABEL">
+      {{field.templateOptions?.label | translate}}
     </div>
-  </ng-container>
 
-</form>
+    <app-common-forms *ngIf="field.type === FieldConfigInputType.NESTED_GROUP"
+      (initialize)="onNestedFormInitialize($event, field)" (finalize)="onNestedFormFinalize($event, field)"
+      [dataLoadStatusDelegate]="dataLoadStatusDelegate" [config]="field.children">
+    </app-common-forms>
+
+  </ng-container>
+</div>
diff --git a/src/app/components/common-forms/common-forms.component.scss b/src/app/components/common-forms/common-forms.component.scss
@@ -78,19 +78,18 @@
 
   .item-label-stacked ion-input {
     border-radius: 5px;
-    margin-top: 16px;
     padding-left: 16px !important;
     padding-right: 16px !important;
     font-size: 14px;
   }
 
   .cf-input-primary ion-input{
     font-weight: bold;
-    border: 1px solid map-get($colors, primary);
+    border: none;
     --placeholder-opacity: 0.3 !important;
   }
 
-  .cf-input-error ion-input{
+  .cf-input-error{
     border: 1px solid red;
   }
 
@@ -186,4 +185,47 @@ ion-checkbox {
   margin-right: 8px;
   --background-checked: #{$blue} !important;
   --border-color-checked: #{$blue} !important;
+}
+
+.merged-input-container {
+  border: 1px solid map-get($colors, primary);
+  display: flex;
+  flex: 1 1 auto;
+  border-radius: 6px;
+  .decorator {
+    display: inline-block;
+    max-width: 50px;
+  }
+  .custom {
+    display: inline-block;
+  }
+  ion-input{
+    border: none;
+  }
+  span{
+    font-size: 14px;
+    opacity: 0.7;
+    margin: auto;
+  }
+
+}
+
+.verification-btn{
+  text-align: center;
+  ion-button {
+    --background: #008840 !important;
+  }
+}
+
+.otp-validator{
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.prefix{
+  padding-left: 8px;;
+}
+
+.required-star{
+  color: red;
 }