From f4067c56b4753de2125dd1bfed4c94f66c317201 Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Mon, 22 Dec 2025 09:36:39 +0100
Subject: [PATCH] Added basic crud for objects

---
 frontend/components/views/EditView.vue        |  12 +-
 frontend/components/views/ListView.vue        |   8 +
 frontend/composables/useApi.ts                |  56 +++++-
 frontend/composables/useFieldViews.ts         |  42 +++--
 frontend/pages/app/index.vue                  |  16 ++
 .../[objectName]/[[recordId]]/[[view]].vue    | 163 +++++++++++-------
 frontend/pages/app/objects/index.vue          |  43 +++++
 7 files changed, 255 insertions(+), 85 deletions(-)
 create mode 100644 frontend/pages/app/index.vue
 create mode 100644 frontend/pages/app/objects/index.vue

diff --git a/frontend/components/views/EditView.vue b/frontend/components/views/EditView.vue
index bcbafc2..a4854dc 100644
--- a/frontend/components/views/EditView.vue
+++ b/frontend/components/views/EditView.vue
@@ -47,18 +47,22 @@ const sections = computed<FieldSection[]>(() => {
   }
   
   // Default section with all visible fields
+  const visibleFields = props.config.fields
+    .filter(f => f.showOnEdit !== false)
+    .map(f => f.apiName)
+  
   return [{
     title: 'Details',
-    fields: props.config.fields
-      .filter(f => f.showOnEdit !== false)
-      .map(f => f.apiName),
+    fields: visibleFields,
   }]
 })
 
 const getFieldsBySection = (section: FieldSection) => {
-  return section.fields
+  const fields = section.fields
     .map(apiName => props.config.fields.find(f => f.apiName === apiName))
     .filter(Boolean)
+  
+  return fields
 }
 
 const validateField = (field: any): string | null => {
diff --git a/frontend/components/views/ListView.vue b/frontend/components/views/ListView.vue
index b5dcf48..cff698e 100644
--- a/frontend/components/views/ListView.vue
+++ b/frontend/components/views/ListView.vue
@@ -231,4 +231,12 @@ const handleAction = (actionId: string) => {
 .list-view {
   width: 100%;
 }
+
+.list-view :deep(.border) {
+  background-color: hsl(var(--card));
+}
+
+.list-view :deep(input) {
+  background-color: hsl(var(--background));
+}
 </style>
diff --git a/frontend/composables/useApi.ts b/frontend/composables/useApi.ts
index 1e42a0a..2d81686 100644
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -63,15 +63,63 @@ export const useApi = () => {
     }
 
     if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
+      // Try to get error details from response
+      const text = await response.text()
+      console.error('API Error Response:', {
+        status: response.status,
+        statusText: response.statusText,
+        body: text
+      })
+      
+      let errorMessage = `HTTP error! status: ${response.status}`
+      if (text) {
+        try {
+          const errorData = JSON.parse(text)
+          errorMessage = errorData.message || errorData.error || errorMessage
+        } catch (e) {
+          // If not JSON, use the text directly if it's not too long
+          if (text.length < 200) {
+            errorMessage = text
+          }
+        }
+      }
+      
+      throw new Error(errorMessage)
     }
 
-    return response.json()
+    // Handle empty responses
+    const text = await response.text()
+    if (!text) {
+      return {}
+    }
+    
+    try {
+      return JSON.parse(text)
+    } catch (e) {
+      console.error('Failed to parse JSON response:', text)
+      throw new Error('Invalid JSON response from server')
+    }
   }
 
   const api = {
-    async get(path: string) {
-      const response = await fetch(`${getApiBaseUrl()}/api${path}`, {
+    async get(path: string, options?: { params?: Record<string, any> }) {
+      let url = `${getApiBaseUrl()}/api${path}`
+      
+      // Add query parameters if provided
+      if (options?.params) {
+        const searchParams = new URLSearchParams()
+        Object.entries(options.params).forEach(([key, value]) => {
+          if (value !== undefined && value !== null) {
+            searchParams.append(key, String(value))
+          }
+        })
+        const queryString = searchParams.toString()
+        if (queryString) {
+          url += `?${queryString}`
+        }
+      }
+      
+      const response = await fetch(url, {
         headers: getHeaders(),
       })
       return handleResponse(response)
diff --git a/frontend/composables/useFieldViews.ts b/frontend/composables/useFieldViews.ts
index c21dd48..a31039c 100644
--- a/frontend/composables/useFieldViews.ts
+++ b/frontend/composables/useFieldViews.ts
@@ -10,6 +10,12 @@ export const useFields = () => {
    * Convert backend field definition to frontend FieldConfig
    */
   const mapFieldDefinitionToConfig = (fieldDef: any): FieldConfig => {
+    // Convert isSystem to boolean (handle 0/1 from database)
+    const isSystemField = Boolean(fieldDef.isSystem)
+    
+    // Only truly system fields (id, createdAt, updatedAt, etc.) should be hidden on edit
+    const isAutoGeneratedField = ['id', 'createdAt', 'updatedAt', 'createdBy', 'updatedBy'].includes(fieldDef.apiName)
+    
     return {
       id: fieldDef.id,
       apiName: fieldDef.apiName,
@@ -23,13 +29,13 @@ export const useFields = () => {
       
       // Validation
       isRequired: fieldDef.isRequired,
-      isReadOnly: fieldDef.isSystem || fieldDef.uiMetadata?.isReadOnly,
+      isReadOnly: isAutoGeneratedField || fieldDef.uiMetadata?.isReadOnly,
       validationRules: fieldDef.uiMetadata?.validationRules || [],
       
-      // View options
+      // View options - only hide auto-generated fields by default
       showOnList: fieldDef.uiMetadata?.showOnList ?? true,
       showOnDetail: fieldDef.uiMetadata?.showOnDetail ?? true,
-      showOnEdit: fieldDef.uiMetadata?.showOnEdit ?? !fieldDef.isSystem,
+      showOnEdit: fieldDef.uiMetadata?.showOnEdit ?? !isAutoGeneratedField,
       sortable: fieldDef.uiMetadata?.sortable ?? true,
       
       // Field type specific
@@ -176,14 +182,15 @@ export const useViewState = <T extends { id?: string }>(
   const saving = ref(false)
   const error = ref<string | null>(null)
 
-  const api = useApi()
+  const { api } = useApi()
 
   const fetchRecords = async (params?: Record<string, any>) => {
     loading.value = true
     error.value = null
     try {
       const response = await api.get(apiEndpoint, { params })
-      records.value = response.data
+      // Handle response - data might be directly in response or in response.data
+      records.value = response.data || response || []
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to fetch records:', e)
@@ -197,7 +204,8 @@ export const useViewState = <T extends { id?: string }>(
     error.value = null
     try {
       const response = await api.get(`${apiEndpoint}/${id}`)
-      currentRecord.value = response.data
+      // Handle response - data might be directly in response or in response.data
+      currentRecord.value = response.data || response
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to fetch record:', e)
@@ -211,9 +219,12 @@ export const useViewState = <T extends { id?: string }>(
     error.value = null
     try {
       const response = await api.post(apiEndpoint, data)
-      records.value.push(response.data)
-      currentRecord.value = response.data
-      return response.data
+      
+      // Handle response - it might be the data directly or wrapped in { data: ... }
+      const recordData = response.data || response
+      records.value.push(recordData)
+      currentRecord.value = recordData
+      return recordData
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to create record:', e)
@@ -227,13 +238,18 @@ export const useViewState = <T extends { id?: string }>(
     saving.value = true
     error.value = null
     try {
-      const response = await api.put(`${apiEndpoint}/${id}`, data)
+      // Remove auto-generated fields that shouldn't be updated
+      const { id: _id, createdAt, created_at, updatedAt, updated_at, createdBy, updatedBy, ...updateData } = data as any
+      
+      const response = await api.put(`${apiEndpoint}/${id}`, updateData)
+      // Handle response - data might be directly in response or in response.data
+      const recordData = response.data || response
       const idx = records.value.findIndex(r => r.id === id)
       if (idx !== -1) {
-        records.value[idx] = response.data
+        records.value[idx] = recordData
       }
-      currentRecord.value = response.data
-      return response.data
+      currentRecord.value = recordData
+      return recordData
     } catch (e: any) {
       error.value = e.message
       console.error('Failed to update record:', e)
diff --git a/frontend/pages/app/index.vue b/frontend/pages/app/index.vue
new file mode 100644
index 0000000..7f891c0
--- /dev/null
+++ b/frontend/pages/app/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// Redirect to a default page or show dashboard
+const router = useRouter()
+
+// You can redirect to a dashboard or objects list
+// For now, just show a simple message
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="container mx-auto p-8">
+      <h1 class="text-3xl font-bold mb-4">Welcome to Neo Platform</h1>
+      <p class="text-muted-foreground">Select an object from the sidebar to get started.</p>
+    </div>
+  </NuxtLayout>
+</template>
diff --git a/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue b/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
index 859409c..f75e65f 100644
--- a/frontend/pages/app/objects/[objectName]/[[recordId]]/[[view]].vue
+++ b/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>
diff --git a/frontend/pages/app/objects/index.vue b/frontend/pages/app/objects/index.vue
new file mode 100644
index 0000000..3c8685b
--- /dev/null
+++ b/frontend/pages/app/objects/index.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// List all available objects
+const { api } = useApi()
+const router = useRouter()
+
+const objects = ref<any[]>([])
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const response = await api.get('/setup/objects')
+    objects.value = response.data || response || []
+  } catch (e) {
+    console.error('Failed to load objects:', e)
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <NuxtLayout name="default">
+    <div class="container mx-auto p-8">
+      <h1 class="text-3xl font-bold mb-6">Objects</h1>
+      
+      <div v-if="loading" class="text-center py-12">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+      </div>
+      
+      <div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <NuxtLink
+          v-for="obj in objects"
+          :key="obj.id"
+          :to="`/app/objects/${obj.apiName}/`"
+          class="block p-6 border rounded-lg hover:bg-accent transition-colors"
+        >
+          <h3 class="text-xl font-semibold mb-2">{{ obj.label }}</h3>
+          <p v-if="obj.description" class="text-sm text-muted-foreground">{{ obj.description }}</p>
+        </NuxtLink>
+      </div>
+    </div>
+  </NuxtLayout>
+</template>