Report Cards: load structure before rendering asynchronously

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

@@ -8,8 +8,13 @@
 
 <script>
 import { mapState } from 'vuex'
+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
 import EntityReportCard from '~/web-components-submodule/components/common/ReportCards/EntityReportCard.vue'
 import CompoundReportCardGenerator from '~/report_cards_structure/CompoundReportCardGenerator.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
+import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
 
 export default {
   components: {
@@ -30,13 +35,38 @@ export default {
     reportCardStructure: (state) => state.probeReportCard.reportCardStructure,
   }),
   mounted() {
-    const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure(
-      this.itemID
-    )
-    this.$store.dispatch(
-      'probeReportCard/setReportCardStructure',
-      reportCardStructure
-    )
+    const docSource = ['pref_name']
+    const entityID = EntityNames.EubopenCompound.entityID
+    const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+
+    ESProxyService.getESDocument(indexName, this.itemID, docSource)
+      .then((response) => {
+        const sourceObtained = response.data._source
+        const prefName = ObjectPropertyAccess.getPropertyPalue(
+          sourceObtained,
+          'pref_name',
+          '',
+          false
+        )
+
+        const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure(
+          this.itemID,
+          prefName
+        )
+        this.$store.dispatch(
+          'probeReportCard/setReportCardStructure',
+          reportCardStructure
+        )
+
+        this.$store.dispatch('probeReportCard/setStructureReady', true)
+      })
+      .catch((error) => {
+        RequestNotifications.dispatchRequestErrorNotification(
+          error,
+          this.$store.dispatch,
+          `There was an error while loading the page structure`
+        )
+      })
   },
 }
 </script>

report_cards_structure/CompoundReportCardGenerator.js

@@ -5,12 +5,11 @@ import ProbeProfile from '~/components/report_cards/chemical_probe/ProbeProfile.
 import ProbeMechanism from '~/components/report_cards/chemical_probe/ProbeMechanism.vue'
 import CompoundCrystalStructures from '~/components/report_cards/chemical_probe/CompoundCrystalStructures.vue'
 import CalculatedProperties from '~/components/report_cards/chemical_probe/CalculatedProperties.vue'
-import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
 
 const methods = {
-  generateReportCardStructure(itemID) {
+  generateReportCardStructure(itemID, title) {
     return {
-      title: `${EntityNames.EubopenCompound.singularEntityName} ${itemID}`,
+      title,
       sections: [
         {
           id: 'Summary',

web-components-submodule @ 04914c60

-Subproject commit cc3ba1073b550930e96d018d610b23b82947fc65
+Subproject commit 04914c60725d9fbb0934065001e1dc07bf7e59d5