diff --git a/frontend/src/components/DocumentUnitTexts.vue b/frontend/src/components/DocumentUnitTexts.vue index bd496185d8..3c40f99818 100644 --- a/frontend/src/components/DocumentUnitTexts.vue +++ b/frontend/src/components/DocumentUnitTexts.vue @@ -21,6 +21,7 @@ const data = computed(() => aria: item.label, value: props.texts[item.name as keyof Texts], fieldType: item.fieldType, + fieldSize: item.fieldSize, } }), ) @@ -42,6 +43,7 @@ const data = computed(() => :aria-label="item.aria" class="ml-2 pl-2 outline outline-2 outline-blue-900" editable + :field-size="item.fieldSize" :value="item.value" @update-value="emit('updateValue', [item.id, $event])" /> diff --git a/frontend/src/fields/caselaw/textFields.ts b/frontend/src/fields/caselaw/textFields.ts index 075834f6ba..d0c239106b 100644 --- a/frontend/src/fields/caselaw/textFields.ts +++ b/frontend/src/fields/caselaw/textFields.ts @@ -1,16 +1,23 @@ import TextAreaInput from "@/shared/components/input/TextAreaInput.vue" import TextInput from "@/shared/components/input/TextInput.vue" +import { TextAreaInputAttributes } from "@/shared/components/input/types" function defineTextEntry( name: string, label: string, fieldType: typeof TextInput | typeof TextAreaInput, + fieldSize: TextAreaInputAttributes["fieldSize"] = "big", ) { - return { name, label, fieldType } + return { + name, + label, + fieldType, + ...(fieldType == TextAreaInput && { fieldSize }), + } } export const texts = [ defineTextEntry("decisionName", "Entscheidungsname", TextInput), - defineTextEntry("headline", "Titelzeile", TextAreaInput), + defineTextEntry("headline", "Titelzeile", TextAreaInput, "small"), defineTextEntry("guidingPrinciple", "Leitsatz", TextAreaInput), defineTextEntry("headnote", "Orientierungssatz", TextAreaInput), defineTextEntry("tenor", "Tenor", TextAreaInput), diff --git a/frontend/src/routes/kitchensink/index/textEditor.vue b/frontend/src/routes/kitchensink/index/textEditor.vue index 551e2e7960..32c6bad49e 100644 --- a/frontend/src/routes/kitchensink/index/textEditor.vue +++ b/frontend/src/routes/kitchensink/index/textEditor.vue @@ -10,20 +10,40 @@ import TextEditor from "@/shared/components/input/TextEditor.vue" Resize the window to see different views of text editor.

- + + + + + + + + + diff --git a/frontend/src/shared/components/input/FieldSize.ts b/frontend/src/shared/components/input/FieldSize.ts deleted file mode 100644 index d7ced7ffb5..0000000000 --- a/frontend/src/shared/components/input/FieldSize.ts +++ /dev/null @@ -1 +0,0 @@ -export type FieldSize = "small" | "medium" | "large" | "max" | "100percent" diff --git a/frontend/src/shared/components/input/TextEditor.vue b/frontend/src/shared/components/input/TextEditor.vue index 87bdf4f429..acd78ba2ef 100644 --- a/frontend/src/shared/components/input/TextEditor.vue +++ b/frontend/src/shared/components/input/TextEditor.vue @@ -31,6 +31,7 @@ import { TableStyle } from "../../editor/tableStyle" import TextEditorButton, { EditorButton, } from "@/shared/components/input/TextEditorButton.vue" +import { TextAreaInputAttributes } from "@/shared/components/input/types" import { useCollapsingMenuBar } from "@/shared/composables/useCollapsingMenuBar" import IconExpand from "~icons/ic/baseline-expand" import IconAlignJustify from "~icons/ic/baseline-format-align-justify" @@ -50,12 +51,14 @@ interface Props { value?: string editable?: boolean ariaLabel?: string + fieldSize?: TextAreaInputAttributes["fieldSize"] } const props = withDefaults(defineProps(), { value: undefined, editable: false, ariaLabel: "Editor Feld", + fieldSize: "medium", }) const emit = defineEmits<{ @@ -247,8 +250,15 @@ const maxButtonEntries = computed(() => const editorExpanded = ref(false) const editorSize = computed(() => { - if (props.editable) return editorExpanded.value ? "h-640" : "h-320" - else return "" + return editorExpanded.value + ? "h-640" + : props.fieldSize == "big" + ? "h-320" + : props.fieldSize == "medium" + ? "h-160" + : props.fieldSize == "small" + ? "h-96" + : undefined }) const { collapsedButtons } = useCollapsingMenuBar( editorButtons, diff --git a/frontend/src/shared/components/input/types.ts b/frontend/src/shared/components/input/types.ts index a3c53d8669..f605a183cd 100644 --- a/frontend/src/shared/components/input/types.ts +++ b/frontend/src/shared/components/input/types.ts @@ -168,16 +168,17 @@ export interface CheckboxInputField extends BaseInputField { //TEXTAREA export type TextaraInputModelType = string -export interface TextaraInputAttributes extends BaseInputAttributes { +export interface TextAreaInputAttributes extends BaseInputAttributes { placeholder?: string readOnly?: boolean autosize?: boolean rows?: number + fieldSize: "big" | "medium" | "small" } -export interface TextaraInputField extends BaseInputField { +export interface TextAreaInputField extends BaseInputField { type: InputType.TEXTAREA - inputAttributes: TextaraInputAttributes + inputAttributes: TextAreaInputAttributes } export type InputField = @@ -189,7 +190,7 @@ export type InputField = | DateChipsInputField | NestedInputField | ComboboxInputField - | TextaraInputField + | TextAreaInputField export type InputAttributes = | TextInputAttributes @@ -198,7 +199,7 @@ export type InputAttributes = | NestedInputAttributes | DateAttributes | ComboboxAttributes - | TextaraInputAttributes + | TextAreaInputAttributes export type ModelType = | TextInputModelType diff --git a/frontend/test/shared/components/input/textEditor.spec.ts b/frontend/test/shared/components/input/textEditor.spec.ts index 93fa38b7ea..22b2720e49 100644 --- a/frontend/test/shared/components/input/textEditor.spec.ts +++ b/frontend/test/shared/components/input/textEditor.spec.ts @@ -39,7 +39,6 @@ describe("text editor", async () => { render(TextEditor, { props: { value: "Test Value", - fieldSize: "large", ariaLabel: "Test Editor Feld", }, global: { plugins: [router] }, @@ -56,6 +55,20 @@ describe("text editor", async () => { expect(screen.getByTestId("Test Editor Feld")).toBeInTheDocument() }) + test.each([ + ["big", "h-320"], + ["medium", "h-160"], + ["small", "h-96"], + [undefined, "h-160"], + ])("renders %s field with correct class", async (a, expected) => { + render(TextEditor, { + props: { fieldSize: a }, + global: { plugins: [router] }, + }) + + expect(await screen.findByTestId("Editor Feld")).toHaveClass(expected) + }) + test("show buttons on focus", async () => { render(TextEditor, { props: {