aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/formControls
diff options
context:
space:
mode:
authorIttay Stern <ittay.stern@att.com>2018-08-29 17:01:32 +0300
committerIttay Stern <ittay.stern@att.com>2019-02-18 18:35:30 +0200
commit6f900cc45d7dd7f97430812b86b5c1d1693c8ae3 (patch)
tree936005c364dc5a7264d6304d4777c3d83494db22 /vid-webpack-master/src/app/shared/components/formControls
parent67d99f816cc583643c35193197594cf78d8ce60a (diff)
merge from ecomp a88f0072 - Modern UI
Issue-ID: VID-378 Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6 Signed-off-by: Ittay Stern <ittay.stern@att.com>
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/formControls')
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.html11
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts13
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.html21
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.scss7
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.ts27
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html22
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss87
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts62
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts27
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts7
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html25
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss0
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts68
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts18
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html16
-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.ts20
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.html13
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.ts12
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.html5
-rw-r--r--vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.ts15
21 files changed, 550 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.html
new file mode 100644
index 000000000..26362ebed
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.html
@@ -0,0 +1,11 @@
+<div class="details-item">
+ <input type="checkbox"
+ id="{{data?.dataTestId}}"
+ [attr.data-tests-id]="data?.dataTestId"
+ [checked]="data?.value"
+ name="{{data?.controlName}}"
+ [formControl]="form?.controls[data?.controlName]"
+ data-toggle="toggle">
+ <label class="checkbox-label"
+ for="{{data?.dataTestId}}">{{data?.displayName}}</label>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts
new file mode 100644
index 000000000..f9ba48308
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts
@@ -0,0 +1,13 @@
+import {Component, Input} from "@angular/core";
+import {FormControlModel} from "../../../../models/formControlModels/formControl.model";
+import {FormGroup} from "@angular/forms";
+
+@Component({
+ selector: 'checkbox-form-control',
+ templateUrl: './checkbox.formControl.component.html'
+})
+export class CheckboxFormControlComponent{
+ @Input() data: FormControlModel;
+ @Input() form: FormGroup;
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.html
new file mode 100644
index 000000000..6d13e52f8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.html
@@ -0,0 +1,21 @@
+<div class="details-item" *ngIf="data != null && form != null">
+ <label [ngClass]="{'required': data.isRequired()}"
+ for="{{data?.dataTestId}}-select">{{data?.displayName}}:</label>
+ <select class="form-control input-text"
+ id="{{data?.dataTestId}}-select"
+ [attr.data-tests-id]="data?.dataTestId"
+ name="{{data?.name}}"
+ [formControl]="form.controls[data.controlName]"
+ [ngClass]="{'error-style' : (form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors) || data?.hasEmptyOptions ,
+ 'grayColor': form?.controls[data?.controlName]?.value == null || form?.controls[data?.controlName]?.value == undefined,
+ 'blackColor' : form?.controls[data?.controlName]?.value != null}"
+ (blur)="data.onBlur()">
+
+ <option [value]="null" hidden>{{data?.placeHolder}}</option>
+ <option *ngFor="let option of data?.options$ | orderBy : {property : 'name', direction : 1} ; let i = index" class="{{option?.id}} {{data?.dataTestId}}Option"
+ [value]="option[data.ngValue]" [disabled]="!option?.isPermitted && option?.isPermitted != undefined">{{option.name}}
+ </option>
+ </select>
+ <form-control-error *ngIf="data?.hasEmptyOptions" [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/dropdown/dropdown.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.scss
new file mode 100644
index 000000000..9826332cc
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.scss
@@ -0,0 +1,7 @@
+.grayColor {
+ color: gray !important;
+}
+
+.blackColor {
+ color: black !important;
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.ts
new file mode 100644
index 000000000..550feca22
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.ts
@@ -0,0 +1,27 @@
+import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import {DropdownFormControl} from "../../../../models/formControlModels/dropdownFormControl.model";
+import {FormGroup} from "@angular/forms";
+
+@Component({
+ selector: 'dropdown-form-control',
+ templateUrl: './dropdown.formControl.component.html',
+ styleUrls : ['./dropdown.formControl.component.scss']
+})
+export class DropdownFormControlComponent implements OnChanges{
+ @Input() data: DropdownFormControl = null;
+ @Input() form: FormGroup = null;
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes["data"] !== undefined && changes["data"].currentValue !== changes["data"].previousValue && changes["data"].firstChange) {
+ if(this.data.onInit){
+ this.data.onInit(this.data, this.form);
+ }
+ }
+
+ if (changes["data"] !== undefined) {
+ this.form.controls[this.data.controlName].valueChanges.subscribe((value)=>{
+ this.data.onChange(value, this.form);
+ })
+ }
+ }
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html
new file mode 100644
index 000000000..bcbe91e5e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html
@@ -0,0 +1,22 @@
+<div class="details-item file-form-control">
+ <label [ngClass]="{'required': data.isRequired()}" for="{{data?.controlName}}">{{data?.displayName}}:</label>
+ <label for="{{data?.controlName}}" class="file-input-wrapper" [ngClass]="{'file-uploaded': fileUploader.files && fileUploader.files[0] || data.selectedFile != data.placeHolder}">
+ <span data-tests-id="file-name" class="file-name">
+ {{ fileUploader.files && fileUploader.files[0] ? fileUploader.files[0].name : data.selectedFile}}
+ </span>
+ <input id="{{data?.controlName}}"
+ name="{{data?.controlName}}"
+ class="form-control input-text"
+ [formControl]="form?.controls[data?.controlName]"
+ [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}"
+ type="file"
+ #fileUploader
+ accept="{{data?.acceptedExtentions}}"
+ (change)="data?.onChange($event.target.files, form)">
+ <input *ngFor="let hiddenFile of data?.hiddenFile" type="hidden" id="{{hiddenFile.controlName}}" name="{{hiddenFile.controlName}}"
+ [formControl]="form?.controls[hiddenFile.controlName]"/>
+ <span class="delete" data-tests-id="remove-uploaded-file" (click)="onDelete($event, data, form)">X</span>
+ <span class="icon-browse"></span>
+ </label>
+</div>
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss
new file mode 100644
index 000000000..98fae0249
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss
@@ -0,0 +1,87 @@
+.file-form-control{
+ label{
+ color: #191919;
+ }
+ input[type=file] {
+ opacity: 0;
+ flex: 0;
+ }
+ .file-input-wrapper{
+ display: flex;
+ background: #FFFFFF;
+ border: 1px solid #D2D2D2;
+ border-radius: 2px;
+ height: 38px;
+ &:hover{
+ cursor: pointer;
+ border: 1px solid #009FDB;
+ .icon-browse{
+ background: #E6F6FB;
+ border-left: 1px solid #009FDB;
+ &:before{
+ color: #009FDB;
+ }
+ }
+ }
+ &:active{
+ .icon-browse{
+ background: #1EB9F3;
+ border-left: 1px solid #009FDB;
+ &:before{
+ color: #ffffff;
+ }
+ }
+ }
+ .file-name {
+ font-family: OpenSans-Italic;
+ font-weight: normal;
+ font-size: 14px;
+ color: #959595;
+ margin: 9px;
+ width: 100%;
+ }
+ .icon-browse{
+ z-index: 1;
+ margin-left: auto;
+ margin-bottom: 0;
+ cursor: pointer;
+ content: "\e90d";
+ color: #5A5A5A;
+ font-size: 30px;
+ display: block;
+ text-align: center;
+ padding-top: 4px;
+ background: #F2F2F2;
+ border-left: 1px solid #D2D2D2;
+ width: 36px;
+ height:100%;
+ &:before{
+ content: "\e90d";
+ color: #5A5A5A;
+ }
+ }
+ .delete{
+ visibility: hidden;
+ cursor: pointer;
+ font-size: 14px;
+ margin-right: 10px;
+ margin-top: 9px;
+ color: #5a5a5a;
+ margin-left: 10px;
+ z-index: 1;
+ &:hover{
+ color: #000000;
+ }
+ }
+ &.file-uploaded{
+ .file-name{
+ font-family: OpenSans-Regular;
+ font-size: 14px;
+ color: #000000;
+ }
+ .delete{
+ visibility: visible;
+ }
+ }
+ }
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts
new file mode 100644
index 000000000..e27f5115a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts
@@ -0,0 +1,62 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
+import {FileFormControlComponent} from "./file.formControl.component";
+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 {TooltipModule} from "ngx-tooltip";
+import {FileFormControl} from "../../../../models/formControlModels/fileFormControl.model";
+
+describe('File Form Control Component', () => {
+ let component: FileFormControlComponent;
+ let fixture: ComponentFixture<FileFormControlComponent>;
+ let fb: FormBuilder;
+
+
+ beforeAll(done => (async () => {
+ TestBed.configureTestingModule({
+ imports: [CommonModule, BrowserModule, ReactiveFormsModule, TooltipModule],
+ providers: [FormBuilder],
+ declarations: [FileFormControlComponent, FormControlMessageErrorComponent],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ });
+ await TestBed.compileComponents();
+
+ fixture = TestBed.createComponent(FileFormControlComponent);
+ component = fixture.componentInstance;
+ fb = TestBed.get(FormBuilder);
+
+ })().then(done).catch(done.fail));
+
+ test('file component should initialize basic parameters', () => {
+ component.data = new FileFormControl({
+ displayName: "display Name",
+ validations: [new ValidatorModel(ValidatorOptions.required, 'is required')],
+ dataTestId: "data-test-id",
+ placeHolder: "place holder",
+ controlName: 'testFile',
+ acceptedExtentions: "json"
+ });
+
+ component.form = fb.group({
+ 'testFile': new FormControl({
+ value: component.data.selectedFile,
+ disabled: false
+ },
+ Validators.compose(component.data.validations.map(item => item.validator))
+ ),
+ });
+
+ component.data.onDelete = function () {
+ component.form.controls['testFile'].setValue('onDelete');
+ };
+
+ expect(component.form.controls['testFile'].value).toEqual("place holder");
+ let event = new Event("onDelete", null);
+ component.data.onDelete(event, component.data, component.form);
+ expect(component.form.controls['testFile'].value).toEqual('onDelete');
+ })
+});
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts
new file mode 100644
index 000000000..2c2172005
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts
@@ -0,0 +1,27 @@
+import {Component, ElementRef, Input, ViewChild} from "@angular/core";
+import {FormGroup} from "@angular/forms";
+import {FileFormControl} from "../../../../models/formControlModels/fileFormControl.model";
+
+@Component({
+ selector : 'file-form-control',
+ templateUrl : './file.formControl.component.html',
+ styleUrls : ['./file.formControl.component.scss']
+})
+
+export class FileFormControlComponent {
+ @Input() data: FileFormControl = null;
+ @Input() form: FormGroup;
+ @ViewChild('fileUploader')
+ fileUploader:ElementRef ;
+
+ onDelete(event, data, form) {
+ event.stopPropagation();
+ event.preventDefault();
+ form.value[data.controlName] = this.fileUploader.nativeElement.value = "";
+ data.selectedFile = data.placeHolder;
+ if (data.onDelete){
+ data.onDelete(form);
+ }
+
+ }
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts
new file mode 100644
index 000000000..d875e486c
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts
@@ -0,0 +1,7 @@
+export enum FileUnit {
+ b,
+ B,
+ KB,
+ MB,
+ GB
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html
new file mode 100644
index 000000000..90ac7c698
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html
@@ -0,0 +1,25 @@
+<div class="details-item" *ngIf="data?.isVisible">
+ <label
+ [tooltip]="data?.tooltip ? data.tooltip : null"
+ id="{{data?.dataTestId}}-label"
+ [ngClass]="{'required' : data?.isRequired()}">
+ {{data?.displayName}}: </label>
+ <input
+ #customInput
+
+ [disabled]="data?.isDisabled ? data.isDisabled : false"
+ [type]="data?.inputType ? data?.inputType : 'text'"
+ [attr.data-tests-id]="data?.dataTestId"
+ class="form-control input-text"
+ id="{{data?.dataTestId}}"
+ [placeholder]="data?.placeHolder ? data?.placeHolder : ''"
+ [formControl]="form?.controls[data?.controlName]"
+ [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}"
+ minlength="{{data?.minLength}}"
+ maxlength="{{data?.maxLength}}"
+ (blur)="data.onBlur($event, form)"
+ (keypress)="data?.onKeypress($event)">
+</div>
+
+
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts
new file mode 100644
index 000000000..84d379d1a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts
@@ -0,0 +1,68 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
+import {InputFormControlComponent} from "./input.formControl.component";
+import {CommonModule} from "@angular/common";
+import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import {InputFormControl} from "../../../../models/formControlModels/inputFormControl.model";
+import {ValidatorModel, ValidatorOptions} from "../../../../models/formControlModels/formControl.model";
+import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component";
+import {BrowserModule} from "@angular/platform-browser";
+import {TooltipModule} from "ngx-tooltip";
+
+describe('Input Form Control Component', () => {
+ let component: InputFormControlComponent;
+ let fixture: ComponentFixture<InputFormControlComponent>;
+ let fb: FormBuilder;
+
+ beforeAll(done => (async () => {
+ TestBed.configureTestingModule({
+ imports: [CommonModule, BrowserModule, ReactiveFormsModule, TooltipModule],
+ providers: [FormBuilder],
+ declarations: [InputFormControlComponent, FormControlMessageErrorComponent],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ });
+ await TestBed.compileComponents();
+
+ fixture = TestBed.createComponent(InputFormControlComponent);
+ component = fixture.componentInstance;
+ fb = TestBed.get(FormBuilder);
+
+ })().then(done).catch(done.fail));
+
+ test('component should initialize basic parameters', () => {
+ component.data = new InputFormControl({
+ value: "value",
+ displayName: "display Name",
+ validations: [new ValidatorModel(ValidatorOptions.required, 'is required')],
+ dataTestId: "data-test-id",
+ placeHolder: "place holder",
+ controlName: 'testInstanceName'
+ });
+
+ 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['testInstanceName'].setValue('onBlur');
+ };
+
+ component.form = fb.group({
+ 'testInstanceName': new FormControl({
+ value: component.data.value,
+ disabled: false
+ }, Validators.compose(component.data.validations.map(item => item.validator)))
+ });
+
+
+ component.form.controls['testInstanceName'].setValue('newValue');
+ expect(component.form.controls['testInstanceName'].errors).toBeFalsy();
+ component.form.controls['testInstanceName'].setValue('');
+ expect(component.form.controls['testInstanceName'].errors.required).toBeTruthy();
+ component.data.onBlur();
+ expect(component.form.controls['testInstanceName'].value).toEqual('onBlur');
+ expect(component.form.controls['testInstanceName'].errors).toBeFalsy();
+ }
+ )
+});
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts
new file mode 100644
index 000000000..1e8c28104
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts
@@ -0,0 +1,18 @@
+import {Component, ElementRef, Input, ViewChild} from "@angular/core";
+import {InputFormControl} from "../../../../models/formControlModels/inputFormControl.model";
+import {FormGroup} from "@angular/forms";
+
+@Component({
+ selector : 'form-control-input',
+ templateUrl : './input.formControl.component.html',
+ styleUrls : ['./input.formControl.component.scss']
+})
+
+export class InputFormControlComponent{
+ @ViewChild('customInput') element:ElementRef;
+ @Input() data: InputFormControl = null;
+ @Input() form: FormGroup;
+
+
+
+}
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
new file mode 100644
index 000000000..f7c4894b2
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
@@ -0,0 +1,16 @@
+<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>
+
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
new file mode 100644
index 000000000..81c8d4679
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts
@@ -0,0 +1,74 @@
+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
new file mode 100644
index 000000000..4b98c7e26
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import {FormGroup} from "@angular/forms";
+import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model";
+
+@Component({
+ selector: 'multiselect-form-control',
+ templateUrl: './multiselect.formControl.component.html'
+})
+export class MultiselectFormControlComponent implements OnChanges{
+ @Input() data: MultiselectFormControl = null;
+ @Input() form: FormGroup = null;
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes["data"] !== undefined && changes["data"].currentValue !== changes["data"].previousValue && changes["data"].firstChange) {
+ if(this.data.onInit){
+ this.data.onInit(this.data, this.form);
+ }
+ }
+ }
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.html
new file mode 100644
index 000000000..3763764d5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.html
@@ -0,0 +1,13 @@
+<div>
+ <div class="details-item" *ngIf="data != null && form != null">
+ <label [ngClass]="{'required': data.isRequired()}"
+ for="{{data?.dataTestId}}">{{data?.displayName}}:</label>
+ <input id="{{data?.dataTestId}}" [attr.data-tests-id]="data?.dataTestId"
+ name="{{data?.controlName}}" class="form-control input-text"
+ [formControl]="form.controls[data.controlName]" type="number"
+ placeholder="{{data?.placeHolder}}" title="{{data?.tooltip}}"
+ [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}"
+ min="{{data?.min}}" max="{{data?.max}}">
+ </div>
+</div>
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.ts
new file mode 100644
index 000000000..bd25ded81
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.ts
@@ -0,0 +1,12 @@
+import {Component, Input} from "@angular/core";
+import {FormGroup} from "@angular/forms";
+import {NumberFormControl} from "../../../../models/formControlModels/numberFormControl.model";
+
+@Component({
+ selector: 'number-form-control',
+ templateUrl: './number.formControl.component.html'
+})
+export class NumberFormControlComponent {
+ @Input() data: NumberFormControl = null;
+ @Input() form: FormGroup = null;
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.html b/vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.html
new file mode 100644
index 000000000..4d89854d5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.html
@@ -0,0 +1,5 @@
+<div *ngIf="form != null && formControl != null && form.controls[formControl.controlName]?.errors">
+ <div *ngFor="let validatorModel of formControl?.validations">
+ <form-control-error *ngIf="form.controls[formControl?.controlName]?.errors[validatorModel?.validatorName]" [message]="validatorModel?.errorMsg"></form-control-error>
+ </div>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.ts b/vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.ts
new file mode 100644
index 000000000..02ec57e43
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/errorMessage/formControlMessageError.component.ts
@@ -0,0 +1,15 @@
+import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import {FormGroup} from "@angular/forms";
+import {FormControlModel} from "../../../models/formControlModels/formControl.model";
+
+@Component({
+ selector : 'form-control-message-error',
+ templateUrl : './formControlMessageError.component.html'
+})
+export class FormControlMessageErrorComponent implements OnChanges{
+ @Input() formControl: FormControlModel = null;
+ @Input() form: FormGroup = null;
+
+ ngOnChanges(changes: SimpleChanges): void {
+ }
+}