forked from verdnatura/salix-front
multiple changes
This commit is contained in:
parent
a7e653cbce
commit
f6b0404cb4
|
|
@ -0,0 +1,242 @@
|
|||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
|
||||
import axios from 'axios';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
||||
const emit = defineEmits(['itemSelected']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const itemFilter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'producer',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'ink',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const itemFilterParams = reactive({});
|
||||
const closeButton = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const producersOptions = ref([]);
|
||||
const ItemTypesOptions = ref([]);
|
||||
const InksOptions = ref([]);
|
||||
const tableRows = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const tableColumns = computed(() => [
|
||||
{
|
||||
label: t('entry.buys.id'),
|
||||
name: 'id',
|
||||
field: 'id',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.buys.name'),
|
||||
name: 'name',
|
||||
field: 'name',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.buys.size'),
|
||||
name: 'size',
|
||||
field: 'size',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
label: t('entry.buys.producer'),
|
||||
name: 'producerName',
|
||||
field: 'producer',
|
||||
align: 'left',
|
||||
format: (val) => dashIfEmpty(val),
|
||||
},
|
||||
|
||||
{
|
||||
label: t('entry.buys.color'),
|
||||
name: 'ink',
|
||||
field: 'inkName',
|
||||
align: 'left',
|
||||
},
|
||||
]);
|
||||
|
||||
const fetchResults = async () => {
|
||||
try {
|
||||
let filter = itemFilter;
|
||||
const params = itemFilterParams;
|
||||
const where = {};
|
||||
for (let key in params) {
|
||||
const value = params[key];
|
||||
if (!value) continue;
|
||||
|
||||
switch (key) {
|
||||
case 'name':
|
||||
where[key] = { like: `%${value}%` };
|
||||
break;
|
||||
case 'producerFk':
|
||||
case 'typeFk':
|
||||
case 'size':
|
||||
case 'inkFk':
|
||||
where[key] = value;
|
||||
}
|
||||
}
|
||||
filter.where = where;
|
||||
|
||||
const { data } = await axios.get(`Entries/${route.params.id}/lastItemBuys`, {
|
||||
params: { filter: JSON.stringify(filter) },
|
||||
});
|
||||
tableRows.value = data;
|
||||
} catch (err) {
|
||||
console.error('Error fetching entries items');
|
||||
}
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
|
||||
const selectItem = ({ id }) => {
|
||||
emit('itemSelected', id);
|
||||
closeForm();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="Producers"
|
||||
@on-fetch="(data) => (producersOptions = data)"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="ItemTypes"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
order="name"
|
||||
@on-fetch="(data) => (ItemTypesOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Inks"
|
||||
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||||
order="name"
|
||||
@on-fetch="(data) => (InksOptions = data)"
|
||||
auto-load
|
||||
/>
|
||||
<QForm @submit="fetchResults()" class="all-pointer-events">
|
||||
<QCard class="column" style="padding: 32px; z-index: 100">
|
||||
<span ref="closeButton" class="close-icon" v-close-popup>
|
||||
<QIcon name="close" size="sm" />
|
||||
</span>
|
||||
<h1 class="title">{{ t('Filter item') }}</h1>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('entry.buys.name')"
|
||||
v-model="itemFilterParams.name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('entry.buys.size')"
|
||||
v-model="itemFilterParams.size"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('entry.buys.producer')"
|
||||
:options="producersOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="itemFilterParams.producerFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('entry.buys.type')"
|
||||
:options="ItemTypesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="itemFilterParams.typeFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('entry.buys.color')"
|
||||
:options="InksOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
v-model="itemFilterParams.inkFk"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
:label="t('globals.search')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
/>
|
||||
</div>
|
||||
<QTable
|
||||
:columns="tableColumns"
|
||||
:rows="tableRows"
|
||||
:pagination="{ rowsPerPage: 0 }"
|
||||
:loading="loading"
|
||||
:hide-header="!tableRows || !tableRows.length > 0"
|
||||
:no-data-label="t('Enter a new search')"
|
||||
class="q-mt-lg"
|
||||
@row-click="(_, row) => selectItem(row)"
|
||||
>
|
||||
<template #body-cell-id="{ row }">
|
||||
<QTd auto-width @click.stop>
|
||||
<QBtn flat color="blue">{{ row.id }}</QBtn>
|
||||
<ItemDescriptorProxy :id="row.id" />
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</QCard>
|
||||
</QForm>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Filter item: Filtrar artículo
|
||||
Enter a new search: Introduce una nueva búsqueda
|
||||
</i18n>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -343,6 +343,11 @@ export default {
|
|||
buyingValue: 'Buying value',
|
||||
packagingFk: 'Box',
|
||||
file: 'File',
|
||||
name: 'Name',
|
||||
producer: 'Producer',
|
||||
type: 'Type',
|
||||
color: 'Color',
|
||||
id: 'ID',
|
||||
},
|
||||
notes: {
|
||||
observationType: 'Observation type',
|
||||
|
|
|
|||
|
|
@ -342,6 +342,11 @@ export default {
|
|||
buyingValue: 'Coste',
|
||||
packagingFk: 'Embalaje',
|
||||
file: 'Fichero',
|
||||
name: 'Nombre',
|
||||
producer: 'Productor',
|
||||
type: 'Tipo',
|
||||
color: 'Color',
|
||||
id: 'ID',
|
||||
},
|
||||
notes: {
|
||||
observationType: 'Tipo de observación',
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ 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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
|
||||
import FilterItemForm from 'src/components/FilterItemForm.vue';
|
||||
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import axios from 'axios';
|
||||
|
|
@ -238,13 +240,19 @@ const redirectToBuysView = () => {
|
|||
>
|
||||
<template #body-cell-item="{ row, col }">
|
||||
<QTd auto-width>
|
||||
<VnSelectFilter
|
||||
<VnSelectDialog
|
||||
v-model="row[col.field]"
|
||||
:options="col.options"
|
||||
:option-value="col.optionValue"
|
||||
:option-label="col.optionLabel"
|
||||
hide-selected
|
||||
action-icon="filter_alt"
|
||||
>
|
||||
<template #form>
|
||||
<FilterItemForm
|
||||
@item-selected="row[col.field] = $event"
|
||||
/>
|
||||
</template>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
|
|
@ -255,7 +263,7 @@ const redirectToBuysView = () => {
|
|||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</VnSelectDialog>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-packagingFk="{ row, col }">
|
||||
|
|
|
|||
|
|
@ -115,15 +115,15 @@ const showEntryReport = () => {
|
|||
<template #body="{ entity }">
|
||||
<VnLv
|
||||
:label="t('entry.descriptor.agency')"
|
||||
:value="entity.travel.agency.name"
|
||||
:value="entity.travel?.agency?.name"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('entry.descriptor.landed')"
|
||||
:value="toDate(entity.travel.landed)"
|
||||
:value="toDate(entity.travel?.landed)"
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('entry.descriptor.warehouseOut')"
|
||||
:value="entity.travel.warehouseOut.name"
|
||||
:value="entity.travel?.warehouseOut?.name"
|
||||
/>
|
||||
</template>
|
||||
<template #icons="{ entity }">
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ onMounted(async () => {
|
|||
<VnPaginate
|
||||
data-key="EntryList"
|
||||
url="Entries/filter"
|
||||
order="landed DESC, id DESC"
|
||||
:order="['landed DESC', 'id DESC']"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
|
|
|
|||
Loading…
Reference in New Issue