mat-table-ext 0.0.7 → 0.0.9

package/projects/mat-table-ext/src/lib/components/editing/editing.component.html

@@ -0,0 +1,55 @@
+<div *ngIf="!templateRef" style="height: 100%;" class="main-dialog-container">
+    <div mat-dialog-title class="dialog-title-container">
+        <h2 style="margin: 0;">Edit Row</h2>
+        <span class="example-spacer"></span>
+        <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
+            <mat-icon mat-dialog-close style="cursor: pointer;" fxFlex="5">close</mat-icon>
+        </button>
+    </div>
+    <mat-dialog-content style="margin-right: 20px;">
+        <div style="display: flex; flex-direction: column;">
+            <ng-container *ngFor="let key of keys">
+                <!-- Number Type -->
+                <mat-form-field *ngIf="types[key] == 'number'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <input matInput type="number" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
+                </mat-form-field>
+        
+                <!-- String Type -->
+        
+                <mat-form-field *ngIf="types[key] == 'string'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <input matInput type="text" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
+                </mat-form-field>
+                <mat-form-field *ngIf="types[key] == 'date'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <input matInput type="text" [(ngModel)]="dialogData['row'][key]" [ngModelOptions]="{standalone: true}">
+                </mat-form-field>
+                <!-- Selection Type -->
+        
+                <mat-form-field *ngIf="types[key] == 'selection'" appearance="outline" class="inline-editing-field">
+                    <mat-label>{{key | titlecase}}</mat-label>
+                    <mat-select [value]="dialogData['row'][key].value" [(ngModel)]="dialogData['row'][key].value">
+                        <mat-option *ngFor="let option of dialogData['row'][key].options" [value]="option">
+                            {{option}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <!-- Boolean Type -->
+                <p>
+                    <mat-checkbox *ngIf="types[key] == 'boolean'" color="primary" [(ngModel)]="dialogData['row'][key]">
+                        <mat-label>{{key | titlecase}}</mat-label>
+                    </mat-checkbox>
+                </p>
+            </ng-container>
+        </div>
+    </mat-dialog-content>
+    <div class="spacer"></div>
+    <mat-dialog-actions style="margin-top: 20px;" align="end">
+        <button mat-raised-button color="warn" mat-dialog-close>
+            Cancel
+        </button>
+        <button mat-raised-button color="primary" (click)="closeDialog()">Save</button>
+    </mat-dialog-actions>
+</div>
+<ng-container *ngIf="templateRef" [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{data:{row:templateRow,columns:columns,columnKeys:templateKeys,columnTypes:templateTypes,closeDialog:closeTemplateDialog}}"></ng-container>

package/projects/mat-table-ext/src/lib/components/editing/editing.component.scss

@@ -0,0 +1,19 @@
+.main-dialog-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.main-dialog-container mat-dialog-content {
+    overflow-y: auto;
+    margin: 0px;
+    padding: 0 0 0 20px;
+}
+
+.dialog-title-container {
+    display: flex;
+    align-items: center;
+}
+
+.spacer {
+    flex-grow: 1;
+}

package/projects/mat-table-ext/src/lib/components/editing/editing.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopupModalComponent } from './editing.component';
+
+describe('PopupModalComponent', () => {
+  let component: PopupModalComponent;
+  let fixture: ComponentFixture<PopupModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PopupModalComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PopupModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/mat-table-ext/src/lib/components/editing/editing.component.ts

@@ -0,0 +1,110 @@
+import { Component, Inject, OnInit, TemplateRef } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MTExColumn } from '../../models/tableExtModels';
+import { MatTableExtService } from '../../mat-table-ext.service';
+
+@Component({
+  selector: 'app-editing',
+  templateUrl: './editing.component.html',
+  styleUrls: ['./editing.component.scss'],
+})
+export class EditingComponent implements OnInit {
+  public templateRef!: TemplateRef<any>;
+  public keys: string[] = [];
+  public templateKeys: string[] = [];
+  public types: any = {};
+  public templateTypes: any = {};
+  public columns: MTExColumn[] = [];
+  public templateRow: any = {};
+  
+  constructor(
+    public dialogRef: MatDialogRef<EditingComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialogData: any,
+    public service: MatTableExtService
+  ) { }
+  
+  ngOnInit(): void {
+    this.setData(this.dialogData);
+  }
+/**
+ * @description This method is used to set data for editing.
+ * @param value dialog Data
+ */
+  setData(value: any) {
+    let row = value.row;
+    let types: any = {};
+    this.keys = [];
+    this.columns = value.columns;
+    this.columns.forEach((column) => {
+      this.keys.push(column.field);
+      if (column.type == 'selection') {
+        types[column.field] = column.type;
+        let temp = row[column.field];
+        row[column.field] = {
+          value: temp,
+          options: column.options,
+        };
+      } else {
+        types[column.field] = column.type;
+      }
+    });
+    this.types = types;
+    this.setTemplateRef(value);
+  }
+/**
+ * @description This method is used to set the data when data comes in from cus template.
+ * @param value template value
+ */
+  setTemplateRef(value: any) {
+    if (value.templateRef !== undefined) {
+      this.templateRow = { ...value.row };
+      let types: any = {};
+      this.templateKeys = [];
+      this.columns.forEach((column) => {
+        this.templateKeys.push(column.field);
+        if (column.type == 'selection') {
+          types[column.field] = column.type;
+          let temp = this.templateRow[column.field];
+          this.templateRow[column.field] = {
+            value: temp,
+            options: column.options,
+          };
+        } else {
+          types[column.field] = column.type;
+        }
+      });
+      this.templateTypes = types;
+      this.templateRef = value.templateRef;
+    }
+  }
+/**
+ * @description This method is triggered when dialog is closed and also emits the dialog closed event data.
+ */
+  closeDialog() {
+    let rowData = { ...this.dialogData.row };
+    this.keys.forEach((key: any) => {
+      if (this.types[key] === 'selection') {
+        let temp = rowData[key].value;
+        rowData[key] = temp;
+      }
+    });
+    this.dialogRef.close(rowData);
+  }
+
+  /**
+   * @description This method is called when the dialog is closed custom template action.
+   * @param row row to be edited.
+   * @param keys keys of columns
+   * @param types column types
+   */
+  closeTemplateDialog(row: any, keys: string[], types: string[]) {
+    let rowData = { ...row };
+    keys.forEach((key: any) => {
+      if (types[key] === 'selection') {
+        let temp = rowData[key].value;
+        rowData[key] = temp;
+      }
+    });
+    this.dialogRef.close(rowData);
+  }
+}

package/projects/mat-table-ext/src/lib/components/filter-columns-component/filter-columns-component.component.html

@@ -0,0 +1,26 @@
+
+    <ng-container *ngIf="obj">
+        <!-- Number Type -->
+        <mat-form-field *ngIf="obj.type == 'number'" appearance="outline" class="inline-editing-field" >
+            <input matInput type="number" [formControl]="numberCtrl">
+        </mat-form-field>
+        
+        <!-- String Type -->
+        <mat-form-field *ngIf="obj.type == 'string'" appearance="outline" class="inline-editing-field">
+            <input matInput type="text" [formControl]="stringCtrl">
+        </mat-form-field>
+        <mat-form-field *ngIf="obj.type == 'date'" appearance="outline" class="inline-editing-field">
+            <input matInput type="date" [formControl]="dateCtrl">
+        </mat-form-field>
+        <!-- Selection Type -->
+        <mat-form-field *ngIf="obj.type == 'selection'" appearance="outline" class="inline-editing-field">
+            <mat-select [value]="" [formControl]="selectionCtrl">
+                <mat-option *ngFor="let option of obj.options" [value]="option">
+                    {{option}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+        <!-- Boolean Type -->
+        <mat-checkbox (click)="$event.stopPropagation()" *ngIf="obj.type == 'boolean'" color="primary" [formControl]="booleanCtrl"></mat-checkbox>
+
+    </ng-container>

package/projects/mat-table-ext/src/lib/components/filter-columns-component/filter-columns-component.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterColumnsComponentComponent } from './filter-columns-component.component';
+
+describe('FilterColumnsComponentComponent', () => {
+  let component: FilterColumnsComponentComponent;
+  let fixture: ComponentFixture<FilterColumnsComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterColumnsComponentComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FilterColumnsComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/mat-table-ext/src/lib/components/filter-columns-component/filter-columns-component.component.ts

@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-filter-columns-component',
+  templateUrl: './filter-columns-component.component.html',
+  styleUrls: ['./filter-columns-component.component.scss'],
+})
+export class FilterColumnsComponentComponent implements OnInit {
+  @Input() obj!: any;
+  @Output() filterOutput: EventEmitter<any> = new EventEmitter<any>();
+  stringCtrl: FormControl = new FormControl();
+  numberCtrl: FormControl = new FormControl();
+  dateCtrl: FormControl = new FormControl();
+  booleanCtrl: FormControl = new FormControl();
+  selectionCtrl: FormControl = new FormControl();
+  constructor() {}
+  ngOnInit(): void {
+    this.stringCtrl.valueChanges.subscribe((value) => {
+      this.checkValue(value);
+    });
+    this.dateCtrl.valueChanges.subscribe((value) => {
+      this.checkValue(value);
+    });
+    this.numberCtrl.valueChanges.subscribe((value) => {
+      this.checkValue(value);
+    });
+    this.booleanCtrl.valueChanges.subscribe((value) => {
+      this.checkValue(value);
+    });
+    this.selectionCtrl.valueChanges.subscribe((value) => {
+      this.checkValue(value);
+    });
+  }
+  /**
+   * @description This method is make value is valid and not null.
+   * @param value value to check its type.
+   */
+  checkValue(value: any) {
+    if (value || value == '') {
+      this.emitOutput(value);
+    } else if (value == null) {
+      this.emitOutput('');
+    }
+  }
+/**
+ * @description This method will emit seach value to parent component.
+ * @param value value on which base table rows are filtered. 
+ */
+  emitOutput(value: any) {
+    let obj = { [this.obj.field]: value };
+    this.filterOutput.emit(obj);
+  }
+}

package/projects/mat-table-ext/src/lib/directives/resize-column.directive.ts

@@ -0,0 +1,103 @@
+import { Directive, OnInit, Renderer2, Input, ElementRef, OnChanges } from "@angular/core";
+
+@Directive({
+    selector: "[columnsResizable]"
+})
+export class ResizeColumnDirective implements OnInit, OnChanges {
+    columnsResizable$: boolean = false;
+    @Input() set columnsResizable(val: boolean) {
+        this.columnsResizable$ = val;
+    }
+    get columnsResizable() {
+        return this.columnsResizable$;
+    }
+    @Input() index!: number;
+    private startX!: number;
+    private startWidth!: number;
+    private column: HTMLElement;
+    private table!: HTMLElement;
+    private pressed!: boolean;
+
+    constructor(private renderer: Renderer2, private el: ElementRef) {
+        this.column = this.el.nativeElement;
+    }
+
+    ngOnInit() {
+        if (this.columnsResizable$) {
+            const row = this.renderer.parentNode(this.column);
+            const thead = this.renderer.parentNode(row);
+            this.table = this.renderer.parentNode(thead);
+
+            const resizer = this.renderer.createElement("span");
+            this.renderer.addClass(resizer, "resize-holder");
+            this.renderer.setAttribute(resizer, 'id', "resizeHolderSpan");
+            this.renderer.appendChild(this.column, resizer);
+            this.renderer.listen(resizer, "mousedown", this.onMouseDown);
+            this.renderer.listen(this.table, "mousemove", this.onMouseMove);
+            this.renderer.listen("document", "mouseup", this.onMouseUp);
+        }
+        else {
+            this.removeDragElementFromDom();
+        }
+    }
+    ngOnChanges() {
+        if (this.columnsResizable$) {
+            const row = this.renderer.parentNode(this.column);
+            const thead = this.renderer.parentNode(row);
+            const resizer = this.renderer.createElement("span");
+            this.table = this.renderer.parentNode(thead);
+            this.renderer.addClass(resizer, "resize-holder");
+            this.renderer.setAttribute(resizer, 'id', "resizeHolderSpan");
+            this.renderer.appendChild(this.column, resizer);
+            this.renderer.listen(resizer, "mousedown", this.onMouseDown);
+            this.renderer.listen(this.table, "mousemove", this.onMouseMove);
+            this.renderer.listen("document", "mouseup", this.onMouseUp);
+        }
+        else {
+            this.removeDragElementFromDom();
+        }
+    }
+    
+    onMouseDown = (event: MouseEvent) => {
+        this.pressed = true;
+        this.startX = event.pageX;
+        this.startWidth = this.column.offsetWidth;
+    };
+
+    onMouseMove = (event: MouseEvent) => {
+        const offset = 5;
+        if (this.pressed && event.buttons) {
+            this.renderer.addClass(this.table, "resizing");
+            // Calculate width of column
+            let width =
+                this.startWidth + (event.pageX - this.startX - offset);
+            const tableCells = Array.from(this.table.querySelectorAll(".mat-row")).map(
+                (row: any) => row.querySelectorAll(".mat-cell").item(this.index)
+            );
+            // Set table header width
+            this.renderer.setStyle(this.column, "width", `${width}px`);
+            // Set table cells width
+            for (const cell of tableCells) {
+                if (cell && cell !== null)
+                this.renderer.setStyle(cell, "width", `${width}px`);
+            }
+        }
+    };
+
+    onMouseUp = (event: MouseEvent) => {
+        if (this.pressed) {
+            this.pressed = false;
+            this.renderer.removeClass(this.table, "resizing");
+        }
+    };
+    /**
+     * @description This method is used remove resizing handlers from the table headers when column resizing is disabled.
+     */
+    removeDragElementFromDom() {
+        let ele = document.getElementById('resizeHolderSpan')
+        if (ele && ele !== null && ele !== undefined) {
+            this.renderer.removeChild(this.column, ele);
+        }
+    }
+}
+