diff --git a/src/UniversalDashboard.Materialize/Components/ud-collapsible.jsx b/src/UniversalDashboard.Materialize/Components/ud-collapsible.jsx index 0728a148..46152a34 100644 --- a/src/UniversalDashboard.Materialize/Components/ud-collapsible.jsx +++ b/src/UniversalDashboard.Materialize/Components/ud-collapsible.jsx @@ -73,7 +73,7 @@ class UDCollapsibleItem extends React.Component {
- {this.props.icon && } + {this.props.icon && } {this.props.title}
{UniversalDashboard.renderComponent(this.state.content)}
diff --git a/src/UniversalDashboard.Materialize/Components/ud-grid.jsx b/src/UniversalDashboard.Materialize/Components/ud-grid.jsx index b11b40c6..9947629b 100644 --- a/src/UniversalDashboard.Materialize/Components/ud-grid.jsx +++ b/src/UniversalDashboard.Materialize/Components/ud-grid.jsx @@ -5,6 +5,8 @@ import ErrorCard from './error-card.jsx'; import UdLink from './ud-link.jsx'; import CustomCell from './custom-cell.jsx'; import {DebounceInput} from 'react-debounce-input'; +import { Dropdown, Button, Row, Col } from 'react-materialize'; +import UdIcon from './ud-icon.jsx'; function strMapToObj(strMap) { if (strMap == undefined) return null; @@ -52,7 +54,8 @@ export default class UdGrid extends React.Component { filterText: "", properties: props.properties, headers: props.headers, - loading: true + loading: true, + firstLoad: true }; } @@ -104,7 +107,8 @@ export default class UdGrid extends React.Component { UniversalDashboard.get(`/api/internal/component/datatable/${this.props.id}?start=${skip}&length=${pageSize}&sortColumn=${sortColumn}&sortAscending=${sortAscending}&filterText=${filterText}`, function(json){ this.setState({ - loading: false + loading: false, + firstLoad: false }) if (json.error) { @@ -182,6 +186,46 @@ export default class UdGrid extends React.Component { this.pubSubToken = UniversalDashboard.subscribe(this.props.id, this.onIncomingEvent.bind(this)); } + onPageChanged(x) { + this.setState({ + currentPage: x + }) + } + + onExportData() { + + var csv = ''; + this.state.data.forEach(x => { + for(var propertyName in x) { + var property = x[propertyName]; + if (property == null) continue; + + csv += property + ","; + } + csv = csv.substr(0, csv.length - 1) + "\r\n"; + }) + + var element = document.createElement('a'); + element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv)); + element.setAttribute('download', 'export.csv'); + + element.style.display = 'none'; + document.body.appendChild(element); + + element.click(); + + document.body.removeChild(element); + } + + onLocalSort(sortProperties) { + if (sortProperties.id !== this.state.sortColumn || sortProperties.sortAscending !== this.state.sortAscending) { + this.setState({ + sortColumn: sortProperties.id, + sortAscending: sortProperties.sortAscending + }) + } + } + render() { if (this.state.hasError) { return [, ] @@ -225,7 +269,8 @@ export default class UdGrid extends React.Component { var gridPlugins = []; var serverSort, serverFilter, serverNext, serverPrev, serverGetPage, serverFilterControl; var components = { - SettingsToggle: () => + SettingsToggle: () => , + Pagination: () => } var serverFilterControl = @@ -235,10 +280,11 @@ export default class UdGrid extends React.Component { if (this.props.noFilter) { components = { - Filter: () => , - SettingsToggle: () => + ...components, + Filter: () => } } + serverSort = this.onLocalSort.bind(this); } else { serverSort = this.onSort.bind(this); serverFilter = this.onFilter.bind(this); @@ -252,8 +298,8 @@ export default class UdGrid extends React.Component { } components = { - Filter: () => , - SettingsToggle: () => + ...components, + Filter: () => } } @@ -261,11 +307,12 @@ export default class UdGrid extends React.Component {
{this.props.title} + {serverFilterControl} - { this.state.loading ? + { this.state.firstLoad ?
: rowDefinition ? - {rowDefinition} - :
No results found
} + , + ] + :
No results found
}
+ {actions}
); } +} + +class GridToolbar extends React.Component { + render() { + + var cursor = { + cursor: "pointer" + } + + var pagination = null; + if (!this.props.noPaging && this.props.totalPages > 1) { + var pages = []; + var startPage = this.props.totalPages > 10 ? this.props.activePage : 1; + + if (this.props.totalPages < (this.props.activePage + 10)) { + startPage = this.props.totalPages - 10; + } + + for(var i = startPage; i < this.props.totalPages; i++) { + if (i > (startPage + 10)) { + break; + } + + pages.push(); + } + + if (this.props.totalPages >= 10 && this.props.activePage < (this.props.totalPages - 10)) { + pages.push(); + pages.push(); + } + + pagination = + } + + return ( + +