Skip to content

Commit

Permalink
refactor(grid): add column menu button options and add no result showing
Browse files Browse the repository at this point in the history
  • Loading branch information
@nzbin
nzbin committed Apr 16, 2020
1 parent 3b8be04 commit 15c26cb
Show file tree
Hide file tree
Showing 11 changed files with 251 additions and 151 deletions.
5 changes: 5 additions & 0 deletions projects/demos/src/app/data-grid/data-grid-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,4 +104,9 @@ <h3>Data Formatting</h3>
<p>The <code>name</code> field use a formatter.</p>
<mtx-grid [data]="list"
[columns]="columnsWithFormatting">
</mtx-grid>

<h3>No Result</h3>
<mtx-grid [data]="[]"
[columns]="columnsWithFormatting">
</mtx-grid>
80 changes: 80 additions & 0 deletions projects/extensions/data-grid/column-menu.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<ng-container [ngSwitch]="buttonType">
<ng-container *ngSwitchCase="'raised'">
<button [ngClass]="buttonClass" mat-raised-button [color]="buttonColor"
[matMenuTriggerFor]="menu">
<mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
</button>
</ng-container>
<ng-container *ngSwitchCase="'stroked'">
<button [ngClass]="buttonClass" mat-stroked-button [color]="buttonColor"
[matMenuTriggerFor]="menu">
<mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
</button>
</ng-container>
<ng-container *ngSwitchCase="'flat'">
<button [ngClass]="buttonClass" mat-flat-button [color]="buttonColor"
[matMenuTriggerFor]="menu">
<mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
</button>
</ng-container>
<ng-container *ngSwitchCase="'icon'">
<button [ngClass]="buttonClass" mat-icon-button [color]="buttonColor"
[matMenuTriggerFor]="menu">
<mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon>
</button>
</ng-container>
<ng-container *ngSwitchCase="'fab'">
<button [ngClass]="buttonClass" mat-fab [color]="buttonColor" [matMenuTriggerFor]="menu">
<mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
</button>
</ng-container>
<ng-container *ngSwitchCase="'mini-fab'">
<button [ngClass]="buttonClass" mat-mini-fab [color]="buttonColor"
[matMenuTriggerFor]="menu">
<mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
</button>
</ng-container>
<ng-container *ngSwitchDefault>
<button [ngClass]="buttonClass" mat-button [color]="buttonColor" [matMenuTriggerFor]="menu">
<mat-icon *ngIf="buttonIcon">{{buttonIcon}}</mat-icon> {{buttonText}}
</button>
</ng-container>
</ng-container>

<mat-menu #menu="matMenu" class="mtx-grid-column-menu">
<div class="mtx-grid-column-menu-inner"
(click)="$event.stopPropagation()"
(keydown)="$event.stopPropagation()">

<div class="mtx-grid-column-menu-list"
cdkDropList (cdkDropListDropped)="handleDrop($event)"
*ngIf="sortable">
<div class="mtx-grid-column-menu-item" *ngFor="let col of columns"
cdkDrag [cdkDragDisabled]="selectedType === 'show'? !col.show : col.hide">
<mat-icon cdkDragHandle>drag_handle</mat-icon>
<ng-template [ngTemplateOutlet]="checkboxList"
[ngTemplateOutletContext]="{ $implicit: col }">
</ng-template>
</div>
</div>

<div class="mtx-grid-column-menu-list" *ngIf="!sortable">
<div class="mtx-grid-column-menu-item" *ngFor="let col of columns">
<ng-template [ngTemplateOutlet]="checkboxList"
[ngTemplateOutletContext]="{ $implicit: col }">
</ng-template>
</div>
</div>
</div>
</mat-menu>

<ng-template #checkboxList let-col>
<mat-checkbox class="mtx-grid-column-menu-item-label"
*ngIf="selectable"
[(ngModel)]="col[selectedType]"
[disabled]="col.disabled"
(change)="handleSelect($event)">
{{col.label}}
</mat-checkbox>
<span class="mtx-grid-column-menu-item-label" *ngIf="!selectable">{{col.label}}</span>
</ng-template>
12 changes: 6 additions & 6 deletions ...data-grid/column-selection.component.scss → ...ions/data-grid/column-menu.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
@import '~@angular/material/theming';

.mtx-grid-column-selection {
.mtx-grid-column-menu {
.mat-menu-content {
padding: 0;
}
}

.mtx-grid-column-selection-inner {
.mtx-grid-column-menu-inner {
padding: 16px;
}

.mtx-grid-column-selection-list {
.mtx-grid-column-menu-list {
display: block;
max-width: 100%;

&.cdk-drop-list-dragging {
.mtx-grid-column-selection-item:not(.cdk-drag-placeholder) {
.mtx-grid-column-menu-item:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, .2, 1);
}
}

&.cdk-drop-list {
.mtx-grid-column-selection-label {
.mtx-grid-column-menu-item-label {
padding: 0 4px;
}
}
}

.mtx-grid-column-selection-item {
.mtx-grid-column-menu-item {
display: flex;
flex-direction: row;
align-items: center;
Expand Down
29 changes: 22 additions & 7 deletions ...s/data-grid/column-selection.component.ts → ...nsions/data-grid/column-menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,35 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { MtxGridColumnSelectionItem } from './grid.interface';

@Component({
selector: 'mtx-grid-column-selection',
exportAs: 'mtxGridColumnSelection',
templateUrl: './column-selection.component.html',
styleUrls: ['./column-selection.component.scss'],
selector: 'mtx-grid-column-menu',
exportAs: 'mtxGridColumnMenu',
templateUrl: './column-menu.component.html',
styleUrls: ['./column-menu.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MtxGridColumnSelectionComponent implements OnInit {
export class MtxGridColumnMenuComponent implements OnInit {
@Input() columns = [];
@Input() selectable = true;
@Input() selectedType: 'show' | 'hide' = 'show';
@Input() sortable = true;
@Input() dndSortable = true;

@Input() get buttonText() {
const defaultText = `Column ${this.selectedType === 'show' ? 'Shown' : 'Hidden'}`;
const text = this._buttonText ? this._buttonText : defaultText;
return text;
}
set buttonText(value: string) {
this._buttonText = value;
}
private _buttonText = '';

@Input() buttonType: 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab' | '' = 'stroked';
@Input() buttonColor: 'primary' | 'accent' | 'warn' | '' = '';
@Input() buttonClass = '';
@Input() buttonIcon = '';

@Output() selectionChange = new EventEmitter<string[]>();
@Output() sortChange = new EventEmitter<string[]>();

Expand All @@ -37,9 +52,9 @@ export class MtxGridColumnSelectionComponent implements OnInit {
return fields;
}

constructor() { }
constructor() {}

ngOnInit() { }
ngOnInit() {}

handleDrop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
Expand Down
40 changes: 0 additions & 40 deletions projects/extensions/data-grid/column-selection.component.html
View file

This file was deleted.

113 changes: 67 additions & 46 deletions projects/extensions/data-grid/grid.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,60 @@

<!-- Toolbar -->
<div class="mtx-grid-toolbar" *ngIf="showToolbar">
<mtx-grid-column-selection [columns]="columnSelectionData"
[selectable]="columnHideable"
[selectedType]="columnHidingChecked"
[sortable]="columnMovable"
(selectionChange)="handleColumnHidingChange($event)"
(sortChange)="handleColumnMovingChange($event)">
</mtx-grid-column-selection>
<mtx-grid-column-menu [columns]="columnMenuData"
[buttonText]="columnMenuButtonText"
[buttonType]="columnMenuButtonType"
[buttonColor]="columnMenuButtonColor"
[buttonClass]="columnMenuButtonClass"
[buttonIcon]="columnMenuButtonIcon"
[selectable]="columnHideable"
[selectedType]="columnHidingChecked"
[sortable]="columnMovable"
(selectionChange)="handleColumnHidingChange($event)"
(sortChange)="handleColumnMovingChange($event)">
</mtx-grid-column-menu>
</div>

<!-- Main Table -->
<div class="mtx-grid-content">
<mat-table [ngClass]="{'mat-table-hover': rowHover, 'mat-table-striped': rowStriped}"
[dataSource]="dataSource" [multiTemplateDataRows]="expandable"
matSort (matSortChange)="handleSortChange($event)">
<table mat-table [ngClass]="{'mat-table-hover': rowHover,
'mat-table-striped': rowStriped,
'mat-table-expandable': expandable}"
[dataSource]="dataSource" [multiTemplateDataRows]="expandable"
matSort (matSortChange)="handleSortChange($event)">

<ng-container *ngIf="rowSelectable && !hideRowSelectionCheckbox"
matColumnDef="MatCheckboxColumnDef">
<mat-header-cell *matHeaderCellDef class="mat-checkbox-column-cell">
matColumnDef="MtxGridCheckboxColumnDef">
<th mat-header-cell *matHeaderCellDef class="mtx-grid-checkbox-cell">
<mat-checkbox (change)="$event ? handleMasterToggle() : null"
[checked]="rowSelection.hasValue() && isAllSelected()"
[indeterminate]="rowSelection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row;" class="mat-checkbox-column-cell">
</th>
<td mat-cell *matCellDef="let row;" class="mtx-grid-checkbox-cell">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? handleSingleToggle(row) : null"
[checked]="rowSelection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</td>
</ng-container>

<ng-container *ngFor="let col of columns;">
<ng-container [matColumnDef]="col.field"
[sticky]="col.pinned==='left'"
[stickyEnd]="col.pinned==='right'">

<mat-header-cell *matHeaderCellDef
[ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
[ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
mat-sort-header [disabled]="!col.sortable">
<th mat-header-cell *matHeaderCellDef
[ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
[ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
mat-sort-header [disabled]="!col.sortable">

<span class="mat-expanison-placeholder" *ngIf="col.showExpand"></span>{{col.header}}
</mat-header-cell>
<mat-cell *matCellDef="let row; let index = index; let dataIndex = dataIndex;"
[ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
[ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
mtx-selectable-cell (cellSelectionChange)="handleCellSelect($event, row, col)">
<span class="mtx-grid-expanison-placeholder" *ngIf="col.showExpand"></span>{{col.header}}
</th>
<td mat-cell *matCellDef="let row; let index = index; let dataIndex = dataIndex;"
[ngClass]="{'mat-table-sticky-left': col.pinned === 'left', 'mat-table-sticky-right': col.pinned === 'right'}"
[ngStyle]="{'width': col.width, 'min-width': col.width, 'left': col.left, 'right': col.right}"
mtx-selectable-cell (cellSelectionChange)="handleCellSelect($event, row, col)">

<ng-container *ngIf="col.cellTemplate else defaultCellTpl">
<ng-template [ngTemplateOutlet]="col.cellTemplate"
Expand All @@ -66,39 +73,44 @@
<mtx-grid-cell [rowData]="row" [colDef]="col"> </mtx-grid-cell>
</ng-template>

</mat-cell>
</td>

</ng-container>
</ng-container>

<mat-header-row mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">
</mat-header-row>
<mat-row *matRowDef="let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;"
[ngClass]="{'selected': rowSelection.isSelected(row), 'mat-row-odd': isOddRow(index, dataIndex)}"
(click)="handleRowSelect($event, row)">
</mat-row>
<tr mat-header-row mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row
*matRowDef="let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns;"
[ngClass]="{'selected': rowSelection.isSelected(row), 'mat-row-odd': isOddRow(index, dataIndex)}"
(click)="handleRowSelect($event, row)">
</tr>

<ng-container *ngIf="expandable">
<!-- Expanded Content Column - The expandable row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="MatExpansionColumnDef">
<mat-cell *matCellDef="let row; let dataIndex = dataIndex"
[attr.colspan]="displayedColumns.length">
<ng-template [ngTemplateOutlet]="expansionTemplate"
[ngTemplateOutletContext]="{ $implicit: row, rowData: row, index: dataIndex }">
</ng-template>
</mat-cell>
<ng-container matColumnDef="MtxGridExpansionColumnDef">
<td mat-cell *matCellDef="let row; let dataIndex = dataIndex"
[attr.colspan]="displayedColumns.length">
<div class="mtx-grid-expanison-detail"
[@expansion]="expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'">
<ng-template [ngTemplateOutlet]="expansionTemplate"
[ngTemplateOutletContext]="{ $implicit: row, rowData: row, index: dataIndex }">
</ng-template>
</div>
</td>
</ng-container>

<mat-row class="mat-expanison-row"
*matRowDef="let row; columns: ['MatExpansionColumnDef']; let dataIndex = dataIndex"
[@expansion]="expansionRowStates[dataIndex].expanded ? 'expanded' : 'collapsed'">
</mat-row>
<tr mat-row [ngClass]="{'mtx-grid-expanison': true,
'expanded': expansionRowStates[dataIndex].expanded,
'collapsed': !expansionRowStates[dataIndex].expanded}"
*matRowDef="let row; columns: ['MtxGridExpansionColumnDef']; let dataIndex = dataIndex">
</tr>
</ng-container>

</mat-table>
</table>
</div>

<!-- Paginator -->
<mat-paginator [class.mat-paginator-hidden]="!showPaginator"
<mat-paginator [class.mat-paginator-hidden]="!showPaginator || hasNoResult"
[showFirstLastButtons]="showFirstLastButtons"
[length]="length"
[pageIndex]="pageIndex"
Expand All @@ -107,4 +119,13 @@
[hidePageSize]="hidePageSize"
(page)="page.emit($event)"
[disabled]="pageDisabled">
</mat-paginator>
</mat-paginator>

<!-- No Result -->
<div class="mtx-grid-no-result" *ngIf="hasNoResult">
<ng-container *ngIf="noResultTemplate else defaultNoResultTpl">
<ng-template [ngTemplateOutlet]="noResultTemplate"
[ngTemplateOutletContext]="{ $implicit: 'aaa' }"></ng-template>
</ng-container>
<ng-template #defaultNoResultTpl>{{noResultText}}</ng-template>
</div>
Loading

0 comments on commit 15c26cb

Please sign in to comment.