@sfgrp/taxonpages 0.1.0

package/src/modules/bibliography/components/VSlider.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="year-slider-container text-base-content">
+    <div class="slider-wrapper">
+      <div class="slider-track bg-base-muted">
+        <div
+          class="slider-range"
+          :style="rangeStyle"
+        ></div>
+
+        <input
+          class="slider-input slider-input-start"
+          type="range"
+          :min="props.min"
+          :max="props.max"
+          v-model.number="startYear"
+          @input="updateRange"
+        />
+
+        <input
+          class="slider-input slider-input-end"
+          type="range"
+          :min="props.min"
+          :max="props.max"
+          v-model.number="endYear"
+          @input="updateRange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+
+const props = defineProps({
+  min: {
+    type: Number,
+    required: true
+  },
+
+  max: {
+    type: Number,
+    required: true
+  }
+})
+
+const startYear = defineModel('start', {
+  type: Number,
+  required: true
+})
+const endYear = defineModel('end', {
+  type: Number,
+  required: true
+})
+
+const rangeStyle = computed(() => {
+  const start = ((startYear.value - props.min) / (props.max - props.min)) * 100
+  const end = ((endYear.value - props.min) / (props.max - props.min)) * 100
+
+  return {
+    left: `${Math.min(start, end)}%`,
+    width: `${Math.abs(end - start)}%`
+  }
+})
+
+const updateRange = () => {
+  if (startYear.value > endYear.value) {
+    ;[startYear.value, endYear.value] = [endYear.value, startYear.value]
+  }
+}
+
+onMounted(() => {
+  updateRange()
+})
+</script>
+
+<style scoped>
+.slider-wrapper {
+  position: relative;
+}
+
+.slider-track {
+  position: relative;
+  height: 6px;
+  border-radius: 3px;
+  margin: 0.8rem 0;
+}
+
+.slider-range {
+  position: absolute;
+  height: 100%;
+  background: rgb(var(--color-primary));
+  border-radius: 3px;
+  transition: all 0.2s ease;
+}
+
+.slider-input {
+  position: absolute;
+  width: 100%;
+  height: 6px;
+  background: transparent;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  touch-action: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: rgb(var(--color-primary));
+  border-radius: 50%;
+  cursor: pointer;
+  border: 3px solid #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.slider-input::-webkit-slider-thumb:hover {
+  background: rgb(var(--color-primary));
+  transform: scale(1.1);
+}
+
+.slider-input::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: rgb(var(--color-primary));
+  border-radius: 50%;
+  cursor: pointer;
+  border: 3px solid rgb(var(--color-primary-content));
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.slider-input::-moz-range-thumb:hover {
+  background: rgb(var(--color-primary));
+  transform: scale(1.1);
+}
+
+.slider-input-end {
+  pointer-events: none;
+}
+
+.slider-input-end::-webkit-slider-thumb {
+  pointer-events: all;
+}
+
+.slider-input-end::-moz-range-thumb {
+  pointer-events: all;
+}
+</style>

package/src/modules/bibliography/components/YearPicker.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <InputText
+      class="w-14 max-w-14 text-sm"
+      :value="inputValue"
+      @change="setValue"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  min: {
+    type: Number,
+    required: true
+  },
+
+  max: {
+    type: Number,
+    required: true
+  }
+})
+
+const inputValue = defineModel({
+  type: Number,
+  required: true
+})
+
+function setValue(e) {
+  const n = Number(e.target.value)
+
+  if (n < props.min) {
+    inputValue.value = props.min
+  } else if (n > props.max) {
+    inputValue.value = props.max
+  } else {
+    inputValue.value = n
+  }
+}
+</script>

package/src/modules/bibliography/router/index.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'resources-tw-filter-bibliography',
+    path: '/resources/tw/filter/bibliography',
+    component: () => import('../views/index.vue')
+  }
+]

package/src/modules/bibliography/utils/getPagination.js

@@ -0,0 +1,7 @@
+export function getPagination(headers) {
+  return {
+    page: Number(headers['pagination-page']),
+    per: Number(headers['pagination-per-page']),
+    total: Number(headers['pagination-total'])
+  }
+}

package/src/modules/bibliography/views/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="container mx-auto box-border">
+    <h1 class="text-4xl px-4 md:px-0 mt-4 mb-6 font-bold">Bibliography</h1>
+    <ClientOnly>
+      <VSpinner
+        v-if="isLoading"
+        full-screen
+      />
+    </ClientOnly>
+    <VCard class="mb-4">
+      <VCardContent>
+        <div
+          class="flex flex-col md:flex-row justify-center items-center gap-4 md:gap-2 text-sm"
+        >
+          <div class="flex flex-col w-full">
+            <label>In citation</label>
+            <InputText
+              class="w-full"
+              type="text"
+              placeholder='Search anywhere in the citation... for example: "Charles Darwin Archives"'
+              v-model="parameters.query_term"
+              @keypress.enter="() => loadList()"
+            />
+          </div>
+          <div class="flex flex-col w-full md:w-96">
+            <label>Author(s)</label>
+            <InputText
+              class="w-full"
+              type="text"
+              placeholder="Type..."
+              v-model="parameters.author"
+              @keypress.enter="() => loadList()"
+            />
+          </div>
+          <div class="w-full md:w-auto">
+            <span>Published between:</span>
+            <div class="flex flex-row gap-2">
+              <YearPicker
+                v-model="parameters.year_start"
+                :min="MIN_YEAR"
+                :max="MAX_YEAR"
+              />
+              <VSlider
+                class="w-full md:w-64"
+                :min="MIN_YEAR"
+                :max="MAX_YEAR"
+                v-model:start="parameters.year_start"
+                v-model:end="parameters.year_end"
+              />
+              <YearPicker
+                v-model="parameters.year_end"
+                :min="MIN_YEAR"
+                :max="MAX_YEAR"
+              />
+            </div>
+          </div>
+          <div class="flex flex-row gap-2 md:self-end">
+            <VButton
+              class="text-sm py-1.5 border border-primary-color"
+              primary
+              @click="() => loadList()"
+              >Search</VButton
+            >
+            <VButton
+              class="text-sm py-1.5 border border-primary-color"
+              primary
+              @click="() => reset()"
+            >
+              Reset
+            </VButton>
+          </div>
+        </div>
+      </VCardContent>
+    </VCard>
+
+    <VCard>
+      <VCardContent>
+        <div class="flex flex-row justify-between items-center mb-4">
+          <div class="flex flex-col md:flex-row gap-3 md:items-center">
+            <VPagination
+              v-model="pagination.page"
+              :total="pagination.total"
+              :per="pagination.per"
+              @update:modelValue="
+                (page) => {
+                  loadList(page)
+                }
+              "
+            />
+            <VPaginationInfo :pagination="pagination" />
+          </div>
+          <DropdownMenu :request="requestData" />
+        </div>
+        <VTable>
+          <VTableHeader>
+            <VTableHeaderRow>
+              <VTableHeaderCell class="w-2" />
+              <VTableHeaderCell> Sources </VTableHeaderCell>
+            </VTableHeaderRow>
+          </VTableHeader>
+          <VTableBody>
+            <VTableBodyRow
+              v-for="item in list"
+              :key="item.id"
+            >
+              <VTableBodyCell
+                class="pr-1"
+                title="Show OTUs"
+              >
+                <OtuModal
+                  :source-id="item.id"
+                  :label="item.cached"
+                />
+              </VTableBodyCell>
+              <VTableBodyCell
+                class="break-all"
+                v-html="item.cached"
+              />
+            </VTableBodyRow>
+          </VTableBody>
+        </VTable>
+        <div class="flex flex-col md:flex-row gap-3 md:items-center mt-4">
+          <VPagination
+            v-model="pagination.page"
+            :total="pagination.total"
+            :per="pagination.per"
+            @update:modelValue="
+              (page) => {
+                loadList(page)
+              }
+            "
+          />
+          <VPaginationInfo :pagination="pagination" />
+        </div>
+      </VCardContent>
+    </VCard>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { makeAPIRequest } from '@/utils'
+import { getPagination } from '../utils/getPagination'
+import DropdownMenu from '../components/DropdownMenu.vue'
+import YearPicker from '../components/YearPicker.vue'
+import VSlider from '../components/VSlider.vue'
+import OtuModal from '../components/OtuModal.vue'
+
+const PER = 50
+const MIN_YEAR = 1650
+const MAX_YEAR = new Date().getFullYear()
+
+const route = useRoute()
+const router = useRouter()
+
+const parameters = ref({})
+const list = ref([])
+const isLoading = ref(false)
+const pagination = ref({ page: 1, total: 0, per: PER })
+const requestData = ref()
+
+async function loadList(page = 1) {
+  isLoading.value = true
+
+  makeAPIRequest
+    .get('/sources', {
+      params: {
+        in_project: true,
+        page,
+        per: pagination.value.per,
+        ...parameters.value
+      }
+    })
+    .then(({ data, headers, request }) => {
+      pagination.value = getPagination(headers)
+      list.value = data
+
+      requestData.value = {
+        data,
+        url: request.responseURL
+      }
+
+      setQuery()
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+function setParameters(data = {}) {
+  parameters.value = {
+    year_start: Number(data.year_start || 1650),
+    year_end: Number(data.year_end || 2025),
+    author: data.author,
+    query_term: data.query_term
+  }
+}
+
+function setPagination(data = {}) {
+  pagination.value = {
+    page: Number(data.page) || 1,
+    total: 0,
+    per: PER
+  }
+}
+
+function reset() {
+  setParameters()
+  setPagination()
+  loadList()
+}
+
+function setQuery() {
+  router.push({
+    query: { ...parameters.value, page: pagination.value.page }
+  })
+}
+
+onBeforeMount(() => {
+  setParameters(route.query)
+  setPagination(route.query)
+  loadList(pagination.value.page)
+})
+</script>

package/src/modules/home/router/index.js

@@ -0,0 +1,8 @@
+export default [
+  {
+    name: 'homepage',
+    path: '/',
+    alias: '/home',
+    component: import('../views/index.vue')
+  }
+]

package/src/modules/home/views/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="container mx-auto text-center relative top-1/4">
+    <h1 class="text-4xl sm:text-5xl text-base-lighter">
+      Welcome to TaxonPages
+    </h1>
+    <p class="m-4 my-8 text-xl">
+      It seems you don't have a index or home file in your /pages folder, create
+      one to replace this page.
+    </p>
+  </div>
+</template>

package/src/modules/httpErrorPages/router/index.js

@@ -0,0 +1,18 @@
+export default [
+  {
+    path: '/500',
+    name: 'httpError500',
+    component: () => import('../view/500.vue'),
+    meta: {
+      statusCode: 500
+    }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'httpError404',
+    component: () => import('../view/404.vue'),
+    meta: {
+      statusCode: 404
+    }
+  }
+]

package/src/modules/httpErrorPages/view/404.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="container mx-auto text-center relative top-1/4">
+    <h1 class="text-7xl text-base-lighter">404</h1>
+    <p>Page not found.</p>
+    <p class="m-4 my-10 text-xl">
+      Uh oh, we can't seem to find the page you're looking for. Try going back
+      to the previous page.
+    </p>
+  </div>
+</template>

package/src/modules/httpErrorPages/view/500.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="container mx-auto text-center relative top-1/4">
+    <h1 class="text-7xl text-base-lighter">500</h1>
+    <p>Internal Server Error.</p>
+    <p class="m-4 my-10 text-xl">
+      Uh oh, looks like something went wrong!<br />
+      We track these errors automatically, but if the problem persists feel free
+      to contact us.
+    </p>
+  </div>
+</template>

package/src/modules/interactiveKeys/router/index.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'interactive-keys-id',
+    path: '/interactive_keys/:id',
+    component: () => import('../views/InteractiveKey.vue')
+  }
+]

package/src/modules/interactiveKeys/views/InteractiveKey.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="flex flex-col h-full overflow-y-hidden container mx-auto interactive-key-container"
+  >
+    <ClientOnly>
+      <VueInteractiveKey v-bind="options">
+        <template #remaining-item="{ item }">
+          <RouterLink
+            v-if="item.observationObjectType === OTU"
+            :to="{ name: 'otus-id', params: { id: item.observationObjectId } }"
+            v-html="item.objectTag"
+          />
+          <span
+            v-else
+            v-html="item.objectTag"
+          />
+        </template>
+        <template #eliminated-item="{ item }">
+          <RouterLink
+            v-if="item.observationObjectType === OTU"
+            :to="{ name: 'otus-id', params: { id: item.observationObjectId } }"
+            v-html="item.objectTag"
+          />
+          <span
+            v-else
+            v-html="item.objectTag"
+          />
+        </template>
+      </VueInteractiveKey>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+import { OTU } from '@/constants/objectTypes.js'
+import { VueInteractiveKey } from '@sfgrp/distinguish'
+import '@sfgrp/distinguish/dist/distinguish.css'
+
+const route = useRoute()
+
+const options = ref({
+  observationMatrixId: route.params.id,
+  apiConfig: {
+    baseURL: __APP_ENV__.url,
+    projectToken: __APP_ENV__.project_token
+  }
+})
+</script>
+
+<style>
+:root {
+  --distinguish-primary-content-color: rgb(var(--color-primary-content));
+  --distinguish-bg-color: rgb(var(--color-base-foreground));
+  --distinguish-bg-panel-color: rgb(var(--color-base-foreground));
+  --distinguish-bg-modal-color: rgb(var(--color-base-foreground));
+  --distinguish-bg-disabled-color: #e5e5e5;
+  --distinguish-disabled-color: #999;
+  --distinguish-error-color: rgb(var(--color-danger));
+  --distinguish-primary-color: rgb(var(--color-primary));
+  --distinguish-border-color: #cccccc;
+  --distinguish-link-color: rgb(var(--color-secondary));
+  --distinguish-btn-medium-size: 20px;
+}
+
+.interactive-key-container {
+  max-height: calc(100vh - 12rem);
+
+  hr {
+    @apply my-4;
+  }
+}
+
+.distinguish-grid {
+  @apply shadow-md rounded border-base-muted;
+}
+
+.distinguish-header-bar {
+  @apply rounded-t-md;
+}
+
+.distinguish-app-container {
+  h2 {
+    @apply text-lg my-2;
+  }
+}
+
+.distinguish-app-container {
+  color: rgb(var(--color-base-content));
+}
+
+.distinguish-modal-header h3 {
+  @apply text-lg;
+}
+
+.distinguish-btn {
+  @apply px-4 py-1 rounded-none text-sm;
+}
+
+.distinguish-title {
+  @apply text-xl my-4;
+}
+
+.distinguish-row-filter-buttons {
+  @apply my-4;
+}
+</style>

package/src/modules/keys/components/MetadataModal.vue

@@ -0,0 +1,53 @@
+<template>
+  <VButton
+    primary
+    class="!px-1 py-1"
+    circle
+    title="Metadata"
+    @click="isModalVisible = true"
+  >
+    <IconInformation class="w-4 h-4" />
+  </VButton>
+  <VModal
+    v-if="isModalVisible"
+    @close="() => (isModalVisible = false)"
+  >
+    <template #header>
+      <h3 class="font-medium">Metadata</h3>
+    </template>
+    <div class="p-4 pt-0">
+      <VTable>
+        <VTableHeader>
+          <VTableHeaderRow>
+            <VTableHeaderCell>Data</VTableHeaderCell>
+            <VTableHeaderCell></VTableHeaderCell>
+          </VTableHeaderRow>
+        </VTableHeader>
+        <VTableBody>
+          <VTableBodyRow
+            v-for="[key, value] in Object.entries(metadata)"
+            :key="key"
+          >
+            <VTableBodyCell class="capitalize">
+              {{ key.replaceAll('_', ' ') }}
+            </VTableBodyCell>
+            <VTableBodyCell>{{ value }}</VTableBodyCell>
+          </VTableBodyRow>
+        </VTableBody>
+      </VTable>
+    </div>
+  </VModal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  metadata: {
+    type: Object,
+    required: true
+  }
+})
+
+const isModalVisible = ref(false)
+</script>

package/src/modules/keys/router/index.js

@@ -0,0 +1,7 @@
+export default [
+  {
+    name: 'keys-id',
+    path: '/keys/:id',
+    component: () => import('../views/keyId.vue')
+  }
+]