From 36028afa37ff530e4547b301fc32b102f68f6666 Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kamgmc@gmail.com>
Date: Tue, 28 Nov 2023 23:06:30 -0300
Subject: [PATCH] Update Wagon List styles

---
 src/pages/Wagon/Type/WagonTypeCreate.vue |   4 +-
 src/pages/Wagon/Type/WagonTypeList.vue   |  60 +++++--------
 src/pages/Wagon/WagonList.vue            | 102 +++++++++--------------
 3 files changed, 64 insertions(+), 102 deletions(-)

diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index adfd41049..f4ece640a 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -248,7 +248,7 @@ function exceedMaxHeight(pos) {
                     :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
                 />
                 <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
-                <div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id">
+                <div class="wagon-tray q-mx-lg" v-for="tray in wagon" :key="tray.id">
                     <div class="position">
                         <QInput
                             autofocus
@@ -374,7 +374,7 @@ function exceedMaxHeight(pos) {
     display: flex;
     height: 6rem;
     .position {
-        width: 15%;
+        width: 20%;
         border-right: 1rem solid gray;
         display: flex;
         align-items: flex-end;
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index f364da008..8af441856 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -5,6 +5,7 @@ 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 CardList2 from "components/ui/CardList2.vue";
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
@@ -48,43 +49,28 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.name }}</div>
-                                <QItem-label caption>#{{ row.id }}</QItem-label>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList2
+                        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)"
+                                color="primary"
+                                type="submit"
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                flat
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList2>
                 </template>
             </VnPaginate>
         </div>
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index 5e512aa92..bc94d4c5f 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -5,6 +5,8 @@ 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 CardList2 from 'components/ui/CardList2.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonList');
@@ -55,69 +57,43 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <QItem
-                            class="q-pa-none items-start cursor-pointer q-hoverable"
-                            v-ripple
-                            clickable
-                        >
-                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
-                                <div class="text-h6">{{ row.label }}</div>
-                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
-                                <QList>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.plate') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.plate }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.volume') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.volume }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                    <QItem class="q-pa-none">
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ t('wagon.list.type') }}
-                                            </QItemLabel>
-                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QItemSection>
-                            <QSeparator vertical />
-                            <QCardActions vertical class="justify-between">
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(row.id)"
-                                >
-                                    <QTooltip>
-                                        {{ t('components.smartCard.openCard') }}
-                                    </QTooltip>
-                                </QBtn>
-                                <QBtn
-                                    flat
-                                    round
-                                    color="primary"
-                                    icon="delete"
-                                    @click="remove(row)"
-                                >
-                                    <QTooltip>
-                                        {{ t('wagon.list.remove') }}
-                                    </QTooltip>
-                                </QBtn>
-                            </QCardActions>
-                        </QItem>
-                    </QCard>
+                    <CardList2
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="(row.label || '').toString()"
+                        :id="row.id"
+                        @click="navigate(row.id)">
+                        <template #list-items>
+                            <VnLv
+                                :label="t('wagon.list.plate')"
+                                :title-label="t('wagon.list.plate')"
+                                :value="row.plate"
+                            />
+                            <VnLv
+                                :label="t('wagon.list.volume')"
+                                :value="row?.volume"
+                            />
+                            <VnLv
+                                :label="t('wagon.list.type')"
+                                :value="row?.type?.name"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openCard')"
+                                @click.stop="navigate(row.id)"
+                                color="primary"
+                                type="submit"
+                            />
+                            <QBtn
+                                :label="t('wagon.list.remove')"
+                                @click.stop="remove(row)"
+                                color="primary"
+                                flat
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList2>
                 </template>
             </VnPaginate>
         </div>