feat: add/remove column in list view

crm/api/doc.py

@@ -69,6 +69,9 @@ def get_list_data(doctype: str, filters: dict, order_by: str):
 		if column.get("key") not in rows:
 			rows.append(column.get("key"))
 
+	if "name" not in rows:
+		rows.append("name")
+
 	data = frappe.get_all(
 		doctype,
 		fields=rows,
@@ -77,7 +80,17 @@ def get_list_data(doctype: str, filters: dict, order_by: str):
 		page_length=20,
 	) or []
 
-	return {'data': data, 'columns': columns, 'rows': rows}
+	not_allowed_fieldtypes = [
+		"Section Break",
+		"Column Break",
+		"Tab Break",
+	]
+
+	fields = frappe.get_meta(doctype).fields
+	fields = [field for field in fields if field.fieldtype not in not_allowed_fieldtypes]
+	fields = [{"label": field.label, "value": field.fieldname} for field in fields if field.label and field.fieldname]
+
+	return {'data': data, 'columns': columns, 'rows': rows, 'fields': fields}
 
 
 @frappe.whitelist()

frontend/src/components/ViewSettings.vue

@@ -19,23 +19,47 @@
         >
           <template #item="{ element }">
             <div
-              class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-50"
+              class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
             >
               <div class="flex items-center gap-2">
-                <DragVerticalIcon class="h-3.5" />
+                <DragIcon class="h-3.5" />
                 <div>{{ element.label }}</div>
               </div>
               <div class="flex cursor-pointer items-center gap-1">
                 <Button variant="ghost" class="!h-5 w-5 !p-1">
                   <EditIcon class="h-3.5" />
                 </Button>
-                <Button variant="ghost" class="!h-5 w-5 !p-1">
+                <Button
+                  variant="ghost"
+                  class="!h-5 w-5 !p-1"
+                  @click="removeColumn(element)"
+                >
                   <FeatherIcon name="x" class="h-3.5" />
                 </Button>
               </div>
             </div>
           </template>
         </Draggable>
+        <div class="mt-1.5 border-t pt-1.5">
+          <Autocomplete
+            value=""
+            :options="fields"
+            @change="(e) => addColumn(e)"
+          >
+            <template #target="{ togglePopover }">
+              <Button
+                class="w-full !justify-start !text-gray-600"
+                variant="ghost"
+                @click="togglePopover()"
+                label="Add Column"
+              >
+                <template #prefix>
+                  <FeatherIcon name="plus" class="h-4" />
+                </template>
+              </Button>
+            </template>
+          </Autocomplete>
+        </div>
       </div>
     </template>
   </NestedPopover>
@@ -44,8 +68,9 @@
 <script setup>
 import SettingsIcon from '@/components/Icons/SettingsIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
+import DragIcon from '@/components/Icons/DragIcon.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import Draggable from 'vuedraggable'
 import { computed, defineModel } from 'vue'
 import { FeatherIcon, call } from 'frappe-ui'
@@ -59,12 +84,49 @@ const props = defineProps({
 
 const list = defineModel()
 
-const columns = computed(() => list.value?.data?.columns)
+const columns = computed({
+  get: () => list.value?.data?.columns,
+  set: (val) => {
+    list.value.data.columns = val
+  },
+})
 
-const rows = computed(() => list.value?.data?.rows)
+const rows = computed({
+  get: () => list.value?.data?.rows,
+  set: (val) => {
+    list.value.data.rows = val
+  },
+})
 
-function onEnd() {
+const fields = computed(() => {
-  call(
+  let allFields = list.value?.data?.fields
+  if (!allFields) return []
+
+  return allFields.filter((field) => {
+    return !columns.value.find((column) => column.key === field.value)
+  })
+})
+
+async function addColumn(c) {
+  let column = {
+    label: c.label,
+    key: c.value,
+    width: '10rem',
+  }
+  columns.value.push(column)
+  rows.value.push(c.value)
+  await onEnd()
+  list.value.reload()
+}
+
+function removeColumn(c) {
+  columns.value = columns.value.filter((column) => column.key !== c.key)
+  rows.value = rows.value.filter((row) => row !== c.key)
+  onEnd()
+}
+
+async function onEnd() {
+  await call(
     'crm.fcrm.doctype.crm_list_view_settings.crm_list_view_settings.update',
     {
       doctype: props.doctype,