Display docunit summary in category importer

RISDEV-5892
digitalservicebund · Dec 18, 2024 · adb9310 · adb9310
1 parent c01c3f6
commit adb9310
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 38 deletions.
diff --git a/frontend/src/components/IconBadge.vue b/frontend/src/components/IconBadge.vue
@@ -20,10 +20,10 @@ export interface IconBadgeProps {
 
 <template>
   <div
-    class="ds-label-02-reg flex w-[fit-content] items-center rounded-full px-4 py-2"
+    class="ds-label-02-reg w-[fit-content] rounded-full px-4 py-2"
     :class="backgroundColor"
   >
-    <component :is="icon" :class="color" />
-    <span class="mx-2"> {{ label }}</span>
+    <component :is="icon" class="inline-block" :class="color" />
+    <span class="mx-2 align-middle"> {{ label }}</span>
   </div>
 </template>
diff --git a/frontend/src/components/category-import/CategoryImport.vue b/frontend/src/components/category-import/CategoryImport.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import dayjs from "dayjs"
-import { ref } from "vue"
+import { ref, toRaw, computed } from "vue"
 import { RouterLink } from "vue-router"
 import ImportKeywords from "@/components/category-import/ImportKeywords.vue"
 import IconBadge from "@/components/IconBadge.vue"
 import InputField from "@/components/input/InputField.vue"
 import TextButton from "@/components/input/TextButton.vue"
 import TextInput from "@/components/input/TextInput.vue"
-import LinkElement from "@/components/LinkElement.vue"
 import { useStatusBadge } from "@/composables/useStatusBadge"
 import DocumentUnit from "@/domain/documentUnit"
 import documentUnitService from "@/services/documentUnitService"
+import BaselineArrowOutward from "~icons/ic/baseline-arrow-outward"
 import IconSearch from "~icons/ic/baseline-search"
 
 const documentNumber = ref("")
 const documentUnitToImport = ref<DocumentUnit | undefined>(undefined)
 const errorMessage = ref<string | undefined>(undefined)
+const statusBadge = computed(
+  () => useStatusBadge(documentUnitToImport.value?.status).value,
+)
 
 /**
  * Loads the document unit to import category data from.
@@ -70,40 +72,33 @@ async function searchForDocumentUnit() {
 
     <div
       v-if="documentUnitToImport"
-      class="ds-label-02-reg mt-24 flex flex-col gap-16 bg-blue-100 p-16"
+      class="ds-label-01-reg mt-24 flex flex-col gap-16 bg-blue-100 p-16"
     >
-      <RouterLink
-        v-if="documentUnitToImport.documentNumber"
-        tabindex="-1"
-        target="_blank"
-        :to="{
-          name: 'caselaw-documentUnit-documentNumber-preview',
-          params: { documentNumber: documentUnitToImport.documentNumber },
-        }"
-      >
-        <LinkElement :title="documentUnitToImport.documentNumber" />
-      </RouterLink>
-
-      <IconBadge v-bind="useStatusBadge(documentUnitToImport.status).value" />
-
-      <div class="flex flex-col">
-        <span class="ds-label-02-bold text-gray-900"> Gericht</span>
-        {{ documentUnitToImport.coreData?.court?.label }}
-      </div>
-
-      <div class="flex flex-col">
-        <span class="ds-label-02-bold text-gray-900"> Aktenzeichen</span>
-        {{ documentUnitToImport.coreData?.fileNumbers?.join(", ") }}
-      </div>
+      <!-- Todo: Wrap this docunit summary in a reusable component -->
+      <span>
+        {{ documentUnitToImport.renderDecision }}
+        <IconBadge
+          :background-color="statusBadge.backgroundColor"
+          class="ml-4 inline-block"
+          :color="statusBadge.color"
+          :icon="toRaw(statusBadge.icon)"
+          :label="statusBadge.label"
+        />
 
-      <div class="flex flex-col">
-        <span class="ds-label-02-bold text-gray-900">Entscheidungsdatum</span>
-        {{
-          dayjs(documentUnitToImport.coreData?.decisionDate).format(
-            "DD.MM.YYYY",
-          )
-        }}
-      </div>
+        <span class="ds-label-01-reg ml-8 mr-8">|</span>
+        <RouterLink
+          class="nowrap ds-link-01-bold border-b-2 border-blue-800 leading-24 no-underline focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800"
+          tabindex="-1"
+          target="_blank"
+          :to="{
+            name: 'caselaw-documentUnit-documentNumber-preview',
+            params: { documentNumber: documentUnitToImport.documentNumber },
+          }"
+        >
+          {{ documentUnitToImport.documentNumber }}
+          <BaselineArrowOutward class="mb-4 inline w-24" />
+        </RouterLink>
+      </span>
 
       <ImportKeywords
         :importable-keywords="

diff --git a/frontend/src/domain/documentUnit.ts b/frontend/src/domain/documentUnit.ts
@@ -1,3 +1,4 @@
+import dayjs from "dayjs"
 import ActiveCitation from "./activeCitation"
 import DocumentationOffice from "./documentationOffice"
 import DocumentUnitListEntry from "./documentUnitListEntry"
@@ -246,6 +247,20 @@ export default class DocumentUnit {
     return this.attachments && this.attachments.length > 0
   }
 
+  get renderDecision(): string {
+    console.log("hi", this.status)
+    return [
+      ...(this.coreData.court ? [`${this.coreData.court?.label}`] : []),
+      ...(this.coreData.decisionDate
+        ? [dayjs(this.coreData.decisionDate).format("DD.MM.YYYY")]
+        : []),
+      ...(this.coreData.fileNumbers ? [this.coreData.fileNumbers[0]] : []),
+      ...(this.coreData.documentType?.label
+        ? [this.coreData.documentType.label]
+        : []),
+    ].join(", ")
+  }
+
   get missingRequiredFields() {
     return DocumentUnit.requiredFields.filter((field) =>
       this.isEmpty(this.coreData[field]),