98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
import { AssetSelect } from "@metis/assets/client";
|
|
import { FormLabel } from "@repo/rdx-ui/components/form-label";
|
|
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { CompanyDTO } from "../../../../common";
|
|
import type { RemoteConnectionInput } from "../../../../common/remote-connections";
|
|
import type { RemoteQuickKind } from "../../create";
|
|
|
|
const targetActions = {
|
|
network: { label: "newSite", kind: "site" },
|
|
asset: { label: "remote.newAsset", kind: "target" },
|
|
resource: { label: "remote.newResource", kind: "resource" },
|
|
} satisfies Record<RemoteConnectionInput["targetKind"], { label: string; kind: RemoteQuickKind }>;
|
|
|
|
export function RemoteTargetField({
|
|
company,
|
|
form,
|
|
prefix,
|
|
fixed,
|
|
ready,
|
|
assetOptions,
|
|
resourceOptions,
|
|
setQuick,
|
|
}: {
|
|
company: CompanyDTO;
|
|
form: UseFormReturn<RemoteConnectionInput>;
|
|
prefix: string;
|
|
fixed: boolean;
|
|
ready: boolean;
|
|
assetOptions: readonly { value: string; label: string }[];
|
|
resourceOptions: readonly { value: string; label: string }[];
|
|
setQuick: (kind: RemoteQuickKind) => void;
|
|
}) {
|
|
const { t } = useTranslation("companies");
|
|
const v = form.watch();
|
|
const targetAction = targetActions[v.targetKind];
|
|
const targetOptions = {
|
|
network: [
|
|
{ value: "", label: t("remote.allCompany") },
|
|
...company.sites
|
|
.filter((site) => site.active || (fixed && site.id === v.siteId))
|
|
.map((s) => ({ value: s.id, label: s.name })),
|
|
],
|
|
asset: assetOptions.filter((a) => a.value !== v.sourceAssetId),
|
|
resource: resourceOptions,
|
|
};
|
|
|
|
const disabled = fixed || !ready;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<FormLabel htmlFor={`${prefix}-target`} required={v.targetKind !== "network"}>
|
|
{t(v.targetKind === "network" ? "remote.site" : "remote.target")}
|
|
</FormLabel>
|
|
{v.targetKind === "asset" ? (
|
|
<AssetSelect
|
|
action={
|
|
fixed ? undefined : { label: t("remote.newAsset"), onClick: () => setQuick("target") }
|
|
}
|
|
companyId={company.id}
|
|
disabled={disabled}
|
|
id={`${prefix}-target`}
|
|
label={t("remote.target")}
|
|
onValueChange={(id) => form.setValue("targetId", id || null)}
|
|
options={targetOptions.asset}
|
|
placeholder={t("mail.choose")}
|
|
required
|
|
sites={company.sites}
|
|
value={v.targetId ?? ""}
|
|
/>
|
|
) : (
|
|
<SelectWithAction
|
|
action={
|
|
fixed
|
|
? undefined
|
|
: {
|
|
label: t(targetAction.label),
|
|
onClick: () => setQuick(targetAction.kind),
|
|
}
|
|
}
|
|
disabled={disabled}
|
|
id={`${prefix}-target`}
|
|
label={t(v.targetKind === "network" ? "remote.site" : "remote.target")}
|
|
onValueChange={(id) =>
|
|
form.setValue(v.targetKind === "network" ? "siteId" : "targetId", id || null)
|
|
}
|
|
options={targetOptions[v.targetKind]}
|
|
placeholder={t(v.targetKind === "network" ? "remote.allCompany" : "mail.choose")}
|
|
required={v.targetKind !== "network"}
|
|
value={(v.targetKind === "network" ? v.siteId : v.targetId) ?? ""}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|