Add shared componments for report cards

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import EntityReportCard from '~/components/report_cards/shared/EntityReportCard.vue'
+import EntityReportCard from '~/web-components-submodule/components/common/ReportCards/EntityReportCard.vue'
 import CompoundReportCardGenerator from '~/report_cards_structure/CompoundReportCardGenerator.js'
 
 export default {

components/report_cards/shared/EntityReportCard.vue

-<template>
-  <v-container>
-    <v-row>
-      <v-col cols="12" md="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="0" md="3">
-        <Navigator :report-card-structure="reportCardStructure" />
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-import Navigator from '~/web-components-submodule/components/common/ReportCards/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>

components/report_cards/shared/ReportCardSection.vue

-<template>
-  <div
-    :id="sectionDescription.id"
-    ref="sectionContainer"
-    class="report-card-section"
-  >
-    <v-row>
-      <v-col cols="12">
-        <a
-          :href="`#${sectionDescription.id}`"
-          class="d-flex section-title-link"
-          @mouseover="showLinkIcon = true"
-          @mouseout="showLinkIcon = false"
-        >
-          <h2 class="primary--text">{{ sectionDescription.title }}</h2>
-          <v-icon v-show="showLinkIcon">mdi-link</v-icon>
-        </a>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <component :is="sectionDescription.component"></component>
-      </v-col>
-    </v-row>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-
-export default {
-  props: {
-    sectionDescription: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      showLinkIcon: false,
-      ignoreFirstIntersection: true,
-    }
-  },
-  computed: mapState({
-    activeSection: (state) => state.reportCard.activeSection,
-  }),
-  mounted() {
-    const callback = (entries, observer) => {
-      const sectionIndex = this.sectionDescription.index
-
-      if (entries[0].isIntersecting) {
-        this.$store.dispatch('reportCard/setActiveSection', sectionIndex)
-      }
-    }
-    const options = {
-      threshold: 0.5,
-    }
-
-    const observer = new IntersectionObserver(callback, options)
-    observer.observe(this.$refs.sectionContainer)
-  },
-}
-</script>
-
-<style lang="scss">
-.report-card-section {
-  .section-title-link {
-    text-decoration: none;
-  }
-  &::before {
-    display: block;
-    content: ' ';
-    margin-top: -68px;
-    height: 68px;
-    visibility: hidden;
-    pointer-events: none;
-  }
-}
-</style>

components/report_cards/target/TargetReportCard.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import EntityReportCard from '~/components/report_cards/shared/EntityReportCard.vue'
+import EntityReportCard from '~/web-components-submodule/components/common/ReportCards/EntityReportCard.vue'
 import TargetReportCardGenerator from '~/report_cards_structure/TargetReportCardGenerator.js'
 
 export default {

web-components-submodule @ cffbfd9f

-Subproject commit 71b1eb206c42a4fdd5c6a78bf4e24dde23b21aad
+Subproject commit cffbfd9f37649e3c7332d97454683ef378367dae