From 0fb77eadc0527696143f0a3f4b5eb963aa719ea2 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 2 Aug 2022 15:11:40 +0200
Subject: [PATCH] feat(ticketBoxing): getVideo

---
 src/i18n/en/index.js                   |  4 ++
 src/pages/Ticket/Card/TicketBoxing.vue | 69 ++++++++++++++++++++------
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 7a27c8ca5..b12eb9530 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -54,6 +54,10 @@ export default {
             list: 'List',
             createTicket: 'Create ticket',
             basicData: 'Basic Data'
+        },
+        boxing: {
+            expedition: 'Expedición',
+            item: 'Artículo'
         }
     },
     components: {
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 140eafa9d..2232df6d6 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -1,27 +1,64 @@
 <script setup>
-/*import axios from 'axios';
-import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { computed, ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import axios from 'axios';
 
+const router = useRouter();
+const { t } = useI18n();
+
+onMounted(async () => {
+    await fetch();
+});
+
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+
+const expeditions = ref({});
+const url = ref({});
+
+async function fetch() {
+    const filter = {
+        where: {
+            ticketFk: entityId.value
+        }
+    }
+    const { data } = await axios.get(`/api/Expeditions/filter`, {
+        params: { filter }
+    });
+
+    if (data) expeditions.value = data;
+    console.log(expeditions.value)
+}
+
+async function selectVideo(expeditionId) {
+    url.value = `http://localhost:8080/api/Boxings/getVideo?id=${expeditionId}`
+}
 
-    const { data } = await axios.get($props.url, {
-        params: { filter },
-    });*/
 </script>
 
 <template>
     <q-page class="q-pa-md">
-        <q-card class="q-pa-md">
-            <q-card class="q-pa-md">
-                <q-list bordered separator v-for="row of rows" :key="row.id">
-                    <q-item clickable v-ripple>
-                        <q-item-section>{{row.name}}</q-item-section>
-                    </q-item>
-                </q-list>
-            </q-card>
-            <q-card class="q-pa-md">
-                adios
-            </q-card>
+        <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-card>
     </q-page>
 </template>