From e9acc6b687d4b55e935b8ec6f180984d41af4edf Mon Sep 17 00:00:00 2001
From: alexandre <alexandre@verdnatura.es>
Date: Tue, 21 Mar 2023 10:46:43 +0100
Subject: [PATCH] refs #5056 new sections, missing tests

---
 src/pages/Wagon/WagonList.vue | 129 ++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 src/pages/Wagon/WagonList.vue

diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
new file mode 100644
index 000000000..1f8634280
--- /dev/null
+++ b/src/pages/Wagon/WagonList.vue
@@ -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>