Create a generic component for the report cards

components/report_cards/Navigator.vue

 <template>
   <v-card tile>
     <v-card-title>Navigation</v-card-title>
-    <v-navigation-drawer permanent>
+    <v-navigation-drawer permanent right>
       <v-divider></v-divider>
       <v-list nav dense>
         <v-list-item-group v-model="selectedItem" color="primary">
-          <v-list-item v-for="(item, i) in items" :key="i">
+          <v-list-item
+            v-for="section in reportCardStructure.sections"
+            :key="section.id"
+          >
             <v-list-item-content>
-              <v-list-item-title v-text="item.text"></v-list-item-title>
+              <v-list-item-title v-text="section.title"></v-list-item-title>
             </v-list-item-content>
           </v-list-item>
         </v-list-item-group>
@@ -18,14 +21,14 @@
 
 <script>
 export default {
+  props: {
+    reportCardStructure: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data: () => ({
     selectedItem: 0,
-    items: [
-      { text: 'Summary' },
-      { text: 'Chemical Probe & Negative Control Structures and Use' },
-      { text: 'Probe Profile' },
-      { text: 'Crystal Structures' },
-    ],
   }),
 }
 </script>

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="9">
-        <h1 class="primary--text">{{ reportCardStructure.title }}</h1>
-        <v-divider />
-        <br />
-
-        <div
-          v-for="section in reportCardStructure.sections"
-          :key="section.id"
-          class="section-container"
-        >
-          <ReportCardSection :section-description="section" />
-          <v-divider />
-        </div>
-      </v-col>
-      <v-col cols="3"> <Navigator /> </v-col>
-    </v-row>
-  </v-container>
+  <EntityReportCard :report-card-structure="reportCardStructure" />
 </template>
 
 <script>
-import Navigator from '~/components/report_cards/Navigator.vue'
-import ReportCardSection from '~/components/report_cards/shared/ReportCardSection.vue'
-
+import EntityReportCard from '~/components/report_cards/shared/EntityReportCard.vue'
 import CompoundReportCardGenerator from '~/report_cards_structure/CompoundReportCardGenerator.js'
 
 export default {
   components: {
-    Navigator,
-    ReportCardSection,
+    EntityReportCard,
   },
   computed: {
     reportCardStructure() {
@@ -39,9 +18,4 @@ export default {
 }
 </script>
 
-<style>
-.section-container {
-  padding: 10px 0;
-  margin-bottom: 10px;
-}
-</style>
+<style></style>

components/report_cards/shared/EntityReportCard.vue

+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="9">
+        <h1 class="primary--text">{{ reportCardStructure.title }}</h1>
+        <v-divider />
+        <br />
+
+        <div
+          v-for="section in reportCardStructure.sections"
+          :key="section.id"
+          class="section-container"
+        >
+          <ReportCardSection :section-description="section" />
+          <v-divider />
+        </div>
+      </v-col>
+      <v-col cols="3">
+        <Navigator :report-card-structure="reportCardStructure" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import Navigator from '~/components/report_cards/Navigator.vue'
+import ReportCardSection from '~/components/report_cards/shared/ReportCardSection.vue'
+
+export default {
+  components: {
+    Navigator,
+    ReportCardSection,
+  },
+  props: {
+    reportCardStructure: {
+      type: Object,
+      default: () => {},
+    },
+  },
+}
+</script>
+
+<style>
+.section-container {
+  padding: 10px 0;
+  margin-bottom: 10px;
+}
+</style>

report_cards_structure/CompoundReportCardGenerator.js

@@ -15,17 +15,17 @@ const methods = {
         },
         {
           id: 'ControlStructuresAndUse',
-          title: 'ControlStructuresAndUse',
+          title: 'Control Structures And Use',
           component: ControlStructuresAndUse,
         },
         {
           id: 'ProbeProfile',
-          title: 'ProbeProfile',
+          title: 'Probe Profile',
           component: ProbeProfile,
         },
         {
           id: 'CrystalStructures',
-          title: 'CrystalStructures',
+          title: 'Crystal Structures',
           component: CrystalStructures,
         },
       ],