@colijnit/corecomponents_v12 12.2.19 → 12.2.20

package/src/app/components/forms-showcase.component.ts

@@ -1,703 +0,0 @@
-import {Component, ViewChild} from '@angular/core';
-import {FormMasterService} from '../../../projects/corecomponents/src/lib/core/service/form-master.service';
-import {InputTextComponent} from '../../../projects/corecomponents/src/lib/components/input-text/input-text.component';
-import {
-  InputNumberPickerComponent
-} from '../../../projects/corecomponents/src/lib/components/input-number-picker/input-number-picker.component';
-import {InputTextareaComponent} from '../../../projects/corecomponents/src/lib/components/input-textarea/input-textarea.component';
-import {ValidatorFn} from '@angular/forms';
-import {passwordValidator} from '../../../projects/corecomponents/src/lib/core/validator/password.validator';
-import {equalValidator} from '../../../projects/corecomponents/src/lib/core/validator/equal.validator';
-import {CoreComponentsIcon} from '../../../projects/corecomponents/src/lib/core/enum/core-components-icon.enum';
-import {FormComponent} from '../../../projects/corecomponents/src/lib/components/form/form.component';
-import {IconCacheService} from '../../../projects/corecomponents/src/lib/components/icon/icon-cache.service';
-
-@Component({
-  selector: "co-forms-showcase",
-  template: `
-    <h1>Forms test</h1>
-    <co-form #firstForm>
-      <div class="form-wrapper">
-        <div class="row">
-          <co-input-text [model]="'disabled'"
-                         [placeholder]="'co-input-text'"
-                         [required]="true"
-                         [disabled]="true"
-                         [tooltip]="'Dit is de <i>tooltip</i> die getoond moet worden </br> met een redelijk lange tekst'"
-          ></co-input-text>
-          <co-input-date-range [placeholder]="'co-input-date-range'"
-                               [required]="true"
-                               [(model)]="dates"
-                               (modelChange)="handleDateRangeChanged($event)"
-                               [tooltip]="'Dit is de <i>tooltip</i> die getoond moet worden bij de datum'"
-          ></co-input-date-range>
-          <co-input-date [placeholder]="'co-input-date'"
-                         [(model)]="startDate"
-                         [required]="true"
-                         [tooltip]="'Dit is een andere <b>tooltip</b>'"
-          ></co-input-date>
-          <co-input-number-picker #inputNPCommit [model]="2"
-                                  [showSaveCancel]="true"
-                                  [required]="true"
-          ></co-input-number-picker>
-          <co-input-text #inputCommit [(model)]="testModel"
-                         [placeholder]="'Input text with commit'"
-                         [showSaveCancel]="true"
-                         [showClearButton]="true"
-                         [required]="true"
-          ></co-input-text>
-          <co-input-text #inputCommit [(model)]="testNumberModel"
-                         [placeholder]="'Input number with digits only'"
-                         [showSaveCancel]="true"
-                         [showClearButton]="true"
-                         [required]="true"
-                         [digitsOnly]="true"
-                         [excludePlusMinus]="true"
-                         [hideArrowButtons]="true"
-                         [showClearButton]="true"
-          ></co-input-text>
-          <co-input-textarea #inputAreaCommit [(model)]="testAreaModel"
-                             [placeholder]="'Input textarea with commit'"
-                             [showSaveCancel]="true"
-                             [required]="true"
-          ></co-input-textarea>
-        </div>
-        <div class="row">
-          <co-input-textarea
-              [placeholder]="'co-input-textarea'"
-              [(model)]="textAreaModel"
-              [required]="true"
-          ></co-input-textarea>
-          <co-input-textarea
-              [placeholder]="'co-input-textarea'"
-              [model]="textAreaModel"
-              [required]="false"
-          ></co-input-textarea>
-        </div>
-      </div>
-      <br/>
-      <br/>
-      <co-button [label]="'submit'" (click)="submitForm()"></co-button>
-    </co-form>
-    <co-form>
-      <div class="form-wrapper">
-        <div class="row">
-          <co-list-of-values [label]="'Keuzeopties'"
-                           [displayField]="'warehouseDescription'"
-                           [model]="optionModel"
-                           [collection]="testOptions"
-                           [multiselect]="false"
-                           [required]="false"
-                           [readonly]="false"
-                           [searchDisabled]="false"
-                           [searchPlaceholder]="'Zoeken...'"
-                           class="lov"
-        ></co-list-of-values>
-        <co-list-of-values [label]="'Keuzeopties multi'"
-                           [displayField]="'warehouseDescription'"
-                           [model]="optionModels"
-                           [collection]="testOptions"
-                           [multiselect]="true"
-                           [required]="true"
-                           [readonly]="false"
-                           [searchDisabled]="false"
-                           [searchPlaceholder]="'Zoeken...'"
-                           class="lov"
-        ></co-list-of-values>
-        <co-list-of-values [label]="'Keuzeopties met icon'"
-                           [displayField]="'warehouseDescription'"
-                           [model]="optionModel"
-                           [leftIconData]="iconCacheService.getIcon(icons.Icon3d)"
-                           [collection]="testOptions"
-                           [multiselect]="false"
-                           [required]="true"
-                           [readonly]="true"
-                           [searchDisabled]="false"
-                           [searchPlaceholder]="'Zoeken...'"
-                           class="lov"
-        ></co-list-of-values>
-        </div>
-      </div>
-    </co-form>
-    <co-form #secondForm class="validator-form">
-      <co-input-text [(model)]="username" [placeholder]="'EMAIL_OR_USERNAME'" [leftIconData]="iconCacheService.getIcon(icons.Account)"
-                     #userNameInput [disabled]="true"></co-input-text>
-      <co-input-text [(model)]="password" type="password" class="password" [placeholder]="'NEW_PASSWORD'" [required]="true" #passwordInput
-                     [leftIconData]="iconCacheService.getIcon(icons.Lock)"
-                     [rightIconData]="iconCacheService.getIcon(icons.Icon3d)"
-                     [validators]="[passwordValidatorFn]"
-                     (rightIconMouseDown)="handlePasswordShow($event)"
-                     (rightIconMouseUp)="handlePasswordHide($event)"
-      ></co-input-text>
-      <co-input-text [(model)]="repeatPassword" type="password" class="repeat-password" [placeholder]="'PASSWORD_REPEAT'" [required]="true" #passwordRepeatInput
-                     [leftIconData]="iconCacheService.getIcon(icons.Lock)"
-                     [rightIconData]="iconCacheService.getIcon(icons.Icon3d)"
-                     [validators]="[repeatPasswordValidatorFn]"
-                     (rightIconMouseDown)="handlePasswordRepeatShow($event)"
-                     (rightIconMouseUp)="handlePasswordRepeatHide($event)"
-      ></co-input-text>
-      <co-button [label]="'submit'" (click)="submitSecondForm()"></co-button>
-    </co-form>
-  `,
-  providers: [
-      IconCacheService,
-    FormMasterService
-  ],
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      .form-wrapper {
-        width: 1000px;
-        height: 300px;
-        overflow: auto;
-      }
-      .row {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-      }
-      .form-input {
-        min-width: 320px;
-      }
-      .validator-form {
-        width: 400px;
-      }
-    }`
-  ]
-})
-export class FormsShowcaseComponent {
-  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
-  @ViewChild('secondForm')
-  public secondForm: FormComponent;
-
-  @ViewChild('passwordInput')
-  public inputPassword: InputTextComponent;
-
-  @ViewChild('passwordRepeatInput')
-  public inputPasswordRepeat: InputTextComponent;
-
-  @ViewChild('inputCommit') set child(content) {
-    this.inputCommit = content;
-    this.inputCommit.commit = this.commitField;
-  }
-  public inputCommit: InputTextComponent;
-
-  @ViewChild('inputAreaCommit') set childArea(content) {
-    this.inputAreaCommit = content;
-    this.inputAreaCommit.commit = this.commitTextAreaField;
-  }
-  public inputAreaCommit: InputTextareaComponent;
-
-  @ViewChild('inputNPCommit') set childNP(content) {
-    this.inputNP = content;
-    this.inputNP.commit = this.commitNPField;
-  }
-  public inputNP: InputNumberPickerComponent;
-
-  public list: string[] = [
-    'Optie1',
-    'Optie2',
-    'Optie3',
-    'Optie4',
-    'Optie5'
-  ];
-
-  public textAreaModel: string;
-  public testModel: string;
-  public testNumberModel: string;
-  public testAreaModel: string;
-  public startDate: Date = new Date();
-  public endDate: Date;
-
-  public dates: Date[] = [new Date(), new Date()]
-
-  public username: string = 'patrick';
-  public password: string;
-  public repeatPassword: string;
-  // public readonly repeatPasswordValidatorArray: ValidatorFn[] = [this._repeatPasswordValidator];
-  // public readonly passwordValidatorArray: ValidatorFn[] = [passwordValidator(this.username)];
-
-  public optionModel = {warehouseDescription: "Magazijn Danny & Dane", warehouseNo: 0};
-  public optionModels = [{"warehouseDescription": "Winkel Budel 2.21","warehouseNo": 5}, {warehouseDescription: "Magazijn Danny & Dane", warehouseNo: 0}];
-  public options = [
-    { value: 'option1', label: 'Option 1' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'Option 3' },
-    { value: 'option4', label: 'Option 4' },
-    { value: 'option5', label: 'Option 5' },
-    { value: 'option6', label: 'Option 6' },
-    { value: 'option7', label: 'Option 7' },
-    { value: 'option8', label: 'Option 8' },
-    { value: 'option9', label: 'Option 9' },
-    { value: 'option10', label: 'Option 10' }
-  ];
-
-  public testOptions = [
-    {
-      "warehouseDescription": "Magazijn Danny & Dane",
-      "warehouseNo": 0
-    },
-    {
-      "warehouseDescription": "Centraal Magazijn De Ruijter Meubel",
-      "warehouseNo": 1
-    },
-    {
-      "warehouseDescription": "Magazijn Helmond",
-      "warehouseNo": 2
-    },
-    {
-      "warehouseDescription": "Winkel Halmond Gordijnafd.",
-      "warehouseNo": 3
-    },
-    {
-      "warehouseDescription": "Winkel Amstenrade",
-      "warehouseNo": 4
-    },
-    {
-      "warehouseDescription": "Winkel Budel 2.21",
-      "warehouseNo": 5
-    },
-    {
-      "warehouseDescription": "Toonzaal De Ruijter Meubel",
-      "warehouseNo": 6
-    },
-    {
-      "warehouseDescription": "Opruimingshoek Magazijn",
-      "warehouseNo": 7
-    },
-    {
-      "warehouseDescription": "Winkel Valkenswaard",
-      "warehouseNo": 8
-    },
-    {
-      "warehouseDescription": "Van Winkel naar Magazijn",
-      "warehouseNo": 9
-    },
-    {
-      "warehouseDescription": "Winkel Venray",
-      "warehouseNo": 10
-    },
-    {
-      "warehouseDescription": "Winkel Tilburg",
-      "warehouseNo": 11
-    },
-    {
-      "warehouseDescription": "Toonzaal",
-      "warehouseNo": 12
-    },
-    {
-      "warehouseDescription": "Showroom Middelburg 2.2",
-      "warehouseNo": 13
-    },
-    {
-      "warehouseDescription": "Bulkmagazijn",
-      "warehouseNo": 14
-    },
-    {
-      "warehouseDescription": "test inventarisatie",
-      "warehouseNo": 15
-    },
-    {
-      "warehouseDescription": "Alleen locaties",
-      "warehouseNo": 16
-    },
-    {
-      "warehouseDescription": "Magazijn 17",
-      "warehouseNo": 17
-    },
-    {
-      "warehouseDescription": "Dropshipmentmagazijn",
-      "warehouseNo": 18
-    },
-    {
-      "warehouseDescription": "Test magazijn",
-      "warehouseNo": 20
-    },
-    {
-      "warehouseDescription": "Nieuw voor dataterminal",
-      "warehouseNo": 21
-    },
-    {
-      "warehouseDescription": "Magazijn voor voorraadmutatie test",
-      "warehouseNo": 25
-    },
-    {
-      "warehouseDescription": "EXACT magazijn",
-      "warehouseNo": 33
-    },
-    {
-      "warehouseDescription": "test1",
-      "warehouseNo": 34
-    },
-    {
-      "warehouseDescription": "Warehouse Tucson",
-      "warehouseNo": 35
-    },
-    {
-      "warehouseDescription": "test2",
-      "warehouseNo": 36
-    },
-    {
-      "warehouseDescription": "WMS Magazijn",
-      "warehouseNo": 42
-    },
-    {
-      "warehouseDescription": "Magazijn 3",
-      "warehouseNo": 45
-    },
-    {
-      "warehouseDescription": "Magazijn 4",
-      "warehouseNo": 46
-    },
-    {
-      "warehouseDescription": "Magazijn 5",
-      "warehouseNo": 47
-    },
-    {
-      "warehouseDescription": "Magazijn 6",
-      "warehouseNo": 48
-    },
-    {
-      "warehouseDescription": "Magazijn 7",
-      "warehouseNo": 49
-    },
-    {
-      "warehouseDescription": "Magazijn 8",
-      "warehouseNo": 50
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 56
-    },
-    {
-      "warehouseDescription": "Test nieuw",
-      "warehouseNo": 57
-    },
-    {
-      "warehouseDescription": "pl sql tester",
-      "warehouseNo": 78
-    },
-    {
-      "warehouseDescription": "81",
-      "warehouseNo": 81
-    },
-    {
-      "warehouseDescription": "AFAS test",
-      "warehouseNo": 95
-    },
-    {
-      "warehouseDescription": "AFAS2 test",
-      "warehouseNo": 97
-    },
-    {
-      "warehouseDescription": "Fiets",
-      "warehouseNo": 98
-    },
-    {
-      "warehouseDescription": "Centraal magazijn (binnen)",
-      "warehouseNo": 99
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 100
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 160
-    },
-    {
-      "warehouseDescription": "Magazijn 199",
-      "warehouseNo": 199
-    },
-    {
-      "warehouseDescription": "Magazijn 200",
-      "warehouseNo": 200
-    },
-    {
-      "warehouseDescription": "201",
-      "warehouseNo": 201
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 241
-    },
-    {
-      "warehouseDescription": "ding test",
-      "warehouseNo": 333
-    },
-    {
-      "warehouseDescription": "final test",
-      "warehouseNo": 339
-    },
-    {
-      "warehouseDescription": "Test 345",
-      "warehouseNo": 345
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 357
-    },
-    {
-      "warehouseDescription": "Test magazijn",
-      "warehouseNo": 500
-    },
-    {
-      "warehouseDescription": "Magazijn Willem",
-      "warehouseNo": 555
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 578
-    },
-    {
-      "warehouseDescription": "TestDennis",
-      "warehouseNo": 678
-    },
-    {
-      "warehouseDescription": "Roobol Hoofdmagazijn",
-      "warehouseNo": 800
-    },
-    {
-      "warehouseDescription": "TEST J9717",
-      "warehouseNo": 909
-    },
-    {
-      "warehouseDescription": "Direct verzonden / geleverd",
-      "warehouseNo": 999
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 1231
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 1234
-    },
-    {
-      "warehouseDescription": "magwel",
-      "warehouseNo": 1987
-    },
-    {
-      "warehouseDescription": "Magazijn 13",
-      "warehouseNo": 2345
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 3456
-    },
-    {
-      "warehouseDescription": "Magazijn 11",
-      "warehouseNo": 4654
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 6743
-    },
-    {
-      "warehouseDescription": "testtest",
-      "warehouseNo": 7234
-    },
-    {
-      "warehouseDescription": "TEst",
-      "warehouseNo": 7543
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 8654
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 9789
-    },
-    {
-      "warehouseDescription": "Test 9876",
-      "warehouseNo": 9876
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 9999
-    },
-    {
-      "warehouseDescription": "Evgeniy Warehouse",
-      "warehouseNo": 10101
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 34523
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 34534
-    },
-    {
-      "warehouseDescription": "5",
-      "warehouseNo": 55555
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 62398
-    },
-    {
-      "warehouseDescription": "tert",
-      "warehouseNo": 69678
-    },
-    {
-      "warehouseDescription": "Test ",
-      "warehouseNo": 74267
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 84352
-    },
-    {
-      "warehouseDescription": "K3 90101",
-      "warehouseNo": 90101
-    },
-    {
-      "warehouseDescription": "K3 90105",
-      "warehouseNo": 90105
-    },
-    {
-      "warehouseDescription": "K3 901019",
-      "warehouseNo": 90109
-    },
-    {
-      "warehouseDescription": "Test 98765",
-      "warehouseNo": 98765
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 99999
-    },
-    {
-      "warehouseDescription": "test magazijn",
-      "warehouseNo": 121212
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 123456
-    },
-    {
-      "warehouseDescription": "test magazijn",
-      "warehouseNo": 131313
-    },
-    {
-      "warehouseDescription": "Tommy's magazijn",
-      "warehouseNo": 141414
-    },
-    {
-      "warehouseDescription": "test opslag",
-      "warehouseNo": 212121
-    },
-    {
-      "warehouseDescription": "test",
-      "warehouseNo": 312312
-    },
-    {
-      "warehouseDescription": "test magazijn",
-      "warehouseNo": 333333
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 453609
-    },
-    {
-      "warehouseDescription": "test 5",
-      "warehouseNo": 555555
-    },
-    {
-      "warehouseDescription": "testing",
-      "warehouseNo": 987987
-    },
-    {
-      "warehouseDescription": "Test 98",
-      "warehouseNo": 989898
-    },
-    {
-      "warehouseDescription": "Test",
-      "warehouseNo": 999999
-    }
-  ];
-
-  constructor(
-      public iconCacheService: IconCacheService,
-      private _formMaster: FormMasterService
-  ) {
-  }
-
-  public commitField = async (model?: any): Promise<boolean> => {
-    return new Promise((resolve: Function) => {
-      setTimeout(() => {
-        console.log('committing');
-        resolve(true);
-      });
-    });
-  }
-
-  public commitTextAreaField = async (model?: any): Promise<boolean> => {
-    return new Promise((resolve: Function) => {
-      setTimeout(() => {
-        resolve(true);
-      }, 4000);
-    });
-  }
-
-  public commitNPField = async (model?: any): Promise<boolean> => {
-    return new Promise((resolve: Function) => {
-      setTimeout(() => {
-        resolve(true);
-      }, 4000);
-    });
-  }
-
-  public submitForm(): void {
-    this._formMaster.submitSlaves();
-  }
-
-  public submitSecondForm(): void {
-    this.secondForm.submit();
-  }
-
-  public handleCommit(model: any): void {
-    console.log(this.testModel, model);
-  }
-
-  public handleDateRangeChanged(dates: Date[]): void {
-    this.startDate = dates[0];
-    this.endDate = dates[1];
-  }
-
-  public handlePasswordShow(event: MouseEvent): void {
-    if (this.inputPassword) {
-      this.inputPassword.type = undefined;
-    }
-  }
-
-  public handlePasswordHide(event: MouseEvent): void {
-    if (this.inputPassword) {
-      this.inputPassword.type = 'password';
-    }
-  }
-
-  public handlePasswordRepeatShow(event: MouseEvent): void {
-    if (this.inputPasswordRepeat) {
-      this.inputPasswordRepeat.type = undefined;
-    }
-  }
-
-  public handlePasswordRepeatHide(event: MouseEvent): void {
-    if (this.inputPasswordRepeat) {
-      this.inputPasswordRepeat.type = 'password';
-    }
-  }
-
-  public passwordValidatorFn: ValidatorFn = passwordValidator(() => {
-    return this.username;
-  });
-
-  public repeatPasswordValidatorFn: ValidatorFn = equalValidator(() => {
-    return this.password;
-  });
-}