General improvements

src/components/WorkerTimeForm.vue

@@ -89,7 +89,6 @@ onBeforeMount(() => {
                 hide-selected
                 :required="true"
             />
-            <pre>{{ workerHourEntry }}</pre>
         </template>
     </FormModelPopup>
 </template>

src/components/WorkerTimeHourChip.vue

@@ -4,6 +4,7 @@ import { computed } from 'vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'composables/useVnConfirm';
+import { toTimeFormat } from 'filters/date.js';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -58,14 +59,6 @@ const deleteHourEntry = async () => {
     }
 };
 
-const getChipFormattedHour = (date) => {
-    //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
-    const newDate = new Date(date);
-    const hour = newDate.getHours();
-    const min = newDate.getMinutes();
-    return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}`;
-};
-
 const showWorkerTimeForm = () => emit('showWorkerTimeForm');
 </script>
 
@@ -79,7 +72,7 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
                 <QTooltip>{{ t('Edit') }}</QTooltip></QIcon
             >
             <span class="q-px-sm text-subtitle2 text-weight-regular">{{
-                getChipFormattedHour(hour)
+                toTimeFormat(hour)
             }}</span>
             <QIcon
                 name="cancel"
@@ -100,7 +93,7 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
 <style scoped lang="scss">
 .chip {
     height: 28px;
-    color: var(--vn-dark);
+    color: var(--vn-accent-color);
     cursor: pointer;
     background-color: $primary;
     opacity: 0.8;
@@ -111,7 +104,7 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
 }
 
 .direction-icon {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
     margin-right: 6px;
 }
 

src/filters/date.js

@@ -56,7 +56,7 @@ export function toTimeFormat(date, showSeconds = false) {
     if (!isValidDate(date)) {
         return '';
     }
-    return new Date(date).toLocaleDateString('es-ES', {
+    return new Date(date).toLocaleTimeString('es-ES', {
         hour: '2-digit',
         minute: '2-digit',
         second: showSeconds ? '2-digit' : undefined,

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -17,6 +17,7 @@ import { useState } from 'src/composables/useState';
 import { dashIfEmpty } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useArrayData } from 'composables/useArrayData';
+import { toTimeFormat } from 'filters/date.js';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -58,7 +59,7 @@ const isHr = computed(() => hasAny(['hr']));
 const isHimSelf = computed(() => user.value.id === route.params.id);
 
 const columns = computed(() => {
-    return weekdayStore.localeWeekdays?.map((day, index) => {
+    return weekdayStore.getLocales?.map((day, index) => {
         const obj = {
             label: day.locale,
             formattedDate: getHeaderFormattedDate(weekDays.value[index]?.dated),
@@ -72,22 +73,15 @@ const columns = computed(() => {
 });
 
 const getHeaderFormattedDate = (date) => {
-    //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
     const newDate = new Date(date);
     const day = String(newDate.getDate()).padStart(2, '0');
     const monthName = newDate.toLocaleString('es-ES', { month: 'long' });
     return `${day} ${monthName}`;
 };
 
-const formatHours = (timestamp = 0) => {
+const formatHours = (hour = 0) => {
-    //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
+    const _hour = toTimeFormat(hour);
-    let hour = Math.floor(timestamp / 3600);
+    return _hour ? `${_hour} h.` : '00:00 h.';
-    let min = Math.floor(timestamp / 60 - 60 * hour);
-
-    if (hour < 10) hour = `0${hour}`;
-    if (min < 10) min = `0${min}`;
-
-    return `${hour}:${min}`;
 };
 
 const formattedWeekTotalHours = computed(() => formatHours(weekTotalHours.value));
@@ -364,15 +358,7 @@ const getFinishTime = () => {
         const finishTimeStamp =
             lastKnownTime && remainingTime ? lastKnownTime + remainingTime : null;
 
-        if (finishTimeStamp) {
+        if (finishTimeStamp) return formatHours(finishTimeStamp);
-            let finishDate = new Date(finishTimeStamp);
-            let hour = finishDate.getHours();
-            let minute = finishDate.getMinutes();
-
-            if (hour < 10) hour = `0${hour}`;
-            if (minute < 10) minute = `0${minute}`;
-            return `${hour}:${minute} h.`;
-        }
     }
 };
 
@@ -533,7 +519,7 @@ onMounted(async () => {
             <QCardSection class="column items-center" horizontal>
                 <div>
                     <span class="details-label">{{ t('Total semana') }} </span>
-                    <span>: {{ formattedWeekTotalHours }} h.</span>
+                    <span>: {{ formattedWeekTotalHours }}</span>
                 </div>
                 <div>
                     <span class="details-label">{{ t('Termina a las') }}:</span>
@@ -566,10 +552,17 @@ onMounted(async () => {
                         :key="col.name"
                         :props="props"
                         auto-width
+                        style="vertical-align: top"
                     >
                         <div class="column-title-container">
                             <span class="text-primary">{{ t(col.label) }}</span>
-                            <span>{{ t(col.formattedDate) }}</span>
+                            <span>{{ col.formattedDate }}</span>
+                            <span
+                                v-if="col.dayData?.event"
+                                :style="`color: ${col.dayData.event.color}`"
+                            >
+                                {{ col.dayData.event.name }}
+                            </span>
                         </div>
                     </QTh>
                 </QTr>
@@ -601,7 +594,7 @@ onMounted(async () => {
                     <QTd v-for="(day, index) in props.cols" :key="index">
                         <div class="column items-center justify-center">
                             <span class="q-mb-md text-sm text-body1">
-                                {{ formatHours(day.dayData?.workedHours) }} h.
+                                {{ formatHours(day.dayData?.workedHours) }}
                             </span>
                             <QIcon
                                 name="add_circle"
@@ -623,7 +616,6 @@ onMounted(async () => {
         <QDialog ref="workerTimeReasonFormDialogRef">
             <WorkerTimeReasonForm @on-submit="isUnsatisfied($event)" :reason="reason" />
         </QDialog>
-        <pre>{{ columns }}</pre>
     </QPage>
 </template>
 
@@ -670,4 +662,5 @@ es:
     Email sended: Email enviado
     Send time control email: Enviar email control horario
     Are you sure you want to send it?: ¿Seguro que quieres enviarlo?
+    You must indicate a reason: Debes indicar un motivo
 </i18n>

src/stores/useWeekdayStore.js

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { reactive, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { defineStore } from 'pinia';
 
@@ -13,8 +13,14 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
         { code: 'sat', name: 'Saturday' },
     ];
 
+    const localeOrder = {
+        es: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+        en: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+    };
+
     const { t } = useI18n();
     const weekdaysMap = reactive({});
+    const localeWeekdays = ref([]);
 
     const initStore = () => {
         getWeekdaysMap();
@@ -29,16 +35,30 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
                 index: i,
                 char: day.name.substr(0, 1),
                 abr: day.name.substr(0, 3),
-                locale: t(`weekdays.${day.code}`),
-                localeChar: t(`weekdays.${day.code}`).substr(0, 1),
-                localeAbr: t(`weekdays.${day.code}`).substr(0, 3),
             };
             weekdaysMap[day.code] = obj;
         });
     };
 
+    const getLocales = computed(() => {
+        // El día de mañana esto permitirá ordenar los weekdays en base a el locale si se lo desea reemplazando localeOrder.es por localeOrder[locale]
+        const locales = [];
+        for (let code of localeOrder.es) {
+            const obj = {
+                ...weekdaysMap[code],
+                locale: t(`weekdays.${weekdaysMap[code].code}`),
+                localeChar: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 1),
+                localeAbr: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 3),
+            };
+            locales.push(obj);
+        }
+        return locales;
+    });
+
     return {
         initStore,
         weekdaysMap,
+        localeWeekdays,
+        getLocales,
     };
 });