Added basic crud for objects

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useFields, useViewState } from '@/composables/useFieldViews'
@@ -9,13 +9,19 @@ import EditView from '@/components/views/EditView.vue'
 
 const route = useRoute()
 const router = useRouter()
-const api = useApi()
+const { api } = useApi()
 const { buildListViewConfig, buildDetailViewConfig, buildEditViewConfig } = useFields()
 
 // Get object API name from route
 const objectApiName = computed(() => route.params.objectName as string)
 const recordId = computed(() => route.params.recordId as string)
-const view = computed(() => route.params.view as 'list' | 'detail' | 'edit' || 'list')
+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)
@@ -33,7 +39,7 @@ const {
   deleteRecord,
   deleteRecords,
   handleSave,
-} = useViewState(`/api/runtime/objects/${objectApiName.value}`)
+} = useViewState(`/runtime/objects/${objectApiName.value}/records`)
 
 // View configs
 const listConfig = computed(() => {
@@ -60,8 +66,8 @@ const fetchObjectDefinition = async () => {
   try {
     loading.value = true
     error.value = null
-    const response = await api.get(`/api/runtime/objects/${objectApiName.value}/definition`)
-    objectDefinition.value = response.data
+    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)
@@ -72,7 +78,7 @@ const fetchObjectDefinition = async () => {
 
 // Navigation handlers
 const handleRowClick = (row: any) => {
-  router.push(`/app/objects/${objectApiName.value}/${row.id}`)
+  router.push(`/app/objects/${objectApiName.value}/${row.id}/detail`)
 }
 
 const handleCreate = () => {
@@ -85,7 +91,8 @@ const handleEdit = (row?: any) => {
 }
 
 const handleBack = () => {
-  router.push(`/app/objects/${objectApiName.value}`)
+  // Navigate to list view explicitly
+  router.push(`/app/objects/${objectApiName.value}/`)
 }
 
 const handleDelete = async (rows: any[]) => {
@@ -94,7 +101,7 @@ const handleDelete = async (rows: any[]) => {
       const ids = rows.map(r => r.id)
       await deleteRecords(ids)
       if (view.value !== 'list') {
-        await router.push(`/app/objects/${objectApiName.value}`)
+        await router.push(`/app/objects/${objectApiName.value}/`)
       }
     } catch (e: any) {
       error.value = e.message || 'Failed to delete records'
@@ -105,20 +112,38 @@ const handleDelete = async (rows: any[]) => {
 const handleSaveRecord = async (data: any) => {
   try {
     await handleSave(data)
-    router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}`)
+    router.push(`/app/objects/${objectApiName.value}/${currentRecord.value?.id || data.id}/detail`)
   } catch (e: any) {
     error.value = e.message || 'Failed to save record'
   }
 }
 
 const handleCancel = () => {
-  if (recordId.value) {
-    router.push(`/app/objects/${objectApiName.value}/${recordId.value}`)
+  if (recordId.value && recordId.value !== 'new') {
+    router.push(`/app/objects/${objectApiName.value}/${recordId.value}/detail`)
   } else {
-    router.push(`/app/objects/${objectApiName.value}`)
+    router.push(`/app/objects/${objectApiName.value}/`)
   }
 }
 
+// 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()
@@ -132,61 +157,71 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="object-view-container">
-    <!-- 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>
+  <NuxtLayout name="default">
+    <div class="object-view-container">
+      <!-- Page Header -->
+      <div v-if="!loading && !error" 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>
-    </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>
+      <!-- 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>
-
-    <!-- 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>