neo/frontend/pages/[objectName]/[[recordId]]/[[view]].vue

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useFields, useViewState } from '@/composables/useFieldViews'
import ListView from '@/components/views/ListView.vue'
import DetailView from '@/components/views/DetailView.vue'
import EditView from '@/components/views/EditView.vue'

const route = useRoute()
const router = useRouter()
const { api } = useApi()
const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()

// Get object API name from route (case-insensitive)
const objectApiName = computed(() => {
  const name = route.params.objectName as string
  // We'll look up the actual case-sensitive name from the backend
  return name
})
const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
  // If recordId is 'new', default to 'edit' view
  if (route.params.recordId === 'new' && !route.params.view) {
    return 'edit'
  }
  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})

// State
const objectDefinition = ref<any>(null)
const loading = ref(true)
const error = ref<string | null>(null)

// Use view state composable
const {
  records,
  currentRecord,
  loading: dataLoading,
  saving,
  fetchRecords,
  fetchRecord,
  deleteRecord,
  deleteRecords,
  handleSave,
} = useViewState(`/runtime/objects/${objectApiName.value}/records`)

// View configs
const listConfig = computed(() => {
  if (!objectDefinition.value) return null
  return buildListViewConfig(objectDefinition.value, {
    searchable: true,
    exportable: true,
    filterable: true,
  })
})

const detailConfig = computed(() => {
  if (!objectDefinition.value) return null
  return buildDetailViewConfig(objectDefinition.value)
})

const editConfig = computed(() => {
  if (!objectDefinition.value) return null
  return buildEditViewConfig(objectDefinition.value)
})

// Fetch object definition
const fetchObjectDefinition = async () => {
  try {
    loading.value = true
    error.value = null
    const response = await api.get(`/setup/objects/${objectApiName.value}`)
    objectDefinition.value = response
  } catch (e: any) {
    error.value = e.message || 'Failed to load object definition'
    console.error('Error fetching object definition:', e)
  } finally {
    loading.value = false
  }
}

// Navigation handlers - use lowercase URLs
const handleRowClick = (row: any) => {
  router.push(`/${objectApiName.value.toLowerCase()}/${row.id}/detail`)
}

const handleCreate = () => {
  router.push(`/${objectApiName.value.toLowerCase()}/new`)
}

const handleEdit = (row?: any) => {
  const id = row?.id || recordId.value
  router.push(`/${objectApiName.value.toLowerCase()}/${id}/edit`)
}

const handleBack = () => {
  // Navigate to list view explicitly
  router.push(`/${objectApiName.value.toLowerCase()}/`)
}

const handleDelete = async (rows: any[]) => {
  if (confirm(`Delete ${rows.length} record(s)? This action cannot be undone.`)) {
    try {
      const ids = rows.map(r => r.id)
      await deleteRecords(ids)
      if (view.value !== 'list') {
        await router.push(`/${objectApiName.value.toLowerCase()}/`)
      }
    } catch (e: any) {
      error.value = e.message || 'Failed to delete records'
    }
  }
}

const handleSaveRecord = async (data: any) => {
  try {
    const savedRecord = await handleSave(data)
    if (savedRecord?.id) {
      router.push(`/${objectApiName.value.toLowerCase()}/${savedRecord.id}/detail`)
    } else {
      // Fallback to list if no ID available
      router.push(`/${objectApiName.value.toLowerCase()}/`)
    }
  } catch (e: any) {
    error.value = e.message || 'Failed to save record'
  }
}

const handleCancel = () => {
  if (recordId.value && recordId.value !== 'new') {
    router.push(`/${objectApiName.value.toLowerCase()}/${recordId.value}/detail`)
  } else {
    router.push(`/${objectApiName.value.toLowerCase()}/`)
  }
}

// Watch for route changes
watch(() => route.params, async (newParams, oldParams) => {
  // Reset current record when navigating to 'new'
  if (newParams.recordId === 'new') {
    currentRecord.value = null
  }
  
  // Fetch record if navigating to existing record
  if (newParams.recordId && newParams.recordId !== 'new' && newParams.recordId !== oldParams.recordId) {
    await fetchRecord(newParams.recordId as string)
  }
  
  // Fetch records if navigating back to list
  if (!newParams.recordId && !newParams.view) {
    await fetchRecords()
  }
}, { deep: true })

// Initialize
onMounted(async () => {
  await fetchObjectDefinition()
  
  if (view.value === 'list') {
    await fetchRecords()
  } else if (recordId.value && recordId.value !== 'new') {
    await fetchRecord(recordId.value)
  }
})
</script>

<template>
  <NuxtLayout name="default">
    <div class="object-view-container">
      
      <!-- Page Header -->
      <div v-if="!loading && !error && view === 'list'" class="mb-6">
        <h1 class="text-3xl font-bold">{{ objectDefinition?.label || objectApiName }}</h1>
        <p v-if="objectDefinition?.description" class="text-muted-foreground mt-2">
          {{ objectDefinition.description }}
        </p>
      </div>

      <!-- Loading State -->
      <div v-if="loading" class="flex items-center justify-center min-h-screen">
        <div class="text-center space-y-4">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
          <p class="text-muted-foreground">Loading {{ objectApiName }}...</p>
        </div>
      </div>

      <!-- Error State -->
      <div v-else-if="error" class="flex items-center justify-center min-h-screen">
        <div class="text-center space-y-4 max-w-md">
          <div class="text-destructive text-5xl">⚠️</div>
          <h2 class="text-2xl font-bold">Error</h2>
          <p class="text-muted-foreground">{{ error }}</p>
          <Button @click="router.back()">Go Back</Button>
        </div>
      </div>

      <!-- List View -->
      <ListView
        v-else-if="view === 'list' && listConfig"
        :config="listConfig"
        :data="records"
        :loading="dataLoading"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
        @edit="handleEdit"
        @delete="handleDelete"
      />

      <!-- Detail View -->
      <DetailView
        v-else-if="view === 'detail' && detailConfig && currentRecord"
        :config="detailConfig"
        :data="currentRecord"
        :loading="dataLoading"
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
      />

      <!-- Edit View -->
      <EditView
        v-else-if="(view === 'edit' || recordId === 'new') && editConfig"
        :config="editConfig"
        :data="currentRecord || {}"
        :loading="dataLoading"
        :saving="saving"
        @save="handleSaveRecord"
        @cancel="handleCancel"
        @back="handleBack"
      />
    </div>
  </NuxtLayout>
</template>

<style scoped>
.object-view-container {
  min-height: 100vh;
  padding: 2rem;
}
</style>