Skip to content

Commit

Permalink
Refactor citation panel
Browse files Browse the repository at this point in the history
  • Loading branch information
jlpereira committed Mar 10, 2023
1 parent f8b0e35 commit 43c78c6
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 134 deletions.
4 changes: 1 addition & 3 deletions src/components/Icon/IconHamburger.global.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -15,5 +14,4 @@
</svg>
</template>

<script setup>
</script>
<script setup></script>
78 changes: 34 additions & 44 deletions src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
Original file line number Diff line number Diff line change
@@ -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">Timeline ({{ 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"
/>

Expand All @@ -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">References</h2>
</VCardHeader>
<ul class="text-sm">
<PanelReferenceRow
v-for="source in sources"
:key="source"
:source="source"
/>
</ul>
</VCard>
</template>

Expand All @@ -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)
Expand All @@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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" />
Expand All @@ -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>
47 changes: 28 additions & 19 deletions src/modules/otus/services/TaxonWorks.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,53 @@
import { makeAPIRequest } from "@/utils/request"
import { makeAPIRequest } from '@/utils/request'

export default class TaxonWorks {

static getTaxonNameCitations (otuId) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/nomenclature_citations`, { params: { extend: ['source'] } })
static getTaxonNameCitations(taxonId) {
return makeAPIRequest.get(`/taxon_names/${taxonId}/inventory/catalog`)
}

static getOtu (id) {
return makeAPIRequest.get(`/otus/${id}`, { params: { extend: ['parents'] } })
static getOtu(id) {
return makeAPIRequest.get(`/otus/${id}`, {
params: { extend: ['parents'] }
})
}

static getTaxon (id) {
static getTaxon(id) {
return makeAPIRequest.get(`/taxon_names/${id}`)
}

static summary (id) {
static summary(id) {
return makeAPIRequest.get(`/taxon_names/${id}/inventory/summary`)
}

static getTaxonTypeDesignation (id) {
return makeAPIRequest.get(`/taxon_names/${id}`, { params: { extend: ['type_taxon_name_relationship'] } })
static getTaxonTypeDesignation(id) {
return makeAPIRequest.get(`/taxon_names/${id}`, {
params: { extend: ['type_taxon_name_relationship'] }
})
}

static getOtuImages (otuId, params = {}) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/images.json`, { params })
static getOtuImages(otuId, params = {}) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/images.json`, {
params
})
}

static getOtuDescendants (otuId, params) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/taxonomy.json`, { params })
static getOtuDescendants(otuId, params) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/taxonomy.json`, {
params
})
}

static getOtuTypeMaterial (otuId) {
static getOtuTypeMaterial(otuId) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/type_material.json`)
}

static getOtuDistribution (otuId) {
static getOtuDistribution(otuId) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution`)
}

static getOtuContent (otuId) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, { extend: ['depiction']})
static getOtuContent(otuId) {
return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, {
extend: ['depiction']
})
}
}
}

0 comments on commit 43c78c6

Please sign in to comment.