221 lines
9.6 KiB
TypeScript
221 lines
9.6 KiB
TypeScript
import { Link, useForm } from '@inertiajs/react';
|
|
import { Management } from '../management/shared';
|
|
import { Field, input, button, card, groupLabels } from './shared';
|
|
import type { Opportunity, Context, References } from './shared';
|
|
export default function EditContext({
|
|
record,
|
|
context,
|
|
references,
|
|
}: {
|
|
record: Opportunity;
|
|
context: Context;
|
|
references: References;
|
|
}) {
|
|
const form = useForm({
|
|
version: context.profile?.version ?? 0,
|
|
is_education: context.profile?.is_education ?? false,
|
|
business_model: context.profile?.business_model ?? '',
|
|
requirements: context.profile?.requirements ?? '',
|
|
risks: context.profile?.risks ?? '',
|
|
target_date: context.profile?.target_date ?? '',
|
|
source_reference: context.profile?.source_reference ?? '',
|
|
clusters: context.clusters.map((r) => r.id),
|
|
corridors: context.corridors.map((r) => r.id),
|
|
projects: context.projects.map((r) => r.id),
|
|
locations: context.locations.map((r) => r.id),
|
|
facets: context.facets.map((r) => r.id),
|
|
});
|
|
return (
|
|
<Management title={'Contexto: ' + record.title}>
|
|
<p>
|
|
Associações territoriais e produtivas ligam esta oportunidade a
|
|
corredores, clusters e projectos; não substituem o registo de
|
|
onde se localiza. As relações e características são parte da
|
|
ficha publicada. Guardar devolve-a a rascunho para revisão.
|
|
</p>
|
|
<Link
|
|
href={`/management/opportunities/${record.id}/edit`}
|
|
className="underline"
|
|
>
|
|
Editar e publicar a ficha principal
|
|
</Link>
|
|
<p>
|
|
As localizações documentadas são preparadas nos recursos da
|
|
ficha, reutilizando a hierarquia existente. As referências
|
|
anteriores abaixo são preservadas; não constituem confirmação de
|
|
implantação ou de regime especial.
|
|
</p>
|
|
<Link
|
|
className="underline"
|
|
href={`/management/opportunities/${record.id}/resources`}
|
|
>
|
|
Onde se localiza — consultar ou documentar locais
|
|
</Link>
|
|
<form
|
|
className="space-y-6"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.put(`/management/opportunities/${record.id}/context`, {
|
|
onSuccess: () =>
|
|
form.setData('version', form.data.version + 1),
|
|
});
|
|
}}
|
|
>
|
|
<label className="flex gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.data.is_education}
|
|
onChange={(e) =>
|
|
form.setData('is_education', e.target.checked)
|
|
}
|
|
/>
|
|
Oportunidade na educação
|
|
</label>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{(
|
|
[
|
|
'clusters',
|
|
'corridors',
|
|
'projects',
|
|
'locations',
|
|
] as const
|
|
).map((key, i) => (
|
|
<fieldset
|
|
className={
|
|
card + ' max-h-72 space-y-2 overflow-auto'
|
|
}
|
|
key={key}
|
|
>
|
|
<legend className="font-bold">
|
|
{
|
|
[
|
|
'Clusters',
|
|
'Corredores',
|
|
'Projectos âncora',
|
|
'Referências territoriais anteriores',
|
|
][i]
|
|
}
|
|
</legend>
|
|
{references[key].map((r) => (
|
|
<label key={r.id} className="flex gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.data[key].includes(r.id)}
|
|
onChange={(e) =>
|
|
form.setData(
|
|
key,
|
|
e.target.checked
|
|
? [...form.data[key], r.id]
|
|
: form.data[key].filter(
|
|
(id) => id !== r.id,
|
|
),
|
|
)
|
|
}
|
|
/>
|
|
{r.name}
|
|
</label>
|
|
))}
|
|
</fieldset>
|
|
))}
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
{[
|
|
'subsector',
|
|
'education',
|
|
'infrastructure',
|
|
'labour',
|
|
'qualification',
|
|
'support',
|
|
'impact',
|
|
'partnership',
|
|
].map((group) => (
|
|
<fieldset
|
|
key={group}
|
|
className={
|
|
card + ' max-h-64 space-y-2 overflow-auto'
|
|
}
|
|
>
|
|
<legend>{groupLabels[group]}</legend>
|
|
{references.options
|
|
.filter((o) => o.group === group && o.active)
|
|
.map((o) => (
|
|
<label key={o.id} className="flex gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.data.facets.includes(
|
|
o.id,
|
|
)}
|
|
onChange={(e) =>
|
|
form.setData(
|
|
'facets',
|
|
e.target.checked
|
|
? [
|
|
...form.data
|
|
.facets,
|
|
o.id,
|
|
]
|
|
: form.data.facets.filter(
|
|
(id) =>
|
|
id !== o.id,
|
|
),
|
|
)
|
|
}
|
|
/>
|
|
{o.label}
|
|
</label>
|
|
))}
|
|
</fieldset>
|
|
))}
|
|
</div>
|
|
{(
|
|
[
|
|
'business_model',
|
|
'requirements',
|
|
'risks',
|
|
'source_reference',
|
|
] as const
|
|
).map((key) => (
|
|
<Field
|
|
key={key}
|
|
label={
|
|
{
|
|
business_model: 'Modelo de negócio',
|
|
requirements: 'Requisitos e necessidades',
|
|
risks: 'Riscos',
|
|
source_reference:
|
|
'Fonte e referência de autorização',
|
|
}[key]
|
|
}
|
|
>
|
|
<textarea
|
|
className={input}
|
|
required={key === 'source_reference'}
|
|
rows={3}
|
|
value={form.data[key]}
|
|
onChange={(e) => form.setData(key, e.target.value)}
|
|
/>
|
|
</Field>
|
|
))}
|
|
<Field label="Data-alvo">
|
|
<input
|
|
type="date"
|
|
className={input}
|
|
value={form.data.target_date}
|
|
onChange={(e) =>
|
|
form.setData('target_date', e.target.value)
|
|
}
|
|
/>
|
|
</Field>
|
|
{Object.entries(form.errors).map(([key, value]) => (
|
|
<p role="alert" key={key}>
|
|
{value}
|
|
</p>
|
|
))}
|
|
<button className={button} disabled={form.processing}>
|
|
Guardar contexto em rascunho
|
|
</button>
|
|
</form>
|
|
</Management>
|
|
);
|
|
}
|