@colijnit/corecomponents_v12 254.1.10 → 255.1.1

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

@@ -0,0 +1,728 @@
+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';
+import {IconListItem} from "../../../projects/corecomponents/src/lib/model/icon-list-item";
+
+@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>
+        <br>
+        <div class="row">
+          <co-list-of-icons [collection]="testIconOptions"></co-list-of-icons>
+        </div>
+        <br>
+      </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>
+
+
+    5555
+    <co-article-tile>
+
+    </co-article-tile>
+
+  `,
+  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
+    }
+  ];
+
+  public testIconOptions: IconListItem[] = [
+    { icon: this.iconCacheService.getIcon(this.icons.SaveDisk), label: 'Overzicht' },
+    { icon: this.iconCacheService.getIcon(this.icons.Scanner), label: 'Inkoop' },
+    { icon: this.iconCacheService.getIcon(this.icons.Returns), label: 'Logistiek' },
+    { icon: this.iconCacheService.getIcon(this.icons.Resize), label: 'Planning' },
+    { icon: this.iconCacheService.getIcon(this.icons.Range), label: 'Levering' },
+    { icon: this.iconCacheService.getIcon(this.icons.PlusSolid), label: 'Factuur' }
+  ];
+
+  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;
+  });
+}