95 lines
3.2 KiB
Vue
95 lines
3.2 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 VnSearchbar from 'src/components/ui/VnSearchbar.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 RightMenu from 'src/components/common/RightMenu.vue';
|
|
|
|
const stateStore = useStateStore();
|
|
const { push } = useRouter();
|
|
const { t } = useI18n();
|
|
const { viewSummary } = useSummaryDialog();
|
|
|
|
onMounted(() => (stateStore.rightDrawer = true));
|
|
onUnmounted(() => (stateStore.rightDrawer = false));
|
|
|
|
const filter = {
|
|
fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
|
|
};
|
|
|
|
function exprBuilder(param, value) {
|
|
switch (param) {
|
|
case 'code':
|
|
return { [param]: { like: `%${value}%` } };
|
|
case 'sectorFk':
|
|
return { [param]: value };
|
|
case 'search':
|
|
return { or: [{ code: { like: `%${value}%` } }, { id: value }] };
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<template>
|
|
<VnSearchbar
|
|
data-key="ParkingList"
|
|
:label="t('Search parking')"
|
|
:info="t('You can search by parking code')"
|
|
/>
|
|
</template>
|
|
<RightMenu>
|
|
<template #right-panel>
|
|
<ParkingFilter data-key="ParkingList" />
|
|
</template>
|
|
</RightMenu>
|
|
<QPage class="column items-center q-pa-md">
|
|
<div class="vn-card-list">
|
|
<VnPaginate
|
|
data-key="ParkingList"
|
|
url="Parkings"
|
|
:user-filter="filter"
|
|
:expr-builder="exprBuilder"
|
|
:limit="20"
|
|
order="code"
|
|
>
|
|
<template #body="{ rows }">
|
|
<CardList
|
|
v-for="row of rows"
|
|
:key="row.id"
|
|
:id="row.id"
|
|
:title="row.code"
|
|
@click="push({ path: `/parking/${row.id}` })"
|
|
>
|
|
<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>
|
|
<i18n>
|
|
es:
|
|
Search parking: Buscar parking
|
|
You can search by parking code: Puede buscar por el código del parking
|
|
</i18n>
|