From 944c5cf47a72008f4bd1ff9c07c6aea6719041e4 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 30 May 2024 19:51:32 -0300
Subject: [PATCH] Code refactor, replace v-hotkey plugin

---
 .../new_extract/components/Navbar.vue         |   2 +-
 .../components/saveCombination.vue            | 173 +++----
 .../nomenclature/new_combination/main.js      |   3 +-
 .../tasks/nomenclature/new_taxon_name/app.vue | 432 +++++++-----------
 .../components/basicInformation.vue           |   3 -
 .../new_taxon_name/components/cloneTaxon.vue  | 220 +++++----
 .../components/createNewButton.vue            | 136 +++---
 .../new_taxon_name/components/navHeader.vue   | 104 ++---
 .../components/saveTaxonName.vue              |  87 ++--
 .../components/taxonNameBox.vue               | 188 +++-----
 .../new_taxon_name/const/components.js        | 121 +++++
 11 files changed, 691 insertions(+), 778 deletions(-)
 create mode 100644 app/javascript/vue/tasks/nomenclature/new_taxon_name/const/components.js

diff --git a/app/javascript/vue/tasks/extracts/new_extract/components/Navbar.vue b/app/javascript/vue/tasks/extracts/new_extract/components/Navbar.vue
index 8905668594..f0d8fc4e77 100644
--- a/app/javascript/vue/tasks/extracts/new_extract/components/Navbar.vue
+++ b/app/javascript/vue/tasks/extracts/new_extract/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <navbar-component v-hotkey="shortcuts">
+  <navbar-component>
     <div class="flex-separate middle">
       <div
         class="horizontal-left-content gap-small"
diff --git a/app/javascript/vue/tasks/nomenclature/new_combination/components/saveCombination.vue b/app/javascript/vue/tasks/nomenclature/new_combination/components/saveCombination.vue
index f87b13b63e..0429b9c73b 100644
--- a/app/javascript/vue/tasks/nomenclature/new_combination/components/saveCombination.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_combination/components/saveCombination.vue
@@ -1,113 +1,118 @@
 <template>
   <button
     type="button"
-    ref="saveButton"
+    ref="saveButtonRef"
     class="button normal-input button-submit create-new-combination"
-    v-hotkey="shortcuts"
     :disabled="!validateCreate()"
     @click="save()"
   >
     {{ newCombination.hasOwnProperty('id') ? 'Update' : 'Create' }}
   </button>
 </template>
-<script>
+
+<script setup>
+import { ref } from 'vue'
 import { Combination } from '@/routes/endpoints'
 import { EXTEND_PARAMS } from '../constants/extend.js'
 import platformKey from '@/helpers/getPlatformKey'
+import useHotkey from 'vue3-hotkey'
+
+const props = defineProps({
+  newCombination: {
+    type: Object,
+    required: true
+  }
+})
 
-export default {
-  props: {
-    newCombination: {
-      type: Object,
-      required: true
+const emit = defineEmits(['processing', 'save', 'success'])
+
+const saveButtonRef = ref()
+const shortcuts = ref([
+  {
+    keys: [platformKey(), 's'],
+    handler() {
+      save()
     }
-  },
+  }
+])
 
-  emits: ['processing', 'save', 'success'],
+useHotkey(shortcuts.value)
 
-  computed: {
-    shortcuts() {
-      const keys = {}
-      keys[`${platformKey()}+s`] = this.save
+function validateCreate() {
+  return props.newCombination.protonyms.genus
+}
 
-      return keys
-    }
-  },
+function setFocus() {
+  if (validateCreate()) {
+    saveButtonRef.value.focus()
+  }
+}
 
-  methods: {
-    validateCreate() {
-      return this.newCombination.protonyms.genus
-    },
+function save() {
+  if (validateCreate()) {
+    props.newCombination?.id ? update(props.newCombination.id) : create()
+  }
+}
 
-    setFocus() {
-      if (this.validateCreate()) {
-        this.$refs.saveButton.focus()
-      }
-    },
+function createRecordCombination() {
+  const keys = Object.keys(props.newCombination.protonyms)
+  const combination = {
+    verbatim_name: props.newCombination.verbatim_name,
+    origin_citation_attributes: props.newCombination?.origin_citation_attributes
+  }
 
-    save() {
-      if (this.validateCreate()) {
-        this.newCombination.hasOwnProperty('id')
-          ? this.update(this.newCombination.id)
-          : this.create()
-      }
-    },
+  keys.forEach((rank) => {
+    if (props.newCombination.protonyms[rank]) {
+      combination[`${rank}_id`] = props.newCombination.protonyms[rank].id
+    }
+  })
 
-    createRecordCombination() {
-      const keys = Object.keys(this.newCombination.protonyms)
-      const combination = {
-        verbatim_name: this.newCombination.verbatim_name,
-        origin_citation_attributes:
-          this.newCombination?.origin_citation_attributes
-      }
+  return combination
+}
 
-      keys.forEach((rank) => {
-        if (this.newCombination.protonyms[rank]) {
-          combination[`${rank}_id`] = this.newCombination.protonyms[rank].id
-        }
-      })
+function create() {
+  emit('processing', true)
 
-      return combination
-    },
-    create() {
-      this.$emit('processing', true)
-      Combination.create({
-        combination: this.createRecordCombination(),
-        ...EXTEND_PARAMS
-      }).then(
-        (response) => {
-          this.$emit('save', response.body)
-          this.$emit('processing', false)
-          this.$emit('success', true)
-          TW.workbench.alert.create(
-            'New combination was successfully created.',
-            'notice'
-          )
-        },
-        (response) => {
-          this.$emit('processing', false)
-          TW.workbench.alert.create(
-            `Something went wrong: ${JSON.stringify(response.body)}`,
-            'error'
-          )
-        }
+  Combination.create({
+    combination: createRecordCombination(),
+    ...EXTEND_PARAMS
+  }).then(
+    ({ body }) => {
+      emit('save', body)
+      emit('processing', false)
+      emit('success', true)
+      TW.workbench.alert.create(
+        'New combination was successfully created.',
+        'notice'
       )
     },
-    update(id) {
-      this.$emit('processing', true)
-      Combination.update(id, {
-        combination: this.createRecordCombination(),
-        ...EXTEND_PARAMS
-      }).then((response) => {
-        this.$emit('save', response.body)
-        this.$emit('processing', false)
-        this.$emit('success', true)
-        TW.workbench.alert.create(
-          'New combination was successfully updated.',
-          'notice'
-        )
-      })
+    ({ body }) => {
+      emit('processing', false)
+      TW.workbench.alert.create(
+        `Something went wrong: ${JSON.stringify(body)}`,
+        'error'
+      )
     }
-  }
+  )
 }
+
+function update(id) {
+  emit('processing', true)
+  Combination.update(id, {
+    combination: createRecordCombination(),
+    ...EXTEND_PARAMS
+  }).then(({ body }) => {
+    emit('save', body)
+    emit('processing', false)
+    emit('success', true)
+    TW.workbench.alert.create(
+      'New combination was successfully updated.',
+      'notice'
+    )
+  })
+}
+
+defineExpose({
+  setFocus
+})
 </script>
diff --git a/app/javascript/vue/tasks/nomenclature/new_combination/main.js b/app/javascript/vue/tasks/nomenclature/new_combination/main.js
index 789b94b0f5..1b85be802a 100644
--- a/app/javascript/vue/tasks/nomenclature/new_combination/main.js
+++ b/app/javascript/vue/tasks/nomenclature/new_combination/main.js
@@ -1,12 +1,11 @@
 import { createApp } from 'vue'
 import HelpSystem from '@/plugins/help/help'
 import en from './lang/help/en'
-import hotkey from '@/plugins/v-hotkey'
 import App from './app.vue'
 
 function init() {
   const app = createApp(App)
-  app.directive('hotkey', hotkey)
+
   app.use(HelpSystem, {
     languages: {
       en: en
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/app.vue b/app/javascript/vue/tasks/nomenclature/new_taxon_name/app.vue
index e57590b4b7..1d1e81d6fe 100644
--- a/app/javascript/vue/tasks/nomenclature/new_taxon_name/app.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/app.vue
@@ -1,10 +1,7 @@
 <template>
   <div id="new_taxon_name_task">
-    <div
-      v-hotkey="shortcuts"
-      class="flex-separate middle"
-    >
-      <h1>{{ getTaxon.id ? 'Edit' : 'New' }} taxon name</h1>
+    <div class="flex-separate middle">
+      <h1>{{ taxon.id ? 'Edit' : 'New' }} taxon name</h1>
       <div class="horizontal-right-content middle">
         <label
           v-help.section.navbar.autosave
@@ -17,7 +14,7 @@
           Autosave
         </label>
         <autocomplete
-          v-if="!getTaxon.id"
+          v-if="!taxon.id"
           class="autocomplete-search-bar"
           url="/taxon_names/autocomplete"
           param="term"
@@ -30,31 +27,34 @@
       </div>
     </div>
     <div>
-      <nav-header :menu="menu" />
+      <nav-header />
       <div class="flexbox horizontal-center-content align-start">
         <div class="ccenter item">
           <spinner
             full-screen
-            :legend="loading ? 'Loading...' : 'Saving changes...'"
+            :legend="isLoading ? 'Loading...' : 'Saving changes...'"
             :logo-size="{ width: '100px', height: '100px' }"
-            v-if="loading"
+            v-if="isLoading"
           />
           <template
-            v-for="(visibleSection, componentName) in menu"
-            :key="componentName"
+            v-for="{ component, title, isAvailableFor } in SectionComponents"
+            :key="title"
           >
             <component
-              v-if="visibleSection"
+              v-if="isAvailableFor(taxon)"
               class="margin-medium-bottom"
-              :is="`${componentName.replaceAll(' ', '')}Section`"
+              :is="component"
             />
           </template>
         </div>
         <div
-          v-if="getTaxon.id"
+          v-if="taxon.id"
           class="cright item margin-medium-left"
         >
-          <div id="cright-panel">
+          <div
+            id="cright-panel"
+            ref="rightPanelRef"
+          >
             <div class="panel content margin-medium-bottom">
               <autocomplete
                 id="taxonname-autocomplete-search"
@@ -81,284 +81,192 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import Autocomplete from '@/components/ui/Autocomplete'
-import showForThisGroup from './helpers/showForThisGroup'
-import AuthorSection from './components/Author/Author.vue'
-import RelationshipSection from './components/relationshipPicker.vue'
-import StatusSection from './components/statusPicker.vue'
 import NavHeader from './components/navHeader.vue'
 import TaxonNameBox from './components/taxonNameBox.vue'
-import EtymologySection from './components/etymology.vue'
-import GenderSection from './components/gender.vue'
 import CheckChanges from './components/checkChanges.vue'
-import TypeSection from './components/type.vue'
-import TaxonSection from './components/basicInformation.vue'
-import OriginalcombinationSection from './components/pickOriginalCombination.vue'
-import ManagesynonymySection from './components/manageSynonym'
-import ClassificationSection from './components/classification.vue'
 import SoftValidation from '@/components/soft_validations/panel.vue'
-import SubsequentCombinationSection from './components/Combination/CombinationMain.vue'
-import SubsequentNameFormSection from './components/SubsequentNameForm/SubsequentNameForm.vue'
-import OriginalFormSection from './components/OriginalForm.vue'
 import Spinner from '@/components/ui/VSpinner.vue'
 import platformKey from '@/helpers/getPlatformKey'
-
+import useHotkey from 'vue3-hotkey'
+import { SectionComponents } from './const/components.js'
 import { convertType } from '@/helpers/types.js'
 import { GetterNames } from './store/getters/getters'
 import { MutationNames } from './store/mutations/mutations'
 import { ActionNames } from './store/actions/actions'
+import { computed, ref, onMounted } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'NewTaxonName',
-
-  components: {
-    AuthorSection,
-    Autocomplete,
-    TaxonSection,
-    CheckChanges,
-    ClassificationSection,
-    EtymologySection,
-    GenderSection,
-    ManagesynonymySection,
-    NavHeader,
-    OriginalcombinationSection,
-    SubsequentCombinationSection,
-    RelationshipSection,
-    SoftValidation,
-    Spinner,
-    StatusSection,
-    TaxonNameBox,
-    TypeSection,
-    SubsequentNameFormSection,
-    OriginalFormSection
-  },
-  computed: {
-    shortcuts() {
-      const keys = {}
+defineOptions({
+  name: 'NewTaxonName'
+})
 
-      keys[`${platformKey()}+f`] = this.focusSearch
+const store = useStore()
 
-      return keys
-    },
-    validations() {
-      return this.$store.getters[GetterNames.GetSoftValidation]
-    },
-    getTaxon() {
-      return this.$store.getters[GetterNames.GetTaxon]
-    },
-    getSaving() {
-      return this.$store.getters[GetterNames.GetSaving]
-    },
-    checkSoftValidation() {
-      return (
-        this.validations.taxon_name.list.length ||
-        this.validations.taxonStatusList.list.length ||
-        this.validations.taxonRelationshipList.list.length
-      )
-    },
-    isAutosaveActive: {
-      get() {
-        return this.$store.getters[GetterNames.GetAutosave]
-      },
-      set(value) {
-        this.$store.commit(MutationNames.SetAutosave, value)
-      }
-    },
-    menu() {
-      return {
-        Taxon: true,
-        Author: true,
-        Status: true,
-        Relationship: true,
-        'Manage synonymy':
-          showForThisGroup(['GenusGroup', 'FamilyGroup'], this.getTaxon) &&
-          !this.getTaxon.cached_is_valid,
-        Type: showForThisGroup(
-          [
-            'SpeciesGroup',
-            'GenusGroup',
-            'FamilyGroup',
-            'SpeciesAndInfraspeciesGroup'
-          ],
-          this.getTaxon
-        ),
-        'Original combination': showForThisGroup(
-          ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
-          this.getTaxon
-        ),
-        'Subsequent Combination': showForThisGroup(
-          ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
-          this.getTaxon
-        ),
-        OriginalForm: showForThisGroup(['FamilyGroup'], this.getTaxon),
-        'Subsequent Name Form': showForThisGroup(
-          ['FamilyGroup'],
-          this.getTaxon
-        ),
-        Classification: true,
-        Gender: showForThisGroup(
-          ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
-          this.getTaxon
-        ),
-        Etymology: showForThisGroup(
-          ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
-          this.getTaxon
-        )
-      }
+const rightPanelRef = ref(null)
+const isLoading = ref()
+const shortcuts = ref([
+  {
+    keys: [platformKey(), 'f'],
+    handler() {
+      focusSearch()
     }
-  },
+  }
+])
 
-  data() {
-    return {
-      loading: true
-    }
+useHotkey(shortcuts.value)
+
+const validations = computed(() => store.getters[GetterNames.GetSoftValidation])
+const taxon = computed(() => store.getters[GetterNames.GetTaxon])
+const checkSoftValidation = computed(
+  () =>
+    validations.value.taxon_name.list.length ||
+    validations.value.taxonStatusList.list.length ||
+    validations.value.taxonRelationshipList.list.length
+)
+
+const isAutosaveActive = computed({
+  get() {
+    return store.getters[GetterNames.GetAutosave]
   },
+  set(value) {
+    store.commit(MutationNames.SetAutosave, value)
+  }
+})
 
-  mounted() {
-    const urlParams = new URLSearchParams(window.location.search)
-    let taxonId = urlParams.get('taxon_name_id')
-    const value = convertType(
-      sessionStorage.getItem('task::newtaxonname::autosave')
-    )
+onMounted(() => {
+  const urlParams = new URLSearchParams(window.location.search)
+  let taxonId = urlParams.get('taxon_name_id')
+  const value = convertType(
+    sessionStorage.getItem('task::newtaxonname::autosave')
+  )
 
-    if (value !== null) {
-      this.isAutosaveActive = value
-    }
+  if (value !== null) {
+    isAutosaveActive.value = value
+  }
 
-    if (!taxonId) {
-      taxonId = location.pathname.split('/')[4]
+  if (!taxonId) {
+    taxonId = location.pathname.split('/')[4]
+  }
+
+  window.addEventListener('scroll', scrollBox)
+
+  initLoad().then(() => {
+    if (/^\d+$/.test(taxonId)) {
+      store
+        .dispatch(ActionNames.LoadTaxonName, taxonId)
+        .then((taxon) => {
+          store.dispatch(ActionNames.LoadTaxonStatus, taxonId)
+          store.dispatch(ActionNames.LoadTaxonRelationships, taxonId)
+          store.dispatch(ActionNames.LoadOriginalCombination, taxonId)
+          store.dispatch(ActionNames.LoadCombinations, taxon.id)
+        })
+        .finally(() => {
+          isLoading.value = false
+        })
+    } else {
+      isLoading.value = false
     }
+  })
 
-    window.addEventListener('scroll', this.scrollBox)
+  addShortcutsDescription()
+})
 
-    this.initLoad().then(() => {
-      if (/^\d+$/.test(taxonId)) {
-        this.$store
-          .dispatch(ActionNames.LoadTaxonName, taxonId)
-          .then((taxon) => {
-            this.$store.dispatch(ActionNames.LoadTaxonStatus, taxonId)
-            this.$store.dispatch(ActionNames.LoadTaxonRelationships, taxonId)
-            this.$store.dispatch(ActionNames.LoadOriginalCombination, taxonId)
-            this.$store.dispatch(ActionNames.LoadCombinations, taxon.id)
-          })
-          .finally(() => {
-            this.loading = false
-          })
-      } else {
-        this.loading = false
-      }
-    })
+function scrollBox() {
+  const element = rightPanelRef.value
+  const softValidationContainer = document.querySelector(
+    '#new_taxon_name_task .soft-validation-box'
+  )
+  if (softValidationContainer) {
+    const innerHeight = window.innerHeight
+    const elementRect = softValidationContainer.getBoundingClientRect()
 
-    this.addShortcutsDescription()
-  },
+    softValidationContainer.style.maxHeight = `${
+      innerHeight - elementRect.top - 20
+    }px`
+  }
+  if (element) {
+    if (
+      (window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0) > 154
+    ) {
+      element.classList.add('cright-fixed-top')
+    } else {
+      element.classList.remove('cright-fixed-top')
+    }
+  }
+}
 
-  methods: {
-    scrollBox(event) {
-      const element = document.querySelector(
-        '#new_taxon_name_task #cright-panel'
-      )
-      const softValidationContainer = document.querySelector(
-        '#new_taxon_name_task .soft-validation-box'
-      )
-      if (softValidationContainer) {
-        const innerHeight = window.innerHeight
-        const elementRect = softValidationContainer.getBoundingClientRect()
+function addShortcutsDescription() {
+  const TASK = 'New taxon name'
+  TW.workbench.keyboard.createLegend(
+    `${platformKey()}+d`,
+    'Create a child of this taxon name',
+    TASK
+  )
+  TW.workbench.keyboard.createLegend(
+    `${platformKey()}+e`,
+    'Go to comprehensive specimen digitization',
+    TASK
+  )
+  TW.workbench.keyboard.createLegend(
+    `${platformKey()}+f`,
+    'Move focus to search',
+    TASK
+  )
+  TW.workbench.keyboard.createLegend(
+    `${platformKey()}+l`,
+    'Clone this taxon name',
+    TASK
+  )
+  TW.workbench.keyboard.createLegend(
+    `${platformKey()}+n`,
+    'Create a new taxon name',
+    TASK
+  )
+  TW.workbench.keyboard.createLegend(
+    `${platformKey()}+p`,
+    'Create a new taxon name with the same parent',
+    TASK
+  )
+  TW.workbench.keyboard.createLegend(
+    `${platformKey()}+s`,
+    'Save taxon name changes',
+    TASK
+  )
+}
 
-        softValidationContainer.style.maxHeight = `${
-          innerHeight - elementRect.top - 20
-        }px`
-      }
-      if (element) {
-        if (
-          (window.pageYOffset ||
-            document.documentElement.scrollTop ||
-            document.body.scrollTop ||
-            0) > 154 &&
-          this.isMinor()
-        ) {
-          element.classList.add('cright-fixed-top')
-        } else {
-          element.classList.remove('cright-fixed-top')
-        }
-      }
-    },
-    addShortcutsDescription() {
-      TW.workbench.keyboard.createLegend(
-        `${platformKey()}+d`,
-        'Create a child of this taxon name',
-        'New taxon name'
-      )
-      TW.workbench.keyboard.createLegend(
-        `${platformKey()}+e`,
-        'Go to comprehensive specimen digitization',
-        'New taxon name'
-      )
-      TW.workbench.keyboard.createLegend(
-        `${platformKey()}+f`,
-        'Move focus to search',
-        'New taxon name'
-      )
-      TW.workbench.keyboard.createLegend(
-        `${platformKey()}+l`,
-        'Clone this taxon name',
-        'New taxon name'
-      )
-      TW.workbench.keyboard.createLegend(
-        `${platformKey()}+n`,
-        'Create a new taxon name',
-        'New taxon name'
-      )
-      TW.workbench.keyboard.createLegend(
-        `${platformKey()}+p`,
-        'Create a new taxon name with the same parent',
-        'New taxon name'
-      )
-      TW.workbench.keyboard.createLegend(
-        `${platformKey()}+s`,
-        'Save taxon name changes',
-        'New taxon name'
-      )
-    },
+async function initLoad() {
+  const actions = [
+    store.dispatch(ActionNames.LoadRanks),
+    store.dispatch(ActionNames.LoadStatus),
+    store.dispatch(ActionNames.LoadRelationships)
+  ]
 
-    isMinor() {
-      const element = document.querySelector('#cright-panel')
-      const navBar = document.querySelector('#taxonNavBar')
+  return Promise.all(actions).then(() => {
+    store.commit(MutationNames.SetInitLoad, true)
+  })
+}
 
-      if (element && navBar) {
-        return element.offsetHeight + navBar.offsetHeight < window.innerHeight
-      } else {
-        return true
-      }
-    },
-    showForThisGroup,
-    initLoad() {
-      const actions = [
-        this.$store.dispatch(ActionNames.LoadRanks),
-        this.$store.dispatch(ActionNames.LoadStatus),
-        this.$store.dispatch(ActionNames.LoadRelationships)
-      ]
+function loadTaxon(taxon) {
+  window.open(
+    `/tasks/nomenclature/new_taxon_name?taxon_name_id=${taxon.id}`,
+    '_self'
+  )
+}
 
-      return Promise.all(actions).then(() => {
-        this.$store.commit(MutationNames.SetInitLoad, true)
-      })
-    },
-    loadTaxon(taxon) {
-      window.open(
-        `/tasks/nomenclature/new_taxon_name?taxon_name_id=${taxon.id}`,
-        '_self'
-      )
-    },
-    focusSearch() {
-      if (this.getTaxon.id) {
-        document.querySelector('#taxonname-autocomplete-search input').focus()
-      } else {
-        document.querySelector('.autocomplete-search-bar input').focus()
-      }
-    }
+function focusSearch() {
+  if (taxon.value.id) {
+    document.querySelector('#taxonname-autocomplete-search input').focus()
+  } else {
+    document.querySelector('.autocomplete-search-bar input').focus()
   }
 }
 </script>
+
 <style lang="scss">
 #new_taxon_name_task {
   flex-direction: column-reverse;
@@ -386,7 +294,7 @@ export default {
     max-width: 350px;
   }
   .cright-fixed-top {
-    top: 68px;
+    top: 76px;
     width: 1240px;
     z-index: 200;
     position: fixed;
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/basicInformation.vue b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/basicInformation.vue
index ea34f973f7..f92e4bad23 100644
--- a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/basicInformation.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/basicInformation.vue
@@ -236,9 +236,6 @@ export default {
   flex-direction: column;
   .header {
     border-left: 4px solid green;
-    h3 {
-      font-weight: 300;
-    }
     padding: 1em;
     padding-left: 1.5em;
     border-bottom: 1px solid #f5f5f5;
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/cloneTaxon.vue b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/cloneTaxon.vue
index 0a466c1304..5d71035e7f 100644
--- a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/cloneTaxon.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/cloneTaxon.vue
@@ -4,14 +4,13 @@
       type="button"
       class="button normal-input button-submit"
       :disabled="!taxon.id || isSaving"
-      v-hotkey="shortcuts"
-      @click="showModal = true"
+      @click="() => (isModalVisible = true)"
     >
       Clone
     </button>
-    <modal-component
-      v-show="showModal"
-      @close="showModal = false"
+    <VModal
+      v-show="isModalVisible"
+      @close="isModalVisible = false"
     >
       <template #header>
         <h3>Clone taxon name</h3>
@@ -22,7 +21,7 @@
         </p>
         <ul class="no_bullets">
           <li
-            v-for="field in fieldsToCopy"
+            v-for="field in FIELDS"
             :key="field.value"
           >
             <label>
@@ -44,7 +43,7 @@
           class="full_width"
           v-model="inputValue"
           @keypress.enter.prevent="cloneTaxon()"
-          ref="inputtext"
+          ref="inputTextRef"
           :placeholder="`Write ${checkWord} to continue`"
         />
       </template>
@@ -58,129 +57,118 @@
           Clone
         </button>
       </template>
-    </modal-component>
+    </VModal>
   </div>
 </template>
 
-<script>
+<script setup>
 import { GetterNames } from '../store/getters/getters'
 import { ActionNames } from '../store/actions/actions'
-import ModalComponent from '@/components/ui/Modal.vue'
+import { computed, ref, watch, onMounted, nextTick } from 'vue'
+import { useStore } from 'vuex'
+import VModal from '@/components/ui/Modal.vue'
 import platformKey from '@/helpers/getPlatformKey'
+import useHotkey from 'vue3-hotkey'
 
-export default {
-  components: {
-    ModalComponent
+const FIELDS = [
+  {
+    label: 'Name',
+    value: 'name',
+    lock: true,
+    default: true
   },
-  computed: {
-    shortcuts() {
-      const keys = {}
-
-      keys[`${platformKey()}+l`] = () => {
-        this.showModal = this.taxon.id && !this.isSaving
-      }
-
-      return keys
-    },
-    taxon() {
-      return this.$store.getters[GetterNames.GetTaxon]
-    },
-    checkInput() {
-      return this.inputValue.toUpperCase() !== this.checkWord
-    },
-    isSaving() {
-      return this.$store.getters[GetterNames.GetSaving]
-    }
+  {
+    label: 'Parent',
+    value: 'parent_id',
+    lock: true,
+    default: true
   },
-  data() {
-    return {
-      showModal: false,
-      inputValue: '',
-      checkWord: 'CLONE',
-      copyValues: [],
-      fieldsToCopy: [
-        {
-          label: 'Name',
-          value: 'name',
-          lock: true,
-          default: true
-        },
-        {
-          label: 'Parent',
-          value: 'parent_id',
-          lock: true,
-          default: true
-        },
-        {
-          label: 'Rank',
-          value: 'rank_class',
-          lock: true,
-          default: true
-        },
-        {
-          label: 'Author',
-          value: 'verbatim_author',
-          lock: false,
-          default: true
-        },
-        {
-          label: 'Year',
-          value: 'verbatim_year',
-          lock: false,
-          default: true
-        },
-        {
-          label: 'Original source',
-          value: 'origin_citation',
-          lock: false,
-          default: true
-        },
-        {
-          label: 'Persons',
-          value: 'taxon_name_author_roles',
-          lock: false,
-          default: true
-        },
-        {
-          label: 'Original combination relationships',
-          value: 'original_combination',
-          lock: false,
-          default: false
-        },
-        {
-          label: 'Add invalid relationship',
-          value: 'invalid_relationship',
-          lock: false,
-          default: false
-        }
-      ]
-    }
+  {
+    label: 'Rank',
+    value: 'rank_class',
+    lock: true,
+    default: true
   },
-
-  watch: {
-    showModal: {
-      handler(newVal) {
-        if (newVal) {
-          this.$nextTick(() => {
-            this.$refs.inputtext.focus()
-          })
-        }
-      }
-    }
+  {
+    label: 'Author',
+    value: 'verbatim_author',
+    lock: false,
+    default: true
   },
-
-  mounted() {
-    this.copyValues = this.fieldsToCopy
-      .filter((item) => item.default)
-      .map((item) => item.value)
+  {
+    label: 'Year',
+    value: 'verbatim_year',
+    lock: false,
+    default: true
+  },
+  {
+    label: 'Original source',
+    value: 'origin_citation',
+    lock: false,
+    default: true
+  },
+  {
+    label: 'Persons',
+    value: 'taxon_name_author_roles',
+    lock: false,
+    default: true
+  },
+  {
+    label: 'Original combination relationships',
+    value: 'original_combination',
+    lock: false,
+    default: false
   },
+  {
+    label: 'Add invalid relationship',
+    value: 'invalid_relationship',
+    lock: false,
+    default: false
+  }
+]
+
+const store = useStore()
 
-  methods: {
-    cloneTaxon() {
-      if (!this.checkInput) {
-        this.$store.dispatch(ActionNames.CloneTaxon, this.copyValues)
-      }
+const shortcuts = ref([
+  {
+    keys: [platformKey(), 'l'],
+    handler() {
+      taxon.value.id && !isSaving.value
     }
   }
+])
+
+useHotkey(shortcuts.value)
+
+const inputTextRef = ref(null)
+const isModalVisible = ref(false)
+const inputValue = ref('')
+const checkWord = ref('CLONE')
+const copyValues = ref([])
+
+const taxon = computed(() => store.getters[GetterNames.GetTaxon])
+const isSaving = computed(() => store.getters[GetterNames.GetSaving])
+const checkInput = computed(
+  () => inputValue.value.toUpperCase() !== checkWord.value
+)
+
+watch(isModalVisible, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      inputTextRef.value.focus()
+    })
+  }
+})
+
+onMounted(() => {
+  copyValues.value = FIELDS.filter((item) => item.default).map(
+    (item) => item.value
+  )
+})
+
+function cloneTaxon() {
+  if (!checkInput.value) {
+    store.dispatch(ActionNames.CloneTaxon, copyValues.value)
+  }
 }
 </script>
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/createNewButton.vue b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/createNewButton.vue
index 52ee8b5161..1a39d83d72 100644
--- a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/createNewButton.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/createNewButton.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <modal
-      v-if="showModal"
-      @close="showModal = false"
+      v-if="isModalVisible"
+      @close="() => (isModalVisible = false)"
     >
       <template #header>
         <h3>Confirm</h3>
@@ -27,99 +27,91 @@
     <button
       type="button"
       class="normal-input button button-default"
-      v-hotkey="shortcuts"
       @click="createNew()"
     >
       New
     </button>
   </div>
 </template>
-<script>
+<script setup>
 import { GetterNames } from '../store/getters/getters'
 import { RouteNames } from '@/routes/routes'
+import { computed, ref, watch, nextTick } from 'vue'
+import { useStore } from 'vuex'
 import Modal from '@/components/ui/Modal.vue'
 import PlatformKey from '@/helpers/getPlatformKey'
+import useHotkey from 'vue3-hotkey'
 
-export default {
-  components: {
-    Modal
-  },
-  computed: {
-    unsavedChanges() {
-      return (
-        this.$store.getters[GetterNames.GetLastChange] >
-        this.$store.getters[GetterNames.GetLastSave]
-      )
-    },
-    getParent() {
-      return this.$store.getters[GetterNames.GetParent]
-    },
-    getTaxon() {
-      return this.$store.getters[GetterNames.GetTaxon]
-    },
-    shortcuts() {
-      const keys = {}
+const store = useStore()
+
+const unsavedChanges = computed(
+  () =>
+    store.getters[GetterNames.GetLastChange] >
+    store.getters[GetterNames.GetLastSave]
+)
 
-      keys[`${PlatformKey()}+p`] = this.createNewWithParent
-      keys[`${PlatformKey()}+d`] = this.createNewWithChild
-      keys[`${PlatformKey()}+n`] = this.createNew
+const parent = computed(() => store.getters[GetterNames.GetParent])
+const taxon = computed(() => store.getters[GetterNames.GetTaxon])
 
-      return keys
+const shortcuts = ref([
+  {
+    keys: [PlatformKey(), 'p'],
+    handler() {
+      createNewWithParent()
     }
   },
-  data() {
-    return {
-      showModal: false,
-      url: RouteNames.NewTaxonName
+  {
+    keys: [PlatformKey(), 'd'],
+    handler() {
+      createNewWithChild()
     }
   },
-
-  watch: {
-    showModal(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          document.querySelector('#confirm-create-newtaxonname').focus()
-        })
-      }
+  {
+    keys: [PlatformKey(), 'n'],
+    handler() {
+      createNew()
     }
-  },
+  }
+])
+
+useHotkey(shortcuts.value)
 
-  methods: {
-    reloadPage() {
-      window.location.href = this.url
-      this.url = RouteNames.NewTaxonName
-    },
+const isModalVisible = ref(false)
+const url = ref(RouteNames.NewTaxonName)
 
-    loadWithParent() {
-      return this.getParent && this.getParent.hasOwnProperty('id')
-        ? `${RouteNames.NewTaxonName}?parent_id=${this.getParent.id}`
-        : RouteNames.NewTaxonName
-    },
+watch(isModalVisible, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      document.querySelector('#confirm-create-newtaxonname').focus()
+    })
+  }
+})
 
-    createNew(newUrl = this.url) {
-      this.url = newUrl
-      if (this.unsavedChanges) {
-        this.showModal = true
-      } else {
-        this.reloadPage()
-      }
-    },
+function reloadPage() {
+  window.location.href = url.value
+  url.value = RouteNames.NewTaxonName
+}
 
-    createNewWithChild() {
-      this.createNew(
-        this.getTaxon.id
-          ? `${RouteNames.NewTaxonName}?parent_id=${this.getTaxon.id}`
-          : RouteNames.NewTaxonName
-      )
-    },
+function loadTask(taxon) {
+  return taxon.id
+    ? `${RouteNames.NewTaxonName}?parent_id=${taxon.id}`
+    : RouteNames.NewTaxonName
+}
 
-    createNewWithParent() {
-      this.createNew(
-        this.getParent && this.getParent.hasOwnProperty('id')
-          ? `${RouteNames.NewTaxonName}?parent_id=${this.getParent.id}`
-          : RouteNames.NewTaxonName
-      )
-    }
+function createNew(newUrl = url.value) {
+  url.value = newUrl
+  if (unsavedChanges.value) {
+    isModalVisible.value = true
+  } else {
+    reloadPage()
   }
 }
+
+function createNewWithChild() {
+  createNew(loadTask(taxon.value))
+}
+
+function createNewWithParent() {
+  createNew(loadTask(parent.value))
+}
 </script>
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/navHeader.vue b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/navHeader.vue
index b04b47b827..c19cdc2c10 100644
--- a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/navHeader.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/navHeader.vue
@@ -1,30 +1,30 @@
 <template>
-  <nav-bar navbar-class="panel content relative">
+  <NavBar navbar-class="panel content relative">
     <div class="flex-separate">
       <ul class="no_bullets context-menu">
         <template
-          v-for="(link, key, index) in menu"
-          :key="key"
+          v-for="({ title, isAvailableFor }, index) in SectionComponents"
+          :key="title"
         >
           <li
             class="navigation-item context-menu-option"
-            v-if="link"
+            v-if="isAvailableFor(taxon)"
           >
             <a
               data-turbolinks="false"
               :class="{ active: activePosition == index }"
-              :href="'#' + key.toLowerCase().replace(' ', '-')"
+              :href="'#' + title.toLowerCase().replace(' ', '-')"
               @click="activePosition = index"
-              >{{ key }}
+              >{{ title }}
             </a>
           </li>
         </template>
       </ul>
       <div class="horizontal-center-content margin-medium-left">
-        <save-taxon-name
+        <SaveTaxonName
           class="normal-input button button-submit separate-right"
         />
-        <clone-taxon-name
+        <CloneTaxonName
           v-help.section.navbar.clone
           class="separate-right"
         />
@@ -44,7 +44,7 @@
           v-help.section.navbar.childIcon
           class="button normal-input button-default btn-create-sister button-new-icon margin-small-right"
         />
-        <create-new-button />
+        <CreateNewButton />
       </div>
     </div>
     <autosave
@@ -52,79 +52,49 @@
       class="position-absolute full_width"
       :disabled="!taxon.id || !isAutosaveActive"
     />
-  </nav-bar>
+  </NavBar>
 </template>
-<script>
+<script setup>
 import SaveTaxonName from './saveTaxonName.vue'
 import CreateNewButton from './createNewButton.vue'
 import CloneTaxonName from './cloneTaxon'
 import NavBar from '@/components/layout/NavBar'
 import Autosave from './autosave'
+import { SectionComponents } from '../const/components'
 import { GetterNames } from '../store/getters/getters'
 import { RouteNames } from '@/routes/routes'
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  components: {
-    SaveTaxonName,
-    CreateNewButton,
-    CloneTaxonName,
-    NavBar,
-    Autosave
-  },
+const store = useStore()
+const unsavedChanges = computed(() => {
+  return (
+    store.getters[GetterNames.GetLastChange] >
+    store.getters[GetterNames.GetLastSave]
+  )
+})
 
-  props: {
-    menu: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    unsavedChanges() {
-      return (
-        this.$store.getters[GetterNames.GetLastChange] >
-        this.$store.getters[GetterNames.GetLastSave]
-      )
-    },
-
-    taxon() {
-      return this.$store.getters[GetterNames.GetTaxon]
-    },
+const taxon = computed(() => store.getters[GetterNames.GetTaxon])
+const parent = computed(() => store.getters[GetterNames.GetParent])
 
-    parent() {
-      return this.$store.getters[GetterNames.GetParent]
-    },
+const isAutosaveActive = computed(() => store.getters[GetterNames.GetAutosave])
+const parentId = computed(() => parent.value?.id)
 
-    isAutosaveActive() {
-      return this.$store.getters[GetterNames.GetAutosave]
-    },
+const activePosition = ref(0)
 
-    parentId() {
-      return this.parent?.id
-    }
-  },
-
-  data() {
-    return {
-      activePosition: 0
-    }
-  },
+function createNew(id) {
+  const url = `${RouteNames.NewTaxonName}?parent_id=${id}`
 
-  methods: {
-    createNew(id) {
-      this.url = `${RouteNames.NewTaxonName}?parent_id=${id}`
-      if (this.unsavedChanges) {
-        if (
-          window.confirm(
-            'You have unsaved changes. Are you sure you want to create a new taxon name? All unsaved changes will be lost.'
-          )
-        ) {
-          window.open(this.url, '_self')
-        }
-      } else {
-        window.open(this.url, '_self')
-      }
+  if (unsavedChanges.value) {
+    if (
+      window.confirm(
+        'You have unsaved changes. Are you sure you want to create a new taxon name? All unsaved changes will be lost.'
+      )
+    ) {
+      window.open(url, '_self')
     }
+  } else {
+    window.open(url, '_self')
   }
 }
 </script>
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/saveTaxonName.vue b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/saveTaxonName.vue
index 318dd13387..052115818a 100644
--- a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/saveTaxonName.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/saveTaxonName.vue
@@ -1,7 +1,6 @@
 <template>
   <button
     type="button"
-    v-hotkey="shortcuts"
     :disabled="!validateInfo || isSaving"
     @click="saveTaxon"
   >
@@ -9,59 +8,53 @@
   </button>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
 import { GetterNames } from '../store/getters/getters'
 import { ActionNames } from '../store/actions/actions'
 import platformKey from '@/helpers/getPlatformKey'
-
-export default {
-  computed: {
-    parent() {
-      return this.$store.getters[GetterNames.GetParent]
-    },
-
-    taxon() {
-      return this.$store.getters[GetterNames.GetTaxon]
-    },
-
-    validateInfo() {
-      return (
-        this.parent &&
-        this.taxon.name &&
-        this.taxon.name.replace(' ', '').length >= 2
-      )
-    },
-
-    isSaving() {
-      return this.$store.getters[GetterNames.GetSaving]
-    },
-
-    shortcuts() {
-      const keys = {}
-
-      keys[`${platformKey()}+s`] = this.saveTaxon
-
-      return keys
+import useHotkey from 'vue3-hotkey'
+
+const store = useStore()
+
+const parent = computed(() => store.getters[GetterNames.GetParent])
+const taxon = computed(() => store.getters[GetterNames.GetTaxon])
+const validateInfo = computed(
+  () =>
+    parent.value &&
+    taxon.value.name &&
+    taxon.value.name.replace(' ', '').length >= 2
+)
+
+const isSaving = computed(() => store.getters[GetterNames.GetSaving])
+
+const shortcuts = ref([
+  {
+    keys: [platformKey(), 's'],
+    handler() {
+      saveTaxon()
     }
-  },
-  methods: {
-    saveTaxon() {
-      if (this.validateInfo && !this.GetSaving) {
-        if (this.taxon.id) {
-          this.updateTaxonName()
-        } else {
-          this.createTaxonName()
-        }
-      }
-    },
+  }
+])
 
-    createTaxonName() {
-      this.$store.dispatch(ActionNames.CreateTaxonName, this.taxon).catch(() => {})
-    },
+useHotkey(shortcuts.value)
 
-    updateTaxonName() {
-      this.$store.dispatch(ActionNames.UpdateTaxonName, this.taxon).catch(() => {})
+function saveTaxon() {
+  if (validateInfo.value && !isSaving.value) {
+    if (taxon.value.id) {
+      updateTaxonName()
+    } else {
+      createTaxonName()
     }
   }
 }
+
+function createTaxonName() {
+  store.dispatch(ActionNames.CreateTaxonName, taxon.value).catch(() => {})
+}
+
+function updateTaxonName() {
+  store.dispatch(ActionNames.UpdateTaxonName, taxon.value).catch(() => {})
+}
 </script>
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/taxonNameBox.vue b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/taxonNameBox.vue
index fbaf2a5ce8..0428b47635 100644
--- a/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/taxonNameBox.vue
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/components/taxonNameBox.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="taxonNameBox">
     <modal
-      v-if="showModal"
-      @close="showModal = false"
+      v-if="isModalVisible"
+      @close="() => (isModalVisible = false)"
     >
       <template #header>
         <h3>Confirm delete</h3>
@@ -30,7 +30,6 @@
           class="flex-separate middle"
         >
           <a
-            v-hotkey="shortcuts"
             :href="`/tasks/nomenclature/browse?taxon_name_id=${taxon.id}`"
             class="taxonname"
             v-html="taxonNameAndAuthor"
@@ -43,7 +42,7 @@
                 :redirect="false"
               />
               <OtuRadial
-                ref="browseOtu"
+                ref="otuRadialRef"
                 :object-id="taxon.id"
                 :taxon-name="taxon.object_tag"
               />
@@ -60,7 +59,7 @@
                 v-if="taxon.id"
                 color="destroy"
                 circle
-                @click="showModal = true"
+                @click="isModalVisible = true"
               >
                 <VIcon
                   name="trash"
@@ -80,7 +79,8 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
 import OtuRadial from '@/components/otu/otu.vue'
 import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
 import RadialObject from '@/components/radials/navigation/radial.vue'
@@ -90,132 +90,72 @@ import Modal from '@/components/ui/Modal.vue'
 import platformKey from '@/helpers/getPlatformKey'
 import VBtn from '@/components/ui/VBtn/index.vue'
 import VIcon from '@/components/ui/VIcon/index.vue'
+import useHotkey from 'vue3-hotkey'
 import { TaxonName } from '@/routes/endpoints'
 import { GetterNames } from '../store/getters/getters'
-import { ActionNames } from '../store/actions/actions'
-
-export default {
-  components: {
-    Modal,
-    RadialAnnotator,
-    RadialObject,
-    OtuRadial,
-    PinObject,
-    DefaultConfidence,
-    VBtn,
-    VIcon
-  },
-  data() {
-    return {
-      showModal: false
+import { computed, ref, onBeforeMount } from 'vue'
+import { useStore } from 'vuex'
+
+const isModalVisible = ref(false)
+const otuRadialRef = ref(null)
+const store = useStore()
+const shortcuts = ref([
+  {
+    keys: [platformKey(), 'b'],
+    handler() {
+      switchBrowse()
     }
   },
-  computed: {
-    taxon() {
-      return this.$store.getters[GetterNames.GetTaxon]
-    },
-
-    taxonNameAndAuthor() {
-      return `${this.taxon.cached_html} ${this.taxon.cached_author_year || ''}`
-    },
-
-    parent() {
-      return this.$store.getters[GetterNames.GetParent]
-    },
-
-    citation() {
-      return this.$store.getters[GetterNames.GetCitation]
-    },
-
-    roles() {
-      const roles = this.$store.getters[GetterNames.GetRoles] || []
-      const count = roles.length
-      let stringRoles = ''
-
-      roles.forEach((element, index) => {
-        stringRoles = stringRoles + element.person.last_name
-
-        if (index < count - 2) {
-          stringRoles += ', '
-        } else if (index === count - 2) {
-          stringRoles += ' & '
-        }
-      })
-
-      return stringRoles
-    },
-    shortcuts() {
-      const keys = {}
-
-      keys[`${platformKey()}+b`] = this.switchBrowse
-      keys[`${platformKey()}+o`] = this.switchBrowseOtu
-
-      return keys
+  {
+    keys: [platformKey(), 'o'],
+    handler() {
+      switchBrowseOtu()
     }
-  },
-
-  created() {
-    TW.workbench.keyboard.createLegend(
-      platformKey() + '+' + 'b',
-      'Go to browse nomenclature',
-      'New taxon name'
-    )
-    TW.workbench.keyboard.createLegend(
-      platformKey() + '+' + 'o',
-      'Go to browse otus',
-      'New taxon name'
-    )
-  },
-
-  methods: {
-    deleteTaxon() {
-      TaxonName.destroy(this.taxon.id)
-        .then(() => {
-          this.reloadPage()
-        })
-        .catch(() => {})
-    },
-
-    reloadPage() {
-      window.location.href = '/tasks/nomenclature/new_taxon_name/'
-    },
-
-    showAuthor() {
-      return this.roles.length
-        ? this.roles
-        : this.taxon.verbatim_author
-        ? this.taxon.verbatim_author +
-          (this.taxon.year_of_publication
-            ? ', ' + this.taxon.year_of_publication
-            : '')
-        : this.citation
-        ? this.citation.source.author_year
-        : ''
-    },
+  }
+])
+
+useHotkey(shortcuts.value)
+
+const parent = computed(() => store.getters[GetterNames.GetParent])
+const taxon = computed(() => store.getters[GetterNames.GetTaxon])
+
+const taxonNameAndAuthor = computed(
+  () => `${taxon.value.cached_html} ${taxon.value.cached_author_year || ''}`
+)
+
+onBeforeMount(() => {
+  TW.workbench.keyboard.createLegend(
+    platformKey() + '+' + 'b',
+    'Go to browse nomenclature',
+    'New taxon name'
+  )
+  TW.workbench.keyboard.createLegend(
+    platformKey() + '+' + 'o',
+    'Go to browse otus',
+    'New taxon name'
+  )
+})
+
+function deleteTaxon() {
+  TaxonName.destroy(taxon.value.id)
+    .then(() => {
+      reloadPage()
+    })
+    .catch(() => {})
+}
 
-    switchBrowse() {
-      window.location.replace(
-        `/tasks/nomenclature/browse?taxon_name_id=${this.taxon.id}`
-      )
-    },
+function reloadPage() {
+  window.location.href = '/tasks/nomenclature/new_taxon_name/'
+}
 
-    loadParent() {
-      if (this.taxon.id && this.parent.id) {
-        this.$store
-          .dispatch(ActionNames.UpdateTaxonName, this.taxon)
-          .then((response) => {
-            window.open(
-              `/tasks/nomenclature/new_taxon_name?taxon_name_id=${response.parent_id}`,
-              '_self'
-            )
-          })
-      }
-    },
+function switchBrowse() {
+  window.location.replace(
+    `/tasks/nomenclature/browse?taxon_name_id=${taxon.value.id}`
+  )
+}
 
-    switchBrowseOtu() {
-      this.$refs.browseOtu.openApp()
-    }
-  }
+function switchBrowseOtu() {
+  otuRadialRef.value.openApp()
 }
 </script>
 
diff --git a/app/javascript/vue/tasks/nomenclature/new_taxon_name/const/components.js b/app/javascript/vue/tasks/nomenclature/new_taxon_name/const/components.js
new file mode 100644
index 0000000000..198409d473
--- /dev/null
+++ b/app/javascript/vue/tasks/nomenclature/new_taxon_name/const/components.js
@@ -0,0 +1,121 @@
+import AuthorSection from '../components/Author/Author.vue'
+import ClassificationSection from '../components/classification.vue'
+import EtymologySection from '../components/etymology.vue'
+import GenderSection from '../components/gender.vue'
+import ManagesynonymySection from '../components/manageSynonym'
+import OriginalFormSection from '../components/OriginalForm.vue'
+import OriginalcombinationSection from '../components/pickOriginalCombination.vue'
+import RelationshipSection from '../components/relationshipPicker.vue'
+import StatusSection from '../components/statusPicker.vue'
+import SubsequentCombinationSection from '../components/Combination/CombinationMain.vue'
+import SubsequentNameFormSection from '../components/SubsequentNameForm/SubsequentNameForm.vue'
+import TaxonSection from '../components/basicInformation.vue'
+import TypeSection from '../components/type.vue'
+import showForThisGroup from '../helpers/showForThisGroup'
+
+export const SectionComponents = [
+  {
+    title: 'Taxon',
+    component: TaxonSection,
+    isAvailableFor: () => true
+  },
+
+  {
+    title: 'Author',
+    component: AuthorSection,
+    isAvailableFor: () => true
+  },
+
+  {
+    title: 'Status',
+    component: StatusSection,
+    isAvailableFor: () => true
+  },
+
+  {
+    title: 'Relationship',
+    component: RelationshipSection,
+    isAvailableFor: () => true
+  },
+
+  {
+    title: 'Manage synonymy',
+    component: ManagesynonymySection,
+    isAvailableFor: (taxon) =>
+      showForThisGroup(['GenusGroup', 'FamilyGroup'], taxon) &&
+      !taxon.cached_is_valid
+  },
+
+  {
+    title: 'Type',
+    component: TypeSection,
+    isAvailableFor: (taxon) =>
+      showForThisGroup(
+        [
+          'SpeciesGroup',
+          'GenusGroup',
+          'FamilyGroup',
+          'SpeciesAndInfraspeciesGroup'
+        ],
+        taxon
+      )
+  },
+
+  {
+    title: 'Original combination',
+    component: OriginalcombinationSection,
+    isAvailableFor: (taxon) =>
+      showForThisGroup(
+        ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
+        taxon
+      )
+  },
+
+  {
+    title: 'Subsequent Combination',
+    component: SubsequentCombinationSection,
+    isAvailableFor: (taxon) =>
+      showForThisGroup(
+        ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
+        taxon
+      )
+  },
+
+  {
+    title: 'Original Form',
+    component: OriginalFormSection,
+    isAvailableFor: (taxon) => showForThisGroup(['FamilyGroup'], taxon)
+  },
+
+  {
+    title: 'Subsequent Name Form',
+    component: SubsequentNameFormSection,
+    isAvailableFor: (taxon) => showForThisGroup(['FamilyGroup'], taxon)
+  },
+
+  {
+    title: 'Classification',
+    component: ClassificationSection,
+    isAvailableFor: () => true
+  },
+
+  {
+    title: 'Gender',
+    component: GenderSection,
+    isAvailableFor: (taxon) =>
+      showForThisGroup(
+        ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
+        taxon
+      )
+  },
+
+  {
+    title: 'Etymology',
+    component: EtymologySection,
+    isAvailableFor: (taxon) =>
+      showForThisGroup(
+        ['SpeciesGroup', 'GenusGroup', 'SpeciesAndInfraspeciesGroup'],
+        taxon
+      )
+  }
+]