integrate policy API

src/backend/api.js

@@ -58,6 +58,26 @@ export const getCurrentPolicies = async () => {
   return data.items
 }
 
+export const getPolicyByDate = async ({ policyType, activeFrom }) => {
+  const { data } = await axios.get(`/v1/policies/${policyType}/by_active_from/${activeFrom}`)
+  return data
+}
+
+export const getAllPoliciesByType = async ({ policyType }) => {
+  const { data } = await axios.get(`/v1/policies/${policyType}`)
+  return data.items
+}
+
+export const getCurrentPolicyByType = async ({ policyType }) => {
+  const { data } = await axios.get(`/v1/policies/${policyType}/current`)
+  return data
+}
+
+export const getUpcomingPolicyByType = async ({ policyType }) => {
+  const { data } = await axios.get(`/v1/policies/${policyType}/upcoming`)
+  return data
+}
+
 /* Wiki endpoints */
 export const countWikis = async () => (await axios.get('/wiki/count')).data.data // TODO This doesn't seem to exist and not used?
 export const myWikis = async () => (await axios.post('/wiki/mine')).data
@@ -102,10 +122,6 @@ 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

@@ -1,5 +1,5 @@
 <template>
-    <v-expansion-panels v-bind:value="$vuetify.breakpoint.mdAndUp ? 0 : null" v-if="links">
+    <v-expansion-panels v-bind:value="$vuetify.breakpoint.mdAndUp ? 0 : null" v-if="links && links.length">
         <v-expansion-panel>
             <v-expansion-panel-header class="grey lighten-3">{{ title }}</v-expansion-panel-header>
 
@@ -25,12 +25,143 @@
 </template>
 
 <script>
+const parseActiveFrom = (activeFrom) => {
+  if (activeFrom === null || activeFrom === undefined) {
+    return null
+  }
+
+  return new Date(`${activeFrom}T00:00:00Z`)
+}
+
+const comparePolicies = (left, right) => {
+  const leftActiveFrom = parseActiveFrom(left.metadata.active_from)
+  const rightActiveFrom = parseActiveFrom(right.metadata.active_from)
+
+  if (leftActiveFrom === null && rightActiveFrom === null) {
+    return 0
+  }
+
+  if (leftActiveFrom === null) {
+    return 1
+  }
+
+  if (rightActiveFrom === null) {
+    return -1
+  }
+
+  return rightActiveFrom - leftActiveFrom || right.metadata.policy_id - left.metadata.policy_id
+}
+
 export default {
-  name: 'NavigationPanel',
+  name: 'PolicyNavigationPanel',
+  components: {
+  },
   props: {
-    title: String,
-    currentLink: Number,
-    links: Array,
+    basePath: {
+      type: String,
+    },
+    policyType: {
+      type: String,
+    },
+    title: {
+      type: String,
+      default: 'All Versions',
+    },
+  },
+  data: () => ({
+    policies: [],
+    error: undefined,
+  }),
+  computed: {
+    links: function () {
+      const sortedPolicies = [...this.policies].sort(comparePolicies)
+      const today = new Date()
+      today.setHours(0, 0, 0, 0)
+
+      const currentPolicy = sortedPolicies.find(policy => {
+        const activeFrom = parseActiveFrom(policy.metadata.active_from)
+        return activeFrom <= today
+      })
+
+      const upcomingPolicy = sortedPolicies.find(policy => {
+        const activeFrom = parseActiveFrom(policy.metadata.active_from)
+        return activeFrom > today || activeFrom === null
+      })
+
+      const otherPolicies = sortedPolicies.filter(policy => {
+        const policyId = policy.metadata.policy_id
+        const currentPolicyId = currentPolicy ? currentPolicy.metadata.policy_id : null
+        const upcomingPolicyId = upcomingPolicy ? upcomingPolicy.metadata.policy_id : null
+
+        return policyId !== currentPolicyId && policyId !== upcomingPolicyId
+      })
+
+      const orderedPolicies = [currentPolicy, upcomingPolicy, ...otherPolicies].filter(Boolean)
+
+      return orderedPolicies.map(policy => {
+        const activeFrom = policy.metadata.active_from
+        const isCurrentPolicy = currentPolicy && policy.metadata.policy_id === currentPolicy.metadata.policy_id
+        const isUpcomingPolicy = upcomingPolicy && policy.metadata.policy_id === upcomingPolicy.metadata.policy_id
+
+        return {
+          routePath: this.routePathForPolicy({ activeFrom, isCurrentPolicy, isUpcomingPolicy }),
+          title: this.titleForPolicy({ activeFrom, isCurrentPolicy, isUpcomingPolicy }),
+        }
+      })
+    },
+    currentLink: function () {
+      const isCurrentPath = (element) => element.routePath === this.$route.path
+      const positionInList = this.links.findIndex(isCurrentPath)
+
+      if (positionInList === -1) {
+        const currentVersionIndex = this.links.findIndex(element => element.routePath === this.basePath)
+
+        return currentVersionIndex === -1 ? 0 : currentVersionIndex
+      }
+
+      return positionInList
+    },
+  },
+  methods: {
+    async loadPolicies () {
+      this.error = undefined
+
+      try {
+        const response = await this.$api.getAllPoliciesByType({ policyType: this.policyType })
+        this.policies = response
+      } catch (error) {
+        this.error = error
+        console.error(error)
+      }
+    },
+    routePathForPolicy ({ activeFrom, isCurrentPolicy, isUpcomingPolicy }) {
+      if (isCurrentPolicy) {
+        return this.basePath
+      }
+
+      if (isUpcomingPolicy) {
+        return `${this.basePath}/upcoming`
+      }
+
+      return `${this.basePath}/${activeFrom}`
+    },
+    titleForPolicy ({ activeFrom, isCurrentPolicy, isUpcomingPolicy }) {
+      if (isCurrentPolicy) {
+        return 'Current version'
+      }
+
+      if (isUpcomingPolicy) {
+        return 'Upcoming version'
+      }
+
+      return activeFrom
+    },
+  },
+  mounted () {
+    this.loadPolicies()
   },
 }
+
 </script>
+
+<style scoped></style>

src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue

@@ -4,8 +4,18 @@
       An error occurred while trying to load the requested policy. Please try again later.
     </v-alert>
     <v-container class="fill-height" fluid v-if="!error">
+      <v-row v-if="isUpcomingPolicy" justify="center">
+        <v-col cols="11">
+          <v-alert type="info">
+            This is an upcoming version. You can find the
+            <router-link class="white--text" to="/hosting-policy">current version here</router-link>.
+          </v-alert>
+        </v-col>
+      </v-row>
+
       <v-row justify="center">
         <v-col cols="11" md="4" order-md="last">
+          <PolicyNavigationPanel basePath="/hosting-policy" policyType="hosting-policy" />
         </v-col>
 
         <v-col cols="11" md="8">
@@ -18,37 +28,72 @@
 
 <script>
 
+import PolicyNavigationPanel from '../Components/PolicyNavigationPanel.vue'
+
 export const versions = {
   'hosting-policy/version-1.vue': () => ({ component: import('./hosting-policy/version-1.vue') }),
 }
 
+const isFutureDate = (activeFrom) => {
+  if (activeFrom === null || activeFrom === undefined) {
+    return false
+  }
+
+  const date = new Date(`${activeFrom}T00:00:00Z`)
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+
+  return date > today
+}
+
 export default {
   name: 'HostingPolicyRenderer',
-  components: {},
+  components: {
+    PolicyNavigationPanel,
+  },
   computed: {
     policyActiveFrom: function () {
       return this.$route.params.activeFrom
     },
+    isUpcomingRoute: function () {
+      return this.$route.path === '/hosting-policy/upcoming'
+    },
+    isUpcomingPolicy: function () {
+      return isFutureDate(this.policyMetadata && this.policyMetadata.active_from)
+    },
   },
   data () {
     return {
       policy: undefined,
+      policyMetadata: undefined,
       error: undefined,
     }
   },
   methods: {
     async loadPolicy () {
+      this.policy = undefined
+      this.policyMetadata = undefined
+      this.error = undefined
+
       try {
-        const policyType = 'hosting-policy' // TODO read this from component property
+        const policyType = 'hosting-policy' // TODO for a generalized component, read this from component property
         const activeFrom = this.policyActiveFrom
+        let response
 
-        const response = await this.$api.policyByDate({ policyType, activeFrom })
+        if (this.isUpcomingRoute) {
+          response = await this.$api.getUpcomingPolicyByType({ policyType })
+        } else if (activeFrom === undefined) {
+          response = await this.$api.getCurrentPolicyByType({ policyType })
+        } else {
+          response = await this.$api.getPolicyByDate({ policyType, activeFrom })
+        }
 
-        const metadata = await response.metadata
+        const metadata = response.metadata
         const policy = versions[metadata.content_vue_file]
 
         if (policy !== undefined) {
           this.policy = policy
+          this.policyMetadata = metadata
         } else {
           this.error = 'missing policy'
         }
@@ -62,7 +107,10 @@ export default {
     this.loadPolicy()
   },
   watch: {
-    policyId: function () {
+    policyActiveFrom: function () {
+      this.loadPolicy()
+    },
+    isUpcomingRoute: function () {
       this.loadPolicy()
     },
   },