Update

config/header.yml

@@ -6,4 +6,7 @@
       link: /
 
     - label: About
-      link: /about
+      link: /about
+
+    - label: Updates
+      link: /updates

pages/components/RecentTable.vue

@@ -0,0 +1,104 @@
+<template>
+    <VCard>
+      <VCardContent>
+        <ClientOnly>
+          <VSpinner v-if="isLoading" />
+        </ClientOnly>
+        <VTable>
+          <VTableHeader>
+            <VTableHeaderRow>
+              <VTableHeaderCell
+                v-for="header in Object.values(attributes)"
+                :key="header"
+                >{{ header }}</VTableHeaderCell
+              >
+            </VTableHeaderRow>
+          </VTableHeader>
+          <VTableBody>
+            <VTableBodyRow
+              v-for="item in list"
+              :key="item.id"
+            >
+              <VTableBodyCell
+                v-for="attr in Object.keys(attributes)"
+                :key="attr"
+                v-html="item[attr]"
+              />
+            </VTableBodyRow>
+          </VTableBody>
+        </VTable>
+        <VPagination
+          class="mt-4"
+          v-model="pagination.page"
+          :total="pagination.total"
+          :per="pagination.per"
+          @update:modelValue="
+            (page) => {
+              loadList(page)
+            }
+          "
+        />
+      </VCardContent>
+    </VCard>
+  </template>
+
+  <script setup>
+  import { makeAPIRequest } from '@/utils';
+import { onBeforeMount, ref } from 'vue';
+  
+  const props = defineProps({
+    per: {
+      type: Number,
+      default: 10
+    },
+  
+    attributes: {
+      type: Object,
+      required: true
+    },
+  
+    parameters: {
+      type: Object,
+      required: true
+    },
+  
+    route: {
+      type: String,
+      required: true
+    }
+  })
+  
+  const list = ref([])
+  const isLoading = ref(false)
+  const pagination = ref({ page: 1, total: 0, per: props.per })
+  
+  async function loadList(page = 1) {
+    isLoading.value = true
+  
+    makeAPIRequest
+      .get(props.route, {
+        params: {
+          ...props.parameters,
+          per: props.per,
+          page
+        }
+      })
+      .then(({ data, headers }) => {
+        pagination.value = getPagination(headers)
+        list.value = data
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  }
+  
+  function getPagination(headers) {
+    return {
+      page: Number(headers['pagination-page']),
+      per: Number(headers['pagination-per-page']),
+      total: Number(headers['pagination-total'])
+    }
+  }
+  
+  onBeforeMount(loadList)
+  </script>

pages/components/RecentTaxonTable.vue

@@ -0,0 +1,108 @@
+<template>
+    <VCard>
+      <VCardContent>
+        <ClientOnly>
+          <VSpinner v-if="isLoading" />
+        </ClientOnly>
+        <VTable>
+          <VTableHeader>
+            <VTableHeaderRow>
+              <VTableHeaderCell>Taxon name</VTableHeaderCell>
+            </VTableHeaderRow>
+          </VTableHeader>
+          <VTableBody>
+            <VTableBodyRow
+              v-for="item in list"
+              :key="item.id"
+            >
+              <VTableBodyCell>
+                <RouterLink
+                  v-if="item.otu"
+                  :to="{ name: 'otus-id', params: { id: item.otu.id } }"
+                  v-html="[item.cached_html, item.cached_author_year].join(' ')"
+                />
+                <span
+                  v-else
+                  v-html="[item.cached_html, item.cached_author_year].join(' ')"
+                />
+              </VTableBodyCell>
+            </VTableBodyRow>
+          </VTableBody>
+        </VTable>
+        <VPagination
+          class="mt-4"
+          v-model="pagination.page"
+          :total="pagination.total"
+          :per="pagination.per"
+          @update:modelValue="
+            (page) => {
+              loadList(page)
+            }
+          "
+        />
+      </VCardContent>
+    </VCard>
+  </template>
+
+  <script setup>
+  import { makeAPIRequest } from '@/utils';
+import { onBeforeMount, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+  
+  const props = defineProps({
+    per: {
+      type: Number,
+      default: 10
+    },
+  
+    parameters: {
+      type: Object,
+      required: true
+    }
+  })
+  
+  const list = ref([])
+  const isLoading = ref(false)
+  const pagination = ref({ page: 1, total: 0, per: props.per })
+  
+  async function loadList(page = 1) {
+    isLoading.value = true
+  
+    makeAPIRequest
+      .get('/taxon_names', {
+        params: {
+          ...props.parameters,
+          extend: ['otus'],
+          per: props.per,
+          page
+        }
+      })
+      .then(async ({ data, headers }) => {
+        pagination.value = getPagination(headers)
+  
+        const response = await makeAPIRequest.get('/otus', {
+          params: {
+            taxon_name_id: data.map((item) => item.id)
+          }
+        })
+  
+        list.value = data.map((taxon) => ({
+          ...taxon,
+          otu: response.data.find((otu) => otu.taxon_name_id === taxon.id)
+        }))
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  }
+  
+  function getPagination(headers) {
+    return {
+      page: Number(headers['pagination-page']),
+      per: Number(headers['pagination-per-page']),
+      total: Number(headers['pagination-total'])
+    }
+  }
+  
+  onBeforeMount(loadList)
+  </script>

pages/updates.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="container mx-auto py-4">
+      <h1 class="text-4xl font-bold">Recent taxa added</h1>
+      <div class="flex flex-col gap-4 mt-4">
+        <RecentTaxonTable
+          :parameters="{
+            validity: true,
+            recent: true,
+            taxon_name_type: 'Protonym',
+            recent_target: 'created_at'
+          }"
+        />
+
+        <RecentTable
+          :attributes="{
+            cached: 'Source'
+          }"
+          route="/sources"
+          :parameters="{
+            in_project: true,
+            recent: true,
+            recent_target: 'created_at'
+          }"
+        />
+      </div>
+    </div>
+  </template>
+
+  <script setup>
+  import RecentTable from './components/Section/RecentTable.vue';
+import RecentTaxonTable from './components/Section/RecentTaxonTable.vue';
+  </script>