Fix fake component register. Add clipboard

src/components/Clipboard/VClipboard.global.vue

@@ -0,0 +1,49 @@
+<template>
+  <VButton
+    class="px-2 py-2 rounded-full"
+    primary
+    @click="copyText"
+  >
+    <IconCheck
+      v-if="isCopied"
+      class="w-4 h-4"
+    />
+    <IconClipboard
+      v-else
+      class="w-4 h-4"
+    />
+  </VButton>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true
+  },
+
+  delay: {
+    type: Number,
+    default: 2000
+  }
+})
+
+const isCopied = ref(false)
+let timeoutId
+
+function copyText() {
+  navigator.clipboard.writeText(props.text).then(() => {
+    isCopied.value = true
+
+    timeoutId = setTimeout(() => {
+      isCopied.value = false
+    }, props.delay)
+  })
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutId)
+})
+</script>

src/components/Icon/IconCheck.global.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M4.5 12.75l6 6 9-13.5"
+    />
+  </svg>
+</template>

src/components/Icon/IconClipboard.global.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"
+    />
+  </svg>
+</template>

src/components/Modal/VModal.global.vue

@@ -6,6 +6,7 @@
   >
     <div
       class="h-full md:h-auto mx-auto md:max-h-[70vh] bg-base-foreground container"
+      @click.stop
     >
       <div
         class="w-full p-4 md:p-4 flex flex-row box-border justify-between items-center"

src/modules/otus/components/Panel/PanelDescendants/Descendants.vue

@@ -1,7 +1,8 @@
 <template>
   <VCard>
-    <VCardHeader>
-      <h1 class="text-md">Descendants and synonyms</h1>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Descendants and synonyms</h2>
+      <PanelDropdown panel-key="panel:descendants" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <ul class="tree ml-2">
@@ -24,6 +25,8 @@
 import { ref, watch } from 'vue'
 import DescendantsTree from './DescendantsTree.vue'
 import TaxonWorks from '../../../services/TaxonWorks'
+import PanelDropdown from '../PanelDropdown.vue'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
 
 const props = defineProps({
   otuId: {
@@ -41,11 +44,11 @@ watch(
       return
     }
 
-    TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 }).then(
-      ({ data }) => {
-        taxonomy.value = data
-      }
-    )
+    useOtuPageRequest('panel:descendants', () =>
+      TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 })
+    ).then(({ data }) => {
+      taxonomy.value = data
+    })
   },
   { immediate: true }
 )

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

@@ -12,16 +12,22 @@
       <h3>JSON Data</h3>
     </template>
     <div
-      class="p-4 font-normal"
+      class="p-5 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 class="relative">
+        <p
+          class="bg-base-background p-2 text-sm font-normal whitespace-pre-wrap"
+          v-html="JSON.stringify(request.data, null, 4)"
+        />
+        <VClipboard
+          class="absolute right-2 top-2 opacity-75"
+          :text="JSON.stringify(request.data, null, 2)"
+        />
+      </div>
     </div>
   </VModal>
 </template>

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

@@ -10,15 +10,15 @@
           :geojson="store.distribution.geojson"
           @geojson:ready="() => (isLoading = false)"
         />
-      </ClientOnly>
-      <VButton
-        class="h-6 text-sm absolute right-3 top-3 z-[400]"
-        primary
-        @click="() => (isOtuSearchVisible = true)"
-      >
-        Search
-      </VButton>
-      <ClientOnly>
+
+        <VButton
+          class="h-6 text-sm absolute right-3 top-3 z-[400]"
+          primary
+          @click="() => (isOtuSearchVisible = true)"
+        >
+          Search
+        </VButton>
+
         <OtuSearch
           v-if="isOtuSearchVisible"
           :otu="otu"

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

@@ -1,7 +1,8 @@
 <template>
   <VCard>
-    <VCardHeader>
-      <h1 class="text-md">Type</h1>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Type</h2>
+      <PanelDropdown panel-key="panel:type" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <p v-html="typeDesignationLabel" />
@@ -11,6 +12,8 @@
 
 <script setup>
 import { ref, watch, computed } from 'vue'
+import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
+import PanelDropdown from '../PanelDropdown.vue'
 import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
@@ -35,8 +38,9 @@ watch(
     if (!props.taxonId) {
       return
     }
-
-    TaxonWorks.getTaxonTypeDesignation(props.taxonId).then(({ data }) => {
+    useOtuPageRequest('panel:type', () =>
+      TaxonWorks.getTaxonTypeDesignation(props.taxonId)
+    ).then(({ data }) => {
       typeDesignation.value = data.type_taxon_name_relationship || {}
     })
   },

src/modules/otus/store/request.js

@@ -23,10 +23,12 @@ export const useOtuPageRequestStore = defineStore('otuPageRequest', {
   },
 
   actions: {
-    setRequest(key, response) {
+    setRequest(key, { data, request }) {
+      const url = request.res?.responseUrl || request.responseURL
+
       this.requests[key] = {
-        url: response.request.responseURL,
-        data: response.data
+        url,
+        data
       }
     }
   }

src/modules/otus/views/Index.vue

@@ -32,7 +32,9 @@
             <TaxaInfo v-if="isReady" />
           </VSkeleton>
           <div class="flex flex-row gap-2">
-            <SiteMap />
+            <ClientOnly>
+              <SiteMap />
+            </ClientOnly>
             <DWCDownload
               v-if="isReady"
               :otu="otu"

src/ssr/utils/registerFakeClientComponents.js

@@ -1,10 +1,12 @@
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 import glob from 'glob'
 
 export function registerFakeClientComponents(app) {
   const filePaths = glob.sync('src/components/**/*.client.vue')
   const vueComponent = defineComponent({
-    template: '<div></div>'
+    setup() {
+      return h('div')
+    }
   })
 
   filePaths.forEach((path) => {