49 lines
2.8 KiB
TypeScript
49 lines
2.8 KiB
TypeScript
import { useState } from "react";
|
|
import TemplatesPage from "../../../govoplan-templates/webui/src/features/templates/TemplatesPage";
|
|
import { generatedTranslations as templateTranslations } from "../../../govoplan-templates/webui/src/i18n/generatedTranslations";
|
|
import "../../../govoplan-templates/webui/src/styles/templates.css";
|
|
import Button from "../src/components/Button";
|
|
import Dialog from "../src/components/Dialog";
|
|
import { DialogForm, DialogSection } from "../src/components/DialogAnatomy";
|
|
import { FormGrid } from "../src/components/ContentGrid";
|
|
import FormField from "../src/components/FormField";
|
|
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
|
|
import type { AuthInfo } from "../src/types";
|
|
|
|
const fixtureAuth: AuthInfo = {
|
|
user: { id: "fixture-user", account_id: "fixture-account", email: "fixture@example.test" },
|
|
tenant: { id: "fixture-tenant", name: "Fixture", slug: "fixture" },
|
|
scopes: ["templates:template:read", "templates:template:write"],
|
|
roles: [], groups: [], profile_loaded: true, roles_loaded: true, groups_loaded: true
|
|
};
|
|
|
|
export default function DialogLayoutScenario({ templates = false, language = "de" }: { templates?: boolean; language?: string }) {
|
|
const [open, setOpen] = useState(true);
|
|
if (templates) return <PlatformLanguageProvider preferredLanguageCode={language} moduleTranslations={[templateTranslations]}>
|
|
<TemplatesPage settings={{ apiBaseUrl: "", apiKey: "", accessToken: "" }} auth={fixtureAuth} />
|
|
</PlatformLanguageProvider>;
|
|
return <main className="conformance-root">
|
|
<Button onClick={() => setOpen(true)}>Open layout fixture</Button>
|
|
<Dialog
|
|
open={open}
|
|
title={`LangeDialogüberschriftOhneTrennzeichen${"Zusatz".repeat(12)}`}
|
|
description={`Referenz:${"abcdef0123456789".repeat(12)}`}
|
|
onClose={() => setOpen(false)}
|
|
footer={<><Button>Abbrechen</Button><Button variant="primary">Änderungen speichern</Button></>}
|
|
>
|
|
<DialogForm onSubmit={(event) => event.preventDefault()}>
|
|
<DialogSection>
|
|
<FormGrid columns={2} collapseAt="standard">
|
|
<FormField label={`Feldname${"Lang".repeat(20)}`}><input defaultValue={"Langer Wert ".repeat(20)} /></FormField>
|
|
<FormField label="Auswahl"><select defaultValue="long"><option value="long">{"Lange Auswahlliste ".repeat(20)}</option></select></FormField>
|
|
</FormGrid>
|
|
</DialogSection>
|
|
<FormField label="Mehrzeiliger Inhalt"><textarea defaultValue={"Nachweistext ".repeat(60)} rows={5} /></FormField>
|
|
<div style={{ maxWidth: "100%", minWidth: 0, overflowX: "auto" }} data-testid="dialog-local-scroll">
|
|
<table style={{ width: 1400 }}><tbody><tr><td>Absichtlich breite Tabelle</td><td>Letzte Tabellenspalte</td></tr></tbody></table>
|
|
</div>
|
|
</DialogForm>
|
|
</Dialog>
|
|
</main>;
|
|
}
|