@colijnit/corecomponents_v12 254.1.4 → 254.1.5

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

@@ -0,0 +1,645 @@
+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, SimpleGridColumnDirective} from './simple-grid-column.directive';
+import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
+import {IconCacheService} from "../icon/icon-cache.service";
+import * as XLSX from 'xlsx';
+
+@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
+      id="simple-grid-table"
+      class="simple-grid-table"
+      [clickOutside]="editing"
+      (clickOutside)="handleClickOutsideRow()">
+      <colgroup>
+        <col *ngFor="let column of headerColumnsCopy; 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 headerColumnsCopy; let index = index">
+          <div
+            class="simple-grid-column-header-wrapper"
+            [class.resizable]="resizable"
+            [class.selected]="column.isSelected"
+            [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"
+                   [class.with-menu]="showGridSettings"
+                   [textContent]="column.headerText || '&nbsp;'"
+                   (click)="toggleColumnMenu(column)">
+              </div>
+
+              <div class="column-menu" *ngIf="column.isSelected">
+                <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
+                <ul>
+                  <li (click)="hideColumn(column)">Hide Column</li>
+<!--                  <li (click)="sortColumn(column, column.field)">Sort Column</li>-->
+                </ul>
+              </div>
+            </ng-template>
+            <div *ngIf="resizable && column.resizable" class="simple-grid-column-sizer"
+                 (mousedown)="handleSizerMouseDown($event, column)"
+            ></div>
+          </div>
+        </th>
+        <th *ngIf="showGridSettings" class="simple-grid-column-header grid-settings">
+          <co-button
+            [class.selected]="isSettingsMenuOpen"
+            [iconData]="icons.getIcon(Icons.CogWheels)"
+            (click)="toggleSettingsMenu()">
+          </co-button>
+
+          <div class="settings-menu" *ngIf="isSettingsMenuOpen">
+            <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
+            <ul>
+              <li (click)="exportToExcel()">Export to Excel</li>
+              <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">Show All
+                Columns
+              </li>
+            </ul>
+          </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]="headerColumnsCopy.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 headerColumnsCopy; 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>
+          <td *ngIf="showGridSettings"></td>
+        </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 showGridSettings: 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 isSettingsMenuOpen: boolean = false;
+  public editRowIndex: number = -1;
+  public editCellIndex: number = -1;
+  public selectedRowIndex: number = -1;
+  public rowToEdit: any;
+  public currentPage: number = 1;
+  public sortColumnValue: string;
+  public sortDirection: 'asc' | 'desc' = 'asc';
+  public readonly Icons = CoreComponentsIcon;
+
+  private _doubleClicked: boolean = false;
+  private _newRow: boolean = false;
+
+  constructor(
+    public icons: IconCacheService,
+    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();
+  }
+
+  public toggleSettingsMenu(): void {
+    this.headerColumnsCopy.forEach(i => i.isSelected = false);
+    this.isSettingsMenuOpen = !this.isSettingsMenuOpen;
+  }
+
+  public toggleColumnMenu(col:  any): void {
+    if (!this.showGridSettings) {
+      return;
+    }
+
+    this.isSettingsMenuOpen = false;
+    if (col.isSelected) {
+      col.isSelected = false;
+    } else {
+      this.headerColumnsCopy.forEach(i => i.isSelected = false);
+      col.isSelected = true;
+    }
+  }
+
+  public hideColumn(col: any): void {
+    col.isSelected = false;
+    this.headerColumnsCopy = this.headerColumnsCopy.filter((obj) => {
+      return obj !== col;
+    });
+  }
+
+  // TODO Fix this sort method
+  // public sortColumn(col: any, columnValue: string): void {
+  //   console.log(col);
+  //   console.log("columnValue " + columnValue);
+  //   col.isSelected = false;
+  //
+  //   if (this.sortColumnValue === columnValue) {
+  //     this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+  //   } else {
+  //     this.sortColumnValue = columnValue;
+  //     this.sortDirection = 'asc';
+  //   }
+  //
+  //   console.log(this.data);
+  //   // this.data = this._sortData(this.data);
+  //
+  //
+  //   this.data.sort((a, b) => {
+  //     const sign = this.sortDirection === 'asc' ? 1 : -1;
+  //
+  //     console.log("a " + a);
+  //     console.log("b " + b);
+  //     console.log(a[this.sortColumnValue]);
+  //     console.log(b[this.sortColumnValue]);
+  //     console.log("sign " + sign);
+  //
+  //     if (a[this.sortColumnValue] < b[this.sortColumnValue]) {
+  //       return -1 * sign;
+  //     } else if (a[this.sortColumnValue] > b[this.sortColumnValue]) {
+  //       return 1 * sign;
+  //     }
+  //     return 0;
+  //   });
+  //
+  //
+  //
+  //   this._detectChanges();
+  //   // this.data.sort((a, b) => a[this.sortColumnValue] - b[this.sortColumnValue]);
+  //   console.log(this.data);
+  // }
+
+  private _sortData(tableData: any): any {
+    return tableData.sort((a, b) => {
+      const sign = this.sortDirection === 'asc' ? 1 : -1;
+
+      console.log("a " + a);
+      console.log("b " + b);
+      console.log(a[this.sortColumnValue]);
+      console.log(b[this.sortColumnValue]);
+      console.log("sign " + sign);
+
+      if (a[this.sortColumnValue] < b[this.sortColumnValue]) {
+        return -1 * sign;
+      } else if (a[this.sortColumnValue] > b[this.sortColumnValue]) {
+        return 1 * sign;
+      }
+      return 0;
+    });
+  }
+
+  public showAllColumns(): void {
+    this.isSettingsMenuOpen = false;
+    this.headerColumnsCopy = this.headerColumns;
+  }
+
+  public exportToExcel(): void {
+    this.isSettingsMenuOpen = false;
+    let element = document.getElementById('simple-grid-table');
+    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);
+    const wb: XLSX.WorkBook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+    XLSX.writeFile(wb, 'ExcelSheet.xlsx');
+  }
+
+  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,42 @@
+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';
+import {ButtonModule} from "../button/button.module";
+import {CoreComponentsTranslationModule} from "../../translation/core-components-translation.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DragDropModule,
+    GridToolbarModule,
+    InputTextModule,
+    FormModule,
+    ObserveVisibilityModule,
+    PaginationModule,
+    PaginationBarModule,
+    ClickoutsideModule,
+    ButtonModule,
+    CoreComponentsTranslationModule
+  ],
+  declarations: [
+    SimpleGridComponent,
+    SimpleGridCellComponent,
+    SimpleGridColumnDirective
+  ],
+  exports: [
+    SimpleGridComponent,
+    SimpleGridCellComponent,
+    SimpleGridColumnDirective
+  ]
+})
+export class SimpleGridModule { }