Skip to content

Commit

Permalink
Refactor watchers for improved reactivity
Browse files Browse the repository at this point in the history 
Addresses RISDEV-2914

Co-Authored-By: Leonie Koch <lk.leonie.koch@gmail.com>
  • Loading branch information
@zechmeister @leonie-koch
zechmeister and leonie-koch committed Dec 15, 2023
1 parent 9f05dd2 commit 5ad55c8
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 82 deletions.
67 changes: 22 additions & 45 deletions frontend/src/components/EditableListCaselaw.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts" setup generic="T extends ListItem">
import type { Component, Ref } from "vue"
import { ref, watch, onMounted, nextTick } from "vue"
import { ref, watch, nextTick, onMounted } from "vue"
import ListItem from "@/domain/editableListItem"
import DataSetSummary from "@/shared/components/DataSetSummary.vue"
import IconAdd from "~icons/ic/baseline-add"
Expand Down Expand Up @@ -30,10 +30,10 @@ const emit = defineEmits<{
deleteLastEntry: [void]
}>()
const modelValueList = ref<T[]>([]) as Ref<T[]>
const localList = ref([...props.modelValue]) as Ref<T[]>
const modelValueList = ref<T[]>([...props.modelValue]) as Ref<T[]>
const elementList = ref<HTMLElement[]>([])
const editIndex = ref<number | undefined>(undefined)
const editIndex = ref<number | undefined>()
const focusFirstFocusableElementOfCurrentEditElement = async () => {
await nextTick()
Expand All @@ -57,73 +57,50 @@ function setEditIndex(index?: number) {
function addNewListEntry() {
const { defaultValue } = props
const newEntry =
typeof defaultValue === "object" ? { ...defaultValue } : defaultValue
localList.value.push(newEntry)
editIndex.value = localList.value.length - 1
modelValueList.value.push(
typeof defaultValue === "object" ? { ...defaultValue } : defaultValue,
)
editIndex.value = modelValueList.value.length - 1
}
function removeListEntry(index: number) {
localList.value.splice(index, 1)
modelValueList.value = localList.value
modelValueList.value.splice(index, 1)
if (editIndex.value !== undefined && index < editIndex.value) {
editIndex.value -= 1
}
emit(
"update:modelValue",
[...props.modelValue].filter((_, i) => i !== index),
)
}
function updateModel() {
setEditIndex()
modelValueList.value = localList.value
emit("update:modelValue", modelValueList.value)
}
watch(
() => props.modelValue,
() => {
modelValueList.value = props.modelValue
localList.value = props.modelValue.map((value, index) =>
index != editIndex.value ? value : localList.value[index],
modelValueList.value = modelValueList.value.map((value, index) =>
index == editIndex.value ? value : props.modelValue[index],
)
},
{ immediate: true, deep: true },
)
watch(
modelValueList,
() => {
emit("update:modelValue", modelValueList.value)
},
{ deep: true, immediate: true },
)
watch(
localList,
() => {
setEmptyEntryInEditMode()
if (localList.value.length == 0) {
addNewListEntry()
}
},
{ deep: true, immediate: true },
)
function setEmptyEntryInEditMode(): void {
const emptyItemIndex = localList.value.findIndex((element) => element.isEmpty)
if (emptyItemIndex !== -1) setEditIndex(emptyItemIndex)
}
onMounted(() => {
localList.value = [...props.modelValue]
if (localList.value.length == 0) {
addNewListEntry()
}
if (props.modelValue.length == 0) addNewListEntry()
})
</script>

<template>
<div class="w-full">
<div
v-for="(entry, index) in localList"
v-for="(entry, index) in modelValueList"
:key="index"
ref="elementList"
aria-label="Listen Eintrag"
Expand Down Expand Up @@ -170,9 +147,9 @@ onMounted(() => {
<component
:is="editComponent"
v-else
v-model="localList[index]"
v-model="modelValueList[index]"
class="py-16 group-first:pt-0"
:model-value-list="localList"
:model-value-list="modelValueList"
@add-entry="updateModel"
/>
</div>
Expand Down
12 changes: 7 additions & 5 deletions frontend/test/components/activeCitations.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ describe("Active Citations", () => {

it("renders empty active citation in edit mode, when no activeCitations in list", async () => {
renderComponent()
expect(screen.getAllByLabelText("Listen Eintrag").length).toBe(1)
expect((await screen.findAllByLabelText("Listen Eintrag")).length).toBe(1)
expect(screen.getByLabelText("Art der Zitierung")).toBeVisible()
expect(screen.getByLabelText("Gericht der Aktivzitierung")).toBeVisible()
expect(
Expand Down Expand Up @@ -186,7 +186,9 @@ describe("Active Citations", () => {

it("creates new active citation manually", async () => {
const { user } = renderComponent()
const input = screen.getByLabelText("Aktenzeichen der Aktivzitierung")
const input = await screen.findByLabelText(
"Aktenzeichen der Aktivzitierung",
)
await user.type(input, "123")
const button = screen.getByLabelText("Aktivzitierung speichern")
await user.click(button)
Expand Down Expand Up @@ -428,16 +430,16 @@ describe("Active Citations", () => {
const { user } = renderComponent()

expect(screen.queryByText(/test fileNumber/)).not.toBeInTheDocument()
await user.click(screen.getByLabelText("Nach Entscheidung suchen"))
await user.click(await screen.findByLabelText("Nach Entscheidung suchen"))

expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
})

it("adds active citation from search results", async () => {
const { user } = renderComponent()

await user.click(screen.getByLabelText("Nach Entscheidung suchen"))
await user.click(screen.getByLabelText("Treffer übernehmen"))
await user.click(await screen.findByLabelText("Nach Entscheidung suchen"))
await user.click(await screen.findByLabelText("Treffer übernehmen"))
expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
})

Expand Down
32 changes: 19 additions & 13 deletions frontend/test/components/ensuingDecisions.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,22 +136,24 @@ describe("EnsuingDecisions", () => {

it("renders empty ensuing decision in edit mode, when no ensuingDecisions in list", async () => {
renderComponent()
expect(screen.getByLabelText("Anhängige Entscheidung")).toBeVisible()
expect(await screen.findByLabelText("Anhängige Entscheidung")).toBeVisible()
expect(
screen.getByLabelText("Gericht Nachgehende Entscheidung"),
await screen.findByLabelText("Gericht Nachgehende Entscheidung"),
).toBeVisible()
expect(
screen.getByLabelText("Entscheidungsdatum Nachgehende Entscheidung"),
await screen.findByLabelText(
"Entscheidungsdatum Nachgehende Entscheidung",
),
).toBeVisible()
expect(
screen.getByLabelText("Aktenzeichen Nachgehende Entscheidung"),
await screen.findByLabelText("Aktenzeichen Nachgehende Entscheidung"),
).toBeInTheDocument()
expect(
screen.getByLabelText("Dokumenttyp Nachgehende Entscheidung"),
await screen.findByLabelText("Dokumenttyp Nachgehende Entscheidung"),
).toBeInTheDocument()
expect(screen.getByLabelText("Vermerk")).toBeInTheDocument()
expect(await screen.findByLabelText("Vermerk")).toBeInTheDocument()
expect(
screen.getByLabelText("Nachgehende Entscheidung speichern"),
await screen.findByLabelText("Nachgehende Entscheidung speichern"),
).toBeDisabled()
})

Expand All @@ -169,11 +171,15 @@ describe("EnsuingDecisions", () => {
expect(screen.getByText(/345/)).toBeInTheDocument()
})

it("creates new ensuing desision manually", async () => {
it("creates new ensuing decision manually", async () => {
const { user } = renderComponent()
const input = screen.getByLabelText("Aktenzeichen Nachgehende Entscheidung")
const input = await screen.findByLabelText(
"Aktenzeichen Nachgehende Entscheidung",
)
await user.type(input, "123")
const button = screen.getByLabelText("Nachgehende Entscheidung speichern")
const button = await screen.findByLabelText(
"Nachgehende Entscheidung speichern",
)
await user.click(button)

expect(screen.getAllByLabelText("Listen Eintrag").length).toBe(1)
Expand Down Expand Up @@ -342,16 +348,16 @@ describe("EnsuingDecisions", () => {
const { user } = renderComponent()

expect(screen.queryByText(/test fileNumber/)).not.toBeInTheDocument()
await user.click(screen.getByLabelText("Nach Entscheidung suchen"))
await user.click(await screen.findByLabelText("Nach Entscheidung suchen"))

expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
})

it("adds ensuing decision from search results", async () => {
const { user } = renderComponent()

await user.click(screen.getByLabelText("Nach Entscheidung suchen"))
await user.click(screen.getByLabelText("Treffer übernehmen"))
await user.click(await screen.findByLabelText("Nach Entscheidung suchen"))
await user.click(await screen.findByLabelText("Treffer übernehmen"))
expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
})

Expand Down
22 changes: 14 additions & 8 deletions frontend/test/components/normReferences.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,21 @@ describe("Norm references", () => {
Promise.resolve({ status: 200, data: dropdownAbbreviationItems }),
)

it("renders empty norm reference in edit mode, when no norm references in list", () => {
it("renders empty norm reference in edit mode, when no norm references in list", async () => {
renderComponent()
expect(screen.getAllByLabelText("Listen Eintrag").length).toBe(1)
expect(screen.getByLabelText("RIS-Abkürzung der Norm")).toBeInTheDocument()
expect(screen.getByLabelText("Einzelnorm der Norm")).toBeInTheDocument()
expect(screen.getByLabelText("Fassungsdatum der Norm")).toBeInTheDocument()
expect(screen.getByLabelText("Jahr der Norm")).toBeInTheDocument()
expect(screen.getByLabelText("Jahr der Norm")).toBeInTheDocument()
expect(screen.getByLabelText("Norm speichern")).toBeDisabled()
expect((await screen.findAllByLabelText("Listen Eintrag")).length).toBe(1)
expect(
await screen.findByLabelText("RIS-Abkürzung der Norm"),
).toBeInTheDocument()
expect(
await screen.findByLabelText("Einzelnorm der Norm"),
).toBeInTheDocument()
expect(
await screen.findByLabelText("Fassungsdatum der Norm"),
).toBeInTheDocument()
expect(await screen.findByLabelText("Jahr der Norm")).toBeInTheDocument()
expect(await screen.findByLabelText("Jahr der Norm")).toBeInTheDocument()
expect(await screen.findByLabelText("Norm speichern")).toBeDisabled()
expect(
screen.queryByText(/Pflichtfeld nicht befüllt/),
).not.toBeInTheDocument()
Expand Down
26 changes: 15 additions & 11 deletions frontend/test/components/previousDecisions.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,22 +135,24 @@ describe("PreviousDecisions", () => {
it("renders empty previous decision in edit mode, when no previousDecisions in list", async () => {
renderComponent()
expect(
screen.getByLabelText("Gericht Vorgehende Entscheidung"),
await screen.findByLabelText("Gericht Vorgehende Entscheidung"),
).toBeVisible()
expect(
screen.getByLabelText("Entscheidungsdatum Vorgehende Entscheidung"),
await screen.findByLabelText(
"Entscheidungsdatum Vorgehende Entscheidung",
),
).toBeVisible()
expect(
screen.getByLabelText("Datum Unbekannt Vorgehende Entscheidung"),
await screen.findByLabelText("Datum Unbekannt Vorgehende Entscheidung"),
).toBeInTheDocument()
expect(
screen.getByLabelText("Aktenzeichen Vorgehende Entscheidung"),
await screen.findByLabelText("Aktenzeichen Vorgehende Entscheidung"),
).toBeInTheDocument()
expect(
screen.getByLabelText("Dokumenttyp Vorgehende Entscheidung"),
await screen.findByLabelText("Dokumenttyp Vorgehende Entscheidung"),
).toBeInTheDocument()
expect(
screen.getByLabelText("Vorgehende Entscheidung speichern"),
await screen.findByLabelText("Vorgehende Entscheidung speichern"),
).toBeDisabled()
})

Expand All @@ -170,7 +172,9 @@ describe("PreviousDecisions", () => {

it("creates new proceeding desision manually", async () => {
const { user } = renderComponent()
const input = screen.getByLabelText("Aktenzeichen Vorgehende Entscheidung")
const input = await screen.findByLabelText(
"Aktenzeichen Vorgehende Entscheidung",
)
await user.type(input, "123")
const button = screen.getByLabelText("Vorgehende Entscheidung speichern")
await user.click(button)
Expand Down Expand Up @@ -368,17 +372,17 @@ describe("PreviousDecisions", () => {
const { user } = renderComponent()

expect(screen.queryByText(/test fileNumber/)).not.toBeInTheDocument()
await user.click(screen.getByLabelText("Nach Entscheidung suchen"))
await user.click(await screen.findByLabelText("Nach Entscheidung suchen"))

expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
})

it("adds previous decision from search results", async () => {
const { user } = renderComponent()

await user.click(screen.getByLabelText("Nach Entscheidung suchen"))
await user.click(screen.getByLabelText("Treffer übernehmen"))
expect(screen.getAllByText(/test fileNumber/).length).toBe(1)
await user.click(await screen.findByLabelText("Nach Entscheidung suchen"))
await user.click(await screen.findByLabelText("Treffer übernehmen"))
expect((await screen.findAllByText(/test fileNumber/)).length).toBe(1)
})

it("indicates that search result already added to previous decisions", async () => {
Expand Down

0 comments on commit 5ad55c8

Please sign in to comment.