salix-front/src/pages/Shelving/Parking/ParkingList.vue

81 lines
3.1 KiB
Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnPaginate from 'components/ui/VnPaginate.vue';
import CardList from 'components/ui/CardList.vue';
import VnLv from 'components/ui/VnLv.vue';
import ParkingFilter from './ParkingFilter.vue';
import ParkingSummary from './Card/ParkingSummary.vue';
import exprBuilder from './ParkingExprBuilder.js';
import VnSection from 'src/components/common/VnSection.vue';
const stateStore = useStateStore();
const { push } = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const dataKey = 'ParkingList';
onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));
const filter = {
fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
};
</script>
<template>
<VnSection
:data-key="dataKey"
prefix="parking"
:array-data-props="{
url: 'Parkings',
order: ['code'],
userFilter: filter,
exprBuilder,
}"
>
<template #advanced-menu>
<ParkingFilter data-key="ParkingList" />
</template>
<template #body>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate :data-key="dataKey">
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:id="row.id"
:title="row.code"
@click="
push({ path: `/shelving/parking/${row.id}/summary` })
"
>
<template #list-items>
<VnLv
label="Sector"
:value="row.sector?.description"
/>
<VnLv
:label="t('parking.pickingOrder')"
:value="row.pickingOrder"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, ParkingSummary)"
color="primary"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
</template>
</VnSection>
</template>