add terms-of-use policy renderer component for single ToU routes

src/backend/api.js

@@ -98,6 +98,10 @@ export const wikiDiscovery = async ({ sort, direction, active, currentPage, resu
   })).data
 }
 
+export const policyByDate = async ({ policyType, activeFrom }) => {
+  return (await axios.get(`/v1/policies/${policyType}/by_active_from/${activeFrom}`)).data
+}
+
 export const importEntities = async ({
   wikiId,
   entityIds = [

src/components/Pages/Components/PolicyNavigationPanel.vue

@@ -5,9 +5,9 @@
 
             <v-expansion-panel-content>
             <v-list class="wrap">
-                <v-list-item v-for="(link) in links" :key="link.routePath">
+                <v-list-item v-for="(link, index) in links" :key="link.routePath">
                     <v-list-item-content>
-                        <v-list-item-title v-if="link.routePath === currentPath">
+                        <v-list-item-title v-if="index == currentLink">
                             {{ link.title }}
                         </v-list-item-title>
 
@@ -29,7 +29,7 @@ export default {
   name: 'NavigationPanel',
   props: {
     title: String,
-    currentPath: String,
+    currentLink: Number,
     links: Array,
   },
 }

src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <PolicyNavigationPanel title="All Versions" :links="termsOfUseLinks" :currentPath="currentPath" />
+    <PolicyNavigationPanel title="All Versions" :links="termsOfUseLinks"  :currentLink="currentLink" />
 </template>
 
 <script>
@@ -11,14 +11,24 @@ export default {
     PolicyNavigationPanel,
   },
   data: () => ({
+    // TODO read this from API
     termsOfUseLinks: [
       { title: 'Upcoming Version', routePath: '/terms-of-use/upcoming' },
       { title: '11 April 2022 (current)', routePath: '/terms-of-use' },
     ],
-    currentPath: null,
   }),
-  mounted () {
-    this.currentPath = this.$route.path
+  computed: {
+    currentLink: function () {
+      const isCurrentPath = (element) => element.routePath === this.$route.path
+      const positionInList = this.termsOfUseLinks.findIndex(isCurrentPath)
+
+      if (positionInList === -1) {
+        // not in a list, must be current version, because the TermsOfUseRenderer only allows accessing the current version by its active_from date
+        return 1
+      }
+
+      return positionInList
+    },
   },
 }
 

src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-main>
+    <v-container class="fill-height" fluid>
+      <v-row justify="center">
+        <v-col cols="11" md="4" order-md="last">
+          <TermsOfUseNavigationPanel />
+        </v-col>
+
+        <v-col cols="11" md="8">
+          <component :is="policy" v-if="policy" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+import TermsOfUseNavigationPanel from './TermsOfUseNavigationPanel.vue'
+
+export const versions = {
+  '2022-01-01': () => ({ component: import('./terms-of-use/2022-01-01.vue') }),
+}
+
+export default {
+  name: 'TermsOfUseRenderer',
+  components: {
+    TermsOfUseNavigationPanel,
+  },
+  computed: {
+    policyActiveFrom: function () {
+      return this.$route.params.activeFrom
+    },
+  },
+  data () {
+    return {
+      policy: undefined,
+    }
+  },
+  methods: {
+    async loadPolicy () {
+      try {
+        const policyType = 'terms-of-use' // TODO read this from component property
+        const activeFrom = this.policyActiveFrom
+
+        const response = await this.$api.policyByDate({ policyType, activeFrom })
+
+        const metadata = await response.metadata
+        this.policy = versions[metadata.active_from]
+      } catch (error) {
+        console.error(error)
+        alert('Failed to load policy.')
+      }
+    },
+  },
+  mounted () {
+    this.loadPolicy()
+  },
+  watch: {
+    policyId: function () {
+      this.loadPolicy()
+    },
+  },
+}
+</script>
+
+<style scoped></style>