Eubopen Targets: load metadata and name and classification

components/report_cards/target/ActivityCharts.vue

 <template>
-  <v-card>
+  <v-card outlined>
     <v-card-text>
       <EntityRelations />
     </v-card-text>

components/report_cards/target/NameAndClassification.vue

 <template>
-  <v-card>
+  <v-card outlined>
+    dataLoaded: {{ dataLoaded }} itemID: {{ itemID }}
+    <v-card-text>
+      <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
+    </v-card-text>
     <v-card-text>
       <v-row class="details-row" dense>
         <v-col cols="12">
@@ -62,7 +66,21 @@
 </template>
 
 <script>
-export default {}
+import { mapState } from 'vuex'
+export default {
+  props: {
+    itemID: {
+      type: String,
+      default: () => undefined,
+    },
+  },
+  computed: mapState({
+    dataLoaded: (state) => state.target.nameAndClassification.dataLoaded,
+  }),
+  mounted() {
+    this.$store.dispatch('target/nameAndClassification/loadData', this.itemID)
+  },
+}
 </script>
 
 <style>

components/report_cards/target/TargetReportCard.vue

 <template>
-  <EntityReportCard :report-card-structure="reportCardStructure" />
+  <EntityReportCard
+    :report-card-structure="reportCardStructure"
+    :item-i-d="itemID"
+  />
 </template>
 
 <script>
@@ -11,6 +14,12 @@ export default {
   components: {
     EntityReportCard,
   },
+  props: {
+    itemID: {
+      type: String,
+      default: () => undefined,
+    },
+  },
   computed: mapState({
     reportCardStructure: (state) => state.reportCard.reportCardStructure,
   }),

layouts/pinnedBar.vue

-<template>
-  <v-app>
-    <Notifications />
-    <MainAppBar :permanently-pinned="true">
-      <template #logo>
-        <Logo />
-      </template>
-    </MainAppBar>
-    <v-main class="lowered">
-      <nuxt />
-    </v-main>
-    <Footer />
-  </v-app>
-</template>
-
-<script>
-import MainAppBar from '~/web-components-submodule/components/common/Masthead/MainAppBar.vue'
-import Footer from '~/components/footer/Footer.vue'
-import Notifications from '~/web-components-submodule/components/common/Notifications.vue'
-import Logo from '~/components/Logo.vue'
-
-export default {
-  components: {
-    MainAppBar,
-    Footer,
-    Notifications,
-    Logo,
-  },
-}
-</script>
-<style scoped>
-.lowered {
-  margin-top: 80px;
-}
-</style>

package-lock.json

@@ -3479,8 +3479,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -4706,7 +4705,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -5787,8 +5785,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "depd": {
       "version": "1.1.2",
@@ -7578,13 +7575,12 @@
       "dev": true
     },
     "form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
       "requires": {
         "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
+        "combined-stream": "^1.0.8",
         "mime-types": "^2.1.12"
       }
     },
@@ -13175,6 +13171,17 @@
         "uuid": "^3.3.2"
       },
       "dependencies": {
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.6",
+            "mime-types": "^2.1.12"
+          }
+        },
         "qs": {
           "version": "6.5.2",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",

pages/target/_id.vue

 <template>
-  <div><TargetReportCard /></div>
+  <TargetReportCard :item-i-d="itemID" />
 </template>
 
 <script>
 import TargetReportCard from '~/components/report_cards/target/TargetReportCard.vue'
+import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+
 export default {
   components: {
     TargetReportCard,
   },
-  layout: 'pinnedBar',
+  layout: 'reportCard',
+  async asyncData({ $axios, error, params }) {
+    try {
+      const docSource = ['pref_name']
+      const result = await MetadataLoader.getMetadataForEntity(
+        EntityNames.EubopenTarget.entityID,
+        params.id,
+        docSource
+      )
+      return {
+        rawMetadata: result.data._source,
+      }
+    } catch (e) {
+      error({
+        statusCode: 404,
+        message: `No Target found with id ${params.id}`,
+      })
+    }
+  },
+  head() {
+    return {
+      title: `Target ${this.itemID}`,
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: `${this.rawMetadata.pref_name}`,
+        },
+      ],
+    }
+  },
+  computed: {
+    itemID() {
+      return this.$route.params.id
+    },
+  },
 }
 </script>
 

web-components-submodule @ 1ec6c035

-Subproject commit 1b82dcf94bcbe2848cc1b5ed27968d16317f3432
+Subproject commit 1ec6c0358b317b8ed1918dafdc6dd0c7a5e47b6f