diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src')
5 files changed, 105 insertions, 19 deletions
diff --git a/sdnr/wt/odlux/framework/src/app.css b/sdnr/wt/odlux/framework/src/app.css index 356f36dd0..f70fbc0e4 100644 --- a/sdnr/wt/odlux/framework/src/app.css +++ b/sdnr/wt/odlux/framework/src/app.css @@ -3,4 +3,14 @@ html, body, #app { padding: 0px; margin: 0px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} +.about-table td{ + padding:0.5rem 1rem; + border-bottom: 1px solid #DDD; +} +.about-table pre { + background:#FFF; + border:1px solid #CCC; + padding:1rem; + margin: 1rem 0; }
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx index 3e31c5e03..520674441 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx @@ -179,7 +179,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate <TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv} onToggleFilter={toggleFilter} /> <div className={classes.tableWrapper}> - <Table className={classes.table} aria-labelledby="tableTitle"> + <Table className={classes.table} aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'}> <EnhancedTableHead columns={columns} numSelected={selected && selected.length} @@ -193,7 +193,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate <TableBody> {showFilter && <EnhancedTableFilter columns={columns} filter={filter} onFilterChanged={this.onFilterChanged} enableSelection={this.props.enableSelection} /> || null} {rows // may need ordering here - .map((entry: TData & { [key: string]: any }) => { + .map((entry: TData & { [key: string]: any }, index) => { const entryId = getId(entry); const isSelected = this.isSelected(entryId); return ( @@ -202,6 +202,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate onClick={event => this.handleClick(event, entry, entryId)} role="checkbox" aria-checked={isSelected} + aria-label={`${(this.props.tableId ? this.props.tableId : 'table')}-row-${(index + 1)}`} tabIndex={-1} key={entryId} selected={isSelected} diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx index 737ea85f9..2075e052c 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx @@ -69,14 +69,14 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC {col.disableFilter || (col.type === ColumnType.custom) ? null : (col.type === ColumnType.boolean) - ? <Select className={classes.input} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} > - <MenuItem value={undefined}> + ? <Select className={classes.input} aria-label={(col.title as string).toLowerCase() + ' filter'} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} > + <MenuItem value={undefined} > <em>None</em> </MenuItem> <MenuItem value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem> <MenuItem value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem> </Select> - : <Input className={classes.input} inputProps={{ 'aria-label': 'Filter' }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />} + : <Input className={classes.input} inputProps={{ 'aria-label': (col.title as string).toLowerCase() + ' filter' }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />} </TableCell> ); }, this)} diff --git a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts index 6e8902c07..74682cd95 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts +++ b/sdnr/wt/odlux/framework/src/components/material-table/utilities.ts @@ -196,6 +196,29 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState }).catch(error => new AddErrorInfoAction(error)); }; + const reloadActionAsync = async (dispatch: Dispatch, getAppState: () => IApplicationStoreState) => { + dispatch(new RefreshAction()); + const ownState = selectState(getAppState()); + const filter = { ...ownState.preFilter, ...(ownState.showFilter && ownState.filter || {}) }; + + try { + const result = await Promise.resolve(callback(ownState.page, ownState.rowsPerPage, ownState.orderBy, ownState.order, filter)); + + + if (ownState.page > 0 && ownState.rowsPerPage * ownState.page > result.total) { //if result is smaller than the currently shown page, new search and repaginate + + let newPage = Math.floor(result.total / ownState.rowsPerPage); + + const repaginationResult = await Promise.resolve(callback(newPage, ownState.rowsPerPage, ownState.orderBy, ownState.order, filter)); + dispatch(new SetResultAction(repaginationResult)); + } else { + dispatch(new SetResultAction(result)); + } + } catch (error) { + new AddErrorInfoAction(error); + } + }; + const createPreActions = (dispatch: Dispatch, skipRefresh: boolean = false) => { return { onPreFilterChanged: (preFilter: { [key: string]: string }) => { @@ -258,6 +281,7 @@ export function createExternal<TData>(callback: DataCallback<TData>, selectState createActions: createActions, createProperties: createProperties, createPreActions: createPreActions, - actionHandler: externalTableStateActionHandler + actionHandler: externalTableStateActionHandler, + reloadActionAsync: reloadActionAsync, } }
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx index d47e09c3a..59a71512c 100644 --- a/sdnr/wt/odlux/framework/src/views/about.tsx +++ b/sdnr/wt/odlux/framework/src/views/about.tsx @@ -15,17 +15,68 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react';
-
-const AboutComponent = () => {
-
- return (
- <div>
- <h2>About</h2>
- <div style={{ margin: "0 auto" }}>##odlux.version##</div>
- </div>
- );
-};
-
-export const About = AboutComponent;
+import * as React from 'react'; +import * as marked from 'marked'; +import * as hljs from 'highlight.js'; +import { requestRestExt } from '../services/restService'; +const defaultRenderer = new marked.Renderer(); +defaultRenderer.link = (href, title, text) => ( + `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>` +); +interface AboutState { + content: string | null; +} + +class AboutComponent extends React.Component<any, AboutState> { + + + constructor(props: any) { + super(props); + this.state = { content: null } + this.loadAboutContent(); + } + private loadAboutContent(): void { + requestRestExt<string>('/about').then((response) => { + this.setState({ content: response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error" }) + }).catch((error) => { + this.setState({ content: error }) + }) + } + render() { + + const markedOptions: marked.MarkedOptions = { + gfm: true, + breaks: false, + pedantic: false, + sanitize: true, + smartLists: true, + smartypants: false, + langPrefix: 'hljs ', + ...({}), + highlight: (code, lang) => { + if (!!(lang && hljs.getLanguage(lang))) { + return hljs.highlight(lang, code).value; + } + return code; + } + }; + + + const className = "about-table" + const style: React.CSSProperties = {}; + + const html = (marked(this.state.content || 'loading', { renderer: markedOptions && markedOptions.renderer || defaultRenderer })); + + return ( + <div + dangerouslySetInnerHTML={{ __html: html }} + className={className} + style={style} + /> + + ); + } +}; + +export const About = AboutComponent; export default About;
\ No newline at end of file |