Add sitemap and otu request store

src/components/Dropdown/Dropdown.global.vue

@@ -8,12 +8,13 @@
     </button>
     <ul
       v-if="isVisible"
+      ref="element"
       class="bg-base-foreground absolute font-normal text-sm text-base-lighter right-0 z-10 mt-2 w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
       <li
         v-for="item in items"
         :key="item.label"
-        class="block w-full px-4 py-2 text-left text-sm cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 box-border"
+        class="block w-full px-4 py-2 text-left cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 box-border border-b border-base-border last:border-b-0"
         @click="itemClicked(item)"
       >
         {{ item.label }}
@@ -23,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 defineProps({
   items: {
@@ -32,6 +33,7 @@ defineProps({
   }
 })
 
+const element = ref(null)
 const isVisible = ref(false)
 
 const toggleMenu = () => {
@@ -43,4 +45,23 @@ const itemClicked = (item) => {
 
   item.action()
 }
+
+function handleEvent(event) {
+  if (!event.target || !element.value?.contains(event.target)) {
+    isVisible.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handleEvent, {
+    passive: true,
+    capture: true
+  })
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', handleEvent, {
+    capture: true
+  })
+})
 </script>

src/components/Icon/IconJson.global.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M5 3h2v2H5v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 0 0-2-2H0v-2h1a2 2 0 0 0 2-2V5a2 2 0 0 1 2-2m14 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2a2 2 0 0 1-2-2V5h-2V3h2m-7 12a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1Z"
+    />
+  </svg>
+</template>

src/components/ImageViewer/ImageViewer.global.vue

@@ -1,49 +1,41 @@
 <template>
-  <div 
+  <div
     class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-foreground"
   >
-    <div 
+    <div
       class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
       @click.stop
     >
-      <div class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle">
+      <div
+        class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-44 left-0 right-0 flex justify-center align-middle"
+      >
         <VSpinner v-if="isLoading" />
         <img
           ref="imageElement"
           class="mx-auto cursor-zoom-out w-auto max-w-full max-h-full h-auto my-auto"
           :src="image.original"
           @click="emit('close')"
-        >
+        />
 
         <ControlNextImage
           v-if="next"
           class="right-0 absolute my-auto top-1/2 -translate-y-1/2"
           @click="emit('next')"
         />
-        <ControlPreviousImage 
+        <ControlPreviousImage
           v-if="previous"
           class="left-0 absolute my-auto top-1/2 -translate-y-1/2"
           @click="emit('previous')"
         />
       </div>
     </div>
     <div class="bottom-0 fixed max-w-full w-full">
-      <div 
-        class="
-        text-base-content
-        text-sm
-        attributions
-        p-6
-        align-middle
-        flex
-        justify-between
-        flex-col
-        text-center
-      "
+      <div
+        class="text-base-content text-sm attributions p-6 align-middle flex justify-between flex-col text-center"
       >
         <ImageDepictions
           class="my-auto"
-          :depictions="image.depictions" 
+          :depictions="image.depictions"
         />
         <ImageAttribution
           class="my-auto"
@@ -64,9 +56,7 @@
         />
       </div>
     </div>
-    <ImageToolbar
-      class="w-full absolute top-0 h-12 left-0"
-    >
+    <ImageToolbar class="w-full absolute top-0 h-12 left-0 items-center">
       <ImageViewerCounter
         :current-image="index"
         :total-images="images.length"
@@ -112,28 +102,23 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits([
-  'close',
-  'previous',
-  'next',
-  'selectIndex'
-])
+const emit = defineEmits(['close', 'previous', 'next', 'selectIndex'])
 
 const handleKeyboard = ({ key }) => {
   switch (key) {
     case 'ArrowLeft':
       if (props.previous) {
         emit('previous')
       }
-      break;
+      break
     case 'ArrowRight':
       if (props.next) {
         emit('next')
       }
-      break;
+      break
     case 'Escape':
       emit('close')
-      break;
+      break
   }
 }
 
@@ -144,17 +129,17 @@ const image = computed(() => props.images[props.index])
 document.addEventListener('keyup', handleKeyboard)
 
 onMounted(() => {
-  imageElement.value.addEventListener('load', () => isLoading.value = false)
+  imageElement.value.addEventListener('load', () => (isLoading.value = false))
   document.body.classList.add('overflow-hidden')
 })
 
-onUnmounted(() => { 
+onUnmounted(() => {
   document.removeEventListener('keyup', handleKeyboard)
   document.body.classList.remove('overflow-hidden')
 })
 
 watch(
-  () => props.index, 
-  () => isLoading.value = true
+  () => props.index,
+  () => (isLoading.value = true)
 )
 </script>

src/components/Modal/VModal.global.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="fixed top-0 left-0 w-full h-screen max-h-screen flex flex-col justify-center bg-black bg-opacity-50 z-[2000]"
+    @click="emit('close')"
+    @key.esc.stop="emit('close')"
+  >
+    <div
+      class="h-full md:h-auto mx-auto md:max-h-[70vh] bg-base-foreground container"
+    >
+      <div
+        class="w-full p-4 md:p-4 flex flex-row box-border justify-between items-center"
+      >
+        <slot name="header">
+          <span />
+        </slot>
+        <IconClose
+          class="w-6 h-6 cursor-pointer opacity-50"
+          @click="() => emit('close')"
+        />
+      </div>
+      <div
+        class="bg-base-foreground overflow-x-auto h-full md:h-auto max-h-full"
+      >
+        <slot />
+      </div>
+      <div>
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+
+const emit = defineEmits(['close'])
+
+const handleKeys = (e) => {
+  if (e.key === 'Escape') {
+    e.stopPropagation()
+    emit('close')
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeys)
+  document.body.classList.add('overflow-hidden')
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeys)
+  document.body.classList.remove('overflow-hidden')
+})
+</script>

src/modules/otus/components/DWCDownload.vue

@@ -1,7 +1,7 @@
 <template>
   <VButton
     primary
-    class="text-sm flex"
+    class="text-sm flex items-center"
     @click="download"
   >
     <IconDownload class="w-4 h-4 mr-1" />

src/modules/otus/components/Panel/PanelContent/PanelContent.vue

@@ -11,6 +11,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
 import TaxonWorks from '../../../services/TaxonWorks'
 import ContentTopic from './PanelContentTopic.vue'
 
@@ -39,7 +40,9 @@ watch(
   () => props.otuId,
   (id) => {
     if (id) {
-      TaxonWorks.getOtuContent(id).then(({ data }) => {
+      useOtuPageRequest('panel:content', () =>
+        TaxonWorks.getOtuContent(id)
+      ).then(({ data }) => {
         contents.value = data
       })
     } else {

src/modules/otus/components/Panel/PanelDropdown.vue

@@ -0,0 +1,57 @@
+<template>
+  <Dropdown :items="menuOptions">
+    <template #button>
+      <IconHamburger class="text-base-soft h-4" />
+    </template>
+  </Dropdown>
+  <VModal
+    v-if="isModalVisible"
+    @close="isModalVisible = false"
+  >
+    <template #header>
+      <h3>JSON Data</h3>
+    </template>
+    <div
+      class="p-4 font-normal"
+      v-if="request"
+    >
+      <h3 class="pb-2 text-sm">
+        URL: <a :href="request.url">{{ request.url }}</a>
+      </h3>
+      <p
+        class="bg-base-background p-2 text-sm font-normal whitespace-pre-wrap"
+        v-html="JSON.stringify(request.data, null, 4)"
+      />
+    </div>
+  </VModal>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useOtuPageRequestStore } from '../../store/request'
+
+const props = defineProps({
+  panelKey: {
+    type: String,
+    required: true
+  },
+
+  menuOptions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const request = computed(() => store.getRequest(props.panelKey))
+
+const store = useOtuPageRequestStore()
+const isModalVisible = ref(false)
+
+const menuOptions = computed(() => [
+  ...props.menuOptions,
+  {
+    label: 'JSON Data',
+    action: () => (isModalVisible.value = true)
+  }
+])
+</script>

src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue

@@ -4,7 +4,6 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
 import { useOtuStore } from '@/modules/otus/store/store'
 import PanelNomenlcatureCitations from './PanelNomenclatureCitations.vue'
 import PanelNomenclatureReferences from './PanelNomenclatureReferences.vue'

src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue

@@ -2,11 +2,10 @@
   <VCard>
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Nomenclature ({{ list.length }})</h2>
-      <Dropdown :items="menuOptions">
-        <template #button>
-          <IconHamburger class="text-base-soft h-4" />
-        </template>
-      </Dropdown>
+      <PanelDropdown
+        :menu-options="menuOptions"
+        panel-key="taxonomy"
+      />
     </VCardHeader>
 
     <ul class="text-sm">
@@ -49,6 +48,7 @@ import { ref, computed } from 'vue'
 import { splitList } from './splitList'
 import CitationRow from './PanelCitationRow.vue'
 import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+import PanelDropdown from '../PanelDropdown.vue'
 
 const MAX_CITATIONS = 2
 

src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue

@@ -2,11 +2,10 @@
   <VCard>
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">Nomenclature references ({{ list.length }})</h2>
-      <Dropdown :items="menuOptions">
-        <template #button>
-          <IconHamburger class="text-base-soft h-4" />
-        </template>
-      </Dropdown>
+      <PanelDropdown
+        :menu-options="menuOptions"
+        panel-key="taxonomy"
+      />
     </VCardHeader>
 
     <ul class="text-sm">
@@ -45,6 +44,7 @@ import { computed, ref } from 'vue'
 import { splitList } from './splitList'
 import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
 import PanelReferenceRow from './PanelReferenceRow.vue'
+import PanelDropdown from '../PanelDropdown.vue'
 
 const MAX_REFERENCES = 2