From beedb11cd140086cb0bb7870ed088154559714c4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 Jan 2025 02:14:55 +0530
Subject: [PATCH] fix: added name for section & column

---
 frontend/src/components/Settings/SettingsPage.vue | 11 ++++++++---
 frontend/src/components/SidePanelLayoutEditor.vue |  4 +++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Settings/SettingsPage.vue b/frontend/src/components/Settings/SettingsPage.vue
index 87af6480..8e13ed7c 100644
--- a/frontend/src/components/Settings/SettingsPage.vue
+++ b/frontend/src/components/Settings/SettingsPage.vue
@@ -42,7 +42,7 @@ import {
   Badge,
   ErrorMessage,
 } from 'frappe-ui'
-import { evaluateDependsOnValue, createToast } from '@/utils'
+import { evaluateDependsOnValue, createToast, getRandom } from '@/utils'
 import { ref, computed } from 'vue'
 
 const props = defineProps({
@@ -121,13 +121,18 @@ const tabs = computed(() => {
       _tabs.push({
         label: field.label,
         name: field.value,
-        sections: [{ columns: [{ fields: [] }] }],
+        sections: [
+          {
+            name: 'section_' + getRandom(),
+            columns: [{ name: 'column_' + getRandom(), fields: [] }],
+          },
+        ],
       })
     } else if (field.type === 'Section Break') {
       _sections.push({
         label: field.label,
         name: field.value,
-        columns: [{ fields: [] }],
+        columns: [{ name: 'column_' + getRandom(), fields: [] }],
       })
     } else if (field.type === 'Column Break') {
       _sections[_sections.length - 1].columns.push({
diff --git a/frontend/src/components/SidePanelLayoutEditor.vue b/frontend/src/components/SidePanelLayoutEditor.vue
index d852b243..1a44907d 100644
--- a/frontend/src/components/SidePanelLayoutEditor.vue
+++ b/frontend/src/components/SidePanelLayoutEditor.vue
@@ -130,7 +130,8 @@
           sections.push({
             label: __('New Section'),
             opened: true,
-            columns: [{ fields: [] }],
+            name: 'section_' + getRandom(),
+            columns: [{ name: 'column_' + getRandom(), fields: [] }],
           })
         "
       >
@@ -145,6 +146,7 @@
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
+import { getRandom } from '@/utils'
 import Draggable from 'vuedraggable'
 import { Input, createResource } from 'frappe-ui'
 import { computed, watch } from 'vue'