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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 69x 69x 38x 38x 38x 38x 38x 38x 38x 38x 38x 38x 3x 3x 3x 1x | import { useState, useRef } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { type CrudFormRef } from '@/features/projects/components/ProjectForm'
import { ProjectForm } from '@/features/projects/components/ProjectForm'
import { useProjectColumns } from './hooks/useProjectColumns'
import { useProjectFiltersAndData } from './hooks/useProjectFiltersAndData'
import { Page, PageHeader } from '@/shared/components/Page'
import { DataTable } from '@/shared/components/DataTable'
import { CrudModal } from '@/shared/components/CrudModal'
import type { components } from '@/types/api'
type Project = components['schemas']['Project']
export function ProjectsPage() {
const [searchParams, setSearchParams] = useSearchParams()
const nav = useNavigate()
const { data, isLoading, error, isRefetching, refetch, filterProps } =
useProjectFiltersAndData({ prefix: 'projs' })
const columns = useProjectColumns()
const [formDirty, setFormDirty] = useState(false)
const [formPending, setFormPending] = useState(false)
const formRef = useRef<CrudFormRef>(null)
const showCreate = searchParams.get('create') === 'true'
return (
<Page>
<PageHeader
title="Projects"
breadcrumbs={[
{ label: 'Dashboard', href: '/' },
{ label: 'Projects' },
]}
/>
<DataTable<Project>
prefix="projs"
columns={columns}
data={data}
isLoading={isLoading}
error={error}
entityName="Project"
onRefresh={refetch}
isRefreshing={isRefetching}
add={{
onAdd: () =>
setSearchParams((prev) => {
prev.set('create', 'true')
return prev
}),
}}
onRowClick={(item) => nav(`/projects/${item.id}`)}
{...filterProps}
/>
<CrudModal
open={showCreate}
title="New Project"
isDirty={formDirty}
isPending={formPending}
onClose={() =>
setSearchParams((prev) => {
prev.delete('create')
return prev
})
}
onSave={() => formRef.current?.submit()}
>
<ProjectForm
ref={formRef}
onSuccess={({ id }) => {
setSearchParams({})
nav(`/projects/${id}`, { replace: true })
}}
onClose={() =>
setSearchParams((prev) => {
prev.delete('create')
return prev
})
}
onDirtyChange={setFormDirty}
onPendingChange={setFormPending}
/>
</CrudModal>
</Page>
)
}
|