From 5964189a832bcc707e9035c34366d215ff371a77 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 25 Mar 2024 10:41:10 -0300
Subject: [PATCH] Implement WorkerDateLabel

---
 src/pages/Worker/Card/WorkerDateLabel.vue   | 40 +++++++++++++++++++++
 src/pages/Worker/Card/WorkerTimeControl.vue | 12 ++++---
 2 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Worker/Card/WorkerDateLabel.vue

diff --git a/src/pages/Worker/Card/WorkerDateLabel.vue b/src/pages/Worker/Card/WorkerDateLabel.vue
new file mode 100644
index 000000000..e087ccf72
--- /dev/null
+++ b/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>
diff --git a/src/pages/Worker/Card/WorkerTimeControl.vue b/src/pages/Worker/Card/WorkerTimeControl.vue
index cd37944e8..b08409ddd 100644
--- a/src/pages/Worker/Card/WorkerTimeControl.vue
+++ b/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
                             >
-                                {{ col.dayData.event.name }}
-                            </QBadge>
+                                <span>
+                                    {{ col.dayData.event.name }}
+                                </span>
+                            </WorkerDateLabel>
                         </div>
                     </QTh>
                 </QTr>