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 69 70 71 72 | 4x 4x 4x 4x | import { Outlet } from 'react-router-dom'
import { Page, DataTable, Crud } from '@/layers/L2R'
import type { PageConfig, ListConfig, CrudConfig } from '@/layers/interfaces'
import { formatRelativeTime } from '@/shared/utils/format'
import { REPOSITORY_FIELD_SET, REPOSITORY_FIELD_TYPES } from './repositoriesCrudConfig'
function RepoStatus({ status }: { status: unknown }) {
if (status === 'connected') return <span>🟢 Connected</span>
if (status === 'disconnected') return <span>🔴 Disconnected</span>
return <span>⚪ Unknown</span>
}
export function RepositoriesPage() {
const pageConfig: PageConfig = { title: 'Repositories' }
const listConfig: ListConfig = {
entityPath: 'repositories',
prefix: 'repos',
columns: [
{
field: 'name',
label: 'Name',
sortable: true,
render: (row) => <a href={`#/repositories/${row.id}`}>{row.name as string}</a>,
},
{
field: 'description',
label: 'Description',
sortable: true,
render: (row) => (row.description ? String(row.description) : '\u2014'),
},
{ field: 'url', label: 'URL', sortable: true },
{
field: 'status',
label: 'Status',
sortable: true,
render: (row) => <RepoStatus status={row.status} />,
},
{
field: 'last_checked_at',
label: 'Last Checked',
sortable: true,
render: (row) => {
const val = row.last_checked_at as string | null | undefined
return val ? formatRelativeTime(val) : 'Never'
},
},
],
sort: { field: 'name', order: 'asc' },
createTarget: '/repositories/add',
createLabel: '+ New Repository',
rowTarget: '/repositories/:id',
}
const crudConfig: CrudConfig = {
entityPath: 'repositories',
fieldSet: REPOSITORY_FIELD_SET,
fieldTypes: REPOSITORY_FIELD_TYPES,
successTarget: '/repositories/:id',
cancelTarget: '/repositories',
title: 'Add New Repository',
}
return (
<Page config={pageConfig}>
<DataTable config={listConfig} />
<Crud config={crudConfig} />
<Outlet />
</Page>
)
}
|