feat: edit column label & width

frontend/src/components/ViewSettings.vue

@@ -11,9 +11,10 @@
       <div
         class="my-2 rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
       >
+        <div v-if="!edit">
           <Draggable
             :list="columns"
-          @end="onEnd"
+            @end="updateColumnDetails"
             item-key="key"
             class="list-group"
           >
@@ -26,7 +27,11 @@
                   <div>{{ element.label }}</div>
                 </div>
                 <div class="flex cursor-pointer items-center gap-1">
-                <Button variant="ghost" class="!h-5 w-5 !p-1">
+                  <Button
+                    variant="ghost"
+                    class="!h-5 w-5 !p-1"
+                    @click="editColumn(element)"
+                  >
                     <EditIcon class="h-3.5" />
                   </Button>
                   <Button
@@ -61,6 +66,46 @@
             </Autocomplete>
           </div>
         </div>
+        <div v-else>
+          <div
+            class="flex flex-col items-center justify-between gap-2 rounded px-2 py-1.5 text-base text-gray-800"
+          >
+            <div class="flex flex-col items-center gap-3">
+              <FormControl
+                type="text"
+                size="md"
+                label="Label"
+                v-model="column.label"
+                class="w-full"
+                placeholder="Column Label"
+              />
+              <FormControl
+                type="text"
+                size="md"
+                label="Width"
+                class="w-full"
+                v-model="column.width"
+                placeholder="Column Width"
+                description="Width can be in number, pixel or rem (eg. 3, 30px, 10rem)"
+              />
+            </div>
+            <div class="flex w-full gap-2 border-t pt-2">
+              <Button
+                variant="subtle"
+                label="Cancel"
+                class="w-full flex-1"
+                @click="cancelUpdate"
+              />
+              <Button
+                variant="solid"
+                label="Update"
+                class="w-full flex-1"
+                @click="updateColumn(column)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </template>
   </NestedPopover>
 </template>
@@ -72,8 +117,8 @@ 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 { computed, defineModel, ref } from 'vue'
-import { FeatherIcon, call } from 'frappe-ui'
+import { FeatherIcon, FormControl, call } from 'frappe-ui'
 
 const props = defineProps({
   doctype: {
@@ -83,6 +128,13 @@ const props = defineProps({
 })
 
 const list = defineModel()
+const edit = ref(false)
+const column = ref({
+  old: {},
+  label: '',
+  key: '',
+  width: '10rem',
+})
 
 const columns = computed({
   get: () => list.value?.data?.columns,
@@ -108,24 +160,46 @@ const fields = computed(() => {
 })
 
 async function addColumn(c) {
-  let column = {
+  let _column = {
     label: c.label,
     key: c.value,
     width: '10rem',
   }
-  columns.value.push(column)
+  columns.value.push(_column)
   rows.value.push(c.value)
-  await onEnd()
+  await updateColumnDetails()
   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()
+  updateColumnDetails()
 }
 
-async function onEnd() {
+function editColumn(c) {
+  edit.value = true
+  column.value = c
+  column.value.old = { ...c }
+}
+
+function updateColumn(c) {
+  edit.value = false
+  let index = columns.value.findIndex((column) => column.key === c.key)
+  columns.value[index].label = c.label
+  columns.value[index].width = c.width
+  updateColumnDetails()
+}
+
+function cancelUpdate() {
+  edit.value = false
+  column.value = {
+    ...column.value.old,
+    old: {},
+  }
+}
+
+async function updateColumnDetails() {
   await call(
     'crm.fcrm.doctype.crm_list_view_settings.crm_list_view_settings.update',
     {