louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(details): functional UI for detailed shift display, pending approval from higher-ups

Browse Source
This commit is contained in:
Nicolas Drolet 2025-09-08 10:00:25 -04:00
parent fbf8114666
commit b8c9b8ed76
2 changed files with 56 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue
View File

@ -1,57 +1,60 @@
<template> <template>
<!-- This header component is placed in absolute top in order to keep the timestamps <!-- This header component is placed in absolute top in order to keep the timestamps
below it centered. As such it must imitate the column width of the shift row below it below it vertically centered in the row. Since being absolute top makes it no longer
as much as possible, hence the empty q-card-sections. --> follow the alignment of the shift rows below it, it must containt the same elements
as them to remain aligned. -->
<q-card-section <q-card-section
horizontal horizontal
class="text-uppercase text-center items-center q-px-xs" class="text-uppercase text-center items-center q-px-xs"
> >
<!-- Date widget --> <!-- Date widget -->
<q-card-section class="q-px-xs q-py-none col-auto" style="width: 75px;"></q-card-section> <q-card-section class="q-px-xs q-py-none col-auto"> <div class="q-px-xs q-py-none" style="width: 75px;"></div></q-card-section>
<!-- shift row itself --> <!-- shift row itself -->
<q-card-section horizontal class="q-px-xs col"> <q-card-section class="col q-pa-none">
<!-- punch-in timestamps --> <q-card-section horizontal class="col q-px-xs">
<q-card-section class="col q-px-xs q-py-none"> <!-- punch-in timestamps -->
<q-item-label class="text-weight-bolder text-primary"> <q-card-section class="col q-px-xs q-py-none">
{{ $t('shiftColumns.labelIn') }} <q-item-label class="text-weight-bolder text-primary">
</q-item-label> {{ $t('shiftColumns.labelIn') }}
</q-card-section> </q-item-label>
</q-card-section>
<!-- arrows pointing to punch-out timestamps -->
<q-card-section class="col-auto q-pa-none q-mx-sm"> <!-- arrows pointing to punch-out timestamps -->
<q-icon <q-card-section class="col-auto q-pa-none q-mx-sm">
name="double_arrow" <q-icon
color="transparent" name="double_arrow"
size="24px" color="transparent"
style="transform: translateX(5px);" size="24px"
/> style="transform: translateX(5px);"
<q-icon />
name="double_arrow" <q-icon
color="transparent" name="double_arrow"
size="24px" color="transparent"
style="transform: translateX(-5px);" size="24px"
/> style="transform: translateX(-5px);"
</q-card-section> />
</q-card-section>
<!-- punch-out timestamps -->
<q-card-section class="col q-px-xs q-py-none"> <!-- punch-out timestamps -->
<q-item-label class="text-weight-bolder text-primary"> <q-card-section class="col q-px-xs q-py-none">
{{ $t('shiftColumns.labelOut') }} <q-item-label class="text-weight-bolder text-primary">
</q-item-label> {{ $t('shiftColumns.labelOut') }}
</q-card-section> </q-item-label>
</q-card-section>
<!-- shift type badge -->
<q-card-section class="col q-pa-none"></q-card-section> <!-- shift type badge -->
<q-card-section class="col column q-pa-none q-gutter-md"><div style="width: 80px;"></div></q-card-section>
<!-- comment button --> <!-- comment button -->
<q-card-section class="col-auto q-pa-none"> <q-card-section class="col-auto column q-pa-none">
<q-btn <q-btn
icon="chat_bubble_outline" icon="chat_bubble_outline"
color="transparent" color="transparent"
flat flat
class="q-pa-sm" class="q-pa-sm col"
/> />
</q-card-section>
</q-card-section> </q-card-section>
</q-card-section> </q-card-section>
</q-card-section> </q-card-section>

16
src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue
View File

@ -26,7 +26,7 @@
<template> <template>
<q-card-section <q-card-section
horizontal horizontal
class="q-pa-xs text-uppercase text-center items-center" class="q-pa-xs text-uppercase text-center items-center"
> >
<!-- punch-in timestamps --> <!-- punch-in timestamps -->
@ -83,30 +83,32 @@
</q-card-section> </q-card-section>
<!-- shift type badge --> <!-- shift type badge -->
<q-card-section class="col q-pa-none"> <q-card-section class="col column q-pa-none items-center q-gutter-md">
<q-badge <q-badge
v-for="shift, index in shifts_or_placeholder" v-for="shift, index in shifts_or_placeholder"
:key="index" :key="index"
:color="shift.type ? getShiftColor(shift.type) : 'transparent'" :color="shift.type ? getShiftColor(shift.type) : 'transparent'"
:label="shift.type || ''" :label="shift.type || ''"
class="text-weight-medium justify-center" class="text-weight-medium justify-center col"
style="width: 80px; font-size: 0.8em;" style="width: 80px; font-size: 0.8em;"
/> />
</q-card-section> </q-card-section>
<!-- comment button --> <!-- comment button -->
<q-card-actions <q-card-section
class="col-auto q-pa-none" class="col-auto column q-pa-none items-end"
> >
<q-space />
<q-btn <q-btn
v-for="(shift, index) in shifts_or_placeholder" v-for="(shift, index) in shifts_or_placeholder"
:key="index" :key="index"
flat flat
dense
:disable="shift.type === ''" :disable="shift.type === ''"
icon="chat_bubble_outline" icon="chat_bubble_outline"
:color="shift.type === '' ? 'grey-5' : 'grey-8'" :color="shift.type === '' ? 'grey-5' : 'grey-8'"
class="q-pa-sm" class="q-pa-xs col"
/> />
</q-card-actions> </q-card-section>
</q-card-section> </q-card-section>
</template> </template>