imprive error handling

ot_templating/Resources/Private/Layouts/Classic/StructuresFrame.html

@@ -20,7 +20,7 @@
 
         <f:comment><!-- The data is stored as an attribute, then templated with JS for performance reasons --></f:comment>
         <div class="ot-structures-frame map-view"
-             data-org-id="{settings.organizationId}">
+             data-organization-id="{settings.organizationId}">
 
             <div class="structure-col structure-col-map">
                 <div id="structure-map-wrapper">
@@ -138,7 +138,7 @@
                         />
                     </span>
                     <span class="no-result" style="display: none"><f:translate key="no-result"/></span>
-                    <span class="error-message" style="display: none"><f:translate key="an-error-happened"/></span>
+                    <span class="error-message" style="display: none"><f:translate key="an_error_occured"/></span>
 
                     <div class="structures-page">
                         <div class="structure-card-model" data-id="" style="display: none">

ot_templating/Resources/Public/assets/Classic/script/structures.js

@@ -1,3 +1,4 @@
+// Specific code for the 'federation-structures' page
 
 const variants_uris = {
     "preprod.opentalent.fr": "https://api.preprod.opentalent.fr",
@@ -35,11 +36,6 @@ function sphericDistance(lat1, lon1, lat2, lon2)
 $(document).ready(function() {
 
     const queryParameters = new URLSearchParams(window.location.search);
-    let organizationId = queryParameters.get('organization-id');
-
-    if (!organizationId) {
-        throw 'Missing organization-id parameter';
-    }
 
     // Init
     let document = $('html, body');
@@ -50,6 +46,7 @@ $(document).ready(function() {
     let resultsPageDiv = structureFrame.find('.structures-page').first();
     let pleaseWaitSpan = structureFrame.find('.please-wait').first();
     let noResultSpan = structureFrame.find('.no-result').first();
+    let errorMsgSpan = structureFrame.find(".error-message").first();
     let cardDivModel = structureFrame.find('.structure-card-model').first();
     let paginationBar = structureFrame.find('.pagination-bar').first();
     let paginationList = structureFrame.find('.pagination-list').first();
@@ -68,6 +65,14 @@ $(document).ready(function() {
     let resetButton = form.find("button.reset-search").first();
     let submitButton = form.find("button.submit-search").first();
 
+    let organizationId = queryParameters.get('organization-id') || structureFrame.data('organization-id');
+    if (!organizationId) {
+        pleaseWaitSpan.hide();
+        errorMsgSpan.show();
+        throw 'Missing organization-id parameter';
+    }
+
+
     // Translations
     let tr = {};
     $('#labels').find('span').each(function (i, elt) {
@@ -349,15 +354,18 @@ $(document).ready(function() {
         type: 'GET',
         url: apiGetUrl,
         dataType: "json",
-        contentType: "application/json; charset=utf-8"
+        contentType: "application/json; charset=utf-8",
+        timeout : 5000
     })
     .done(function(res) {
         structures = res["hydra:member"];
         populateFederationsSelect();
         refresh();
     })
-    .fail(function() {
-        structureFrame.find(".error-message").show()
+    .fail(function(xhr, textStatus, errorThrown) {
+        pleaseWaitSpan.hide();
+        errorMsgSpan.show();
+        throw 'Error while fetching the API data: ' + textStatus  + ' - ' + errorThrown;
     });