regione-piemonte#845: Card loader added (regione-piemonte#858)

* regione-piemonte#845: Card loader added * Updated test cases
dsuren1 · Mar 2, 2021 · 48e1ba4 · 48e1ba4
1 parent a254b4c
commit 48e1ba4
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 10 deletions.
diff --git a/frontend/assets/application/conoscenze_ambientali/css/skin-mappa.css b/frontend/assets/application/conoscenze_ambientali/css/skin-mappa.css
@@ -934,3 +934,7 @@ header.navbar h1 a span {
 #fullscreen-container, #qgis-container .featuregrid-container .ftheader{
     color: #017f4f;
 }
+
+.rc-tree-bottom_docu + span > span.rc-tree-title {
+    cursor: pointer;
+}
diff --git a/frontend/js/actions/__tests__/card-test.js b/frontend/js/actions/__tests__/card-test.js
@@ -9,6 +9,7 @@
 const expect = require('expect');
 const {
     CARD_TEMPLATE_LOADED,
+    CARD_TEMPLATE_LOADING,
     CARD_TEMPLATE_LOAD_ERROR,
     SELECT_SECTION,
     ACTIVE_SECTION,
@@ -25,7 +26,11 @@ describe('Test correctness of the card template actions', () => {
         loadCardTemplate('base/js/test-resources/template-test.config', 'modelconfig/url', 'wfs/url')((e) => {
             try {
                 expect(e).toExist();
-                expect(e).withArgs('templateConfigURL', 'modelConfigURL', 'wfsUrl');
+                if (e.type) {
+                    expect(e.type).toBe(CARD_TEMPLATE_LOADING);
+                } else {
+                    expect(e).withArgs('templateConfigURL', 'modelConfigURL', 'wfsUrl');
+                }
                 done();
             } catch (ex) {
                 done(ex);
@@ -53,7 +58,7 @@ describe('Test correctness of the card template actions', () => {
         loadCardData(template, 'base/js/test-resources/testWFSModel.xml')((e) => {
             try {
                 expect(e).toExist();
-                expect(e.type).toBe(CARD_TEMPLATE_LOADED);
+                expect([CARD_TEMPLATE_LOADED, CARD_TEMPLATE_LOADING].includes(e.type)).toBe(true);
                 done();
             } catch (ex) {
                 done(ex);
@@ -65,7 +70,7 @@ describe('Test correctness of the card template actions', () => {
         loadCardTemplate('base/js/test-resources/template-test.conf')((e) => {
             try {
                 expect(e).toExist();
-                expect(e.type).toBe(CARD_TEMPLATE_LOAD_ERROR);
+                expect([CARD_TEMPLATE_LOADING, CARD_TEMPLATE_LOAD_ERROR].includes(e.type)).toBe(true);
                 done();
             } catch (ex) {
                 done(ex);

diff --git a/frontend/js/actions/card.js b/frontend/js/actions/card.js
@@ -9,6 +9,7 @@ const axios = require('@mapstore/libs/ajax');
 const ConfigUtils = require('../../MapStore2/web/client/utils/ConfigUtils');
 
 const CARD_TEMPLATE_LOADED = 'CARD_TEMPLATE_LOADED';
+const CARD_TEMPLATE_LOADING = 'CARD_TEMPLATE_LOADING';
 const CARD_TEMPLATE_LOAD_ERROR = 'CARD_TEMPLATE_LOAD_ERROR';
 const SELECT_SECTION = 'SELECT_SECTION';
 const ACTIVE_SECTION = 'ACTIVE_SECTION';
@@ -61,9 +62,16 @@ function activateSection(section) {
     };
 }
 
+function cardLoading() {
+    return {
+        type: CARD_TEMPLATE_LOADING
+    };
+}
+
 function loadCardData(template, wfsUrl, params = {}) {
     let {url} = ConfigUtils.setUrlPlaceholders({url: wfsUrl});
     return (dispatch) => {
+        dispatch(cardLoading());
         return axios.get(url).then((response) => {
             // let model = TemplateUtils.getModel(response.data, modelConfig);
             dispatch(configureCard(template, response.data, params));
@@ -93,6 +101,7 @@ function loadCardData(template, wfsUrl, params = {}) {
 
 function loadCardTemplate(templateConfigURL, wfsUrl, params = {}) {
     return (dispatch) => {
+        dispatch(cardLoading());
         return axios.get(templateConfigURL).then((response) => {
             let template = response.data;
             if (wfsUrl) {
@@ -124,6 +133,7 @@ function selectRows(tableId, rows) {
 
 module.exports = {
     CARD_TEMPLATE_LOADED,
+    CARD_TEMPLATE_LOADING,
     CARD_TEMPLATE_LOAD_ERROR,
     SELECT_SECTION,
     ACTIVE_SECTION,
@@ -139,6 +149,7 @@ module.exports = {
     activateSection,
     selectRows,
     generatePDF,
-    mapImageReady
+    mapImageReady,
+    cardLoading
     // setSiraImpiantoModel
 };
diff --git a/frontend/js/actions/siradec.js b/frontend/js/actions/siradec.js
@@ -7,6 +7,7 @@
  */
 const axios = require('@mapstore/libs/ajax');
 const {addLayer} = require('@mapstore/actions/layers');
+const {cardLoading} = require('../actions/card');
 const {setSiraControl} = require('./controls');
 
 const WAITING_FOR_CONFIG = 'WAITING_FOR_CONFIG';
@@ -212,6 +213,7 @@ function loadFeatureTypeConfig(configUrl, params, featureType, activate = false,
     return (dispatch, getState) => {
         const { userprofile} = getState();
         dispatch(configurationLoading(loading));
+        loadCardTemplate && dispatch(cardLoading());
         return axios.get(url).then((response) => {
             let config = response.data;
             if (typeof config !== "object") {

diff --git a/frontend/js/components/Header.jsx b/frontend/js/components/Header.jsx
@@ -71,7 +71,7 @@ const LoginNav = connect((state) => ({
     showAccountInfo: false,
     showPasswordChange: false,
     showLogout: true,
-    className: cs("btn btn-default btn-login dropdown-toggle sira-login", {'login-success': !isEmpty(state.userprofile.user)})
+    className: cs("btn btn-default btn-login dropdown-toggle sira-login", {'login-success': !isEmpty(state.userprofile.user?.name)})
 }), {
     onShowLogin: showLoginPanel,
     onLogout: (e) => {

diff --git a/frontend/js/components/template/Card.jsx b/frontend/js/components/template/Card.jsx
@@ -26,6 +26,7 @@ const mapUtils = require('@mapstore/utils/MapUtils');
 const {configureMultiLayerSelection, setCurrentFeatureRowData} = require('../../actions/featuregrid');
 const CoordinatesUtils = require('@mapstore/utils/CoordinatesUtils');
 const {changeMapView} = require('@mapstore/actions/map');
+const Spinner = require('react-spinkit');
 
 const Draggable = require('react-draggable');
 const SiraTree = require('../tree/SiraTree').default;
@@ -129,6 +130,16 @@ class Card extends React.Component {
         }), {});
     };
 
+    renderCardLoadingTemplate = () => (
+        <div style={{
+            position: "fixed",
+            width: "60px",
+            top: "50%",
+            left: "50%"}}>
+            <Spinner style={{width: "60px"}} spinnerName="three-bounce" noFadeIn/>
+        </div>
+    );
+
     renderCard = () => {
         const {maxWidth, maxHeight} = getWindowSize();
         const xml = this.props.card.xml;
@@ -148,8 +159,9 @@ class Card extends React.Component {
 
         const Template = (
             <div className="scheda-sira">
-                <TemplateSira template={this.props.card.template} model={model}/>
-                <div id="card-btn-group" style={{paddingTop: 4}}>
+                {this.props.card.loadingCardTemplate
+                    ? this.renderCardLoadingTemplate() : <TemplateSira template={this.props.card.template} model={model}/>}
+                <div id="card-btn-group" style={{paddingTop: 4, display: this.props.card.loadingCardTemplate ? 'none' : 'block' }}>
                     <Button id="multiLayerSelect" style={{display: showMLSButton ? 'inline-block' : 'none'}} onClick={this.onClickMLS}>
                         <img src={img} width={16} alt=""/>
                     </Button>

diff --git a/frontend/js/components/template/card.css b/frontend/js/components/template/card.css
@@ -8,6 +8,7 @@
     margin: 8px;
     overflow-x:hidden;
     box-shadow: 0 0 5px 1px rgba(94,94,94,1);
+    background-color: #ffffff;
 }
 .scheda-sira .panel-primary {
 	margin-bottom: 0px;

diff --git a/frontend/js/components/tree/TreeData.jsx b/frontend/js/components/tree/TreeData.jsx
@@ -65,7 +65,7 @@ class TreeData extends React.Component {
 
     onSelect = (selectedKeys, info) => {
         let selectedData = this.searchKey(this.props.treeData[0], info.node.props.eventKey);
-        if (selectedData && selectedData.linkToDetail) {
+        if (selectedKeys && selectedData && selectedData.linkToDetail) {
             if (selectedData.linkToDetail.featureId) {
                 const featureType = selectedData.linkToDetail.featureType;
                 this.props.setTreeFeatureType(featureType);

diff --git a/frontend/js/reducers/card.js b/frontend/js/reducers/card.js
@@ -7,7 +7,7 @@
  */
 
 const {
-    CARD_TEMPLATE_LOADED, CARD_TEMPLATE_LOAD_ERROR,
+    CARD_TEMPLATE_LOADED, CARD_TEMPLATE_LOAD_ERROR, CARD_TEMPLATE_LOADING,
     SELECT_SECTION, ACTIVE_SECTION, SELECT_ROWS, GENERATE_PDF,
     MAP_IMAGE_READY// , SET_IMPIANTO_MODEL
 } = require('../actions/card');
@@ -30,12 +30,14 @@ function cardtemplate(state = initialState, action) {
             template: action.template,
             xml: action.xml || state.xml,
             activeSections: null,
-            params: action.params
+            params: action.params,
+            loadingCardTemplate: false
         });
     }
     case CARD_TEMPLATE_LOAD_ERROR: {
         return assign({}, state, {
             loadingCardTemplateError: action.error,
+            loadingCardTemplate: false,
             params: {}
         });
     }
@@ -67,6 +69,9 @@ function cardtemplate(state = initialState, action) {
     /* case SET_IMPIANTO_MODEL: {
             return assign({}, state, {impiantoModel: action.impiantoModel});
         } */
+    case CARD_TEMPLATE_LOADING: {
+        return assign({}, state, {loadingCardTemplate: true});
+    }
     default:
         return state;
     }