feat(ticketBoxing): getVideo

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: {

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-list>
-            <q-card class="q-pa-md">
+            <div v-for="expedition in expeditions" :key="expedition.id" @click="selectVideo(expedition.id)">
-                <q-list bordered separator v-for="row of rows" :key="row.id">
+                <q-item class="q-pa-none">
-                    <q-item clickable v-ripple>
+                    <q-item-section>
-                        <q-item-section>{{row.name}}</q-item-section>
+                        <q-item-label caption>{{ t('ticket.boxing.expedition') }}</q-item-label>
-                    </q-item>
+                        <q-item-label>{{ expedition.id }}</q-item-label>
-                </q-list>
+                    </q-item-section>
-            </q-card>
+                </q-item>
-            <q-card class="q-pa-md">
+                <q-item class="q-pa-none">
-                adios
+                    <q-item-section>
-            </q-card>
+                        <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>