Merge pull request #89 from SpeciesFileGroup/development

Development
wbbaker · Jun 13, 2023 · 910356f · 910356f
2 parents 819057a + b5bc561
commit 910356f
Show file tree

Hide file tree

Showing 25 changed files with 441 additions and 99 deletions.
diff --git a/src/components/Clipboard/VClipboard.global.vue b/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>
diff --git a/src/components/Dropdown/Dropdown.global.vue b/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>
diff --git a/src/components/Icon/IconCheck.global.vue b/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>
diff --git a/src/components/Icon/IconClipboard.global.vue b/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>
diff --git a/src/components/Icon/IconJson.global.vue b/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>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/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>
diff --git a/src/components/Modal/VModal.global.vue b/src/components/Modal/VModal.global.vue
@@ -0,0 +1,55 @@
+<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"
+      @click.stop
+    >
+      <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>
diff --git a/src/modules/otus/components/DWCDownload.vue b/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" />

diff --git a/src/modules/otus/components/Panel/PanelContent/PanelContent.vue b/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 {

diff --git a/src/modules/otus/components/Panel/PanelDescendants/Descendants.vue b/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 }
 )