WIP - central operations
This commit is contained in:
Francisco Gaona
@@ -17,7 +17,7 @@ import {
|
||||
SidebarRail,
|
||||
} from '@/components/ui/sidebar'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut } from 'lucide-vue-next'
|
||||
import { LayoutGrid, Boxes, Settings, Home, ChevronRight, Database, Layers, LogOut, Users, Globe, Building } from 'lucide-vue-next'
|
||||
|
||||
const { logout } = useAuth()
|
||||
const { api } = useApi()
|
||||
@@ -26,12 +26,30 @@ const handleLogout = async () => {
|
||||
await logout()
|
||||
}
|
||||
|
||||
// Check if user is central admin (by checking if we're on a central subdomain)
|
||||
const isCentralAdmin = computed(() => {
|
||||
if (process.client) {
|
||||
const hostname = window.location.hostname
|
||||
const parts = hostname.split('.')
|
||||
const subdomain = parts.length >= 2 ? parts[0] : null
|
||||
const centralSubdomains = ['central', 'admin']
|
||||
return subdomain && centralSubdomains.includes(subdomain)
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
// Fetch objects and group by app
|
||||
const apps = ref<any[]>([])
|
||||
const topLevelObjects = ref<any[]>([])
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
// Don't fetch tenant objects if we're on a central subdomain
|
||||
if (isCentralAdmin.value) {
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await api.get('/setup/objects')
|
||||
const allObjects = response.data || response || []
|
||||
@@ -89,6 +107,30 @@ const staticMenuItems = [
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const centralAdminMenuItems = [
|
||||
{
|
||||
title: 'Central Admin',
|
||||
icon: Settings,
|
||||
items: [
|
||||
{
|
||||
title: 'Tenants',
|
||||
url: '/central/tenants',
|
||||
icon: Building,
|
||||
},
|
||||
{
|
||||
title: 'Domains',
|
||||
url: '/central/domains',
|
||||
icon: Globe,
|
||||
},
|
||||
{
|
||||
title: 'Admin Users',
|
||||
url: '/central/users',
|
||||
icon: Users,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -160,6 +202,53 @@ const staticMenuItems = [
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
<!-- Central Admin Menu Items (only visible to central admins) -->
|
||||
<SidebarGroup v-if="isCentralAdmin">
|
||||
<SidebarGroupLabel>Central Administration</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
<template v-for="item in centralAdminMenuItems" :key="item.title">
|
||||
<!-- Simple menu item -->
|
||||
<SidebarMenuItem v-if="!item.items">
|
||||
<SidebarMenuButton as-child>
|
||||
<NuxtLink :to="item.url">
|
||||
<component :is="item.icon" />
|
||||
<span>{{ item.title }}</span>
|
||||
</NuxtLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
<!-- Collapsible menu item with submenu -->
|
||||
<Collapsible v-else as-child :default-open="true" class="group/collapsible">
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger as-child>
|
||||
<SidebarMenuButton :tooltip="item.title">
|
||||
<component :is="item.icon" />
|
||||
<span>{{ item.title }}</span>
|
||||
<ChevronRight
|
||||
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
|
||||
/>
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
|
||||
<SidebarMenuSubButton as-child>
|
||||
<NuxtLink :to="subItem.url">
|
||||
<component v-if="subItem.icon" :is="subItem.icon" />
|
||||
<span>{{ subItem.title }}</span>
|
||||
</NuxtLink>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
</template>
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
<!-- Top-level Objects (no app) -->
|
||||
<SidebarGroup v-if="!loading && topLevelObjects.length > 0">
|
||||
<SidebarGroupLabel>Objects</SidebarGroupLabel>
|
||||
|
||||
386
frontend/composables/useCentralEntities.ts
Normal file
386
frontend/composables/useCentralEntities.ts
Normal file
@@ -0,0 +1,386 @@
|
||||
/**
|
||||
* Static field configurations for central database entities
|
||||
* These entities don't have dynamic field definitions like tenant objects
|
||||
*/
|
||||
|
||||
import { FieldType, ViewMode } from '@/types/field-types'
|
||||
import type { FieldConfig, ListViewConfig, DetailViewConfig, EditViewConfig } from '@/types/field-types'
|
||||
|
||||
// ==================== TENANTS ====================
|
||||
|
||||
export const tenantFields: FieldConfig[] = [
|
||||
{
|
||||
id: 'name',
|
||||
apiName: 'name',
|
||||
label: 'Tenant Name',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
id: 'slug',
|
||||
apiName: 'slug',
|
||||
label: 'Slug',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: false,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
helpText: 'Unique identifier for the tenant (auto-generated from name if not provided)',
|
||||
},
|
||||
{
|
||||
id: 'primaryDomain',
|
||||
apiName: 'primaryDomain',
|
||||
label: 'Primary Domain',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: true,
|
||||
showOnList: false,
|
||||
showOnDetail: false,
|
||||
showOnEdit: true,
|
||||
helpText: 'Primary subdomain for this tenant (e.g., "acme" for acme.yourdomain.com)',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
apiName: 'status',
|
||||
label: 'Status',
|
||||
type: FieldType.SELECT,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
options: [
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Suspended', value: 'suspended' },
|
||||
{ label: 'Deleted', value: 'deleted' },
|
||||
],
|
||||
defaultValue: 'active',
|
||||
},
|
||||
{
|
||||
id: 'dbHost',
|
||||
apiName: 'dbHost',
|
||||
label: 'Database Host',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: false,
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
helpText: 'Leave blank to use default database host',
|
||||
},
|
||||
{
|
||||
id: 'dbPort',
|
||||
apiName: 'dbPort',
|
||||
label: 'Database Port',
|
||||
type: FieldType.NUMBER,
|
||||
isRequired: false,
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
defaultValue: 3306,
|
||||
helpText: 'Leave blank to use default port (3306)',
|
||||
},
|
||||
{
|
||||
id: 'dbName',
|
||||
apiName: 'dbName',
|
||||
label: 'Database Name',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: false,
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: false,
|
||||
helpText: 'Auto-generated based on tenant slug',
|
||||
},
|
||||
{
|
||||
id: 'dbUsername',
|
||||
apiName: 'dbUsername',
|
||||
label: 'Database Username',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: false,
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: false,
|
||||
helpText: 'Auto-generated based on tenant slug',
|
||||
},
|
||||
{
|
||||
id: 'createdAt',
|
||||
apiName: 'createdAt',
|
||||
label: 'Created At',
|
||||
type: FieldType.DATETIME,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: false,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
id: 'updatedAt',
|
||||
apiName: 'updatedAt',
|
||||
label: 'Updated At',
|
||||
type: FieldType.DATETIME,
|
||||
showOnList: false,
|
||||
showOnDetail: true,
|
||||
showOnEdit: false,
|
||||
},
|
||||
]
|
||||
|
||||
export const tenantListConfig: ListViewConfig = {
|
||||
objectApiName: 'Tenant',
|
||||
mode: ViewMode.LIST,
|
||||
fields: tenantFields,
|
||||
pageSize: 25,
|
||||
searchable: true,
|
||||
filterable: true,
|
||||
exportable: true,
|
||||
}
|
||||
|
||||
export const tenantDetailConfig: DetailViewConfig = {
|
||||
objectApiName: 'Tenant',
|
||||
mode: ViewMode.DETAIL,
|
||||
fields: tenantFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'Basic Information',
|
||||
fields: ['name', 'slug', 'status'],
|
||||
},
|
||||
{
|
||||
title: 'Database Configuration',
|
||||
fields: ['dbHost', 'dbPort', 'dbName', 'dbUsername'],
|
||||
collapsible: true,
|
||||
},
|
||||
{
|
||||
title: 'System Information',
|
||||
fields: ['createdAt', 'updatedAt'],
|
||||
collapsible: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const tenantEditConfig: EditViewConfig = {
|
||||
objectApiName: 'Tenant',
|
||||
mode: ViewMode.EDIT,
|
||||
fields: tenantFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'Basic Information',
|
||||
fields: ['name', 'slug', 'primaryDomain', 'status'],
|
||||
},
|
||||
{
|
||||
title: 'Advanced Options',
|
||||
description: 'Optional database configuration (leave blank for defaults)',
|
||||
fields: ['dbHost', 'dbPort'],
|
||||
collapsible: true,
|
||||
defaultCollapsed: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// ==================== DOMAINS ====================
|
||||
|
||||
export const domainFields: FieldConfig[] = [
|
||||
{
|
||||
id: 'domain',
|
||||
apiName: 'domain',
|
||||
label: 'Domain',
|
||||
type: FieldType.TEXT,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
helpText: 'Subdomain for this tenant (e.g., "acme" for acme.yourapp.com)',
|
||||
},
|
||||
{
|
||||
id: 'tenantId',
|
||||
apiName: 'tenantId',
|
||||
label: 'Tenant',
|
||||
type: FieldType.BELONGS_TO,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
relationObject: 'Tenant',
|
||||
relationDisplayField: 'name',
|
||||
},
|
||||
{
|
||||
id: 'isPrimary',
|
||||
apiName: 'isPrimary',
|
||||
label: 'Primary Domain',
|
||||
type: FieldType.BOOLEAN,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
defaultValue: false,
|
||||
helpText: 'Mark as the primary domain for this tenant',
|
||||
},
|
||||
{
|
||||
id: 'createdAt',
|
||||
apiName: 'createdAt',
|
||||
label: 'Created At',
|
||||
type: FieldType.DATETIME,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: false,
|
||||
sortable: true,
|
||||
},
|
||||
]
|
||||
|
||||
export const domainListConfig: ListViewConfig = {
|
||||
objectApiName: 'Domain',
|
||||
mode: ViewMode.LIST,
|
||||
fields: domainFields,
|
||||
pageSize: 25,
|
||||
searchable: true,
|
||||
filterable: true,
|
||||
exportable: true,
|
||||
}
|
||||
|
||||
export const domainDetailConfig: DetailViewConfig = {
|
||||
objectApiName: 'Domain',
|
||||
mode: ViewMode.DETAIL,
|
||||
fields: domainFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'Domain Information',
|
||||
fields: ['domain', 'tenantId', 'isPrimary', 'createdAt'],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const domainEditConfig: EditViewConfig = {
|
||||
objectApiName: 'Domain',
|
||||
mode: ViewMode.EDIT,
|
||||
fields: domainFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'Domain Configuration',
|
||||
fields: ['domain', 'tenantId', 'isPrimary'],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// ==================== USERS (Central Admin Users) ====================
|
||||
|
||||
export const centralUserFields: FieldConfig[] = [
|
||||
{
|
||||
id: 'email',
|
||||
apiName: 'email',
|
||||
label: 'Email',
|
||||
type: FieldType.EMAIL,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
id: 'firstName',
|
||||
apiName: 'firstName',
|
||||
label: 'First Name',
|
||||
type: FieldType.TEXT,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
id: 'lastName',
|
||||
apiName: 'lastName',
|
||||
label: 'Last Name',
|
||||
type: FieldType.TEXT,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
id: 'password',
|
||||
apiName: 'password',
|
||||
label: 'Password',
|
||||
type: FieldType.TEXT, // Will be treated as password in edit view
|
||||
isRequired: true,
|
||||
showOnList: false,
|
||||
showOnDetail: false,
|
||||
showOnEdit: true,
|
||||
helpText: 'Leave blank to keep existing password',
|
||||
},
|
||||
{
|
||||
id: 'role',
|
||||
apiName: 'role',
|
||||
label: 'Role',
|
||||
type: FieldType.SELECT,
|
||||
isRequired: true,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
options: [
|
||||
{ label: 'Admin', value: 'admin' },
|
||||
{ label: 'Super Admin', value: 'superadmin' },
|
||||
],
|
||||
defaultValue: 'admin',
|
||||
},
|
||||
{
|
||||
id: 'isActive',
|
||||
apiName: 'isActive',
|
||||
label: 'Active',
|
||||
type: FieldType.BOOLEAN,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: true,
|
||||
defaultValue: true,
|
||||
},
|
||||
{
|
||||
id: 'createdAt',
|
||||
apiName: 'createdAt',
|
||||
label: 'Created At',
|
||||
type: FieldType.DATETIME,
|
||||
showOnList: true,
|
||||
showOnDetail: true,
|
||||
showOnEdit: false,
|
||||
sortable: true,
|
||||
},
|
||||
]
|
||||
|
||||
export const centralUserListConfig: ListViewConfig = {
|
||||
objectApiName: 'User',
|
||||
mode: ViewMode.LIST,
|
||||
fields: centralUserFields,
|
||||
pageSize: 25,
|
||||
searchable: true,
|
||||
filterable: true,
|
||||
exportable: true,
|
||||
}
|
||||
|
||||
export const centralUserDetailConfig: DetailViewConfig = {
|
||||
objectApiName: 'User',
|
||||
mode: ViewMode.DETAIL,
|
||||
fields: centralUserFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'User Information',
|
||||
fields: ['email', 'firstName', 'lastName', 'role', 'isActive'],
|
||||
},
|
||||
{
|
||||
title: 'System Information',
|
||||
fields: ['createdAt'],
|
||||
collapsible: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
export const centralUserEditConfig: EditViewConfig = {
|
||||
objectApiName: 'User',
|
||||
mode: ViewMode.EDIT,
|
||||
fields: centralUserFields,
|
||||
sections: [
|
||||
{
|
||||
title: 'User Information',
|
||||
fields: ['email', 'firstName', 'lastName'],
|
||||
},
|
||||
{
|
||||
title: 'Access & Security',
|
||||
fields: ['password', 'role', 'isActive'],
|
||||
},
|
||||
],
|
||||
}
|
||||
161
frontend/pages/central/domains/[[recordId]]/[[view]].vue
Normal file
161
frontend/pages/central/domains/[[recordId]]/[[view]].vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<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"
|
||||
@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>
|
||||
162
frontend/pages/central/tenants/[[recordId]]/[[view]].vue
Normal file
162
frontend/pages/central/tenants/[[recordId]]/[[view]].vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<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 {
|
||||
tenantFields,
|
||||
tenantListConfig,
|
||||
tenantDetailConfig,
|
||||
tenantEditConfig,
|
||||
} 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/tenants')
|
||||
|
||||
// Navigation handlers
|
||||
const handleRowClick = (row: any) => {
|
||||
router.push(`/central/tenants/${row.id}/detail`)
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
router.push(`/central/tenants/new`)
|
||||
}
|
||||
|
||||
const handleEdit = (row?: any) => {
|
||||
const id = row?.id || recordId.value
|
||||
router.push(`/central/tenants/${id}/edit`)
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (view.value === 'detail') {
|
||||
router.push('/central/tenants')
|
||||
} else if (view.value === 'edit') {
|
||||
if (recordId.value && recordId.value !== 'new') {
|
||||
router.push(`/central/tenants/${recordId.value}/detail`)
|
||||
} else {
|
||||
router.push('/central/tenants')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
handleBack()
|
||||
}
|
||||
|
||||
const handleDelete = async (rows: any[]) => {
|
||||
if (confirm(`Delete ${rows.length} tenant(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/tenants')
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Failed to delete tenants:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveRecord = async (data: any) => {
|
||||
try {
|
||||
const savedRecord = await handleSave(data)
|
||||
if (savedRecord?.id) {
|
||||
router.push(`/central/tenants/${savedRecord.id}/detail`)
|
||||
} else {
|
||||
router.push('/central/tenants')
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Failed to save tenant:', 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">Tenants</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
Manage tenant organizations and their database configurations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- List View -->
|
||||
<ListView
|
||||
v-if="view === 'list'"
|
||||
:config="tenantListConfig"
|
||||
:data="records"
|
||||
:loading="dataLoading"
|
||||
selectable
|
||||
@row-click="handleRowClick"
|
||||
@create="handleCreate"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
/>
|
||||
|
||||
<!-- Detail View -->
|
||||
<DetailView
|
||||
v-else-if="view === 'detail' && currentRecord"
|
||||
:config="tenantDetailConfig"
|
||||
:data="currentRecord"
|
||||
:loading="dataLoading"
|
||||
@edit="handleEdit"
|
||||
@delete="() => handleDelete([currentRecord])"
|
||||
@back="handleBack"
|
||||
/>
|
||||
|
||||
<!-- Edit View -->
|
||||
<EditView
|
||||
v-else-if="(view === 'edit' || recordId === 'new') && tenantEditConfig"
|
||||
:config="tenantEditConfig"
|
||||
: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>
|
||||
166
frontend/pages/central/users/[[recordId]]/[[view]].vue
Normal file
166
frontend/pages/central/users/[[recordId]]/[[view]].vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<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 {
|
||||
centralUserListConfig,
|
||||
centralUserDetailConfig,
|
||||
centralUserEditConfig,
|
||||
} 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/users')
|
||||
|
||||
// Navigation handlers
|
||||
const handleRowClick = (row: any) => {
|
||||
router.push(`/central/users/${row.id}/detail`)
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
router.push(`/central/users/new`)
|
||||
}
|
||||
|
||||
const handleEdit = (row?: any) => {
|
||||
const id = row?.id || recordId.value
|
||||
router.push(`/central/users/${id}/edit`)
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (view.value === 'detail') {
|
||||
router.push('/central/users')
|
||||
} else if (view.value === 'edit') {
|
||||
if (recordId.value && recordId.value !== 'new') {
|
||||
router.push(`/central/users/${recordId.value}/detail`)
|
||||
} else {
|
||||
router.push('/central/users')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
handleBack()
|
||||
}
|
||||
|
||||
const handleDelete = async (rows: any[]) => {
|
||||
if (confirm(`Delete ${rows.length} user(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/users')
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Failed to delete users:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveRecord = async (data: any) => {
|
||||
try {
|
||||
// Remove password if empty (to keep existing password)
|
||||
if (data.password === '' || data.password === null) {
|
||||
delete data.password
|
||||
}
|
||||
|
||||
const savedRecord = await handleSave(data)
|
||||
if (savedRecord?.id) {
|
||||
router.push(`/central/users/${savedRecord.id}/detail`)
|
||||
} else {
|
||||
router.push('/central/users')
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('Failed to save user:', 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">Admin Users</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
Manage central administrator accounts
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- List View -->
|
||||
<ListView
|
||||
v-if="view === 'list'"
|
||||
:config="centralUserListConfig"
|
||||
:data="records"
|
||||
:loading="dataLoading"
|
||||
selectable
|
||||
@row-click="handleRowClick"
|
||||
@create="handleCreate"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
/>
|
||||
|
||||
<!-- Detail View -->
|
||||
<DetailView
|
||||
v-else-if="view === 'detail' && currentRecord"
|
||||
:config="centralUserDetailConfig"
|
||||
:data="currentRecord"
|
||||
:loading="dataLoading"
|
||||
@edit="handleEdit"
|
||||
@delete="() => handleDelete([currentRecord])"
|
||||
@back="handleBack"
|
||||
/>
|
||||
|
||||
<!-- Edit View -->
|
||||
<EditView
|
||||
v-else-if="(view === 'edit' || recordId === 'new')"
|
||||
:config="centralUserEditConfig"
|
||||
: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>
|
||||
Reference in New Issue
Block a user