@colijnit/corecomponents_v12 254.1.4 → 254.1.5

package/src/app/app.component.ts

@@ -0,0 +1,559 @@
+import {Component, OnInit} from '@angular/core';
+import {CoreComponentsIcon} from '../../projects/corecomponents/src/lib/core/enum/core-components-icon.enum';
+import {IconCacheService} from '../../projects/corecomponents/src/lib/components/icon/icon-cache.service';
+import {CoreComponentsTranslationService} from '../../projects/corecomponents/src/lib/translation/core-components-translation.service';
+export enum ActiveTab {
+  Buttons = "Buttons",
+  Checkbox = "Checkbox",
+  Icons = "Icons",
+  Inputs = "Inputs",
+  Dialogs = "Dialogs",
+  DropDowns = "DropDowns",
+  Grids = "Grids",
+  Forms = "Forms",
+  Carousel = "Carousel",
+  Scanner = "Scanner"
+}
+
+@Component({
+  selector: 'app-root',
+  template: `
+      <div class="tabs">
+          <div class="tab" *ngFor="let tab of tabs"
+               [class.active]="activeTab === tab.tab"
+               [textContent]="tab.description"
+               (click)="activeTab = tab.tab"
+               [tooltip]="tab.description"
+          ></div>
+      </div>
+      <co-loader></co-loader>
+      <div class="content" *ngIf="activeTab === ActiveTab.Buttons">
+          <button-showcase></button-showcase>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Checkbox">
+          <checkbox-showcase></checkbox-showcase>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Icons">
+          <icon-showcase></icon-showcase>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Inputs">
+        <button (click)="changeLovModel()">Change model</button>
+          <co-list-of-values [label]="'Keuzeopties'"
+                             [displayField]="'warehouseDescription'"
+                             [model]="optionModel"
+                             [collection]="testOptions"
+                             [multiselect]="false"
+                             [required]="false"
+                             [readonly]="false"
+                             [searchDisabled]="false"
+                             [searchPlaceholder]="'Zoeken...'"
+                             (modelChange)="handleLovModelChange($event)"
+                             class="lov"
+          ></co-list-of-values>
+          <co-list-of-values [label]="'Keuzeopties met icon'"
+                             [displayField]="'warehouseDescription'"
+                             [model]="optionModel"
+                             [leftIconData]="iconCacheService.getIcon(icon.Icon3d)"
+                             [collection]="testOptions"
+                             [multiselect]="false"
+                             [required]="false"
+                             [readonly]="false"
+                             [searchDisabled]="false"
+                             [searchPlaceholder]="'Zoeken...'"
+                             (modelChange)="handleLovModelChange($event)"
+                             class="lov"
+          ></co-list-of-values>
+          <co-list-of-values [label]="'Keuzeopties multi'"
+                             [displayField]="'warehouseDescription'"
+                             [model]="optionModels"
+                             [collection]="testOptions"
+                             [multiselect]="true"
+                             [required]="false"
+                             [readonly]="false"
+                             [searchDisabled]="false"
+                             [searchPlaceholder]="'Zoeken...'"
+                             (modelChange)="handleLovMultiSelectModelChange($event)"
+                             class="lov"
+          ></co-list-of-values>
+          <input-number-picker-showcase></input-number-picker-showcase>
+          <filter-item-showcase></filter-item-showcase>
+          <co-rich-text-editor-showcase></co-rich-text-editor-showcase>
+          <input-text-showcase></input-text-showcase>
+          <input-checkbox-showcase></input-checkbox-showcase>
+          <input-radio-button-showcase></input-radio-button-showcase>
+          <input-date-picker-showcase></input-date-picker-showcase>
+            <input-time-showcase></input-time-showcase>
+          <co-color-picker [model]="'#FFFFFF'"></co-color-picker>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Dialogs">
+          <co-dialog-showcase></co-dialog-showcase>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Grids">
+          <co-simple-grid-showcase></co-simple-grid-showcase>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Forms">
+          <co-forms-showcase></co-forms-showcase>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Carousel">
+          <carousel-3d-showcase></carousel-3d-showcase>
+      </div>
+      <div class="content" *ngIf="activeTab === ActiveTab.Scanner">
+          <input-scanner-showcase></input-scanner-showcase>
+      </div>
+      <co-button [label]="'Andere taal'" (click)="changeLanguage()"></co-button>
+  `,
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  public readonly icon: typeof CoreComponentsIcon = CoreComponentsIcon;
+
+  public readonly ActiveTab: typeof ActiveTab = ActiveTab;
+
+  public activeTab: ActiveTab = ActiveTab.Buttons;
+  public tabs: {description: string, tab: ActiveTab}[] = [
+    {description: "Buttons", tab: ActiveTab.Buttons},
+    {description: "Checkbox", tab: ActiveTab.Checkbox},
+    {description: "Icons", tab: ActiveTab.Icons},
+    {description: "Inputs", tab: ActiveTab.Inputs},
+    {description: "Dialogs", tab: ActiveTab.Dialogs},
+    {description: "Dropdowns", tab: ActiveTab.DropDowns},
+    {description: "Grids", tab: ActiveTab.Grids},
+    {description: "Forms", tab: ActiveTab.Forms},
+    {description: "Carousel", tab: ActiveTab.Carousel},
+    {description: "Scanner", tab: ActiveTab.Scanner},
+  ];
+  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,
+      public translationService: CoreComponentsTranslationService
+  ) {
+    this.translationService.setTranslation({
+      MESSAGE_FIELD_REQUIRED: 'Dit is een verplicht veld'
+    })
+  }
+
+  public changeLovModel(): void {
+    this.optionModel = {
+      "warehouseDescription": "Magazijn Helmond",
+      "warehouseNo": 2
+    };
+  }
+
+  public handleLovModelChange(model: any): void {
+    this.optionModel = model;
+    console.log(model);
+  }
+
+  public handleLovMultiSelectModelChange(model: any): void {
+    this.optionModels = model;
+    console.log(model);
+  }
+
+  public changeLanguage(): void {
+    this.translationService.setTranslation({
+      MESSAGE_FIELD_REQUIRED: 'This field is required'
+    })
+  }
+}