From f0df15f381af91758091bd794ba774e32bc26770 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 22 Jul 2022 10:37:16 +0200
Subject: [PATCH 1/7] feat(ticket): add boxing in router

---
 src/pages/Ticket/Card/TicketBoxing.vue | 27 ++++++++++++++++++++++++++
 src/router/modules/ticket.js           | 10 +++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/Card/TicketBoxing.vue

diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
new file mode 100644
index 000000000..140eafa9d
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -0,0 +1,27 @@
+<script setup>
+/*import axios from 'axios';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+
+    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-card>
+    </q-page>
+</template>
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 2cbe8bc3f..60d592868 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -51,8 +51,16 @@ export default {
                         title: 'basicData'
                     },
                     component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
+                },
+                {
+                    path: 'boxing',
+                    name: 'TicketBoxing',
+                    meta: {
+                        title: 'boxing'
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
                 }
             ]
         },
     ]
-};
\ No newline at end of file
+};

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 2/7] 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>

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 3/7] 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>
+-->

From 7f42655b1dc7a75b5157cd07badf849bc6c8207f Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 6 Sep 2022 13:59:00 +0200
Subject: [PATCH 4/7] feat(ticket_boxing): add section

---
 src/i18n/en/index.js                   |   4 +-
 src/i18n/es/index.js                   |   4 +-
 src/pages/Customer/CustomerMain.vue    |   2 +-
 src/pages/Ticket/Card/TicketBoxing.vue | 175 ++++++++++++++++---------
 src/pages/Ticket/Card/TicketCard.vue   |  18 +--
 src/pages/Ticket/TicketMain.vue        |   6 +-
 6 files changed, 130 insertions(+), 79 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 8b452ee83..4211416ca 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -61,7 +61,9 @@ export default {
             expedition: 'Expedition',
             item: 'Item',
             created: 'Created',
-            worker: 'Worker'
+            worker: 'Worker',
+            selectTime: 'Select time:',
+            selectVideo: 'Select video:'
         }
     },
     components: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index ccf991b5c..dd147ac42 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -61,7 +61,9 @@ export default {
             expedition: 'Expedición',
             item: 'Artículo',
             created: 'Creado',
-            worker: 'Trabajador'
+            worker: 'Trabajador',
+            selectTime: 'Seleccionar hora:',
+            selectVideo: 'Seleccionar video:'
         }
     },
     components: {
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index 9787fc415..a3d80e05c 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useState } from 'src/composables/useState';
-import LeftMenu from 'src/components/LeftMenu.vue';
+//import LeftMenu from 'src/components/LeftMenu.vue';
 
 const state = useState();
 const miniState = ref(true);
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 716310336..44231b06f 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -17,8 +17,13 @@ const entityId = computed(function () {
 });
 
 const expeditions = ref({});
-const url = ref({});
-//const video = ref({});
+const lastExpedition = ref();
+const slide = ref(null);
+const videoList = ref([]);
+const time = ref({
+    min: 0,
+    max: 24,
+});
 
 async function fetch() {
     const filter = {
@@ -26,84 +31,126 @@ async function fetch() {
             ticketFk: entityId.value,
         },
     };
-    const { data } = await axios.get(`/api/Expeditions/filter`, {
+    const { data } = await axios.get(`/Expeditions/filter`, {
         params: { filter },
     });
 
     if (data) expeditions.value = data;
-    console.log(expeditions.value);
 }
 
-async function selectVideo(expeditionId) {
-    url.value = `${window.location.origin}/api/Boxings/getVideo?id=${expeditionId}`;
-}
+async function getVideoList(expeditionId, timed) {
+    console.log('entry');
+    lastExpedition.value = expeditionId;
+    const params = {
+        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;
-}*/
+    if (timed) {
+        Object.assign(params, { from: timed.min, to: timed.max });
+    }
+    const { data } = await axios.get(`/Boxings/getVideoList`, { params: params });
+    const list = [];
+
+    for (const video of data) {
+        const videName = video.split('.')[0].split('T')[1].replaceAll('-', ':');
+        list.push({
+            label: videName,
+            value: video,
+            url: `api/Boxings/getVideo?id=${expeditionId}&filename=${video}`,
+        });
+    }
+
+    console.log(list);
+    videoList.value = list.reverse();
+    if (list[0]) {
+        slide.value = list[0].value;
+        console.log({ min: list[0].label.split(':')[0], max: list[list.length - 1].label.split(':')[0] });
+        time.value = {
+            min: parseInt(list[0].label.split(':')[0]),
+            max: parseInt(list[list.length - 1].label.split(':')[0]),
+        };
+    }
+    console.log('slide', slide);
+    console.log('videoList', videoList);
+}
 </script>
 
 <template>
-    <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-layout view="hhh lpr ffr" class="fit">
+        <q-drawer show-if-above side="right" bordered>
             <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
+                <q-list bordered separator style="max-width: 318px">
+                    <q-item v-if="lastExpedition">
+                        <q-item-section>
+                            <q-item-label class="text-h6">
+                                {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
+                            </q-item-label>
+                            <q-range
+                                v-model="time"
+                                @change="getVideoList(lastExpedition, time)"
+                                :min="0"
+                                :max="24"
+                                :step="1"
+                                :left-label-value="time.min + ':00'"
+                                :right-label-value="time.max + ':00'"
+                                label
+                                markers
+                                snap
+                                color="orange"
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item v-if="lastExpedition">
+                        <q-item-section>
+                            <q-select
+                                color="orange"
+                                v-model="slide"
+                                :options="videoList"
+                                :label="t('ticket.boxing.selectVideo')"
+                                emit-value
+                                map-options
+                            >
+                                <template #prepend>
+                                    <q-icon name="schedule" />
+                                </template>
+                            </q-select>
+                        </q-item-section>
+                    </q-item>
+                    <q-item
                         v-for="expedition in expeditions"
                         :key="expedition.id"
-                        @click="selectVideo(expedition.id)"
+                        @click="getVideoList(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-item-section>
+                            <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
+                        </q-item-section>
+                        <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-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>
+        </q-drawer>
+
+        <q-page-container>
+            <q-page>
+                <q-card>
+                    <q-carousel animated v-model="slide" height="max-content">
+                        <q-carousel-slide v-for="video in videoList" :key="video.value" :name="video.value">
+                            <q-video :src="video.url" :ratio="16 / 9" />
+                        </q-carousel-slide>
+                    </q-carousel>
+                </q-card>
+            </q-page>
+        </q-page-container>
+    </q-layout>
 </template>
--->
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 7ac41ebf4..73a26d406 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,23 +1,23 @@
 <script setup>
-import { computed } from 'vue';
-import { useState } from 'src/composables/useState';
-import { useRouter } from 'vue-router';
+//import { computed } from 'vue';
+//import { useState } from 'src/composables/useState';
+//import { useRouter } from 'vue-router';
 
-const state = useState();
-const router = useRouter();
-const entityId = computed(function () {
+//const state = useState();
+//const router = useRouter();
+/*const entityId = computed(function () {
     return router.currentRoute.value.params.id;
-});
+});*/
 </script>
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+    <!--<q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
             <router-link :to="{ path: '/customer/list' }">
                 <q-icon name="arrow_back" size="md" color="primary" />
             </router-link>
             <div>Customer ID: {{ entityId }}</div>
         </q-scroll-area>
-    </q-drawer>
+    </q-drawer>-->
     <q-page-container>
         <router-view></router-view>
     </q-page-container>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
index 9787fc415..ed84a7ca6 100644
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useState } from 'src/composables/useState';
-import LeftMenu from 'src/components/LeftMenu.vue';
+//import LeftMenu from 'src/components/LeftMenu.vue';
 
 const state = useState();
 const miniState = ref(true);
@@ -18,9 +18,9 @@ const miniState = ref(true);
         :width="256"
         :breakpoint="500"
     >
-        <q-scroll-area class="fit text-grey-8">
+        <!--<q-scroll-area class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
+        </q-scroll-area>-->
     </q-drawer>
     <q-page-container>
         <router-view></router-view>

From 0139b464b72e20be511133e59c4a1fde89bce9e9 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 7 Sep 2022 07:19:15 +0200
Subject: [PATCH 5/7] quit console logs

---
 src/pages/Ticket/Card/TicketBoxing.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 44231b06f..e173d5580 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -39,7 +39,6 @@ async function fetch() {
 }
 
 async function getVideoList(expeditionId, timed) {
-    console.log('entry');
     lastExpedition.value = expeditionId;
     const params = {
         id: expeditionId,
@@ -60,7 +59,6 @@ async function getVideoList(expeditionId, timed) {
         });
     }
 
-    console.log(list);
     videoList.value = list.reverse();
     if (list[0]) {
         slide.value = list[0].value;
@@ -70,8 +68,6 @@ async function getVideoList(expeditionId, timed) {
             max: parseInt(list[list.length - 1].label.split(':')[0]),
         };
     }
-    console.log('slide', slide);
-    console.log('videoList', videoList);
 }
 </script>
 
@@ -80,7 +76,7 @@ async function getVideoList(expeditionId, timed) {
         <q-drawer show-if-above side="right" bordered>
             <q-scroll-area class="fit">
                 <q-list bordered separator style="max-width: 318px">
-                    <q-item v-if="lastExpedition">
+                    <q-item v-if="lastExpedition && videoList.length">
                         <q-item-section>
                             <q-item-label class="text-h6">
                                 {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
@@ -100,7 +96,7 @@ async function getVideoList(expeditionId, timed) {
                             />
                         </q-item-section>
                     </q-item>
-                    <q-item v-if="lastExpedition">
+                    <q-item v-if="lastExpedition && videoList.length">
                         <q-item-section>
                             <q-select
                                 color="orange"

From 96c16727ff47da136a6b805409ea149399c3037a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 28 Sep 2022 15:01:08 +0200
Subject: [PATCH 6/7] test(ticketBoxing): front test

---
 src/i18n/en/index.js                          |  4 +-
 src/i18n/es/index.js                          |  3 +-
 src/pages/Login/__tests__/Login.spec.js       |  2 +-
 src/pages/Ticket/Card/TicketBoxing.vue        | 13 +++-
 .../Card/__tests__/TicketBoxing.spec.js       | 69 +++++++++++++++++++
 5 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/Ticket/Card/__tests__/TicketBoxing.spec.js

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 4211416ca..4b3105afa 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -63,7 +63,9 @@ export default {
             created: 'Created',
             worker: 'Worker',
             selectTime: 'Select time:',
-            selectVideo: 'Select video:'
+            selectVideo: 'Select video:',
+            notFound: 'No videos available'
+
         }
     },
     components: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index dd147ac42..91c43985f 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -63,7 +63,8 @@ export default {
             created: 'Creado',
             worker: 'Trabajador',
             selectTime: 'Seleccionar hora:',
-            selectVideo: 'Seleccionar video:'
+            selectVideo: 'Seleccionar vídeo:',
+            notFound: 'No hay vídeos disponibles'
         }
     },
     components: {
diff --git a/src/pages/Login/__tests__/Login.spec.js b/src/pages/Login/__tests__/Login.spec.js
index 87f8de487..ee5ef237b 100644
--- a/src/pages/Login/__tests__/Login.spec.js
+++ b/src/pages/Login/__tests__/Login.spec.js
@@ -33,7 +33,7 @@ describe('Login', () => {
         }
         jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
         jest.spyOn(axios, 'get').mockResolvedValue({ data: { roles: [], user: expectedUser } });
-        jest.spyOn(vm.quasar, 'notify')
+        jest.spyOn(vm.quasar, 'notify');
 
         expect(vm.session.getToken()).toEqual('');
 
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index e173d5580..81d6fa77b 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -3,10 +3,11 @@ import { useI18n } from 'vue-i18n';
 import { computed, ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
-import { date } from 'quasar';
+import { date, useQuasar } from 'quasar';
 
 const router = useRouter();
 const { t } = useI18n();
+const quasar = useQuasar();
 
 onMounted(async () => {
     await fetch();
@@ -48,8 +49,8 @@ async function getVideoList(expeditionId, timed) {
         Object.assign(params, { from: timed.min, to: timed.max });
     }
     const { data } = await axios.get(`/Boxings/getVideoList`, { params: params });
-    const list = [];
 
+    const list = [];
     for (const video of data) {
         const videName = video.split('.')[0].split('T')[1].replaceAll('-', ':');
         list.push({
@@ -62,12 +63,18 @@ async function getVideoList(expeditionId, timed) {
     videoList.value = list.reverse();
     if (list[0]) {
         slide.value = list[0].value;
-        console.log({ min: list[0].label.split(':')[0], max: list[list.length - 1].label.split(':')[0] });
         time.value = {
             min: parseInt(list[0].label.split(':')[0]),
             max: parseInt(list[list.length - 1].label.split(':')[0]),
         };
     }
+
+    if (!data.length) {
+        return quasar.notify({
+            message: t('ticket.boxing.notFound'),
+            type: 'negative',
+        });
+    }
 }
 </script>
 
diff --git a/src/pages/Ticket/Card/__tests__/TicketBoxing.spec.js b/src/pages/Ticket/Card/__tests__/TicketBoxing.spec.js
new file mode 100644
index 000000000..078350471
--- /dev/null
+++ b/src/pages/Ticket/Card/__tests__/TicketBoxing.spec.js
@@ -0,0 +1,69 @@
+import { jest, describe, expect, it, beforeAll } from '@jest/globals';
+import { createWrapper, axios } from 'app/tests/jest/jestHelpers';
+import TicketBoxing from '../TicketBoxing.vue';
+
+const mockPush = jest.fn();
+
+jest.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: mockPush,
+        currentRoute: {
+            value: {
+                params: {
+                    id: 1
+                }
+            }
+        }
+    }),
+}));
+
+describe('TicketBoxing', () => {
+    let vm;
+    beforeAll(() => {
+        vm = createWrapper(TicketBoxing).vm;
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('getVideoList()', () => {
+        it('should when response videoList use to list', async () => {
+            const expeditionId = 1;
+            const timed = {
+                min: 1,
+                max: 2
+            }
+            const videoList = [
+                "2022-01-01T01-01-00.mp4",
+                "2022-02-02T02-02-00.mp4",
+                "2022-03-03T03-03-00.mp4",
+            ]
+
+            jest.spyOn(axios, 'get').mockResolvedValue({ data: videoList });
+            jest.spyOn(vm.quasar, 'notify');
+
+            await vm.getVideoList(expeditionId, timed);
+
+            expect(vm.videoList.length).toEqual(videoList.length);
+            expect(vm.slide).toEqual(videoList.reverse()[0]);
+        });
+
+        it('should if not have video show notify', async () => {
+            const expeditionId = 1;
+            const timed = {
+                min: 1,
+                max: 2
+            }
+
+            jest.spyOn(axios, 'get').mockResolvedValue({ data: [] });
+            jest.spyOn(vm.quasar, 'notify')
+
+            await vm.getVideoList(expeditionId, timed);
+
+            expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
+                { 'type': 'negative' }
+            ));
+        });
+    });
+});

From f1d24cc1036803ce1b3ae3bcbf8a07a5f1c37738 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 30 Sep 2022 12:59:35 +0200
Subject: [PATCH 7/7] test(ticketBoxing): e2e

---
 .../cypress/integration/ticketBoxing.spec.js  | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100755 tests/cypress/integration/ticketBoxing.spec.js

diff --git a/tests/cypress/integration/ticketBoxing.spec.js b/tests/cypress/integration/ticketBoxing.spec.js
new file mode 100755
index 000000000..dc44e292d
--- /dev/null
+++ b/tests/cypress/integration/ticketBoxing.spec.js
@@ -0,0 +1,38 @@
+describe('TicketBoxing', () => {
+    beforeEach(() => {
+        const ticketId = 1;
+        cy.viewport(1280, 720)
+        cy.login('developer')
+        cy.visit(`/#/ticket/${ticketId}/boxing`);
+    });
+
+    it('should load expeditions of ticket', () => {
+        cy.get('div[class="q-item__label text-h6"]').eq(0).should('have.text', '#1');
+        cy.get('div[class="q-item__label text-h6"]').eq(1).should('have.text', '#2');
+        cy.get('div[class="q-item__label text-h6"]').eq(2).should('have.text', '#3');
+    });
+
+    it('should show error if not have video list', () => {
+        cy.get('div[class="q-item__label text-h6"]').eq(0).click();
+        cy.get('.q-notification__message').should('have.text', 'No videos available');
+    });
+
+    it('should show select time and video if have video list', () => {
+        cy.intercept(
+            {
+                method: 'GET',
+                url: '/api/Boxings/*',
+            },
+            [
+                "2022-01-01T01-01-00.mp4",
+                "2022-02-02T02-02-00.mp4",
+                "2022-03-03T03-03-00.mp4",
+            ]
+        ).as('getVideoList');
+        cy.get('.q-list > :nth-child(3)').click();
+
+        cy.get('.q-list > :nth-child(1)').should('be.visible');
+        cy.get('.q-list > :nth-child(2)').should('be.visible');
+
+    });
+});