fix: add/delete column in kanban

crm/api/doc.py

@@ -332,7 +332,8 @@ def get_data(
 
 		for kc in kanban_columns:
 			column_filters = { column_field: kc.get('name') }
-			if column_field in filters and filters.get(column_field) != kc.name:
+			order = kc.get("order")
+			if column_field in filters and filters.get(column_field) != kc.name or kc.get('delete'):
 				column_data = []
 			else:
 				column_filters.update(filters.copy())
@@ -341,7 +342,6 @@ def get_data(
 				if kc.get("page_length"):
 					page_length = kc.get("page_length")
 
-				order = kc.get("order")
 				if order:
 					column_data = get_records_based_on_order(doctype, rows, column_filters, page_length, order)
 				else:

frontend/src/components/Kanban/KanbanView.vue

@@ -1,14 +1,15 @@
 <template>
+  <div class="flex overflow-x-auto">
     <Draggable
       v-if="columns"
       :list="columns"
       item-key="column"
       @end="updateColumn"
-    class="flex sm:mx-2.5 mx-2 pb-3.5 overflow-x-auto"
+      class="flex sm:mx-2.5 mx-2 pb-3.5"
     >
       <template #item="{ element: column }">
         <div
-        v-if="!column.delete"
+          v-if="!column.column.delete"
           class="flex flex-col gap-2.5 min-w-72 w-72 hover:bg-gray-100 rounded-lg p-2.5"
         >
           <div class="flex gap-2 items-center group justify-between">
@@ -94,7 +95,9 @@
                       <div v-if="fields[titleField]">
                         {{ fields[titleField] }}
                       </div>
-                    <div class="text-gray-500" v-else>{{ __('No Title') }}</div>
+                      <div class="text-gray-500" v-else>
+                        {{ __('No Title') }}
+                      </div>
                     </div>
                   </slot>
                   <div class="border-b h-px my-2.5" />
@@ -138,8 +141,29 @@
         </div>
       </template>
     </Draggable>
+    <div v-if="deletedColumns.length" class="shrink-0 min-w-64">
+      <Autocomplete
+        value=""
+        :options="deletedColumns"
+        @change="(e) => addColumn(e)"
+      >
+        <template #target="{ togglePopover }">
+          <Button
+            class="w-full mt-2.5 mb-1 mr-5"
+            @click="togglePopover()"
+            :label="__('Add Column')"
+          >
+            <template #prefix>
+              <FeatherIcon name="plus" class="h-4" />
+            </template>
+          </Button>
+        </template>
+      </Autocomplete>
+    </div>
+  </div>
 </template>
 <script setup>
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import Draggable from 'vuedraggable'
@@ -179,6 +203,14 @@ const columns = computed(() => {
   return _columns
 })
 
+const deletedColumns = computed(() => {
+  return columns.value
+    .filter((col) => col.column['delete'])
+    .map((col) => {
+      return { label: col.column.name, value: col.column.name }
+    })
+})
+
 function actions(column) {
   return [
     {
@@ -189,7 +221,7 @@ function actions(column) {
           label: __('Delete'),
           icon: 'trash-2',
           onClick: () => {
-            column['delete'] = true
+            column.column['delete'] = true
             updateColumn()
           },
         },
@@ -198,6 +230,12 @@ function actions(column) {
   ]
 }
 
+function addColumn(e) {
+  let column = columns.value.find((col) => col.column.name == e.value)
+  column.column['delete'] = false
+  updateColumn()
+}
+
 function updateColumn(d) {
   let toColumn = d?.to?.dataset.column
   let fromColumn = d?.from?.dataset.column
@@ -205,7 +243,6 @@ function updateColumn(d) {
 
   let _columns = []
   columns.value.forEach((col) => {
-    if (col.delete) return
     col.column['order'] = col.data.map((d) => d.name)
     if (col.column.page_length) {
       delete col.column.page_length