refs #6545 refactor

src/pages/Wagon/WagonCounter.vue

@@ -2,19 +2,22 @@
 import { ref, onMounted } from 'vue';
 import { useSession } from 'src/composables/useSession';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 
+const quasar = useQuasar();
 const { t } = useI18n();
 const session = useSession();
 const token = session.getToken();
 
 const counters = ref({
-    alquilerBandeja: { count: 0, id: 27098, title: 'Alquiler de CC Bandeja' },
-    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota' },
-    carryOficial: { count: 0, id: 27097, title: ' Alquiler de CC Carry OFICIAL' },
-    candadoRojo: { count: 0, id: 142252, title: 'CC Candado rojo' },
-    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
-    sinChapa: { count: 0, id: 142258, title: 'CC Sin Chapa' },
-    carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
+    alquilerBandeja: { count: 0, id: 1, title: 'Alquiler de CC Bandeja' },
+    bandejaRota: { count: 0, id: 2, title: 'CC Bandeja Rota' },
+    carryOficial: { count: 0, id: 3, title: ' Alquiler de CC Carry OFICIAL' },
+    candadoRojo: { count: 0, id: 4, title: 'CC Candado rojo' },
+    sacadores: { count: 0, id: 5, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 6, title: 'CC Sin Chapa' },
+    carroRoto: { count: 0, id: 7, title: 'Carro Roto' },
 });
 
 const actions = {
@@ -35,24 +38,45 @@ function getUrl(id) {
     return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
 }
 
-function handleEvent(type, action) {
+async function handleEvent(type, action) {
     const counter = counters.value[type].count;
+    let isOk = true;
+
+    if (action == 'flush') isOk = await confirm();
+
+    if (isOk) {
         counters.value[type].count = actions[action](counter);
         localStorage.setItem(type, counters.value[type].count);
     }
+}
+
+function confirm() {
+    return new Promise((resolve) => {
+        quasar
+            .dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: t('Are you sure?'),
+                    message: t('Se pondrá el contador a cero'),
+                },
+            })
+            .onOk(() => resolve(true))
+            .onCancel(() => resolve(false));
+    });
+}
 </script>
 <template>
-    <QList class="q-mx-auto q-mt-xl">
-        <QItem v-for="(props, name) in counters" :key="name">
+    <QList class="row q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name" class="col-6">
             <QItemSection>
-                <p class="text-h5">{{ props.title }}</p>
                 <QImg
                     :src="getUrl(props.id)"
-                    width="150px"
+                    width="130px"
                     @click="handleEvent(name, 'add')"
                 />
+                <p class="title">{{ props.title }}</p>
             </QItemSection>
-            <QItemSection>
+            <QItemSection class="q-ma-none">
                 <QItemLabel class="text-h4">
                     {{ props.count }}
                 </QItemLabel>
@@ -61,6 +85,7 @@ function handleEvent(type, action) {
                         class="text-center q-mr-xs"
                         color="warning"
                         dense
+                        size="sm"
                         @click="handleEvent(name, 'substract')"
                     >
                         {{ t('Substract 1') }}
@@ -69,12 +94,14 @@ function handleEvent(type, action) {
                         class="text-center q-ml-xs"
                         color="red"
                         dense
+                        size="sm"
                         @click="handleEvent(name, 'flush')"
                     >
                         {{ t('Flush') }}
                     </QBtn>
                 </QItemLabel>
             </QItemSection>
+            <QSeparator class="q-mt-sm q-mx-none" color="primary" />
         </QItem>
     </QList>
 </template>
@@ -82,9 +109,20 @@ function handleEvent(type, action) {
 .q-list {
     max-width: 50em;
 }
+@media (max-width: $breakpoint-sm) {
+    .q-item {
+        display: flex;
+        flex-direction: column;
+    }
+    .title {
+        min-height: 3em;
+    }
+}
 </style>
 <i18n>
 es:
     Substract 1: Quitar 1
     Flush: Vaciar
+    Are you sure?: ¿Estás seguro?
+    It will set to 0: Se pondrá a 0
 </i18n>