Fixes #2827 Add featured maps plugin

web/client/api/GeoStoreDAO.js

@@ -10,7 +10,8 @@ const _ = require('lodash');
 const assign = require('object-assign');
 const uuidv1 = require('uuid/v1');
 const ConfigUtils = require('../utils/ConfigUtils');
-
+const xml2js = require('xml2js');
+const xmlBuilder = new xml2js.Builder();
 const {registerErrorParser} = require('../utils/LocaleUtils');
 
 let parseOptions = (opts) => opts;
@@ -75,7 +76,7 @@ const Api = {
     },
     getResourcesByCategory: function(category, query, options) {
         const q = query || "*";
-        const url = "extjs/search/category/" + category + "/*" + q + "*/thumbnail,details"; // comma-separated list of wanted attributes
+        const url = "extjs/search/category/" + category + "/*" + q + "*/thumbnail,details,featured"; // comma-separated list of wanted attributes
         return axios.get(url, this.addBaseUrl(parseOptions(options))).then(function(response) {return response.data; });
     },
     getUserDetails: function(username, password, options) {
@@ -371,6 +372,47 @@ const Api = {
             return response.data;
         });
     },
+    /**
+     * send a request to /extjs/search/list
+     * @param  {object} filters
+     * @param  {object} options additional axios options
+     * @return {object}
+     * @example
+     *
+     *  const filters = {
+     *      AND: {
+     *          ATTRIBUTE: [
+     *              {
+     *                  name: ['featured'],
+     *                  operator: ['EQUAL_TO'],
+     *                  type: ['STRING'],
+     *                  value: [true]
+     *              }
+     *          ]
+     *      }
+     *  }
+     *
+     *  searchListByAttributes(filters)
+     *      .then(results => results)
+     *      .catch(error => error);
+     *
+     */
+    searchListByAttributes: (filter, options) => {
+        const url = "/extjs/search/list";
+        const xmlFilter = xmlBuilder.buildObject(filter);
+        return axios.post(
+            url,
+            xmlFilter,
+            Api.addBaseUrl({
+                ...parseOptions(options),
+                headers: {
+                   "Content-Type": "application/xml",
+                   "Accept": "application/json"
+                }
+            })
+        )
+        .then(response => response.data);
+    },
     utils: {
         /**
          * initialize User with newPassword and UUID

web/client/components/I18N/FlagButton.jsx

@@ -1,16 +1,15 @@
-
-const PropTypes = require('prop-types');
-/**
+/*
  * Copyright 2015, 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.
  */
-var React = require('react');
-var {Button, Tooltip} = require('react-bootstrap');
+const React = require('react');
+const PropTypes = require('prop-types');
+const {Button, Tooltip} = require('react-bootstrap');
 const OverlayTrigger = require('../misc/OverlayTrigger');
-var LocaleUtils = require('../../utils/LocaleUtils');
+const LocaleUtils = require('../../utils/LocaleUtils');
 
 
 class LangBar extends React.Component {
@@ -27,7 +26,8 @@ class LangBar extends React.Component {
     static defaultProps = {
         locales: LocaleUtils.getSupportedLocales(),
         code: 'en-US',
-        onLanguageChange: function() {}
+        onLanguageChange: function() {},
+        onFlagSelected: () => {}
     };
 
     render() {

web/client/components/I18N/LangBar.jsx

@@ -1,56 +1,77 @@
-
-var PropTypes = require('prop-types');
-/**
+/*
  * Copyright 2015, 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.
  */
-var React = require('react');
-var {ButtonGroup} = require('react-bootstrap');
-var LocaleUtils = require('../../utils/LocaleUtils');
-var FlagButton = require('./FlagButton');
+const React = require('react');
+const PropTypes = require('prop-types');
+const {DropdownButton, MenuItem, ButtonGroup} = require('react-bootstrap');
+const {head} = require('lodash');
+const LocaleUtils = require('../../utils/LocaleUtils');
+const FlagButton = require('./FlagButton');
 
 class LangBar extends React.Component {
     static propTypes = {
         id: PropTypes.string,
+        className: PropTypes.string,
         locales: PropTypes.object,
         currentLocale: PropTypes.string,
-        onLanguageChange: PropTypes.func
+        onLanguageChange: PropTypes.func,
+        dropdown: PropTypes.bool
     };
 
     static defaultProps = {
-        id: "mapstore-langselector",
+        id: 'mapstore-langselector',
+        className: 'mapstore-langselector',
         locales: {},
         currentLocale: 'en-US',
         onLanguageChange: function() {}
     };
 
     render() {
-        var code;
-        var label;
-        var list = [];
-        let locales = LocaleUtils.getSupportedLocales();
-        for (let lang in locales) {
-            if (locales.hasOwnProperty(lang)) {
-                code = locales[lang].code;
-                label = locales[lang].description;
-                list.push(
+        const locales = LocaleUtils.getSupportedLocales();
+        const currentLanguage = head(Object.keys(locales).filter(lang => locales[lang].code === this.props.currentLocale));
+        return this.props.dropdown ? (
+            <div
+                className={this.props.className}>
+                <DropdownButton
+                    noCaret
+                    pullRight
+                    id={this.props.id}
+                    title={
+                        <FlagButton
+                            key={currentLanguage}
+                            code={this.props.currentLocale}
+                            label={locales[currentLanguage] && locales[currentLanguage].description}
+                            lang={currentLanguage}/>
+                        }>
+                    {Object.keys(locales).filter(lang => locales[lang].code !== this.props.currentLocale).map(lang =>
+                        <MenuItem key={lang} eventKey={lang} onClick={() => this.props.onLanguageChange(locales[lang].code)}>
+                            <FlagButton
+                                key={lang}
+                                code={locales[lang].code}
+                                label={locales[lang].description}
+                                lang={lang}
+                                active={locales[lang].code === this.props.currentLocale}
+                        />{' ' + locales[lang].description}</MenuItem>)
+                    }
+                </DropdownButton>
+            </div>
+        ) : (
+            <ButtonGroup id={this.props.id} type="select" bsSize="small">
+                {Object.keys(locales).map(lang => (
                     <FlagButton
                         key={lang}
-                        code={code}
-                        label={label}
+                        code={locales[lang].code}
+                        label={locales[lang].description}
                         lang={lang}
-                        active={code === this.props.currentLocale}
+                        active={locales[lang].code === this.props.currentLocale}
                         onFlagSelected={this.props.onLanguageChange}
-                        />);
-            }
-        }
-        return (
-                <ButtonGroup id={this.props.id} type="select" bsSize="small">
-                    {list}
-                </ButtonGroup>
+                        />
+                ))}
+            </ButtonGroup>
         );
     }
 }

web/client/components/manager/users/__tests__/GroupGrid-test.jsx

@@ -53,7 +53,7 @@ describe("Test GroupGrid Component", () => {
         expect(card.length).toBe(1);
         let buttons = ReactTestUtils.scryRenderedDOMComponentsWithClass(
           comp,
-          "gridcard-button"
+          "square-button-md"
         );
         ReactTestUtils.Simulate.click(buttons[0]);
         ReactTestUtils.Simulate.click(buttons[1]);
@@ -67,7 +67,7 @@ describe("Test GroupGrid Component", () => {
         expect(domNode.className).toBe("container-fluid");
         let buttons = ReactTestUtils.scryRenderedDOMComponentsWithClass(
           comp,
-          "gridcard-button"
+          "square-button-md"
         );
         expect(buttons.length).toBe(0);
     });
@@ -85,7 +85,7 @@ describe("Test GroupGrid Component", () => {
         expect(domNode.className).toBe("container-fluid");
         let buttons = ReactTestUtils.scryRenderedDOMComponentsWithClass(
           comp,
-          "gridcard-button"
+          "square-button-md"
         );
         expect(buttons.length).toBe(2);
         ReactTestUtils.Simulate.click(buttons[0]);

web/client/components/maps/MapCard.jsx

@@ -12,9 +12,6 @@ const GridCard = require('../misc/GridCard');
 const thumbUrl = require('./style/default.jpg');
 const assign = require('object-assign');
 const ConfirmModal = require('./modals/ConfirmModal');
-const LocaleUtils = require('../../utils/LocaleUtils');
-
-require("./style/mapcard.css");
 
 class MapCard extends React.Component {
     static propTypes = {
@@ -26,7 +23,8 @@ class MapCard extends React.Component {
         // CALLBACKS
         viewerUrl: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
         onEdit: PropTypes.func,
-        onMapDelete: PropTypes.func
+        onMapDelete: PropTypes.func,
+        onUpdateAttribute: PropTypes.func
     };
 
     static contextTypes = {
@@ -45,7 +43,8 @@ class MapCard extends React.Component {
         },
         // CALLBACKS
         onMapDelete: ()=> {},
-        onEdit: ()=> {}
+        onEdit: () => {},
+        onUpdateAttribute: () => {}
     };
 
     onEdit = (map, openModalProperties) => {
@@ -76,37 +75,53 @@ class MapCard extends React.Component {
     };
 
     render() {
-        let availableAction = [];
-        if (this.props.map.canEdit === true) {
-            availableAction.push(
-                {
-                    onClick: (evt) => {this.stopPropagate(evt); this.displayDeleteDialog(); },
-                    glyph: "trash",
-                    disabled: this.props.map.deleting,
-                    loading: this.props.map.deleting,
-                    tooltip: LocaleUtils.getMessageById(this.context.messages, "manager.deleteMap")
-                }, {
-                    onClick: (evt) => {
-                        this.stopPropagate(evt);
-                        this.onEdit(this.props.map, true);
-                    },
-                    glyph: "wrench",
-                    disabled: this.props.map.updating,
-                    loading: this.props.map.updating,
-                    tooltip: LocaleUtils.getMessageById(this.context.messages, "manager.editMapMetadata")
-                });
-        }
-        if (this.props.map.details && this.props.map.details !== "NODATA") {
-            availableAction.push({
-                onClick: (evt) => {
+
+        const isFeatured = this.props.map && this.props.map.featured === 'true' || this.props.map.featured === 'added';
+        const availableAction = [
+            {
+                visible: this.props.map.canEdit === true,
+                glyph: 'trash',
+                disabled: this.props.map.deleting,
+                loading: this.props.map.deleting,
+                tooltipId: 'manager.deleteMap',
+                onClick: evt => {
+                    this.stopPropagate(evt);
+                    this.displayDeleteDialog();
+                }
+            },
+            {
+                visible: this.props.map.canEdit === true,
+                glyph: 'wrench',
+                disabled: this.props.map.updating,
+                loading: this.props.map.updating,
+                tooltipId: 'manager.editMapMetadata',
+                onClick: evt => {
+                    this.stopPropagate(evt);
+                    this.onEdit(this.props.map, true);
+                }
+            },
+            {
+                visible: !!(this.props.map.details && this.props.map.details !== 'NODATA'),
+                glyph: 'sheet',
+                tooltipId: 'map.details.show',
+                onClick: evt => {
                     this.stopPropagate(evt);
                     this.onEdit(this.props.map, false);
                     this.props.detailsSheetActions.onToggleDetailsSheet(true);
-                },
-                glyph: "sheet",
-                tooltip: LocaleUtils.getMessageById(this.context.messages, "map.details.show")
-            });
-        }
+                }
+            },
+            {
+                visible: !!(this.props.map.canEdit === true && this.props.map.featuredEnabled),
+                glyph: isFeatured ? 'star' : 'star-empty',
+                bsStyle: isFeatured ? 'success' : 'primary',
+                tooltipId: isFeatured ? 'maps.removeFromFeaturedMaps' : 'maps.addToFeaturedMaps',
+                onClick: evt => {
+                    this.stopPropagate(evt);
+                    this.props.onUpdateAttribute(this.props.map.id, 'featured', !isFeatured);
+                }
+            }
+        ];
+
         return (
            <GridCard className="map-thumb" style={this.getCardStyle()} header={this.props.map.title || this.props.map.name}
                 actions={availableAction} onClick={this.onClick}