start to generate report card structure programatically

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

@@ -2,43 +2,18 @@
   <v-container>
     <v-row>
       <v-col cols="9">
-        <h1 class="primary--text">PFI-6: A Chemical Probe for human MLLT1/3</h1>
+        <h1 class="primary--text">{{ reportCardStructure.title }}</h1>
         <v-divider />
         <br />
-        <v-row>
-          <v-col cols="12">
-            <h2 class="primary--text">Summary</h2>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12"> <Summary /> </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12">
-            <h2 class="primary--text">
-              Chemical Probe & Negative Control Structures and Use
-            </h2>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12"> <ControlStructuresAndUse /> </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12">
-            <h2 class="primary--text">Chemical Probe Profile</h2>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12"> <ProbeProfile /> </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12">
-            <h2 class="primary--text">Crystal Structures</h2>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12"> <CrystalStructures /> </v-col>
-        </v-row>
+
+        <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>
@@ -46,21 +21,27 @@
 </template>
 
 <script>
-import Summary from '~/components/report_cards/chemical_probe/Summary.vue'
-import ControlStructuresAndUse from '~/components/report_cards/chemical_probe/ControlStructuresAndUse.vue'
-import ProbeProfile from '~/components/report_cards/chemical_probe/ProbeProfile.vue'
-import CrystalStructures from '~/components/report_cards/chemical_probe/CrystalStructures.vue'
 import Navigator from '~/components/report_cards/Navigator.vue'
+import ReportCardSection from '~/components/report_cards/shared/ReportCardSection.vue'
+
+import CompoundReportCardGenerator from '~/report_cards_structure/CompoundReportCardGenerator.js'
 
 export default {
   components: {
-    Summary,
-    ControlStructuresAndUse,
-    ProbeProfile,
-    CrystalStructures,
     Navigator,
+    ReportCardSection,
+  },
+  computed: {
+    reportCardStructure() {
+      return CompoundReportCardGenerator.generateReportCardStructure()
+    },
   },
 }
 </script>
 
-<style></style>
+<style>
+.section-container {
+  padding: 10px 0;
+  margin-bottom: 10px;
+}
+</style>

components/report_cards/shared/ReportCardSection.vue

+<template>
+  <div>
+    <v-row>
+      <v-col cols="12">
+        <h2 class="primary--text">{{ sectionDescription.title }}</h2>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <component :is="sectionDescription.component"></component>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    sectionDescription: {
+      type: Object,
+      default: () => {},
+    },
+  },
+}
+</script>
+
+<style></style>

components/report_cards/target/TargetReportCard.vue

+<template>
+  <div>Target report card!</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

pages/index.vue

 <template>
   <v-row justify="center" align="center">
     <v-col cols="12" sm="8" md="6">
-      <v-btn color="primary" outlined to="/chemical_probe/1">
-        Go to Chemical Probe
-      </v-btn>
+      <v-btn color="primary" outlined to="/compound/1"> Go to Compound </v-btn>
       <h1>Lorem ipsum</h1>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum

pages/target/_id.vue

+<template>
+  <div><TargetReportCard /></div>
+</template>
+
+<script>
+import TargetReportCard from '~/components/report_cards/target/TargetReportCard.vue'
+export default {
+  components: {
+    TargetReportCard,
+  },
+}
+</script>
+
+<style></style>

report_cards_structure/CompoundReportCardGenerator.js

+import Summary from '~/components/report_cards/chemical_probe/Summary.vue'
+import ControlStructuresAndUse from '~/components/report_cards/chemical_probe/ControlStructuresAndUse.vue'
+import ProbeProfile from '~/components/report_cards/chemical_probe/ProbeProfile.vue'
+import CrystalStructures from '~/components/report_cards/chemical_probe/CrystalStructures.vue'
+
+const methods = {
+  generateReportCardStructure() {
+    return {
+      title: 'PFI-6: A Chemical Probe for human MLLT1/3',
+      sections: [
+        {
+          id: 'Summary',
+          title: 'Summary',
+          component: Summary,
+        },
+        {
+          id: 'ControlStructuresAndUse',
+          title: 'ControlStructuresAndUse',
+          component: ControlStructuresAndUse,
+        },
+        {
+          id: 'ProbeProfile',
+          title: 'ProbeProfile',
+          component: ProbeProfile,
+        },
+        {
+          id: 'CrystalStructures',
+          title: 'CrystalStructures',
+          component: CrystalStructures,
+        },
+      ],
+    }
+  },
+}
+
+export default methods