Added auth functionality, initial work with views and field types
This commit is contained in:
Francisco Gaona
429
frontend/pages/demo/field-views.vue
Normal file
429
frontend/pages/demo/field-views.vue
Normal file
@@ -0,0 +1,429 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import ListView from '@/components/views/ListView.vue'
|
||||
import DetailView from '@/components/views/DetailView.vue'
|
||||
import EditView from '@/components/views/EditView.vue'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
FieldType,
|
||||
ViewMode
|
||||
} from '@/types/field-types'
|
||||
import type {
|
||||
ListViewConfig,
|
||||
DetailViewConfig,
|
||||
EditViewConfig,
|
||||
FieldConfig
|
||||
} from '@/types/field-types'
|
||||
|
||||
// Example: Contact Object
|
||||
const contactFields: FieldConfig[] = [
|
||||
{
|
||||
id: '1',
|
||||
apiName: 'firstName',
|
||||
label: 'First Name',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: true,
|
||||
placeholder: 'Enter first name',
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
apiName: 'lastName',
|
||||
label: 'Last Name',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: true,
|
||||
placeholder: 'Enter last name',
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
apiName: 'email',
|
||||
label: 'Email',
|
||||
type: FieldType.EMAIL,
|
||||
isRequired: true,
|
||||
placeholder: 'email@example.com',
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
validationRules: [
|
||||
{ type: 'email', message: 'Please enter a valid email address' }
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
apiName: 'phone',
|
||||
label: 'Phone',
|
||||
type: FieldType.TEXT,
|
||||
placeholder: '+1 (555) 000-0000',
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
apiName: 'company',
|
||||
label: 'Company',
|
||||
type: FieldType.TEXT,
|
||||
placeholder: 'Company name',
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
apiName: 'status',
|
||||
label: 'Status',
|
||||
type: FieldType.SELECT,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
options: [
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
{ label: 'Pending', value: 'pending' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
apiName: 'isVip',
|
||||
label: 'VIP Customer',
|
||||
type: FieldType.BOOLEAN,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
apiName: 'birthDate',
|
||||
label: 'Birth Date',
|
||||
type: FieldType.DATE,
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
apiName: 'notes',
|
||||
label: 'Notes',
|
||||
type: FieldType.TEXTAREA,
|
||||
placeholder: 'Additional notes...',
|
||||
rows: 4,
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
apiName: 'website',
|
||||
label: 'Website',
|
||||
type: FieldType.URL,
|
||||
placeholder: 'https://example.com',
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
},
|
||||
]
|
||||
|
||||
// Sample data
|
||||
const sampleContacts = ref([
|
||||
{
|
||||
id: '1',
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
email: 'john.doe@example.com',
|
||||
phone: '+1 (555) 123-4567',
|
||||
company: 'Acme Corp',
|
||||
status: 'active',
|
||||
isVip: true,
|
||||
birthDate: new Date('1985-03-15'),
|
||||
notes: 'Preferred customer, always pays on time.',
|
||||
website: 'https://acmecorp.com',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
firstName: 'Jane',
|
||||
lastName: 'Smith',
|
||||
email: 'jane.smith@example.com',
|
||||
phone: '+1 (555) 987-6543',
|
||||
company: 'Tech Solutions',
|
||||
status: 'active',
|
||||
isVip: false,
|
||||
birthDate: new Date('1990-07-22'),
|
||||
notes: 'Interested in enterprise plan.',
|
||||
website: 'https://techsolutions.com',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
firstName: 'Bob',
|
||||
lastName: 'Johnson',
|
||||
email: 'bob.johnson@example.com',
|
||||
phone: '+1 (555) 456-7890',
|
||||
company: 'StartupXYZ',
|
||||
status: 'pending',
|
||||
isVip: false,
|
||||
birthDate: new Date('1988-11-30'),
|
||||
notes: 'New lead from conference.',
|
||||
website: 'https://startupxyz.com',
|
||||
},
|
||||
])
|
||||
|
||||
// View configurations
|
||||
const listConfig: ListViewConfig = {
|
||||
objectApiName: 'Contact',
|
||||
mode: ViewMode.LIST,
|
||||
fields: contactFields,
|
||||
pageSize: 10,
|
||||
searchable: true,
|
||||
filterable: true,
|
||||
exportable: true,
|
||||
actions: [
|
||||
{
|
||||
id: 'bulk-email',
|
||||
label: 'Send Email',
|
||||
variant: 'outline',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const detailConfig: DetailViewConfig = {
|
||||
objectApiName: 'Contact',
|
||||
mode: ViewMode.DETAIL,
|
||||
fields: contactFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'Contact Information',
|
||||
description: 'Basic contact details',
|
||||
fields: ['firstName', 'lastName', 'email', 'phone'],
|
||||
},
|
||||
{
|
||||
title: 'Company Information',
|
||||
description: 'Company and business details',
|
||||
fields: ['company', 'website', 'status', 'isVip'],
|
||||
},
|
||||
{
|
||||
title: 'Additional Information',
|
||||
fields: ['birthDate', 'notes'],
|
||||
collapsible: true,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
id: 'send-email',
|
||||
label: 'Send Email',
|
||||
variant: 'outline',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const editConfig: EditViewConfig = {
|
||||
objectApiName: 'Contact',
|
||||
mode: ViewMode.EDIT,
|
||||
fields: contactFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'Contact Information',
|
||||
description: 'Basic contact details',
|
||||
fields: ['firstName', 'lastName', 'email', 'phone'],
|
||||
},
|
||||
{
|
||||
title: 'Company Information',
|
||||
fields: ['company', 'website', 'status', 'isVip'],
|
||||
},
|
||||
{
|
||||
title: 'Additional Information',
|
||||
fields: ['birthDate', 'notes'],
|
||||
collapsible: true,
|
||||
defaultCollapsed: true,
|
||||
},
|
||||
],
|
||||
submitLabel: 'Save Contact',
|
||||
cancelLabel: 'Cancel',
|
||||
}
|
||||
|
||||
// State management
|
||||
const currentView = ref<'list' | 'detail' | 'edit'>('list')
|
||||
const selectedContact = ref<any>(null)
|
||||
const isLoading = ref(false)
|
||||
const isSaving = ref(false)
|
||||
|
||||
// Event handlers
|
||||
const handleRowClick = (row: any) => {
|
||||
selectedContact.value = row
|
||||
currentView.value = 'detail'
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
selectedContact.value = {}
|
||||
currentView.value = 'edit'
|
||||
}
|
||||
|
||||
const handleEdit = (row?: any) => {
|
||||
selectedContact.value = row || selectedContact.value
|
||||
currentView.value = 'edit'
|
||||
}
|
||||
|
||||
const handleDelete = (rows: any[]) => {
|
||||
if (confirm(`Delete ${rows.length} contact(s)?`)) {
|
||||
rows.forEach(row => {
|
||||
const idx = sampleContacts.value.findIndex(c => c.id === row.id)
|
||||
if (idx !== -1) {
|
||||
sampleContacts.value.splice(idx, 1)
|
||||
}
|
||||
})
|
||||
if (selectedContact.value && rows.some(r => r.id === selectedContact.value.id)) {
|
||||
currentView.value = 'list'
|
||||
selectedContact.value = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async (data: any) => {
|
||||
isSaving.value = true
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
if (data.id) {
|
||||
// Update existing
|
||||
const idx = sampleContacts.value.findIndex(c => c.id === data.id)
|
||||
if (idx !== -1) {
|
||||
sampleContacts.value[idx] = data
|
||||
}
|
||||
} else {
|
||||
// Create new
|
||||
data.id = String(Date.now())
|
||||
sampleContacts.value.push(data)
|
||||
}
|
||||
|
||||
isSaving.value = false
|
||||
selectedContact.value = data
|
||||
currentView.value = 'detail'
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
if (selectedContact.value?.id) {
|
||||
currentView.value = 'detail'
|
||||
} else {
|
||||
currentView.value = 'list'
|
||||
selectedContact.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
currentView.value = 'list'
|
||||
selectedContact.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto py-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold tracking-tight">Field Types & Views Demo</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
Laravel Nova-inspired list, detail, and edit views with shadcn-vue components
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs default-value="demo" class="space-y-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="demo">Interactive Demo</TabsTrigger>
|
||||
<TabsTrigger value="examples">View Examples</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="demo" class="space-y-4">
|
||||
<!-- List View -->
|
||||
<ListView
|
||||
v-if="currentView === 'list'"
|
||||
:config="listConfig"
|
||||
:data="sampleContacts"
|
||||
:loading="isLoading"
|
||||
selectable
|
||||
@row-click="handleRowClick"
|
||||
@create="handleCreate"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
/>
|
||||
|
||||
<!-- Detail View -->
|
||||
<DetailView
|
||||
v-else-if="currentView === 'detail'"
|
||||
:config="detailConfig"
|
||||
:data="selectedContact"
|
||||
:loading="isLoading"
|
||||
@edit="handleEdit"
|
||||
@delete="() => handleDelete([selectedContact])"
|
||||
@back="handleBack"
|
||||
/>
|
||||
|
||||
<!-- Edit View -->
|
||||
<EditView
|
||||
v-else-if="currentView === 'edit'"
|
||||
:config="editConfig"
|
||||
:data="selectedContact"
|
||||
:loading="isLoading"
|
||||
:saving="isSaving"
|
||||
@save="handleSave"
|
||||
@cancel="handleCancel"
|
||||
@back="handleBack"
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="examples" class="space-y-6">
|
||||
<div class="grid gap-6">
|
||||
<div class="border rounded-lg p-6 space-y-4">
|
||||
<h3 class="text-xl font-semibold">Available Field Types</h3>
|
||||
<ul class="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
|
||||
<li v-for="(value, key) in FieldType" :key="key" class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-primary rounded-full"></span>
|
||||
{{ key }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-6 space-y-4">
|
||||
<h3 class="text-xl font-semibold">Usage Example</h3>
|
||||
<pre class="bg-muted p-4 rounded-lg overflow-x-auto text-sm"><code>import { ListView, DetailView, EditView } from '@/components/views'
|
||||
import { FieldType, ViewMode } from '@/types/field-types'
|
||||
|
||||
// Define your fields
|
||||
const fields = [
|
||||
{
|
||||
id: '1',
|
||||
apiName: 'name',
|
||||
label: 'Name',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
},
|
||||
// ... more fields
|
||||
]
|
||||
|
||||
// Create view configs
|
||||
const listConfig = {
|
||||
objectApiName: 'MyObject',
|
||||
mode: ViewMode.LIST,
|
||||
fields,
|
||||
searchable: true,
|
||||
}
|
||||
|
||||
// Use in template
|
||||
<ListView
|
||||
:config="listConfig"
|
||||
:data="records"
|
||||
@row-click="handleRowClick"
|
||||
/></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user