Merge pull request 'Item botanical' (!329) from hyervoni/salix-front-mindshore:feature/ItemBotanical into dev

Reviewed-on: #329
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/ItemsFilterPanel.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 import axios from 'axios';
@@ -207,7 +207,7 @@ const removeTag = (index, params, search) => {
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.typeFk')"
                         v-model="params.typeFk"
                         :options="itemTypesOptions"
@@ -235,7 +235,7 @@ const removeTag = (index, params, search) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QSeparator />
@@ -246,7 +246,7 @@ const removeTag = (index, params, search) => {
                 class="q-mt-md filter-value"
             >
                 <QItemSection class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.tag')"
                         v-model="value.selectedTag"
                         :options="tagOptions"
@@ -261,7 +261,7 @@ const removeTag = (index, params, search) => {
                     />
                 </QItemSection>
                 <QItemSection class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         v-if="!value?.selectedTag?.isFree && value.valueOptions"
                         :label="t('components.itemsFilterPanel.value')"
                         v-model="value.value"

src/i18n/locale/en.yml

@@ -1132,6 +1132,9 @@ item:
         wasteBreakdown: Waste breakdown
         itemCreate: New item
         log: Log
+        tax: Tax
+        barcode: Barcode
+        botanical: Botanical
     descriptor:
         item: Item
         buyer: Buyer

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

@@ -1 +1,114 @@
-<template>Item Botanical</template>
+<script setup>
+import { ref, onMounted, reactive, computed } 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({ itemFk: null });
+
+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;
+};
+const entityId = computed(() => {
+    return route.params.id;
+});
+onMounted(async () => {
+    itemBotanicalsForm.itemFk = entityId.value;
+    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: entityId },
+        }"
+        @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: Especie
+</i18n>

src/pages/Item/ItemFixedPrice.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
@@ -178,7 +178,7 @@ const columns = computed(() => [
         name: 'warehouse',
         ...defaultColumnAttrs,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getColumnInputEvents,
@@ -434,7 +434,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 
             <template #body-cell-itemId="props">
                 <QTd>
-                    <VnSelectFilter
+                    <VnSelect
                         :options="itemsWithNameOptions"
                         hide-selected
                         option-label="id"
@@ -450,7 +450,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QTd>
             </template>
             <template #body-cell-description="{ row }">
@@ -531,7 +531,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-cell-warehouse="props">
                 <QTd class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :options="warehousesOptions"
                         hide-selected
                         option-label="name"

src/pages/Item/ItemFixedPriceFilter.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
 
 const { t } = useI18n();
@@ -35,7 +35,7 @@ const itemTypeWorkersOptions = ref([]);
         <template #body="{ params, searchFn }">
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.buyerFk')"
                         v-model="params.buyerFk"
                         :options="itemTypeWorkersOptions"
@@ -51,7 +51,7 @@ const itemTypeWorkersOptions = ref([]);
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.warehouseFk')"
                         v-model="params.warehouseFk"
                         :options="warehousesOptions"

src/pages/Item/ItemRequestFilter.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -126,7 +126,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         v-model="params.attenderFk"
                         :label="t('params.attenderFk')"
                         @update:model-value="searchFn()"
@@ -151,7 +151,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.warehouseFk')"
                         v-model="params.warehouseFk"
                         @update:model-value="searchFn()"
@@ -167,7 +167,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.requesterFk')"
                         v-model="params.requesterFk"
                         @update:model-value="searchFn()"
@@ -190,7 +190,7 @@ const decrement = (paramsObj, key) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QCard bordered>
@@ -261,7 +261,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.state')"
                         v-model="params.state"
                         @update:model-value="searchFn()"

src/router/modules/item.js

@@ -121,15 +121,6 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemTax.vue'),
                 },
-                {
-                    path: 'botanical',
-                    name: 'ItemBotanical',
-                    meta: {
-                        title: 'botanical',
-                        icon: 'vn:botanical',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
-                },
                 {
                     path: 'barcode',
                     name: 'ItemBarcode',
@@ -157,6 +148,15 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemLog.vue'),
                 },
+                {
+                    path: 'botanical',
+                    name: 'ItemBotanical',
+                    meta: {
+                        title: 'botanical',
+                        icon: 'vn:botanical',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
+                },
             ],
         },
     ],