0
0
Fork 0

refs #7366 VnTable

This commit is contained in:
Carlos Satorres 2024-06-26 15:09:26 +02:00
parent 98b125281c
commit aaee96d6bb
3 changed files with 147 additions and 118 deletions

View File

@ -1144,6 +1144,16 @@ travel:
basicData: Basic data
history: Log
thermographs: Thermograph
travelList:
tableVisibleColumns:
id: Id
ref: Reference
agency: Agency
shipped: Shipped
landed: Landed
warehouseIn: Warehouse in
warehouseOut: Warehouse out
totalEntries: Total entries
summary:
confirmed: Confirmed
entryId: Entry Id

View File

@ -1132,6 +1132,16 @@ travel:
basicData: Datos básicos
history: Historial
thermographs: Termógrafos
travelList:
tableVisibleColumns:
id: Id
ref: Referencia
agency: Agencia
shipped: Enviado
landed: Llegada
warehouseIn: Almacén de salida
warehouseOut: Almacén de entrada
totalEntries: Total de entradas
summary:
confirmed: Confirmado
entryId: Id entrada

View File

@ -2,19 +2,12 @@
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import TravelSummary from './Card/TravelSummary.vue';
import TravelFilter from './TravelFilter.vue';
import FetchData from 'components/FetchData.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index';
import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
import RightMenu from 'src/components/common/RightMenu.vue';
import { computed } from 'vue';
import TravelSummary from './Card/TravelSummary.vue';
const router = useRouter();
const { t } = useI18n();
@ -47,118 +40,134 @@ const getWarehouseName = (id) => {
onMounted(async () => {
stateStore.rightDrawer = true;
});
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('travel.travelList.tableVisibleColumns.id'),
isId: true,
field: 'id',
cardVisible: true,
},
{
align: 'left',
name: 'ref',
label: t('travel.travelList.tableVisibleColumns.ref'),
field: 'ref',
component: 'input',
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'agencyModeFk',
label: t('travel.travelList.tableVisibleColumns.agency'),
field: 'agencyModeFk',
component: 'select',
attrs: {
url: 'agencyModes',
fields: ['id', 'name'],
},
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'shipped',
label: t('travel.travelList.tableVisibleColumns.shipped'),
field: 'shipped',
component: 'date',
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'landed',
label: t('travel.travelList.tableVisibleColumns.landed'),
field: 'landed',
component: 'date',
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'warehouseInFk',
label: t('travel.travelList.tableVisibleColumns.warehouseIn'),
field: 'warehouseInFk',
component: 'select',
attrs: {
url: 'warehouses',
fields: ['id', 'name'],
},
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'warehouseOutFk',
label: t('travel.travelList.tableVisibleColumns.warehouseOut'),
field: 'warehouseOutFk',
component: 'select',
attrs: {
url: 'warehouses',
fields: ['id', 'name'],
},
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'totalEntries',
label: t('travel.travelList.tableVisibleColumns.totalEntries'),
field: 'totalEntries',
component: 'input',
cardVisible: true,
create: true,
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('Clone'),
icon: 'vn:ticket',
action: cloneTravel,
isPrimary: true,
},
{
title: t('Add entry'),
icon: 'preview',
action: (row) => viewSummary(row.id, TravelSummary),
},
],
},
]);
</script>
<template>
<FetchData
url="Warehouses"
:filter="{ fields: ['id', 'name'] }"
order="name"
@on-fetch="(data) => (warehouses = data)"
<VnTable
ref="tableRef"
data-key="Travels"
:url="`Travels`"
:create="{
urlCreate: 'Travels',
title: t('Create Travels'),
onDataSaved: () => tableRef.reload(),
formInitialData: {
workerFk: entityId,
},
}"
order="landed DESC"
:columns="columns"
default-mode="table"
auto-load
redirect="travel"
:right-search="false"
:is-editable="false"
:use-model="true"
/>
<VnSearchbar data-key="TravelList" :limit="20" :label="t('searchByIdOrReference')" />
<RightMenu>
<template #right-panel>
<TravelFilter data-key="TravelList" />
</template>
</RightMenu>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="TravelList"
url="Travels/filter"
auto-load
order="shipped DESC, landed DESC"
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:title="row.ref"
:id="row.id"
@click="navigateToTravelId(row.id)"
>
<template #list-items>
<VnLv
:label="t('globals.agency')"
:value="row.agencyModeName"
/>
<VnLv
v-if="warehouses.length > 0"
:label="t('globals.wareHouseOut')"
:value="getWarehouseName(row.warehouseOutFk)"
/>
<VnLv :label="t('globals.shipped')">
<template #value>
<QBadge
text-color="black"
v-if="getDateQBadgeColor(row.shipped)"
:color="getDateQBadgeColor(row.shipped)"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ toDate(row.shipped) }}
</QBadge>
<span v-else>{{ toDate(row.shipped) }}</span>
</template>
</VnLv>
<VnLv :label="t('globals.landed')">
<template #value>
<QBadge
text-color="black"
v-if="getDateQBadgeColor(row.landed)"
:color="getDateQBadgeColor(row.landed)"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ toDate(row.landed) }}
</QBadge>
<span v-else>{{ toDate(row.landed) }}</span>
</template>
</VnLv>
<VnLv
v-if="warehouses.length > 0"
:label="t('globals.wareHouseIn')"
:value="getWarehouseName(row.warehouseInFk)"
/>
<VnLv
:label="t('globals.totalEntries')"
:value="row.totalEntries"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.clone')"
@click.stop="cloneTravel(row)"
outline
/>
<QBtn
:label="t('addEntry')"
@click.stop="redirectCreateEntryView(row)"
outline
style="margin-top: 15px"
/>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, TravelSummary)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
<QTooltip>
{{ t('supplier.list.newSupplier') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
<i18n>