fix: save changes using layout builder

crm/api/doc.py

@@ -194,6 +194,23 @@ def get_fields_layout(doctype: str, type: str):
 
 	return sections or []
 
+
+@frappe.whitelist()
+def save_fields_layout(doctype: str, type: str, layout: str):
+	if frappe.db.exists("CRM Fields Layout", {"dt": doctype, "type": type}):
+		doc = frappe.get_doc("CRM Fields Layout", {"dt": doctype, "type": type})
+	else:
+		doc = frappe.new_doc("CRM Fields Layout")
+
+	doc.update({
+		"dt": doctype,
+		"type": type,
+		"layout": layout,
+	})
+	doc.save(ignore_permissions=True)
+
+	return doc.layout
+
 def get_fields_meta(DocField, doctype, allowed_fieldtypes, restricted_fields):
 	parent = "parent" if DocField._table_name == "tabDocField" else "dt"
 	return (

frontend/src/components/Settings/FieldsLayout.vue

@@ -1,12 +1,32 @@
 <template>
   <div ref="parentRef" class="flex h-full">
-    <div class="flex-1 p-8">
-      <FormControl
-        type="select"
-        v-model="doctype"
-        :label="__('DocType')"
-        :options="['CRM Lead', 'CRM Deal']"
-      />
+    <div class="flex-1 flex flex-col justify-between gap-2 p-8">
+      <div class="flex flex-col gap-2">
+        <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
+          <div>{{ __('Sidebar Fields Layout') }}</div>
+          <Badge
+            v-if="dirty"
+            :label="__('Not Saved')"
+            variant="subtle"
+            theme="orange"
+          />
+        </h2>
+        <FormControl
+          type="select"
+          v-model="doctype"
+          :label="__('DocType')"
+          :options="['CRM Lead', 'CRM Deal']"
+        />
+      </div>
+      <div class="flex flex-row-reverse gap-2">
+        <Button
+          :loading="loading"
+          :label="__('Save')"
+          variant="solid"
+          @click="saveChanges"
+        />
+        <Button :label="__('Reset')" @click="sections.reload" />
+      </div>
     </div>
     <Resizer
       class="flex flex-col justify-between border-l"
@@ -18,18 +38,7 @@
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
         <div class="flex flex-col overflow-y-auto">
-          <div
-            v-for="(section, i) in sections.data"
-            :key="section.label"
-            class="flex flex-col p-3"
-            :class="{ 'border-b': i !== sections.data - 1 }"
-          >
-            <Section :is-opened="section.opened" :label="section.label">
-              <div v-for="field in section.fields" class="p-3">
-                {{ field.label }}
-              </div>
-            </Section>
-          </div>
+          <SidebarLayoutBuilder :sections="sections.data" />
         </div>
       </div>
     </Resizer>
@@ -37,19 +46,46 @@
 </template>
 <script setup>
 import Resizer from '@/components/Resizer.vue'
-import Section from '@/components/Section.vue'
-import { createResource } from 'frappe-ui'
-import { ref, watch } from 'vue'
+import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
+import { Badge, call, createResource } from 'frappe-ui'
+import { ref, computed, watch } from 'vue'
 
 const parentRef = ref(null)
 const doctype = ref('CRM Lead')
 
+const oldSections = ref([])
+
 const sections = createResource({
   url: 'crm.api.doc.get_fields_layout',
-  cache: ['sidebar-sections', doctype],
+  cache: ['sidebar-sections', doctype.value],
   params: { doctype: doctype.value, type: 'Side Panel' },
   auto: true,
+  onSuccess(data) {
+    oldSections.value = JSON.parse(JSON.stringify(data))
+  },
 })
+const loading = ref(false)
+
+const dirty = computed(() => {
+  if (!sections.data) return false
+  return JSON.stringify(sections.data) !== JSON.stringify(oldSections.value)
+})
+
+function saveChanges() {
+  let _sections = JSON.parse(JSON.stringify(sections.data))
+  _sections.forEach((section) => {
+    section.fields = section.fields.map((field) => field.name)
+  })
+  loading.value = true
+  call('crm.api.doc.save_fields_layout', {
+    doctype: doctype.value,
+    type: 'Side Panel',
+    layout: JSON.stringify(_sections),
+  }).then(() => {
+    loading.value = false
+    sections.reload()
+  })
+}
 
 watch(doctype, (val) => sections.fetch({ doctype: val, type: 'Side Panel' }), {
   immediate: true,