From bff8173c801ba36e182dca3cf9dcbcf2d62093a3 Mon Sep 17 00:00:00 2001
From: Andreas Philippi <andreas.philippi@digitalservice.bund.de>
Date: Mon, 4 Mar 2024 16:15:39 +0100
Subject: [PATCH] Feat: add WIP of affected document list item

Currently not integrated in the application, but will be used for displaying
affected documents and linking to the metadata editor. Unit tests to be done.

RISDEV-3126
---
 .../RisAffectedDocumentPanel.story.vue        | 10 +++-
 .../RisAffectedDocumentPanel.vue              | 59 ++++++++++++++++++-
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.story.vue b/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.story.vue
index 176cf6c02..aeeb76ba9 100644
--- a/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.story.vue
+++ b/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.story.vue
@@ -3,5 +3,13 @@ import RisAffectedDocumentPanel from "./RisAffectedDocumentPanel.vue"
 </script>
 
 <template>
-  <RisAffectedDocumentPanel />
+  <Story>
+    <RisAffectedDocumentPanel
+      :fna="'210-5'"
+      :short-title="'BVerfSchG'"
+      :title="'Gesetz über die Zusammenarbeit des Bundes und der Länder in Angelegenheiten des Verfassungsschutzes und über das Bundesamt für Verfassungsschutz'"
+      :eli="'eli/bund/bgbl-1/1968/s537/1968-05-19/18/deu/regelungstext-1'"
+      :as-list-item="true"
+    />
+  </Story>
 </template>
diff --git a/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.vue b/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.vue
index 82fe574a1..8db2b10d5 100644
--- a/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.vue
+++ b/frontend/src/components/affectedDocuments/RisAffectedDocumentPanel.vue
@@ -1,3 +1,58 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import RisTextButton from "@/components/controls/RisTextButton.vue"
+import { computed } from "vue"
+import IcOutlineModeEdit from "~icons/ic/outline-mode-edit"
 
-<template>Hello world</template>
+const props = defineProps<{
+  /**
+   * When set, the panel will render as a list item so it can be included in
+   * ordered or unordered lists. By default, the panel will be rendered as an
+   * unsemantic div element and you'll need to ensure correct semantics by
+   * yourself.
+   */
+  asListItem: boolean
+
+  /** FNA number of the affected document. */
+  fna?: string
+
+  /** Abbreviated title of the affected document. */
+  shortTitle?: string
+
+  /** Full title of the affected document. */
+  title: string
+
+  /**
+   * ELI of the affected document. This is needed both for display as well
+   * as linking to the correct page for metadata editing.
+   */
+  eli: string
+}>()
+
+const tag = computed<"li" | "div">(() => (props.asListItem ? "li" : "div"))
+</script>
+
+<template>
+  <component :is="tag" :class="{ 'list-none': tag === 'li' }">
+    <div class="flex gap-24 bg-blue-200 p-24">
+      <div class="flex flex-1 flex-col gap-8">
+        <div v-if="fna || shortTitle">
+          <template v-if="fna">
+            FNA <span class="font-bold">{{ fna }}</span>
+          </template>
+          <span v-if="fna && shortTitle" class="mx-4 font-bold">-</span>
+          <span v-if="shortTitle" class="font-bold">{{ shortTitle }}</span>
+        </div>
+        <div v-if="title">{{ title }}</div>
+        <div v-if="eli">{{ eli }}</div>
+      </div>
+
+      <div class="flex flex-none items-center">
+        <RisTextButton
+          label="Metadaten bearbeiten"
+          :icon="IcOutlineModeEdit"
+          variant="ghost"
+        />
+      </div>
+    </div>
+  </component>
+</template>