From cbc23180476940ddbe5ce48f847a58b8df3758dc Mon Sep 17 00:00:00 2001
From: David <dmendez@ebi.ac.uk>
Date: Thu, 22 Jul 2021 09:54:16 -0500
Subject: [PATCH] Add shared componments for report cards
---
.../ChemicalProbeReportCard.vue | 2 +-
.../report_cards/shared/EntityReportCard.vue | 48 -----------
.../report_cards/shared/ReportCardSection.vue | 80 -------------------
.../report_cards/target/TargetReportCard.vue | 2 +-
web-components-submodule | 2 +-
5 files changed, 3 insertions(+), 131 deletions(-)
delete mode 100644 components/report_cards/shared/EntityReportCard.vue
delete mode 100644 components/report_cards/shared/ReportCardSection.vue
diff --git a/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue b/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
index dc86619..5991f9b 100644
--- a/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue
+++ b/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 {
diff --git a/components/report_cards/shared/EntityReportCard.vue b/components/report_cards/shared/EntityReportCard.vue
deleted file mode 100644
index 58a5dac..0000000
--- a/components/report_cards/shared/EntityReportCard.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<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>
diff --git a/components/report_cards/shared/ReportCardSection.vue b/components/report_cards/shared/ReportCardSection.vue
deleted file mode 100644
index f9fc630..0000000
--- a/components/report_cards/shared/ReportCardSection.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<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>
diff --git a/components/report_cards/target/TargetReportCard.vue b/components/report_cards/target/TargetReportCard.vue
index bec98fd..9046e76 100644
--- a/components/report_cards/target/TargetReportCard.vue
+++ b/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 {
diff --git a/web-components-submodule b/web-components-submodule
index 71b1eb2..cffbfd9 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit 71b1eb206c42a4fdd5c6a78bf4e24dde23b21aad
+Subproject commit cffbfd9f37649e3c7332d97454683ef378367dae
--
GitLab