From b9961b0ba0460efd6e3c68ec5b37a96a1bec1909 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 21 Jun 2024 23:04:36 +0530
Subject: [PATCH] fix: change column color and save it

---
 .../src/components/Kanban/KanbanSettings.vue  |  4 +-
 frontend/src/components/Kanban/KanbanView.vue | 55 +++++++++++++++++--
 frontend/src/components/ViewControls.vue      | 14 +++--
 frontend/src/pages/Deals.vue                  |  6 +-
 frontend/src/pages/Leads.vue                  |  6 +-
 frontend/src/pages/Tasks.vue                  |  6 +-
 6 files changed, 77 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Kanban/KanbanSettings.vue b/frontend/src/components/Kanban/KanbanSettings.vue
index 6b0604ac..bc70c7ba 100644
--- a/frontend/src/components/Kanban/KanbanSettings.vue
+++ b/frontend/src/components/Kanban/KanbanSettings.vue
@@ -79,7 +79,9 @@ const fields = createResource({
 function apply() {
   nextTick(() => {
     showDialog.value = false
-    emit('update', column_field.value)
+    emit('update', {
+      column_field: column_field.value.name,
+    })
   })
 }
 </script>
diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index 1d1a1640..8ace6348 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -10,8 +10,40 @@
         class="flex flex-col gap-2.5 min-w-[268px] hover:bg-gray-100 rounded-lg p-2.5 transition-all duration-300 ease-in-out"
       >
         <div class="flex gap-2 items-center justify-between">
-          <div class="flex gap-2 items-center text-base py-1.5">
-            <IndicatorIcon :class="colorClasses(column.column.color)" />
+          <div class="flex items-center text-base">
+            <NestedPopover>
+              <template #target>
+                <Button variant="ghost" size="sm" class="hover:!bg-gray-100">
+                  <IndicatorIcon
+                    :class="colorClasses(column.column.color, true)"
+                  />
+                </Button>
+              </template>
+              <template #body="{ close }">
+                <div
+                  class="flex flex-col gap-3 px-3 py-2.5 rounded-lg border border-gray-100 bg-white shadow-xl"
+                >
+                  <div class="flex gap-1">
+                    <Button
+                      :class="colorClasses(color)"
+                      variant="ghost"
+                      v-for="color in colors"
+                      :key="color"
+                      @click="() => (column.column.color = color)"
+                    >
+                      <IndicatorIcon />
+                    </Button>
+                  </div>
+                  <div class="flex flex-row-reverse">
+                    <Button
+                      variant="solid"
+                      :label="__('Apply')"
+                      @click="updateColor"
+                    />
+                  </div>
+                </div>
+              </template>
+            </NestedPopover>
             <div>{{ column.column.name }}</div>
           </div>
           <div>
@@ -39,10 +71,13 @@
   </Draggable>
 </template>
 <script setup>
+import NestedPopover from '@/components/NestedPopover.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import Draggable from 'vuedraggable'
 import { computed } from 'vue'
 
+const emit = defineEmits(['update'])
+
 const kanban = defineModel()
 
 const columns = computed(() => {
@@ -59,14 +94,26 @@ const columns = computed(() => {
   return _columns
 })
 
-function colorClasses(color) {
+function updateColor() {
+  let _columns = []
+  columns.value.forEach((col) => {
+    _columns.push(col.column)
+  })
+
+  emit('update', { columns: _columns })
+}
+
+function colorClasses(color, onlyIcon = false) {
   let textColor = `!text-${color}-600`
   if (color == 'black') {
     textColor = '!text-gray-900'
   } else if (['gray', 'green'].includes(color)) {
     textColor = `!text-${color}-700`
   }
-  return [textColor]
+
+  let bgColor = `!bg-${color}-100 hover:!bg-${color}-200 active:!bg-${color}-300`
+
+  return [textColor, onlyIcon ? '' : bgColor]
 }
 
 const colors = [
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index c82f5cf4..a6e938a6 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -713,16 +713,18 @@ function updateColumns(obj) {
   }
 }
 
-function updateKanbanSettings(column_field) {
+function updateKanbanSettings(data) {
   viewUpdated.value = true
   if (!defaultParams.value) {
     defaultParams.value = getParams()
   }
   list.value.params = defaultParams.value
-  list.value.params.view.column_field = column_field.name
-  list.value.params.view.columns = ''
-  view.value.column_field = column_field.name
-  view.value.columns = ''
+  if (data.column_field) {
+    list.value.params.view.column_field = data.column_field
+    view.value.column_field = data.column_field
+  }
+  list.value.params.view.columns = data.columns ? data.columns : ''
+  view.value.columns = data.columns ? data.columns : ''
   list.value.reload()
 
   if (!route.query.view) {
@@ -976,7 +978,7 @@ function likeDoc({ name, liked }) {
   })
 }
 
-defineExpose({ applyFilter, applyLikeFilter, likeDoc })
+defineExpose({ applyFilter, applyLikeFilter, likeDoc, updateKanbanSettings })
 
 // Watchers
 watch(
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 92d0fdad..613bcfac 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -28,7 +28,11 @@
       allowedViews: ['list', 'group_by', 'kanban'],
     }"
   />
-  <KanbanView v-if="route.params.viewType == 'kanban'" v-model="deals" />
+  <KanbanView
+    v-if="route.params.viewType == 'kanban'"
+    v-model="deals"
+    @update="(data) => viewControls.updateKanbanSettings(data)"
+  />
   <DealsListView
     ref="dealsListView"
     v-else-if="deals.data && rows.length"
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 6ff13c75..9e3b9e41 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -29,7 +29,11 @@
       allowedViews: ['list', 'group_by', 'kanban'],
     }"
   />
-  <KanbanView v-if="route.params.viewType == 'kanban'" v-model="leads" />
+  <KanbanView
+    v-if="route.params.viewType == 'kanban'"
+    v-model="leads"
+    @update="(data) => viewControls.updateKanbanSettings(data)"
+  />
   <LeadsListView
     ref="leadsListView"
     v-else-if="leads.data && rows.length"
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 11d32034..95388759 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -24,7 +24,11 @@
       allowedViews: ['list', 'kanban'],
     }"
   />
-  <KanbanView v-if="$route.params.viewType == 'kanban'" v-model="tasks" />
+  <KanbanView
+    v-if="$route.params.viewType == 'kanban'"
+    v-model="tasks"
+    @update="(data) => viewControls.updateKanbanSettings(data)"
+  />
   <TasksListView
     ref="tasksListView"
     v-else-if="tasks.data && rows.length"