src/lib/components/table/table.component.ts
Angular Component for the Table Controls.
ControlContainerComponent
changeDetection | ChangeDetectionStrategy.OnPush |
selector | wm-table |
styleUrls | ./table.component.scss |
templateUrl | ./table.component.html |
Properties |
|
Methods |
Inputs |
Accessors |
constructor(wmService: WebMapService, refCh: ChangeDetectorRef, renderer2: Renderer2, element: ElementRef, webComponents: WebComponentsService, bringTopServ: BringTopService)
|
|||||||||||||||||||||
Creates an instance of TableComponent.
Parameters :
|
width | |
Type : number
|
|
Gets/sets the width. |
getControlsIdsContainer |
getControlsIdsContainer(rowIndex: number, columnIndex: number)
|
Returns the controls object for a specific dynamic cell.
Returns :
any
{*} |
getControlsTemplate |
getControlsTemplate(rowIndex: number, columnIndex: number)
|
Return the controls template for a specific row and cell.
Returns :
any
{*} |
getControlsTemplateModel |
getControlsTemplateModel(rowIndex: number, columnIndex: number)
|
Returns the controls template models for a specific row and cell.
Returns :
any
{*} |
getDynamicTableCellId |
getDynamicTableCellId(rowIndex: number, columnIndex: number)
|
Returns the Id for the specified dynamic cell.
Returns :
string
{string} |
getDynamicTableCells | ||||||
getDynamicTableCells(rowIndex: number)
|
||||||
Returns the dynamic table cells IDs.
Parameters :
Returns :
string[]
{string[]} |
getDynamicTableRows |
getDynamicTableRows()
|
Returns the dynamic table rows IDs.
Returns :
string[]
{string[]} |
getTableCellAttributes |
getTableCellAttributes(rowIndex: number, columnIndex: number)
|
Returns the model attributes object for the specified cell.
Returns :
any
{*} |
getTableCells | ||||||
getTableCells(rowIndex: number)
|
||||||
Returns the tableCells for a specific row.
Parameters :
Returns :
any[]
{any[]} |
getTableCellText |
getTableCellText(rowIndex: number, columnIndex: number)
|
Returns the model text for the specified cell.
Returns :
string
{string} |
hasDynamicControls |
hasDynamicControls(rowIndex: number, columnIndex: number)
|
Verifies if the specified cell has dynamic controls.
Returns :
boolean
{boolean} |
hasTableRows |
hasTableRows()
|
Verifies if the table has rows.
Returns :
boolean
{boolean} |
isDynamicCellAvailable |
isDynamicCellAvailable(rowIndex: number, columnIndex: number)
|
Verifies if the specified cell exists.
Returns :
boolean
{boolean} |
loadDynamicCells |
loadDynamicCells()
|
Load the dynamic cells.
Returns :
void
|
ngOnInit |
ngOnInit()
|
OnInit lifecycle hook.
Returns :
void
|
Private dynamicCellsModels |
Type : any[]
|
Default value : []
|
Property to save the dynamic cells models. |
tableRowChildren |
Type : QueryList<TableRowComponent>
|
Default value : new QueryList<TableRowComponent>()
|
Decorators :
@ContentChildren(TableRowComponent)
|
List of TableRow components. |
Private widthInternal |
Type : number
|
Default value : Number.NaN
|
Property to save the the width value. |
width | ||||||
getwidth()
|
||||||
setwidth(value: number)
|
||||||
Gets/sets the width.
Parameters :
Returns :
void
|
tableRows |
gettableRows()
|
Gets the tableRows array.
Returns :
any[]
|
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChildren,
ElementRef,
Input,
OnInit,
Optional,
QueryList,
Renderer2
} from '@angular/core';
import { dataTransfer, BringTopService } from '@mobilize/base-components';
import { ErrorCodes, ExceptionHandlerClass } from '@mobilize/webmap-core';
import {
ControlContainerComponent,
WebComponentsService
} from '@mobilize/winforms-components';
import { TableRowComponent } from '../table-row/table-row.component';
import { WebMapService } from '@mobilize/angularclient';
/**
* Angular Component for the Table Controls.
*
* @export
* @class TableComponent
* @extends {ControlComponent}
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'wm-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
inputs: ['model']
})
@dataTransfer(['tbl'])
@ExceptionHandlerClass(ErrorCodes.Winforms)
export class TableComponent
extends ControlContainerComponent
implements OnInit
{
/**
* Property to save the the width value.
*
* @private
* @type {number}
* @memberof TableComponent
*/
private widthInternal: number = Number.NaN;
/**
* Property to save the dynamic cells models.
*
* @private
* @type {any[]}
* @memberof TableComponent
*/
private dynamicCellsModels: any[] = [];
/**
* List of TableRow components.
*
* @type {QueryList<TableRowComponent>}
* @memberof TableComponent
*/
@ContentChildren(TableRowComponent)
tableRowChildren: QueryList<TableRowComponent> =
new QueryList<TableRowComponent>();
/**
* Creates an instance of TableComponent.
*
* @param {WebMapService} wmService
* @param {ChangeDetectorRef} refCh
* @param {Renderer2} renderer2
* @param {ElementRef} element
* @param {WebComponentsService} webComponents
* @param {BringTopService} bringTopServ
* @memberof TableComponent
*/
constructor(
private wmService: WebMapService,
private refCh: ChangeDetectorRef,
private renderer2: Renderer2,
private element: ElementRef,
webComponents: WebComponentsService,
@Optional() private bringTopServ: BringTopService
) {
super(wmService, refCh, renderer2, element, webComponents, bringTopServ);
}
/**
* OnInit lifecycle hook.
*
* @memberof TableComponent
*/
ngOnInit() {
this.loadDynamicCells();
}
/**
* Gets/sets the width.
*
* @memberof TableComponent
*/
@Input()
set width(value: number) {
this.widthInternal = value;
}
get width(): number {
return this.model.Width ?? this.widthInternal;
}
/**
* Gets the tableRows array.
*
* @readonly
* @type {any[]}
* @memberof TableComponent
*/
get tableRows(): any[] {
return this.tableRowChildren.toArray();
}
/**
* Returns the tableCells for a specific row.
*
* @param {number} rowIndex
* @return {*} {any[]}
* @memberof TableComponent
*/
getTableCells(rowIndex: number): any[] {
return this.tableRows.length > rowIndex
? this.tableRows[rowIndex].tableCells
: [];
}
/**
* Return the controls template for a specific row and cell.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {*}
* @memberof TableComponent
*/
getControlsTemplate(rowIndex: number, columnIndex: number): any {
return this.getTableCells(rowIndex)[columnIndex]?.controlsTemplate;
}
/**
* Returns the controls template models for a specific row and cell.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {*}
* @memberof TableComponent
*/
getControlsTemplateModel(rowIndex: number, columnIndex: number): any {
return this.getTableCells(rowIndex)[columnIndex]?.getModels();
}
/**
* Verifies if the table has rows.
*
* @return {*} {boolean}
* @memberof TableComponent
*/
hasTableRows(): boolean {
return this.tableRows.length > 0;
}
/**
* Returns the dynamic table rows IDs.
*
* @return {*} {string[]}
* @memberof TableComponent
*/
getDynamicTableRows(): string[] {
return this.model?.Controls ? Object.keys(this.model.Controls) : [];
}
/**
* Returns the dynamic table cells IDs.
*
* @param {number} rowIndex
* @return {*} {string[]}
* @memberof TableComponent
*/
getDynamicTableCells(rowIndex: number): string[] {
const dynamicTableRows = this.getDynamicTableRows();
let tableCells: string[] = [];
/* c8 ignore else */
if (rowIndex < dynamicTableRows.length) {
const rowId: string = dynamicTableRows[rowIndex];
/* c8 ignore else */
if (rowId) {
const rowModel = this.wmService.core.getModel(rowId);
/* c8 ignore else */
if (rowModel?.Controls) {
tableCells = Object.keys(rowModel.Controls);
}
}
}
return tableCells;
}
/**
* Load the dynamic cells.
*
* @memberof TableComponent
*/
loadDynamicCells(): void {
for (let r = 0; r < this.getDynamicTableRows().length; r++) {
this.dynamicCellsModels.push([]);
for (let c = 0; c < this.getDynamicTableCells(r).length; c++) {
const cellId = this.getDynamicTableCellId(r, c);
const cellModel = this.wmService.core.getModel(cellId);
this.dynamicCellsModels[r].push(cellModel);
}
}
}
/**
* Returns the controls object for a specific dynamic cell.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {*}
* @memberof TableComponent
*/
getControlsIdsContainer(rowIndex: number, columnIndex: number): any {
let controlsIds = {};
/* c8 ignore else */
if (this.isDynamicCellAvailable(rowIndex, columnIndex)) {
controlsIds = this.dynamicCellsModels[rowIndex][columnIndex].Controls;
}
return controlsIds;
}
/**
* Returns the Id for the specified dynamic cell.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {string}
* @memberof TableComponent
*/
getDynamicTableCellId(rowIndex: number, columnIndex: number): string {
let cellId = '';
const dynamicCellsIds = this.getDynamicTableCells(rowIndex);
/* c8 ignore else */
if (dynamicCellsIds.length > columnIndex) {
cellId = dynamicCellsIds[columnIndex];
}
return cellId;
}
/**
* Verifies if the specified cell has dynamic controls.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {boolean}
* @memberof TableComponent
*/
hasDynamicControls(rowIndex: number, columnIndex: number): boolean {
/* c8 ignore else */
if (this.isDynamicCellAvailable(rowIndex, columnIndex)) {
const controlsIds =
this.dynamicCellsModels[rowIndex][columnIndex].Controls;
/* c8 ignore else */
if (controlsIds) {
return Object.keys(controlsIds).length > 0;
}
}
return false;
}
/**
* Verifies if the specified cell exists.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {boolean}
* @memberof TableComponent
*/
isDynamicCellAvailable(rowIndex: number, columnIndex: number): boolean {
return (
this.dynamicCellsModels &&
this.dynamicCellsModels.length > rowIndex &&
this.dynamicCellsModels[rowIndex].length > columnIndex
);
}
/**
* Returns the model attributes object for the specified cell.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {*}
* @memberof TableComponent
*/
getTableCellAttributes(rowIndex: number, columnIndex: number): any {
const cellAttrsObj: any = {};
/* c8 ignore else */
if (this.isDynamicCellAvailable(rowIndex, columnIndex)) {
cellAttrsObj['Attributes'] =
this.dynamicCellsModels[rowIndex][columnIndex].Attributes;
}
return cellAttrsObj;
}
/**
* Returns the model text for the specified cell.
*
* @param {number} rowIndex
* @param {number} columnIndex
* @return {*} {string}
* @memberof TableComponent
*/
getTableCellText(rowIndex: number, columnIndex: number): string {
let cellText = '';
/* c8 ignore else */
if (this.isDynamicCellAvailable(rowIndex, columnIndex)) {
cellText = this.dynamicCellsModels[rowIndex][columnIndex]?.Text;
}
return cellText;
}
}
<table *ngIf="model && visible" [ngClass]="class">
<ng-container *ngIf="hasTableRows()">
<tr *ngFor="let row of tableRows let i=index">
<td *ngFor="let col of getTableCells(i) let j=index">
<ng-container
*ngTemplateOutlet="getControlsTemplate(i, j); context:{$implicit: getControlsTemplateModel(i, j)}">
</ng-container>
</td>
</tr>
</ng-container>
<ng-container *ngIf="!hasTableRows()">
<tr *ngFor="let row of getDynamicTableRows() let i=index">
<td *ngFor="let col of getDynamicTableCells(i) let j=index" wmHtmlControl
[model]="getTableCellAttributes(i, j)">
<ng-container *ngIf="!hasDynamicControls(i, j)">
{{getTableCellText(i, j)}}
</ng-container>
<wm-custom-control-container *ngIf="hasDynamicControls(i, j)"
(RemoveControl)="removeControlHandler($event)" [controls]="getControlsIdsContainer(i, j)">
</wm-custom-control-container>
</td>
</tr>
</ng-container>
</table>
./table.component.scss
::ng-deep wm-custom-control-container > * {
display: inline-block;
}