584 lines
18 KiB
Vue
584 lines
18 KiB
Vue
<script setup>
|
|
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import FetchData from 'components/FetchData.vue';
|
|
import FetchedTags from 'components/ui/FetchedTags.vue';
|
|
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
|
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
|
import ItemSummary from '../Item/Card/ItemSummary.vue';
|
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
|
import ItemListFilter from './ItemListFilter.vue';
|
|
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { toDateFormat } from 'src/filters/date.js';
|
|
import { useSession } from 'composables/useSession';
|
|
import { dashIfEmpty } from 'src/filters';
|
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
|
import { useVnConfirm } from 'composables/useVnConfirm';
|
|
import axios from 'axios';
|
|
|
|
const router = useRouter();
|
|
const { getTokenMultimedia } = useSession();
|
|
const token = getTokenMultimedia();
|
|
const stateStore = useStateStore();
|
|
const { t } = useI18n();
|
|
const { viewSummary } = useSummaryDialog();
|
|
const { openConfirmationModal } = useVnConfirm();
|
|
|
|
const paginateRef = ref(null);
|
|
const itemTypesOptions = ref([]);
|
|
const originsOptions = ref([]);
|
|
const buyersOptions = ref([]);
|
|
const intrastatOptions = ref([]);
|
|
const itemCategoriesOptions = ref([]);
|
|
const visibleColumns = ref([]);
|
|
const allColumnNames = ref([]);
|
|
|
|
const exprBuilder = (param, value) => {
|
|
switch (param) {
|
|
case 'category':
|
|
return { 'ic.name': value };
|
|
case 'buyerFk':
|
|
return { 'it.workerFk': value };
|
|
case 'grouping':
|
|
return { 'b.grouping': value };
|
|
case 'packing':
|
|
return { 'b.packing': value };
|
|
case 'origin':
|
|
return { 'ori.code': value };
|
|
case 'typeFk':
|
|
return { 'i.typeFk': value };
|
|
case 'intrastat':
|
|
return { 'intr.description': value };
|
|
case 'name':
|
|
return { 'i.name': { like: `%${value}%` } };
|
|
case 'producer':
|
|
return { 'pr.name': { like: `%${value}%` } };
|
|
case 'id':
|
|
case 'size':
|
|
case 'subname':
|
|
case 'isActive':
|
|
case 'weightByPiece':
|
|
case 'stemMultiplier':
|
|
case 'stems':
|
|
return { [`i.${param}`]: value };
|
|
}
|
|
};
|
|
|
|
const params = reactive({ isFloramondo: false, isActive: true });
|
|
|
|
const applyColumnFilter = async (col) => {
|
|
try {
|
|
const paramKey = col.columnFilter?.filterParamKey || col.field;
|
|
params[paramKey] = col.columnFilter.filterValue;
|
|
await paginateRef.value.addFilter(null, params);
|
|
} catch (err) {
|
|
console.error('Error applying column filter', err);
|
|
}
|
|
};
|
|
|
|
const getInputEvents = (col) => {
|
|
return col.columnFilter.type === 'select'
|
|
? { 'update:modelValue': () => applyColumnFilter(col) }
|
|
: {
|
|
'keyup.enter': () => applyColumnFilter(col),
|
|
};
|
|
};
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
label: '',
|
|
name: 'picture',
|
|
align: 'left',
|
|
columnFilter: null,
|
|
},
|
|
{
|
|
label: t('item.list.id'),
|
|
name: 'id',
|
|
field: 'id',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
label: t('item.list.grouping'),
|
|
field: 'grouping',
|
|
name: 'grouping',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
format: (val) => dashIfEmpty(val),
|
|
},
|
|
{
|
|
label: t('item.list.packing'),
|
|
field: 'packing',
|
|
name: 'packing',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
format: (val) => dashIfEmpty(val),
|
|
},
|
|
{
|
|
label: t('globals.description'),
|
|
field: 'name',
|
|
name: 'description',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
label: t('item.list.stems'),
|
|
field: 'stems',
|
|
name: 'stems',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
label: t('item.list.size'),
|
|
field: 'size',
|
|
name: 'size',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
label: t('item.list.typeName'),
|
|
field: 'typeName',
|
|
name: 'typeName',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnSelect,
|
|
filterParamKey: 'typeFk',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: itemTypesOptions.value,
|
|
'option-value': 'id',
|
|
'option-label': 'name',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
|
|
{
|
|
label: t('item.list.category'),
|
|
field: 'category',
|
|
name: 'category',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnSelect,
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: itemCategoriesOptions.value,
|
|
'option-value': 'name',
|
|
'option-label': 'name',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
|
|
{
|
|
label: t('item.list.intrastat'),
|
|
field: 'intrastat',
|
|
name: 'intrastat',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnSelect,
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: intrastatOptions.value,
|
|
'option-value': 'description',
|
|
'option-label': 'description',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
label: t('item.list.origin'),
|
|
field: 'origin',
|
|
name: 'origin',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnSelect,
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: originsOptions.value,
|
|
'option-value': 'code',
|
|
'option-label': 'code',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
label: t('item.list.userName'),
|
|
field: 'userName',
|
|
name: 'userName',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnSelect,
|
|
filterParamKey: 'buyerFk',
|
|
type: 'select',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
options: buyersOptions.value,
|
|
'option-value': 'id',
|
|
'option-label': 'nickname',
|
|
dense: true,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
label: t('item.list.weightByPiece'),
|
|
field: 'weightByPiece',
|
|
name: 'weightByPiece',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
format: (val) => dashIfEmpty(val),
|
|
},
|
|
{
|
|
label: t('item.list.stemMultiplier'),
|
|
field: 'stemMultiplier',
|
|
name: 'stemMultiplier',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
format: (val) => dashIfEmpty(val),
|
|
},
|
|
{
|
|
label: t('item.list.isActive'),
|
|
field: 'isActive',
|
|
name: 'isActive',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: null,
|
|
},
|
|
{
|
|
label: t('item.list.producer'),
|
|
field: 'producer',
|
|
name: 'producer',
|
|
align: 'left',
|
|
sortable: true,
|
|
columnFilter: {
|
|
component: VnInput,
|
|
type: 'text',
|
|
filterValue: null,
|
|
event: getInputEvents,
|
|
attrs: {
|
|
dense: true,
|
|
},
|
|
},
|
|
format: (val) => dashIfEmpty(val),
|
|
},
|
|
{
|
|
label: t('item.list.landed'),
|
|
field: 'landed',
|
|
name: 'landed',
|
|
align: 'left',
|
|
sortable: true,
|
|
format: (val) => dashIfEmpty(toDateFormat(val)),
|
|
columnFilter: null,
|
|
},
|
|
{
|
|
label: '',
|
|
name: 'actions',
|
|
align: 'left',
|
|
columnFilter: null,
|
|
},
|
|
]);
|
|
|
|
const redirectToItemCreate = () => {
|
|
router.push({ name: 'ItemCreate' });
|
|
};
|
|
|
|
const redirectToItemSummary = (id) => {
|
|
router.push({ name: 'ItemSummary', params: { id } });
|
|
};
|
|
|
|
const cloneItem = async (itemFk) => {
|
|
try {
|
|
const { data } = await axios.post(`Items/${itemFk}/clone`);
|
|
if (!data) return;
|
|
router.push({ name: 'ItemTags', params: { id: data.id } });
|
|
} catch (err) {
|
|
console.error('Error cloning item', err);
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
stateStore.rightDrawer = true;
|
|
const filteredColumns = columns.value.filter(
|
|
(col) => col.name !== 'picture' && col.name !== 'actions'
|
|
);
|
|
allColumnNames.value = filteredColumns.map((col) => col.name);
|
|
});
|
|
|
|
onUnmounted(() => (stateStore.rightDrawer = false));
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
url="ItemTypes"
|
|
:filter="{ fields: ['id', 'name'], order: 'name ASC' }"
|
|
auto-load
|
|
@on-fetch="(data) => (itemTypesOptions = data)"
|
|
/>
|
|
<FetchData
|
|
url="ItemCategories"
|
|
:filter="{ fields: ['name'], order: 'name ASC' }"
|
|
auto-load
|
|
@on-fetch="(data) => (itemCategoriesOptions = data)"
|
|
/>
|
|
<FetchData
|
|
url="Intrastats"
|
|
:filter="{ fields: ['description'], order: 'description ASC' }"
|
|
auto-load
|
|
@on-fetch="(data) => (intrastatOptions = data)"
|
|
/>
|
|
<FetchData
|
|
url="Origins"
|
|
:filter="{ fields: ['code'], order: 'code ASC' }"
|
|
auto-load
|
|
@on-fetch="(data) => (originsOptions = data)"
|
|
/>
|
|
<FetchData
|
|
url="TicketRequests/getItemTypeWorker"
|
|
:filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
|
|
auto-load
|
|
@on-fetch="(data) => (buyersOptions = data)"
|
|
/>
|
|
|
|
<QToolbar class="bg-vn-dark justify-end">
|
|
<div id="st-data">
|
|
<TableVisibleColumns
|
|
:all-columns="allColumnNames"
|
|
table-code="itemsIndex"
|
|
labels-traductions-path="item.list"
|
|
@on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
|
|
/>
|
|
</div>
|
|
<QSpace />
|
|
<div id="st-actions"></div>
|
|
</QToolbar>
|
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
|
<QScrollArea class="fit text-grey-8">
|
|
<ItemListFilter data-key="ItemList" />
|
|
</QScrollArea>
|
|
</QDrawer>
|
|
<QPage class="column items-center q-pa-md">
|
|
<VnPaginate
|
|
ref="paginateRef"
|
|
data-key="ItemList"
|
|
url="Items/filter"
|
|
:order="['isActive DESC', 'name', 'id']"
|
|
:limit="12"
|
|
:expr-builder="exprBuilder"
|
|
:user-params="params"
|
|
:keep-opts="['userParams']"
|
|
:offset="50"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows }">
|
|
<QTable
|
|
:rows="rows"
|
|
:columns="columns"
|
|
row-key="id"
|
|
:pagination="{ rowsPerPage: 0 }"
|
|
class="full-width q-mt-md"
|
|
:visible-columns="visibleColumns"
|
|
:no-data-label="t('globals.noResults')"
|
|
@row-click="(_, row) => redirectToItemSummary(row.id)"
|
|
>
|
|
<template #top-row="{ cols }">
|
|
<QTr>
|
|
<QTd
|
|
v-for="(col, index) in cols"
|
|
:key="index"
|
|
style="max-width: 100px"
|
|
>
|
|
<component
|
|
:is="col.columnFilter.component"
|
|
v-if="col.columnFilter"
|
|
v-model="col.columnFilter.filterValue"
|
|
v-bind="col.columnFilter.attrs"
|
|
v-on="col.columnFilter.event(col)"
|
|
dense
|
|
/>
|
|
</QTd>
|
|
</QTr>
|
|
</template>
|
|
<template #body-cell-picture="{ row }">
|
|
<QTd>
|
|
<QImg
|
|
:src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
|
|
spinner-color="primary"
|
|
:ratio="1"
|
|
height="50px"
|
|
width="50px"
|
|
class="image"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-id="{ row }">
|
|
<QTd @click.stop>
|
|
<QBtn flat color="primary">
|
|
{{ row.id }}
|
|
</QBtn>
|
|
<ItemDescriptorProxy :id="row.id" />
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-userName="{ row }">
|
|
<QTd @click.stop>
|
|
<QBtn flat color="primary" dense>
|
|
{{ row.userName }}
|
|
</QBtn>
|
|
<WorkerDescriptorProxy :id="row.buyerFk" />
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-description="{ row }">
|
|
<QTd class="col">
|
|
<span>{{ row.name }} {{ row.subName }}</span>
|
|
<fetched-tags :item="row" :max-length="6" />
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-isActive="{ row }">
|
|
<QTd>
|
|
<QCheckbox :model-value="!!row.isActive" disable />
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-actions="{ row }">
|
|
<QTd>
|
|
<QIcon
|
|
@click.stop="
|
|
openConfirmationModal(
|
|
t(`All it's properties will be copied`),
|
|
t('Do you want to clone this item?'),
|
|
() => cloneItem(row.id)
|
|
)
|
|
"
|
|
class="q-ml-sm"
|
|
color="primary"
|
|
name="vn:clone"
|
|
size="sm"
|
|
>
|
|
<QTooltip>
|
|
{{ t('globals.clone') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
@click.stop="viewSummary(row.id, ItemSummary)"
|
|
class="q-ml-md"
|
|
color="primary"
|
|
name="preview"
|
|
size="sm"
|
|
>
|
|
<QTooltip class="text-no-wrap">
|
|
{{ t('Preview') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</VnPaginate>
|
|
|
|
<QPageSticky :offset="[20, 20]">
|
|
<QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
|
|
<QTooltip class="text-no-wrap">
|
|
{{ t('New item') }}
|
|
</QTooltip>
|
|
</QPageSticky>
|
|
</QPage>
|
|
</template>
|
|
|
|
<i18n>
|
|
es:
|
|
New item: Nuevo artículo
|
|
All it's properties will be copied: Todas sus propiedades serán copiadas
|
|
Do you want to clone this item?: ¿Desea clonar este artículo?
|
|
Preview: Vista previa
|
|
</i18n>
|