diff --git a/README.md b/README.md index c3d7271..4b18244 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ Poli is an easy-to-use SQL reporting application. +![poli v0.3.0](https://github.com/shzlw/poli/blob/master/docs/_images/poli_0.3.0.gif) + ## Features * Easy deployment & setup diff --git a/docs/_images/poli_0.3.0.gif b/docs/_images/poli_0.3.0.gif new file mode 100644 index 0000000..59b198d Binary files /dev/null and b/docs/_images/poli_0.3.0.gif differ diff --git a/web-app/src/api/Util.js b/web-app/src/api/Util.js index 04b799f..7be42bc 100644 --- a/web-app/src/api/Util.js +++ b/web-app/src/api/Util.js @@ -22,14 +22,14 @@ export const getReadableDiffTime = (d1, d2) => { } const minutes = Math.floor(seconds / 60); - if (minutes == 1) { + if (minutes === 1) { return '1 minute ago'; } else if (minutes > 1 && minutes < 60) { return minutes + " minutes ago"; } const hours = Math.floor(seconds / 3600); - if (hours == 1) { + if (hours === 1) { return '1 hour ago'; } return hours + " hours ago"; diff --git a/web-app/src/components/ComponentEditPanel.js b/web-app/src/components/ComponentEditPanel.js index 0515809..655e04a 100644 --- a/web-app/src/components/ComponentEditPanel.js +++ b/web-app/src/components/ComponentEditPanel.js @@ -18,6 +18,7 @@ import Table from './Table'; import ColorPicker from './ColorPicker'; import SelectButtons from './SelectButtons'; import InputRange from './filters/InputRange'; +import Toast from './Toast'; const TABLE_DEFAULT_PAGE_SIZES = [5, 10, 20, 25, 50, 100]; @@ -152,19 +153,6 @@ class ComponentEditPanel extends React.Component { }); } - handleSizeChange = (event) => { - const name = event.target.name; - let value = event.target.value; - if (name === 'width') { - value = Number.parseFloat(value).toFixed(2) * 100; - } else { - value = parseInt(value, 10) || 0; - } - this.setState({ - [name]: value - }); - } - onStyleValueChange = (name, value) => { const style = {...this.state.style}; style[[name]] = value; @@ -179,7 +167,7 @@ class ComponentEditPanel extends React.Component { }); } - handleIntegerOptionChange = (name, value) => { + handleIntegerChange = (name, value) => { const intValue = parseInt(value, 10) || 0; this.setState({ [name]: intValue @@ -222,6 +210,11 @@ class ComponentEditPanel extends React.Component { data } = this.state; + if (width < 50 || height < 50) { + Toast.showError('Minimum width or height is 50'); + return; + } + const component = { title: title, width: width, @@ -254,7 +247,7 @@ class ComponentEditPanel extends React.Component { component.style = this.initialStyle; component.x = 0; component.y = 0; - component.width = 200 * 100; + component.width = 200; component.height = 200; axios.post('/ws/component', component) @@ -502,9 +495,6 @@ class ComponentEditPanel extends React.Component { const showQueryTab = type === Constants.CHART || (type === Constants.FILTER && subType === Constants.SLICER); - - const width = Number.parseFloat(this.state.width / 100).toFixed(2); - return (
@@ -531,15 +521,15 @@ class ComponentEditPanel extends React.Component { this.handleIntegerChange('width', event.target.value)} /> this.handleIntegerChange('height', event.target.value)} /> @@ -648,7 +638,7 @@ class ComponentEditPanel extends React.Component { + */}
{checkBoxItems}
diff --git a/web-app/src/components/widgets/ImageBox.js b/web-app/src/components/widgets/ImageBox.js index 98514b5..7e46124 100644 --- a/web-app/src/components/widgets/ImageBox.js +++ b/web-app/src/components/widgets/ImageBox.js @@ -19,6 +19,7 @@ class ImageBox extends React.Component { not available ); } diff --git a/web-app/src/views/ReportEditView.js b/web-app/src/views/ReportEditView.js index 481e75a..7acbe3f 100644 --- a/web-app/src/views/ReportEditView.js +++ b/web-app/src/views/ReportEditView.js @@ -11,11 +11,13 @@ import ComponentEditPanel from '../components/ComponentEditPanel'; import Modal from '../components/Modal'; import ColorPicker from '../components/ColorPicker'; import Checkbox from '../components/Checkbox'; +import Toast from '../components/Toast'; import * as Constants from '../api/Constants'; import * as Util from '../api/Util'; import './Report.css'; + class ReportEditView extends React.Component { constructor(props) { @@ -54,8 +56,10 @@ class ReportEditView extends React.Component { const id = this.props.match.params.id; if (id === undefined) { // If the drill through is triggered from the full-report page already, this component is remounted but not FullScreenView. - const reportName = this.props.match.params.name; - if (reportName !== undefined) { + const url = this.props.location.search; + const params = new URLSearchParams(url); + const reportName = params.get('$toReport'); + if (reportName !== null) { this.loadViewByReportName(); return; } @@ -124,13 +128,13 @@ class ReportEditView extends React.Component { } loadViewByReportName = () => { - const reportName = this.props.match.params.name; const url = this.props.location.search; const params = new URLSearchParams(url); let showControl = params.get('$showControl'); showControl = showControl == null ? true : (showControl ? true: false); const fromReport = params.get('$fromReport'); + const reportName = params.get('$toReport'); const componentViewWidth = this.getPageWidth(); @@ -222,9 +226,19 @@ class ReportEditView extends React.Component { const { reportId, name, - style + style = {} } = this.state; + if (style.height < 100) { + Toast.showError('Minimum height is 100'); + return; + } + + if (style.isFixedWidth && style.fixedWidth < 100) { + Toast.showError('Minimum width is 100'); + return; + } + const report = { id: reportId, name: name, @@ -273,7 +287,7 @@ class ReportEditView extends React.Component { fullScreen = () => { const { name } = this.state; - const url = `/workspace/report/full/${name}`; + const url = `/workspace/report/fullscreen?$toReport=${name}`; window.open(url, '_blank'); } @@ -311,7 +325,7 @@ class ReportEditView extends React.Component { .then(res => { const report = res.data; const nextReport = report.name; - const nextLink = `/workspace/report/full/${nextReport}?$fromReport=${name}&${columnName}=${columnValue}`; + const nextLink = `/workspace/report/fullscreen?$toReport=${nextReport}&$fromReport=${name}&${columnName}=${columnValue}`; this.props.history.push(nextLink); }); } else { diff --git a/web-app/src/views/ReportFullScreenView.js b/web-app/src/views/ReportFullScreenView.js index 2cfd318..6a8ecb3 100644 --- a/web-app/src/views/ReportFullScreenView.js +++ b/web-app/src/views/ReportFullScreenView.js @@ -12,9 +12,12 @@ class ReportFullScreenView extends React.Component { render() { const pathname = this.props.location.pathname; + const search = this.props.location.search; + const currentPath = pathname + search; + return (
- +
) }; diff --git a/web-app/src/views/Workspace.js b/web-app/src/views/Workspace.js index 68b3d83..22fc2d3 100644 --- a/web-app/src/views/Workspace.js +++ b/web-app/src/views/Workspace.js @@ -6,6 +6,7 @@ import Report from './Report'; import UserManagement from './UserManagement'; import Account from './Account'; import ReportFullScreenView from './ReportFullScreenView'; +import PageNotFound from './PageNotFound'; import Toast from '../components/Toast'; @@ -127,9 +128,10 @@ class Workspace extends React.Component { - + } /> } /> +