104 lines
3.5 KiB
Vue
104 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
|
|
|
|
const props = defineProps<{
|
|
shift: Shift;
|
|
}>();
|
|
|
|
const getShiftColor = (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 getTextColor = (type: string): string => {
|
|
switch(type) {
|
|
case 'REGULAR': return 'grey-8';
|
|
case '': return 'transparent';
|
|
default: return 'white';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-card-section
|
|
horizontal
|
|
class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
|
|
style="line-height: 1;"
|
|
>
|
|
<!-- 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-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(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-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(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"
|
|
>
|
|
<!-- chat_bubble_outline or announcement -->
|
|
<q-btn
|
|
v-if="props.shift.type !== ''"
|
|
flat
|
|
dense
|
|
color='grey-8'
|
|
icon="chat_bubble_outline"
|
|
class="q-pa-none"
|
|
/>
|
|
|
|
<!-- insert_drive_file or request_quote -->
|
|
<q-btn
|
|
v-if="props.shift.type !== ''"
|
|
flat
|
|
dense
|
|
color='grey-8'
|
|
icon="attach_money"
|
|
class="q-pa-none q-mx-xs"
|
|
/>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
</template> |