feat(web): set breadcrumb trails on all AppShell routes (#54)

This commit is contained in:
2026-06-07 19:18:43 +02:00
parent af6004f731
commit 4b55218c69
9 changed files with 68 additions and 8 deletions
+2
View File
@@ -6,6 +6,7 @@ import type { components } from "../api/schema";
import { useObject, useFieldDefinitions } from "../api/queries";
import { formatDate } from "../lib/format-date";
import { useDocumentTitle } from "../lib/use-document-title";
import { useBreadcrumb } from "../shell/use-breadcrumb";
import { DeleteObjectDialog } from "./delete-object-dialog";
import { FlexibleFieldValue } from "./flexible-field-value";
import { PublishControl } from "./publish-control";
@@ -52,6 +53,7 @@ function ObjectDetailLoaded({ object }: { object: AdminObjectView }) {
const { data: definitions } = useFieldDefinitions();
useDocumentTitle(object.object_number);
useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: object.object_number }]);
// Prefer the active locale's label, then English, then the raw key.
const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+23 -6
View File
@@ -2,16 +2,31 @@ import { useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import type { components } from "../api/schema";
import { useObject, useUpdateObject, useSetFields, FieldRejection } from "../api/queries";
import { useBreadcrumb } from "../shell/use-breadcrumb";
import { ObjectForm, type ObjectCore, type ObjectFormValues } from "./object-form";
type AdminObjectView = components["schemas"]["AdminObjectView"];
export function ObjectEditForm() {
const { t } = useTranslation();
const { id } = useParams();
const { data: object, isLoading } = useObject(id!);
if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
if (!object) return <p className="p-4 text-sm text-muted-foreground">{t("objects.notFound")}</p>;
return <ObjectEditFormLoaded object={object} id={id!} />;
}
function ObjectEditFormLoaded({ object, id }: { object: AdminObjectView; id: string }) {
const { t } = useTranslation();
const navigate = useNavigate();
const location = useLocation();
const { data: object, isLoading } = useObject(id!);
const update = useUpdateObject();
const setFields = useSetFields();
@@ -27,9 +42,11 @@ export function ObjectEditForm() {
locationState?.fieldErrorKey ?? null,
);
if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;
if (!object) return <p className="p-4 text-sm text-muted-foreground">{t("objects.notFound")}</p>;
useBreadcrumb([
{ label: t("nav.objects"), to: "/objects" },
{ label: object.object_number, to: `/objects/${id}` },
{ label: t("actions.edit") },
]);
const core: ObjectCore = {
object_number: object.object_number,
@@ -49,8 +66,8 @@ export function ObjectEditForm() {
setFieldErrorKey(null);
try {
await update.mutateAsync({ id: id!, body: values.core });
await setFields.mutateAsync({ id: id!, fields: values.fields });
await update.mutateAsync({ id, body: values.core });
await setFields.mutateAsync({ id, fields: values.fields });
} catch (e) {
if (e instanceof FieldRejection) {
setFieldErrorKey(e.field);
+2
View File
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
import { ObjectForm, type ObjectFormValues } from "./object-form";
import { useCreateObject, useSetFields, FieldRejection } from "../api/queries";
import { useDocumentTitle } from "../lib/use-document-title";
import { useBreadcrumb } from "../shell/use-breadcrumb";
import { PageTitle } from "@/components/ui/page-title";
export function ObjectNewPage() {
@@ -15,6 +16,7 @@ export function ObjectNewPage() {
const [error, setError] = useState<string | null>(null);
useDocumentTitle(t("objects.new"));
useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: t("objects.new") }]);
const onSubmit = async (values: ObjectFormValues) => {
setError(null);