David
91f1d07e97
- Implement `current-operating-systems-ui.test.py` to validate the functionality of current operating systems in the UI, including tests for source and states, computer changes, responsive design, error handling, and version saving. - Create `workplace-add-asset.test.py` to test the addition of assets to workstations, covering scenarios such as conflict resolution, responsive design on mobile, error handling during asset creation, and HTTP guards for asset management.
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import { DetailPanel } from "@repo/rdx-ui/components/detail-panel";
|
|
import { ScrollableTabsList } from "@repo/rdx-ui/components/scrollable-tabs-list";
|
|
import { ClockIcon } from "@repo/rdx-ui/lib/icons";
|
|
import { Tabs, TabsContent } from "@repo/shadcn-ui/components/tabs";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { AssetDTO, RelationshipDTO } from "../../../../common";
|
|
import { AssetRelationships } from "../../../asset-relationships";
|
|
import { AssetSupport } from "../../../support-connections";
|
|
import type { AssetDetailProps } from "../types";
|
|
|
|
import { AssetDetail } from "./asset-detail";
|
|
import { AssetHistory } from "./asset-history";
|
|
|
|
export function AssetDetailContent({
|
|
asset,
|
|
lookups,
|
|
assets,
|
|
relationships,
|
|
children,
|
|
technicalSummary,
|
|
}: AssetDetailProps & {
|
|
assets: readonly AssetDTO[];
|
|
relationships: readonly RelationshipDTO[];
|
|
}) {
|
|
const { t, i18n } = useTranslation("assets");
|
|
const [tab, setTab] = useState("information");
|
|
|
|
return (
|
|
<Tabs
|
|
className="min-w-0 gap-5"
|
|
onValueChange={(value) => {
|
|
if (typeof value === "string") {
|
|
setTab(value);
|
|
}
|
|
}}
|
|
value={tab}
|
|
>
|
|
<ScrollableTabsList
|
|
items={[
|
|
{ value: "information", label: t("assetDetail.information") },
|
|
{ value: "history", label: t("history") },
|
|
]}
|
|
label={t("assetDetail.sections")}
|
|
locale={i18n.language}
|
|
value={tab}
|
|
/>
|
|
<TabsContent className="min-w-0 space-y-5" keepMounted value="information">
|
|
<AssetDetail asset={asset} lookups={lookups} technicalSummary={technicalSummary}>
|
|
<AssetRelationships
|
|
assetId={asset.id}
|
|
companyId={asset.companyId}
|
|
sites={lookups.sites}
|
|
/>
|
|
<AssetSupport
|
|
assetId={asset.id}
|
|
companyId={asset.companyId}
|
|
retired={asset.values.status === "retired"}
|
|
/>
|
|
</AssetDetail>
|
|
{children}
|
|
</TabsContent>
|
|
<TabsContent className="min-w-0" value="history">
|
|
<DetailPanel
|
|
description={t("assetDetail.historyHint")}
|
|
icon={<ClockIcon />}
|
|
title={t("history")}
|
|
>
|
|
<AssetHistory
|
|
asset={asset}
|
|
assetName={(id) => assets.find((item) => item.id === id)?.values.name ?? "—"}
|
|
lookups={lookups}
|
|
relationships={relationships}
|
|
/>
|
|
</DetailPanel>
|
|
</TabsContent>
|
|
</Tabs>
|
|
);
|
|
}
|