304 lines
13 KiB
TypeScript
304 lines
13 KiB
TypeScript
import { Link, useForm } from "@inertiajs/react";
|
|
import InvestmentTerritory, { TerritoryFields } from "@/components/investment-territory";
|
|
import { Management, Field, button, control } from "../management/shared";
|
|
import { titles, statuses, stages, roles } from "./types";
|
|
import type { Structure, StructureRecord, Chain } from "./types";
|
|
import ValueNetwork from "./value-network";
|
|
import type { ChainLink, Gap } from "./value-network";
|
|
|
|
function ChainForm({ clusterId, chain }: { clusterId: string; chain?: Chain }) {
|
|
const form = useForm({
|
|
code: chain?.code ?? "",
|
|
name: chain?.name ?? "",
|
|
stage: chain?.stage ?? "input",
|
|
});
|
|
return (
|
|
<form
|
|
className="space-y-3 rounded border p-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const url = `/management/clusters/${clusterId}/chains`;
|
|
if (chain) form.put(`${url}/${chain.id}`, { preserveScroll: true });
|
|
else
|
|
form.post(url, {
|
|
preserveScroll: true,
|
|
onSuccess: () => form.reset(),
|
|
});
|
|
}}
|
|
>
|
|
<h3 className="font-semibold">{chain ? chain.name : "Nova etapa"}</h3>
|
|
<Field label="Código da etapa" error={form.errors.code}>
|
|
<input
|
|
className={control}
|
|
value={form.data.code}
|
|
onChange={(e) => form.setData("code", e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Nome da etapa" error={form.errors.name}>
|
|
<input
|
|
className={control}
|
|
value={form.data.name}
|
|
onChange={(e) => form.setData("name", e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Fase da cadeia" error={form.errors.stage}>
|
|
<select
|
|
className={control}
|
|
value={form.data.stage}
|
|
onChange={(e) => form.setData("stage", e.target.value)}
|
|
>
|
|
{Object.entries(stages).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
<button className={button} disabled={form.processing}>
|
|
Guardar etapa
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export default function Editor({
|
|
structure,
|
|
record,
|
|
projects,
|
|
chains,
|
|
memberships,
|
|
chainLinks,
|
|
gaps,
|
|
}: {
|
|
structure: Structure;
|
|
record: StructureRecord | null;
|
|
projects: { id: string; name: string; code: string }[];
|
|
chains: Chain[];
|
|
chainLinks: ChainLink[];
|
|
gaps: Gap[];
|
|
memberships: {
|
|
id: string;
|
|
project_id: string;
|
|
name: string;
|
|
role: string;
|
|
}[];
|
|
}) {
|
|
const isProject = structure === "projects";
|
|
const form = useForm({
|
|
code: record?.code ?? "",
|
|
name: record?.name ?? "",
|
|
status: record?.status ?? (isProject ? "draft" : "planned"),
|
|
sector: record?.sector ?? "",
|
|
description: record?.description ?? "",
|
|
budget_amount: record?.budget_amount ?? "",
|
|
budget_currency: record?.budget_currency ?? "",
|
|
start_date: record?.start_date?.slice(0, 10) ?? "",
|
|
end_date: record?.end_date?.slice(0, 10) ?? "",
|
|
province_id: "",
|
|
district_id: "",
|
|
admin_post_id: "",
|
|
locality_id: "",
|
|
});
|
|
const association = useForm({ project_id: "", role: "complementary" });
|
|
return (
|
|
<Management title={`${record ? "Editar" : "Criar"} ${isProject ? "projecto" : "cluster"}`}>
|
|
<Link className="underline" href={`/management/${structure}`}>
|
|
Voltar a {titles[structure].toLowerCase()}
|
|
</Link>
|
|
<p>Registo interno de gestão. O estado activo não publica este conteúdo no portal.</p>
|
|
{!record && (
|
|
<TerritoryFields
|
|
endpoint="/management/territory-options"
|
|
onChange={(path) =>
|
|
form.setData((data) => ({
|
|
...data,
|
|
province_id: path[0]?.id ?? "",
|
|
district_id: path[1]?.id ?? "",
|
|
admin_post_id: path[2]?.id ?? "",
|
|
locality_id: path[3]?.id ?? "",
|
|
}))
|
|
}
|
|
/>
|
|
)}
|
|
<form
|
|
className="max-w-3xl space-y-4"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
if (record) form.put(`/management/${structure}/${record.id}`);
|
|
else form.post(`/management/${structure}`);
|
|
}}
|
|
>
|
|
<Field label="Código" error={form.errors.code}>
|
|
<input
|
|
className={control}
|
|
value={form.data.code}
|
|
onChange={(e) => form.setData("code", e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Nome" error={form.errors.name}>
|
|
<input
|
|
className={control}
|
|
value={form.data.name}
|
|
onChange={(e) => form.setData("name", e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Estado" error={form.errors.status}>
|
|
<select
|
|
className={control}
|
|
value={form.data.status}
|
|
onChange={(e) => form.setData("status", e.target.value)}
|
|
>
|
|
{Object.entries(statuses[structure]).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
{!isProject && (
|
|
<Field label="Sector do cluster" error={form.errors.sector}>
|
|
<input
|
|
className={control}
|
|
value={form.data.sector}
|
|
onChange={(e) => form.setData("sector", e.target.value)}
|
|
/>
|
|
</Field>
|
|
)}
|
|
{isProject && (
|
|
<>
|
|
<Field label="Descrição" error={form.errors.description}>
|
|
<textarea
|
|
className={control}
|
|
rows={5}
|
|
value={form.data.description}
|
|
onChange={(e) => form.setData("description", e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field
|
|
label="Orçamento (use ponto para os decimais)"
|
|
error={form.errors.budget_amount}
|
|
>
|
|
<input
|
|
inputMode="decimal"
|
|
className={control}
|
|
value={form.data.budget_amount}
|
|
onChange={(e) => form.setData("budget_amount", e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field
|
|
label="Moeda (código de três letras)"
|
|
error={form.errors.budget_currency}
|
|
>
|
|
<input
|
|
maxLength={3}
|
|
className={control}
|
|
value={form.data.budget_currency}
|
|
onChange={(e) =>
|
|
form.setData("budget_currency", e.target.value.toUpperCase())
|
|
}
|
|
/>
|
|
</Field>
|
|
<Field label="Data de início" error={form.errors.start_date}>
|
|
<input
|
|
type="date"
|
|
className={control}
|
|
value={form.data.start_date}
|
|
onChange={(e) => form.setData("start_date", e.target.value)}
|
|
/>
|
|
</Field>
|
|
<Field label="Data de conclusão" error={form.errors.end_date}>
|
|
<input
|
|
type="date"
|
|
className={control}
|
|
value={form.data.end_date}
|
|
onChange={(e) => form.setData("end_date", e.target.value)}
|
|
/>
|
|
</Field>
|
|
</>
|
|
)}
|
|
<button className={button} disabled={form.processing}>
|
|
Guardar
|
|
</button>
|
|
</form>
|
|
{!isProject && record && (
|
|
<>
|
|
<section className="max-w-3xl space-y-4">
|
|
<h2 className="text-xl font-semibold">Projectos associados</h2>
|
|
{memberships.map((member) => (
|
|
<p key={member.id}>
|
|
<Link
|
|
className="underline"
|
|
href={`/management/projects/${member.project_id}/edit`}
|
|
>
|
|
{member.name}
|
|
</Link>{" "}
|
|
· {roles[member.role]}
|
|
</p>
|
|
))}
|
|
{!memberships.length && <p>Ainda não existem projectos associados.</p>}
|
|
<form
|
|
className="space-y-3"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
association.post(`/management/clusters/${record.id}/projects`, {
|
|
preserveScroll: true,
|
|
});
|
|
}}
|
|
>
|
|
<Field label="Projecto" error={association.errors.project_id}>
|
|
<select
|
|
className={control}
|
|
value={association.data.project_id}
|
|
onChange={(e) =>
|
|
association.setData("project_id", e.target.value)
|
|
}
|
|
>
|
|
<option value="">Seleccione</option>
|
|
{projects.map((project) => (
|
|
<option key={project.id} value={project.id}>
|
|
{project.code} — {project.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
<Field label="Papel no cluster" error={association.errors.role}>
|
|
<select
|
|
className={control}
|
|
value={association.data.role}
|
|
onChange={(e) => association.setData("role", e.target.value)}
|
|
>
|
|
{Object.entries(roles).map(([value, label]) => (
|
|
<option key={value} value={value}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
<button className={button} disabled={association.processing}>
|
|
Guardar associação
|
|
</button>
|
|
<p className="text-sm">
|
|
Seleccionar um projecto já associado permite actualizar o seu papel.
|
|
</p>
|
|
</form>
|
|
</section>
|
|
<section className="max-w-3xl space-y-4">
|
|
<h2 className="text-xl font-semibold">Etapas da cadeia de valor</h2>
|
|
{chains.map((chain) => (
|
|
<ChainForm key={chain.id} clusterId={record.id} chain={chain} />
|
|
))}
|
|
<ChainForm clusterId={record.id} />
|
|
</section>
|
|
<ValueNetwork
|
|
clusterId={record.id}
|
|
chains={chains}
|
|
links={chainLinks}
|
|
gaps={gaps}
|
|
/>
|
|
</>
|
|
)}
|
|
{record && <InvestmentTerritory kind={structure} id={record.id} />}
|
|
</Management>
|
|
);
|
|
}
|