@colijnit/corecomponents_v12 255.1.1 → 255.1.3

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

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

@@ -1,42 +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';
-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 { }