From 7b86773b7343bca8b755d324b300e499b42bf9bf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 17:21:05 +0530
Subject: [PATCH] fix: show grid fields, update onchange of grid cell

---
 .../src/components/Activities/Activities.vue  |  6 ++-
 .../src/components/Activities/DataFields.vue  | 39 +++++++++++++++++++
 frontend/src/components/FieldLayout.vue       |  9 ++++-
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index baf28de0..169ef24d 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -365,7 +365,11 @@
       </div>
     </div>
     <div v-else-if="title == 'Data'" class="h-full flex flex-col px-3 sm:px-10">
-      <DataFields :doctype="doctype" :docname="doc.data.name" />
+      <DataFields
+        :doctype="doctype"
+        :docname="doc.data.name"
+        :meta="doc.data.fields_meta"
+      />
     </div>
     <div
       v-else
diff --git a/frontend/src/components/Activities/DataFields.vue b/frontend/src/components/Activities/DataFields.vue
index cee88cf0..6edc989c 100644
--- a/frontend/src/components/Activities/DataFields.vue
+++ b/frontend/src/components/Activities/DataFields.vue
@@ -71,6 +71,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  meta: {
+    type: Object,
+    required: true,
+  },
 })
 
 const { isManager } = usersStore()
@@ -105,8 +109,43 @@ const tabs = createResource({
   cache: ['DataFields', props.doctype],
   params: { doctype: props.doctype, type: 'Data Fields' },
   auto: true,
+  transform: (_tabs) => parseTabs(_tabs),
 })
 
+function parseTabs(_tabs) {
+  _tabs.forEach((tab) => {
+    tab.sections.forEach((section) => {
+      section.fields.forEach((field) => {
+        if (field.type === 'Table') {
+          let name = props.meta[field.name].df.fieldname
+          let fields = props.meta[field.name].fields
+          field.fields = fields.map((field) => {
+            return {
+              ...getFieldObj(field),
+              onChange: (value, index) => {
+                data.doc[name][index][field.fieldname] = value
+              },
+            }
+          })
+          field.gridFields = field.fields.filter((field) => field.in_list_view)
+        }
+      })
+    })
+  })
+
+  return _tabs
+}
+
+function getFieldObj(field) {
+  return {
+    label: field.label,
+    fieldname: field.fieldname,
+    fieldtype: field.fieldtype,
+    options: field.options,
+    in_list_view: field.in_list_view,
+  }
+}
+
 function saveChanges() {
   data.save.submit()
 }
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 0585e42c..0b342126 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -76,6 +76,12 @@
                     v-model="data[field.name]"
                     :disabled="true"
                   />
+                  <Grid
+                    v-else-if="field.type === 'Table'"
+                    v-model="data[field.name]"
+                    :fields="field.fields"
+                    :gridFields="field.gridFields"
+                  />
                   <FormControl
                     v-else-if="field.type === 'Select'"
                     type="select"
@@ -237,7 +243,8 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
-import { getMeta } from '../stores/meta'
+import Grid from '@/components/Controls/Grid.vue'
+import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'