diff --git a/projects/common-form-elements/package.json b/projects/common-form-elements/package.json index 82936c25a3d27ef5e2ea76f22f284c085ca8fee9..56255d20c0d18cb251252fd5f34fa24407d2fef9 100644 --- a/projects/common-form-elements/package.json +++ b/projects/common-form-elements/package.json @@ -1,6 +1,6 @@ { "name": "common-form-elements-v9", - "version": "4.1.2", + "version": "4.3.1", "peerDependencies": { "@angular/common": "^9.1.13", "@angular/core": "^9.1.13", diff --git a/projects/common-form-elements/src/lib/common-form-config.ts b/projects/common-form-elements/src/lib/common-form-config.ts index 6ffcb980e49f7ebdd581b3eca1f1aab441ad2e18..26e08e313bb8de58aba645e646232e2466a75179 100644 --- a/projects/common-form-elements/src/lib/common-form-config.ts +++ b/projects/common-form-elements/src/lib/common-form-config.ts @@ -122,7 +122,7 @@ export interface Validator { export type DynamicFieldConfigOptionsBuilder<T> = - (control: FormControl, depends?: FormControl[], formGroup?: FormGroup, notifyLoading?: () => void, + (control: CustomFormControl, depends?: FormControl[], formGroup?: FormGroup, notifyLoading?: () => void, notifyLoaded?: () => void) => Observable<FieldConfigOption<T>[]> | Promise<FieldConfigOption<T>[]>; @@ -144,4 +144,5 @@ export interface CustomFormControl extends FormControl { output?: any; customEventHandler$?: Subject<any>; shouldListenToCustomEvent?: Boolean; + isVisible?: any; } diff --git a/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.html b/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.html index e802d7d7b78ddbecaa3908148972e1b65709e9a2..ad3668d3a9811a5643f8c509f1181afc9bad7201 100644 --- a/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.html +++ b/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.html @@ -1,4 +1,4 @@ -<div class="sb-dropdown" *ngIf="!type"> +<div class="sb-dropdown" *ngIf="!type && formControlRef?.isVisible === 'yes'"> <label [attr.data-title]="field.description ? field.description : null">{{label}} {{context && 'has context'}} {{context ? field.context : '' }}</label> <ng-container *ngIf="options"> <div class="dropdown-container"> diff --git a/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.ts b/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.ts index d8b5a1c23521c27ad9211044c6e980dcee98714e..b776a0ddfdba1c175a6e31a9ac50fad4dafbcafb 100644 --- a/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.ts +++ b/projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.ts @@ -57,6 +57,7 @@ export class DynamicMultiSelectComponent implements OnInit, OnChanges, OnDestroy } ngOnInit() { + this.formControlRef.isVisible = 'yes'; if (!_.isEmpty(this.field.sourceCategory)) { this.formControlRef.sourceCategory = this.field.sourceCategory; } @@ -65,6 +66,10 @@ export class DynamicMultiSelectComponent implements OnInit, OnChanges, OnDestroy this.formControlRef.output = this.field.output; } + if (!this.options) { + this.options = _.isEmpty(this.field.options) ? this.isOptionsClosure(this.field.options) && this.field.options : []; + } + // if (this.context) { // this.contextValueChangesSubscription = this.context.valueChanges.pipe( // tap(() => { @@ -107,6 +112,15 @@ export class DynamicMultiSelectComponent implements OnInit, OnChanges, OnDestroy if (this.isOptionsClosure(this.options)) { // tslint:disable-next-line:max-line-length this.options$ = (this.options as DynamicFieldConfigOptionsBuilder<any>)(this.formControlRef, this.depends, this.formGroup, () => this.dataLoadStatusDelegate.next('LOADING'), () => this.dataLoadStatusDelegate.next('LOADED')) as any; + this.options$.subscribe( + (response: any) => { + if (response && response.range) { + this.field.range = response.range; + } else { + this.field.range = null; + } + } + ); } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index bfd304c20ffa3ad7c48c0e584a81f6bb2e248870..e54188777ed7aa08c717eacad8d613a86ecb6151 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,11 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { of } from 'rxjs'; +import { merge, of } from 'rxjs'; import { delay, switchMap } from 'rxjs/operators'; import { timer } from './formConfig'; import * as _ from 'lodash-es'; import * as moment_ from 'moment'; +let evidenceMimeType; @Component({ selector: 'app-root', templateUrl: 'app.component.html', @@ -13,6 +14,7 @@ import * as moment_ from 'moment'; export class AppComponent implements OnInit { title = 'sunbird-forms'; config: any = timer; + evidenceMimeType: any; ngOnInit() { @@ -21,6 +23,11 @@ export class AppComponent implements OnInit { if (field.code === 'framework') { field.options = this.getFramework; } + if (field.code === 'evidenceMimeType') { + evidenceMimeType = field.range; + field.options = this.setEvidence; + field.range = null; + } }); }); @@ -352,4 +359,19 @@ export class AppComponent implements OnInit { return response; } + setEvidence(control, depends: FormControl[], formGroup: FormGroup, loading, loaded) { + control.isVisible = 'no'; + const response = merge(..._.map(depends, depend => depend.valueChanges)).pipe( + switchMap((value: any) => { + if (!_.isEmpty(value) && _.toLower(value) === 'yes') { + control.isVisible = 'yes'; + return of({range: evidenceMimeType}); + } else { + control.isVisible = 'no'; + return of(null); + } + }) + ); + return response; + } } diff --git a/src/app/formConfig.ts b/src/app/formConfig.ts index ec0d873b4a92fd16ef60643b35571bb791c6c236..91d2e9e71627bcbd1ba81d2b5cf231c7bef98421 100644 --- a/src/app/formConfig.ts +++ b/src/app/formConfig.ts @@ -2,6 +2,59 @@ export const timer = [ { 'name': 'First Section', 'fields': [ + { + 'code': 'showEvidence', + 'dataType': 'text', + 'description': 'Allow Evidence', + 'editable': true, + 'index': 5, + 'inputType': 'radio', + 'label': 'Allow Evidence', + 'name': 'showEvidence', + 'placeholder': 'showEvidence', + 'renderingHints': { + 'class': 'sb-g-col-lg-1' + }, + 'range': [ + 'Yes', + 'No' + ], + 'required': true, + 'visible': true + }, + { + 'code': 'evidenceMimeType', + 'dataType': 'list', + 'depends': [ + 'showEvidence' + ], + 'description': 'Evidence', + 'editable': true, + 'inputType': 'multiselect', + 'label': 'evidence', + 'name': 'evidenceMimeType', + 'placeholder': 'evidence', + 'renderingHints': { + 'class': 'sb-g-col-lg-1' + }, + 'required': false, + 'visible': true, + 'range': [ + { + 'value': 'image/png', + 'label': 'image/png' + }, + {'value': 'audio/mp3', + 'label': 'audio/mp3' + }, + {'value': 'video/mp4', + 'label': 'video/mp4' + }, + {'value': 'video/webm', + 'label': 'video/webm' + } + ] + }, { 'code': 'appIcon', 'dataType': 'text', @@ -72,7 +125,7 @@ export const timer = [ }, { 'type': 'dateFormat', - 'value':"YYYY-MM-DD[T]HH:mm:ss.SSS[Z]", + 'value':'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]', 'message': 'Date format not matched' } ]