127 lines
4.5 KiB
TypeScript
127 lines
4.5 KiB
TypeScript
import { i18nMessage, useGuardedNavigate } from "@govoplan/core-webui";
|
|
import { ArrowBigLeft, ArrowBigLeftDash, ArrowBigRight, ArrowBigRightDash } from "lucide-react";
|
|
import { useLocation } from "react-router-dom";
|
|
import type { CampaignVersionDetail, CampaignVersionListItem } from "../../../api/campaigns";
|
|
import { formatDateTime } from "../utils/campaignView";
|
|
|
|
type VersionLineProps = {
|
|
version: CampaignVersionDetail | CampaignVersionListItem | null;
|
|
versions?: CampaignVersionListItem[];
|
|
status?: string;
|
|
loadedAt?: string | null;
|
|
};
|
|
|
|
export default function VersionLine({ version, versions = [], status, loadedAt }: VersionLineProps) {
|
|
const location = useLocation();
|
|
const navigate = useGuardedNavigate();
|
|
const sorted = versions.slice().sort((a, b) => (a.version_number ?? 0) - (b.version_number ?? 0));
|
|
const currentIndex = version ? sorted.findIndex((item) => item.id === version.id) : -1;
|
|
const first = currentIndex > 0 ? sorted[0] : null;
|
|
const previous = currentIndex > 0 ? sorted[currentIndex - 1] : null;
|
|
const next = currentIndex >= 0 && currentIndex < sorted.length - 1 ? sorted[currentIndex + 1] : null;
|
|
const latest = currentIndex >= 0 && currentIndex < sorted.length - 1 ? sorted[sorted.length - 1] : null;
|
|
const suffix = status ?? `Loaded ${formatDateTime(loadedAt ?? version?.updated_at)}`;
|
|
|
|
function openVersion(target: CampaignVersionListItem) {
|
|
const targetUrl = versionTarget(location.pathname, location.search, target.id);
|
|
navigate(targetUrl);
|
|
}
|
|
|
|
return (
|
|
<p className="mono-small version-line">
|
|
<VersionArrow
|
|
icon="first"
|
|
target={first}
|
|
fallbackLabel="i18n:govoplan-campaign.already_at_first_version.b90fad64"
|
|
onOpen={openVersion} />
|
|
|
|
<VersionArrow
|
|
icon="previous"
|
|
target={previous}
|
|
fallbackLabel="i18n:govoplan-campaign.no_older_version.4355dee8"
|
|
onOpen={openVersion} />
|
|
|
|
<span>i18n:govoplan-campaign.version.2da600bf {version ? i18nMessage("i18n:govoplan-campaign.value.44b8c76f", { value0: version.version_number }) : "—"}</span>
|
|
<VersionArrow
|
|
icon="next"
|
|
target={next}
|
|
fallbackLabel="i18n:govoplan-campaign.no_newer_version.b210a41c"
|
|
onOpen={openVersion} />
|
|
|
|
<VersionArrow
|
|
icon="latest"
|
|
target={latest}
|
|
fallbackLabel="i18n:govoplan-campaign.already_at_latest_version.7533bd9d"
|
|
onOpen={openVersion} />
|
|
|
|
<span className="version-line-separator">·</span>
|
|
<span>{suffix}</span>
|
|
</p>);
|
|
|
|
}
|
|
|
|
type VersionArrowProps = {
|
|
icon: "first" | "previous" | "next" | "latest";
|
|
target: CampaignVersionListItem | null;
|
|
fallbackLabel: string;
|
|
onOpen: (target: CampaignVersionListItem) => void;
|
|
};
|
|
|
|
function VersionArrow({ icon, target, fallbackLabel, onOpen }: VersionArrowProps) {
|
|
const Icon = getVersionIcon(icon);
|
|
const actionLabel = getVersionActionLabel(icon, target);
|
|
|
|
if (!target) {
|
|
return (
|
|
<span className="version-arrow disabled" title={fallbackLabel} aria-label={fallbackLabel}>
|
|
<Icon aria-hidden="true" />
|
|
</span>);
|
|
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="version-arrow"
|
|
onClick={() => onOpen(target)}
|
|
title={actionLabel}
|
|
aria-label={actionLabel}>
|
|
|
|
<Icon aria-hidden="true" />
|
|
</button>);
|
|
|
|
}
|
|
|
|
function getVersionIcon(icon: VersionArrowProps["icon"]) {
|
|
switch (icon) {
|
|
case "first":
|
|
return ArrowBigLeftDash;
|
|
case "previous":
|
|
return ArrowBigLeft;
|
|
case "next":
|
|
return ArrowBigRight;
|
|
case "latest":
|
|
return ArrowBigRightDash;
|
|
}
|
|
}
|
|
|
|
function getVersionActionLabel(icon: VersionArrowProps["icon"], target: CampaignVersionListItem | null): string {
|
|
const versionLabel = target ? `version #${target.version_number}` : "version";
|
|
switch (icon) {
|
|
case "first":
|
|
return i18nMessage("i18n:govoplan-campaign.open_first_value.ea8f5c5b", { value0: versionLabel });
|
|
case "previous":
|
|
return i18nMessage("i18n:govoplan-campaign.open_previous_value.e8d4794b", { value0: versionLabel });
|
|
case "next":
|
|
return i18nMessage("i18n:govoplan-campaign.open_next_value.1315037e", { value0: versionLabel });
|
|
case "latest":
|
|
return i18nMessage("i18n:govoplan-campaign.open_latest_value.40bdb320", { value0: versionLabel });
|
|
}
|
|
}
|
|
|
|
function versionTarget(pathname: string, search: string, versionId: string): string {
|
|
const params = new URLSearchParams(search);
|
|
params.set("version", versionId);
|
|
return `${pathname}?${params.toString()}`;
|
|
}
|