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

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ref, computed, watch } from 'vue'
import {
Table,
TableBody,
@@ -12,6 +12,7 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Checkbox } from '@/components/ui/checkbox'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import FieldRenderer from '@/components/fields/FieldRenderer.vue'
import { ListViewConfig, ViewMode, FieldType } from '@/types/field-types'
import { ChevronDown, ChevronUp, Search, Plus, Download, Trash2, Edit } from 'lucide-vue-next'
@@ -22,6 +23,8 @@ interface Props {
loading?: boolean
selectable?: boolean
baseUrl?: string
totalCount?: number
searchSummary?: string
}
const props = withDefaults(defineProps<Props>(), {
@@ -29,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
loading: false,
selectable: false,
baseUrl: '/runtime/objects',
searchSummary: '',
})
const emit = defineEmits<{
@@ -41,41 +45,91 @@ const emit = defineEmits<{
'sort': [field: string, direction: 'asc' | 'desc']
'search': [query: string]
'refresh': []
'page-change': [page: number, pageSize: number]
'load-more': [page: number, pageSize: number]
}>()
// State
const selectedRows = ref<Set<string>>(new Set())
const normalizeId = (id: any) => String(id)
const selectedRowIds = ref<string[]>([])
const searchQuery = ref('')
const sortField = ref<string>('')
const sortDirection = ref<'asc' | 'desc'>('asc')
const currentPage = ref(1)
const bulkAction = ref('delete')
// Computed
const visibleFields = computed(() =>
props.config.fields.filter(f => f.showOnList !== false)
)
const pageSize = computed(() => props.config.pageSize ?? 10)
const maxFrontendRecords = computed(() => props.config.maxFrontendRecords ?? 500)
const totalRecords = computed(() =>
(props.totalCount && props.totalCount > 0)
? props.totalCount
: props.data.length
)
const useHybridPagination = computed(() => totalRecords.value > maxFrontendRecords.value)
const totalPages = computed(() => Math.max(1, Math.ceil(totalRecords.value / pageSize.value)))
const loadedPages = computed(() => Math.max(1, Math.ceil(props.data.length / pageSize.value)))
const availablePages = computed(() => {
if (useHybridPagination.value && props.totalCount && props.data.length < props.totalCount) {
return loadedPages.value
}
return totalPages.value
})
const startIndex = computed(() => (currentPage.value - 1) * pageSize.value)
const paginatedData = computed(() => {
const start = startIndex.value
const end = start + pageSize.value
return props.data.slice(start, end)
})
const pageStart = computed(() => (props.data.length === 0 ? 0 : startIndex.value + 1))
const pageEnd = computed(() => Math.min(startIndex.value + paginatedData.value.length, totalRecords.value))
const showPagination = computed(() => totalRecords.value > pageSize.value)
const canGoPrev = computed(() => currentPage.value > 1)
const canGoNext = computed(() => currentPage.value < availablePages.value)
const showLoadMore = computed(() => (
useHybridPagination.value &&
Boolean(props.totalCount) &&
props.data.length < totalRecords.value
))
const allSelected = computed({
get: () => props.data.length > 0 && selectedRows.value.size === props.data.length,
get: () => props.data.length > 0 && selectedRowIds.value.length === props.data.length,
set: (val: boolean) => {
if (val) {
selectedRows.value = new Set(props.data.map(row => row.id))
selectedRowIds.value = props.data.map(row => normalizeId(row.id))
} else {
selectedRows.value.clear()
selectedRowIds.value = []
}
emit('row-select', getSelectedRows())
},
})
const getSelectedRows = () => {
return props.data.filter(row => selectedRows.value.has(row.id))
const idSet = new Set(selectedRowIds.value)
return props.data.filter(row => idSet.has(normalizeId(row.id)))
}
const toggleRowSelection = (rowId: string) => {
if (selectedRows.value.has(rowId)) {
selectedRows.value.delete(rowId)
const normalizedId = normalizeId(rowId)
const nextSelection = new Set(selectedRowIds.value)
nextSelection.has(normalizedId) ? nextSelection.delete(normalizedId) : nextSelection.add(normalizedId)
selectedRowIds.value = Array.from(nextSelection)
emit('row-select', getSelectedRows())
}
const setRowSelection = (rowId: string, checked: boolean) => {
const normalizedId = normalizeId(rowId)
const nextSelection = new Set(selectedRowIds.value)
if (checked) {
nextSelection.add(normalizedId)
} else {
selectedRows.value.add(rowId)
nextSelection.delete(normalizedId)
}
selectedRowIds.value = Array.from(nextSelection)
emit('row-select', getSelectedRows())
}
@@ -96,6 +150,49 @@ const handleSearch = () => {
const handleAction = (actionId: string) => {
emit('action', actionId, getSelectedRows())
}
const handleBulkAction = () => {
if (bulkAction.value === 'delete') {
emit('delete', getSelectedRows())
return
}
emit('action', bulkAction.value, getSelectedRows())
}
const goToPage = (page: number) => {
const nextPage = Math.min(Math.max(page, 1), availablePages.value)
if (nextPage !== currentPage.value) {
currentPage.value = nextPage
emit('page-change', nextPage, pageSize.value)
}
}
const loadMore = () => {
const nextPage = Math.ceil(props.data.length / pageSize.value) + 1
emit('load-more', nextPage, pageSize.value)
}
watch(
() => [props.data.length, totalRecords.value, pageSize.value],
() => {
if (currentPage.value > availablePages.value) {
currentPage.value = availablePages.value
}
}
)
watch(
() => props.data,
(rows) => {
const rowIds = new Set(rows.map(row => normalizeId(row.id)))
const nextSelection = selectedRowIds.value.filter(id => rowIds.has(id))
if (nextSelection.length !== selectedRowIds.value.length) {
selectedRowIds.value = nextSelection
emit('row-select', getSelectedRows())
}
},
{ deep: true }
)
</script>
<template>
@@ -113,18 +210,31 @@ const handleAction = (actionId: string) => {
@keyup.enter="handleSearch"
/>
</div>
<p v-if="searchSummary" class="mt-2 text-xs text-muted-foreground">
{{ searchSummary }}
</p>
</div>
<div class="flex items-center gap-2">
<!-- Bulk Actions -->
<template v-if="selectedRows.size > 0">
<template v-if="selectedRowIds.length > 0">
<Badge variant="secondary" class="px-3 py-1">
{{ selectedRows.size }} selected
{{ selectedRowIds.length }} selected
</Badge>
<Button variant="outline" size="sm" @click="emit('delete', getSelectedRows())">
<Trash2 class="h-4 w-4 mr-2" />
Delete
</Button>
<div class="flex items-center gap-2">
<Select v-model="bulkAction" @update:model-value="(value) => bulkAction = value">
<SelectTrigger class="h-8 w-[180px]">
<SelectValue placeholder="Select action" />
</SelectTrigger>
<SelectContent>
<SelectItem value="delete">Delete selected</SelectItem>
</SelectContent>
</Select>
<Button variant="outline" size="sm" @click="handleBulkAction">
<Trash2 class="h-4 w-4 mr-2" />
Run
</Button>
</div>
</template>
<!-- Custom Actions -->
@@ -158,7 +268,10 @@ const handleAction = (actionId: string) => {
<TableHeader>
<TableRow>
<TableHead v-if="selectable" class="w-12">
<Checkbox v-model:checked="allSelected" />
<Checkbox
:model-value="allSelected"
@update:model-value="(value: boolean) => (allSelected = value)"
/>
</TableHead>
<TableHead
v-for="field in visibleFields"
@@ -192,15 +305,15 @@ const handleAction = (actionId: string) => {
</TableRow>
<TableRow
v-else
v-for="row in data"
v-for="row in paginatedData"
:key="row.id"
class="cursor-pointer hover:bg-muted/50"
@click="emit('row-click', row)"
>
<TableCell v-if="selectable" @click.stop>
<Checkbox
:checked="selectedRows.has(row.id)"
@update:checked="toggleRowSelection(row.id)"
:model-value="selectedRowIds.includes(normalizeId(row.id))"
@update:model-value="(checked: boolean) => setRowSelection(normalizeId(row.id), checked)"
/>
</TableCell>
<TableCell v-for="field in visibleFields" :key="field.id">
@@ -227,7 +340,26 @@ const handleAction = (actionId: string) => {
</Table>
</div>
<!-- Pagination would go here -->
<div v-if="showPagination" class="flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground">
<div class="flex items-center gap-2">
<span>Showing {{ pageStart }}-{{ pageEnd }} of {{ totalRecords }} records</span>
<span v-if="showLoadMore">
(loaded {{ data.length }})
</span>
</div>
<div class="flex flex-wrap items-center gap-2">
<Button variant="outline" size="sm" :disabled="!canGoPrev" @click="goToPage(currentPage - 1)">
Previous
</Button>
<span class="px-2">Page {{ currentPage }} of {{ totalPages }}</span>
<Button variant="outline" size="sm" :disabled="!canGoNext" @click="goToPage(currentPage + 1)">
Next
</Button>
<Button v-if="showLoadMore" variant="secondary" size="sm" @click="loadMore">
Load more
</Button>
</div>
</div>
</div>
</template>