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>