Neo platform - First Version

frontend/pages/setup/objects/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="min-h-screen bg-background">
+    <header class="border-b">
+      <div class="container mx-auto px-4 py-4">
+        <div class="flex items-center justify-between">
+          <NuxtLink to="/" class="text-xl font-bold">Neo Platform</NuxtLink>
+          <div class="flex gap-4">
+            <NuxtLink
+              to="/setup/apps"
+              class="text-sm text-muted-foreground hover:text-foreground"
+            >
+              Apps
+            </NuxtLink>
+            <NuxtLink
+              to="/setup/objects"
+              class="text-sm text-muted-foreground hover:text-foreground"
+            >
+              Objects
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+      <div v-if="loading" class="text-center py-12">Loading...</div>
+      <div v-else-if="error" class="text-destructive">Error: {{ error }}</div>
+      <div v-else>
+        <div class="flex items-center justify-between mb-6">
+          <h1 class="text-3xl font-bold">Objects</h1>
+          <button
+            @click="showCreateForm = true"
+            class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+          >
+            New Object
+          </button>
+        </div>
+
+        <div v-if="showCreateForm" class="mb-6 p-6 border rounded-lg bg-card">
+          <h2 class="text-xl font-semibold mb-4">Create New Object</h2>
+          <form @submit.prevent="createObject" class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium mb-2">API Name</label>
+              <input
+                v-model="newObject.apiName"
+                type="text"
+                required
+                class="w-full px-3 py-2 border rounded-md bg-background"
+                placeholder="MyObject"
+              />
+            </div>
+            <div>
+              <label class="block text-sm font-medium mb-2">Label</label>
+              <input
+                v-model="newObject.label"
+                type="text"
+                required
+                class="w-full px-3 py-2 border rounded-md bg-background"
+                placeholder="My Object"
+              />
+            </div>
+            <div>
+              <label class="block text-sm font-medium mb-2">Plural Label</label>
+              <input
+                v-model="newObject.pluralLabel"
+                type="text"
+                class="w-full px-3 py-2 border rounded-md bg-background"
+                placeholder="My Objects"
+              />
+            </div>
+            <div>
+              <label class="block text-sm font-medium mb-2">Description</label>
+              <textarea
+                v-model="newObject.description"
+                class="w-full px-3 py-2 border rounded-md bg-background"
+                rows="3"
+              />
+            </div>
+            <div class="flex gap-2">
+              <button
+                type="submit"
+                class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+              >
+                Create
+              </button>
+              <button
+                type="button"
+                @click="showCreateForm = false"
+                class="px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/90"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <NuxtLink
+            v-for="obj in objects"
+            :key="obj.id"
+            :to="`/setup/objects/${obj.apiName}`"
+            class="p-6 border rounded-lg hover:border-primary transition-colors bg-card"
+          >
+            <div class="flex items-start justify-between mb-2">
+              <h3 class="text-xl font-semibold">{{ obj.label }}</h3>
+              <span
+                v-if="obj.isSystem"
+                class="text-xs px-2 py-1 bg-muted text-muted-foreground rounded"
+              >
+                System
+              </span>
+            </div>
+            <p class="text-sm text-muted-foreground mb-4">{{ obj.description || 'No description' }}</p>
+            <div class="text-sm">
+              <span class="text-muted-foreground">{{ obj.fields?.length || 0 }} fields</span>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { api } = useApi()
+
+const objects = ref([])
+const loading = ref(true)
+const error = ref(null)
+const showCreateForm = ref(false)
+const newObject = ref({
+  apiName: '',
+  label: '',
+  pluralLabel: '',
+  description: '',
+})
+
+const fetchObjects = async () => {
+  try {
+    loading.value = true
+    objects.value = await api.get('/setup/objects')
+  } catch (e: any) {
+    error.value = e.message
+  } finally {
+    loading.value = false
+  }
+}
+
+const createObject = async () => {
+  try {
+    await api.post('/setup/objects', newObject.value)
+    showCreateForm.value = false
+    newObject.value = { apiName: '', label: '', pluralLabel: '', description: '' }
+    await fetchObjects()
+  } catch (e: any) {
+    alert('Error creating object: ' + e.message)
+  }
+}
+
+onMounted(() => {
+  fetchObjects()
+})
+</script>