WIP
This commit is contained in:
parent
7ff8bc642e
commit
522b01b293
|
|
@ -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>
|
||||
|
|
@ -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?'),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue