fix: data fields layout editor

frontend/src/components/DocFields.vue

@@ -11,13 +11,18 @@
         theme="orange"
       />
     </div>
-    <Button
+    <div class="flex gap-1">
-      label="Save"
+      <Button v-if="isManager()" @click="showDataFieldsModal = true">
-      :disabled="!data.isDirty"
+        <EditIcon class="h-4 w-4" />
-      variant="solid"
+      </Button>
-      :loading="data.save.loading"
+      <Button
-      @click="saveChanges"
+        label="Save"
-    />
+        :disabled="!data.isDirty"
+        variant="solid"
+        :loading="data.save.loading"
+        @click="saveChanges"
+      />
+    </div>
   </div>
   <div
     v-if="data.get.loading"
@@ -32,13 +37,22 @@
   >
     <Fields v-if="sections.data" :sections="sections.data" :data="data.doc" />
   </div>
+  <DataFieldsModal
+    v-if="showDataFieldsModal"
+    v-model="showDataFieldsModal"
+    :doctype="doctype"
+  />
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import DataFieldsModal from '@/components/Modals/DataFieldsModal.vue'
 import Fields from '@/components/Fields.vue'
 import { Badge, createResource, createDocumentResource } from 'frappe-ui'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import { createToast } from '@/utils'
+import { usersStore } from '@/stores/users'
+import { ref } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -51,6 +65,10 @@ const props = defineProps({
   },
 })
 
+const { isManager } = usersStore()
+
+const showDataFieldsModal = ref(false)
+
 const data = createDocumentResource({
   doctype: props.doctype,
   name: props.docname,

frontend/src/components/Modals/DataFieldsModal.vue

@@ -0,0 +1,129 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body-title>
+      <h3
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-ink-gray-9"
+      >
+        <div>{{ __('Edit Data Fields Layout') }}</div>
+        <Badge
+          v-if="dirty"
+          :label="__('Not Saved')"
+          variant="subtle"
+          theme="orange"
+        />
+      </h3>
+    </template>
+    <template #body-content>
+      <div class="flex flex-col gap-3">
+        <div class="flex justify-between gap-2">
+          <FormControl
+            type="select"
+            class="w-1/4"
+            v-model="_doctype"
+            :options="['CRM Lead', 'CRM Deal']"
+            @change="reload"
+          />
+          <Switch
+            v-model="preview"
+            :label="preview ? __('Hide preview') : __('Show preview')"
+            size="sm"
+          />
+        </div>
+        <div v-if="sections?.data">
+          <QuickEntryLayoutBuilder
+            v-if="!preview"
+            :sections="sections.data"
+            :doctype="_doctype"
+          />
+          <Fields v-else :sections="sections.data" :data="{}" />
+        </div>
+      </div>
+    </template>
+    <template #actions>
+      <div class="flex flex-row-reverse gap-2">
+        <Button
+          :loading="loading"
+          :label="__('Save')"
+          variant="solid"
+          @click="saveChanges"
+        />
+        <Button :label="__('Reset')" @click="reload" />
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import Fields from '@/components/Fields.vue'
+import QuickEntryLayoutBuilder from '@/components/QuickEntryLayoutBuilder.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { capture } from '@/telemetry'
+import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+})
+
+const show = defineModel()
+const _doctype = ref(props.doctype)
+const loading = ref(false)
+const dirty = ref(false)
+const preview = ref(false)
+
+function getParams() {
+  return { doctype: _doctype.value, type: 'Data Fields' }
+}
+
+const sections = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['dataFieldsSections', _doctype.value],
+  params: getParams(),
+  onSuccess(data) {
+    sections.originalData = JSON.parse(JSON.stringify(data))
+  },
+})
+
+watch(
+  () => sections?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+  },
+  { deep: true },
+)
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  nextTick(() => {
+    sections.params = getParams()
+    sections.reload()
+  })
+}
+
+function saveChanges() {
+  let _sections = JSON.parse(JSON.stringify(sections.data))
+  _sections.forEach((section) => {
+    if (!section.fields) return
+    section.fields = section.fields.map(
+      (field) => field.fieldname || field.name,
+    )
+  })
+  loading.value = true
+  call(
+    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
+    {
+      doctype: _doctype.value,
+      type: 'Data Fields',
+      layout: JSON.stringify(_sections),
+    },
+  ).then(() => {
+    loading.value = false
+    show.value = false
+    capture('data_fields_layout_builder', { doctype: _doctype.value })
+  })
+}
+</script>