WIP - fixes to spreadsheet view

frontend/components/views/ListView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import type { CellValueChangedEvent, ColDef } from 'ag-grid-community'
+import type { CellValueChangedEvent, ColDef, GridApi, GridReadyEvent } from 'ag-grid-community'
 import { AgGridVue } from 'ag-grid-vue3'
 import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-alpine.css'
@@ -29,6 +29,9 @@ interface Props {
   baseUrl?: string
   totalCount?: number
   searchSummary?: string
+  draftEdits?: Record<string, Record<string, any>>
+  cellErrors?: Record<string, Record<string, string | boolean>>
+  savingDrafts?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,6 +40,9 @@ const props = withDefaults(defineProps<Props>(), {
   selectable: false,
   baseUrl: '/runtime/objects',
   searchSummary: '',
+  draftEdits: () => ({}),
+  cellErrors: () => ({}),
+  savingDrafts: false,
 })
 
 const emit = defineEmits<{
@@ -53,6 +59,8 @@ const emit = defineEmits<{
   'load-more': [page: number, pageSize: number]
   'view-change': [mode: 'list' | 'spreadsheet']
   'cell-edit': [payload: { row: any; field: FieldConfig; newValue: any; oldValue: any }]
+  'save-drafts': []
+  'discard-drafts': []
 }>()
 
 // State
@@ -64,6 +72,7 @@ const sortDirection = ref<'asc' | 'desc'>('asc')
 const currentPage = ref(1)
 const bulkAction = ref('delete')
 const viewMode = ref<'list' | 'spreadsheet'>('list')
+const gridApi = ref<GridApi | null>(null)
 
 // Computed
 const visibleFields = computed(() => 
@@ -102,6 +111,8 @@ const showLoadMore = computed(() => (
   Boolean(props.totalCount) &&
   props.data.length < totalRecords.value
 ))
+const draftRowCount = computed(() => Object.keys(props.draftEdits).length)
+const draftCellCount = computed(() => Object.values(props.draftEdits).reduce((sum, row) => sum + Object.keys(row).length, 0))
 
 const allSelected = computed({
   get: () => props.data.length > 0 && selectedRowIds.value.length === props.data.length,
@@ -224,6 +235,46 @@ const formatFieldValue = (field: FieldConfig, value: any, record?: any) => {
   }
 }
 
+const hasOwnProperty = (target: Record<string, any> | undefined, key: string) =>
+  !!target && Object.prototype.hasOwnProperty.call(target, key)
+
+const isDraftCell = (params: any) => {
+  const rowId = normalizeId(params?.data?.id)
+  const field = String(params?.colDef?.field || '')
+  return hasOwnProperty(props.draftEdits[rowId], field)
+}
+
+const isErrorCell = (params: any) => {
+  const rowId = normalizeId(params?.data?.id)
+  const field = String(params?.colDef?.field || '')
+  return hasOwnProperty(props.cellErrors[rowId], field)
+}
+
+const getCellClasses = (params: any) => {
+  const classes: string[] = []
+  if (isDraftCell(params)) classes.push('cell-draft')
+  if (isErrorCell(params)) classes.push('cell-error')
+  return classes
+}
+
+const getCellStyle = (params: any) => {
+  const isDraft = isDraftCell(params)
+  const isError = isErrorCell(params)
+  if (!isDraft && !isError) return null
+  const style: Record<string, string> = {}
+  if (isDraft) {
+    style.backgroundColor = 'hsl(var(--accent) / 0.45)'
+    style.outline = '2px solid hsl(var(--accent))'
+    style.outlineOffset = '-2px'
+  }
+  if (isError) {
+    style.backgroundColor = 'hsl(var(--destructive) / 0.28)'
+    style.outline = '2px solid hsl(var(--destructive))'
+    style.outlineOffset = '-2px'
+  }
+  return style
+}
+
 const columnDefs = computed<ColDef[]>(() =>
   visibleFields.value.map(field => ({
     field: field.apiName,
@@ -231,6 +282,8 @@ const columnDefs = computed<ColDef[]>(() =>
     sortable: field.sortable !== false,
     editable: isEditableField(field),
     valueFormatter: params => formatFieldValue(field, params.value, params.data),
+    cellClass: params => getCellClasses(params),
+    cellStyle: params => getCellStyle(params),
     cellEditor:
       field.type === FieldType.SELECT
         ? 'agSelectCellEditor'
@@ -268,6 +321,10 @@ const handleCellValueChanged = (event: CellValueChangedEvent) => {
   })
 }
 
+const handleGridReady = (event: GridReadyEvent) => {
+  gridApi.value = event.api
+}
+
 const goToPage = (page: number) => {
   const nextPage = Math.min(Math.max(page, 1), availablePages.value)
   if (nextPage !== currentPage.value) {
@@ -309,6 +366,16 @@ watch(
     emit('view-change', mode)
   }
 )
+
+watch(
+  () => [props.draftEdits, props.cellErrors],
+  () => {
+    if (gridApi.value) {
+      gridApi.value.refreshCells({ force: true })
+    }
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -341,6 +408,26 @@ watch(
             <SelectItem value="spreadsheet">Spreadsheet view</SelectItem>
           </SelectContent>
         </Select>
+        <template v-if="viewMode === 'spreadsheet'">
+          <Badge v-if="draftRowCount > 0" variant="secondary" class="px-3 py-1">
+            {{ draftCellCount }} change{{ draftCellCount === 1 ? '' : 's' }}
+          </Badge>
+          <Button
+            variant="outline"
+            size="sm"
+            :disabled="draftRowCount === 0 || savingDrafts"
+            @click="emit('discard-drafts')"
+          >
+            Discard changes
+          </Button>
+          <Button
+            size="sm"
+            :disabled="draftRowCount === 0 || savingDrafts"
+            @click="emit('save-drafts')"
+          >
+            Save changes ({{ draftRowCount }})
+          </Button>
+        </template>
         <!-- Bulk Actions -->
         <template v-if="selectedRowIds.length > 0">
           <Badge variant="secondary" class="px-3 py-1">
@@ -473,6 +560,7 @@ watch(
           suppress-row-click-selection
           single-click-edit
           @cell-value-changed="handleCellValueChanged"
+          @grid-ready="handleGridReady"
         />
       </div>
     </div>
@@ -512,4 +600,5 @@ watch(
 .list-view :deep(input) {
   background-color: hsl(var(--background));
 }
+
 </style>