app/javascript/vue/tasks/dwca_import/components/settings/Occurrences/CatalogNumber/CatalogNumberDefaultTable.vue
<template>
<table class="full_width">
<thead>
<tr>
<th>collectionCode</th>
<th>Namespace</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, index) in collectionCodes"
:key="index"
class="contextMenuCells"
>
<td v-html="displayData(row.collectionCode)" />
<td class="full_width">
<CatalogNumberNamespace
:namespace-id="row.namespace_id"
@update="updateCatalogNamespace({ index, ...$event })"
/>
</td>
</tr>
</tbody>
</table>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { ActionNames } from '../../../../store/actions/actions'
import { GetterNames } from '../../../../store/getters/getters'
import CatalogNumberNamespace from './CatalogNumberNamespace.vue'
const store = useStore()
const collectionCodes = computed(
() => store.getters[GetterNames.GetDefaultCollectionCodeNamespaces]
)
collectionCodes.value.forEach((item) => {
if (item.namespace_id) {
store.dispatch(ActionNames.LoadNamespace, item.namespace_id)
}
})
const updateCatalogNamespace = ({ index, namespaceId }) => {
store.dispatch(ActionNames.UpdateDefaultCatalogNumber, { index, namespaceId })
}
const displayData = (data) => data || '<i>(blank/undefined)</i>'
</script>