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

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

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

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

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