wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

WIP

This commit is contained in:
William Buezas 2024-03-21 08:37:11 -03:00
parent 522b01b293
commit fc5d858bf1
5 changed files with 284 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/FormPopup.vue Normal file
View File

@ -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>

47
src/components/WorkerTimeReasonForm.vue Normal file
View File

@ -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>

1
src/i18n/en/index.js
View File

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

1
src/i18n/es/index.js
View File

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

159
src/pages/Worker/Card/WorkerTimeControl.vue
View File

@ -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 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 { openConfirmationModal } = useVnConfirm();
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>