WIP - added spredsheet view using ag-grid

frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue

@@ -42,6 +42,7 @@ const {
   fetchRecord,
   deleteRecord,
   deleteRecords,
+  updateRecord,
   handleSave,
 } = useViewState(`/runtime/objects/${objectApiName.value}/records`)
 
@@ -212,6 +213,38 @@ const handleLoadMore = async (page: number, pageSize: number) => {
   await loadListRecords(page, { append: true, pageSize })
 }
 
+const loadAllListRecords = async () => {
+  if (!records.value.length) {
+    await loadListRecords(1)
+  }
+  const resolvedTotal = totalCount.value ?? records.value.length
+  if (resolvedTotal > records.value.length) {
+    await loadListRecords(1, { append: false, pageSize: resolvedTotal })
+  }
+}
+
+const handleViewChange = async (mode: 'list' | 'spreadsheet') => {
+  if (mode === 'spreadsheet') {
+    await loadAllListRecords()
+  }
+}
+
+const handleCellEdit = async (payload: { row: any; field: any; newValue: any; oldValue: any }) => {
+  if (!payload?.row?.id || payload.newValue === payload.oldValue) return
+  try {
+    await updateRecord(payload.row.id, {
+      ...payload.row,
+      [payload.field.apiName]: payload.newValue,
+    })
+  } catch (e: any) {
+    error.value = e.message || 'Failed to update record'
+    const record = records.value.find(item => item.id === payload.row.id)
+    if (record) {
+      record[payload.field.apiName] = payload.oldValue
+    }
+  }
+}
+
 // Watch for route changes
 watch(() => route.params, async (newParams, oldParams) => {
   // Reset current record when navigating to 'new'
@@ -285,6 +318,8 @@ onMounted(async () => {
         @delete="handleDelete"
         @page-change="handlePageChange"
         @load-more="handleLoadMore"
+        @view-change="handleViewChange"
+        @cell-edit="handleCellEdit"
       />
 
       <!-- Detail View -->