@colijnit/corecomponents_v12 12.2.19 → 12.2.20

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

@@ -1,489 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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/simple-grid/style/_layout.scss

@@ -1,185 +0,0 @@
-@include export-module('cc-simple-grid-layout') {
-  .co-simple-grid {
-    display: block;
-    font-family: $cc-simple-grid-font-familiy;
-    font-size: $cc-simple-grid-font-size;
-    co-input-checkbox {
-      justify-content: center;
-      &.read-only {
-        opacity: 1;
-      }
-      .checkbox {
-        .checkmark {
-          left: $cc-simple-grid-input-checkbox-check-mark-width * .15;
-          &.show {
-          }
-        }
-      }
-    }
-  }
-  .simple-grid-table {
-    height: 1px; // fix for 100% height of cells
-    table-layout: fixed;
-    width: 100%;
-    border-collapse: collapse;
-  }
-  // styling outside of grid because of drag and drop functionality
-  .simple-grid-column-auto-fit {
-    white-space: nowrap;
-    width: 1%;
-  }
-  .simple-grid-column-header-wrapper {
-    font-family: $cc-simple-grid-header-font-familiy;
-    font-size: $cc-simple-grid-header-font-size;
-    font-weight: $cc-simple-grid-header-font-weight;
-    text-transform: $cc-simple-grid-header-text-transform;
-    display: flex;
-    flex-direction: row;
-  }
-  .co-form.simple-grid-row-form {
-    display: contents;
-    width: 100%;
-  }
-  .simple-grid-column-header, .simple-grid-column-cell {
-    //display: flex;
-    //flex-direction: row;
-    //padding-right: 5px;
-    //flex-basis: 100%;
-  }
-  .simple-grid-column-header {
-    justify-content: space-between;
-    border-style: $cc-simple-grid-header-border-style;
-    border-width: $cc-simple-grid-header-border-width;
-    font-size: $cc-font-size-small;
-  }
-  .simple-grid-single-column-cell {
-    width: 100%;
-  }
-  .simple-grid-column-cell {
-    //padding: $cc-simple-grid-cell-padding;
-    align-items: $cc-simple-grid-row-align-items;
-    vertical-align: $cc-simple-grid-row-vertical-align-items;
-    //height: $cc-simple-grid-row-height;
-  }
-  .co-simple-grid-cell {
-    width: 100%;
-    .co-icon {
-      width: $cc-simple-grid-cell-icon-size;
-      height: $cc-simple-grid-cell-icon-size;
-    }
-    .co-button {
-      background-color: $cc-simple-grid-button-background-color;
-      .co-icon {
-        width: $cc-simple-grid-cell-icon-size;
-        height: $cc-simple-grid-cell-icon-size;
-      }
-    }
-  }
-  .simple-grid-column-cell-value {
-    height: 100%;
-    width: 100%;
-    > * {
-      height: 100%;
-      width: 100%;
-    }
-  }
-  .simple-grid-column-cell-field {
-    display: flex;
-    align-items: $cc-simple-grid-cell-field-align-items;
-    border-style: $cc-simple-grid-cell-field-border-style;
-    border-width: $cc-simple-grid-cell-field-border-width;
-    padding: $cc-simple-grid-cell-field-padding;
-    border-radius: $cc-simple-grid-cell-field-radius;
-    span {
-      white-space: normal;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    .form-input {
-      width: 100%;
-    }
-  }
-  .simple-grid-column-header-label {
-    font-weight: bold;
-    color: $cc-simple-grid-text-color;
-    user-select: none;
-    padding: $cc-simple-grid-header-padding;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    border-bottom: 2px solid $cc-color-grid-row-hover-background;
-  }
-  .simple-grid-column-sizer {
-    cursor: col-resize;
-    width: 5px;
-  }
-  .simple-grid-column-sizer-placeholder {
-    width: 5px;
-  }
-  .simple-grid-row {
-    height: $cc-simple-grid-row-height;
-    font-family: $cc-simple-grid-font-familiy;
-    font-size: $cc-simple-grid-font-size;
-    //display: flex;
-    //flex-direction: row;
-    border: $cc-simple-grid-row-border;
-    border-width: $cc-simple-grid-row-border-width;
-    border-style: solid;
-    border-color: $cc-simple-grid-row-border-color;
-    &.disabled {
-      opacity: $cc-simple-grid-row-disabled-opacity;
-      background: $cc-simple-grid-row-disabled-background-color;
-    }
-    &.editing {
-      .form-input {
-        &:before, &:hover, &:hover:before, &.cc-input-focused, &.cc-input-focused:before {
-          border: none !important; // nasty hack, fix asap
-          box-shadow: none !important; // nasty hack, fix asap
-        }
-      }
-    }
-  }
-  .right-align {
-    text-align: right;
-    justify-content: flex-end;
-  }
-  .center-align {
-    text-align: center;
-    justify-content: center;
-  }
-  .left-align {
-    text-align: left;
-    justify-content: flex-start;
-  }
-
-  .simple-grid-row.cdk-drag-preview {
-    box-sizing: border-box;
-    border-radius: 4px;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-    display: table;
-    td {
-      flex-grow: 2;
-      font-size: 10px;
-      padding: 4px;
-      vertical-align: middle;
-    }
-  }
-
-  .simple-grid-row.cdk-drag-placeholder {
-    opacity: 0.3;
-  }
-
-  .cdk-drag-animating {
-    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
-  }
-
-  .pagination-bar {
-    ul {
-      margin: $cc-simple-grid-pagination-bar-margin;
-    }
-  }
-}
-