gov-gui
Version:
Gov UI Component Library Typscript Build
315 lines (314 loc) • 12.9 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovTable {
constructor() {
/** Number of rows per page */
this.rowsPerPage = 2;
this.currentPage = 1;
this.parsedHeadings = [];
this.parsedData = [];
this.filteredData = [];
this.internalRowsPerPage = this.rowsPerPage;
this.parsedRowActions = [];
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
componentWillLoad() {
this.parseProps(this.headings, this.data);
if (this.rowActions) {
this.parsedRowActions = JSON.parse(this.rowActions);
}
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed,
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed,
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
parseProps(headings, data) {
this.parsedHeadings = JSON.parse(headings);
this.parsedData = JSON.parse(data);
this.filteredData = this.parsedData;
}
handleSearch(event) {
const input = event.target;
const filter = input.value.toUpperCase();
this.filteredData = this.parsedData.filter(row => row.some(cell => cell.toUpperCase().includes(filter)));
this.currentPage = 1;
}
handlePagination(event) {
this.currentPage = event.detail;
}
get paginatedData() {
const start = (this.currentPage - 1) * this.internalRowsPerPage;
const end = start + this.internalRowsPerPage;
return this.filteredData.slice(start, end);
}
updateEntries(selected) {
console.log('Selected: ' + selected);
this.internalRowsPerPage = selected;
this.currentPage = 1;
}
downloadTable() {
const csv = [this.parsedHeadings.join(','), ...this.filteredData.map(row => row.join(','))].join('\n');
const link = document.createElement('a');
link.style.display = 'none';
link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv));
link.setAttribute('download', 'table.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
/**
* Called when a row action button is clicked.
* @param action The action identifier.
* @param row The data for the row.
* @param rowIndex The index of the row in the filtered data.
*/
handleRowAction(action, row, rowIndex) {
this.rowActionClicked.emit({ action, row, rowIndex });
}
render() {
const totalPages = Math.ceil(this.filteredData.length / this.internalRowsPerPage);
return (h("div", { key: 'b271d9ebea5c7491e42c5033643da21592d3bdd8', class: `container ${this.allClasses}` }, h("div", { key: '09449cf4d4e852b5711fbab952fc40900d5854c7', class: "top-bar" }, h("div", { key: 'e9e7015b93f0cf6eb0db542d85b9755543c7f211', class: "left-controls" }, h("gov-dropdown", { key: '0ae425391ea04f206aec4920d63e5dece5afa88b', options: (() => {
const dataLength = this.parsedData.length;
const options = [];
if (dataLength >= 2)
options.push(2);
if (dataLength >= 5 && dataLength <= 9)
options.push(5);
if (dataLength >= 10) {
options.push(5);
options.push(10);
}
// const half = Math.floor(dataLength / 2);
// if (half !== 2 && half !== 5 && half !== 10 && half < dataLength) {
// options.push(half);
// }
options.push(dataLength);
return options.sort((a, b) => a - b);
})(), selected: this.internalRowsPerPage, onValueChanged: (event) => this.updateEntries(event.detail) }), h("gov-input", { key: 'ddf800facfdcdc0a4178fa3e66dfba6eaf8cacfd', type: "text", id: "searchInput", onInput: this.handleSearch.bind(this), placeholder: "Search..." }), h("gov-button", { key: '2b8ad1a228fadb9302102ea9d30ac9426f403ecc', label: "Download Table", onClick: this.downloadTable.bind(this) }))), h("div", { key: '5eb281ff9f1400dbf9fbe7137a9c09aaa4c44b69', class: "table-responsive" }, h("table", { key: 'f9ef7015c16763add83459a75321980940a5bf90' }, h("thead", { key: 'b9aaea5654906861b242a7c7704fea4c2eb1261c' }, h("tr", { key: '30c3cc012d95deabf2c132abfa0169e9e02a7910' }, this.parsedHeadings.map(heading => (h("th", null, heading))), this.parsedRowActions.length > 0 && h("th", { key: '2aa6f47ceefb9b9cb6f97512f98f2cf73dd4b5db' }, "Actions"))), h("tbody", { key: '2f46008bdfa6b1199f8886360fdffef1c3e60d1e' }, this.paginatedData.map((row, rowIndex) => (h("tr", null, row.map(cell => (h("td", null, cell))), this.parsedRowActions.length > 0 && (h("td", null, this.parsedRowActions.map(action => (h("gov-button", { icon: action.icon, label: action.label, onClick: () => this.handleRowAction(action.action, row, rowIndex) }))))))))))), h("gov-pagination", { key: '1c007d77ab279cb08348caecfc44882d88f86dbf', totalPages: totalPages, currentPage: this.currentPage, onPageChanged: this.handlePagination.bind(this) })));
}
static get is() { return "gov-table"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-table.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-table.css"]
};
}
static get properties() {
return {
"headings": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "JSON stringified array of headings, e.g. '[\"Name\", \"Age\", \"Country\"]'"
},
"getter": false,
"setter": false,
"attribute": "headings",
"reflect": false
},
"data": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "JSON stringified 2D array for the table data"
},
"getter": false,
"setter": false,
"attribute": "data",
"reflect": false
},
"rowsPerPage": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of rows per page"
},
"getter": false,
"setter": false,
"attribute": "rows-per-page",
"reflect": false,
"defaultValue": "2"
},
"rowActions": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "JSON stringified array of row action objects.\r\nEach action object should have a `label` and an `action` identifier, e.g.:\r\n`[{\"label\": \"Edit\", \"action\": \"edit\"}, {\"label\": \"Delete\", \"action\": \"delete\"}]`"
},
"getter": false,
"setter": false,
"attribute": "row-actions",
"reflect": false
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"currentPage": {},
"parsedHeadings": {},
"parsedData": {},
"filteredData": {},
"internalRowsPerPage": {},
"parsedRowActions": {}
};
}
static get events() {
return [{
"method": "rowActionClicked",
"name": "rowActionClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when a row action button is clicked.\r\nThe event detail includes the action identifier, the row data and the row index."
},
"complexType": {
"original": "{ action: string; row: string[]; rowIndex: number }",
"resolved": "{ action: string; row: string[]; rowIndex: number; }",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}, {
"propName": "headings",
"methodName": "parseProps"
}, {
"propName": "data",
"methodName": "parseProps"
}];
}
}
//# sourceMappingURL=gov-table.js.map