verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

WIP

This commit is contained in:
William Buezas 2024-03-20 10:31:42 -03:00
parent 7ff8bc642e
commit 522b01b293
3 changed files with 201 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/WorkerTimeForm.vue Normal file
View File

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

20
src/components/WorkerTimeHourChip.vue
View File

@ -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?'),

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

@ -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,10 +458,9 @@ 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>
<QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
<template #header="props">
<QTr :props="props">
<QTr :props="props" no-hover>
<QTh
v-for="col in props.cols"
:key="col.name"
@ -473,28 +475,29 @@ onMounted(async () => {
</QTr>
</template>
<template #body="props">
<QTr>
<QTr no-hover>
<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"
class="hour-chip"
>
<div class="full-height">
<WorkerTimeHourChip
:hour="getChipFormattedHour(hour.timed)"
v-for="(hour, ind) in day.dayData?.hours"
:key="ind"
:hour="hour.timed"
:direction="hour.direction"
:id="hour.id"
@on-hour-entry-deleted="onHourEntryDeleted()"
@on-hour-entry-deleted="updateData()"
@show-worker-time-form="
showWorkerTimeForm(hour.id, 'edit')
"
class="hour-chip"
/>
</div>
</QTd>
</QTr>
<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">
@ -505,6 +508,7 @@ onMounted(async () => {
color="primary"
class="fill-icon cursor-pointer"
size="sm"
@click="showWorkerTimeForm(day.dayData?.dated, 'create')"
>
<QTooltip>{{ t('Add time') }}</QTooltip>
</QIcon>
@ -513,9 +517,10 @@ onMounted(async () => {
</QTr>
</template>
</QTable>
</QCard>
<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