Homepage theme and configuration improvements (#76)

* add click out control on suggestion and theme improvements of homepage * add style and badge property to menu index * improve badge value parsing * update client bundle * update readme for homepage
GeoNode · Dec 23, 2020 · ad1a95d · ad1a95d
1 parent b2cb925
commit ad1a95d
Show file tree

Hide file tree

Showing 77 changed files with 443 additions and 79 deletions.
diff --git a/geonode_mapstore_client/client/README.md b/geonode_mapstore_client/client/README.md
@@ -21,25 +21,152 @@ The homepage configuration file is located in [localConfig.json](static/mapstore
 
 - @prop {object} `geoNodeApi`
 - @prop {object} `supportedLocales`
-- @prop {object} `geoNodeConfiguration`
-- @prop {object} geoNodeConfiguration.`theme`
-  - @prop {object} geoNodeConfiguration.`theme.variant`
-  - @prop {object} geoNodeConfiguration.`theme.navbar`
-  - @prop {object} geoNodeConfiguration.`theme.hero`
-  - @prop {object} geoNodeConfiguration.`theme...`
-- @prop {object} geoNodeConfiguration.`filters`
-  - @prop {object} geoNodeConfiguration.`filters.fields`
-  - @prop {object} geoNodeConfiguration.`filters.fields.options`
-  - @prop {object} geoNodeConfiguration.`filters.order`
-  - @prop {object} geoNodeConfiguration.`filters.order.defaultLabelId`
-  - @prop {object} geoNodeConfiguration.`filters.order.options`
-  - @prop {object} geoNodeConfiguration.`filters.extent`
-  - @prop {object} geoNodeConfiguration.`filters.extent.layers`
-  - @prop {object} geoNodeConfiguration.`filters.extent.style`
-- @prop {object} geoNodeConfiguration.`navbar`
-  - @prop {object} geoNodeConfiguration.`navbar.logo`
-  - @prop {object} geoNodeConfiguration.`navbar.items`
-- @prop {object} geoNodeConfiguration.`menu`
-  - @prop {object} geoNodeConfiguration.`menu.items`
-- @prop {object} geoNodeConfiguration.`footer`
-  - @prop {object} geoNodeConfiguration.`footer.items`
+- @prop {object} `geoNodeConfiguration` general configuration of the homepage app
+- @prop {object} geoNodeConfiguration.`theme` general theme configuration of the homepage app
+  - @prop {string} geoNodeConfiguration.`theme.variant` "light" or "dark"
+  - @prop {string} geoNodeConfiguration.`theme.color` main theme color (menu index)
+  - @prop {object} geoNodeConfiguration.`theme.navbar` navbar theme properties
+  - @prop {object} geoNodeConfiguration.`theme.navbar.style` a css style object to apply on the navbar container node
+  - @prop {object} geoNodeConfiguration.`theme.hero` hero image theme properties
+  - @prop {object} geoNodeConfiguration.`theme.hero.style` a css style object to apply on the hero image container node, use backgroundImage css property to apply a background image
+  - @prop {object} geoNodeConfiguration.`theme.jumbotron` jumbotron text content theme properties
+  - @prop {object} geoNodeConfiguration.`theme.jumbotron.style` a css style object to apply on the jumbotron container node
+  - @prop {object} geoNodeConfiguration.`theme.languageSelector` language selector theme properties
+  - @prop {boolean} geoNodeConfiguration.`theme.languageSelector.inline` shows languages as inline text if true, default false shows a dropdown
+  - @prop {object} geoNodeConfiguration.`theme.footer` footer theme properties
+  - @prop {string} geoNodeConfiguration.`theme.footer.color` footer text color (css variable --gn-footer-color)
+  - @prop {string} geoNodeConfiguration.`theme.footer.bg` footer background color (css variable --gn-footer-bg)
+  - @prop {object} geoNodeConfiguration.`theme.footer.link` theme for footer link
+  - @prop {string} geoNodeConfiguration.`theme.footer.link.color` footer link text color (css variable --gn-footer-link-color)
+  - @prop {string} geoNodeConfiguration.`theme.footer.link.hoverColor` footer link text color on hover (css variable --gn-footer-link-hover-color)
+  - @prop {object} geoNodeConfiguration.`theme.footer.style` a css style object to apply on the footer container node
+- @prop {object} geoNodeConfiguration.`filters` configuration of filter filter
+  - @prop {object} geoNodeConfiguration.`filters.fields` configuration of filter filter select inputs
+  - @prop {object} geoNodeConfiguration.`filters.fields.options` list of [filter object](#filter-object) options
+  - @prop {object} geoNodeConfiguration.`filters.order` configuration of order dropdown
+  - @prop {object} geoNodeConfiguration.`filters.order.defaultLabelId` default label to use for the order dropdown button
+  - @prop {object} geoNodeConfiguration.`filters.order.options` list of [order object](#order-object) options
+  - @prop {object} geoNodeConfiguration.`filters.extent` configuration of extent filter
+  - @prop {object} geoNodeConfiguration.`filters.extent.layers` a list of MapStore layers object used as extent background
+  - @prop {object} geoNodeConfiguration.`filters.extent.style` a MapStore vector style object
+- @prop {object} geoNodeConfiguration.`navbar` configuration of the brand navbar (top)
+  - @prop {object} geoNodeConfiguration.`navbar.logo` list of [logo items](#logo-item)
+  - @prop {object} geoNodeConfiguration.`navbar.items` list of [menu items object](#menu-item-object), right placement
+- @prop {object} geoNodeConfiguration.`menu` configuration of the main menu
+  - @prop {object} geoNodeConfiguration.`menu.items` list of [menu items object](#menu-item-object), left placement
+  - @prop {object} geoNodeConfiguration.`menu.leftItems` list of [menu items object](#menu-item-object), left placement
+  - @prop {object} geoNodeConfiguration.`menu.rightItems` list of [menu items object](#menu-item-object), right placement
+- @prop {object} geoNodeConfiguration.`footer` configuration of the footer
+  - @prop {object} geoNodeConfiguration.`footer.items` list of [menu items object](#menu-item-object)
+
+### Filter Object
+
+Filter object contains properties for a select input rendered inside the filter form. Configurations:
+
+- properties for select input with static options:
+```js
+{
+  "id": "title", // filter id used for the request filter{title.in}=
+  "labelId": "gnhome.labelId", // message id for select label
+  "placeholderId": "gnhome.placeholderId", // message id for select placeholder
+  "type": "select", // supported only 'select' inputs
+  "options": [ // list of string values
+      "Title 1",
+      "Title 2",
+      "Title 3",
+      "Title 4"
+  ]
+}
+```
+
+- properties for select input with suggestions request:
+```js
+{
+  "labelId": "gnhome.resourceTypes", // message id for select label
+  "placeholderId": "gnhome.resourceTypesPlaceholder", // message id for select placeholder
+  "type": "select", // supported only 'select' inputs
+  "suggestionsRequestKey": "resourceTypes" // available 'resourceTypes', 'categories', 'keywords', 'regions' or 'owners'
+}
+```
+
+### Order Object
+
+Order object contains properties for an entry of the order dropdown. Configuration:
+
+```js
+{
+  "labelId": "gnhome.aZ", // message id for the dropdown item
+  "value": "title" // value used in the sort filter
+}
+```
+### Logo Item
+
+Logo item contains properties for an image rendered in the top navbar. Configuration:
+
+```js
+{
+  "src": "path/to/image.png", // image source
+  "href": "#/", // logo href
+  "style": { // default css style object
+    "minHeight": 80
+  },
+  "sm": { // page size key small screen
+    "style": { // small screen css style object
+      "minHeight": 40
+    }
+  },
+  "md": { // page size key medium screen
+    "style": {} // medium screen css style object
+  },
+  "lg": { // page size key large screen
+    "style": {} // large screen css style object
+  }
+}
+```
+
+### Menu Item Object
+
+Menu item object contains properties for a list item rendered in a menu. Configuration:
+
+- type link
+```js
+{
+  "labelId": "gnhome.register", // label message id
+  "type": "link", // one of 'link', 'dropdown', 'divider' or 'filter'
+  "href": "/account/signup/?next=/", // link href
+  "authenticated": false, // true shows the item only when user authenticated while false only for anonymous user, if undefined the item is always visible
+  "badge": "${layersTotalCount}", // (menu configuration only) counter badge. variable available: layersTotalCount, mapsTotalCount, documentsTotalCount, geoappsTotalCount or geostoriesTotalCount
+  "style": {} // (menu configuration only) css style object for a specific menu item
+}
+```
+
+- type dropdown
+```js
+{
+  "labelId": "gnhome.register", // label message id
+  "type": "dropdown", // one of 'link', 'dropdown', 'divider' or 'filter'
+  "authenticated": true, // true shows the item only when user authenticated while false only for anonymous user, if undefined the item is always visible
+  "items": [] // menu items of type link or divider
+}
+```
+
+- type divider
+```js
+{
+  "type": "divider" // one of 'link', 'dropdown', 'divider' or 'filter'
+}
+```
+
+- type filter
+```js
+{
+  "type": "filter", // one of 'link', 'dropdown', 'divider' or 'filter'
+  "id": "landuse", // unique id of the filter
+  "labelId": "gnhome.customFilterExample", // label message id
+  "query": { // query filter to use
+    "filter{regions.name.in}": [
+        "Global"
+    ]
+  }
+}
+```
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/index.js b/geonode_mapstore_client/client/js/api/geonode/v2/index.js
@@ -34,7 +34,7 @@ let endpoints = {
 
 const RESOURCES = 'resources';
 const DOCUMENTS = 'documents';
-// const LAYERS = 'layers';
+const LAYERS = 'layers';
 const MAPS = 'maps';
 const GEOAPPS = 'geoapps';
 const GEOSTORIES = 'geostories';
@@ -307,6 +307,41 @@ export const getResourceTypes = ({}, filterKey = 'resource-types') => {
         });
 };
 
+export const getResourcesTotalCount = () => {
+    const params = {
+        page_size: 1
+    };
+    const types = [
+        DOCUMENTS,
+        LAYERS,
+        MAPS,
+        GEOSTORIES,
+        GEOAPPS
+    ];
+    return axios.all(
+        types.map((type) =>
+            axios.get(parseDevHostname(endpoints[type]), { params })
+                .then(({ data }) => data.total)
+                .catch(() => null)
+        )
+    )
+        .then(([
+            documentsTotalCount,
+            layersTotalCount,
+            mapsTotalCount,
+            geostoriesTotalCount,
+            geoappsTotalCount
+        ]) => {
+            return {
+                documentsTotalCount,
+                layersTotalCount,
+                mapsTotalCount,
+                geostoriesTotalCount,
+                geoappsTotalCount
+            };
+        });
+};
+
 export default {
     getEndpoints,
     getResources,
@@ -319,5 +354,6 @@ export default {
     getUserByPk,
     getAccountInfo,
     getConfiguration,
-    getResourceTypes
+    getResourceTypes,
+    getResourcesTotalCount
 };
diff --git a/geonode_mapstore_client/client/js/apps/gn-home.jsx b/geonode_mapstore_client/client/js/apps/gn-home.jsx
@@ -12,7 +12,8 @@ import MainLoader from '@js/components/app/MainLoader';
 import { connect } from 'react-redux';
 import {
     setConfigProp,
-    setLocalConfigurationFile
+    setLocalConfigurationFile,
+    getConfigProp
 } from '@mapstore/framework/utils/ConfigUtils';
 import {
     getSupportedLocales,
@@ -31,7 +32,8 @@ import gnlocaleEpics from '@js/epics/gnlocale';
 import {
     getConfiguration,
     getEndpoints,
-    getAccountInfo
+    getAccountInfo,
+    getResourcesTotalCount
 } from '@js/api/geonode/v2';
 
 import axios from '@mapstore/framework/libs/ajax';
@@ -100,9 +102,10 @@ axios.interceptors.request.use(
 Promise.all([
     getConfiguration('/static/mapstore/configs/localConfig.json'),
     getAccountInfo(),
+    getResourcesTotalCount(),
     getEndpoints()
 ])
-    .then(([localConfig, user]) => {
+    .then(([localConfig, user, resourcesTotalCount]) => {
         const {
             geoNodeConfiguration,
             supportedLocales: defaultSupportedLocales,
@@ -122,6 +125,8 @@ Promise.all([
         setConfigProp('locale', locale);
         const menuFilters = geoNodeConfiguration?.menu?.items?.filter(({ type }) => type === 'filter');
         setConfigProp('menuFilters', menuFilters);
+        const geoNodeResourcesInfo = getConfigProp('geoNodeResourcesInfo') || {};
+        setConfigProp('geoNodeResourcesInfo', { ...geoNodeResourcesInfo, ...resourcesTotalCount });
         const securityInitialState = user?.info?.access_token
             && {
                 security: {

diff --git a/geonode_mapstore_client/client/js/components/home/FilterForm.jsx b/geonode_mapstore_client/client/js/components/home/FilterForm.jsx
@@ -61,6 +61,7 @@ function FilterForm({
 
     function handleApply() {
         onChange(values);
+        onClose();
     }
 
     function handleClear() {

diff --git a/geonode_mapstore_client/client/js/components/home/Footer.jsx b/geonode_mapstore_client/client/js/components/home/Footer.jsx
@@ -29,7 +29,8 @@ function FooterItem({
 
 const Footer = forwardRef(({
     footerItems,
-    user
+    user,
+    style
 }, ref) => {
     const state = {
         user
@@ -38,6 +39,7 @@ const Footer = forwardRef(({
         <footer
             ref={ref}
             className="gn-footer"
+            style={style}
         >
             <div>
                 <ul>