Merge pull request #23 from SpeciesFileGroup/development

Development

package.json

@@ -1,30 +1,31 @@
 {
   "name": "taxonpages",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
-    "axios": "^1.1.3",
+    "axios": "^1.3.4",
     "js-yaml": "^4.1.0",
-    "leaflet": "^1.9.2",
-    "vue": "^3.2.41",
+    "leaflet": "^1.9.3",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.7",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.26.0",
-    "eslint-plugin-vue": "^9.7.0",
-    "postcss": "^8.4.18",
-    "sass": "^1.56.0",
-    "tailwindcss": "^3.2.1",
-    "vite": "^3.2.2",
-    "vite-plugin-md": "^0.20.4",
-    "vite-plugin-pages": "^0.27.1"
+    "@tailwindcss/typography": "^0.5.9",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.35.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "postcss": "^8.4.21",
+    "sass": "^1.58.3",
+    "tailwindcss": "^3.2.7",
+    "vite": "^4.1.4",
+    "vite-plugin-md": "^0.21.5",
+    "vite-plugin-pages": "^0.28.0"
   }
 }

postcss.config.cjs

@@ -0,0 +1,17 @@
+const fs = require('fs')
+const {
+  userTailwindConfigPath,
+  defaultTailwindConfigPath
+} = require('./src/constants/configPaths.cjs')
+
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {
+      config: fs.existsSync(userTailwindConfigPath)
+        ? userTailwindConfigPath
+        : defaultTailwindConfigPath
+    },
+    autoprefixer: {}
+  }
+}

src/components/Icon/IconHamburger.global.vue

@@ -1,7 +1,6 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    class="h-6 w-6"
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -15,5 +14,4 @@
   </svg>
 </template>
 
-<script setup>
-</script>
+<script setup></script>

src/constants/configPaths.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  userTailwindConfigPath: './config/vendor/tailwind.config.cjs',
+  defaultTailwindConfigPath: './tailwind.config.cjs'
+}

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

@@ -1,23 +1,18 @@
 <template>
   <VCard>
     <VCardHeader class="flex justify-between">
-      <h1 class="text-md">
-        Nomenclature, citations ({{ citations.length }})
-      </h1>
-      <Dropdown
-        :items="menuOptions"
-      >
+      <h2 class="text-md">Nomenclature ({{ citations.length }})</h2>
+      <Dropdown :items="menuOptions">
         <template #button>
-          <IconHamburger class="text-base-soft h-3" />
+          <IconHamburger class="text-base-soft h-4" />
         </template>
       </Dropdown>
     </VCardHeader>
 
-    <div class="text-sm">
+    <ul class="text-sm">
       <CitationRow
         v-for="citation in citationList.first"
-        :key="citation.id"
-        ref="rowRefs"
+        :key="citation.label"
         :citation="citation"
       />
 
@@ -30,21 +25,30 @@
         <div v-show="showAll">
           <CitationRow
             v-for="citation in citationList.middle"
-            :key="citation.id"
-            ref="rowRefs"
+            :key="citation.label"
             :citation="citation"
           />
         </div>
       </AnimationOpacity>
 
       <CitationRow
         v-for="citation in citationList.last"
-        :key="citation.id"
-        ref="rowRefs"
+        :key="citation.label"
         :citation="citation"
-        class="last:border-b-0"
       />
-    </div>
+    </ul>
+  </VCard>
+  <VCard>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Nomenclature references ({{ sources.length }})</h2>
+    </VCardHeader>
+    <ul class="text-sm">
+      <PanelReferenceRow
+        v-for="source in sources"
+        :key="source"
+        :source="source"
+      />
+    </ul>
   </VCard>
 </template>
 
@@ -53,24 +57,25 @@ import { ref, watch, computed } from 'vue'
 import TaxonWorks from '../../../services/TaxonWorks'
 import CitationRow from './PanelCitationRow.vue'
 import CitationRowShowMore from './PanelCitationShowMore.vue'
+import PanelReferenceRow from './PanelReferenceRow.vue'
 
-const MAX_CITATIONS = 3
+const MAX_CITATIONS = 5
 
 const props = defineProps({
   otuId: {
     type: [Number, String],
     required: true
   },
 
-  taxon: {
-    type: Object,
+  taxonId: {
+    type: [Number, String],
     required: true
   }
 })
 
-const rowRefs = ref([])
 const showAll = ref(false)
 const citations = ref([])
+const sources = ref([])
 const citationList = computed(() => {
   const copyArr = citations.value.slice()
   const first = copyArr.splice(0, MAX_CITATIONS)
@@ -86,37 +91,22 @@ const citationList = computed(() => {
 
 const menuOptions = computed(() => [
   {
-    label: showAll.value
-      ? 'Show less'
-      : 'Show all',
-    action: () => showAll.value = !showAll.value
-  },
-  {
-    label: 'Expand',
-    action: () => changeRowExpandedState(true)
-  },
-  {
-    label: 'Collapse',
-    action: () => changeRowExpandedState(false)
+    label: showAll.value ? 'Show less' : 'Show all',
+    action: () => (showAll.value = !showAll.value)
   }
 ])
 
 watch(
-  () => props.otuId,
+  () => props.taxonId,
   async () => {
-    if (!props.otuId) { return }
-    const list = (await TaxonWorks.getTaxonNameCitations(props.otuId)).data
+    if (!props.taxonId) {
+      return
+    }
+    const { data } = await TaxonWorks.getTaxonNameCitations(props.taxonId)
 
-    citations.value = !props.taxon.is_valid
-      ? list.filter(c => c.names.includes(props.taxon.full_name_tag))
-      : list
+    citations.value = data.timeline
+    sources.value = data.sources
   },
   { immediate: true }
 )
-
-const changeRowExpandedState = value => {
-  rowRefs.value.forEach(component => {
-    component.setExpanded(value)
-  })
-}
 </script>

src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue

@@ -1,69 +1,23 @@
 <template>
-  <div
-    class="
-      flex
-      justify-start
-      border-b
-      border-base-muted
-      p-3
-      px-4
-    "
-  >
-    <div 
-      class="h-5 w-5 text-secondary-color opacity-60 mr-2 cursor-pointer"
-      @click="isExpanded = !isExpanded"
-    >
-      <IconArrowRight 
-        v-if="!isExpanded"
-        class="h-5 w-5"
-      />
-      <IconArrowDown
-        v-else
-        class="h-5 w-5"
-      />
-    </div>
-
-    <div class="break-all">
-      <span 
-        :title="citation.source.name"
-        v-html="sourceLabel" 
-      />
-      <span> — </span>
-      <span
-        class=" text-base-lighter"
-        v-html="taxonNames"
-      />
-    </div>
-  </div>
+  <li class="border-b border-base-muted p-3 px-5">
+    <span
+      class="break-all block"
+      :title="citation.label"
+      v-html="citation.label"
+    />
+    <span
+      v-if="citation.type_label"
+      class="ml-4 text-base-soft"
+      v-html="citation.type_label"
+    />
+  </li>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-
-const props = defineProps({
+defineProps({
   citation: {
     type: Object,
     required: true
   }
 })
-
-const isExpanded = ref(false)
-const sourceLabel = computed(() => {
-  const { source } = props.citation
-
-  return isExpanded.value 
-    ? source.name
-    : source.short_name
-})
-
-const taxonNames = computed(() => props.citation.names.join(', '))
-
-const setExpanded = value => {
-  isExpanded.value = value
-}
-
-defineExpose({
-  setExpanded
-})
-
-</script>
+</script>

src/modules/otus/components/Panel/PanelCitation/PanelReferenceRow.vue

@@ -0,0 +1,18 @@
+<template>
+  <li class="border-b border-base-muted p-3 px-5">
+    <span
+      class="break-all block"
+      :title="source"
+      v-html="source"
+    />
+  </li>
+</template>
+
+<script setup>
+defineProps({
+  source: {
+    type: String,
+    required: true
+  }
+})
+</script>

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

@@ -1,9 +1,7 @@
 <template>
   <VCard>
     <VCardHeader>
-      <h1 class="text-md">
-        Type
-      </h1>
+      <h1 class="text-md">Type</h1>
     </VCardHeader>
     <VCardContent class="text-sm">
       <p v-html="typeDesignationLabel" />
@@ -25,20 +23,23 @@ const props = defineProps({
 const typeDesignation = ref({})
 const typeDesignationLabel = computed(() =>
   [
-    typeDesignation.value.subject_object_tag || '', 
+    typeDesignation.value.subject_object_tag || '',
     typeDesignation.value.subject_status_tag || '',
     typeDesignation.value.object_object_tag || ''
-  ].join(' '))
+  ].join(' ')
+)
 
 watch(
   () => props.taxonId,
   async () => {
-    if (!props.taxonId) { return }
+    if (!props.taxonId) {
+      return
+    }
 
     TaxonWorks.getTaxonTypeDesignation(props.taxonId).then(({ data }) => {
-      typeDesignation.value = data.type_taxon_name_relationship
+      typeDesignation.value = data.type_taxon_name_relationship || {}
     })
   },
   { immediate: true }
 )
-</script>
+</script>