fix: allow editing grid row fields layout

frontend/src/components/Controls/Grid.vue

@@ -197,21 +197,14 @@
                   <EditIcon class="h-4 w-4 text-ink-gray-7" />
                 </Button>
               </div>
-              <Dialog
+              <GridRowModal
+                v-if="showRowList[index]"
                 v-model="showRowList[index]"
-                :options="{
+                v-model:showGridRowFieldsModal="showGridRowFieldsModal"
-                  title: __('Editing Row {0}', [index + 1]),
+                :index="index"
-                  size: '4xl',
+                :data="row"
-                }"
+                :doctype="doctype"
-              >
+              />
-                <template #body-content>
-                  <FieldLayout
-                    v-if="fields?.length"
-                    :tabs="fields"
-                    :data="row"
-                  />
-                </template>
-              </Dialog>
             </div>
           </template>
         </Draggable>
@@ -236,21 +229,21 @@
       <Button :label="__('Add Row')" @click="addRow" />
     </div>
   </div>
+  <GridRowFieldsModal
+    v-if="showGridRowFieldsModal"
+    v-model="showGridRowFieldsModal"
+    :doctype="doctype"
+  />
 </template>
 
 <script setup lang="ts">
+import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
+import GridRowModal from '@/components/Controls/GridRowModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import FieldLayout from '@/components/FieldLayout.vue'
 import Link from '@/components/Controls/Link.vue'
 import { GridColumn, GridRow } from '@/types/controls'
 import { getRandom, getFormat } from '@/utils'
-import {
+import { FormControl, Checkbox, DateTimePicker, DatePicker } from 'frappe-ui'
-  Dialog,
-  FormControl,
-  Checkbox,
-  DateTimePicker,
-  DatePicker,
-} from 'frappe-ui'
 import Draggable from 'vuedraggable'
 import { ref, reactive, computed, PropType } from 'vue'
 
@@ -258,6 +251,7 @@ const props = defineProps<{
   label?: string
   gridFields: GridColumn[]
   fields: GridColumn[]
+  doctype: string
 }>()
 
 const rows = defineModel({
@@ -267,6 +261,8 @@ const rows = defineModel({
 const showRowList = ref(new Array(rows.value.length).fill(false))
 const selectedRows = reactive(new Set<string>())
 
+const showGridRowFieldsModal = ref(false)
+
 const gridTemplateColumns = computed(() => {
   if (!props.gridFields?.length) return '1fr'
   // for the checkbox & sr no. columns

frontend/src/components/Controls/GridRowFieldsModal.vue

@@ -0,0 +1,125 @@
+<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 Grid Row 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">
+          <Button
+            :label="preview ? __('Hide preview') : __('Show preview')"
+            @click="preview = !preview"
+          />
+          <div class="flex flex-row-reverse gap-2">
+            <Button
+              :loading="loading"
+              :label="__('Save')"
+              variant="solid"
+              @click="saveChanges"
+            />
+            <Button :label="__('Reset')" @click="reload" />
+          </div>
+        </div>
+        <div v-if="tabs?.data">
+          <FieldLayoutEditor
+            v-if="!preview"
+            :tabs="tabs.data"
+            :doctype="_doctype"
+          />
+          <FieldLayout v-else :tabs="tabs.data" :data="{}" :modal="true" />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import FieldLayout from '@/components/FieldLayout.vue'
+import FieldLayoutEditor from '@/components/FieldLayoutEditor.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { capture } from '@/telemetry'
+import { Dialog, Badge, call, createResource } from 'frappe-ui'
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+})
+
+const emit = defineEmits(['reload'])
+
+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: 'Grid Row' }
+}
+
+const tabs = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['GridRowFieldsModal', _doctype.value],
+  params: getParams(),
+  onSuccess(data) {
+    tabs.originalData = JSON.parse(JSON.stringify(data))
+  },
+})
+
+watch(
+  () => tabs?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(tabs?.data) !== JSON.stringify(tabs?.originalData)
+  },
+  { deep: true },
+)
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  nextTick(() => {
+    tabs.params = getParams()
+    tabs.reload()
+  })
+}
+
+function saveChanges() {
+  let _tabs = JSON.parse(JSON.stringify(tabs.data))
+  _tabs.forEach((tab) => {
+    if (!tab.sections) return
+    tab.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: 'Grid Row',
+      layout: JSON.stringify(_tabs),
+    },
+  ).then(() => {
+    loading.value = false
+    show.value = false
+    capture('data_fields_layout_builder', { doctype: _doctype.value })
+    emit('reload')
+  })
+}
+</script>

frontend/src/components/Controls/GridRowModal.vue

@@ -0,0 +1,62 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '4xl' }">
+    <template #body>
+      <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
+        <div class="mb-5 flex items-center justify-between">
+          <div>
+            <h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
+              {{ __('Editing Row {0}', [index + 1]) }}
+            </h3>
+          </div>
+          <div class="flex items-center gap-1">
+            <Button
+              v-if="isManager()"
+              variant="ghost"
+              class="w-7"
+              @click="openGridRowFieldsModal"
+            >
+              <EditIcon class="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" class="w-7" @click="show = false">
+              <FeatherIcon name="x" class="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div>
+          <FieldLayout v-if="tabs.data" :tabs="tabs.data" :data="data" />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import FieldLayout from '@/components/FieldLayout.vue'
+import { usersStore } from '@/stores/users'
+import { createResource } from 'frappe-ui'
+import { nextTick } from 'vue'
+
+const props = defineProps({
+  index: Number,
+  data: Object,
+  doctype: String,
+})
+
+const { isManager } = usersStore()
+
+const show = defineModel()
+const showGridRowFieldsModal = defineModel('showGridRowFieldsModal')
+
+const tabs = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['GridRow', props.doctype],
+  params: { doctype: props.doctype, type: 'Grid Row' },
+  auto: true,
+})
+
+function openGridRowFieldsModal() {
+  showGridRowFieldsModal.value = true
+  nextTick(() => (show.value = false))
+}
+</script>

frontend/src/components/FieldLayout.vue

@@ -81,6 +81,7 @@
                     v-model="data[field.name]"
                     :fields="field.fields"
                     :gridFields="field.gridFields"
+                    :doctype="field.options"
                   />
                   <FormControl
                     v-else-if="field.type === 'Select'"