Entry submodules: Log, Basic data, Buys (WIP)

This commit is contained in:
William Buezas 2024-01-16 13:26:12 -03:00
parent 91f675ec99
commit 596904c4f8
9 changed files with 707 additions and 26 deletions

View File

@ -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" />

View File

@ -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: {

View File

@ -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: {

View File

@ -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>

View File

@ -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>

View File

@ -0,0 +1,6 @@
<script setup>
import VnLog from 'src/components/common/VnLog.vue';
</script>
<template>
<VnLog model="Entry" url="/EntryLogs"></VnLog>
</template>

View File

@ -0,0 +1 @@
<template>Entry Notes</template>

View File

@ -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="

View File

@ -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'),
},
],
},
],