Load target law xml

RISDEV-3463

frontend/src/composables/useTargetLawXml.spec.ts

@@ -0,0 +1,54 @@
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import { nextTick, ref } from "vue"
+
+describe("useTargetLawXml", () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.resetAllMocks()
+  })
+
+  test("should provide the target law xml", async () => {
+    const getTargetLawXmlByEli = vi.fn().mockResolvedValue("<xml></xml>")
+
+    vi.doMock("@/services/targetLawsService", () => ({
+      getTargetLawXmlByEli,
+    }))
+
+    const { useTargetLawXml } = await import("./useTargetLawXml")
+
+    const eli = ref(
+      "eli/bund/bgbl-1/1990/s2954/2022-12-19/1/deu/regelungstext-1",
+    )
+    const xml = useTargetLawXml(eli)
+    // wait for the getTargetLawXmlByEli promise to be resolved
+    await vi.waitUntil(() => xml.value, {
+      timeout: 100,
+      interval: 20,
+    })
+
+    expect(xml.value).toBe("<xml></xml>")
+  })
+
+  test("should load the target law xml when the eli changes", async () => {
+    const getTargetLawXmlByEli = vi.fn()
+
+    vi.doMock("@/services/targetLawsService", () => ({
+      getTargetLawXmlByEli,
+    }))
+
+    const { useTargetLawXml } = await import("./useTargetLawXml")
+
+    const eli = ref(
+      "eli/bund/bgbl-1/1990/s2954/2022-12-19/1/deu/regelungstext-1",
+    )
+    useTargetLawXml(eli)
+
+    eli.value = "eli/bund/bgbl-1/1964/s593/1964-08-05/1/deu/regelungstext-1"
+    await nextTick()
+
+    eli.value = "eli/bund/bgbl-1/1964/s593/1964-08-05/1/deu/regelungstext-1"
+    await nextTick()
+
+    expect(getTargetLawXmlByEli).toBeCalledTimes(2)
+  })
+})

frontend/src/composables/useTargetLawXml.ts

@@ -0,0 +1,32 @@
+import {
+  readonly,
+  watch,
+  MaybeRefOrGetter,
+  toValue,
+  Ref,
+  DeepReadonly,
+  ref,
+} from "vue"
+import { getTargetLawXmlByEli } from "@/services/targetLawsService"
+
+/**
+ * Get the xml of a target law.
+ * @param eli a reference to the eli for which the law xml will be returned. Changing the value of the reference will load the data for the new eli.
+ * @returns A reference to the target law xml or undefined if it is not available (or still loading).
+ */
+export function useTargetLawXml(
+  eli: MaybeRefOrGetter<string>,
+): DeepReadonly<Ref<string | undefined>> {
+  const targetLawXml = ref<string>()
+  watch(
+    () => toValue(eli),
+    async (eli) => {
+      if (eli) {
+        targetLawXml.value = await getTargetLawXmlByEli(eli)
+      }
+    },
+    { immediate: true },
+  )
+
+  return readonly(targetLawXml)
+}

frontend/src/views/AmendingLawArticleEditor.vue

@@ -7,8 +7,9 @@ import { useAmendingLaw } from "@/composables/useAmendingLaw"
 import RisAmendingLawInfoHeader from "@/components/amendingLaws/RisAmendingLawInfoHeader.vue"
 import { getAmendingLawXmlByEli } from "@/services/amendingLawsService"
 import { useTargetLaw } from "@/composables/useTargetLaw"
+import { useTargetLawXml } from "@/composables/useTargetLawXml"
 
-const TARGET_LAW_XML = `<akn:activeModifications eId="meta-1_analysis-1_activemod-1"
+const PREVIEW_XML = `<akn:activeModifications eId="meta-1_analysis-1_activemod-1"
                   GUID="cd241744-ace4-436c-a0e3-dc1ee8caf3ac">
   <akn:textualMod eId="meta-1_analysis-1_activemod-1_textualmod-1"
                  GUID="2e5533d3-d0e3-43ba-aa1a-5859d108eb46"
@@ -24,7 +25,6 @@ const TARGET_LAW_XML = `<akn:activeModifications eId="meta-1_analysis-1_activemo
                period="#meta-1_geltzeiten-1_geltungszeitgr-1"/>
   </akn:textualMod>
 </akn:activeModifications>`
-const PREVIEW_XML = TARGET_LAW_XML
 const currentArticleXml = ref("")
 
 function handleSave() {
@@ -59,6 +59,10 @@ watch(
   },
   { immediate: true },
 )
+
+const targetLawXml = useTargetLawXml(
+  "eli/bund/bgbl-1/1990/s2954/2022-12-19/1/deu/regelungstext-1",
+)
 </script>
 
 <template>
@@ -101,7 +105,7 @@ watch(
             class="flex-grow border border-black"
             :readonly="true"
             :editable="false"
-            :initial-content="TARGET_LAW_XML"
+            :initial-content="targetLawXml ?? ''"
           ></RisCodeEditor>
         </div>
         <div class="row-span-2 flex flex-col gap-8">