Commit 7cddc52a authored by PECQUOT's avatar PECQUOT

[enh] better resizable table

parent 87abe92e
......@@ -35,7 +35,7 @@
<mat-table [dataSource]="dataSource" matSort matSortActive="id" matSortDirection="asc"
matSortDisableClear [trackBy]="trackByFn" resizableTable>
matSortDisableClear [trackBy]="trackByFn" [resizable]="resizable">
<ng-container matColumnDef="select">
<mat-header-cell class="hidden-xs hidden-sm" *matHeaderCellDef>
......
......@@ -2,7 +2,6 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Injector,
import {TableElement, ValidatorService} from "@e-is/ngx-material-table";
import {ActivatedRoute, Router} from "@angular/router";
import {ModalController, Platform} from "@ionic/angular";
import {Location} from "@angular/common";
import {ReferentialValidatorService} from "../services/validator/referential.validator";
import {ReferentialFilter} from "../services/referential.service";
import {AccountService, AppInMemoryTable, DefaultStatusList, EnvironmentService, InMemoryEntitiesService, Referential, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS} from "sumaris-lib";
......@@ -26,6 +25,8 @@ export class ReferentialTable extends AppInMemoryTable<Referential, ReferentialF
statusList = DefaultStatusList;
statusById: any;
@Input() resizable = true;
@Input() set entityName(entityName: string) {
this.setFilter({
...this.filter,
......@@ -45,7 +46,7 @@ export class ReferentialTable extends AppInMemoryTable<Referential, ReferentialF
protected route: ActivatedRoute,
protected router: Router,
protected platform: Platform,
protected location: Location,
// protected location: Location,
protected modalCtrl: ModalController,
protected accountService: AccountService,
// protected settings: LocalSettingsService,
......
......@@ -16,4 +16,9 @@
<app-referential-table #referentialTable entityName="AnalysisInstrument">
</app-referential-table>
<h1>Table with fixed columns</h1>
<app-referential-table #referentialTable2 entityName="AnalysisInstrument" [resizable]="false">
</app-referential-table>
</ion-content>
......@@ -10,6 +10,7 @@ import {Referential, ReferentialUtils} from "sumaris-lib";
export class ReferentialTableTestPage implements AfterViewInit {
@ViewChild('referentialTable', {static: true}) referentialTable: ReferentialTable;
@ViewChild('referentialTable2', {static: true}) referentialTable2: ReferentialTable;
constructor() {
......@@ -27,6 +28,7 @@ export class ReferentialTableTestPage implements AfterViewInit {
data.push(ReferentialUtils.fromObject({id: 2, label: 'test2', name: 'name2'}));
this.referentialTable.setValue(data);
this.referentialTable2.setValue(data);
}
......
import {Directive, OnInit, Renderer2, Input, ElementRef, AfterViewInit, Host, Self, Optional, AfterViewChecked, HostListener, OnDestroy} from "@angular/core";
import {Directive, Renderer2, Input, ElementRef, AfterViewInit, Host, Self, Optional, AfterViewChecked, HostListener, OnDestroy} from "@angular/core";
import {MatTable} from "@angular/material/table";
import {isNil, ObjectMap} from "sumaris-lib";
import {isNil, isNotNil, ObjectMap} from "sumaris-lib";
class ColumnDefinition {
width: number;
......@@ -8,16 +8,16 @@ class ColumnDefinition {
}
@Directive({
selector: "[resizableTable]"
selector: "[resizable]"
})
export class ResizableTableDirective implements AfterViewInit, AfterViewChecked, OnDestroy {
@Input() resizable: boolean;
private readonly table: HTMLElement;
enabled = true;
columnWidthInitialized = false;
columns: ObjectMap<ColumnDefinition> = {};
// resizableColumns: ObjectMap<HTMLElement> = {};
pressed = false;
// currentResizeIndex: number;
......@@ -33,17 +33,24 @@ export class ResizableTableDirective implements AfterViewInit, AfterViewChecked,
@Host() @Self() @Optional() private matTable: MatTable<any>
) {
this.table = this.tableElement.nativeElement;
if (isNil(matTable)) {
this.enabled = false;
console.error("matTable object not found, resize will be ignored");
}
// if (isNil(matTable)) {
// this.resizable = false;
// console.error("matTable object not found, resize will be ignored");
// }
}
enabled(): boolean {
return this.resizable && isNotNil(this.matTable);
}
ngAfterViewInit() {
if (!this.enabled)
if (!this.enabled())
return;
// Add resizable class
this.renderer.addClass(this.table, "resizable");
// Columns are instantiated
for (const columnDef of this.matTable._contentHeaderRowDefs.first.columns) {
if (!this.columns[columnDef])
......@@ -59,7 +66,7 @@ export class ResizableTableDirective implements AfterViewInit, AfterViewChecked,
}
public registerColumn(columnDef: string, column: HTMLElement) {
if (!this.enabled)
if (!this.enabled())
return;
if (this.columns[columnDef])
......@@ -145,7 +152,7 @@ export class ResizableTableDirective implements AfterViewInit, AfterViewChecked,
}
getActualColumnWidth() {
if (!this.enabled)
if (!this.enabled())
return;
Object.keys(this.columns).forEach(def => {
......
......@@ -710,56 +710,58 @@ ion-list {
max-height: unset !important;
}
width: 100%;
overflow: auto;
&.resizing {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: col-resize;
}
mat-cell,
mat-footer-cell,
mat-header-cell {
width: 200px;
flex: none;
//justify-content: center;
}
.mat-cell {
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
&.resizable {
width: 100%;
overflow: auto;
&.resizing {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: col-resize;
}
}
.mat-header-cell {
position: relative;
&:not(:last-child) {
.resize-holder {
cursor: col-resize;
width: 10px;
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 1;
background: blueviolet;
opacity: 0;
&:hover,
&:active {
opacity: 1;
}
mat-cell,
mat-footer-cell,
mat-header-cell {
width: 200px; // default width
flex: none;
}
.mat-cell {
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.mat-cell,
.mat-header-cell {
border-right: 1px solid rgba(0, 0, 0, 0.12);
&:not(:nth-child(1)) {
padding: 0 10px;
.mat-header-cell {
position: relative;
&:not(:last-child) {
.resize-holder {
cursor: col-resize;
width: 10px;
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 1;
background: blueviolet;
opacity: 0;
&:hover,
&:active {
opacity: 1;
}
}
}
}
//.mat-cell,
//.mat-header-cell {
// border-right: 1px solid rgba(0, 0, 0, 0.12);
// &:not(:nth-child(1)) {
// padding: 0 10px;
// }
//}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment