SpeciesFileGroup/taxonworks

View on GitHub
app/javascript/vue/tasks/nomenclature/by_source/app.vue

Summary

Maintainability
Test Coverage
<template>
  <div id="nomenclature-by-source-task">
    <div class="flex-separate middle">
      <h1>Citations by source</h1>
      <ul class="context-menu">
        <li>
          <SourcePicker />
        </li>
        <li>
          <a href="/tasks/sources/hub">Back to source hub</a>
        </li>
      </ul>
    </div>

    <HeaderBar />

    <div class="flexbox">
      <div class="margin-small-right">
        <template
          v-for="({ title, summarizeParam }, type) in CITATION_BLOCKS"
          :key="type"
        >
          <CitationSummary
            :title="title"
            :summarize-param="summarizeParam"
            :type="type"
          />
        </template>
      </div>
      <OtusMatchProxy class="margin-small-left" />
    </div>
  </div>
</template>

<script setup>
import HeaderBar from './components/HeaderBar.vue'
import CitationSummary from './components/CitationSummary.vue'
import OtusMatchProxy from './components/OtusMatchProxy'
import SourcePicker from './components/SourcePicker.vue'
import {
  TAXON_NAME,
  TAXON_NAME_RELATIONSHIP,
  TAXON_NAME_CLASSIFICATION,
  BIOLOGICAL_ASSOCIATION,
  ASSERTED_DISTRIBUTION,
  OTU
} from '@/constants/index.js'

const CITATION_BLOCKS = {
  [TAXON_NAME]: {
    title: 'Taxon names',
    summarizeParam: 'taxon_name_id'
  },
  [TAXON_NAME_CLASSIFICATION]: {
    title: 'Nomenclature status',
    summarizeParam: 'taxon_name_classification_id'
  },
  [TAXON_NAME_RELATIONSHIP]: {
    title: 'Taxon name relationships',
    summarizeParam: 'taxon_name_relationship_id'
  },
  [BIOLOGICAL_ASSOCIATION]: {
    title: 'Biological associations',
    summarizeParam: 'biological_association_id'
  },
  [ASSERTED_DISTRIBUTION]: {
    title: 'Asserted distributions',
    summarizeParam: 'asserted_distribution_id'
  },
  [OTU]: {
    title: 'OTUs',
    summarizeParam: 'otu_id'
  }
}
</script>

<script>
export default {
  name: 'CitationsBySource'
}
</script>