Skip to content

Commit

Permalink
Merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamdriscoll
adamdriscoll committed Jun 24, 2019
2 parents 0220d2e + 3de8ae9 commit 0f52aff
Show file tree
Hide file tree
Showing 63 changed files with 661 additions and 1,484 deletions.
2 changes: 1 addition & 1 deletion src/UniversalDashboard.Materialize/Components/ud-collapsible.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ class UDCollapsibleItem extends React.Component {
<div
className={cx('collapsible-header', { active: this.props.active })}
>
{this.props.icon && <UDIcon icon={this.props.icon}/>}
{this.props.icon && <UDIcon icon={this.props.icon} style={{margin: '5px'}}/>}
{this.props.title}
</div>
<div className="collapsible-body">{UniversalDashboard.renderComponent(this.state.content)}</div>
Expand Down
144 changes: 134 additions & 10 deletions src/UniversalDashboard.Materialize/Components/ud-grid.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -52,7 +54,8 @@ export default class UdGrid extends React.Component {
filterText: "",
properties: props.properties,
headers: props.headers,
loading: true
loading: true,
firstLoad: true
};
}

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 [<ErrorCard message={this.state.errorMessage} title={this.props.title} id={this.props.id} key={this.props.id} />, <ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.loadData.bind(this)}/>]
Expand Down Expand Up @@ -225,7 +269,8 @@ export default class UdGrid extends React.Component {
var gridPlugins = [];
var serverSort, serverFilter, serverNext, serverPrev, serverGetPage, serverFilterControl;
var components = {
SettingsToggle: () => <span />
SettingsToggle: () => <span />,
Pagination: () => <span />
}
var serverFilterControl = <DebounceInput name="filter" className="griddle-filter" type="text" placeholder={this.props.filterText} value={this.state.filterText} onChange={this.onFilter.bind(this)} debounceTimeout={300} />

Expand All @@ -235,10 +280,11 @@ export default class UdGrid extends React.Component {

if (this.props.noFilter) {
components = {
Filter: () => <span/>,
SettingsToggle: () => <span />
...components,
Filter: () => <span/>
}
}
serverSort = this.onLocalSort.bind(this);
} else {
serverSort = this.onSort.bind(this);
serverFilter = this.onFilter.bind(this);
Expand All @@ -252,20 +298,21 @@ export default class UdGrid extends React.Component {
}

components = {
Filter: () => <span/>,
SettingsToggle: () => <span />
...components,
Filter: () => <span/>
}
}

return (
<div className="card ud-grid" id={this.props.id} style={{background: this.props.backgroundColor, color: this.props.fontColor}} key={this.props.id}>
<div className="card-content">
<span className="card-title">{this.props.title}</span>

{serverFilterControl}
{ this.state.loading ?
{ this.state.firstLoad ?
<div className="progress"><div className="indeterminate"></div></div> :
rowDefinition ?
<Griddle
[<Griddle
data={this.state.data}
plugins={gridPlugins}
sortProperties={[{
Expand All @@ -288,11 +335,88 @@ export default class UdGrid extends React.Component {
styleConfig={styleConfig}
>
{rowDefinition}
</Griddle> : <div>No results found</div>}
</Griddle>,
<GridToolbar
activePage={this.state.currentPage}
totalPages={Math.ceil(this.state.recordCount / this.state.pageSize)}
onPageChanged={this.onPageChanged.bind(this)}
onExportData={this.onExportData.bind(this)}
noExport={this.props.noExport}
reload={this.reload.bind(this)}
loading={this.state.loading}
/>]
: <div>No results found</div>}
</div>

{actions}
<ReactInterval timeout={this.props.refreshInterval * 1000} enabled={this.props.autoRefresh} callback={this.reload.bind(this)}/>
</div>
);
}
}

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(<Page activePage={this.props.activePage} onPageChanged={this.props.onPageChanged} page={i} pointer/>);
}

if (this.props.totalPages >= 10 && this.props.activePage < (this.props.totalPages - 10)) {
pages.push(<Page activePage={this.props.activePage} page='...' />);
pages.push(<Page activePage={this.props.activePage} onPageChanged={this.props.onPageChanged} page={this.props.totalPages} pointer/>);
}

pagination = <ul className="pagination" style={{display: 'inline-block'}} >
<li className={this.props.activePage === 1 ? "disabled" : ""} style={this.props.activePage > 1 ? cursor : {}}><a onClick={() => this.props.activePage > 1 && this.props.onPageChanged(this.props.activePage - 1)}><UdIcon icon="ChevronLeft" /></a></li>
{pages}
<li className={this.props.activePage === this.props.totalPages ? "disabled" : ""} style={this.props.activePage < this.props.totalPages ? cursor : {}}><a onClick={() => this.props.activePage < this.props.totalPages && this.props.onPageChanged(this.props.activePage + 1)}><UdIcon icon="ChevronRight" /></a></li>
</ul>
}

return (
<Row>
<Button
icon={<UdIcon icon="Sync" spin={this.props.loading} />}
style={{display: 'inline-block', float: 'right', marginTop: '15px', marginLeft: '10px'}}
onClick={this.props.reload}
flat
tooltip="Refresh"
tooltipOptions={{position: 'bottom'}}
/>
<Button
icon={<UdIcon icon="Download" />}
style={{display: this.props.noExport ? 'none' : 'inline-block', float: 'right', marginTop: '15px'}}
onClick={this.props.onExportData}
flat
tooltip="Export to CSV"
tooltipOptions={{position: 'bottom'}}
/>
{pagination}
</Row>
)
}
}

class Page extends React.Component {
render() {
return <li className={this.props.activePage === this.props.page ? "active" : ""} style={{ cursor: this.props.pointer ? "pointer" : "default" }}><a onClick={() => this.props.onPageChanged(this.props.page)}>{this.props.page}</a></li>
}
}
14 changes: 11 additions & 3 deletions src/UniversalDashboard.Materialize/Components/ud-navigation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,12 @@ export default class UdNavigation extends React.Component {
else
{
var children = item.children.map(x => this.renderSideNavItem(x));

var icon = item.icon;
var header = [icon && <UdIcon icon={icon} style={{width: '30px', marginTop: '15px'}}/>, item.text]

return <li><Collapsible accordion>
<CollapsibleItem header={item.text} style={{color: 'black', paddingLeft: '15px'}} id={item.id}>
<CollapsibleItem header={header} style={{color: 'black', paddingLeft: '15px'}} id={item.id}>
<ul>
{children}
</ul>
Expand Down Expand Up @@ -116,7 +120,7 @@ class UDSideNavItem extends React.Component {
onItemClick(e) {
e.preventDefault();

if (this.props.hasCallback) {
if (this.props.type === "side-nav-item" && this.props.hasCallback) {
PubSub.publish('element-event', {
type: "clientEvent",
eventId: this.props.id,
Expand All @@ -128,7 +132,11 @@ class UDSideNavItem extends React.Component {
window.location.href = this.props.url;
}
else if (this.props.url != null) {
this.props.history.push(`/${this.props.url.replace(/ /g, "-")}`);
var url = this.props.url;
if (!url.startsWith("/")) {
url = "/" + url;
}
this.props.history.push(`${url.replace(/ /g, "-")}`);
}
else if (this.props.name != null) {
this.props.history.push(`/${this.props.name.replace(/ /g, "-")}`);
Expand Down
16 changes: 8 additions & 8 deletions src/UniversalDashboard.Materialize/Components/ud-select.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ export default class UDSelect extends React.Component {
}

onChange(e) {
if (this.props.onChange == null) {
return
}

var val = new Array();

if (e.target.selectedOptions) {
Expand All @@ -53,16 +49,20 @@ export default class UDSelect extends React.Component {
val = JSON.stringify(val);
}

this.setState({
value: val
})

if (this.props.onChange == null) {
return
}

UniversalDashboard.publish('element-event', {
type: "clientEvent",
eventId: this.props.onChange,
eventName: 'onChange',
eventData: val
});

this.setState({
value: val
})
}

render() {
Expand Down
1 change: 1 addition & 0 deletions src/UniversalDashboard.Materialize/Scripts/collapsible.ps1
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ function New-UDCollapsible {
@{
type = 'ud-collapsible'
isPlugin = $true
assetId = $AssetId

id = $id
items = $Items.Invoke()
Expand Down
6 changes: 4 additions & 2 deletions src/UniversalDashboard.Materialize/Scripts/grid.ps1
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@ function New-UDGrid {
[Parameter()]
[Switch]$AutoRefresh,
[Parameter()]
[int]$RefreshInterval = 5

[int]$RefreshInterval = 5,
[Parameter()]
[Switch]$NoExport
)

End {
Expand Down Expand Up @@ -74,6 +75,7 @@ function New-UDGrid {
noFilter = $NoFilter.IsPresent
autoRefresh = $AutoRefresh.IsPresent
refreshInterval = $RefreshInterval
noExport = $NoExport.IsPresent
}
}
}
Loading

0 comments on commit 0f52aff

Please sign in to comment.