Maps catalog page

web/client/actions/__tests__/mapcatalog-test.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2020, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import expect from 'expect';
+
+import {
+    deleteMap, DELETE_MAP,
+    saveMap, SAVE_MAP,
+    triggerReload, TRIGGER_RELOAD
+} from '../mapcatalog';
+
+describe('mapcatalog actions', () => {
+    it('deleteMap', () => {
+        const retval = deleteMap('map');
+        expect(retval.type).toBe(DELETE_MAP);
+        expect(retval.resource).toBe('map');
+    });
+    it('saveMap', () => {
+        const retval = saveMap('map');
+        expect(retval.type).toBe(SAVE_MAP);
+        expect(retval.resource).toBe('map');
+    });
+    it('triggerReload', () => {
+        const retval = triggerReload();
+        expect(retval.type).toBe(TRIGGER_RELOAD);
+    });
+});

web/client/actions/mapcatalog.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2020, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const DELETE_MAP = 'MAPCATALOG:DELETE_MAP';
+export const SAVE_MAP = 'MAPCATALOG:SAVE_MAP';
+export const TRIGGER_RELOAD = 'MAPCATALOG:TRIGGER_RELOAD';
+
+export const deleteMap = (resource) => ({
+    type: DELETE_MAP,
+    resource
+});
+
+export const saveMap = (resource) => ({
+    type: SAVE_MAP,
+    resource
+});
+
+export const triggerReload  = () => ({
+    type: TRIGGER_RELOAD
+});

web/client/components/mapcatalog/MapCatalogPanel.jsx

@@ -0,0 +1,168 @@
+/**
+ * Copyright 2020, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Rx from 'rxjs';
+import { isArray, zip } from 'lodash';
+import { compose, getContext } from 'recompose';
+import { Glyphicon } from 'react-bootstrap';
+
+import { getResource } from '../../api/persistence';
+import Api from '../../api/GeoStoreDAO';
+
+import withInfiniteScroll from '../misc/enhancers/infiniteScroll/withInfiniteScroll';
+import withShareTool from '../resources/enhancers/withShareTool';
+import withFilter from './enhancers/withFilter';
+import withDelete from './enhancers/withDelete';
+import withEdit from './enhancers/withEdit';
+import LocaleUtils from '../../utils/LocaleUtils';
+import Toolbar from '../misc/toolbar/Toolbar';
+import Filter from '../misc/Filter';
+import MapCatalog from '../maps/MapCatalog';
+
+const getContextNames = ({results, ...other}) => {
+    const maps = isArray(results) ? results : (results === "" ? [] : [results]);
+    return maps.length === 0 ?
+        Rx.Observable.of({results, ...other}) :
+        Rx.Observable.forkJoin(
+            maps.map(({context}) => context ?
+                getResource(context, {includeAttributes: false, withData: false, withPermissions: false})
+                    .switchMap(resource => Rx.Observable.of(resource.name)) :
+                Rx.Observable.of(null))
+        ).map(contextNames => ({
+            results: zip(maps, contextNames).map(
+                ([curMap, contextName]) => ({...curMap, contextName})),
+            ...other
+        }));
+};
+
+const searchMaps = ({searchText, opts}) => Rx.Observable.defer(() => Api.getResourcesByCategory(
+    'MAP',
+    searchText || '*',
+    opts
+)).switchMap(response => getContextNames(response))
+    .map(result => ({
+        items: result.results,
+        total: result.totalCount,
+        loading: false
+    })).catch(() => Rx.Observable.of({
+        items: [],
+        total: 0,
+        loading: false
+    }));
+
+const loadPage = ({searchText = '', limit = 12} = {}, page = 0) => searchMaps({
+    searchText,
+    opts: {
+        params: {
+            includeAttributes: true,
+            start: page * limit,
+            limit
+        }
+    }
+});
+
+const MapCatalogPanel = ({
+    loading,
+    mapType,
+    items = [],
+    filterText,
+    onFilter = () => {},
+    onDelete = () => {},
+    onEdit = () => {},
+    onShare = () => {},
+    messages = {},
+    router = {}
+}) => {
+    const mapToItem = (map) => ({
+        title: map.name,
+        description: map.description,
+        tools: <Toolbar
+            btnDefaultProps={{
+                className: 'square-button-md'
+            }}
+            buttons={[{
+                glyph: 'trash',
+                bsStyle: 'primary',
+                tooltipId: 'mapCatalog.tooltips.delete',
+                visible: map.canDelete,
+                onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(map);
+                }
+            }, {
+                glyph: 'wrench',
+                bsStyle: 'primary',
+                tooltipId: 'mapCatalog.tooltips.edit',
+                visible: map.canEdit,
+                onClick: (e) => {
+                    e.stopPropagation();
+                    onEdit(map);
+                }
+            }, {
+                glyph: 'share-alt',
+                bsStyle: 'primary',
+                className: 'square-button-md',
+                tooltipId: 'mapCatalog.tooltips.share',
+                onClick: (e) => {
+                    e.stopPropagation();
+                    onShare(map);
+                }
+            }]}/>,
+        preview:
+            <div className="map-catalog-preview">
+                {map.thumbnail && map.thumbnail !== 'NODATA' ?
+                    <img src={decodeURIComponent(map.thumbnail)}/> :
+                    <Glyphicon glyph="1-map"/>}
+            </div>,
+        onClick: () => router.history.push(map.contextName ?
+            "/context/" + map.contextName + "/" + map.id :
+            "/viewer/" + mapType + "/" + map.id
+        )
+    });
+
+    return (
+        <div className="map-catalog-panel">
+            <MapCatalog
+                loading={loading}
+                loaderProps={{
+                    width: 480,
+                    height: 480
+                }}
+                header={<Filter
+                    filterText={filterText}
+                    filterPlaceholder={LocaleUtils.getMessageById(messages, 'mapCatalog.filterPlaceholder')}
+                    onFilter={onFilter}/>
+                }
+                items={items.map(mapToItem)}/>
+        </div>
+    );
+};
+
+export default compose(
+    getContext({
+        messages: PropTypes.object,
+        router: PropTypes.object
+    }),
+    withInfiniteScroll({
+        loadPage,
+        loadMoreStreamOptions: {
+            initialStreamDebounce: 300
+        },
+        scrollSpyOptions: {
+            querySelector: '.map-catalog-panel > .map-catalog > .ms2-border-layout-body',
+            pageSize: 12
+        },
+        hasMore: ({items = [], total = 0}) => items.length < total
+    }),
+    withFilter,
+    withDelete,
+    withEdit,
+    withShareTool
+)(MapCatalogPanel);

web/client/components/mapcatalog/__tests__/MapCatalogPanel-test.jsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2019, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import expect from 'expect';
+
+import MapCatalogPanel from '../MapCatalogPanel';
+
+describe('MapCatalogPanel component', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('MapCatalogPanel with defaults', () => {
+        ReactDOM.render(<MapCatalogPanel/>, document.getElementById('container'));
+        const rootDiv = document.getElementsByClassName('map-catalog-panel')[0];
+        expect(rootDiv).toExist();
+    });
+});

web/client/components/mapcatalog/enhancers/withDelete.jsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2020, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import Message from '../../I18N/Message';
+import ConfirmDialog from '../../misc/ConfirmDialog';
+
+export default (Component) => ({
+    onDelete = () => {},
+    ...props
+}) => {
+    const [showConfirm, setShowConfirm] = React.useState(false);
+    const [resourceToDelete, setResourceToDelete] = React.useState();
+
+    return (
+        <>
+            <Component
+                {...props}
+                onDelete={resource => {
+                    setResourceToDelete(resource);
+                    setShowConfirm(true);
+                }}/>
+            <ConfirmDialog
+                draggable={false}
+                modal
+                show={showConfirm}
+                onClose={() => {
+                    setResourceToDelete();
+                    setShowConfirm(false);
+                }}
+                onConfirm={() => {
+                    setShowConfirm(false);
+                    onDelete(resourceToDelete);
+                    setResourceToDelete();
+                }}
+                confirmButtonBSStyle="default"
+                confirmButtonContent={<Message msgId="confirm"/>}
+                closeText={<Message msgId="cancel"/>}
+                closeGlyph="1-close">
+                <Message msgId="mapCatalog.deleteConfirmContent" msgParams={{mapName: resourceToDelete?.name}}/>
+            </ConfirmDialog>
+        </>
+    );
+};

web/client/components/mapcatalog/enhancers/withEdit.jsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright 2020, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import SaveModal from '../../resources/modals/Save';
+import handleSaveModal from '../../resources/modals/enhancers/handleSaveModal';
+
+const SaveDialog = handleSaveModal(SaveModal);
+
+export default (Component) => ({
+    user,
+    saveDialogTitle = 'resources.resource.editResource',
+    onSave = () => {},
+    ...props
+}) => {
+    const [showSaveDialog, setShowSaveDialog] = React.useState(false);
+    const [resource, setResource] = React.useState();
+
+    return (
+        <>
+            <Component
+                {...props}
+                onEdit={resourceToEdit => {
+                    setResource(resourceToEdit);
+                    setShowSaveDialog(true);
+                }}/>
+            <SaveDialog
+                show={showSaveDialog}
+                user={user}
+                resource={resource && {
+                    ...resource,
+                    ...(resource.thumbnail ? {
+                        attributes: {
+                            ...(resource.attributes || {}),
+                            thumbnail: resource.thumbnail,
+                            context: resource.context
+                        }
+                    } : {})}}
+                clickOutEnabled={false}
+                category="MAP"
+                title={saveDialogTitle}
+                onSave={resourceToSave => {
+                    onSave(resourceToSave);
+                    setResource();
+                    setShowSaveDialog(false);
+                }}
+                onClose={() => {
+                    setResource();
+                    setShowSaveDialog(false);
+                }}/>
+        </>
+    );
+};