283 lines
10 KiB
TypeScript
283 lines
10 KiB
TypeScript
import { inventoryApi, inventoryKeys } from "@metis/assets/client";
|
|
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { Card, CardContent } from "@repo/shadcn-ui/components/card";
|
|
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
|
|
import { Input } from "@repo/shadcn-ui/components/input";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { CompanyDTO } from "../../common";
|
|
import { accessApi, accessKeys } from "../access/access-api";
|
|
import { accessLabel } from "../access/access-labels";
|
|
import { FolderMappingsPage } from "../folders/folder-mappings-page";
|
|
import { MailConfigurationsPage } from "../mail/mail-configurations-page";
|
|
import { PrinterConfigurationsPage } from "../printers/printer-configurations-page";
|
|
|
|
import { ProfileFeedback } from "./profile-feedback";
|
|
import { profileApi, profileKeys } from "./work-profile-api";
|
|
import { WorkProfileForm } from "./work-profile-form";
|
|
|
|
export function WorkProfilesPage({
|
|
company,
|
|
csrfToken,
|
|
}: {
|
|
company: CompanyDTO;
|
|
csrfToken: string;
|
|
}) {
|
|
const { t, i18n } = useTranslation("companies");
|
|
const [configuration, setConfiguration] = useState<{
|
|
kind: "folders" | "mail" | "printers";
|
|
profileId: string;
|
|
}>();
|
|
const [editor, setEditor] = useState<string>();
|
|
const [view, setView] = useState<string>();
|
|
const [search, setSearch] = useState("");
|
|
const [archived, setArchived] = useState(false);
|
|
const query = useQuery({
|
|
queryKey: profileKeys.company(company.id),
|
|
queryFn: () => profileApi.get(company.id),
|
|
});
|
|
const inventory = useQuery({
|
|
queryKey: inventoryKeys.company(company.id),
|
|
queryFn: () => inventoryApi.get(company.id),
|
|
});
|
|
const access = useQuery({
|
|
queryKey: accessKeys.scope(company.id),
|
|
queryFn: () => accessApi.request(company.id),
|
|
});
|
|
const profiles = query.data?.profiles ?? [];
|
|
const edited = profiles.find((item) => item.id === editor);
|
|
const viewed = profiles.find((item) => item.id === view);
|
|
const person = (id: string) => company.people.find((item) => item.id === id)?.name ?? id;
|
|
const asset = (id: string) =>
|
|
inventory.data?.assets.find((item) => item.id === id)?.values.name ?? id;
|
|
const account = (id: string | null) => {
|
|
const item = access.data?.items.find((item) => item.id === id);
|
|
return item
|
|
? accessLabel(item, access.data?.items ?? [], company.people)
|
|
: (id ?? t("profiles.noAccount"));
|
|
};
|
|
const filtered = profiles.filter(
|
|
(item) =>
|
|
(archived || item.values.active) &&
|
|
[item.values.name, person(item.values.personId), asset(item.values.assetId)].some((value) =>
|
|
value.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())
|
|
)
|
|
);
|
|
const ready = [query.data, inventory.data, access.data].every(Boolean);
|
|
if (configuration) {
|
|
return (
|
|
<ProfileConfigurations
|
|
company={company}
|
|
csrfToken={csrfToken}
|
|
onBack={() => setConfiguration(undefined)}
|
|
selection={configuration}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<div className="space-y-5">
|
|
<header className="flex flex-wrap items-center justify-between gap-4">
|
|
<h2 className="text-xl font-semibold">{t("profiles.title")}</h2>
|
|
<Button disabled={!ready} onClick={() => setEditor("new")}>
|
|
{t("profiles.new")}
|
|
</Button>
|
|
</header>
|
|
<Input
|
|
aria-label={t("profiles.search")}
|
|
onChange={(event) => setSearch(event.target.value)}
|
|
placeholder={t("profiles.search")}
|
|
value={search}
|
|
/>
|
|
<label className="flex items-center gap-2 text-sm">
|
|
<input
|
|
checked={archived}
|
|
onChange={(event) => setArchived(event.target.checked)}
|
|
type="checkbox"
|
|
/>
|
|
{t("profiles.showArchived")}
|
|
</label>
|
|
{(query.isPending || inventory.isPending || access.isPending) && (
|
|
<p role="status">{t("loading")}</p>
|
|
)}
|
|
<ProfileFeedback error={query.error ?? inventory.error ?? access.error} />
|
|
{(query.isError || inventory.isError || access.isError) && (
|
|
<Button
|
|
onClick={() => {
|
|
Promise.all([query.refetch(), inventory.refetch(), access.refetch()]).catch(
|
|
() => undefined
|
|
);
|
|
}}
|
|
variant="outline"
|
|
>
|
|
{t("retry")}
|
|
</Button>
|
|
)}
|
|
{ready && (
|
|
<Card>
|
|
<CardContent className="divide-y pt-3">
|
|
{!filtered.length && (
|
|
<p className="py-4 text-muted-foreground">
|
|
{t(profiles.length ? "noResults" : "profiles.empty")}
|
|
</p>
|
|
)}
|
|
{filtered.map((item) => (
|
|
<div className="flex flex-wrap items-center justify-between gap-4 py-4" key={item.id}>
|
|
<div className="min-w-0 break-words">
|
|
<h3 className="font-medium">
|
|
{item.values.name} ·{" "}
|
|
{t(item.values.active ? "profiles.active" : "profiles.inactive")}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{person(item.values.personId)} · {asset(item.values.assetId)}
|
|
</p>
|
|
<p className="mt-1 text-sm">{account(item.values.accountId)}</p>
|
|
{item.needsReview && (
|
|
<p className="mt-2 text-sm text-amber-700">{t("profiles.review")}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
onClick={() => setConfiguration({ kind: "printers", profileId: item.id })}
|
|
size="sm"
|
|
variant="outline"
|
|
>
|
|
{t("printers.title")}
|
|
</Button>
|
|
<Button
|
|
onClick={() => setConfiguration({ kind: "folders", profileId: item.id })}
|
|
size="sm"
|
|
variant="outline"
|
|
>
|
|
{t("folders.title")}
|
|
</Button>
|
|
<Button
|
|
onClick={() => setConfiguration({ kind: "mail", profileId: item.id })}
|
|
size="sm"
|
|
variant="outline"
|
|
>
|
|
{t("mail.title")}
|
|
</Button>
|
|
<Button onClick={() => setView(item.id)} size="sm" variant="outline">
|
|
{t("profiles.history")}
|
|
</Button>
|
|
<Button onClick={() => setEditor(item.id)} size="sm" variant="outline">
|
|
{t("edit")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
{editor && (
|
|
<FormDialog
|
|
cancelLabel={t("cancel")}
|
|
formActions
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setEditor(undefined);
|
|
}
|
|
}}
|
|
open
|
|
title={t(edited ? "profiles.edit" : "profiles.new")}
|
|
wide
|
|
>
|
|
<WorkProfileForm
|
|
company={company}
|
|
csrfToken={csrfToken}
|
|
onSaved={() => setEditor(undefined)}
|
|
profile={edited}
|
|
/>
|
|
</FormDialog>
|
|
)}
|
|
{viewed && (
|
|
<FormDialog
|
|
cancelLabel={t("close")}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setView(undefined);
|
|
}
|
|
}}
|
|
open
|
|
title={t("profiles.history")}
|
|
wide
|
|
>
|
|
<div className="space-y-4">
|
|
<p className="font-medium">
|
|
{person(viewed.values.personId)} · {asset(viewed.values.assetId)}
|
|
</p>
|
|
<p>
|
|
{t("profiles.account")}: {account(viewed.values.accountId)}
|
|
</p>
|
|
{viewed.needsReview && <p className="text-amber-700">{t("profiles.review")}</p>}
|
|
<p className="text-sm text-muted-foreground">{t("profiles.unknownConfiguration")}</p>
|
|
<div>
|
|
<h3 className="font-medium">{t("profiles.stations")}</h3>
|
|
<p className="text-sm">
|
|
{inventory.data?.workstations
|
|
.filter(
|
|
(station) =>
|
|
station.values.active &&
|
|
[...station.values.assetIds, ...station.values.sharedAssetIds].includes(
|
|
viewed.values.assetId
|
|
)
|
|
)
|
|
.map((station) => station.values.name)
|
|
.join(" · ") || t("profiles.noStation")}
|
|
</p>
|
|
</div>
|
|
<ol className="space-y-3">
|
|
{[...viewed.history].reverse().map((revision) => (
|
|
<li className="rounded-md border p-3 text-sm" key={revision.id}>
|
|
<p className="font-medium">
|
|
{new Intl.DateTimeFormat(i18n.language, {
|
|
dateStyle: "medium",
|
|
timeStyle: "short",
|
|
}).format(new Date(revision.recordedAt))}{" "}
|
|
· {revision.actorName}
|
|
</p>
|
|
<p>
|
|
{revision.values.name} ·{" "}
|
|
{t(revision.values.active ? "profiles.active" : "profiles.inactive")}
|
|
</p>
|
|
<p>{account(revision.values.accountId)}</p>
|
|
{revision.values.notes && (
|
|
<p className="mt-2 whitespace-pre-wrap">{revision.values.notes}</p>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</FormDialog>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ProfileConfigurations({
|
|
company,
|
|
csrfToken,
|
|
selection,
|
|
onBack,
|
|
}: {
|
|
company: CompanyDTO;
|
|
csrfToken: string;
|
|
selection: { kind: "folders" | "mail" | "printers"; profileId: string };
|
|
onBack: () => void;
|
|
}) {
|
|
const { t } = useTranslation("companies");
|
|
const props = { company, csrfToken, initialProfileId: selection.profileId };
|
|
return (
|
|
<div className="space-y-4">
|
|
<Button onClick={onBack} variant="outline">
|
|
{t("profiles.title")}
|
|
</Button>
|
|
{selection.kind === "folders" && <FolderMappingsPage {...props} />}
|
|
{selection.kind === "mail" && <MailConfigurationsPage {...props} />}
|
|
{selection.kind === "printers" && <PrinterConfigurationsPage {...props} />}
|
|
</div>
|
|
);
|
|
}
|