72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { Link, useForm } from '@inertiajs/react';
|
|
import {
|
|
Management,
|
|
Field,
|
|
Pagination,
|
|
button,
|
|
control,
|
|
} from '../management/shared';
|
|
import type { Paginated } from '../management/shared';
|
|
import { titles, statuses } from './types';
|
|
import type { Structure, StructureRecord } from './types';
|
|
|
|
export default function Index({
|
|
structure,
|
|
records,
|
|
filters,
|
|
}: {
|
|
structure: Structure;
|
|
records: Paginated<StructureRecord>;
|
|
filters: { q?: string };
|
|
}) {
|
|
const form = useForm({ q: filters.q ?? '' });
|
|
return (
|
|
<Management title={titles[structure]}>
|
|
<Link className={button} href={`/management/${structure}/create`}>
|
|
{structure === 'projects'
|
|
? 'Criar projecto'
|
|
: structure === 'clusters'
|
|
? 'Criar cluster'
|
|
: 'Criar corredor'}
|
|
</Link>
|
|
<form
|
|
className="flex flex-wrap items-end gap-3"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.get(`/management/${structure}`);
|
|
}}
|
|
>
|
|
<Field label="Pesquisar por nome ou código">
|
|
<input
|
|
className={control}
|
|
value={form.data.q}
|
|
onChange={(e) => form.setData('q', e.target.value)}
|
|
/>
|
|
</Field>
|
|
<button className={button}>Pesquisar</button>
|
|
</form>
|
|
<div className="space-y-3">
|
|
{records.data.map((record) => (
|
|
<article
|
|
key={record.id}
|
|
className="rounded border p-4 break-words"
|
|
>
|
|
<Link
|
|
className="font-semibold underline"
|
|
href={`/management/${structure}/${record.id}/edit`}
|
|
>
|
|
{record.name}
|
|
</Link>
|
|
<p>
|
|
{record.code} · {statuses[structure][record.status]}
|
|
</p>
|
|
{record.sector && <p>{record.sector}</p>}
|
|
</article>
|
|
))}
|
|
</div>
|
|
{!records.data.length && <p>Nenhum registo encontrado.</p>}
|
|
<Pagination page={records} />
|
|
</Management>
|
|
);
|
|
}
|