From 596904c4f8eaacd06454ba0d8bcb950c00460528 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 16 Jan 2024 13:26:12 -0300
Subject: [PATCH 1/2] Entry submodules: Log, Basic data, Buys (WIP)

---
 src/components/common/VnInput.vue       |   7 +-
 src/i18n/en/index.js                    |  26 +-
 src/i18n/es/index.js                    |  25 +-
 src/pages/Entry/Card/EntryBasicData.vue | 202 ++++++++++++
 src/pages/Entry/Card/EntryBuys.vue      | 406 ++++++++++++++++++++++++
 src/pages/Entry/Card/EntryLog.vue       |   6 +
 src/pages/Entry/Card/EntryNotes.vue     |   1 +
 src/pages/Entry/Card/EntrySummary.vue   |  22 +-
 src/router/modules/entry.js             |  38 ++-
 9 files changed, 707 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/Entry/Card/EntryBasicData.vue
 create mode 100644 src/pages/Entry/Card/EntryBuys.vue
 create mode 100644 src/pages/Entry/Card/EntryLog.vue
 create mode 100644 src/pages/Entry/Card/EntryNotes.vue

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index cdc6dd865..76e91a5d8 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
 
 const $props = defineProps({
     modelValue: {
@@ -32,6 +32,10 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+const onEnterPress = () => {
+    emit('keyup.enter');
+};
 </script>
 
 <template>
@@ -41,6 +45,7 @@ const styleAttrs = computed(() => {
         v-bind="{ ...$attrs, ...styleAttrs }"
         type="text"
         :class="{ required: $attrs.required }"
+        @keyup.enter="onEnterPress()"
     >
         <template v-if="$slots.prepend" #prepend>
             <slot name="prepend" />
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index b7a2ff008..120cbd7e0 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -261,9 +261,11 @@ export default {
         pageTitles: {
             entries: 'Entries',
             list: 'List',
-            createEntry: 'New entry',
             summary: 'Summary',
-            create: 'Create',
+            basicData: 'Basic data',
+            buys: 'Buys',
+            notes: 'Notes',
+            log: 'Log',
         },
         list: {
             newEntry: 'New entry',
@@ -303,6 +305,26 @@ export default {
             buyingValue: 'Buying value',
             import: 'Import',
             pvp: 'PVP',
+            item: 'Item',
+        },
+        basicData: {
+            supplier: 'Supplier',
+            travel: 'Travel',
+            reference: 'Reference',
+            invoiceNumber: 'Invoice number',
+            company: 'Company',
+            currency: 'Currency',
+            commission: 'Commission',
+            observation: 'Observation',
+            ordered: 'Ordered',
+            confirmed: 'Confirmed',
+            booked: 'Booked',
+            raid: 'Raid',
+            excludedFromAvailable: 'Inventory',
+        },
+        buys: {
+            groupingPrice: 'Grouping price',
+            packingPrice: 'Packing price',
         },
     },
     ticket: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 6107cce14..9c27c6fe1 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -261,7 +261,10 @@ export default {
             entries: 'Entradas',
             list: 'Listado',
             summary: 'Resumen',
-            create: 'Crear',
+            basicData: 'Datos básicos',
+            buys: 'Compras',
+            notes: 'Notas',
+            log: 'Historial',
         },
         list: {
             newEntry: 'Nueva entrada',
@@ -301,6 +304,26 @@ export default {
             buyingValue: 'Coste',
             import: 'Importe',
             pvp: 'PVP',
+            item: 'Artículo',
+        },
+        basicData: {
+            supplier: 'Proveedor',
+            travel: 'Envío',
+            reference: 'Referencia',
+            invoiceNumber: 'Núm. factura',
+            company: 'Empresa',
+            currency: 'Moneda',
+            observation: 'Observación',
+            commission: 'Comisión',
+            ordered: 'Pedida',
+            confirmed: 'Confirmado',
+            booked: 'Asentado',
+            raid: 'Redada',
+            excludedFromAvailable: 'Inventario',
+        },
+        buys: {
+            groupingPrice: 'Precio grouping',
+            packingPrice: 'Precio packing',
         },
     },
     ticket: {
diff --git a/src/pages/Entry/Card/EntryBasicData.vue b/src/pages/Entry/Card/EntryBasicData.vue
new file mode 100644
index 000000000..a5565fbf6
--- /dev/null
+++ b/src/pages/Entry/Card/EntryBasicData.vue
@@ -0,0 +1,202 @@
+<script setup>
+import { ref } 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 VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { toDate } from 'src/filters';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const suppliersOptions = ref([]);
+const travelsOptions = ref([]);
+const companiesOptions = ref([]);
+const currenciesOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        order="nickname"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Travels/filter"
+        :filter="{ fields: ['id', 'warehouseInName'] }"
+        order="id"
+        @on-fetch="(data) => (travelsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="currenciesRef"
+        url="Currencies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (currenciesOptions = data)"
+        auto-load
+    />
+    <FormModel
+        :url="`Entries/${route.params.id}`"
+        :url-update="`Entries/${route.params.id}`"
+        model="entry"
+        auto-load
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.supplier')"
+                        v-model="data.supplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        :required="true"
+                        map-options
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.travel')"
+                        v-model="data.travelFk"
+                        :options="travelsOptions"
+                        option-value="id"
+                        option-label="warehouseInName"
+                        map-options
+                        hide-selected
+                        :required="true"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel
+                                        >{{ scope.opt?.agencyModeName }} -
+                                        {{ scope.opt?.warehouseInName }} ({{
+                                            toDate(scope.opt?.shipped)
+                                        }}) &#x2192; {{ scope.opt?.warehouseOutName }} ({{
+                                            toDate(scope.opt?.landed)
+                                        }})</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.reference"
+                        :label="t('entry.basicData.reference')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.invoiceNumber"
+                        :label="t('entry.basicData.invoiceNumber')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.company')"
+                        v-model="data.companyFk"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        map-options
+                        hide-selected
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.currency')"
+                        v-model="data.currencyFk"
+                        :options="currenciesOptions"
+                        option-value="id"
+                        option-label="code"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('entry.basicData.commission')"
+                        v-model="data.commission"
+                        type="number"
+                        autofocus
+                        min="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('entry.basicData.observation')"
+                        type="textarea"
+                        v-model="data.observation"
+                        fill-input
+                        autogrow
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isOrdered"
+                        :label="t('entry.basicData.ordered')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isConfirmed"
+                        :label="t('entry.basicData.confirmed')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isExcludedFromAvailable"
+                        :label="t('entry.basicData.excludedFromAvailable')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox v-model="data.isRaid" :label="t('entry.basicData.raid')" />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isBooked"
+                        :label="t('entry.basicData.booked')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
new file mode 100644
index 000000000..4c399ed0f
--- /dev/null
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -0,0 +1,406 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const quasar = useQuasar();
+const route = useRoute();
+const { t } = useI18n();
+const stateStore = useStateStore();
+const { notify } = useNotify();
+
+const rowsSelected = ref([]);
+const entryBuysPaginateRef = ref(null);
+const packagingsOptions = ref(null);
+
+const tableColumnComponents = computed(() => ({
+    item: {
+        component: () => 'span',
+        props: () => {},
+        event: () => ({}),
+    },
+    quantity: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+            class: 'input-number',
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    packagingFk: {
+        component: () => VnSelectFilter,
+        props: () => ({
+            'option-value': 'id',
+            'option-label': 'id',
+            'emit-value': true,
+            'map-options': true,
+            'use-input': true,
+            'hide-selected': true,
+            options: packagingsOptions.value,
+        }),
+        event: (props) => ({
+            'update:modelValue': () => saveChange(props.row),
+        }),
+    },
+    stickers: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+            class: 'input-number',
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    weight: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    packing: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    grouping: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    buyingValue: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    price2: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    price3: {
+        component: () => VnInput,
+        props: (col) => ({
+            type: 'number',
+            min: 0,
+            label: col.label,
+        }),
+        event: (props) => ({
+            'keyup.enter': () => saveChange(props.row),
+        }),
+    },
+    import: {
+        component: () => 'span',
+        props: () => {},
+        event: () => ({}),
+    },
+}));
+
+const entriesTableColumns = computed(() => {
+    return [
+        {
+            label: t('entry.summary.item'),
+            field: 'id',
+            name: 'item',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.quantity'),
+            field: 'quantity',
+            name: 'quantity',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.package'),
+            field: 'packagingFk',
+            name: 'packagingFk',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.stickers'),
+            field: 'stickers',
+            name: 'stickers',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.weight'),
+            field: 'weight',
+            name: 'weight',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.packing'),
+            field: 'packing',
+            name: 'packing',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.grouping'),
+            field: 'grouping',
+            name: 'grouping',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.buyingValue'),
+            field: 'buyingValue',
+            name: 'buyingValue',
+            align: 'left',
+            format: (value) => toCurrency(value),
+        },
+        {
+            label: t('entry.buys.groupingPrice'),
+            field: 'price2',
+            name: 'price2',
+            align: 'left',
+        },
+        {
+            label: t('entry.buys.packingPrice'),
+            field: 'price3',
+            name: 'price3',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.import'),
+            name: 'import',
+            align: 'left',
+            format: (_, row) => toCurrency(row.buyingValue * row.quantity),
+        },
+    ];
+});
+
+const saveChange = async (rowData) => {
+    await axios.patch(`Buys/${rowData.id}`, rowData);
+};
+
+const openRemoveDialog = async () => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('Confirm deletion'),
+                message:
+                    rowsSelected.value.length > 1
+                        ? t('Are you sure you want to delete this buys?')
+                        : t('Are you sure you want to delete this buy?'),
+                data: rowsSelected.value,
+            },
+        })
+        .onOk(async () => {
+            try {
+                await deleteBuys();
+                const notifyMessage =
+                    rowsSelected.value.length > 1 ? t('Buys deleted') : t('Buy deleted');
+                notify(notifyMessage, 'positive');
+            } catch (err) {
+                console.error('Error deleting buys');
+            }
+        });
+};
+
+const deleteBuys = async () => {
+    await axios.post('Buys/deleteBuys', { buys: rowsSelected.value });
+    entryBuysPaginateRef.value.fetch();
+};
+
+const importBuys = () => {
+    // redirect to buys import view
+};
+</script>
+
+<template>
+    <FetchData
+        ref="expensesRef"
+        url="Packagings"
+        :filter="{ fields: ['id'], where: { freightItemFk: true }, order: 'id ASC' }"
+        auto-load
+        @on-fetch="(data) => (packagingsOptions = data)"
+    />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <QBtnGroup push style="column-gap: 10px">
+            <slot name="moreBeforeActions" />
+            <QBtn
+                :label="t('globals.remove')"
+                color="primary"
+                icon="delete"
+                flat
+                @click="openRemoveDialog()"
+                :disable="!rowsSelected?.length"
+                :title="t('globals.remove')"
+            />
+        </QBtnGroup>
+    </Teleport>
+    <VnPaginate
+        ref="entryBuysPaginateRef"
+        data-key="EntryBuys"
+        :url="`Entries/${route.params.id}/getBuys`"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QTable
+                :rows="rows"
+                :columns="entriesTableColumns"
+                selection="multiple"
+                row-key="id"
+                hide-bottom
+                class="full-width q-mt-md"
+                :grid="$q.screen.lt.md"
+                v-model:selected="rowsSelected"
+            >
+                <template #body="props">
+                    <QTr>
+                        <QTd>
+                            <QCheckbox v-model="props.selected" />
+                        </QTd>
+                        <QTd v-for="col in props.cols" :key="col.name">
+                            <component
+                                :is="tableColumnComponents[col.name].component()"
+                                v-bind="tableColumnComponents[col.name].props(col)"
+                                v-model="props.row[col.field]"
+                                v-on="tableColumnComponents[col.name].event(props)"
+                            >
+                                <template
+                                    v-if="col.name === 'item' || col.name === 'import'"
+                                >
+                                    {{ col.value }}
+                                </template>
+                            </component>
+                        </QTd>
+                    </QTr>
+                    <QTr no-hover>
+                        <QTd />
+                        <QTd>
+                            <span>{{ props.row.item.itemType.code }}</span>
+                        </QTd>
+                        <QTd>
+                            <span>{{ props.row.item.id }}</span>
+                        </QTd>
+                        <QTd>
+                            <span>{{ props.row.item.size }}</span>
+                        </QTd>
+                        <QTd>
+                            <span>{{ toCurrency(props.row.item.minPrice) }}</span>
+                        </QTd>
+                        <QTd colspan="7">
+                            <span>{{ props.row.item.concept }}</span>
+                            <span v-if="props.row.item.subName" class="subName">
+                                {{ props.row.item.subName }}
+                            </span>
+                            <fetched-tags :item="props.row.item" :max-length="5" />
+                        </QTd>
+                    </QTr>
+                    <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
+                    <QTr v-if="props.rowIndex !== rows.length - 1" class="separation-row">
+                        <QTd colspan="12" style="height: 24px" />
+                    </QTr>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard bordered flat>
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList dense>
+                                <QItem v-for="col in props.cols" :key="col.name">
+                                    <component
+                                        :is="tableColumnComponents[col.name].component()"
+                                        v-bind="
+                                            tableColumnComponents[col.name].props(col)
+                                        "
+                                        v-model="props.row[col.field]"
+                                        v-on="
+                                            tableColumnComponents[col.name].event(props)
+                                        "
+                                        class="full-width"
+                                    >
+                                        <template
+                                            v-if="
+                                                col.name === 'item' ||
+                                                col.name === 'import'
+                                            "
+                                        >
+                                            {{ col.label + ': ' + col.value }}
+                                        </template>
+                                    </component>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+    </VnPaginate>
+    <QPageSticky :offset="[20, 20]">
+        <QBtn fab icon="upload" color="primary" @click="importBuys()" />
+        <QTooltip>
+            {{ t('Import buys') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.separation-row {
+    background-color: var(--vn-gray) !important;
+}
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+es:
+    Import buys: Importar compras
+    Buy deleted: Compra eliminada
+    Buys deleted: Compras eliminadas
+    Confirm deletion: Confirmar eliminación
+    Are you sure you want to delete this buy?: Seguro que quieres eliminar esta compra?
+    Are you sure you want to delete this buys?: Seguro que quieres eliminar estas compras?
+</i18n>
diff --git a/src/pages/Entry/Card/EntryLog.vue b/src/pages/Entry/Card/EntryLog.vue
new file mode 100644
index 000000000..930f7dd40
--- /dev/null
+++ b/src/pages/Entry/Card/EntryLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Entry" url="/EntryLogs"></VnLog>
+</template>
diff --git a/src/pages/Entry/Card/EntryNotes.vue b/src/pages/Entry/Card/EntryNotes.vue
new file mode 100644
index 000000000..4728feea5
--- /dev/null
+++ b/src/pages/Entry/Card/EntryNotes.vue
@@ -0,0 +1 @@
+<template>Entry Notes</template>
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index d19b1f744..3861e0321 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -39,47 +39,30 @@ onMounted(async () => {
 const tableColumnComponents = {
     quantity: {
         component: () => 'span',
-        props: () => {},
     },
     stickers: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
     packagingFk: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
     weight: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
     packing: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
     grouping: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
     buyingValue: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
     amount: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
     pvp: {
         component: () => 'span',
-        props: () => {},
-        event: () => {},
     },
 };
 
@@ -314,10 +297,7 @@ const fetchEntryBuys = async () => {
                         <QTr no-hover>
                             <QTd v-for="col in cols" :key="col.name">
                                 <component
-                                    :is="tableColumnComponents[col.name].component(props)"
-                                    v-bind="tableColumnComponents[col.name].props(props)"
-                                    @click="tableColumnComponents[col.name].event(props)"
-                                    class="col-content"
+                                    :is="tableColumnComponents[col.name].component()"
                                 >
                                     <template
                                         v-if="
diff --git a/src/router/modules/entry.js b/src/router/modules/entry.js
index a806190a8..4137cb59e 100644
--- a/src/router/modules/entry.js
+++ b/src/router/modules/entry.js
@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'EntryMain' },
     menus: {
         main: ['EntryList'],
-        card: [],
+        card: ['EntryBasicData', 'EntryBuys', 'EntryNotes', 'EntryLog'],
     },
     children: [
         {
@@ -54,6 +54,42 @@ export default {
                     },
                     component: () => import('src/pages/Entry/Card/EntrySummary.vue'),
                 },
+                {
+                    path: 'basic-data',
+                    name: 'EntryBasicData',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Entry/Card/EntryBasicData.vue'),
+                },
+                {
+                    path: 'buys',
+                    name: 'EntryBuys',
+                    meta: {
+                        title: 'buys',
+                        icon: 'vn:lines',
+                    },
+                    component: () => import('src/pages/Entry/Card/EntryBuys.vue'),
+                },
+                {
+                    path: 'notes',
+                    name: 'EntryNotes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'vn:notes',
+                    },
+                    component: () => import('src/pages/Entry/Card/EntryNotes.vue'),
+                },
+                {
+                    path: 'log',
+                    name: 'EntryLog',
+                    meta: {
+                        title: 'log',
+                        icon: 'vn:History',
+                    },
+                    component: () => import('src/pages/Entry/Card/EntryLog.vue'),
+                },
             ],
         },
     ],

From 64a4a800f752dad7016b9dbe5e457e3313ae61fc Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 16 Jan 2024 16:11:23 -0300
Subject: [PATCH 2/2] Entry buys import

---
 src/i18n/en/index.js                     |   9 +
 src/i18n/es/index.js                     |   9 +
 src/pages/Entry/Card/EntryBuys.vue       |   5 +-
 src/pages/Entry/Card/EntryBuysImport.vue | 281 +++++++++++++++++++++++
 src/router/modules/entry.js              |   5 +
 5 files changed, 307 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Entry/Card/EntryBuysImport.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 120cbd7e0..a1d237480 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -325,6 +325,15 @@ export default {
         buys: {
             groupingPrice: 'Grouping price',
             packingPrice: 'Packing price',
+            reference: 'Reference',
+            observations: 'Observations',
+            item: 'Item',
+            description: 'Description',
+            size: 'Size',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Buying value',
+            packagingFk: 'Box',
         },
     },
     ticket: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 9c27c6fe1..3aa9d350e 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -324,6 +324,15 @@ export default {
         buys: {
             groupingPrice: 'Precio grouping',
             packingPrice: 'Precio packing',
+            reference: 'Referencia',
+            observations: 'Observaciónes',
+            item: 'Artículo',
+            description: 'Descripción',
+            size: 'Medida',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Coste',
+            packagingFk: 'Embalaje',
         },
     },
     ticket: {
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index 4c399ed0f..87d4b3826 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -18,6 +18,7 @@ import useNotify from 'src/composables/useNotify.js';
 
 const quasar = useQuasar();
 const route = useRoute();
+const router = useRouter();
 const { t } = useI18n();
 const stateStore = useStateStore();
 const { notify } = useNotify();
@@ -251,7 +252,7 @@ const deleteBuys = async () => {
 };
 
 const importBuys = () => {
-    // redirect to buys import view
+    router.push({ name: 'EntryBuysImport' });
 };
 </script>
 
diff --git a/src/pages/Entry/Card/EntryBuysImport.vue b/src/pages/Entry/Card/EntryBuysImport.vue
new file mode 100644
index 000000000..1495e968d
--- /dev/null
+++ b/src/pages/Entry/Card/EntryBuysImport.vue
@@ -0,0 +1,281 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toCurrency } from 'filters/index';
+
+const stateStore = useStateStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const importData = ref({
+    file: null,
+    invoice: null,
+    buys: [],
+    observation: null,
+    ref: null,
+});
+
+const lastItemBuysOptions = ref([]);
+const packagingsOptions = ref([]);
+
+const columns = computed(() => [
+    {
+        label: t('entry.buys.item'),
+        name: 'item',
+        field: 'itemFk',
+        options: lastItemBuysOptions.value,
+        optionValue: 'id',
+        optionLabel: 'name',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.description'),
+        name: 'description',
+        field: 'description',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.size'),
+        name: 'size',
+        field: 'size',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.packing'),
+        name: 'packing',
+        field: 'packing',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.grouping'),
+        name: 'grouping',
+        field: 'grouping',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.buyingValue'),
+        name: 'buyingValue',
+        field: 'buyingValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.buys.packagingFk'),
+        name: 'packagingFk',
+        field: 'packagingFk',
+        options: packagingsOptions.value,
+        optionValue: 'id',
+        optionLabel: 'id',
+        align: 'left',
+    },
+]);
+
+const onFileChange = (e) => {
+    importData.value.file = e;
+    const reader = new FileReader();
+    reader.onload = (e) => fillData(e.target.result);
+    reader.readAsText(importData.value.file);
+};
+
+const fillData = async (rawData) => {
+    const data = JSON.parse(rawData);
+    const [invoice] = data.invoices;
+
+    importData.value.observation = invoice.tx_awb;
+    const companyName = invoice.tx_company;
+    const boxes = invoice.boxes;
+    const buys = [];
+
+    for (let box of boxes) {
+        const boxVolume = box.nu_length * box.nu_width * box.nu_height;
+        for (let product of box.products) {
+            const packing = product.nu_stems_bunch * product.nu_bunches;
+            buys.push({
+                description: product.nm_product,
+                companyName: companyName,
+                size: product.nu_length,
+                packing: packing,
+                grouping: product.nu_stems_bunch,
+                buyingValue: parseFloat(product.mny_rate_stem),
+                volume: boxVolume,
+            });
+        }
+    }
+
+    const boxesId = boxes.map((box) => box.id_box);
+    importData.value.ref = boxesId.join(', ');
+    await fetchBuys(buys);
+};
+
+const fetchBuys = async (buys) => {
+    try {
+        const params = { buys };
+        const { data } = await axios.post(
+            `Entries/${route.params.id}/importBuysPreview`,
+            params
+        );
+        importData.value.buys = data;
+    } catch (err) {
+        console.error('Error fetching buys');
+    }
+};
+
+const onSubmit = async () => {
+    try {
+        const params = importData.value;
+        const hasAnyEmptyRow = params.buys.some((buy) => {
+            return buy.itemFk === null;
+        });
+
+        if (hasAnyEmptyRow) {
+            notify(t('Some of the imported buys does not have an item'), 'negative');
+            return;
+        }
+
+        await axios.post(`Entries/${route.params.id}/importBuys`, params);
+        notify('globals.dataSaved', 'positive');
+        redirectToBuysView();
+    } catch (err) {
+        console.error('Error importing buys', err);
+    }
+};
+
+const redirectToBuysView = () => {
+    router.push({ name: 'EntryBuys' });
+};
+</script>
+<template>
+    <FetchData
+        :url="`Entries/${route.params.id}/lastItemBuys`"
+        :filter="{ fields: ['id', 'name'] }"
+        order="id DESC"
+        @on-fetch="(data) => (lastItemBuysOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Packagings"
+        :filter="{ fields: ['id'], where: { isBox: true } }"
+        order="id ASC"
+        @on-fetch="(data) => (packagingsOptions = data)"
+        auto-load
+    />
+    <QForm>
+        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+            <div>
+                <QBtnGroup push class="q-gutter-x-sm">
+                    <QBtn
+                        :label="t('globals.cancel')"
+                        color="primary"
+                        icon="restart_alt"
+                        flat
+                        @click="redirectToBuysView()"
+                    />
+                    <QBtn
+                        :label="t('globals.save')"
+                        color="primary"
+                        icon="save"
+                        type="submit"
+                        :disable="!importData.file"
+                        @click="onSubmit()"
+                    />
+                </QBtnGroup>
+            </div>
+        </Teleport>
+        <QCard class="q-pa-lg">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QFile
+                        label="Standard"
+                        :multiple="false"
+                        v-model="importData.file"
+                        @update:model-value="onFileChange($event)"
+                    >
+                        <template #append>
+                            <QIcon name="vn:attach" class="cursor-pointer">
+                                <QTooltip>{{ t('Select a file') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QFile>
+                </div>
+            </VnRow>
+            <div v-if="importData.file">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            :label="t('entry.buys.reference')"
+                            v-model="importData.ref"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            :label="t('entry.buys.observations')"
+                            v-model="importData.observation"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <QTable
+                        :columns="columns"
+                        :rows="importData.buys"
+                        :pagination="{ rowsPerPage: 0 }"
+                        hide-pagination
+                    >
+                        <template #body-cell-item="{ row, col }">
+                            <QTd auto-width>
+                                <VnSelectFilter
+                                    v-model="row[col.field]"
+                                    :options="col.options"
+                                    :option-value="col.optionValue"
+                                    :option-label="col.optionLabel"
+                                    hide-selected
+                                >
+                                    <template #option="scope">
+                                        <QItem v-bind="scope.itemProps">
+                                            <QItemSection>
+                                                <QItemLabel>
+                                                    {{ scope.opt?.id }} -
+                                                    {{ scope.opt?.name }}
+                                                </QItemLabel>
+                                            </QItemSection>
+                                        </QItem>
+                                    </template>
+                                </VnSelectFilter>
+                            </QTd>
+                        </template>
+                        <template #body-cell-packagingFk="{ row, col }">
+                            <QTd auto-width>
+                                <VnSelectFilter
+                                    v-model="row[col.field]"
+                                    :options="col.options"
+                                    :option-value="col.optionValue"
+                                    :option-label="col.optionLabel"
+                                    hide-selected
+                                />
+                            </QTd>
+                        </template>
+                    </QTable>
+                </VnRow>
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+es:
+    Select a file: Selecciona un fichero
+    Some of the imported buys does not have an item: Algunas de las compras importadas no tienen un artículo
+</i18n>
diff --git a/src/router/modules/entry.js b/src/router/modules/entry.js
index 4137cb59e..8d25a8e0c 100644
--- a/src/router/modules/entry.js
+++ b/src/router/modules/entry.js
@@ -72,6 +72,11 @@ export default {
                     },
                     component: () => import('src/pages/Entry/Card/EntryBuys.vue'),
                 },
+                {
+                    path: 'buys/import',
+                    name: 'EntryBuysImport',
+                    component: () => import('src/pages/Entry/Card/EntryBuysImport.vue'),
+                },
                 {
                     path: 'notes',
                     name: 'EntryNotes',