aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/formControls
diff options
context:
space:
mode:
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/formControls')
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html40
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts74
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts45
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.service.ts50
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.model.ts11
5 files changed, 129 insertions, 91 deletions
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
index f7c4894b2..f205259e4 100644
--- a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
@@ -1,16 +1,26 @@
-<div>
- <div class="details-item" *ngIf="data != null && form != null">
- <label [ngClass]="{'required': data.isRequired()}"
- for="{{data?.dataTestId}}">{{data?.displayName}}:</label>
- <angular2-multiselect id="{{data?.dataTestId}}"
- [attr.data-tests-id]="data?.dataTestId"
- [formControl]="form.controls[data.controlName]"
- [(ngModel)]="data.selectedItems"
- [data]="data?.options$"
- [settings]="data?.settings"
- title="{{data.tooltip}}"
- [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}">
- </angular2-multiselect>
- </div>
-</div>
+<div class="details-item" *ngIf="data != null && form != null">
+ <label [ngClass]="{'required': data.isRequired()}"
+ for="{{data?.dataTestId}}-select">{{data?.displayName}}:</label>
+
+ <angular2-multiselect
+ [attr.data-tests-id]="data?.dataTestId"
+ [data]="options"
+ [(ngModel)]="selectedItems"
+ [settings]="dropdownSettings"
+ (onSelect)="onItemSelect($event)"
+ (onDeSelect)="OnItemDeSelect($event)"
+ (onSelectAll)="onSelectAll($event)"
+ (onDeSelectAll)="onDeSelectAll($event)">>
+ <c-item>
+ <ng-template let-item="item">
+ <label
+ [attr.data-tests-id]="data.dataTestId + '-' + item?.itemName"
+ style="color: #333;min-width: 150px;">{{item?.itemName}}</label>
+ </ng-template>
+ </c-item>
+ </angular2-multiselect>
+
+ <form-control-error *ngIf="data?.hasEmptyOptions && data?.isRequired()"
+ [message]="'No results for this request. Please change criteria.'"></form-control-error>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts
deleted file mode 100644
index 81c8d4679..000000000
--- a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
-import {CommonModule} from "@angular/common";
-import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
-import {
- ValidatorModel,
- ValidatorOptions
-} from "../../../../models/formControlModels/formControl.model";
-import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component";
-import {BrowserModule} from "@angular/platform-browser";
-import {MultiselectFormControlComponent} from "./multiselect.formControl.component";
-import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model";
-import { of } from "rxjs";
-describe('Dropdown Form Control Component', () => {
- let component: MultiselectFormControlComponent;
- let fixture: ComponentFixture<MultiselectFormControlComponent>;
- let fb: FormBuilder;
-
- beforeAll(done => (async () => {
- TestBed.configureTestingModule({
- imports: [CommonModule, BrowserModule, ReactiveFormsModule],
- providers: [FormBuilder],
- declarations: [MultiselectFormControlComponent, FormControlMessageErrorComponent],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
- });
- await TestBed.compileComponents();
-
- fixture = TestBed.createComponent(MultiselectFormControlComponent);
- component = fixture.componentInstance;
- fb = TestBed.get(FormBuilder);
-
- })().then(done).catch(done.fail));
-
- test('component should initialize basic parameters', () => {
- component.data = new MultiselectFormControl({
- displayName: "display Name",
- validations: [new ValidatorModel(ValidatorOptions.required, 'is required')],
- dataTestId: "data-test-id",
- placeHolder: "place holder",
- controlName: 'testDropdown',
- options: of([
- 'option1',
- 'option2',
- 'option3',
- 'onBlur'
- ])
- });
-
- component.data.hasErrors = function () {
- return this.formGroup.controls[this.controlName].touched && this.formGroup.controls[this.controlName].errors ? ['error-style'] : [];
- };
-
- component.data.onBlur = function () {
- component.form.controls['testDropdown'].setValue('onBlur');
- };
-
- component.form = fb.group({
- 'testDropdown': new FormControl({
- value: component.data.value,
- disabled: false
- }, Validators.compose(component.data.validations.map(item => item.validator)))
- });
-
- component.form.controls['testDropdown'].setValue('');
- expect(component.form.controls['testDropdown'].errors.required).toBeTruthy();
- component.form.controls['testDropdown'].setValue('option2');
- expect(component.form.controls['testDropdown'].errors).toBeFalsy();
- component.data.onBlur();
- expect(component.form.controls['testDropdown'].value).toEqual('onBlur');
- expect(component.form.controls['testDropdown'].errors).toBeFalsy();
- }
- )
-});
-
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
index 4b98c7e26..9b900dedf 100644
--- a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
@@ -1,6 +1,8 @@
import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
import {FormGroup} from "@angular/forms";
import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model";
+import {MultiselectFormControlService} from "./multiselect.formControl.service";
+import {MultiSelectItem} from "./multiselect.model";
@Component({
selector: 'multiselect-form-control',
@@ -8,13 +10,52 @@ import {MultiselectFormControl} from "../../../../models/formControlModels/multi
})
export class MultiselectFormControlComponent implements OnChanges{
@Input() data: MultiselectFormControl = null;
+ @Input() multiselectOptions: [] = null;
+ @Input() selectedItems = [];
@Input() form: FormGroup = null;
- ngOnChanges(changes: SimpleChanges): void {
+
+ multiselectFormControlService : MultiselectFormControlService;
+ constructor(private _multiselectFormControlService : MultiselectFormControlService){
+ this.multiselectFormControlService = _multiselectFormControlService;
+ }
+ dropdownSettings = {
+ singleSelection : false
+ };
+
+ options : MultiSelectItem[];
+
+
+
+ async ngOnChanges(changes: SimpleChanges) {
+ if(this.data.options$){
+ this._multiselectFormControlService.convertOriginalItems(this.data).then((options)=>{
+ this.options = options;
+ this._multiselectFormControlService.convertSelectedItems(this.data).then((res)=> {
+ this.selectedItems = res;
+ this.form.controls[this.data.controlName].setValue(this.selectedItems);
+ })
+ });
+
+ }
if (changes["data"] !== undefined && changes["data"].currentValue !== changes["data"].previousValue && changes["data"].firstChange) {
- if(this.data.onInit){
+ if (this.data.onInit) {
this.data.onInit(this.data, this.form);
}
}
}
+
+ onItemSelect(item:any){
+ this.data.onChange(this.selectedItems ,this.form);
+ }
+ OnItemDeSelect(item:any){
+ this.data.onChange(this.selectedItems ,this.form);
+ }
+ onSelectAll(items: any){
+ this.data.onChange(this.selectedItems ,this.form);
+ }
+ onDeSelectAll(items: any){
+ this.data.onChange(this.selectedItems ,this.form);
+ }
}
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.service.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.service.ts
new file mode 100644
index 000000000..4a9580563
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.service.ts
@@ -0,0 +1,50 @@
+import {Injectable} from "@angular/core";
+import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model";
+import {MultiSelectItem} from "./multiselect.model";
+import * as _ from "lodash";
+
+
+@Injectable()
+export class MultiselectFormControlService {
+
+ convertOriginalItems = (data : MultiselectFormControl) : Promise<MultiSelectItem[]> => {
+ return new Promise<MultiSelectItem[]>((resolve) =>{
+ let result: MultiSelectItem[] = [];
+ if(data.options$) {
+ let index: number = 1;
+ data.options$.map((originalItems: any) => {
+ result.push(new MultiSelectItem(index, originalItems[data.ngValue], originalItems[data.selectedFieldName]));
+ index++;
+ });
+ }
+ resolve(result);
+ })
+ };
+
+
+ convertOptionsToHashMap = (config : MultiselectFormControl) => {
+ let index = 1;
+ return _.reduce(config.options$ , (obj, param: any ) => {
+ param.index = index;
+ index++;
+ obj[param[config.ngValue]] = param;
+ return obj;
+ }, {});
+ };
+
+ convertSelectedItems(data : MultiselectFormControl) : Promise<MultiSelectItem[]>{
+ return new Promise<MultiSelectItem[]>((resolve) =>{
+ let result: MultiSelectItem[] = [];
+ const hashMap = this.convertOptionsToHashMap(data);
+
+ if(data.options$ && data.value) {
+ const convertArray = data.convertOriginalDataToArray ? data.convertOriginalDataToArray(data.value) : data.value;
+ convertArray.map((itemId) => {
+ const uniqueIdentifier = itemId.trim();
+ result.push(new MultiSelectItem(hashMap[uniqueIdentifier].index, hashMap[uniqueIdentifier][data.ngValue], hashMap[uniqueIdentifier][data.selectedFieldName]));
+ });
+ }
+ resolve(result);
+ });
+ }
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.model.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.model.ts
new file mode 100644
index 000000000..a495211d4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.model.ts
@@ -0,0 +1,11 @@
+export class MultiSelectItem {
+ id : number;
+ itemId : number;
+ itemName : string;
+
+ constructor(genericId: number, itemId : number, itemName : string){
+ this.id = genericId;
+ this.itemId = itemId;
+ this.itemName = itemName;
+ }
+}