salix-front/src/pages/Zone/Delivery/ZoneDeliveryList.vue

81 lines
2.6 KiB
Vue

<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import CardList from 'components/ui/CardList.vue';
const quasar = useQuasar();
const arrayData = useArrayData('ZoneDeliveryList');
const store = arrayData.store;
const router = useRouter();
const { t } = useI18n();
function navigate(id) {
router.push({ path: `/zone/type/${id}/edit` });
}
function create() {
router.push({ path: `/zone/type/create` });
}
async function remove(row) {
try {
const id = row.id;
await axios
.delete(`ZoneDeliverys/deleteZoneDelivery`, { params: { id } })
.then(async () => {
quasar.notify({
message: t('zone.delivery.removeItem'),
type: 'positive',
});
store.data.splice(store.data.indexOf(row), 1);
});
} catch (error) {
//
}
}
</script>
<template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="ZoneDeliveryList"
url="/Zones/getEvents"
order="id DESC"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:title="(row.name || '').toString()"
:id="row.id"
@click="navigate(row.id)"
>
<template #actions>
<QBtn
:label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id)"
outline
/>
<QBtn
:label="t('list.remove')"
@click.stop="remove(row)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn @click="create" fab icon="add" shortcut="+" color="primary" />
</QPageSticky>
</QPage>
</template>