From 424ff568cd3aa8f3ae56e079a2d840a2f331339d Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 3 Aug 2022 14:58:58 +0200
Subject: [PATCH] feat(ticketBoxing): fix front

---
 src/i18n/en/index.js                   |  6 +-
 src/i18n/es/index.js                   |  6 ++
 src/pages/Ticket/Card/TicketBoxing.vue | 97 +++++++++++++++++++-------
 3 files changed, 81 insertions(+), 28 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index b12eb9530..16c7ab7e0 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -56,8 +56,10 @@ export default {
             basicData: 'Basic Data'
         },
         boxing: {
-            expedition: 'Expedición',
-            item: 'Artículo'
+            expedition: 'Expedition',
+            item: 'Item',
+            created: 'Created',
+            worker: 'Worker'
         }
     },
     components: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 82f136062..67e3801b8 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -54,6 +54,12 @@ export default {
             list: 'Listado',
             createTicket: 'Crear ticket',
             basicData: 'Datos básicos'
+        },
+        boxing: {
+            expedition: 'Expedición',
+            item: 'Artículo',
+            created: 'Creado',
+            worker: 'Trabajador'
         }
     },
     components: {
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 2232df6d6..716310336 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { computed, ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
+import { date } from 'quasar';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -17,48 +18,92 @@ const entityId = computed(function () {
 
 const expeditions = ref({});
 const url = ref({});
+//const video = ref({});
 
 async function fetch() {
     const filter = {
         where: {
-            ticketFk: entityId.value
-        }
-    }
+            ticketFk: entityId.value,
+        },
+    };
     const { data } = await axios.get(`/api/Expeditions/filter`, {
-        params: { filter }
+        params: { filter },
     });
 
     if (data) expeditions.value = data;
-    console.log(expeditions.value)
+    console.log(expeditions.value);
 }
 
 async function selectVideo(expeditionId) {
-    url.value = `http://localhost:8080/api/Boxings/getVideo?id=${expeditionId}`
+    url.value = `${window.location.origin}/api/Boxings/getVideo?id=${expeditionId}`;
 }
 
+/*async function getVideo(expeditionId) {
+    const { data } = await axios.get(`/api/Boxings/getVideo?id=${expeditionId}`);
+    const myUrl = window.URL.createObjectURL(new Blob([data]));
+    console.log(myUrl);
+    if (data) url.value = data;
+}*/
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <q-list>
-            <div v-for="expedition in expeditions" :key="expedition.id" @click="selectVideo(expedition.id)">
-                <q-item class="q-pa-none">
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.boxing.expedition') }}</q-item-label>
-                        <q-item-label>{{ expedition.id }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-pa-none">
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
-                        <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </div>
-        </q-list>
-        {{ url }}
-        <q-card class="q-pa-md" v-if="Object.keys(url).length !== 0">
-            <q-video :src="url" />
+    <q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders q-gutter-md">
+        <q-drawer
+            v-model="drawerLeft"
+            show-if-above
+            :width="200"
+            :breakpoint="700"
+            elevated
+            class="bg-primary text-white"
+        >
+            <q-scroll-area class="fit">
+                <q-card class="q-pa-md col">
+                    <q-video :title="url" :src="url" v-if="Object.keys(url).length !== 0" :ratio="16 / 9" />
+                </q-card>
+            </q-scroll-area>
+        </q-drawer>
+    </q-layout>
+</template>
+<!--
+<template>
+    <q-page class="q-pa-md row q-gutter-md">
+        <q-card class="q-pa-md col-2">
+            <q-scroll-area class="fit">
+                <q-list class="q-pa-xs q-gutter-md">
+                    <q-card
+                        v-for="expedition in expeditions"
+                        :key="expedition.id"
+                        @click="selectVideo(expedition.id)"
+                        clickable
+                        v-ripple
+                    >
+                        <q-card-section>
+                            <q-item class="q-pa-none">
+                                <q-item-section>
+                                    <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                            <q-separator spaced color="orange" />
+                            <q-item class="q-pa-none">
+                                <q-item-section>
+                                    <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
+                                    <q-item-label>
+                                        {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}</q-item-label
+                                    >
+                                    <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
+                                    <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
+                                    <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
+                                    <q-item-label>{{ expedition.userName }}</q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-card-section>
+                    </q-card>
+                </q-list>
+            </q-scroll-area>
+        </q-card>
+        <q-card class="q-pa-md col">
+            <q-video :title="url" :src="url" v-if="Object.keys(url).length !== 0" :ratio="16 / 9" />
         </q-card>
     </q-page>
 </template>
+-->