Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 55x 55x 28x 28x 28x 28x 28x 34x 34x 34x 34x 34x 34x 34x | import { Outlet, useParams } from 'react-router-dom'
import { Page, EntityDetail, Crud } from '@/layers/L2R'
import type { PageConfig, DetailConfig, CrudConfig } from '@/layers/interfaces'
import { useEntityDetail } from '@/layers/L1/entityResolver'
import { formatDateTime, formatRelativeTime } from '@/shared/utils/format'
import { REPOSITORY_FIELD_SET, REPOSITORY_ENTITY_SELECT_SOURCES } from './repositoriesCrudConfig'
export function RepositoryDetailPage() {
const { id } = useParams<{ id: string }>()
const { data: repository } = useEntityDetail('repositories', id ?? '')
const pageConfig: PageConfig = {
title: repository?.name ?? 'Repository',
breadcrumbs: [
{ label: 'Dashboard', href: '/' },
{ label: 'Repositories', href: '/repositories/repos' },
{ label: repository?.name ?? id ?? '' },
],
}
const detailConfig: DetailConfig = {
entityPath: 'repositories',
title: 'Repository',
actionTargets: { edit: '/repositories/repos/:id/edit', delete: true },
readGrouping: [
{
label: 'Details',
fields: ['name', 'description', 'url', 'bot_account_id', 'status', 'last_checked_at', 'created_at', 'updated_at'],
},
],
fieldFormatters: {
status: (value: unknown) => {
if (value === 'connected') return '🟢 Connected'
if (value === 'disconnected') return '🔴 Disconnected'
return '⚪ Unknown'
},
url: (value: unknown) => <code>{String(value ?? '')}</code>,
bot_account_id: (value: unknown) => <span>{value as string}</span>,
last_checked_at: (value: unknown) => {
const v = value as string | null | undefined
return v ? formatRelativeTime(v) : 'Never'
},
created_at: (value: unknown) => formatDateTime(value as string | null | undefined),
updated_at: (value: unknown) => formatDateTime(value as string | null | undefined),
},
}
const crudConfig: CrudConfig = {
EentityPath: 'repositories',
fieldSet: REPOSITORY_FIELD_SET,
fieldTypes: {
description: 'textarea',
bot_account_id: 'entity-select',
},
entitySelectSources: REPOSITORY_ENTITY_SELECT_SOURCES,
successTarget: '/repositories/repos/:id',
cancelTarget: '/repositories/repos/:id',
}
return (
<Page config={pageConfig}>
<EntityDetail config={detailConfig} />
<Crud config={crudConfig} />
<Outlet />
</Page>
)
}
|