neogenia/neo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added basic crud for objects

Browse Source
This commit is contained in:
Francisco Gaona
2025-12-22 09:36:39 +01:00
parent 0fe56c0e03
commit f4067c56b4
7 changed files with 255 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/components/views/EditView.vue
View File

@@ -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 => {

8
frontend/components/views/ListView.vue
View File

@@ -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>

56
frontend/composables/useApi.ts
View File

@@ -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)

42
frontend/composables/useFieldViews.ts
View File

@@ -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)

16
frontend/pages/app/index.vue Normal file
View File

@@ -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>

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

@@ -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>

43
frontend/pages/app/objects/index.vue Normal file
View File

@@ -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>