Refactor editable list summaries

RISDEV-5942

frontend/src/components/DocumentUnitDecisionSummary.vue → frontend/src/components/ActiveCitationSummary.vue

@@ -1,53 +1,32 @@
 <script lang="ts" setup>
 import dayjs from "dayjs"
-import { computed } from "vue"
+import { computed, onMounted, ref } from "vue"
 import Tooltip from "./Tooltip.vue"
-import DecisionSummary from "@/components/DecisionSummary.vue"
+import DocumentationUnitSummary from "@/components/DocumentationUnitSummary.vue"
 import { DocumentUnitCategoriesEnum } from "@/components/enumDocumentUnitCategories"
-import IconBadge from "@/components/IconBadge.vue"
 import TextButton from "@/components/input/TextButton.vue"
 import ActiveCitation from "@/domain/activeCitation"
-import EnsuingDecision from "@/domain/ensuingDecision"
-import PreviousDecision from "@/domain/previousDecision"
 import { useDocumentUnitStore } from "@/stores/documentUnitStore"
 import { useExtraContentSidePanelStore } from "@/stores/extraContentSidePanelStore"
 import IconBaselineContentCopy from "~icons/ic/baseline-content-copy"
-import IconBaselineDescription from "~icons/ic/baseline-description"
-import IconError from "~icons/ic/baseline-error"
-import IconOutlineDescription from "~icons/ic/outline-description"
 import IconGenerateText from "~icons/ic/round-auto-fix-high"
 import IconImportCategories from "~icons/material-symbols/text-select-move-back-word"
 
 const props = defineProps<{
-  data: ActiveCitation | EnsuingDecision | PreviousDecision
+  data: ActiveCitation
 }>()
+const featureToggle = ref()
 const extraContentSidePanelStore = useExtraContentSidePanelStore()
 const documentUnitStore = useDocumentUnitStore()
 
-const iconComponent = computed(() => {
-  return props.data?.hasForeignSource
-    ? IconBaselineDescription
-    : IconOutlineDescription
-})
-
-const showErrorBadge = computed(() => {
-  if (props.data instanceof ActiveCitation) {
-    return props.data?.hasForeignSource
-      ? !props.data.citationTypeIsSet
-      : props.data?.hasMissingRequiredFields
-  }
-  return props.data?.hasMissingRequiredFields
-})
-
 const isParallelDecision = computed(
   () =>
-    props.data instanceof ActiveCitation &&
-    (props.data.citationType?.label == "Parallelentscheidung" ||
-      props.data.citationType?.label == "Teilweise Parallelentscheidung"),
+    props.data.citationType?.label == "Parallelentscheidung" ||
+    props.data.citationType?.label == "Teilweise Parallelentscheidung",
 )
 
 async function copySummary() {
-  if (props.data) await navigator.clipboard.writeText(props.data.renderDecision)
+  if (props.data) await navigator.clipboard.writeText(props.data.renderSummary)
 }
 
 async function openCategoryImport(documentNumber?: string) {
@@ -57,7 +36,7 @@ async function openCategoryImport(documentNumber?: string) {
 }
 
 async function generateHeadnote() {
-  const text = `${props.data instanceof ActiveCitation && props.data.citationType?.label == "Teilweise Parallelentscheidung" ? "Teilweise " : ""}Parallelentscheidung zu der Entscheidung (${props.data.documentType?.label}) des ${props.data.court?.label} vom ${dayjs(props.data.decisionDate).format("DD.MM.YYYY")} - ${props.data.fileNumber}${props.data instanceof ActiveCitation && props.data.citationType?.label == "Teilweise Parallelentscheidung" ? "." : ", welche vollständig dokumentiert ist."}`
+  const text = `${props.data.citationType?.label == "Teilweise Parallelentscheidung" ? "Teilweise " : ""}Parallelentscheidung zu der Entscheidung (${props.data.documentType?.label}) des ${props.data.court?.label} vom ${dayjs(props.data.decisionDate).format("DD.MM.YYYY")} - ${props.data.fileNumber}${props.data.citationType?.label == "Teilweise Parallelentscheidung" ? "." : ", welche vollständig dokumentiert ist."}`
 
   documentUnitStore.documentUnit!.shortTexts.headnote = text
   await documentUnitStore.updateDocumentUnit()
@@ -71,33 +50,25 @@ async function generateHeadnote() {
     behavior: "smooth",
   })
 }
+
+onMounted(async () => {
+  featureToggle.value = (
+    await FeatureToggleService.isEnabled("neuris.category-importer")
+  ).data
+})
 </script>
 
 <template>
   <div class="flex w-full justify-between">
-    <div class="flex flex-row items-center">
-      <component :is="iconComponent" class="mr-8" />
-      <div v-if="data?.hasForeignSource" class="flex flex-row items-baseline">
-        <div v-if="data?.hasForeignSource" class="flex flex-row items-baseline">
-          <DecisionSummary class="mr-8" :decision="data"></DecisionSummary>
-        </div>
-      </div>
-      <div v-else class="ds-label-01-reg mr-8">{{ data?.renderDecision }}</div>
-      <IconBadge
-        v-if="showErrorBadge"
-        background-color="bg-red-300"
-        color="text-red-900"
-        :icon="IconError"
-        label="Fehlende Daten"
-      />
-    </div>
+    <DocumentationUnitSummary :data="data"> </DocumentationUnitSummary>
 
+    <!-- Button group -->
     <div class="flex flex-row -space-x-2">
       <Tooltip v-if="isParallelDecision" text="Rubriken importieren">
         <TextButton
           id="category-import"
           aria-label="Rubriken-Import anzeigen"
-          button-type="tertiary"
+          button-type="ghost"
           data-testid="import-categories"
           :icon="IconImportCategories"
           size="small"
@@ -115,19 +86,19 @@ async function generateHeadnote() {
         <TextButton
           id="generate-headnote"
           aria-label="O-Satz generieren"
-          button-type="tertiary"
+          button-type="ghost"
           data-testid="generate-headnote"
           :disabled="!!documentUnitStore.documentUnit!.shortTexts.headnote"
           :icon="IconGenerateText"
           size="small"
           @click="generateHeadnote"
         />
       </Tooltip>
-      <Tooltip v-if="data instanceof ActiveCitation" text="Kopieren">
+      <Tooltip text="Kopieren">
         <TextButton
           id="category-import"
           aria-label="Rubriken-Import anzeigen"
-          button-type="tertiary"
+          button-type="ghost"
           data-testid="copy-summary"
           :icon="IconBaselineContentCopy"
           size="small"

frontend/src/components/ActiveCitations.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 import ActiveCitationInput from "@/components/ActiveCitationInput.vue"
-import DocumentUnitDecisionSummary from "@/components/DocumentUnitDecisionSummary.vue"
+import ActiveCitationSummary from "@/components/ActiveCitationSummary.vue"
 import EditableList from "@/components/EditableList.vue"
 import { DocumentUnitCategoriesEnum } from "@/components/enumDocumentUnitCategories"
 import ActiveCitation from "@/domain/activeCitation"
@@ -27,15 +27,11 @@ const defaultValue = new ActiveCitation() as ActiveCitation
     >
       Aktivzitierung
     </h2>
-    <div class="flex flex-row">
-      <div class="flex-1">
-        <EditableList
-          v-model="activeCitations"
-          :default-value="defaultValue"
-          :edit-component="ActiveCitationInput"
-          :summary-component="DocumentUnitDecisionSummary"
-        />
-      </div>
-    </div>
+    <EditableList
+      v-model="activeCitations"
+      :default-value="defaultValue"
+      :edit-component="ActiveCitationInput"
+      :summary-component="ActiveCitationSummary"
+    />
   </div>
 </template>

frontend/src/components/DecisionSummary.vue

@@ -1,25 +1,97 @@
-<script setup lang="ts">
-import DocumentNumberPreviewLink from "@/components/DocumentNumberLink.vue"
+<script lang="ts" setup>
+import { computed, toRaw } from "vue"
+import type { Component } from "vue"
 import { DisplayMode } from "@/components/enumDisplayMode"
-import FlexContainer from "@/components/FlexContainer.vue"
-import RelatedDocumentation from "@/domain/relatedDocumentation"
+import IconBadge from "@/components/IconBadge.vue"
+import { useStatusBadge } from "@/composables/useStatusBadge"
+import { PublicationStatus } from "@/domain/publicationStatus"
+import { useDocumentUnitStore } from "@/stores/documentUnitStore"
+import { useExtraContentSidePanelStore } from "@/stores/extraContentSidePanelStore"
+import BaselineArrowOutward from "~icons/ic/baseline-arrow-outward"
 
-type Props<T extends RelatedDocumentation> = {
-  decision: T
+interface Props {
+  summary: string
+  status?: PublicationStatus
+  documentNumber?: string
   displayMode?: DisplayMode
+  icon?: Component
 }
 
-const props = defineProps<Props<RelatedDocumentation>>()
+const props = withDefaults(defineProps<Props>(), {
+  displayMode: DisplayMode.TAB,
+  status: undefined,
+  documentNumber: undefined,
+  icon: undefined,
+})
+
+const statusBadge = computed(() => useStatusBadge(props.status).value)
+
+const documentUnitStore = useDocumentUnitStore()
+const extraContentSidePanelStore = useExtraContentSidePanelStore()
+
+async function openSidePanel(documentUnitNumber?: string) {
+  if (documentUnitNumber) {
+    await documentUnitStore.loadDocumentUnit(documentUnitNumber)
+    extraContentSidePanelStore.togglePanel(true)
+  }
+}
+
+const summary = computed(() =>
+  props.status ? `${props.summary},  ` : props.summary,
+)
+
+const divider = computed(() => (props.documentNumber ? ` | ` : undefined))
 </script>
 
 <template>
-  <FlexContainer
-    :data-testid="'decision-summary-' + props.decision.documentNumber"
-  >
-    {{ decision.renderDecision }}
-    <DocumentNumberPreviewLink
-      :decision="props.decision"
-      :display-mode="displayMode"
-    />
-  </FlexContainer>
+  <div class="flex justify-between">
+    <div class="flex flex-row items-center">
+      <component :is="icon" v-if="icon" class="mr-8 min-w-24" />
+      <span class="mr-8" :data-testid="'decision-summary-' + documentNumber">
+        <span>
+          {{ summary }}
+          <IconBadge
+            v-if="status"
+            :background-color="statusBadge.backgroundColor"
+            class="ml-4 inline-block"
+            :color="statusBadge.color"
+            :icon="toRaw(statusBadge.icon)"
+            :label="statusBadge.label"
+          />
+          {{ divider }}
+
+          <!-- open preview in new tab -->
+          <RouterLink
+            v-if="documentNumber && props.displayMode === DisplayMode.TAB"
+            class="ds-link-01-bold whitespace-nowrap leading-24 no-underline focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800"
+            :data-testid="'document-number-link-' + documentNumber"
+            tabindex="-1"
+            target="_blank"
+            :to="{
+              name: 'caselaw-documentUnit-documentNumber-preview',
+              params: { documentNumber: documentNumber },
+            }"
+          >
+            {{ documentNumber }}
+            <BaselineArrowOutward class="mb-4 inline w-24" />
+          </RouterLink>
+          <!-- or open preview in sidepanel -->
+          <span
+            v-else-if="
+              documentNumber && props.displayMode === DisplayMode.SIDEPANEL
+            "
+          >
+            <button
+              class="ds-link-01-bold whitespace-nowrap leading-24 no-underline focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800"
+              :data-testid="'document-number-link-' + documentNumber"
+              @click="openSidePanel(documentNumber)"
+            >
+              {{ documentNumber }}
+              <BaselineArrowOutward class="mb-4 inline w-24" />
+            </button>
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
 </template>

frontend/src/components/DefaultSummary.vue

@@ -22,7 +22,7 @@ const showErrorBadge = computed(() => {
   <div class="flex w-full justify-between">
     <div class="flex flex-row items-center">
       <component :is="iconComponent" class="mr-8" />
-      <div class="ds-label-01-reg mr-8">{{ data?.renderDecision }}</div>
+      <div class="ds-label-01-reg mr-8">{{ data?.renderSummary }}</div>
       <IconBadge
         v-if="showErrorBadge"
         background-color="bg-red-300"