Implement WorkerDateLabel

src/pages/Worker/Card/WorkerDateLabel.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineProps({
+    color: {
+        type: String,
+        default: null,
+    },
+    avatarClass: {
+        type: String,
+        default: null,
+    },
+    selected: {
+        type: Boolean,
+        default: undefined,
+    },
+});
+defineEmits(['update:selected']);
+</script>
+
+<template>
+    <QChip
+        class="chip"
+        :selected="selected"
+        :style="selected ? { backgroundColor: color } : null"
+        :text-color="selected ? 'white' : null"
+        @update:selected="$emit('update:selected', $event)"
+    >
+        <QAvatar
+            :color="color"
+            :class="avatarClass"
+            :style="{ backgroundColor: color }"
+        />
+        <slot />
+    </QChip>
+</template>
+
+<style scoped lang="scss">
+.chip {
+    background-color: var(--vn-light-gray);
+}
+</style>

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -7,6 +7,7 @@ import FetchData from 'components/FetchData.vue';
 import WorkerTimeHourChip from 'components/WorkerTimeHourChip.vue';
 import WorkerTimeForm from 'components/WorkerTimeForm.vue';
 import WorkerTimeReasonForm from 'components/WorkerTimeReasonForm.vue';
+import WorkerDateLabel from './WorkerDateLabel.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -552,12 +553,15 @@ onMounted(async () => {
                         <div class="column-title-container">
                             <span class="text-primary">{{ t(col.label) }}</span>
                             <span>{{ col.formattedDate }}</span>
-                            <QBadge
+                            <WorkerDateLabel
                                 v-if="col.dayData?.event"
-                                :style="`background-color: ${col.dayData.event.color}`"
+                                :color="col.dayData.event.color"
+                                selected
                             >
+                                <span>
                                     {{ col.dayData.event.name }}
-                            </QBadge>
+                                </span>
+                            </WorkerDateLabel>
                         </div>
                     </QTh>
                 </QTr>