fix: use getMeta to get child table fields meta

frontend/src/components/Activities/Activities.vue

@@ -365,11 +365,7 @@
       </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"
-        :meta="doc.data.fields_meta"
-      />
+      <DataFields :doctype="doctype" :docname="doc.data.name" />
     </div>
     <div
       v-else

frontend/src/components/Activities/DataFields.vue

@@ -71,10 +71,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  meta: {
-    type: Object,
-    required: true,
-  },
 })
 
 const { isManager } = usersStore()
@@ -109,43 +105,8 @@ 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') {
-          field.fields = props.meta[field.name].fields
-            .filter((field) => field.in_list_view)
-            .map((field) => getFieldObj(field))
-        }
-      })
-    })
-  })
-
-  return _tabs
-}
-
-function getFieldObj(field) {
-  if (field.fieldtype === 'Select' && typeof field.options === 'string') {
-    field.options = field.options.split('\n').map((option) => {
-      return {
-        label: option,
-        value: option,
-      }
-    })
-  }
-  return {
-    label: field.label,
-    name: field.fieldname,
-    type: field.fieldtype,
-    options: field.options,
-    in_list_view: field.in_list_view,
-  }
-}
-
 function saveChanges() {
   data.save.submit()
 }

frontend/src/components/Controls/Grid.vue

@@ -108,6 +108,7 @@
                         field.type,
                       )
                     "
+                    rows="1"
                     type="textarea"
                     variant="outline"
                     v-model="row[field.name]"
@@ -138,7 +139,7 @@
               </div>
               <div class="edit-row w-12">
                 <Button
-                  class="flex w-full items-center justify-center rounded"
+                  class="flex w-full items-center justify-center rounded border-0"
                   variant="outline"
                   @click="showRowList[index] = true"
                 >
@@ -189,18 +190,26 @@ import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'
 import GridRowModal from '@/components/Controls/GridRowModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
-import { GridColumn, GridRow } from '@/types/controls'
+import { GridRow } from '@/types/controls'
 import { getRandom, getFormat } from '@/utils'
-import { FormControl, Checkbox, DateTimePicker, DatePicker } from 'frappe-ui'
+import { getMeta } from '@/stores/meta'
+import {
+  FeatherIcon,
+  FormControl,
+  Checkbox,
+  DateTimePicker,
+  DatePicker,
+} from 'frappe-ui'
 import Draggable from 'vuedraggable'
 import { ref, reactive, computed, PropType } from 'vue'
 
 const props = defineProps<{
   label?: string
-  fields: GridColumn[]
   doctype: string
 }>()
 
+const { getGridSettings, getFields } = getMeta(props.doctype)
+
 const rows = defineModel({
   type: Array as PropType<GridRow[]>,
   default: () => [],
@@ -210,10 +219,36 @@ const selectedRows = reactive(new Set<string>())
 
 const showGridRowFieldsModal = ref(false)
 
+const fields = computed(() => {
+  let gridSettings = getGridSettings()
+  let gridFields = getFields()
+  if (gridSettings.length) {
+    let d = gridSettings.map((gs) =>
+      getFieldObj(gridFields.find((f) => f.fieldname === gs.fieldname)),
+    )
+    return d
+  }
+  return gridFields?.map((f) => getFieldObj(f)) || []
+})
+
+function getFieldObj(field) {
+  return {
+    label: field.label,
+    name: field.fieldname,
+    type: field.fieldtype,
+    options: field.options,
+    in_list_view: field.in_list_view,
+  }
+}
+
 const gridTemplateColumns = computed(() => {
-  if (!props.fields?.length) return '1fr'
+  if (!fields.value?.length) return '1fr'
   // for the checkbox & sr no. columns
-  return props.fields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
+  let gridSettings = getGridSettings()
+  if (gridSettings.length) {
+    return gridSettings.map((gs) => `minmax(0, ${gs.columns || 2}fr)`).join(' ')
+  }
+  return fields.value.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
 })
 
 const allRowsSelected = computed(() => {
@@ -241,7 +276,7 @@ const toggleSelectRow = (row: GridRow) => {
 
 const addRow = () => {
   const newRow = {} as GridRow
-  props.fields?.forEach((field) => {
+  fields.value?.forEach((field) => {
     if (field.type === 'Check') newRow[field.name] = false
     else newRow[field.name] = ''
   })
@@ -260,17 +295,21 @@ const deleteRows = () => {
 
 <style scoped>
 /* For Input fields */
-:deep(.grid-row input:not([type='checkbox'])) {
+:deep(.grid-row input:not([type='checkbox'])),
+:deep(.grid-row textarea) {
   border: none;
   border-radius: 0;
   height: 38px;
 }
 
-:deep(.grid-row input:focus, .grid-row input:hover) {
+:deep(.grid-row input:focus),
+:deep(.grid-row input:hover),
+:deep(.grid-row textarea:focus),
+:deep(.grid-row textarea:hover) {
   box-shadow: none;
 }
 
-:deep(.grid-row input:focus-within) {
+:deep(.grid-row input:focus-within) :deep(.grid-row textarea:focus-within) {
   border: 1px solid var(--outline-gray-2);
 }
 
@@ -293,7 +332,7 @@ const deleteRows = () => {
   border-bottom-right-radius: 7px;
 }
 
-:deep(.grid-row button:focus, .grid-row button:hover) {
+:deep(.grid-row button:focus) :deep(.grid-row button:hover) {
   box-shadow: none;
   background-color: var(--surface-white);
 }

frontend/src/components/Kanban/KanbanSettings.vue

@@ -166,9 +166,6 @@ const fields = createResource({
   params: { doctype: props.doctype, as_array: true },
   cache: ['kanban_fields', props.doctype],
   auto: true,
-  onSuccess: (data) => {
-    data
-  },
 })
 
 const allFields = computed({

frontend/src/stores/meta.js

@@ -1,8 +1,9 @@
 import { createResource } from 'frappe-ui'
 import { formatCurrency, formatNumber } from '@/utils/numberFormat.js'
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 
 const doctypeMeta = reactive({})
+const userSettings = ref({})
 
 export function getMeta(doctype) {
   const meta = createResource({
@@ -18,6 +19,8 @@ export function getMeta(doctype) {
       for (let dtMeta of dtMetas) {
         doctypeMeta[dtMeta.name] = dtMeta
       }
+
+      userSettings.value = JSON.parse(res.user_settings)
     },
   })
 
@@ -52,9 +55,33 @@ export function getMeta(doctype) {
     return formatCurrency(doc[fieldname], '', currency, precision)
   }
 
+  function getGridSettings(dt = null) {
+    dt = dt || doctype
+    if (!userSettings.value['GridView']?.[doctype]) return {}
+    return userSettings.value['GridView'][doctype]
+  }
+
+  function getFields(dt = null) {
+    dt = dt || doctype
+    return doctypeMeta[dt]?.fields.map((f) => {
+      if (f.fieldtype === 'Select' && typeof f.options === 'string') {
+        f.options = f.options.split('\n').map((option) => {
+          return {
+            label: option,
+            value: option,
+          }
+        })
+      }
+      return f
+    })
+  }
+
   return {
     meta,
     doctypeMeta,
+    userSettings,
+    getFields,
+    getGridSettings,
     getFormattedFloat,
     getFormattedPercent,
     getFormattedCurrency,