Dev: v0.3.0 more updates

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

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";

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 (
       <div>
         <button className="button button-green" style={{width: '80px'}} onClick={this.save}>Save</button>
@@ -531,15 +521,15 @@ class ComponentEditPanel extends React.Component {
                   <input 
                     type="text" 
                     name="width" 
-                    value={width}
-                    onChange={this.handleSizeChange} 
+                    value={this.state.width}
+                    onChange={(event) => this.handleIntegerChange('width', event.target.value)}
                   />
                   <label>Height</label>
                   <input 
                     type="text" 
                     name="height" 
                     value={this.state.height}
-                    onChange={this.handleSizeChange} 
+                    onChange={(event) => this.handleIntegerChange('height', event.target.value)}
                   />
 
                   <label>Title</label>
@@ -648,7 +638,7 @@ class ComponentEditPanel extends React.Component {
                   <Select
                     name={'jdbcDataSourceId'}
                     value={this.state.jdbcDataSourceId}
-                    onChange={this.handleIntegerOptionChange}
+                    onChange={this.handleIntegerChange}
                     options={jdbcDataSources}
                     optionDisplay={'name'}
                     optionValue={'id'}
@@ -730,7 +720,7 @@ class ComponentEditPanel extends React.Component {
                     name={'drillReportId'}
                     value={this.state.drillReportId}
                     options={drillReports}
-                    onChange={this.handleIntegerOptionChange}
+                    onChange={this.handleIntegerChange}
                     optionDisplay={'name'}
                     optionValue={'id'}
                   />

web-app/src/components/ComponentViewPanel.js

@@ -67,11 +67,11 @@ class ComponentViewPanel extends React.Component {
   }
 
   scaleToActual = (num, gridWidth) => {
-    return num * gridWidth / BASE_WIDTH / 100;
+    return Math.ceil(num * gridWidth / BASE_WIDTH);
   }
 
   scaleToBase = (num, gridWidth) => {
-    return Number.parseFloat(num * BASE_WIDTH / gridWidth).toFixed(2) * 100;
+    return Math.ceil(num * BASE_WIDTH / gridWidth);
   }
 
   fetchComponents = (reportId, viewWidth) => {

web-app/src/components/GridDraggable.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const COMPONENT_BORDER = 2;
 

web-app/src/components/Tabs.js

@@ -2,9 +2,6 @@ import React from 'react';
 import './Tabs.css';
 
 class Tabs extends React.Component {
-  constructor(props) {
-    super(props);
-  }
 
   handleTabClick = (title) => {
     this.props.onTabChange(title);

web-app/src/components/filters/Slicer.js

@@ -78,6 +78,7 @@ class Slicer extends React.Component {
     }
     return (
       <div>
+        {/*
         <input 
           type="text" 
           name="name" 
@@ -95,6 +96,7 @@ class Slicer extends React.Component {
             )
           }
         </button>
+        */}
         <div className="slicer-body">
           {checkBoxItems}
         </div>

web-app/src/components/widgets/ImageBox.js

@@ -19,6 +19,7 @@ class ImageBox extends React.Component {
       <img 
         style={style}
         src={this.props.src} 
+        alt="not available"
       />
     );
   }

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 {

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 (
       <div className="full-screen-view">
-        <ReportEditView key={pathname} />
+        <ReportEditView key={currentPath} />
       </div>
     )
   };

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 {
           <Switch>
             <Route exact path="/workspace/datasource" component={DataSource} />
             <Route exact path="/workspace/account" component={Account} />
-            <Route exact path="/workspace/report/full/:name" component={ReportFullScreenView} />
+            <Route exact path="/workspace/report/fullscreen" component={ReportFullScreenView} />
             <Route exact path="/workspace/usermanagement" render={() => <UserManagement {...this.props} />} />
             <Route path="/workspace/report" render={() => <Report {...this.props} />} />
+            <Route component={PageNotFound} />
           </Switch>
         </div>
         <Toast />