From 27c54461de3a9a93b6ab8a5ab9296172c62c2e49 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 5 Aug 2025 16:00:20 +0530
Subject: [PATCH] feat: refactor color selection in CalendarEventPanel to use a
 computed colors array

---
 .../Calendar/CalendarEventPanel.vue           | 37 +++++++------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index 952524e2..abdb30a5 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -40,32 +40,11 @@
             :placeholder="__('Event title')"
           >
             <template #prefix>
-              <Dropdown
-                class="ml-1"
-                :options="
-                  Object.keys(colorMap).map((color) => ({
-                    label:
-                      colorMap[color].name.charAt(0).toUpperCase() +
-                      colorMap[color].name.slice(1),
-                    value: color,
-                    icon: h('div', {
-                      class: '!size-2 rounded-full',
-                      style: {
-                        backgroundColor: colorMap[color].border,
-                      },
-                    }),
-                    onClick: () => {
-                      _event.color = color
-                    },
-                  }))
-                "
-              >
+              <Dropdown class="ml-1" :options="colors">
                 <div
                   class="ml-0.5 size-2 rounded-full cursor-pointer"
                   :style="{
-                    backgroundColor: _event.color
-                      ? colorMap[_event.color]?.border || '#30A66D'
-                      : '#30A66D',
+                    backgroundColor: _event.color || '#30A66D',
                   }"
                 />
               </Dropdown>
@@ -287,4 +266,16 @@ function saveEvent() {
 function deleteEvent() {
   emit('delete', _event.value.id)
 }
+
+const colors = Object.keys(colorMap).map((color) => ({
+  label: color.charAt(0).toUpperCase() + color.slice(1),
+  value: colorMap[color].color,
+  icon: h('div', {
+    class: '!size-2 rounded-full',
+    style: { backgroundColor: colorMap[color].color },
+  }),
+  onClick: () => {
+    _event.value.color = colorMap[color].color
+  },
+}))
 </script>