@colijnit/corecomponents_v12 12.2.23 → 12.2.25

package/projects/corecomponents/src/lib/components/simple-grid/simple-grid.component.ts

@@ -0,0 +1,489 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  HostListener,
+  Input,
+  ViewChildren,
+  ViewEncapsulation
+} from '@angular/core';
+import { FormMasterService } from '../../core/service/form-master.service';
+import { BaseSimpleGridComponent } from './base-simple-grid.component';
+import { ColumnAlign } from './simple-grid-column.directive';
+
+@Component({
+  selector: 'co-simple-grid',
+  template: `
+    <co-grid-toolbar *ngIf="showToolbar" [class.right]="rightToolbar"
+                     [showEdit]="showEdit"
+                     [showAdd]="showAdd"
+                     [showDelete]="showDelete"
+                     [deleteEnabled]="selectedRowIndex > -1"
+                     (addClick)="addNewRow()"
+                     (editClick)="editRow($event)"
+                     (saveClick)="validateAndSave()"
+                     (cancelClick)="cancelEditRow()"
+                     (deleteClick)="removeRow()"
+    ></co-grid-toolbar>
+    <table class="simple-grid-table" [clickOutside]="editing" (clickOutside)="handleClickOutsideRow()">
+      <colgroup>
+        <col *ngFor="let column of headerColumns; let index = index"
+             [class.simple-grid-column-auto-fit]="column.autoFit"
+             [style.width.px]="column.width"
+             [style.min-width.px]="MIN_COLUMN_WIDTH">
+      </colgroup>
+      <thead>
+      <tr>
+        <th scope="col" #headerCell class="simple-grid-column-header" *ngFor="let column of headerColumns; let index = index">
+          <div class="simple-grid-column-header-wrapper" [class.resizable]="resizable"
+               [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
+            <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
+              <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
+            </ng-container>
+            <ng-template #noHeaderTemplate>
+              <div class="simple-grid-column-header-label" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
+                   [textContent]="column.headerText || '&nbsp;'"
+              ></div>
+            </ng-template>
+            <div *ngIf="resizable && column.resizable" class="simple-grid-column-sizer"
+                 (mousedown)="handleSizerMouseDown($event, column)"
+            ></div>
+          </div>
+        </th>
+      </tr>
+      </thead>
+      <tbody #dropList cdkDropList cdkDropListOrientation="vertical"
+             class="simple-grid-drag-drop-list"
+             [cdkDropListDisabled]="!dragDropEnabled || editing"
+             [cdkDropListData]="data"
+             [cdkDropListEnterPredicate]="handleCanDragDrop"
+             (cdkDropListDropped)="handleDrop($event)">
+        <tr class="simple-grid-row" [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
+            [class.disabled]="getIsRowDisabled(rowIndex)"
+          [class.editing]="rowIndex === editRowIndex" *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index" cdkDrag
+          (click)="handleClickRow($event, rowIndex, row)" (dblclick)="handleDblClickRow($event, rowIndex, row)" (visibilityChange)="rowVisible.next(row)">
+          <co-form class="simple-grid-row-form">
+            <ng-container *ngIf="isSingleColumnRow(row)">
+              <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumns.length">
+                <co-simple-grid-cell
+                  [column]="columns[singleColumnIndex(row)]"
+                  [row]="row"
+                  [editMode]="false"
+                ></co-simple-grid-cell>
+              </td>
+            </ng-container>
+            <ng-container *ngIf="!isSingleColumnRow(row)">
+              <ng-container *ngFor="let column of headerColumns; let columnIndex = index">
+                <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
+                  <co-simple-grid-cell
+                    [column]="column"
+                    [row]="row"
+                    [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
+                    [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
+                    (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)"
+                  ></co-simple-grid-cell>
+                  <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
+                </td>
+              </ng-container>
+            </ng-container>
+          </co-form>
+        </tr>
+      </tbody>
+    </table>
+    <co-pagination-bar *ngIf="data?.length > rowsPerPage" class="pagination-bar"
+                       [itemsPerPage]="rowsPerPage"
+                       [currentPage]="currentPage"
+                       [totalItems]="data.length"
+                       [autoHide]="true"
+                       (previousClick)="goToPreviousPage()"
+                       (nextClick)="goToNextPage()"
+                       (pageClick)="setCurrentPage($event)"
+                        ></co-pagination-bar>
+  `,
+  providers: [
+    FormMasterService
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class SimpleGridComponent extends BaseSimpleGridComponent {
+  public readonly defaultTextAlign: ColumnAlign = ColumnAlign.Left;
+
+  @ViewChildren('headerCell') set headerCells(cells) {
+    const headerElements = cells.toArray();
+    for (let i = 0; i < headerElements.length; i++) {
+      this.columns[i].elementRef = headerElements[i];
+    }
+  }
+
+  @Input()
+  public showAdd: boolean = false;
+
+  @Input()
+  public showDelete: boolean = false;
+
+  @Input()
+  public editOnCellClick: boolean = true;
+
+  @Input()
+  public rightToolbar: boolean = false;
+
+  @Input()
+  public rowsPerPage: number = 1000;
+
+  @Input()
+  public rowDisabledFn: Function;
+
+  /**
+   * Promise function, if provided should return boolean
+   */
+  @Input()
+  public canRowBeEdittedFn: Function;
+
+  @HostBinding('class.co-simple-grid')
+  public showClass(): boolean {
+    return true;
+  }
+
+  @HostListener('keydown', ['$event'])
+  public handleKeyDown(event: KeyboardEvent): void {
+    if (!this.inlineEdit) {
+      return;
+    }
+    if (event.code === 'Tab') {
+      event.preventDefault();
+      this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
+        .then((index: number) => {
+          this.editCellIndex = index;
+          this._changeDetection.markForCheck();
+        })
+      this._detectChanges();
+    }
+    if (event.code === 'Escape') {
+      this.cancelEditRow();
+    }
+    if (event.code === 'Enter') {
+      this.validateAndSave();
+    }
+  }
+
+  public editing: boolean = false;
+  public editRowIndex: number = -1;
+  public editCellIndex: number = -1;
+  public selectedRowIndex: number = -1;
+  public rowToEdit: any;
+  public currentPage: number = 1;
+
+  private _doubleClicked: boolean = false;
+  private _newRow: boolean = false;
+
+  constructor(
+    private _changeDetection: ChangeDetectorRef,
+    private _formMaster: FormMasterService
+  ) {
+    super();
+    this.dataChanged.subscribe(() => {
+      this.currentPage = 1;
+    })
+  }
+
+  public handleClickOutsideRow(): void {
+    this.validateAndSave();
+  }
+
+  public getIsRowDisabled(idx: number): boolean {
+    return this.disabledRows.indexOf(idx) > -1;
+  }
+
+  public async isRowDisabled(row: any, index: number): Promise<boolean> {
+    if (this.rowDisabledFn && (typeof this.rowDisabledFn === 'function')) {
+      const disabled = await this.rowDisabledFn.call(this, row);
+      const idxRow: number = this.disabledRows.indexOf(index);
+      if (disabled) {
+        if (idxRow < 0) {
+          this.disabledRows.push(index);
+        }
+      } else {
+        if (idxRow > -1) {
+          this.disabledRows.splice(idxRow, 1);
+        }
+      }
+      return disabled;
+    } else {
+      return false;
+    }
+  }
+
+  public isSingleColumn(column): boolean {
+    return column.singleColumn;
+  }
+
+  public rowContainsSingleColumn(row, columns): boolean {
+    const singleColumn = columns.find(column => this.isSingleColumn(column) && !!row[column.field]);
+    return !!singleColumn;
+  }
+
+  public async addNewRow(): Promise<void> {
+    if (this.inlineEdit) {
+      const valid: boolean = this.validateAndSave();
+      // this._detectChanges();
+      if (valid) {
+        this.data.push({});
+        this._detectChanges();
+        this._newRow = true;
+        this.editing = true;
+        this.editRowIndex = this.data.length - 1;
+        this.rowToEdit = this.data[this.editRowIndex];
+        this.editCellIndex = await this._nextAvailableCellToEdit(true);
+        this._detectChanges();
+      }
+    } else {
+      this.addRow.next();
+    }
+  }
+
+  public validateAndSave(stopediting: boolean = true): boolean {
+    if (!this.editing) {
+      return true;
+    }
+    const valid: boolean = this._formMaster.submitSlaves();
+    this._detectChanges();
+    if (valid) {
+      this._saveRow(stopediting);
+      return true;
+    }
+    return false;
+  }
+
+  public cancelEditRow(): void {
+    if (!this.editing) {
+      return;
+    }
+    if (this._newRow) {
+      this.data.splice(this.data.length - 1, 1);
+    } else {
+      this.data[this.editRowIndex] = this.rowToEdit;
+    }
+    this._resetEdit();
+    this._detectChanges();
+  }
+
+  public removeRow(): void {
+    this.deleteRow.next(this.data[this.selectedRowIndex]);
+  }
+
+  public handleClickRow(event: MouseEvent, index: number, row: any): void {
+    setTimeout(() => {
+      if (this._doubleClicked) {
+        return;
+      }
+      this.selectTheRow(index);
+    }, 200);
+  }
+
+  public selectTheRow(index: number, emit: boolean = true): void {
+    if (this.selectedRowIndex === -1 || (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing))) {
+      this.selectedRowIndex = index;
+    }
+    if (emit) {
+      this.selectRow.next(this.data[this.selectedRowIndex]);
+    }
+    this._detectChanges();
+  }
+
+  public async handleDblClickRow(event: MouseEvent, index: number, row: any): Promise<void> {
+    if (await this.isRowDisabled(row, index)) {
+      this.selectedRowIndex = -1;
+      return;
+    }
+    let canEdit: boolean = true;
+    if (this.canRowBeEdittedFn && typeof this.canRowBeEdittedFn === 'function') {
+      canEdit = await this.canRowBeEdittedFn.call(this, row);
+    }
+    if (canEdit) {
+      this._doubleClicked = true;
+      this.dblClickRow.next(this.data[index]);
+      this.selectTheRow(index, false);
+      if (this.inlineEdit) {
+        this.editRow(event);
+      }
+    }
+    this._resetDblClick();
+  }
+
+  public editRow(event: MouseEvent, selectCell: boolean = true): void {
+    this.editRowIndex = this.selectedRowIndex;
+    this.rowToEdit = this.data[this.editRowIndex];
+    this.editing = true;
+    if (selectCell) {
+      this._nextAvailableCellToEdit(true).then((index: number) => {
+        this.editCellIndex = index;
+      });
+    }
+    this._detectChanges();
+  }
+
+  public async handleCellClick(event: MouseEvent, row: any, rowIndex: number, cellIndex: number): Promise<void> {
+    if (this.editOnCellClick) {
+      if (await this.isRowDisabled(row, rowIndex)) {
+        this.selectedRowIndex = -1;
+        return;
+      }
+      this.selectTheRow(rowIndex, false);
+      if (this.inlineEdit) {
+        this.editRowIndex = rowIndex;
+        this.editCellIndex = cellIndex;
+        this.editing = true;
+        this.editRow(event, false);
+      }
+    } else {
+      this.editCellIndex = cellIndex;
+    }
+    this._detectChanges();
+  }
+
+  protected prepareDataRow(row: any, index: number): void {
+    this.isRowDisabled(row, index);
+  }
+
+  private _resetDblClick(): void {
+    setTimeout(() => {
+      this._doubleClicked = false;
+    }, 500);
+  }
+
+  /**
+   *
+   * @param next; Move to next or previous cell
+   * @param start; Start from cellindex
+   * @private
+   */
+  private _nextAvailableCellToEdit(next: boolean, start: number = -1): Promise<number> {
+    return new Promise((resolve: Function, reject: Function) => {
+      const numEditableColumns: number = this.columns.filter(c => !c.readonly).length;
+      const wantedIndex = start + (next ? 1 : -1);
+      if (wantedIndex >= numEditableColumns) {
+        this._getNextEditRowIndex()
+          .then((index: number) => {
+            this.editRowIndex = index;
+            resolve(this._getNextEditCellIndex(0));
+          })
+          .catch((e) => {
+            reject();
+          });
+      } else if (wantedIndex < 0) {
+        this._getPreviousEditRowIndex()
+          .then((index: number) => {
+            this.editRowIndex = index;
+            resolve(this._getPreviousEditCellIndex(this.columns.length - 1));
+          })
+          .catch((e) => {
+            reject();
+          });
+      } else {
+        resolve(next ? this._getNextEditCellIndex(start + 1) : this._getPreviousEditCellIndex(start - 1));
+      }
+    });
+  }
+
+  private _getNextEditCellIndex(start: number): number {
+    for (let i: number = start; i < this.columns.length; i++) {
+      if (!this.columns[i].readonly) {
+        return i;
+      }
+    }
+  }
+
+  private _getPreviousEditCellIndex(start: number): number {
+    for (let i: number = start; i >= 0; i--) {
+      if (!this.columns[i].readonly) {
+        return i;
+      }
+    }
+  }
+
+  private _getNextEditRowIndex(): Promise<number> {
+    return new Promise((resolve: Function, reject: Function) => {
+      let newRowIndex: number = 0;
+      if (this.editRowIndex + 1 >= this.data.length) {
+        if (this.autoAddRow) {
+          this.addNewRow();
+          newRowIndex = this.editRowIndex;
+        } else {
+          newRowIndex = 0;
+        }
+      } else {
+        newRowIndex = this.editRowIndex + 1;
+      }
+      if (newRowIndex !== this.editRowIndex) { // go to different row validate current one first
+        if (this.validateAndSave(false)) {
+          this.rowToEdit = this.data[newRowIndex];
+          resolve(newRowIndex);
+        } else {
+          reject();
+        }
+      } else {
+        resolve(newRowIndex);
+      }
+    });
+  }
+
+  private _getPreviousEditRowIndex(): Promise<number> {
+    return new Promise((resolve: Function, reject: Function) => {
+      let newRowIndex: number = 0;
+      if (this.editRowIndex - 1 < 0) {
+        newRowIndex = this.data.length - 1;
+      } else {
+        newRowIndex = this.editRowIndex - 1;
+      }
+      if (newRowIndex !== this.editRowIndex) { // go to different row validate current one first
+        if (this.validateAndSave(false)) {
+          this.rowToEdit = this.data[newRowIndex];
+          resolve(newRowIndex);
+        } else {
+          reject();
+        }
+      } else {
+        resolve(newRowIndex);
+      }
+    });
+  }
+
+  private _saveRow(stopediting: boolean = true): void {
+    // emit saveEvent
+    if (this.rowToEdit) {
+      this.saveRow.next(this.rowToEdit);
+    }
+    this._newRow = false;
+    if (stopediting) {
+      this._resetEdit();
+    }
+    this._detectChanges();
+  }
+
+  public goToPreviousPage(): void {
+      this.currentPage -= 1;
+  }
+
+  public goToNextPage(): void {
+      this.currentPage += 1;
+  }
+
+  public setCurrentPage(page: number): void {
+    this.currentPage = page;
+  }
+
+  private _detectChanges(): void {
+    this._changeDetection.detectChanges();
+  }
+
+  private _resetEdit(): void {
+    this._newRow = false;
+    this.selectedRowIndex = -1;
+    this.editRowIndex = -1;
+    this.editCellIndex = -1;
+    this.editing = false;
+    this.rowToEdit = undefined;
+  }
+}

package/projects/corecomponents/src/lib/components/simple-grid/simple-grid.module.ts

@@ -0,0 +1,38 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import { PaginationBarModule } from "../pagination-bar/pagination-bar.module";
+import { PaginationModule } from "../pagination/pagination.module";
+import {SimpleGridComponent} from "./simple-grid.component";
+import {DragDropModule} from "@angular/cdk/drag-drop";
+import {SimpleGridColumnDirective} from "./simple-grid-column.directive";
+import {GridToolbarModule} from "../grid-toolbar/grid-toolbar.module";
+import {InputTextModule} from "../input-text/input-text.module";
+import {SimpleGridCellComponent} from "./simple-grid-cell.component";
+import {FormModule} from "../form/form.module";
+import {ObserveVisibilityModule} from "../../directives/observe-visibility/observe-visibility.module";
+import {ClickoutsideModule} from '../../directives/clickoutside/clickoutside.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DragDropModule,
+    GridToolbarModule,
+    InputTextModule,
+    FormModule,
+    ObserveVisibilityModule,
+    PaginationModule,
+    PaginationBarModule,
+    ClickoutsideModule
+  ],
+  declarations: [
+    SimpleGridComponent,
+    SimpleGridCellComponent,
+    SimpleGridColumnDirective
+  ],
+  exports: [
+    SimpleGridComponent,
+    SimpleGridCellComponent,
+    SimpleGridColumnDirective
+  ]
+})
+export class SimpleGridModule { }

package/projects/corecomponents/src/lib/components/tile/tile.component.ts

@@ -0,0 +1,71 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
+import {IconCacheService} from '../icon/icon-cache.service';
+import {CoreComponentsIcon} from '../../core/enum/core-components-icon.enum';
+import {SafeHtml} from '@angular/platform-browser';
+import {InputBoolean} from '../../core/decorator/input-boolean.decorator';
+
+@Component({
+  selector: 'co-tile',
+  template: `
+    <div class="tile-wrapper">
+      <div class="tile-top">
+        <ng-content select="[tile-top-content]"></ng-content>
+      </div>
+      <div class="image" (click)="onImageClick.emit()">
+        <co-image *ngIf="image" [source]="image"></co-image>
+        <div class="no-image-wrapper" *ngIf="!image && !noImagePlaceholder">
+          <co-icon class="no-image" [iconData]="imagePlaceHolder"></co-icon>
+          <span [textContent]="'Geen afbeelding'"></span>
+        </div>
+        <ng-content select="[tile-over-image]"></ng-content>
+      </div>
+      <div class="tile-bottom">
+        <ng-content select="[tile-bottom-content]"></ng-content>
+      </div>
+    </div>
+    <div class="tile-extra-bottom">
+      <div class="main">
+        <ng-content select="[tile-extra-bottom-content]"></ng-content>
+      </div>
+    </div>
+    <div class="tile-extended-shadow-wrapper" *ngIf="mouseOverExtended">
+      <div class="shodow-masque"></div>
+      <div class="extended">
+        <ng-content select="[tile-extended-content]"></ng-content>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TileComponent {
+
+  public readonly icon: typeof CoreComponentsIcon = CoreComponentsIcon;
+
+  @Input()
+  public image: string;
+
+  @Input()
+  @InputBoolean()
+  public mouseOverExtended: boolean = false;
+
+  @HostBinding('class.small')
+  @Input()
+  @InputBoolean()
+  public small: boolean = false;
+
+  @Input()
+  @InputBoolean()
+  public noImagePlaceholder: boolean = false;
+
+  @Output()
+  public onImageClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding('class.co-tile')
+  public showClass: boolean = true;
+
+  public imagePlaceHolder: null | SafeHtml;
+
+  constructor(private _iconCache: IconCacheService) {
+    this.imagePlaceHolder = this._iconCache.getIcon(this.icon.Camera);
+  }
+}

package/projects/corecomponents/src/lib/components/tile/tile.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TileComponent } from './tile.component';
+import { IconModule } from '../icon/icon.module';
+import { IconCacheService } from '../icon/icon-cache.service';
+import { ImageModule } from '../image/image.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        IconModule,
+        ImageModule
+    ],
+    declarations: [TileComponent],
+    providers: [
+        IconCacheService
+    ],
+    exports: [TileComponent]
+})
+export class TileModule {
+}

package/projects/corecomponents/src/lib/components/tile-select/tile-select.component.ts

@@ -0,0 +1,36 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'co-tile-select',
+  template: `
+      <div class="co-tile-wrapper" (click)="selectedChange.emit(selected)">
+          <div class="co-tile-select-wrapper" *ngIf="showRadioButton">
+              <co-input-radio-button [model]="selected" [readonly]="selected || readonly" (modelChange)="selectedChange.emit($event)"></co-input-radio-button>
+          </div>
+          <div class="co-tile-content-wrapper">
+              <ng-content></ng-content>
+          </div>
+      </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class TileSelectComponent {
+  @HostBinding('class.selected')
+  @Input()
+  public selected: boolean = false;
+
+  @Input()
+  public readonly: boolean = false;
+
+  @Input()
+  public showRadioButton: boolean = true;
+
+  @Output()
+  public selectedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @HostBinding('class.co-tile-select')
+  public showClass() {
+    return true;
+  }
+
+} 

package/projects/corecomponents/src/lib/components/tile-select/tile-select.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TileSelectComponent} from './tile-select.component';
+import {InputRadioButtonModule} from '../input-radio-button/input-radio-button.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    InputRadioButtonModule
+  ],
+  declarations: [
+    TileSelectComponent
+  ],
+  exports: [
+    TileSelectComponent
+  ]
+})
+export class TileSelectModule {
+}