69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
|
import { DetailField } from "@repo/rdx-ui/components/detail-field";
|
||
|
|
import { EntityListHeader, EntityStatus } from "@repo/rdx-ui/components/entity-list";
|
||
|
|
import { LayersIcon } from "@repo/rdx-ui/lib/icons";
|
||
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
import type { GlobalApplicationCapabilitiesDTO } from "../../../../common";
|
||
|
|
import { globalApplicationsApi } from "../../shared/api/global-applications-api";
|
||
|
|
import { globalApplicationKeys } from "../../shared/queries/global-applications-keys";
|
||
|
|
import { GlobalApplicationFeedback } from "../../shared/ui/global-application-feedback";
|
||
|
|
|
||
|
|
import { GlobalApplicationAdministration } from "./global-application-administration";
|
||
|
|
|
||
|
|
export function GlobalApplicationDetail({
|
||
|
|
id,
|
||
|
|
access,
|
||
|
|
onEdit,
|
||
|
|
}: {
|
||
|
|
id: string;
|
||
|
|
access: GlobalApplicationCapabilitiesDTO | undefined;
|
||
|
|
onEdit: (id: string) => void;
|
||
|
|
}) {
|
||
|
|
const { t } = useTranslation("resources");
|
||
|
|
const query = useQuery({
|
||
|
|
queryKey: globalApplicationKeys.detail(id),
|
||
|
|
queryFn: () => globalApplicationsApi.detail(id),
|
||
|
|
retry: false,
|
||
|
|
});
|
||
|
|
const resource = query.data?.resource;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<GlobalApplicationFeedback error={query.error} />
|
||
|
|
{query.isPending && <p role="status">{t("global.loading")}</p>}
|
||
|
|
{query.isError && (
|
||
|
|
<Button onClick={() => query.refetch()} variant="outline">
|
||
|
|
{t("global.retry")}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
{resource && (
|
||
|
|
<>
|
||
|
|
<EntityListHeader
|
||
|
|
description={t("global.detailDescription")}
|
||
|
|
icon={<LayersIcon />}
|
||
|
|
title={resource.name}
|
||
|
|
/>
|
||
|
|
{access?.canManage ? (
|
||
|
|
<GlobalApplicationAdministration access={access} id={id} onEdit={onEdit} />
|
||
|
|
) : (
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
<DetailField label={t("global.provider")}>{resource.provider ?? "—"}</DetailField>
|
||
|
|
<DetailField label={t("status")}>
|
||
|
|
<EntityStatus active={resource.active}>
|
||
|
|
{t(resource.active ? "active" : "inactive")}
|
||
|
|
</EntityStatus>
|
||
|
|
</DetailField>
|
||
|
|
<DetailField label={t("global.url")}>{resource.url ?? "—"}</DetailField>
|
||
|
|
<DetailField label={t("global.productDescription")}>
|
||
|
|
{resource.description ?? "—"}
|
||
|
|
</DetailField>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|