src/i18n/locale/en.yml

@@ -1122,6 +1122,7 @@ item:
         fixedPrice: Fixed prices
         wasteBreakdown: Waste breakdown
         itemCreate: New item
+        botanical: Botanical
     descriptor:
         item: Item
         buyer: Buyer

src/i18n/locale/es.yml

@@ -1121,6 +1121,7 @@ item:
         fixedPrice: Precios fijados
         wasteBreakdown: Deglose de mermas
         itemCreate: Nuevo artículo
+        botanical: Botánico
     descriptor:
         item: Artículo
         buyer: Comprador

src/pages/Item/Card/CreateGenusForm.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const genusInputRef = ref(null);
+const genusFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    genusInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="genera"
+        model="itemGenus"
+        :title="t('New genus')"
+        :form-initial-data="genusFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="genusInputRef"
+                    :label="t('Latin genus name')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New genus: Nuevo genus
+    Latin genus name: Nombre del genus en latín
+</i18n>

src/pages/Item/Card/CreateSpecieForm.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const specieInputRef = ref(null);
+const specieFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    specieInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="species"
+        model="itemSpecie"
+        :title="t('New species')"
+        :form-initial-data="specieFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="specieInputRef"
+                    :label="t('Latin species name')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New species: Nueva especie
+    Latin species name: Nombre de la especie en latín
+</i18n>

src/pages/Item/Card/ItemBotanical.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CreateGenusForm from './CreateGenusForm.vue';
+import CreateSpecieForm from './CreateSpecieForm.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemBotanicalsRef = ref(null);
+const itemGenusOptions = ref([]);
+const itemSpeciesOptions = ref([]);
+const itemBotanicals = ref([]);
+let itemBotanicalsForm = reactive({});
+
+const onGenusCreated = (response, formData) => {
+    itemGenusOptions.value = [...itemGenusOptions.value, response];
+    formData.genusFk = response.id;
+};
+
+const onSpecieCreated = (response, formData) => {
+    itemSpeciesOptions.value = [...itemSpeciesOptions.value, response];
+    formData.specieFk = response.id;
+};
+
+onMounted(async () => {
+    itemBotanicals.value = await itemBotanicalsRef.value.fetch();
+    if (itemBotanicals.value.length > 0)
+        Object.assign(itemBotanicalsForm, itemBotanicals.value[0]);
+});
+</script>
+<template>
+    <FetchData
+        ref="itemBotanicalsRef"
+        url="ItemBotanicals"
+        :filter="{
+            where: { itemFk: route.params.id },
+        }"
+        @on-fetch="(data) => (itemBotanicals = data)"
+    />
+    <FetchData
+        url="Genera"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (itemGenusOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Species"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (itemSpeciesOptions = data)"
+        auto-load
+    />
+    <FormModel
+        url-update="ItemBotanicals"
+        model="entry"
+        auto-load
+        :form-initial-data="itemBotanicalsForm"
+        :clear-store-on-unmount="false"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelectDialog
+                    :label="t('Genus')"
+                    v-model="data.genusFk"
+                    :options="itemGenusOptions"
+                    option-label="name"
+                    option-value="id"
+                    hide-selected
+                >
+                    <template #form>
+                        <CreateGenusForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onGenusCreated(requestResponse, data)
+                            "
+                        />
+                    </template>
+                </VnSelectDialog>
+                <VnSelectDialog
+                    :label="t('Species')"
+                    v-model="data.specieFk"
+                    :options="itemSpeciesOptions"
+                    option-label="name"
+                    option-value="id"
+                    hide-selected
+                >
+                    <template #form>
+                        <CreateSpecieForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onSpecieCreated(requestResponse, data)
+                            "
+                        />
+                    </template>
+                </VnSelectDialog>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Genus: Genus
+    Species: Especies
+</i18n>

src/router/modules/item.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'ItemMain' },
     menus: {
         main: ['ItemList', 'WasteBreakdown', 'ItemFixedPrice'],
-        card: ['ItemBasicData'],
+        card: ['ItemBasicData', 'ItemBotanical'],
     },
     children: [
         {
@@ -103,6 +103,15 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
                 },
+                {
+                    path: 'botanical',
+                    name: 'ItemBotanical',
+                    meta: {
+                        title: 'botanical',
+                        icon: 'vn:botanical',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
+                },
             ],
         },
     ],