@colijnit/corecomponents_v12 255.1.1 → 255.1.2

package/src/app/components/co-simple-grid-test.component.ts

@@ -1,146 +0,0 @@
-import {Component, ContentChildren, Input, OnInit, QueryList} from '@angular/core';
-import {SimpleGridColumnDirective, ColumnAlign} from '../../../projects/corecomponents/src/lib/components/simple-grid/simple-grid-column.directive';
-import {ShowcaseDataService} from '../service/showcase-data.service';
-
-@Component({
-  selector: "co-simple-grid-test",
-  template: `
-    <co-button [label]="'Update data column cell'" (click)="updateDataCell()"></co-button>
-
-    <co-simple-grid [data]="data" [dragDropEnabled]="true" [inlineEdit]="inlineEditGrid" [autoAddRow]="autoAddRow" [showToolbar]="true" [resizable]="resizable"
-                    [showEdit]="false"
-                    [showAdd]="true" [showDelete]="true" [rightToolbar]="true"
-                    [extraColumns]="extraColumns"
-                    [rowsPerPage]="5000"
-                    [rowDisabledFn]="isRowDisabled"
-                    [canRowBeEdittedFn]="canRowBeEditted"
-                    [editOnCellClick]="false"
-                    (selectRow)="handleSelectRow($event)"
-                    (dblClickRow)="handleDblClickRow($event)"
-                    (saveRow)="handleSaveRow($event)"
-                    (rowVisible)="handleRowVisible($event)"
-                    (deleteRow)="handleRowDelete($event)"
-        >
-            <co-simple-grid-column [field]="'Text'" [singleColumn]="true"></co-simple-grid-column>
-            <co-simple-grid-column [field]="'Geslacht'" [textAlign]="align.Center">
-              <ng-template #headerTemplate>
-                <co-input-checkbox [(model)]="headerCheckbox"></co-input-checkbox>
-              </ng-template>
-            </co-simple-grid-column>
-            <co-simple-grid-column [headerText]="'Geslacht'" [field]="'Geslacht'" [collection]="gender" [codeField]="'code'" [displayField]="'description'" [order]="10">
-              <ng-template #editTemplate let-row="row">
-                <co-list-of-values [(model)]="row['Geslacht']" [collection]="gender" [fields]="genderFields"></co-list-of-values>
-              </ng-template>
-            </co-simple-grid-column>
-            <co-simple-grid-column [headerText]="'FTE'" [field]="'FTE'" [required]="false" [order]="20">
-              <ng-template #editTemplate let-row="row">
-                <co-input-number-picker [model]="2"></co-input-number-picker>
-              </ng-template>
-            </co-simple-grid-column>
-            <co-simple-grid-column [headerText]="'Naam'" [field]="'Naam'" [autoFit]="true" [resizable]="true" [order]="30">
-            </co-simple-grid-column>
-            <co-simple-grid-column [headerText]="'Straat'" [field]="'Straat'" [order]="40" [width]="300">
-              <ng-template #editTemplate let-row="row">
-                <co-input-textarea [(model)]="row['Straat']"></co-input-textarea>
-              </ng-template>
-            </co-simple-grid-column>
-            <co-simple-grid-column [headerText]="'Postcode & plaats'" [field]="'PostcodePlaats'" [order]="50"></co-simple-grid-column>
-            <co-simple-grid-column [headerText]="'Land'" [field]="'countryId'" [order]="60"></co-simple-grid-column>
-      <co-simple-grid-column [headerText]="'DESCRIPTION'" [width]="300" [order]="10">
-        <ng-template #template let-row = "row">
-          <co-input-checkbox>
-          </co-input-checkbox>
-        </ng-template>
-      </co-simple-grid-column>
-        </co-simple-grid>
-  `,
-  styles: [
-  ]
-})
-export class CoSimpleGridTestComponent implements OnInit {
-  public readonly align: typeof ColumnAlign = ColumnAlign;
-
-  @ContentChildren(SimpleGridColumnDirective) set content(columnComponents: QueryList<SimpleGridColumnDirective>) {
-    this.extraColumns = columnComponents.toArray();
-  }
-
-  public data: any[] = [];
-
-  public gender: any[] = [
-    {code: 1, description: 'M'},
-    {code: 2, description: 'V'},
-    {code: 3, description: 'Unknown'},
-  ]
-
-  public genderFields: Object = { text: 'description', value: 'code' };
-
-  @Input()
-  public inlineEditGrid: boolean = false;
-
-  @Input()
-  public resizable: boolean = false;
-
-  @Input()
-  public autoAddRow: boolean = false;
-
-  public extraColumns: SimpleGridColumnDirective[] = [];
-  public headerCheckbox: boolean;
-
-  constructor(
-    private _dataService: ShowcaseDataService
-  ) {
-  }
-
-  ngOnInit(): void {
-    this.data.length = 0;
-    for (let i = 0; i < 10; i++) {
-      this.data.push(this._dataService.gridData[i]);
-    }
-    // this.data = this._dataService.gridData;
-  }
-
-  public isRowDisabled(row: any): Promise<boolean> {
-    return new Promise((resolve: Function) => {
-      setTimeout(() => {
-        const result = row.PostcodePlaats !== '';
-        resolve(result);
-      })
-    })
-    // return row.Geslacht === 'M';
-  }
-
-  public canRowBeEditted(row: any): Promise<boolean> {
-    return new Promise((resolve: Function) => {
-      setTimeout(() => {
-        resolve(true);
-      })
-    })
-  }
-
-  public handleSelectRow(row: any): void {
-    console.log(row);
-  }
-
-  public handleDblClickRow(row: any): void {
-    console.log(row);
-  }
-
-  public handleSaveRow(row: any): void {
-    console.log(row);
-  }
-
-  public handleRowVisible(row: any): void {
-    console.log(row);
-  }
-
-  public async handleRowDelete(row: any): Promise<void> {
-    console.log(row);
-  }
-
-  public updateDataCell(): void {
-    const data = this.data.slice();
-    this.data = undefined;
-    this.data = data.slice();
-    this.data[2]['Naam'] = 'Naam updated';
-  }
-}

package/src/app/components/filter-item-showcase.component.ts

@@ -1,178 +0,0 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
-import { FormComponent } from "../../../projects/corecomponents/src/lib/components/form/form.component";
-import { FilterItemViewmodel } from "../../../projects/corecomponents/src/lib/components/filter-item/filter-item-viewmodel";
-import {FilterItemMode} from "../../../projects/corecomponents/src/lib/core/enum/filterItem-mode.enum";
-
-@Component({
-  selector: "filter-item-showcase",
-  template: `
-    <h1>Reset filter button</h1>
-    <co-button [textContent]="'Reset filters'" (onClick)="resetFilters()"></co-button>
-    <h1>co-filter-item</h1>
-    <co-filter-item
-      [placeholder]="'Load collection after 3 chars'"
-      [expanded]="true"
-      [showAllResults]="false"
-      [showMoreLabel]="'Toon meer...'"
-      [showLessLabel]="'Toon minder'"
-      [minSearchCharsToLoadCollection]="3"
-      [mode]="modes.SingleSelectList"
-      [collectionLoadFn]="loadFilterCollection"
-      (collectionChange)="handleCollectionChange($event)"
-    ></co-filter-item>
-    <br>
-    <co-filter-item
-      [placeholder]="'Filter-item met grote collectie'"
-      [expanded]="true"
-      [collection]="collection"
-      [showAllResults]="true"
-      [mode]="modes.SingleSelectList"
-      [showMoreLabel]="'Toon meer...'"
-      [showLessLabel]="'Toon minder'"
-      (collectionChange)="handleCollectionChange($event)"
-    ></co-filter-item>
-    <br>
-    <co-filter-item
-      [placeholder]="'Filter-item met kleine collectie'"
-      [expanded]="true"
-      [collection]="collectionSmall"
-      [showAllResults]="false"
-      [showMoreLabel]="'Toon meer...'"
-      [showLessLabel]="'Toon minder'"
-      (collectionChange)="handleCollectionChange($event)"
-    ></co-filter-item>
-    <br>
-    <co-filter-item
-      [placeholder]="'Filter-item met custom content'"
-      [customContent]="true"
-      [expanded]="true">
-      <co-input-date-range
-        [placeholder]="'Selecteer een datum range'"
-        (startDateChange)="handleStartDateChange($event)"
-        (close)="handleCloseEvent($event)"
-        (select)="handleSelectEvent($event)"
-        (cleared)="handleClearedEvent($event)"
-        (endDateChange)="handleEndDateChange($event)"
-      ></co-input-date-range>
-    </co-filter-item>
-    <co-filter-item
-      [placeholder]="'Filter-item met custom content'"
-      [customContent]="true"
-      [expanded]="true">
-      <co-input-checkbox label="Test"></co-input-checkbox>
-    </co-filter-item>
-    <co-filter-item
-      [placeholder]="'Filter-item met Slider'"
-      [customContent]="false"
-      [mode]="modes.Slider"
-      [sliderDefaultMin]="10"
-      [sliderDefaultMax]="3000"
-      [expanded]="true">
-    </co-filter-item>
-    <co-filter-item
-      [placeholder]="'Filter-item met checkbox'"
-      [customContent]="false"
-      [mode]="modes.Checkbox"
-      [expanded]="true">
-    </co-filter-item>
-    <co-filter-item
-      [placeholder]="'Filter-item met textField'"
-      [customContent]="false"
-      [mode]="modes.TextField"
-      [expanded]="true">
-    </co-filter-item>
-    <co-filter-item
-      [placeholder]="'Filter-item met dateField'"
-      [customContent]="false"
-      [mode]="modes.DateField"
-      [expanded]="true">
-    </co-filter-item>
-    <co-filter-item
-      [placeholder]="'Filter-item met dateRange'"
-      [customContent]="false"
-      [mode]="modes.DateRangeField"
-      [expanded]="true">
-    </co-filter-item>
-  `,
-  styles: [`
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 320px;
-    }`
-  ]
-})
-export class FilterItemShowcaseComponent implements OnInit {
-  @ViewChild(FormComponent, {static: false})
-  public formComponent: FormComponent;
-  public modes: typeof FilterItemMode = FilterItemMode;
-
-  public collectionSmall: FilterItemViewmodel[] =  [
-    {code: 2, description: 'Offerte', count: 10, checked: false},
-    {code: 4, description: 'Order', count: 20, checked: false},
-    {code: 1, description: 'Orderbevestiging', count: 40, checked: false},
-    {code: 3, description: '123', count: 40, checked: false},
-  ];
-  public collection: FilterItemViewmodel[] =  [
-    {code: 2, description: 'Offerte', checked: false},
-    {code: 4, description: 'Order', checked: false},
-    {code: 1, description: 'Orderbevestiging', checked: false},
-    {code: 8, description: 'Afleverbon', checked: false},
-    {code: 16, description: 'Factuur', checked: false},
-    {code: 32, description: 'Bestelbon', checked: false},
-    {code: 64, description: 'Inkoopnota', checked: false},
-    {code: 128, description: 'Atelierbon', checked: false},
-    {code: 256, description: 'Werkbon', checked: false},
-    {code: 512, description: 'Edi inkooporder', checked: false},
-    {code: 1024, description: 'Vrachtbrief', checked: false},
-    {code: 2048, description: 'Leverindicatie', checked: false},
-    {code: 4096, description: 'Uitlopende levering', checked: false},
-    {code: 8192, description: 'Goederen binnen', checked: false},
-    {code: 16384, description: 'Afspraakbevestiging', checked: false},
-    {code: 32768, description: 'Herinneringsbestelbon', checked: false},
-    {code: 131072, description: 'Aanmaninglevertijd', checked: false},
-    {code: 65536, description: 'Service', checked: false},
-    {code: 262144, description: 'Prijskaart', checked: false},
-    {code: 524288, description: 'Interne levering', checked: false},
-    {code: 1048576, description: 'Logistieke sticker', checked: false}
-  ];
-  public fields: {text: string, value: string, count?: string} = {text: "description", value: "code"};
-
-  public model: number[] = [16, 128, 256];
-
-  ngOnInit(): void {
-  }
-
-  public handleCollectionChange(collection: FilterItemViewmodel[]): void {
-    console.log(collection);
-  }
-
-  public handleStartDateChange(date) {
-    console.log(date);
-  }
-
-  public handleEndDateChange(date) {
-    console.log(date);
-  }
-
-  public resetFilters() {
-    this.collection.forEach(item => item.checked=false);
-    this.collectionSmall.forEach(item => item.checked=false);
-  }
-
-  public loadFilterCollection = async (text: string) => {
-    return this.collection;
-  }
-
-  public handleCloseEvent(value: any): void {
-    console.log('Close event: ' + value);
-  }
-
-  public handleSelectEvent(value: any): void {
-    console.log('Select event: ' + value);
-  }
-
-  public handleClearedEvent(value: any): void {
-    console.log('Cleared event: ' + value);
-  }
-}