138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
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({
|
|
id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
manual: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
hour: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
direction: {
|
|
type: String,
|
|
required: true,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['onHourEntryDeleted', 'showWorkerTimeForm']);
|
|
|
|
const { t } = useI18n();
|
|
const { notify } = useNotify();
|
|
const { openConfirmationModal } = useVnConfirm();
|
|
|
|
const directionIconTooltip = computed(() => {
|
|
const tooltipDictionary = {
|
|
in: t('Entrada'),
|
|
out: t('Salida'),
|
|
};
|
|
return tooltipDictionary[$props.direction] || null;
|
|
});
|
|
|
|
const directionIconName = computed(() => {
|
|
const tooltipDictionary = {
|
|
in: 'arrow_forward',
|
|
out: 'arrow_back',
|
|
};
|
|
return tooltipDictionary[$props.direction] || null;
|
|
});
|
|
|
|
const deleteHourEntry = async () => {
|
|
const { data } = await axios.post(`WorkerTimeControls/${$props.id}/deleteTimeEntry`);
|
|
|
|
if (!data) return;
|
|
emit('onHourEntryDeleted');
|
|
notify('Entry removed', 'positive');
|
|
};
|
|
|
|
const showWorkerTimeForm = () => emit('showWorkerTimeForm');
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row items-center no-wrap">
|
|
<QIcon class="direction-icon" :name="directionIconName" size="sm">
|
|
<QTooltip>{{ directionIconTooltip }}</QTooltip>
|
|
</QIcon>
|
|
<QBadge
|
|
rounded
|
|
class="chip"
|
|
:class="{ '--manual': manual }"
|
|
@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">{{
|
|
toTimeFormat(hour)
|
|
}}</span>
|
|
<QIcon
|
|
v-if="manual"
|
|
name="cancel"
|
|
class="remove-icon"
|
|
size="sm"
|
|
@click.stop="
|
|
openConfirmationModal(
|
|
t('This time entry will be deleted'),
|
|
t('Are you sure you want to delete this entry?'),
|
|
deleteHourEntry
|
|
)
|
|
"
|
|
/>
|
|
</QBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.chip {
|
|
height: 28px;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
color: #eee;
|
|
background-color: #222;
|
|
|
|
&.--manual {
|
|
color: var(--vn-accent-color);
|
|
background-color: $primary;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.direction-icon {
|
|
color: var(--vn-label-color);
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.remove-icon {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
Entrada: Entrada
|
|
Salida: Salida
|
|
Edit: Editar
|
|
This time entry will be deleted: Se eliminará la hora fichada
|
|
Are you sure you want to delete this entry?: ¿Seguro que quieres eliminarla?
|
|
Entry removed: Fichada borrada
|
|
</i18n>
|