Merge pull request 'feature/ItemsList' (!280) from hyervoni/salix-front-mindshore:feature/ItemsList into dev
gitea/salix-front/pipeline/head This commit looks good Details

Reviewed-on: #280
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Alex Moreno 2024-04-11 05:56:27 +00:00
commit 9be132b8a0
8 changed files with 635 additions and 4 deletions

View File

@ -61,7 +61,6 @@ const props = defineProps({
});
const emit = defineEmits(['onFetch', 'onPaginate']);
defineExpose({ fetch });
const isLoading = ref(false);
const pagination = ref({
sortBy: props.order,
@ -91,6 +90,10 @@ watch(
}
);
const addFilter = async (filter, params) => {
await arrayData.addFilter({ filter, params });
};
async function fetch() {
await arrayData.fetch({ append: false });
if (!arrayData.hasMoreData.value) {
@ -142,6 +145,8 @@ async function onLoad(index, done) {
if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
done(isDone);
}
defineExpose({ fetch, addFilter });
</script>
<template>

View File

@ -144,6 +144,8 @@ export function useArrayData(key, userOptions) {
store.userParams = userParams;
store.skip = 0;
store.filter.skip = 0;
page.value = 1;
await fetch({ append: false });
return { filter, params };
}

View File

@ -1218,6 +1218,7 @@ export default {
list: 'List',
diary: 'Diary',
tags: 'Tags',
create: 'Create',
},
descriptor: {
item: 'Item',
@ -1230,6 +1231,24 @@ export default {
warehouseText: 'Calculated on the warehouse of { warehouseName }',
itemDiary: 'Item diary',
},
list: {
id: 'Identifier',
grouping: 'Grouping',
packing: 'Packing',
description: 'Description',
stems: 'Stems',
category: 'Category',
typeName: 'Type',
intrastat: 'Intrastat',
isActive: 'Active',
size: 'Size',
origin: 'Origin',
userName: 'Buyer',
weightByPiece: 'Weight/Piece',
stemMultiplier: 'Multiplier',
producer: 'Producer',
landed: 'Landed',
},
},
components: {
topbar: {},

View File

@ -1217,6 +1217,7 @@ export default {
list: 'Listado',
diary: 'Histórico',
tags: 'Etiquetas',
create: 'Crear',
},
descriptor: {
item: 'Artículo',
@ -1229,6 +1230,24 @@ export default {
warehouseText: 'Calculado sobre el almacén de { warehouseName }',
itemDiary: 'Registro de compra-venta',
},
list: {
id: 'Identificador',
grouping: 'Grouping',
packing: 'Packing',
description: 'Descripción',
stems: 'Tallos',
category: 'Reino',
typeName: 'Tipo',
intrastat: 'Intrastat',
isActive: 'Activo',
size: 'Medida',
origin: 'Origen',
weightByPiece: 'Peso (gramos)/tallo',
userName: 'Comprador',
stemMultiplier: 'Multiplicador',
producer: 'Productor',
landed: 'F. entrega',
},
},
components: {
topbar: {},

View File

@ -0,0 +1 @@
<template>Item create view</template>

View File

@ -1 +1,577 @@
<template>Item list</template>
<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 VnSelectFilter from 'src/components/common/VnSelectFilter.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 { 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({});
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: VnSelectFilter,
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: VnSelectFilter,
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: VnSelectFilter,
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: VnSelectFilter,
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: VnSelectFilter,
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>
<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"
: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('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?
Clone: Clonar
Preview: Vista previa
</i18n>

View File

@ -10,7 +10,7 @@ export default {
component: RouterView,
redirect: { name: 'ItemMain' },
menus: {
main: [],
main: ['ItemList'],
card: [],
},
children: [
@ -18,7 +18,7 @@ export default {
path: '',
name: 'ItemMain',
component: () => import('src/pages/Item/ItemMain.vue'),
redirect: { name: 'Itemlist' },
redirect: { name: 'ItemList' },
children: [
{
path: 'list',
@ -29,6 +29,14 @@ export default {
},
component: () => import('src/pages/Item/ItemList.vue'),
},
{
path: 'create',
name: 'ItemCreate',
meta: {
title: 'create',
},
component: () => import('src/pages/Item/ItemCreate.vue'),
},
],
},
{

View File

@ -7,6 +7,7 @@ import routes from 'src/router/modules';
export const useNavigationStore = defineStore('navigationStore', () => {
const modules = [
'item',
'shelving',
'order',
'customer',