Improve structure of viewers (GeoNode#242)

marthamareal · Jun 14, 2021 · 7e3b998 · 7e3b998
1 parent c0c6141
commit 7e3b998
Show file tree

Hide file tree

Showing 20 changed files with 336 additions and 94 deletions.
diff --git a/geonode_mapstore_client/client/js/epics/gnviewer.js b/geonode_mapstore_client/client/js/epics/gnviewer.js
@@ -19,7 +19,8 @@ import { getBaseMapConfiguration } from '@js/api/geonode/config';
 import {
     getLayerByPk,
     getGeoStoryByPk,
-    getDocumentByPk
+    getDocumentByPk,
+    getResourceByPk
 } from '@js/api/geonode/v2';
 import { getMapStoreMapById } from '@js/api/geonode/adapter';
 import { configureMap } from '@mapstore/framework/actions/config';
@@ -28,9 +29,14 @@ import { getConfigProp } from '@mapstore/framework/utils/ConfigUtils';
 import {
     // setResourcePermissions,
     // setNewResource,
+    setResourceType,
+    setResourceId,
     setResource
 } from '@js/actions/gnresource';
-import { setCurrentStory } from '@mapstore/framework/actions/geostory';
+import {
+    setCurrentStory,
+    setResource as setGeoStoryResource
+} from '@mapstore/framework/actions/geostory';
 
 export const gnViewerRequestLayerConfig = (action$) =>
     action$.ofType(REQUEST_LAYER_CONFIG)
@@ -87,7 +93,8 @@ export const gnViewerRequestLayerConfig = (action$) =>
                         }
                     }),
                     zoomToExtent(extent, 'EPSG:4326'),
-                    setResource(gnLayer)
+                    setResource(gnLayer),
+                    setResourceId(pk)
                 );
             }).catch(() => {
                 // TODO: implement various error cases
@@ -99,12 +106,15 @@ export const gnViewerRequestMapConfig = (action$) =>
     action$.ofType(REQUEST_MAP_CONFIG)
         .switchMap(({ pk }) => {
             return Observable.defer(() => axios.all([
-                getMapStoreMapById(pk)
+                getMapStoreMapById(pk),
+                getResourceByPk(pk)
             ])).switchMap((response) => {
-                const [adapterMap] = response;
+                const [adapterMap, resource] = response;
                 return Observable.of(
-                    configureMap(adapterMap.data)// ,
-                    // setResource(gnLayer)
+                    configureMap(adapterMap.data),
+                    setResource(resource),
+                    setResourceId(pk),
+                    setResourceType('map')
                 );
             }).catch(() => {
                 // TODO: implement various error cases
@@ -122,7 +132,12 @@ export const gnViewerRequestGeoStoryConfig = (action$) =>
                 const { data, ...resource } = gnGeoStory;
                 return Observable.of(
                     setCurrentStory(data),
-                    setResource(resource)
+                    setResource(resource),
+                    setResourceId(pk),
+                    setResourceType('geostory'),
+                    setGeoStoryResource({
+                        canEdit: resource?.perms?.includes('change_resourcebase')
+                    })
                 );
             }).catch(() => {
                 // TODO: implement various error cases
@@ -138,7 +153,8 @@ export const gnViewerRequestDocumentConfig = (action$) =>
             ])).switchMap((response) => {
                 const [gnDocument] = response;
                 return Observable.of(
-                    setResource(gnDocument)
+                    setResource(gnDocument),
+                    setResourceId(pk)
                 );
             }).catch(() => {
                 // TODO: implement various error cases

diff --git a/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx b/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
@@ -20,7 +20,6 @@ function ActionNavbarPlugin({
     rightMenuItems
 }, context) {
 
-
     const { loadedPlugins } = context;
     const configuredItems = usePluginItems({ items, loadedPlugins });
     const leftMenuConfiguredItems = configuredItems

diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -21,6 +21,7 @@ import {toggleControl} from '@mapstore/framework/actions/controls';
 import gnresource from '@js/reducers/gnresource';
 import Message from '@mapstore/framework/components/I18N/Message';
 import { userSelector } from '@mapstore/framework/selectors/security';
+import Button from '@js/components/Button';
 
 const ConnectedDetailsPanel = connect(
     createSelector([
@@ -42,10 +43,10 @@ const ButtonViewer = ({user,  onClick}) => {
         onClick();
     };
 
-    return (user && <button
-        className="btn btn-default"
+    return (user && <Button
         onClick={handleClickButton}
-    > <Message msgId="gnviewer.edit"/> </button>);
+    > <Message msgId="gnviewer.details"/>
+    </Button>);
 };
 
 const ConnectedButton = connect(

diff --git a/geonode_mapstore_client/client/js/plugins/Save.jsx b/geonode_mapstore_client/client/js/plugins/Save.jsx
@@ -14,14 +14,17 @@ import Message from '@mapstore/framework/components/I18N/Message';
 import { Glyphicon } from 'react-bootstrap';
 import { mapInfoSelector } from '@mapstore/framework/selectors/map';
 import Loader from '@mapstore/framework/components/misc/Loader';
-
+import Button from '@js/components/Button';
 import { isLoggedIn } from '@mapstore/framework/selectors/security';
 import controls from '@mapstore/framework/reducers/controls';
 import gnresource from '@js/reducers/gnresource';
 import gnsave from '@js/reducers/gnsave';
 import gnsaveEpics from '@js/epics/gnsave';
 import { saveDirectContent } from '@js/actions/gnsave';
-
+import {
+    isNewResource,
+    canEditResource
+} from '@js/selectors/gnresource';
 /**
  * Plugin for Save modal
  * @name Save
@@ -65,6 +68,37 @@ const SavePlugin = connect(
     }))
 )(Save);
 
+function SaveButton({
+    enabled,
+    onClick
+}) {
+    return enabled
+        ? <Button
+            onClick={() => onClick()}
+        >
+            <Message msgId="save"/>
+        </Button>
+        : null
+    ;
+}
+
+const ConnectedSaveButton = connect(
+    createSelector(
+        isLoggedIn,
+        isNewResource,
+        canEditResource,
+        mapInfoSelector,
+        (loggedIn, isNew, canEdit, mapInfo) => ({
+            // we should add permList to map pages too
+            // currently the canEdit is located inside the map info
+            enabled: loggedIn && !isNew && (canEdit || mapInfo?.canEdit)
+        })
+    ),
+    {
+        onClick: saveDirectContent
+    }
+)((SaveButton));
+
 export default createPlugin('Save', {
     component: SavePlugin,
     containers: {
@@ -76,15 +110,20 @@ export default createPlugin('Save', {
             action: saveDirectContent,
             selector: createSelector(
                 isLoggedIn,
-                state => state?.gnresource?.isNew,
-                state => state?.gnresource?.permissions?.canEdit,
+                isNewResource,
+                canEditResource,
                 mapInfoSelector,
                 (loggedIn, isNew, canEdit, mapInfo) => ({
                     // we should add permList to map pages too
                     // currently the canEdit is located inside the map info
                     style: loggedIn && !isNew && (canEdit || mapInfo?.canEdit) ? {} : { display: 'none' }
                 })
             )
+        },
+        ActionNavbar: {
+            name: 'Save',
+            target: 'leftMenuItem',
+            Component: ConnectedSaveButton
         }
     },
     epics: {

diff --git a/geonode_mapstore_client/client/js/plugins/SaveAs.jsx b/geonode_mapstore_client/client/js/plugins/SaveAs.jsx
@@ -15,6 +15,7 @@ import Message from '@mapstore/framework/components/I18N/Message';
 import { Glyphicon } from 'react-bootstrap';
 import { mapInfoSelector } from '@mapstore/framework/selectors/map';
 import { isLoggedIn } from '@mapstore/framework/selectors/security';
+import Button from '@js/components/Button';
 import {
     saveContent,
     clearSave,
@@ -87,6 +88,33 @@ const SaveAsPlugin = connect(
     }
 )(SaveAs);
 
+function SaveAsButton({
+    enabled,
+    onClick
+}) {
+    return enabled
+        ? <Button
+            onClick={() => onClick()}
+        >
+            <Message msgId="saveAs"/>
+        </Button>
+        : null
+    ;
+}
+
+const ConnectedSaveAsButton = connect(
+    createSelector(
+        isLoggedIn,
+        (state) => state?.security?.user?.perms?.includes("add_resource"),
+        (loggedIn, canAddResource) => ({
+            enabled: loggedIn && canAddResource
+        })
+    ),
+    {
+        onClick: toggleControl.bind(null, 'saveAs', null)
+    }
+)((SaveAsButton));
+
 export default createPlugin('SaveAs', {
     component: SaveAsPlugin,
     containers: {
@@ -103,6 +131,11 @@ export default createPlugin('SaveAs', {
                     style: (loggedIn && canAddResource) ? {} : { display: 'none' }
                 })
             )
+        },
+        ActionNavbar: {
+            name: 'SaveAs',
+            target: 'leftMenuItem',
+            Component: ConnectedSaveAsButton
         }
     },
     epics: {

diff --git a/geonode_mapstore_client/client/js/plugins/Share.jsx b/geonode_mapstore_client/client/js/plugins/Share.jsx
@@ -18,9 +18,13 @@ import controls from '@mapstore/framework/reducers/controls';
 import ShareEmbed from '@mapstore/framework/components/share/ShareEmbed';
 import ShareLink from '@mapstore/framework/components/share/ShareLink';
 import ResizableModal from '@mapstore/framework/components/misc/ResizableModal';
+import Button from '@js/components/Button';
 import { mapInfoSelector } from '@mapstore/framework/selectors/map';
 import url from 'url';
-
+import {
+    isNewResource,
+    getResourceId
+} from '@js/selectors/gnresource';
 function getShareUrl({
     resourceId,
     pathTemplate
@@ -95,6 +99,34 @@ const SharePlugin = connect(
     }
 )(Share);
 
+function ShareButton({
+    enabled,
+    onClick
+}) {
+    return enabled
+        ? <Button
+            onClick={() => onClick()}
+        >
+            <Message msgId="share.title"/>
+        </Button>
+        : null
+    ;
+}
+
+const ConnectedShareButton = connect(
+    createSelector(
+        isNewResource,
+        getResourceId,
+        mapInfoSelector,
+        (isNew, resourceId, mapInfo) => ({
+            enabled: !isNew && (resourceId || mapInfo?.id)
+        })
+    ),
+    {
+        onClick: toggleControl.bind(null, 'share', null)
+    }
+)((ShareButton));
+
 export default createPlugin('Share', {
     component: SharePlugin,
     containers: {
@@ -105,13 +137,18 @@ export default createPlugin('Share', {
             icon: <Glyphicon glyph="share-alt"/>,
             action: toggleControl.bind(null, 'share', null),
             selector: createSelector(
-                state => state?.gnresource?.isNew,
-                state => state?.gnresource?.id,
+                isNewResource,
+                getResourceId,
                 mapInfoSelector,
                 (isNew, resourceId, mapInfo) => ({
                     style: !isNew && (resourceId || mapInfo?.id) ? { } : { display: 'none' }
                 })
             )
+        },
+        ActionNavbar: {
+            name: 'Share',
+            target: 'leftMenuItem',
+            Component: ConnectedShareButton
         }
     },
     epics: {},

diff --git a/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx b/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx
@@ -21,6 +21,7 @@ function ViewerLayout({
     const configuredItems = usePluginItems({ items, loadedPlugins });
     return (
         <div
+            className="gn-viewer-layout"
             style={{
                 position: 'fixed',
                 top: 0,
@@ -36,12 +37,20 @@ function ViewerLayout({
                     .map(({ Component, name }) => <Component key={name} />)}
             </header>
             <div
+                className="gn-viewer-layout-body"
                 style={{
                     display: 'flex',
                     width: '100%',
-                    flex: 1
+                    flex: 1,
+                    position: 'relative'
                 }}>
+                <div className="gn-viewer-left-column">
+                    {configuredItems
+                        .filter(({ target }) => target === 'leftColumn')
+                        .map(({ Component, name }) => <Component key={name} />)}
+                </div>
                 <div
+                    className="gn-viewer-layout-center"
                     style={{
                         flex: 1,
                         position: 'relative'
@@ -51,7 +60,7 @@ function ViewerLayout({
                         .filter(({ target }) => !target)
                         .map(({ Component, name }) => <Component key={name} />)}
                 </div>
-                <div>
+                <div className="gn-viewer-right-column">
                     {configuredItems
                         .filter(({ target }) => target === 'rightColumn')
                         .map(({ Component, name }) => <Component key={name} />)}