136 lines
4.7 KiB
Vue
136 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
|
|
import { computed } from 'vue';
|
|
|
|
/* eslint-disable */
|
|
const props = defineProps<{
|
|
shift: Shift;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'save-comment' : [payload: { comment: string; shift: Shift }];
|
|
'request-edit' : [payload: { shift: Shift }];
|
|
'request-delete': [payload: { shift: Shift }];
|
|
}>();
|
|
|
|
const has_comment = computed(()=> {
|
|
const comment = (props.shift as any).description ?? (props.shift as any).comment ?? '';
|
|
return typeof comment === 'string' && comment.trim().length > 0;
|
|
})
|
|
const comment_icon = computed(()=> (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
|
|
const comment_color = computed(()=> (has_comment.value ? 'primary' : 'grey-8'));
|
|
|
|
|
|
const get_shift_color = (type: string): string => {
|
|
switch(type) {
|
|
case 'REGULAR': return 'secondary';
|
|
case 'EVENING': return 'warning';
|
|
case 'EMERGENCY': return 'amber-10';
|
|
case 'OVERTIME': return 'negative';
|
|
case 'VACATION': return 'purple-10';
|
|
case 'HOLIDAY': return 'purple-10';
|
|
case 'SICK': return 'grey-8';
|
|
default : return 'transparent';
|
|
}
|
|
};
|
|
|
|
const get_text_color = (type: string): string => {
|
|
switch(type) {
|
|
case 'REGULAR': return 'grey-8';
|
|
case '': return 'grey-5';
|
|
default: return 'white';
|
|
}
|
|
}
|
|
const on_click_edit = (type: string) => {
|
|
if(type !== '') { emit('request-edit', { shift: props.shift })};
|
|
}
|
|
const on_click_delete = () => emit('request-delete', { shift: props.shift });
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-card-section
|
|
horizontal
|
|
class="q-pa-none text-uppercase text-center items-center rounded-10"
|
|
:class="props.shift.type === '' ? '': 'cursor-pointer'"
|
|
style="line-height: 1;"
|
|
@click.stop="on_click_edit(props.shift.type)"
|
|
>
|
|
<!-- punch-in timestamps -->
|
|
<q-card-section class="q-pa-none col">
|
|
<q-item-label
|
|
class="text-weight-bolder q-pa-xs rounded-5"
|
|
:class="'bg-' + get_shift_color(props.shift.type) + ' text-' + get_text_color(props.shift.type)"
|
|
style="font-size: 1.5em; line-height: 80% !important;"
|
|
>
|
|
{{ props.shift.start_time }}
|
|
</q-item-label>
|
|
</q-card-section>
|
|
|
|
<!-- arrows pointing to punch-out timestamps -->
|
|
<q-card-section
|
|
horizontal
|
|
class="items-center justify-center q-mx-sm col"
|
|
>
|
|
<div
|
|
v-for="icon_data, index in [
|
|
{ transform: 'transform: translateX(5px);', color: 'accent' },
|
|
{ transform: 'transform: translateX(-5px);', color: 'primary' }]"
|
|
:key="index"
|
|
>
|
|
<q-icon
|
|
v-if="props.shift.type !== ''"
|
|
name="double_arrow"
|
|
:color="icon_data.color"
|
|
size="24px"
|
|
:style="icon_data.transform"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- punch-out timestamps -->
|
|
<q-card-section class="q-pa-none col">
|
|
<q-item-label
|
|
class="text-weight-bolder text-white q-pa-xs rounded-5"
|
|
:class="'bg-' + get_shift_color(props.shift.type) + ' text-' + get_text_color(props.shift.type)"
|
|
style="font-size: 1.5em; line-height: 80% !important;"
|
|
>
|
|
{{ props.shift.end_time }}
|
|
</q-item-label>
|
|
</q-card-section>
|
|
|
|
<!-- comment and expenses buttons -->
|
|
<q-card-section
|
|
class="col q-pa-none text-right"
|
|
>
|
|
<!-- comment btn -->
|
|
<q-icon
|
|
v-if="props.shift.type !== ''"
|
|
:name="comment_icon"
|
|
:color="comment_color"
|
|
class="q-pa-none q-mx-xs"
|
|
size="sm"
|
|
/>
|
|
<!-- expenses btn -->
|
|
<q-btn
|
|
v-if="props.shift.type !== ''"
|
|
flat
|
|
dense
|
|
color='grey-8'
|
|
icon="attach_money"
|
|
class="q-pa-none q-mx-xs"
|
|
/>
|
|
<!-- delete btn -->
|
|
<q-btn
|
|
v-if="props.shift.type !== ''"
|
|
push
|
|
dense
|
|
size="sm"
|
|
color="red-6"
|
|
icon="close"
|
|
class="q-ml-xs"
|
|
@click.stop="on_click_delete"
|
|
/>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
</template> |