Merge branch 'main' into invalid-route-query-type

nih-sparc · Aug 5, 2024 · ae5b8f1 · ae5b8f1
2 parents 8543cd2 + 22e25e1
commit ae5b8f1
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 41 deletions.
diff --git a/components/Consortias/Consortias.vue b/components/Consortias/Consortias.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="body1">
+    The SPARC Portal currently supports <b><span class="heading2">{{ consortias.length }}</span></b> consortia. Visit
+    the consortia pages to find out more about them:
+  </div>
+  <div class="data-wrap py-16">
+    <nuxt-link v-for="item in consortias" :key="item.sys.id" class="consortia-item"
+      :to="`/about/consortia/${item.fields.slug}`">
+      <img :src="logoUrl(item)" :alt="`Logo for ${item.fields.title}`" />
+      <p class="mb-0 mt-8">
+        {{ item.fields.title }}
+      </p>
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+import { pathOr } from 'ramda'
+
+export default {
+  name: 'Consortias',
+  async setup() {
+    const config = useRuntimeConfig()
+    const { $contentfulClient } = useNuxtApp()
+    const consortias =
+      await $contentfulClient.getEntries({
+        content_type: config.public.ctf_consortia_content_type_id,
+        order: 'fields.displayOrder'
+      }).then(({ items }) => {
+        return items
+      }).catch(() => {
+        return []
+      })
+    return {
+      consortias
+    }
+  },
+  methods: {
+    logoUrl: function (item) {
+      return pathOr('', ['fields', 'logo', 'fields', 'file', 'url'], item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'sparc-design-system-components-2/src/assets/_variables.scss';
+.data-wrap {
+  justify-content: center;
+  width: 100%;
+  display: flex;
+}
+.consortia-item {
+  color: #000;
+  text-decoration: none;
+
+  margin: 0rem 2rem;
+  text-align: center;
+
+  &:hover,
+  &:focus {
+    opacity: 0.9;
+  }
+
+  img {
+    background: #fff;
+    border-radius: 50%;
+    display: block;
+    margin-bottom: 8px;
+    width: 128px;
+    border: solid 1px #c0c4cc;
+    height: 128px;
+    object-fit: contain;
+    margin: auto;
+  }
+
+  p {
+    font-size: 1em;
+    font-weight: 700;
+    color: #24245b;
+    width: 11rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>
diff --git a/components/SparcNumbers/SparcNumbers.vue b/components/SparcNumbers/SparcNumbers.vue
@@ -3,19 +3,7 @@
     <div class="heading2">
       SPARC by the numbers
     </div>
-    <div class="body1">
-      The SPARC Portal currently supports <b><span class="heading2">{{ consortias.length }}</span></b> consortia. Visit
-      the consortia pages to find out more about them:
-    </div>
-    <div class="data-wrap py-16">
-      <nuxt-link v-for="item in consortias" :key="item.sys.id" class="consortia-item"
-        :to="`/about/consortia/${item.fields.slug}`">
-        <img :src="logoUrl(item)" :alt="`Logo for ${item.fields.title}`" />
-        <p class="mb-0 mt-8">
-          {{ item.fields.title }}
-        </p>
-      </nuxt-link>
-    </div>
+    <Consortias />
     <div class="body1">
       We have <b><span class="heading2">{{ totalContributors }}</span></b> total contributors. Explore the data to
       find out what amazing research we have:
@@ -35,21 +23,16 @@
 <script>
 import { pathOr } from 'ramda'
 import { getPreviousDate } from '@/utils/common'
+import Consortias from '@/components/Consortias/Consortias.vue'
 
 export default {
   name: 'SparcNumbers',
+  components: {
+    Consortias
+  },
   async setup() {
     const config = useRuntimeConfig()
-    const { $contentfulClient, $axios } = useNuxtApp()
-    const consortias =
-      await $contentfulClient.getEntries({
-        content_type: config.public.ctf_consortia_content_type_id,
-        order: 'fields.displayOrder'
-      }).then(({ items }) => {
-        return items
-      }).catch(() => {
-        return []
-      })
+    const { $axios } = useNuxtApp()
     let currentMonth = new Date().getMonth() + 1
     currentMonth = currentMonth.toString().padStart(2, "0")
     const currentYear = new Date().getFullYear()
@@ -73,7 +56,6 @@ export default {
           })
       })
     return {
-      consortias,
       totalContributors
     }
   },
@@ -84,9 +66,6 @@ export default {
     }
   },
   methods: {
-    logoUrl: function (item) {
-      return pathOr('', ['fields', 'logo', 'fields', 'file', 'url'], item)
-    },
     imageUrl: function (item) {
       return pathOr('', ['fields', 'image', 'fields', 'file', 'url'], item)
     },

diff --git a/pages/about/consortia/[id].vue b/pages/about/consortia/[id].vue
@@ -109,7 +109,7 @@ export default {
       'content_type': config.public.ctf_news_id,
       order: '-fields.publishedDate',
       limit: '999',
-      'fields.consortiaHighlight[in]': consortiaItem.fields.title
+      'fields.consortiaHighlight[in]': consortiaItem.fields.slug
     }).then(({ items }) => {
       highlights.value = items
     }).catch(() => {

diff --git a/pages/about/index.vue b/pages/about/index.vue
@@ -18,17 +18,7 @@
         button-link-external="https://docs.sparc.science/docs/sparc-portal-roadmap" />
       <div :v-if="whoWeSpport?.length > 0" class="who-we-support-container p-24 mt-32">
         <div class="heading2">Who We Support</div>
-        <div class="body1 mb-16">The SPARC Portal currently supports {{ whoWeSupport.length }} consortia. Visit the
-          consortia page to find out more about them.</div>
-        <div class="data-wrap">
-          <nuxt-link v-for="item in whoWeSupport" :key="item.sys.id" class="who-we-support-item"
-            :to="`/about/consortia/${item.fields.slug}`">
-            <img :src="logoUrl(item)" :alt="`Logo for ${item.fields.title}`" />
-            <p class="mb-0 mt-8">
-              {{ item.fields.title }}
-            </p>
-          </nuxt-link>
-        </div>
+        <Consortias />
         <nuxt-link to="/about/projects">
           <el-button class="secondary">
             View All Projects
@@ -68,6 +58,7 @@
 <script>
 import Paper from '~/components/Paper/Paper.vue'
 import Gallery from '~/components/Gallery/Gallery.vue'
+import Consortias from '~/components/Consortias/Consortias.vue'
 
 import marked from '@/mixins/marked'
 import { getPreviousDate } from '@/utils/common'
@@ -92,6 +83,7 @@ export default {
   name: 'AboutPage',
 
   components: {
+    Consortias,
     Paper,
     Gallery
   },

diff --git a/tests/cypress/e2e/homepage.cy.js b/tests/cypress/e2e/homepage.cy.js
@@ -67,8 +67,8 @@ describe('Homepage', { testIsolation: false }, function () {
 
     // Check for button link
     cy.get(':nth-child(1) > .feature-container > .button-link').should('contain', 'Data and Models').and('have.attr', 'href', '/data?type=dataset')
-    cy.get(':nth-child(2) > .feature-container > .button-link').should('contain', 'Maps').and('have.attr', 'href', '/maps')
-    cy.get(':nth-child(3) > .feature-container > .button-link').should('contain', 'Discover').and('have.attr', 'href').and('contain', '/resources')
+    cy.get(':nth-child(2) > .feature-container > .button-link').should('contain', 'Maps').and('have.attr', 'href', '/apps/maps?type=ac')
+    cy.get(':nth-child(3) > .feature-container > .button-link').should('contain', 'Discover').and('have.attr', 'href').and('contain', '/tools-and-resources')
     cy.get(':nth-child(4) > .feature-container > .button-link').should('contain', 'Submit').and('have.attr', 'href', '/share-data')
   })