Fix geosolutions-it#2663. Dashboard edit and view mode

offtherailz · May 14, 2018 · d37ae46 · d37ae46
1 parent 1af43ff
commit d37ae46
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 111 deletions.
diff --git a/web/client/components/dashboard/Dashboard.jsx b/web/client/components/dashboard/Dashboard.jsx
@@ -22,9 +22,9 @@ module.exports =
         widthProvider({ overrideWidthProvider: true}),
         emptyState(
             ({widgets = []} = {}) => widgets.length === 0,
-            () => ({
+            ({loading}) => ({
                 glyph: "dashboard",
-                title: <Message msgId="dashboard.emptyTitle" />
+                title: loading ? <Message msgId="loading" /> : <Message msgId="dashboard.emptyTitle" />
             })
         ),
         defaultProps({

diff --git a/web/client/components/widgets/view/WidgetsView.jsx b/web/client/components/widgets/view/WidgetsView.jsx
@@ -40,6 +40,7 @@ module.exports = pure(({
     width,
     showGroupColor,
     groups = [],
+    canEdit = true,
     getWidgetClass = () => { },
     onWidgetClick = () => { },
     updateWidgetProperty = () => { },
@@ -49,10 +50,12 @@ module.exports = pure(({
     ...actions
 } = {}) =>
     (<ResponsiveReactGridLayout
-        key={id}
+        key={id || "widgets-view"}
         useDefaultWidthProvider={useDefaultWidthProvider}
         measureBeforeMount={measureBeforeMount}
         width={!useDefaultWidthProvider ? width : undefined}
+        isResizable={canEdit}
+        isDraggable={canEdit}
         draggableHandle={".draggableHandle"}
         onLayoutChange={onLayoutChange}
         preventCollision
@@ -72,6 +75,7 @@ module.exports = pure(({
                 groups={getWidgetGroups(groups, w)}
                 showGroupColor={showGroupColor}
                 dependencies={dependencies}
+                canEdit={canEdit}
                 updateProperty={(...args) => updateWidgetProperty(w.id, ...args)}
                 onDelete={() => deleteWidget(w)}
                 onEdit={() => editWidget(w)} /></div>))

diff --git a/web/client/components/widgets/widget/ChartWidget.jsx b/web/client/components/widgets/widget/ChartWidget.jsx
@@ -36,6 +36,7 @@ module.exports = ({
     series = [],
     loading,
     showTable,
+    canEdit = true,
     confirmDelete= false,
     toggleTableView= () => {},
     toggleDeleteConfirm= () => {},
@@ -56,8 +57,11 @@ module.exports = ({
             ? null : <ButtonToolbar>
             <DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
                 <MenuItem onClick={() => toggleTableView()} eventKey="1"><Glyphicon glyph="features-grid"/>&nbsp;<Message msgId="widgets.widget.menu.showChartData" /></MenuItem>
-                <MenuItem onClick={() => onEdit()} eventKey="3"><Glyphicon glyph="pencil"/>&nbsp;<Message msgId="widgets.widget.menu.edit" /></MenuItem>
-                <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash"/>&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>
+                {canEdit
+                    ? [
+                        <MenuItem onClick={() => onEdit()} eventKey="3"><Glyphicon glyph="pencil"/>&nbsp;<Message msgId="widgets.widget.menu.edit" /></MenuItem>,
+                        <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash"/>&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>]
+                    : null}
                 <MenuItem onClick={() => exportCSV({data, title})} eventKey="4"><Glyphicon className="exportCSV" glyph="download"/>&nbsp;<Message msgId="widgets.widget.menu.downloadData" /></MenuItem>
                 <MenuItem onClick={() => exportImage({widgetDivId: `widget-chart-${id}`, title})} eventKey="4"><Glyphicon className="exportImage" glyph="download"/>&nbsp;<Message msgId="widgets.widget.menu.exportImage" /></MenuItem>
             </DropdownButton>

diff --git a/web/client/components/widgets/widget/CounterWidget.jsx b/web/client/components/widgets/widget/CounterWidget.jsx
@@ -36,6 +36,7 @@ module.exports = ({
     showTable,
     confirmDelete= false,
     headerStyle,
+    canEdit = true,
     toggleTableView= () => {},
     toggleDeleteConfirm= () => {},
     onEdit= () => {},
@@ -50,12 +51,12 @@ module.exports = ({
         onDelete={onDelete}
         toggleDeleteConfirm = {toggleDeleteConfirm}
         headerStyle={headerStyle}
-        topRightItems={showTable
-            ? null : <ButtonToolbar>
+        topRightItems={canEdit
+            ? (<ButtonToolbar>
             <DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
                 <MenuItem onClick={() => onEdit()} eventKey="3"><Glyphicon glyph="pencil"/>&nbsp;<Message msgId="widgets.widget.menu.edit" /></MenuItem>
                 <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash"/>&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>
             </DropdownButton>
-        </ButtonToolbar>}>
+        </ButtonToolbar>) : null}>
         <CounterView id={id} isAnimationActive={!loading} loading={loading} data={data} series={series} iconFit {...props} />
     </WidgetContainer>);
diff --git a/web/client/components/widgets/widget/LegendWidget.jsx b/web/client/components/widgets/widget/LegendWidget.jsx
@@ -28,6 +28,7 @@ module.exports = ({
     id, title,
     headerStyle,
     confirmDelete= false,
+    canEdit = true,
     onDelete=() => {},
     loading,
     description,
@@ -36,12 +37,12 @@ module.exports = ({
     (<WidgetContainer id={`widget-text-${id}`} title={title} confirmDelete={confirmDelete} onDelete={onDelete} toggleDeleteConfirm={toggleDeleteConfirm} headerStyle={headerStyle}
     topLeftItems={renderHeaderLeftTopItem({ loading, title, description })}
 
-    topRightItems={<ButtonToolbar>
+    topRightItems={canEdit ? (<ButtonToolbar>
         <DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
             <MenuItem onClick={() => onEdit()} eventKey="3"><Glyphicon glyph="pencil"/>&nbsp;<Message msgId="widgets.widget.menu.edit" /></MenuItem>
             <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash"/>&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>
         </DropdownButton>
-    </ButtonToolbar>}
+    </ButtonToolbar>) : null}
         >
         <LegendView {...props} />
     </WidgetContainer>

diff --git a/web/client/components/widgets/widget/MapWidget.jsx b/web/client/components/widgets/widget/MapWidget.jsx
@@ -34,18 +34,19 @@ module.exports = ({
     id, title, loading, description,
     map,
     mapStateSource,
+    canEdit = true,
     confirmDelete = false,
     onDelete = () => {},
     headerStyle
 } = {}) =>
     (<WidgetContainer id={`widget-text-${id}`} title={title} confirmDelete={confirmDelete} onDelete={onDelete} toggleDeleteConfirm={toggleDeleteConfirm} headerStyle={headerStyle}
         topLeftItems={renderHeaderLeftTopItem({ loading, title, description })}
-        topRightItems={<ButtonToolbar>
+        topRightItems={canEdit ? (<ButtonToolbar>
             <DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
                 <MenuItem onClick={() => onEdit()} eventKey="3"><Glyphicon glyph="pencil" />&nbsp;<Message msgId="widgets.widget.menu.edit" /></MenuItem>
                 <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash" />&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>
             </DropdownButton>
-        </ButtonToolbar>}
+        </ButtonToolbar>) : null}
     >
         <MapView updateProperty={updateProperty} id={id} map={omit(map, 'mapStateSource')} mapStateSource={mapStateSource} layers={map && map.layers} options={{ style: { margin: 10, height: 'calc(100% - 20px)' }}}/>
     </WidgetContainer>);
diff --git a/web/client/components/widgets/widget/TableWidget.jsx b/web/client/components/widgets/widget/TableWidget.jsx
@@ -36,6 +36,7 @@ module.exports = ({
     loading,
     confirmDelete = false,
     headerStyle,
+    canEdit = true,
     toggleTableView = () => { },
     toggleDeleteConfirm = () => { },
     onEdit = () => { },
@@ -62,10 +63,10 @@ module.exports = ({
         onDelete={onDelete}
         toggleDeleteConfirm={toggleDeleteConfirm}
         topRightItems={<ButtonToolbar>
-            <DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
+            {canEdit ? (<DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
                 <MenuItem onClick={() => onEdit()} eventKey="3"><Glyphicon glyph="pencil" />&nbsp;<Message msgId="widgets.widget.menu.edit" /></MenuItem>
                 <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash" />&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>
-            </DropdownButton>
+            </DropdownButton>) : null}
         </ButtonToolbar>}>
         <BorderLayout
             footer={pagination.totalFeatures ? (

diff --git a/web/client/components/widgets/widget/TextWidget.jsx b/web/client/components/widgets/widget/TextWidget.jsx
@@ -22,15 +22,16 @@ module.exports = ({
     toggleDeleteConfirm = () => {},
     id, title, text,
     headerStyle,
+    canEdit = true,
     confirmDelete= false,
     onDelete=() => {}
 } = {}) =>
     (<WidgetContainer id={`widget-text-${id}`} title={title} confirmDelete={confirmDelete} onDelete={onDelete} toggleDeleteConfirm={toggleDeleteConfirm} headerStyle={headerStyle}
     topRightItems={<ButtonToolbar>
-        <DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
+        {canEdit ? (<DropdownButton pullRight bsStyle="default" className="widget-menu" title={<Glyphicon glyph="option-vertical" />} noCaret id="dropdown-no-caret">
             <MenuItem onClick={() => onEdit()} eventKey="3"><Glyphicon glyph="pencil"/>&nbsp;<Message msgId="widgets.widget.menu.edit" /></MenuItem>
             <MenuItem onClick={() => toggleDeleteConfirm(true)} eventKey="2"><Glyphicon glyph="trash"/>&nbsp;<Message msgId="widgets.widget.menu.delete" /></MenuItem>
-        </DropdownButton>
+        </DropdownButton>) : null}
     </ButtonToolbar>}
         >
     <TextView text={text} />

diff --git a/web/client/epics/dashboard.js b/web/client/epics/dashboard.js
@@ -37,7 +37,8 @@ const {
     QUERY_FORM_SEARCH
 } = require('../actions/queryform');
 const {
-    LOGIN_SUCCESS
+    LOGIN_SUCCESS,
+    LOGOUT
 } = require('../actions/security');
 const {
     isDashboardEditing,
@@ -153,12 +154,7 @@ module.exports = {
                             return Rx.Observable.of(error({
                                 title: "dashboard.errors.loading.title",
                                 message: "dashboard.errors.loading.pleaseLogin"
-                            }))
-                            .merge(action$
-                                .ofType(LOGIN_SUCCESS)
-                                .switchMap( () => Rx.Observable.of(loadDashboard(id)).delay(1000))
-                                .filter(() => isDashboardAvailable(getState()))
-                                .takeUntil(action$.ofType(LOCATION_CHANGE)));
+                            }));
                         } if (e.status === 404) {
                             return Rx.Observable.of(error({
                                 title: "dashboard.errors.loading.title",
@@ -172,6 +168,13 @@ module.exports = {
                     }
                 ))
         ),
+    reloadDashboardOnLoginLogout: (action$) =>
+        action$.ofType(LOAD_DASHBOARD).switchMap(
+            ({ id }) => action$
+                .ofType(LOGIN_SUCCESS, LOGOUT)
+                .switchMap(() => Rx.Observable.of(loadDashboard(id)).delay(1000))
+                .takeUntil(action$.ofType(LOCATION_CHANGE))
+        ),
     // saving dashboard flow (both creation and update)
     saveDashboard: action$ => action$
         .ofType(SAVE_DASHBOARD)

diff --git a/web/client/plugins/Dashboard.jsx b/web/client/plugins/Dashboard.jsx
@@ -7,30 +7,32 @@
  */
 
 const React = require('react');
-const {get} = require('lodash');
-const {connect} = require('react-redux');
+const { get } = require('lodash');
+const { connect } = require('react-redux');
 const { compose, withProps, withHandlers } = require('recompose');
-const {createSelector} = require('reselect');
-const {mapIdSelector} = require('../selectors/map');
-const { getDashboardWidgets, dependenciesSelector, getDashboardWidgetsLayout, isWidgetSelectionActive, getEditingWidget, getWidgetsDependenciesGroups} = require('../selectors/widgets');
-const { editWidget, updateWidgetProperty, deleteWidget, changeLayout, exportCSV, exportImage, selectWidget} = require('../actions/widgets');
-const {showConnectionsSelector} = require('../selectors/dashboard');
+const { createSelector } = require('reselect');
+const { getDashboardWidgets, dependenciesSelector, getDashboardWidgetsLayout, isWidgetSelectionActive, getEditingWidget, getWidgetsDependenciesGroups } = require('../selectors/widgets');
+const { editWidget, updateWidgetProperty, deleteWidget, changeLayout, exportCSV, exportImage, selectWidget } = require('../actions/widgets');
+const { showConnectionsSelector, dashboardResource, isDashboardLoading } = require('../selectors/dashboard');
 const ContainerDimensions = require('react-container-dimensions').default;
 
 const PropTypes = require('prop-types');
 const WidgetsView = compose(
     connect(
         createSelector(
-            mapIdSelector,
+            dashboardResource,
             getDashboardWidgets,
             getDashboardWidgetsLayout,
             dependenciesSelector,
             isWidgetSelectionActive,
             (state) => get(getEditingWidget(state), "id"),
             getWidgetsDependenciesGroups,
             showConnectionsSelector,
-            (id, widgets, layouts, dependencies, selectionActive, editingWidgetId, groups, showGroupColor) => ({
-                id,
+            isDashboardLoading,
+            (resource, widgets, layouts, dependencies, selectionActive, editingWidgetId, groups, showGroupColor, loading) => ({
+                resource,
+                loading,
+                canEdit: (resource ? !!resource.canEdit : true),
                 widgets,
                 layouts,
                 dependencies,
@@ -63,14 +65,14 @@ const WidgetsView = compose(
 
 
 class Widgets extends React.Component {
-     static propTypes = {
-         enabled: PropTypes.bool
-     };
-     static defaultProps = {
-         enabled: true
-     };
+    static propTypes = {
+        enabled: PropTypes.bool
+    };
+    static defaultProps = {
+        enabled: true
+    };
     render() {
-        return this.props.enabled ? (<ContainerDimensions>{({width, height}) => <WidgetsView width={width} height={height}/>}</ContainerDimensions> ) : null;
+        return this.props.enabled ? (<ContainerDimensions>{({ width, height }) => <WidgetsView width={width} height={height} />}</ContainerDimensions>) : null;
 
     }
 }