Use routes closer to the route for objects

2025-12-22 10:24:02 +01:00
parent cdc202454f
commit db9848cce7
3 changed files with 435 additions and 64 deletions
--- a/frontend/components/AppSidebar.vue
+++ b/frontend/components/AppSidebar.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import {
  Sidebar,
  SidebarContent,
@@ -19,12 +20,52 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut } from 'lucide-vue-next'

 const { logout } = useAuth()
+const { api } = useApi()

 const handleLogout = async () => {
  await logout()
 }

-const menuItems = [
+// Fetch objects and group by app
+const apps = ref<any[]>([])
+const topLevelObjects = ref<any[]>([])
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const response = await api.get('/setup/objects')
+    const allObjects = response.data || response || []
+    
+    // Group objects by app
+    const appMap = new Map<string, any>()
+    const noAppObjects: any[] = []
+    
+    allObjects.forEach((obj: any) => {
+      if (obj.appId) {
+        if (!appMap.has(obj.appId)) {
+          appMap.set(obj.appId, {
+            id: obj.appId,
+            name: obj.app?.name || obj.app?.label || 'Unknown App',
+            label: obj.app?.label || obj.app?.name || 'Unknown App',
+            objects: []
+          })
+        }
+        appMap.get(obj.appId)!.objects.push(obj)
+      } else {
+        noAppObjects.push(obj)
+      }
+    })
+    
+    apps.value = Array.from(appMap.values())
+    topLevelObjects.value = noAppObjects
+  } catch (e) {
+    console.error('Failed to load objects:', e)
+  } finally {
+    loading.value = false
+  }
+})
+
+const staticMenuItems = [
  {
    title: 'Home',
    url: '/',
@@ -46,17 +87,6 @@ const menuItems = [
      },
    ],
  },
-  {
-    title: 'Runtime',
-    icon: Database,
-    items: [
-      {
-        title: 'My Apps',
-        url: '/app',
-        icon: Layers,
-      },
-    ],
-  },
 ]
 </script>

@@ -82,11 +112,12 @@ const menuItems = [
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
+      <!-- Static Menu Items -->
      <SidebarGroup>
-        <SidebarGroupLabel>Application</SidebarGroupLabel>
+        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
-            <template v-for="item in menuItems" :key="item.title">
+            <template v-for="item in staticMenuItems" :key="item.title">
              <!-- Simple menu item -->
              <SidebarMenuItem v-if="!item.items">
                <SidebarMenuButton as-child>
@@ -127,6 +158,63 @@ const menuItems = [
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
+
+      <!-- Top-level Objects (no app) -->
+      <SidebarGroup v-if="!loading && topLevelObjects.length > 0">
+        <SidebarGroupLabel>Objects</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem v-for="obj in topLevelObjects" :key="obj.id">
+              <SidebarMenuButton as-child>
+                <NuxtLink :to="`/${obj.apiName.toLowerCase()}`">
+                  <Database class="h-4 w-4" />
+                  <span>{{ obj.label || obj.apiName }}</span>
+                </NuxtLink>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+
+      <!-- App-grouped Objects -->
+      <SidebarGroup v-if="!loading && apps.length > 0">
+        <SidebarGroupLabel>Apps</SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <Collapsible 
+              v-for="app in apps" 
+              :key="app.id"
+              as-child 
+              :default-open="true" 
+              class="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger as-child>
+                  <SidebarMenuButton :tooltip="app.label">
+                    <LayoutGrid class="h-4 w-4" />
+                    <span>{{ app.label }}</span>
+                    <ChevronRight
+                      class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                    />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    <SidebarMenuSubItem v-for="obj in app.objects" :key="obj.id">
+                      <SidebarMenuSubButton as-child>
+                        <NuxtLink :to="`/${obj.apiName.toLowerCase()}`">
+                          <Database class="h-4 w-4" />
+                          <span>{{ obj.label || obj.apiName }}</span>
+                        </NuxtLink>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenu>
--- a/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
+++ b/frontend/pages/[objectName]/[[recordId]]/[[view]].vue
@@ -0,0 +1,242 @@
+<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>