[SDPA-369] Implement topic and tags into Page content type. (#492)

* Move Topic and Tags into separate component. * Update landing page and page content type to use component.
dpc-sdp · Aug 21, 2019 · 7854572 · 7854572
1 parent 038f5e7
commit 7854572
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 23 deletions.
diff --git a/packages/ripple-nuxt-tide/lib/components/AppTopicTags.vue b/packages/ripple-nuxt-tide/lib/components/AppTopicTags.vue
@@ -0,0 +1,52 @@
+<template>
+  <ul class="app-topics-tags" v-if="topicAndTags">
+    <li class="app-topics-tags__item" v-for="(tag, index) in topicAndTags" :key="index">
+      <rpl-meta-tag :linkText="tag.text" :linkUrl="tag.url" />
+    </li>
+  </ul>
+</template>
+
+<script>
+import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
+import RplMetaTag from '@dpc-sdp/ripple-meta-tag'
+
+export default {
+  components: {
+    RplRow,
+    RplCol,
+    RplMetaTag
+  },
+  props: {
+    topic: Object,
+    tags: Array
+  },
+  computed: {
+    topicAndTags () {
+      let metaTags = []
+      if (this.topic) {
+        metaTags.push(this.topic)
+      }
+      if (this.tags) {
+        metaTags = metaTags.concat(this.tags)
+      }
+      metaTags = metaTags.map(tag => ({
+        text: tag.name,
+        url: (tag.path && tag.path.alias) ? tag.path.alias : ''
+      }))
+      return metaTags.length > 0 ? metaTags : null
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .app-topics-tags {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    &__item {
+      display: inline;
+    }
+  }
+</style>
diff --git a/packages/ripple-nuxt-tide/modules/landing-page/pages/index.vue b/packages/ripple-nuxt-tide/modules/landing-page/pages/index.vue
@@ -14,22 +14,22 @@
       </rpl-col>
     </template>
     <rpl-col v-if="page.field_show_topic_term_and_tags" cols="full">
-      <rpl-meta-tag v-for="(tag, index) in topicsAndTags" :key="index" :linkText="tag.text" :linkUrl="tag.url" />
+      <app-topic-tags :topic="this.page.field_topic" :tags="this.page.field_tags" />
     </rpl-col>
   </rpl-row>
 </template>
 
 <script>
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import RplAnchorLinks from '@dpc-sdp/ripple-anchor-links'
-import RplMetaTag from '@dpc-sdp/ripple-meta-tag'
+import AppTopicTags from '../../../lib/components/AppTopicTags'
 
 export default {
   components: {
     RplAnchorLinks,
     RplRow,
-    RplMetaTag,
-    RplCol
+    RplCol,
+    AppTopicTags
   },
   data () {
     return {
@@ -43,24 +43,6 @@ export default {
     anchorLinks: Array,
     sidebar: Boolean
   },
-  computed: {
-    topicsAndTags () {
-      if (this.page.field_show_topic_term_and_tags) {
-        let metaTags = []
-        if (this.page.field_topic) {
-          metaTags.push(this.page.field_topic)
-        }
-        if (this.page.field_tags) {
-          metaTags = metaTags.concat(this.page.field_tags)
-        }
-        return metaTags.map(tag => ({
-          text: tag.name,
-          url: (tag.path && tag.path.alias) ? tag.path.alias : ''
-        }))
-      }
-      return null
-    }
-  },
   created () {
     this.dynamicComponents = this.$tide.getDynamicComponents(this.page.appDComponents, this.sidebar)
   }

diff --git a/packages/ripple-nuxt-tide/modules/page/pages/index.vue b/packages/ripple-nuxt-tide/modules/page/pages/index.vue
@@ -4,20 +4,25 @@
       <rpl-anchor-links v-if="anchorLinks" title="On this page:" :links="anchorLinks" />
       <rpl-markup v-if="page.body" :html="page.body.processed"></rpl-markup>
     </rpl-col>
+    <rpl-col v-if="page.field_show_topic_term_and_tags" cols="full">
+      <app-topic-tags :topic="this.page.field_topic" :tags="this.page.field_tags" />
+    </rpl-col>
   </rpl-row>
 </template>
 
 <script>
 import RplMarkup from '@dpc-sdp/ripple-markup'
 import RplAnchorLinks from '@dpc-sdp/ripple-anchor-links'
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
+import AppTopicTags from '../../../lib/components/AppTopicTags'
 
 export default {
   components: {
     RplRow,
     RplCol,
     RplMarkup,
-    RplAnchorLinks
+    RplAnchorLinks,
+    AppTopicTags
   },
   props: {
     page: Object,