src/components/WorkerTimeForm.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { reactive, ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FormModelPopup from './FormModelPopup.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+const $props = defineProps({
+    entryId: {
+        type: Number,
+        default: null,
+    },
+    dated: {
+        type: Date,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['onDataSaved']);
+
+const route = useRoute();
+const { t } = useI18n();
+
+let workerHourEntry = reactive({});
+
+const entryDirections = [
+    { code: 'in', description: t('Entrada') },
+    { code: 'middle', description: t('Intermedio') },
+    { code: 'out', description: t('Salida') },
+];
+
+const closeButton = ref(null);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+const isEditMode = computed(() => !!$props.entryId);
+
+const title = computed(() => (isEditMode.value ? t('Edit entry') : t('Add time')));
+
+const urlCreate = computed(() =>
+    isEditMode.value
+        ? `WorkerTimeControls/${$props.entryId}/updateTimeEntry`
+        : `WorkerTimeControls/${route.params.id}/addTimeEntry`
+);
+
+onBeforeMount(() => {
+    workerHourEntry = isEditMode.value
+        ? {}
+        : {
+              timed: new Date($props.dated),
+              workerFk: route.params.id,
+          };
+});
+</script>
+
+<template>
+    <FormModelPopup
+        :form-initial-data="workerHourEntry"
+        :observe-form-changes="false"
+        :default-actions="false"
+        :title="title"
+        :url-create="urlCreate"
+        @on-data-saved="onDataSaved()"
+    >
+        <template #form-inputs="{ data }">
+            <VnInputTime
+                v-if="!isEditMode"
+                :label="t('Hour')"
+                v-model="data.timed"
+                autofocus
+                :required="true"
+                :is-clearable="false"
+            />
+            <VnSelectFilter
+                :label="t('Type')"
+                v-model="data.direction"
+                :options="entryDirections"
+                option-value="code"
+                option-label="description"
+                hide-selected
+                :required="true"
+            />
+            <pre>{{ workerHourEntry }}</pre>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Add time: Añadir hora
+    Edit entry: Editar entrada
+    Hour: Hora
+    Type: Tipo
+    Entrada: Entrada
+    Intermedio: Intermedio
+    Salida: Salida
+</i18n>

src/components/WorkerTimeHourChip.vue

@@ -22,7 +22,7 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['onHourEntryDeleted']);
+const emit = defineEmits(['onHourEntryDeleted', 'showWorkerTimeForm']);
 
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -57,6 +57,16 @@ const deleteHourEntry = async () => {
         console.error('Error deleting hour entry');
     }
 };
+
+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>
 
 <template>
@@ -64,16 +74,18 @@ const deleteHourEntry = async () => {
         <QIcon class="direction-icon" :name="directionIconName" size="sm">
             <QTooltip>{{ directionIconTooltip }}</QTooltip>
         </QIcon>
-        <QBadge rounded class="chip">
+        <QBadge rounded class="chip" @click="showWorkerTimeForm()">
             <QIcon name="edit" size="sm" class="fill-icon">
                 <QTooltip>{{ t('Edit') }}</QTooltip></QIcon
             >
-            <span class="q-px-sm text-subtitle2 text-weight-regular">{{ hour }}</span>
+            <span class="q-px-sm text-subtitle2 text-weight-regular">{{
+                getChipFormattedHour(hour)
+            }}</span>
             <QIcon
                 name="cancel"
                 class="remove-icon"
                 size="sm"
-                @click="
+                @click.stop="
                     openConfirmationModal(
                         t('This time entry will be deleted'),
                         t('Are you sure you want to delete this entry?'),

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -1,10 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { onMounted, ref, computed, onBeforeMount, nextTick } from 'vue';
+import { onMounted, ref, computed, onBeforeMount, nextTick, reactive } from 'vue';
 
 import FetchData from 'components/FetchData.vue';
 import WorkerTimeHourChip from 'components/WorkerTimeHourChip.vue';
+import WorkerTimeForm from 'components/WorkerTimeForm.vue';
+
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useRole } from 'src/composables/useRole';
@@ -13,12 +15,6 @@ import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import { dashIfEmpty } from 'src/filters';
 
-// const entryDirections = [
-//     { code: 'in', description: t('Entrada') },
-//     { code: 'middle', description: t('Intermedio') },
-//     { code: 'out', description: t('Salida') },
-// ];
-
 const route = useRoute();
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -47,6 +43,7 @@ const columns = computed(() => {
     });
 });
 
+const workerTimeFormDialogRef = ref(null);
 const workerHoursRef = ref(null);
 const calendarRef = ref(null);
 const selectedDate = ref(null);
@@ -60,6 +57,10 @@ const reason = ref(null);
 const canResend = ref(null);
 const weekTotalHours = ref(null);
 const workerTimeControlMails = ref(null);
+const workerTimeFormProps = reactive({
+    dated: null,
+    formType: null,
+});
 
 onMounted(() => setDate(Date.vnNew()));
 
@@ -71,14 +72,6 @@ const getHeaderFormattedDate = (date) => {
     return `${day} ${monthName}`;
 };
 
-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 formatHours = (timestamp = 0) => {
     //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
     let hour = Math.floor(timestamp / 3600);
@@ -380,7 +373,7 @@ const getFinishTime = () => {
     }
 };
 
-const onHourEntryDeleted = async () => {
+const updateData = async () => {
     await fetchHours();
     await getMailStates(selectedDate.value);
 };
@@ -400,6 +393,16 @@ const getMailStates = async (date) => {
     // await repaint();
 };
 
+const showWorkerTimeForm = (propValue, formType) => {
+    console.log('workerTimeFormDialogRef:: ', workerTimeFormDialogRef.value);
+    if (formType === 'edit') {
+        workerTimeFormProps.entryId = propValue;
+    } else {
+        workerTimeFormProps.dated = propValue;
+    }
+    workerTimeFormDialogRef.value.show();
+};
+
 onBeforeMount(() => {
     weekdayStore.initStore();
     console.log('asdasdasd:: ', weekdayStore);
@@ -455,67 +458,69 @@ onMounted(async () => {
         <pre>date range: {{ selectedCalendarDates }}</pre>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <QCard class="full-width">
-            <QTable :columns="columns" :rows="['']" hide-bottom>
-                <template #header="props">
-                    <QTr :props="props">
-                        <QTh
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            auto-width
-                        >
-                            <div class="column-title-container">
-                                <span class="text-primary">{{ t(col.label) }}</span>
-                                <span>{{ t(col.formattedDate) }}</span>
-                            </div>
-                        </QTh>
-                    </QTr>
-                </template>
-                <template #body="props">
-                    <QTr>
-                        <QTd
-                            v-for="(day, index) in props.cols"
-                            :key="index"
-                            style="padding: 20px 0 20px 0 !important"
-                        >
-                            <div
-                                v-for="(hour, index) in day.dayData?.hours"
-                                :key="index"
-                                :props="props"
+        <QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
+            <template #header="props">
+                <QTr :props="props" no-hover>
+                    <QTh
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        auto-width
+                    >
+                        <div class="column-title-container">
+                            <span class="text-primary">{{ t(col.label) }}</span>
+                            <span>{{ t(col.formattedDate) }}</span>
+                        </div>
+                    </QTh>
+                </QTr>
+            </template>
+            <template #body="props">
+                <QTr no-hover>
+                    <QTd
+                        v-for="(day, index) in props.cols"
+                        :key="index"
+                        style="padding: 20px 0 20px 0 !important"
+                    >
+                        <div class="full-height">
+                            <WorkerTimeHourChip
+                                v-for="(hour, ind) in day.dayData?.hours"
+                                :key="ind"
+                                :hour="hour.timed"
+                                :direction="hour.direction"
+                                :id="hour.id"
+                                @on-hour-entry-deleted="updateData()"
+                                @show-worker-time-form="
+                                    showWorkerTimeForm(hour.id, 'edit')
+                                "
                                 class="hour-chip"
+                            />
+                        </div>
+                    </QTd>
+                </QTr>
+                <QTr no-hover>
+                    <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.
+                            </span>
+                            <QIcon
+                                name="add_circle"
+                                color="primary"
+                                class="fill-icon cursor-pointer"
+                                size="sm"
+                                @click="showWorkerTimeForm(day.dayData?.dated, 'create')"
                             >
-                                <WorkerTimeHourChip
-                                    :hour="getChipFormattedHour(hour.timed)"
-                                    :direction="hour.direction"
-                                    :id="hour.id"
-                                    @on-hour-entry-deleted="onHourEntryDeleted()"
-                                />
-                            </div>
-                        </QTd>
-                    </QTr>
-                    <QTr>
-                        <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.
-                                </span>
-                                <QIcon
-                                    name="add_circle"
-                                    color="primary"
-                                    class="fill-icon cursor-pointer"
-                                    size="sm"
-                                >
-                                    <QTooltip>{{ t('Add time') }}</QTooltip>
-                                </QIcon>
-                            </div>
-                        </QTd>
-                    </QTr>
-                </template>
-            </QTable>
-        </QCard>
+                                <QTooltip>{{ t('Add time') }}</QTooltip>
+                            </QIcon>
+                        </div>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable>
+        <QDialog ref="workerTimeFormDialogRef">
+            <WorkerTimeForm v-bind="workerTimeFormProps" @on-data-saved="updateData()" />
+        </QDialog>
         <pre>{{ columns }}</pre>
-        <!-- <pre>{{ weekDays }}</pre> -->
     </QPage>
 </template>
 
@@ -550,9 +555,6 @@ onMounted(async () => {
 
 <i18n>
 es:
-    Entrada: Entrada
-    Intermedio: Intermedio
-    Salida: Salida
     Hours: Horas
     Total semana: Total semana
     Termina a las: Termina a las