verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 63 Releases Wiki Activity

refs #5056 new sections, missing tests

This commit is contained in:
Alexandre Riera 2023-03-21 10:46:43 +01:00
parent b95ee3c247
commit e9acc6b687
1 changed files with 129 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/pages/Wagon/WagonList.vue Normal file
View File

@ -0,0 +1,129 @@
<script setup>
import axios from 'axios';
import Paginate from 'src/components/PaginateData.vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
const router = useRouter();
const { t } = useI18n();
const filter = {
include: {
relation: 'type',
scope: {
fields: 'name',
},
},
};
function navigate(id) {
router.push({ path: `/wagon/${id}/edit` });
}
function create() {
router.push({ path: `/wagon/create` });
}
async function remove(id) {
try {
await axios.delete(`Wagons/${id}`).then(async () => {
// TODO: RELOAD PAGE
// router.push({ path: `/wagon/list` });
});
} catch (error) {
//
}
}
</script>
<template>
<q-page class="column items-center q-pa-md">
<div class="card-list">
<paginate
data-key="WagonList"
url="/Wagons"
order="id DESC"
:filter="filter"
auto-load
>
<template #body="{ rows }">
<q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
<q-item
class="q-pa-none items-start cursor-pointer q-hoverable"
v-ripple
clickable
>
<q-item-section class="q-pa-md" @click="navigate(row.id)">
<div class="text-h6">{{ row.label }}</div>
<q-item-label caption>#{{ row.id }}</q-item-label>
<q-list>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>
{{ t('wagon.list.plate') }}
</q-item-label>
<q-item-label>{{ row.plate }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>
{{ t('wagon.list.volume') }}
</q-item-label>
<q-item-label>{{ row.volume }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>
{{ t('wagon.list.type') }}
</q-item-label>
<q-item-label>{{
row.type.name
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-item-section>
<q-separator vertical />
<q-card-actions vertical class="justify-between">
<q-btn
flat
round
color="primary"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<q-tooltip>
{{ t('components.smartCard.openCard') }}
</q-tooltip>
</q-btn>
<q-btn
flat
round
color="primary"
icon="delete"
@click="remove(row.id)"
>
<q-tooltip>
{{ t('wagon.list.remove') }}
</q-tooltip>
</q-btn>
</q-card-actions>
</q-item>
</q-card>
</template>
</paginate>
</div>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn @click="create" fab icon="add" color="primary" />
</q-page-sticky>
</q-page>
</template>
<style lang="scss" scoped>
.card-list {
width: 100%;
max-width: 60em;
}
</style>