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

Add Contact standard object, related lists, meilisearch, pagination, search, AI assistant

Browse Source
This commit is contained in:
Francisco Gaona
2026-01-16 18:01:26 +01:00
parent 51c82d3d95
commit 20fc90a3fb
62 changed files with 6613 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
frontend/pages/[objectName]/[[recordId]]/[[view]].vue
View File

@@ -1,11 +1,19 @@
<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { ref, computed, onMounted, onBeforeUnmount, watch } 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/DetailViewEnhanced.vue'
import EditView from '@/components/views/EditViewEnhanced.vue'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
const route = useRoute()
const router = useRouter()
@@ -38,6 +46,7 @@ const error = ref<string | null>(null)
// Use view state composable
const {
records,
totalCount,
currentRecord,
loading: dataLoading,
saving,
@@ -48,6 +57,27 @@ const {
handleSave,
} = useViewState(`/runtime/objects/${objectApiName.value}/records`)
const handleAiRecordCreated = (event: Event) => {
const detail = (event as CustomEvent).detail || {}
if (
detail?.objectApiName &&
detail.objectApiName.toLowerCase() !== objectApiName.value.toLowerCase()
) {
return
}
if (view.value === 'list') {
initializeListRecords()
}
}
onMounted(() => {
window.addEventListener('ai-record-created', handleAiRecordCreated)
})
onBeforeUnmount(() => {
window.removeEventListener('ai-record-created', handleAiRecordCreated)
})
// Compute breadcrumbs based on the current route and object data
const updateBreadcrumbs = () => {
if (!objectDefinition.value) {
@@ -121,6 +151,20 @@ const editConfig = computed(() => {
return buildEditViewConfig(objectDefinition.value)
})
const listPageSize = computed(() => listConfig.value?.pageSize ?? 25)
const maxFrontendRecords = computed(() => listConfig.value?.maxFrontendRecords ?? 500)
const searchQuery = ref('')
const searchSummary = ref('')
const searchLoading = ref(false)
const deleteDialogOpen = ref(false)
const deleteSubmitting = ref(false)
const pendingDeleteRows = ref<any[]>([])
const deleteSummary = ref<{ deletedIds: string[]; deniedIds: string[] } | null>(null)
const isSearchActive = computed(() => searchQuery.value.trim().length > 0)
const pendingDeleteCount = computed(() => pendingDeleteRows.value.length)
const deniedDeleteCount = computed(() => deleteSummary.value?.deniedIds.length ?? 0)
// Fetch object definition
const fetchObjectDefinition = async () => {
try {
@@ -155,17 +199,51 @@ const handleBack = () => {
router.push(`/${objectApiName.value.toLowerCase()}/`)
}
const handleNavigate = (relatedObjectApiName: string, relatedRecordId: string) => {
router.push(`/${relatedObjectApiName.toLowerCase()}/${relatedRecordId}/detail`)
}
const handleCreateRelated = (relatedObjectApiName: string, _parentId: string) => {
router.push(`/${relatedObjectApiName.toLowerCase()}/new`)
}
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)
pendingDeleteRows.value = rows
deleteSummary.value = null
deleteDialogOpen.value = true
}
const resetDeleteDialog = () => {
deleteDialogOpen.value = false
deleteSubmitting.value = false
pendingDeleteRows.value = []
deleteSummary.value = null
}
const confirmDelete = async () => {
if (pendingDeleteRows.value.length === 0) {
resetDeleteDialog()
return
}
deleteSubmitting.value = true
try {
const ids = pendingDeleteRows.value.map(r => r.id)
const result = await deleteRecords(ids)
const deletedIds = result?.deletedIds ?? []
const deniedIds = result?.deniedIds ?? []
deleteSummary.value = { deletedIds, deniedIds }
if (deniedIds.length === 0) {
resetDeleteDialog()
if (view.value !== 'list') {
await router.push(`/${objectApiName.value.toLowerCase()}/`)
}
} catch (e: any) {
error.value = e.message || 'Failed to delete records'
}
} catch (e: any) {
error.value = e.message || 'Failed to delete records'
} finally {
deleteSubmitting.value = false
}
}
@@ -191,6 +269,88 @@ const handleCancel = () => {
}
}
const loadListRecords = async (
page = 1,
options?: { append?: boolean; pageSize?: number }
) => {
const pageSize = options?.pageSize ?? listPageSize.value
const result = await fetchRecords({ page, pageSize }, { append: options?.append })
const resolvedTotal = result?.totalCount ?? totalCount.value ?? records.value.length
totalCount.value = resolvedTotal
return result
}
const searchListRecords = async (
page = 1,
options?: { append?: boolean; pageSize?: number }
) => {
if (!isSearchActive.value) {
return initializeListRecords()
}
searchLoading.value = true
try {
const pageSize = options?.pageSize ?? listPageSize.value
const response = await api.post('/ai/search', {
objectApiName: objectApiName.value,
query: searchQuery.value.trim(),
page,
pageSize,
})
const data = response?.data ?? []
const total = response?.totalCount ?? data.length
records.value = options?.append ? [...records.value, ...data] : data
totalCount.value = total
searchSummary.value = response?.explanation || ''
return response
} catch (e: any) {
error.value = e.message || 'Failed to search records'
return null
} finally {
searchLoading.value = false
}
}
const initializeListRecords = async () => {
const firstResult = await loadListRecords(1)
const resolvedTotal = firstResult?.totalCount ?? totalCount.value ?? records.value.length
const shouldPrefetchAll =
resolvedTotal <= maxFrontendRecords.value && records.value.length < resolvedTotal
if (shouldPrefetchAll) {
await loadListRecords(1, { append: false, pageSize: maxFrontendRecords.value })
}
}
const handlePageChange = async (page: number, pageSize: number) => {
if (isSearchActive.value) {
await searchListRecords(page, { append: page > 1, pageSize })
return
}
const loadedPages = Math.ceil(records.value.length / pageSize)
if (page > loadedPages && totalCount.value > records.value.length) {
await loadListRecords(page, { append: true, pageSize })
}
}
const handleLoadMore = async (page: number, pageSize: number) => {
if (isSearchActive.value) {
await searchListRecords(page, { append: true, pageSize })
return
}
await loadListRecords(page, { append: true, pageSize })
}
const handleSearch = async (query: string) => {
const trimmed = query.trim()
searchQuery.value = trimmed
if (!trimmed) {
searchSummary.value = ''
await initializeListRecords()
return
}
await searchListRecords(1, { append: false, pageSize: listPageSize.value })
}
// Watch for route changes
watch(() => route.params, async (newParams, oldParams) => {
// Reset current record when navigating to 'new'
@@ -205,7 +365,7 @@ watch(() => route.params, async (newParams, oldParams) => {
// Fetch records if navigating back to list
if (!newParams.recordId && !newParams.view) {
await fetchRecords()
await initializeListRecords()
}
}, { deep: true })
@@ -214,7 +374,7 @@ onMounted(async () => {
await fetchObjectDefinition()
if (view.value === 'list') {
await fetchRecords()
await initializeListRecords()
} else if (recordId.value && recordId.value !== 'new') {
await fetchRecord(recordId.value)
}
@@ -259,13 +419,18 @@ onMounted(async () => {
v-else-if="view === 'list' && listConfig"
:config="listConfig"
:data="records"
:loading="dataLoading"
:loading="dataLoading || searchLoading"
:total-count="totalCount"
:search-summary="searchSummary"
:base-url="`/runtime/objects`"
selectable
@row-click="handleRowClick"
@create="handleCreate"
@edit="handleEdit"
@delete="handleDelete"
@search="handleSearch"
@page-change="handlePageChange"
@load-more="handleLoadMore"
/>
<!-- Detail View -->
@@ -279,6 +444,8 @@ onMounted(async () => {
@edit="handleEdit"
@delete="() => handleDelete([currentRecord])"
@back="handleBack"
@navigate="handleNavigate"
@create-related="handleCreateRelated"
/>
<!-- Edit View -->
@@ -295,6 +462,46 @@ onMounted(async () => {
@back="handleBack"
/>
</div>
<Dialog v-model:open="deleteDialogOpen">
<DialogContent class="sm:max-w-[520px]">
<DialogHeader>
<DialogTitle>Delete records</DialogTitle>
<DialogDescription>
This action cannot be undone.
</DialogDescription>
</DialogHeader>
<div class="space-y-2 text-sm">
<p>
You are about to delete {{ pendingDeleteCount }} record<span v-if="pendingDeleteCount !== 1">s</span>.
</p>
<p v-if="deleteSummary" class="text-muted-foreground">
Deleted {{ deleteSummary.deletedIds.length }} record<span v-if="deleteSummary.deletedIds.length !== 1">s</span>.
</p>
<p v-if="deniedDeleteCount > 0" class="text-destructive">
{{ deniedDeleteCount }} record<span v-if="deniedDeleteCount !== 1">s</span> could not be deleted due to missing permissions.
</p>
<p v-if="!deleteSummary" class="text-muted-foreground">
Records you do not have permission to delete will be skipped.
</p>
</div>
<DialogFooter>
<Button variant="outline" @click="resetDeleteDialog" :disabled="deleteSubmitting">
{{ deleteSummary ? 'Close' : 'Cancel' }}
</Button>
<Button
v-if="!deleteSummary"
variant="destructive"
@click="confirmDelete"
:disabled="deleteSubmitting"
>
Delete
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</NuxtLayout>
</template>