From 6f97ee1aeba759c37112a1ad5fc4df5bc75c8b83 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 22 Mar 2024 18:33:25 -0300
Subject: [PATCH] improvements

---
 src/filters/date.js                         | 21 ++++++++++
 src/pages/Worker/Card/WorkerTimeControl.vue | 45 +++++++++------------
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/src/filters/date.js b/src/filters/date.js
index 337e1d876..d739aec57 100644
--- a/src/filters/date.js
+++ b/src/filters/date.js
@@ -91,3 +91,24 @@ export function toDateTimeFormat(date, showSeconds = false) {
         second: showSeconds ? '2-digit' : undefined,
     });
 }
+
+/**
+ * Converts seconds to a formatted string representing hours and minutes (hh:mm).
+ * @param {number} seconds - The number of seconds to convert.
+ * @param {boolean} includeHSuffix - Optional parameter indicating whether to include "h." after the hour.
+ * @returns {string} A string representing the time in the format "hh:mm" with optional "h." suffix.
+ */
+export function secondsToHoursMinutes(seconds, includeHSuffix = true) {
+    if (!seconds) return includeHSuffix ? '00:00 h.' : '00:00';
+
+    const hours = Math.floor(seconds / 3600);
+    const remainingMinutes = seconds % 3600;
+    const minutes = Math.floor(remainingMinutes / 60);
+    const formattedHours = hours < 10 ? '0' + hours : hours;
+    const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+
+    // Append "h." if includeHSuffix is true
+    const suffix = includeHSuffix ? ' h.' : '';
+    // Return formatted string
+    return formattedHours + ':' + formattedMinutes + suffix;
+}
diff --git a/src/pages/Worker/Card/WorkerTimeControl.vue b/src/pages/Worker/Card/WorkerTimeControl.vue
index b616141aa..ea7db316c 100644
--- a/src/pages/Worker/Card/WorkerTimeControl.vue
+++ b/src/pages/Worker/Card/WorkerTimeControl.vue
@@ -17,10 +17,10 @@ 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';
+import { toTimeFormat, secondsToHoursMinutes } from 'filters/date.js';
 
 const route = useRoute();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 const { notify } = useNotify();
 const { hasAny } = useRole();
 const _state = useState();
@@ -75,16 +75,13 @@ const columns = computed(() => {
 const getHeaderFormattedDate = (date) => {
     const newDate = new Date(date);
     const day = String(newDate.getDate()).padStart(2, '0');
-    const monthName = newDate.toLocaleString('es-ES', { month: 'long' });
+    const monthName = newDate.toLocaleString(locale.value, { month: 'long' });
     return `${day} ${monthName}`;
 };
 
-const formatHours = (hour = 0) => {
-    const _hour = toTimeFormat(hour);
-    return _hour ? `${_hour} h.` : '00:00 h.';
-};
-
-const formattedWeekTotalHours = computed(() => formatHours(weekTotalHours.value));
+const formattedWeekTotalHours = computed(() =>
+    secondsToHoursMinutes(weekTotalHours.value)
+);
 
 const defaultDate = computed(() => {
     const date = Date.vnNew();
@@ -211,7 +208,6 @@ const getWorkedHours = async (from, to) => {
             weekDay.workedHours = workDay.workedHours;
         }
     }
-
     weekTotalHours.value = _weekTotalHours;
 };
 
@@ -358,7 +354,7 @@ const getFinishTime = () => {
         const finishTimeStamp =
             lastKnownTime && remainingTime ? lastKnownTime + remainingTime : null;
 
-        if (finishTimeStamp) return formatHours(finishTimeStamp);
+        if (finishTimeStamp) return toTimeFormat(finishTimeStamp) + ' h.';
     }
 };
 
@@ -466,7 +462,7 @@ onMounted(async () => {
         <div>
             <QBtnGroup push class="q-gutter-x-sm" flat>
                 <QBtn
-                    v-if="isHimSelf"
+                    v-if="isHimSelf && state"
                     :label="t('Satisfied')"
                     color="primary"
                     type="submit"
@@ -474,7 +470,7 @@ onMounted(async () => {
                     @click="isSatisfied()"
                 />
                 <QBtn
-                    v-if="isHimSelf"
+                    v-if="isHimSelf && state"
                     :label="t('Not satisfied')"
                     color="primary"
                     type="submit"
@@ -482,7 +478,7 @@ onMounted(async () => {
                     @click="showReasonForm()"
                 />
                 <QBtn
-                    v-if="reason && (isHimSelf || isHr)"
+                    v-if="reason && state && (isHimSelf || isHr)"
                     :label="t('Reason')"
                     color="primary"
                     type="submit"
@@ -501,10 +497,10 @@ onMounted(async () => {
                         )
                     "
                 >
-                    <QTooltip
-                        >{{ state ? t('Resend') : t('globals.send') }}
-                        {{ t('email of this week to the user') }}</QTooltip
-                    >
+                    <QTooltip>
+                        {{ state ? t('Resend') : t('globals.send') }}
+                        {{ t('email of this week to the user') }}
+                    </QTooltip>
                 </QBtn>
             </QBtnGroup>
         </div>
@@ -522,7 +518,7 @@ onMounted(async () => {
                     <span>: {{ formattedWeekTotalHours }}</span>
                 </div>
                 <div>
-                    <span class="details-label">{{ t('Termina a las') }}:</span>
+                    <span class="details-label">{{ t('Termina a las') }}: </span>
                     <span>{{ dashIfEmpty(getFinishTime()) }}</span>
                 </div>
 
@@ -541,7 +537,6 @@ onMounted(async () => {
             dense
             :default-year-month="defaultDate"
         />
-        <pre>date range: {{ selectedCalendarDates }}</pre>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
@@ -557,12 +552,12 @@ onMounted(async () => {
                         <div class="column-title-container">
                             <span class="text-primary">{{ t(col.label) }}</span>
                             <span>{{ col.formattedDate }}</span>
-                            <span
+                            <QBadge
                                 v-if="col.dayData?.event"
-                                :style="`color: ${col.dayData.event.color}`"
+                                :style="`background-color: ${col.dayData.event.color}`"
                             >
                                 {{ col.dayData.event.name }}
-                            </span>
+                            </QBadge>
                         </div>
                     </QTh>
                 </QTr>
@@ -572,7 +567,7 @@ onMounted(async () => {
                     <QTd
                         v-for="(day, index) in props.cols"
                         :key="index"
-                        style="padding: 20px 0 20px 0 !important"
+                        style="padding: 20px 16px !important"
                     >
                         <div class="full-height">
                             <WorkerTimeHourChip
@@ -594,7 +589,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) }}
+                                {{ secondsToHoursMinutes(day.dayData?.workedHours) }}
                             </span>
                             <QIcon
                                 name="add_circle"