neo/frontend/pages/central/domains/[[recordId]]/[[view]].vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useApi } from '@/composables/useApi'
import { useViewState } from '@/composables/useFieldViews'
import {
  domainListConfig,
  domainDetailConfig,
  domainEditConfig,
} from '@/composables/useCentralEntities'
import ListView from '@/components/views/ListView.vue'
import DetailView from '@/components/views/DetailViewEnhanced.vue'
import EditView from '@/components/views/EditViewEnhanced.vue'

const route = useRoute()
const router = useRouter()
const { api } = useApi()

const recordId = computed(() => route.params.recordId as string)
const view = computed(() => {
  if (route.params.recordId === 'new' && !route.params.view) {
    return 'edit'
  }
  return (route.params.view as 'list' | 'detail' | 'edit') || 'list'
})

// Use view state composable
const {
  records,
  currentRecord,
  loading: dataLoading,
  saving,
  fetchRecords,
  fetchRecord,
  deleteRecords,
  handleSave,
} = useViewState('/central/domains')

// Navigation handlers
const handleRowClick = (row: any) => {
  router.push(`/central/domains/${row.id}/detail`)
}

const handleCreate = () => {
  router.push(`/central/domains/new`)
}

const handleEdit = (row?: any) => {
  const id = row?.id || recordId.value
  router.push(`/central/domains/${id}/edit`)
}

const handleBack = () => {
  if (view.value === 'detail') {
    router.push('/central/domains')
  } else if (view.value === 'edit') {
    if (recordId.value && recordId.value !== 'new') {
      router.push(`/central/domains/${recordId.value}/detail`)
    } else {
      router.push('/central/domains')
    }
  }
}

const handleCancel = () => {
  handleBack()
}

const handleDelete = async (rows: any[]) => {
  if (confirm(`Delete ${rows.length} domain(s)? This action cannot be undone.`)) {
    try {
      const ids = rows.map(r => r.id)
      await deleteRecords(ids)
      if (view.value !== 'list') {
        await router.push('/central/domains')
      }
    } catch (e: any) {
      console.error('Failed to delete domains:', e)
    }
  }
}

const handleSaveRecord = async (data: any) => {
  try {
    const savedRecord = await handleSave(data)
    if (savedRecord?.id) {
      router.push(`/central/domains/${savedRecord.id}/detail`)
    } else {
      router.push('/central/domains')
    }
  } catch (e: any) {
    console.error('Failed to save domain:', e)
  }
}

// Initialize
onMounted(async () => {
  if (view.value === 'list') {
    await fetchRecords()
  } else if (recordId.value && recordId.value !== 'new') {
    await fetchRecord(recordId.value)
  }
})
</script>

<template>
  <NuxtLayout name="default">
    <div class="object-view-container">
      <!-- Page Header -->
      <div v-if="view === 'list'" class="mb-6">
        <h1 class="text-3xl font-bold">Domains</h1>
        <p class="text-muted-foreground mt-2">
          Manage tenant domains and subdomain mappings
        </p>
      </div>

      <!-- List View -->
      <ListView
        v-if="view === 'list'"
        :config="domainListConfig"
        :data="records"
        :loading="dataLoading"
        selectable
        @row-click="handleRowClick"
        @create="handleCreate"
        @edit="handleEdit"
        @delete="handleDelete"
      />

      <!-- Detail View -->
      <DetailView
        v-else-if="view === 'detail' && currentRecord"
        :config="domainDetailConfig"
        :data="currentRecord"
        :loading="dataLoading"
        base-url="/central"
        @edit="handleEdit"
        @delete="() => handleDelete([currentRecord])"
        @back="handleBack"
      />

      <!-- Edit View -->
      <EditView
        v-else-if="(view === 'edit' || recordId === 'new')"
        :config="domainEditConfig"
        :data="currentRecord || {}"
        :loading="dataLoading"
        :saving="saving"
        @save="handleSaveRecord"
        @cancel="handleCancel"
        @back="handleBack"
      />
    </div>
  </NuxtLayout>
</template>

<style scoped>
.object-view-container {
  min-height: 100vh;
  padding: 2rem;
}
</style>