General improvements
This commit is contained in:
parent
bdd0e657ec
commit
f1faf18523
|
|
@ -89,7 +89,6 @@ onBeforeMount(() => {
|
|||
hide-selected
|
||||
:required="true"
|
||||
/>
|
||||
<pre>{{ workerHourEntry }}</pre>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { computed } from 'vue';
|
|||
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import { toTimeFormat } from 'filters/date.js';
|
||||
import axios from 'axios';
|
||||
|
||||
const $props = defineProps({
|
||||
|
|
@ -58,14 +59,6 @@ const deleteHourEntry = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
|
|
@ -79,7 +72,7 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
|
|||
<QTooltip>{{ t('Edit') }}</QTooltip></QIcon
|
||||
>
|
||||
<span class="q-px-sm text-subtitle2 text-weight-regular">{{
|
||||
getChipFormattedHour(hour)
|
||||
toTimeFormat(hour)
|
||||
}}</span>
|
||||
<QIcon
|
||||
name="cancel"
|
||||
|
|
@ -100,7 +93,7 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
|
|||
<style scoped lang="scss">
|
||||
.chip {
|
||||
height: 28px;
|
||||
color: var(--vn-dark);
|
||||
color: var(--vn-accent-color);
|
||||
cursor: pointer;
|
||||
background-color: $primary;
|
||||
opacity: 0.8;
|
||||
|
|
@ -111,7 +104,7 @@ const showWorkerTimeForm = () => emit('showWorkerTimeForm');
|
|||
}
|
||||
|
||||
.direction-icon {
|
||||
color: var(--vn-label);
|
||||
color: var(--vn-label-color);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export function toTimeFormat(date, showSeconds = false) {
|
|||
if (!isValidDate(date)) {
|
||||
return '';
|
||||
}
|
||||
return new Date(date).toLocaleDateString('es-ES', {
|
||||
return new Date(date).toLocaleTimeString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: showSeconds ? '2-digit' : undefined,
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { useState } from 'src/composables/useState';
|
|||
import { dashIfEmpty } from 'src/filters';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
import { toTimeFormat } from 'filters/date.js';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
|
@ -58,7 +59,7 @@ const isHr = computed(() => hasAny(['hr']));
|
|||
const isHimSelf = computed(() => user.value.id === route.params.id);
|
||||
|
||||
const columns = computed(() => {
|
||||
return weekdayStore.localeWeekdays?.map((day, index) => {
|
||||
return weekdayStore.getLocales?.map((day, index) => {
|
||||
const obj = {
|
||||
label: day.locale,
|
||||
formattedDate: getHeaderFormattedDate(weekDays.value[index]?.dated),
|
||||
|
|
@ -72,22 +73,15 @@ const columns = computed(() => {
|
|||
});
|
||||
|
||||
const getHeaderFormattedDate = (date) => {
|
||||
//TODO:: Ver si se puede hacer una funcion reutilizable o complementar a utils de dates
|
||||
const newDate = new Date(date);
|
||||
const day = String(newDate.getDate()).padStart(2, '0');
|
||||
const monthName = newDate.toLocaleString('es-ES', { month: 'long' });
|
||||
return `${day} ${monthName}`;
|
||||
};
|
||||
|
||||
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);
|
||||
let min = Math.floor(timestamp / 60 - 60 * hour);
|
||||
|
||||
if (hour < 10) hour = `0${hour}`;
|
||||
if (min < 10) min = `0${min}`;
|
||||
|
||||
return `${hour}:${min}`;
|
||||
const formatHours = (hour = 0) => {
|
||||
const _hour = toTimeFormat(hour);
|
||||
return _hour ? `${_hour} h.` : '00:00 h.';
|
||||
};
|
||||
|
||||
const formattedWeekTotalHours = computed(() => formatHours(weekTotalHours.value));
|
||||
|
|
@ -364,15 +358,7 @@ const getFinishTime = () => {
|
|||
const finishTimeStamp =
|
||||
lastKnownTime && remainingTime ? lastKnownTime + remainingTime : null;
|
||||
|
||||
if (finishTimeStamp) {
|
||||
let finishDate = new Date(finishTimeStamp);
|
||||
let hour = finishDate.getHours();
|
||||
let minute = finishDate.getMinutes();
|
||||
|
||||
if (hour < 10) hour = `0${hour}`;
|
||||
if (minute < 10) minute = `0${minute}`;
|
||||
return `${hour}:${minute} h.`;
|
||||
}
|
||||
if (finishTimeStamp) return formatHours(finishTimeStamp);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -533,7 +519,7 @@ onMounted(async () => {
|
|||
<QCardSection class="column items-center" horizontal>
|
||||
<div>
|
||||
<span class="details-label">{{ t('Total semana') }} </span>
|
||||
<span>: {{ formattedWeekTotalHours }} h.</span>
|
||||
<span>: {{ formattedWeekTotalHours }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="details-label">{{ t('Termina a las') }}:</span>
|
||||
|
|
@ -566,10 +552,17 @@ onMounted(async () => {
|
|||
:key="col.name"
|
||||
:props="props"
|
||||
auto-width
|
||||
style="vertical-align: top"
|
||||
>
|
||||
<div class="column-title-container">
|
||||
<span class="text-primary">{{ t(col.label) }}</span>
|
||||
<span>{{ t(col.formattedDate) }}</span>
|
||||
<span>{{ col.formattedDate }}</span>
|
||||
<span
|
||||
v-if="col.dayData?.event"
|
||||
:style="`color: ${col.dayData.event.color}`"
|
||||
>
|
||||
{{ col.dayData.event.name }}
|
||||
</span>
|
||||
</div>
|
||||
</QTh>
|
||||
</QTr>
|
||||
|
|
@ -601,7 +594,7 @@ onMounted(async () => {
|
|||
<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.
|
||||
{{ formatHours(day.dayData?.workedHours) }}
|
||||
</span>
|
||||
<QIcon
|
||||
name="add_circle"
|
||||
|
|
@ -623,7 +616,6 @@ onMounted(async () => {
|
|||
<QDialog ref="workerTimeReasonFormDialogRef">
|
||||
<WorkerTimeReasonForm @on-submit="isUnsatisfied($event)" :reason="reason" />
|
||||
</QDialog>
|
||||
<pre>{{ columns }}</pre>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
|
|
@ -670,4 +662,5 @@ es:
|
|||
Email sended: Email enviado
|
||||
Send time control email: Enviar email control horario
|
||||
Are you sure you want to send it?: ¿Seguro que quieres enviarlo?
|
||||
You must indicate a reason: Debes indicar un motivo
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { reactive } from 'vue';
|
||||
import { reactive, ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
|
|
@ -13,8 +13,14 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
|
|||
{ code: 'sat', name: 'Saturday' },
|
||||
];
|
||||
|
||||
const localeOrder = {
|
||||
es: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
|
||||
en: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
|
||||
};
|
||||
|
||||
const { t } = useI18n();
|
||||
const weekdaysMap = reactive({});
|
||||
const localeWeekdays = ref([]);
|
||||
|
||||
const initStore = () => {
|
||||
getWeekdaysMap();
|
||||
|
|
@ -29,16 +35,30 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
|
|||
index: i,
|
||||
char: day.name.substr(0, 1),
|
||||
abr: day.name.substr(0, 3),
|
||||
locale: t(`weekdays.${day.code}`),
|
||||
localeChar: t(`weekdays.${day.code}`).substr(0, 1),
|
||||
localeAbr: t(`weekdays.${day.code}`).substr(0, 3),
|
||||
};
|
||||
weekdaysMap[day.code] = obj;
|
||||
});
|
||||
};
|
||||
|
||||
const getLocales = computed(() => {
|
||||
// El día de mañana esto permitirá ordenar los weekdays en base a el locale si se lo desea reemplazando localeOrder.es por localeOrder[locale]
|
||||
const locales = [];
|
||||
for (let code of localeOrder.es) {
|
||||
const obj = {
|
||||
...weekdaysMap[code],
|
||||
locale: t(`weekdays.${weekdaysMap[code].code}`),
|
||||
localeChar: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 1),
|
||||
localeAbr: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 3),
|
||||
};
|
||||
locales.push(obj);
|
||||
}
|
||||
return locales;
|
||||
});
|
||||
|
||||
return {
|
||||
initStore,
|
||||
weekdaysMap,
|
||||
localeWeekdays,
|
||||
getLocales,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue