neo/frontend/pages/demo/field-views.vue

<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
&lt;ListView 
  :config="listConfig" 
  :data="records"
  @row-click="handleRowClick"
/&gt;</code></pre>
          </div>
        </div>
      </TabsContent>
    </Tabs>
  </div>
</template>