@colijnit/corecomponents_v12 12.2.27 → 12.2.28

package/fesm2015/colijnit-corecomponents_v12.js

@@ -16,6 +16,7 @@ import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import * as XLSX from 'xlsx';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { ArrayUtils as ArrayUtils$1 } from '@colijnit/ioneconnector/build/utils/array-utils';
 import { DEFAULT_GET_OBJECT_CONFIGURATION_PARAMS } from '@colijnit/ioneconnector/build/model/default-get-object-configurations-params';
@@ -5683,6 +5684,7 @@ class InputTextComponent extends BaseInputComponent {
         this.excludePlusMinus = true;
         this.showClearButton = true;
         this.showPlaceholderOnFocus = true;
+        this.selectOnFocus = false;
         this.noStyle = false;
         this.hideArrowButtons = false;
         this.leftIconClick = new EventEmitter();
@@ -5776,12 +5778,14 @@ class InputTextComponent extends BaseInputComponent {
     handleInputFocus(event) {
         event.preventDefault();
         event.stopPropagation();
+        if (this.selectOnFocus) {
+            this.input.select();
+        }
         this.isFocused.emit(this.focused);
     }
     handleBlur(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.focused = false;
         this.isFocused.emit(false);
     }
     clearInput(event) {
@@ -5822,7 +5826,7 @@ InputTextComponent.decorators = [
             <ng-content></ng-content>
           </div>
         </ng-container>
-        <co-icon [class.show]="showClearButton && hasValue && focused && !readonly" class="input-text-clear-button" [icon]="icons.CrossSkinny" (click)="clearInput($event)"></co-icon>
+        <co-icon [class.show]="showClearButton && hasValue && !readonly" class="input-text-clear-button" [icon]="icons.CrossSkinny" (click)="clearInput($event)"></co-icon>
         <div class="required-indicator"></div>
       </div>
       <div *ngIf="rightIcon || rightIconData" class="spacer right-icon"></div>
@@ -5877,6 +5881,7 @@ InputTextComponent.propDecorators = {
     rightIcon: [{ type: Input }],
     leftIconData: [{ type: Input }],
     rightIconData: [{ type: Input }],
+    selectOnFocus: [{ type: Input }],
     noStyle: [{ type: HostBinding, args: ['class.no-style',] }, { type: Input }],
     hideArrowButtons: [{ type: Input }, { type: HostBinding, args: ['class.hide-arrows',] }],
     isDate: [{ type: HostBinding, args: ["class.isDate",] }],
@@ -8976,6 +8981,7 @@ class SimpleGridColumnDirective {
         this.resizable = true;
         this.required = false;
         this.autoFit = false;
+        this.isSelected = false;
         this.readonly = false;
         this.order = 0;
         this.singleColumn = false;
@@ -9067,6 +9073,7 @@ SimpleGridColumnDirective.propDecorators = {
     resizable: [{ type: Input }],
     required: [{ type: Input }],
     autoFit: [{ type: Input }],
+    isSelected: [{ type: Input }],
     width: [{ type: Input }],
     readonly: [{ type: Input }],
     collection: [{ type: Input }],
@@ -9098,6 +9105,7 @@ class BaseSimpleGridComponent {
         this.rowVisible = new EventEmitter();
         this.columns = [];
         this.headerColumns = [];
+        this.headerColumnsCopy = [];
         this._data = [];
         this.disabledRows = [];
         this._prepared = false;
@@ -9172,6 +9180,7 @@ class BaseSimpleGridComponent {
         this.disabledRows.length = 0;
         if (this.columns && this.columns.length > 0) {
             this.headerColumns = this.columns.filter(c => !c.singleColumn);
+            this.headerColumnsCopy = this.headerColumns;
             let singleColumnIndex = -1;
             for (let i = 0; i < this.columns.length; i++) {
                 if (this.columns[i].singleColumn) {
@@ -9235,8 +9244,9 @@ BaseSimpleGridComponent.propDecorators = {
 };
 
 class SimpleGridComponent extends BaseSimpleGridComponent {
-    constructor(_changeDetection, _formMaster) {
+    constructor(icons, _changeDetection, _formMaster) {
         super();
+        this.icons = icons;
         this._changeDetection = _changeDetection;
         this._formMaster = _formMaster;
         this.defaultTextAlign = ColumnAlign.Left;
@@ -9246,10 +9256,13 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         this.rightToolbar = false;
         this.rowsPerPage = 1000;
         this.editing = false;
+        this.isSettingsMenuOpen = false;
         this.editRowIndex = -1;
         this.editCellIndex = -1;
         this.selectedRowIndex = -1;
         this.currentPage = 1;
+        this.sortDirection = 'asc';
+        this.Icons = CoreComponentsIcon;
         this._doubleClicked = false;
         this._newRow = false;
         this.dataChanged.subscribe(() => {
@@ -9439,6 +9452,95 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
             this._detectChanges();
         });
     }
+    toggleSettingsMenu() {
+        this.headerColumnsCopy.forEach(i => i.isSelected = false);
+        this.isSettingsMenuOpen = !this.isSettingsMenuOpen;
+    }
+    toggleColumnMenu(col) {
+        this.isSettingsMenuOpen = false;
+        if (col.isSelected) {
+            col.isSelected = false;
+        }
+        else {
+            this.headerColumnsCopy.forEach(i => i.isSelected = false);
+            col.isSelected = true;
+        }
+    }
+    hideColumn(col) {
+        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);
+    // }
+    _sortData(tableData) {
+        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;
+        });
+    }
+    showAllColumns() {
+        this.isSettingsMenuOpen = false;
+        this.headerColumnsCopy = this.headerColumns;
+    }
+    exportToExcel() {
+        this.isSettingsMenuOpen = false;
+        let element = document.getElementById('simple-grid-table');
+        const ws = XLSX.utils.table_to_sheet(element);
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+        XLSX.writeFile(wb, 'ExcelSheet.xlsx');
+    }
     prepareDataRow(row, index) {
         this.isRowDisabled(row, index);
     }
@@ -9595,31 +9697,69 @@ SimpleGridComponent.decorators = [
                      (cancelClick)="cancelEditRow()"
                      (deleteClick)="removeRow()"
     ></co-grid-toolbar>
-    <table class="simple-grid-table" [clickOutside]="editing" (clickOutside)="handleClickOutsideRow()">
+    <table
+      id="simple-grid-table"
+      class="simple-grid-table"
+      [clickOutside]="editing"
+      (clickOutside)="handleClickOutsideRow()">
       <colgroup>
-        <col *ngFor="let column of headerColumns; let index = index"
+        <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 headerColumns; let index = index">
-          <div class="simple-grid-column-header-wrapper" [class.resizable]="resizable"
-               [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
+        <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"
+              <div class="simple-grid-column-header-label"
+                   [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
                    [textContent]="column.headerText || '&nbsp;'"
-              ></div>
+                   (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 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"
@@ -9628,36 +9768,42 @@ SimpleGridComponent.decorators = [
              [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">
+      <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]="columns[singleColumnIndex(row)]"
+                  [column]="column"
                   [row]="row"
-                  [editMode]="false"
+                  [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 *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>
+          </ng-container>
+          <td></td>
+        </co-form>
+      </tr>
       </tbody>
     </table>
     <co-pagination-bar *ngIf="data?.length > rowsPerPage" class="pagination-bar"
@@ -9668,7 +9814,7 @@ SimpleGridComponent.decorators = [
                        (previousClick)="goToPreviousPage()"
                        (nextClick)="goToNextPage()"
                        (pageClick)="setCurrentPage($event)"
-                        ></co-pagination-bar>
+    ></co-pagination-bar>
   `,
                 providers: [
                     FormMasterService
@@ -9678,6 +9824,7 @@ SimpleGridComponent.decorators = [
             },] }
 ];
 SimpleGridComponent.ctorParameters = () => [
+    { type: IconCacheService },
     { type: ChangeDetectorRef },
     { type: FormMasterService }
 ];
@@ -10436,7 +10583,9 @@ SimpleGridModule.decorators = [
                     ObserveVisibilityModule,
                     PaginationModule,
                     PaginationBarModule,
-                    ClickoutsideModule
+                    ClickoutsideModule,
+                    ButtonModule,
+                    CoreComponentsTranslationModule
                 ],
                 declarations: [
                     SimpleGridComponent,