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

General improvements

This commit is contained in:
William Buezas 2024-03-22 14:10:00 -03:00
parent bdd0e657ec
commit f1faf18523
5 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/WorkerTimeForm.vue
View File

@ -89,7 +89,6 @@ onBeforeMount(() => {
hide-selected
:required="true"
/>
<pre>{{ workerHourEntry }}</pre>
</template>
</FormModelPopup>
</template>

15
src/components/WorkerTimeHourChip.vue
View File

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

2
src/filters/date.js
View File

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

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

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

28
src/stores/useWeekdayStore.js
View File

@ -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,
};
});