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 1/3] 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 adfd410494..f4ece640a8 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 f364da0089..8af441856b 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 5e512aa923..bc94d4c5f1 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>

From 78477ef362a7bc907376e8e3fe7fc728b4c2255a Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kamgmc@gmail.com>
Date: Wed, 29 Nov 2023 23:23:32 -0300
Subject: [PATCH 2/3] Update Wagon list

---
 src/pages/Wagon/Type/WagonTypeList.vue | 13 +++++++++----
 src/pages/Wagon/WagonList.vue          | 13 ++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index 8af441856b..bcc3b7ffac 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -5,7 +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 CardList2 from 'components/ui/CardList2.vue';
+import VnLv from 'components/ui/VnLv.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
@@ -54,19 +55,23 @@ async function remove(row) {
                         :key="row.id"
                         :title="(row.name || '').toString()"
                         :id="row.id"
-                        @click="navigate(row.id)">
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
+                        </template>
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="primary"
+                                color="white"
+                                outline
                                 type="submit"
                             />
                             <QBtn
                                 :label="t('wagon.list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
-                                flat
                                 style="margin-top: 15px"
                             />
                         </template>
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index bc94d4c5f1..e936f075bf 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -62,17 +62,16 @@ async function remove(row) {
                         :key="row.id"
                         :title="(row.label || '').toString()"
                         :id="row.id"
-                        @click="navigate(row.id)">
+                        @click="navigate(row.id)"
+                    >
                         <template #list-items>
+                            <VnLv label="ID" :value="row.id" />
                             <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.volume')" :value="row?.volume" />
                             <VnLv
                                 :label="t('wagon.list.type')"
                                 :value="row?.type?.name"
@@ -82,14 +81,14 @@ async function remove(row) {
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
                                 @click.stop="navigate(row.id)"
-                                color="primary"
+                                color="white"
+                                outline
                                 type="submit"
                             />
                             <QBtn
                                 :label="t('wagon.list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
-                                flat
                                 style="margin-top: 15px"
                             />
                         </template>

From be66b0b549af1e9515badae10baa05ff0430e61c Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kamgmc@gmail.com>
Date: Wed, 29 Nov 2023 23:53:35 -0300
Subject: [PATCH 3/3] Update Wagon forms

---
 src/pages/Wagon/Type/WagonTypeCreate.vue | 41 +++++++++++++++---------
 src/pages/Wagon/WagonCreate.vue          | 35 ++++++++++----------
 2 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index f4ece640a8..50be4169ca 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -239,8 +239,8 @@ function exceedMaxHeight(pos) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
                 <QInput
                     filled
                     v-model="name"
@@ -309,16 +309,6 @@ function exceedMaxHeight(pos) {
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
                 <QDialog
                     v-model="colorPickerActive"
                     position="right"
@@ -346,8 +336,18 @@ function exceedMaxHeight(pos) {
                         </QCardSection>
                     </QCard>
                 </QDialog>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -357,22 +357,27 @@ function exceedMaxHeight(pos) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
+
 .q-dialog {
     .q-card {
         width: 100%;
     }
 }
+
 .wheels {
     margin-left: 5%;
     display: flex;
     justify-content: space-around;
 }
+
 .wagon-tray {
     display: flex;
     height: 6rem;
+
     .position {
         width: 20%;
         border-right: 1rem solid gray;
@@ -381,21 +386,26 @@ function exceedMaxHeight(pos) {
         justify-content: flex-end;
         padding-right: 1rem;
     }
+
     .shelving {
         display: flex;
         width: 75%;
+
         .shelving-half {
             width: 50%;
             height: 100%;
+
             .shelving-up {
                 height: 80%;
                 width: 100%;
             }
+
             .shelving-down {
                 height: 20%;
                 width: 100%;
             }
         }
+
         .shelving-divisible {
             width: 1%;
             height: 100%;
@@ -403,6 +413,7 @@ function exceedMaxHeight(pos) {
             border-right: 0.5rem dashed grey;
         }
     }
+
     .action-button {
         width: 10%;
         border-left: 1rem solid gray;
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index 123e01d366..0bd6f87be4 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -86,9 +86,9 @@ function filterType(val, update) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
-                <div class="row q-col-gutter-md q-mb-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -108,7 +108,7 @@ function filterType(val, update) {
                         />
                     </div>
                 </div>
-                <div class="row q-col-gutter-md q-mb-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -155,18 +155,18 @@ function filterType(val, update) {
                         </QSelect>
                     </div>
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -176,7 +176,8 @@ function filterType(val, update) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
 </style>