WIP

src/components/FormPopup.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits(['onSubmit']);
+
+const $props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    subtitle: {
+        type: String,
+        default: '',
+    },
+    defaultSubmitButton: {
+        type: Boolean,
+        default: true,
+    },
+    defaultCancelButton: {
+        type: Boolean,
+        default: true,
+    },
+    customSubmitButtonLabel: {
+        type: String,
+        default: '',
+    },
+});
+
+const { t } = useI18n();
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onSubmit = () => {
+    emit('onSubmit');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <QForm
+        @submit="onSubmit($event)"
+        class="all-pointer-events full-width"
+        style="max-width: 800px"
+    >
+        <QCard class="q-pa-lg">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ title }}</h1>
+            <p>{{ subtitle }}</p>
+            <slot name="form-inputs" />
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    v-if="defaultSubmitButton"
+                    :label="customSubmitButtonLabel || t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+                <QBtn
+                    v-if="defaultCancelButton"
+                    :label="t('globals.cancel')"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+                <slot name="customButtons" />
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>

src/components/WorkerTimeReasonForm.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FormPopup from './FormPopup.vue';
+
+const $props = defineProps({
+    reason: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['onSubmit']);
+
+const { t } = useI18n();
+
+const closeButton = ref(null);
+const reasonFormData = ref($props.reason);
+
+const onSubmit = () => {
+    emit('onSubmit', reasonFormData.value);
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FormPopup @on-submit="onSubmit()">
+        <template #form-inputs>
+            <QInput
+                :label="t('Reason')"
+                v-model="reasonFormData"
+                type="textarea"
+                autogrow
+            />
+        </template>
+    </FormPopup>
+</template>
+
+<i18n>
+es:
+    Reason: Motivo
+</i18n>

src/i18n/en/index.js

@@ -84,6 +84,7 @@ export default {
         selectFile: 'Select a file',
         copyClipboard: 'Copy on clipboard',
         salesPerson: 'SalesPerson',
+        send: 'Send',
     },
     errors: {
         statusUnauthorized: 'Access denied',

src/i18n/es/index.js

@@ -84,6 +84,7 @@ export default {
         selectFile: 'Seleccione un fichero',
         copyClipboard: 'Copiar en portapapeles',
         salesPerson: 'Comercial',
+        send: 'Enviar',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -6,6 +6,7 @@ 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 WorkerTimeReasonForm from 'components/WorkerTimeReasonForm.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -14,6 +15,8 @@ import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import { dashIfEmpty } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -24,26 +27,10 @@ const user = _state.getUser();
 const stateStore = useStateStore();
 const weekdayStore = useWeekdayStore();
 const weekDays = ref([]);
-
+const { openConfirmationModal } = useVnConfirm();
-const isHr = computed(() => hasAny(['hr']));
-
-const isHimSelf = computed(() => user.value.id === route.params.id);
-
-const columns = computed(() => {
-    return weekdayStore.localeWeekdays?.map((day, index) => {
-        const obj = {
-            label: day.locale,
-            formattedDate: getHeaderFormattedDate(weekDays.value[index]?.dated),
-            name: day.name,
-            align: 'left',
-            colIndex: index,
-            dayData: weekDays.value[index],
-        };
-        return obj;
-    });
-});
 
 const workerTimeFormDialogRef = ref(null);
+const workerTimeReasonFormDialogRef = ref(null);
 const workerHoursRef = ref(null);
 const calendarRef = ref(null);
 const selectedDate = ref(null);
@@ -62,7 +49,27 @@ const workerTimeFormProps = reactive({
     formType: null,
 });
 
-onMounted(() => setDate(Date.vnNew()));
+const arrayData = useArrayData('workerData');
+
+const worker = computed(() => arrayData.store?.data);
+
+const isHr = computed(() => hasAny(['hr']));
+
+const isHimSelf = computed(() => user.value.id === route.params.id);
+
+const columns = computed(() => {
+    return weekdayStore.localeWeekdays?.map((day, index) => {
+        const obj = {
+            label: day.locale,
+            formattedDate: getHeaderFormattedDate(weekDays.value[index]?.dated),
+            name: day.name,
+            align: 'left',
+            colIndex: index,
+            dayData: weekDays.value[index],
+        };
+        return obj;
+    });
+});
 
 const getHeaderFormattedDate = (date) => {
     //TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
@@ -307,7 +314,7 @@ const fetchWeekData = async () => {
         } else {
             const [mail] = data;
             state.value = mail.state;
-            reason.value.value = mail.reason;
+            reason.value = mail.reason;
         }
 
         await canBeResend();
@@ -403,13 +410,67 @@ const showWorkerTimeForm = (propValue, formType) => {
     workerTimeFormDialogRef.value.show();
 };
 
+const showReasonForm = () => {
+    workerTimeReasonFormDialogRef.value.show();
+};
+
+const updateWorkerTimeControlMail = async (state, reason) => {
+    try {
+        const params = {
+            workerId: Number(route.params.id),
+            year: selectedDate.value.getFullYear(),
+            week: selectedWeekNumber.value,
+            state,
+        };
+
+        if (reason) params.reason = reason;
+
+        await axios.post('WorkerTimeControls/updateWorkerTimeControlMail', params);
+        await getMailStates(selectedDate.value);
+        await fetchWeekData();
+        notify(t('globals.dataSaved'), 'positive');
+    } catch (err) {
+        console.error('Error updating worker time control mail');
+    }
+};
+
+const isSatisfied = async () => {
+    await updateWorkerTimeControlMail('CONFIRMED');
+};
+
+const isUnsatisfied = async (reason) => {
+    console.log('unsatiesfied reason:: ', reason);
+    if (!reason) return; // TODO: Mostrar notify de 'debe haber una razon'
+    updateWorkerTimeControlMail('REVISE', reason);
+};
+
+const resendEmail = async () => {
+    try {
+        const params = {
+            recipient: worker.value?.user?.email,
+            week: selectedWeekNumber.value,
+            year: selectedDate.value.getFullYear(),
+            workerId: Number(route.params.id),
+            state: 'SENDED',
+        };
+        await axios.post('WorkerTimeControls/weekly-hour-hecord-email', params);
+        await getMailStates(selectedDate.value);
+        notify(t('Email sended'), 'positive');
+    } catch (err) {
+        console.error('Error sending email');
+    }
+};
+
 onBeforeMount(() => {
     weekdayStore.initStore();
     console.log('asdasdasd:: ', weekdayStore);
 });
 
 onMounted(async () => {
+    setDate(Date.vnNew());
     stateStore.rightDrawer = true;
+    const test = useArrayData('workerData').store.data;
+    console.log('test:: ', test);
 });
 </script>
 
@@ -423,6 +484,53 @@ onMounted(async () => {
         }"
         @on-fetch="(data) => setHours(data)"
     />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <div>
+            <QBtnGroup push class="q-gutter-x-sm" flat>
+                <QBtn
+                    v-if="isHimSelf"
+                    :label="t('Satisfied')"
+                    color="primary"
+                    type="submit"
+                    :disabled="state == 'CONFIRMED'"
+                    @click="isSatisfied()"
+                />
+                <QBtn
+                    v-if="isHimSelf"
+                    :label="t('Not satisfied')"
+                    color="primary"
+                    type="submit"
+                    :disabled="state == 'REVISE'"
+                    @click="showReasonForm()"
+                />
+                <QBtn
+                    v-if="reason && (isHimSelf || isHr)"
+                    :label="t('Reason')"
+                    color="primary"
+                    type="submit"
+                    @click="showReasonForm()"
+                />
+                <QBtn
+                    v-if="isHr && state !== 'CONFIRMED' && canResend"
+                    :label="state ? t('Resend') : t('globals.send')"
+                    color="primary"
+                    type="submit"
+                    @click="
+                        openConfirmationModal(
+                            t('Send time control email'),
+                            t('Are you sure you want to send it?'),
+                            resendEmail
+                        )
+                    "
+                >
+                    <QTooltip
+                        >{{ state ? t('Resend') : t('globals.send') }}
+                        {{ t('email of this week to the user') }}</QTooltip
+                    >
+                </QBtn>
+            </QBtnGroup>
+        </div>
+    </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="260" class="q-pa-md">
         <div class="q-pa-md q-mb-md" style="border: 2px solid black">
             <QCardSection horizontal>
@@ -520,6 +628,9 @@ onMounted(async () => {
         <QDialog ref="workerTimeFormDialogRef">
             <WorkerTimeForm v-bind="workerTimeFormProps" @on-data-saved="updateData()" />
         </QDialog>
+        <QDialog ref="workerTimeReasonFormDialogRef">
+            <WorkerTimeReasonForm @on-submit="isUnsatisfied($event)" :reason="reason" />
+        </QDialog>
         <pre>{{ columns }}</pre>
     </QPage>
 </template>
@@ -559,4 +670,12 @@ es:
     Total semana: Total semana
     Termina a las: Termina a las
     Add time: Añadir hora
+    Reason: Motivo
+    Not satisfied: No conforme
+    Satisfied: Conforme
+    Resend: Reenviar
+    email of this week to the user: email de esta semana al usuario
+    Email sended: Email enviado
+    Send time control email: Enviar email control horario
+    Are you sure you want to send it?: ¿Seguro que quieres enviarlo?
 </i18n>