fix: render default colors also updated styles

crm/api/doc.py

@@ -302,11 +302,11 @@ def get_data(
 			if field_meta.fieldtype == "Link":
 				columns = frappe.get_all(
 					field_meta.options,
-					pluck="name",
+					fields=["name"],
 					order_by="modified asc",
 				)
 			elif field_meta.fieldtype == "Select":
-				columns = [option for option in field_meta.options.split("\n")]
+				columns = [{"name": option} for option in field_meta.options.split("\n")]
 
 
 		if not rows:
@@ -316,8 +316,8 @@ def get_data(
 			rows = _list.default_kanban_data().get("rows")
 
 		for column in columns:
-			column_filters = { column_field: column }
+			column_filters = { column_field: column.get('name') }
-			if column_field in filters and filters.get(column_field) != column:
+			if column_field in filters and filters.get(column_field) != column.name:
 				column_data = []
 			else:
 				column_filters.update(filters.copy())

crm/fcrm/doctype/crm_view_settings/crm_view_settings.py

@@ -113,11 +113,11 @@ def sync_default_columns(view):
 		if field_meta.fieldtype == "Link":
 			columns = frappe.get_all(
 				field_meta.options,
-				pluck="name",
+				fields=["name"],
 				order_by="modified asc",
 			)
 		elif field_meta.fieldtype == "Select":
-			columns = [option for option in field_meta.options.split("\n")]
+			columns = [{"name": option} for option in field_meta.options.split("\n")]
 	elif hasattr(list, "default_list_data"):
 		columns = list.default_list_data().get("columns")
 

frontend/src/components/Kanban/KanbanView.vue

@@ -1,22 +1,35 @@
 <template>
   <Draggable
-    :list="kanban?.data?.data"
+    v-if="columns"
+    :list="columns"
     item-key="column"
-    class="flex sm:mx-5 mx-3 pb-3 overflow-x-auto gap-2"
+    class="flex sm:mx-2.5 mx-2 pb-3.5 overflow-x-auto"
   >
     <template #item="{ element: column }">
-      <div class="flex flex-col gap-2 min-w-[268px]">
+      <div
-        <div>{{ column.column }}</div>
+        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>{{ column.column.name }}</div>
+          </div>
+          <div>
+            <Button icon="plus" variant="ghost" />
+          </div>
+        </div>
         <Draggable
           :list="column.data"
           group="fields"
           item-key="name"
-          class="flex flex-col gap-2 overflow-y-auto h-full"
+          class="flex flex-col gap-3.5 overflow-y-auto h-full"
         >
           <template #item="{ element: fields }">
-            <div class="p-3 rounded border bg-white">
+            <div
-              <div v-for="value in fields">
+              class="pt-3 px-3.5 pb-2.5 rounded-lg border bg-white text-base flex flex-col gap-2"
-                <div>{{ value }}</div>
+            >
+              <div v-for="value in fields" :key="value">
+                <div class="truncate">{{ value }}</div>
               </div>
             </div>
           </template>
@@ -26,7 +39,49 @@
   </Draggable>
 </template>
 <script setup>
+import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import Draggable from 'vuedraggable'
+import { computed } from 'vue'
 
 const kanban = defineModel()
+
+const columns = computed(() => {
+  if (!kanban.value?.data?.data || kanban.value.data.view_type != 'kanban')
+    return []
+  let _columns = kanban.value.data.data
+
+  let has_color = _columns.some((column) => column.column?.color)
+  if (!has_color) {
+    _columns.forEach((column, i) => {
+      column.column['color'] = colors[i % colors.length]
+    })
+  }
+  return _columns
+})
+
+function colorClasses(color) {
+  let textColor = `!text-${color}-600`
+  if (color == 'black') {
+    textColor = '!text-gray-900'
+  } else if (['gray', 'green'].includes(color)) {
+    textColor = `!text-${color}-700`
+  }
+  return [textColor]
+}
+
+const colors = [
+  'gray',
+  'blue',
+  'green',
+  'red',
+  'pink',
+  'orange',
+  'amber',
+  'yellow',
+  'cyan',
+  'teal',
+  'violet',
+  'purple',
+  'black',
+]
 </script>