Open up category import by active citation input

RISDEV-5722

frontend/src/components/DocumentUnitDecisionSummary.vue

@@ -1,19 +1,25 @@
 <script lang="ts" setup>
-import { computed } from "vue"
+import { computed, onMounted, ref } from "vue"
 import Tooltip from "./Tooltip.vue"
 import DecisionSummary from "@/components/DecisionSummary.vue"
 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 FeatureToggleService from "@/services/featureToggleService"
+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 IconImportCategories from "~icons/material-symbols/text-select-move-back-word"
 
 const props = defineProps<{
   data: ActiveCitation | EnsuingDecision | PreviousDecision
 }>()
+const featureToggle = ref()
+const extraContentSidePanelStore = useExtraContentSidePanelStore()
 
 const iconComponent = computed(() => {
   return props.data?.hasForeignSource
@@ -33,6 +39,18 @@ const showErrorBadge = computed(() => {
 async function copySummary() {
   if (props.data) await navigator.clipboard.writeText(props.data.renderDecision)
 }
+
+async function openCategoryImport(documentNumber?: string) {
+  extraContentSidePanelStore.togglePanel(true)
+  extraContentSidePanelStore.setSidePanelMode("category-import")
+  extraContentSidePanelStore.importDocumentNumber = documentNumber
+}
+
+onMounted(async () => {
+  featureToggle.value = (
+    await FeatureToggleService.isEnabled("neuris.category-importer")
+  ).data
+})
 </script>
 
 <template>
@@ -53,16 +71,39 @@ async function copySummary() {
         label="Fehlende Daten"
       />
     </div>
-    <Tooltip text="Kopieren">
-      <button
-        v-if="data instanceof ActiveCitation"
-        class="flex h-32 w-32 items-center justify-center text-blue-800 hover:bg-blue-100 focus:shadow-[inset_0_0_0_0.125rem] focus:shadow-blue-800 focus:outline-none"
-        data-testid="copy-summary"
-        @click="copySummary"
-        @keypress.enter="copySummary"
+
+    <div class="flex flex-row -space-x-2">
+      <Tooltip
+        v-if="
+          data instanceof ActiveCitation &&
+          (data.citationType?.label == 'Parallelentscheidung' ||
+            data.citationType?.label == 'Teilweise Parallelentscheidung') &&
+          featureToggle
+        "
+        text="Rubriken importieren"
       >
-        <IconBaselineContentCopy />
-      </button>
-    </Tooltip>
+        <TextButton
+          id="category-import"
+          aria-label="Rubriken-Import anzeigen"
+          button-type="tertiary"
+          data-testid="import-categories"
+          :icon="IconImportCategories"
+          size="small"
+          @click="openCategoryImport(data.documentNumber)"
+        />
+      </Tooltip>
+      <Tooltip v-if="data instanceof ActiveCitation" text="Kopieren">
+        <TextButton
+          id="category-import"
+          aria-label="Rubriken-Import anzeigen"
+          button-type="tertiary"
+          data-testid="copy-summary"
+          :icon="IconBaselineContentCopy"
+          size="small"
+          @click="copySummary"
+          @keypress.enter="copySummary"
+        />
+      </Tooltip>
+    </div>
   </div>
 </template>

frontend/src/components/ExtraContentSidePanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia"
 import { computed, onMounted, ref } from "vue"
 import type { Component } from "vue"
 import { useRoute } from "vue-router"
@@ -18,11 +19,11 @@ import FeatureToggleService from "@/services/featureToggleService"
 import { useExtraContentSidePanelStore } from "@/stores/extraContentSidePanelStore"
 import { SelectablePanelContent } from "@/types/panelContentMode"
 import IconAttachFile from "~icons/ic/baseline-attach-file"
-import IconCopyAll from "~icons/ic/baseline-copy-all"
 import IconEdit from "~icons/ic/outline-edit"
 import IconOpenInNewTab from "~icons/ic/outline-open-in-new"
 import IconPreview from "~icons/ic/outline-remove-red-eye"
 import IconStickyNote from "~icons/ic/outline-sticky-note-2"
+import IconImportCategories from "~icons/material-symbols/text-select-move-back-word"
 
 const props = defineProps<{
   documentUnit?: DocumentUnit
@@ -52,6 +53,8 @@ const hasAttachments = computed(() => {
 
 const shortCut = computed(() => props.sidePanelShortcut ?? "<")
 
+const { importDocumentNumber } = storeToRefs(store)
+
 /**
  * Updates the local attachment index reference, which is used to display the selected attachment in the panel,
  * if the panel content is set to "attachments".
@@ -199,7 +202,7 @@ onMounted(async () => {
 
           <Tooltip
             v-if="featureToggle && !hidePanelModeBar"
-            shortcut="k"
+            shortcut="r"
             text="Rubriken-Import"
           >
             <TextButton
@@ -210,7 +213,7 @@ onMounted(async () => {
                 store.panelMode === 'category-import' ? 'bg-blue-200' : ''
               "
               data-testid="category-import-button"
-              :icon="IconCopyAll"
+              :icon="IconImportCategories"
               size="small"
               @click="() => selectImporter()"
             />
@@ -303,7 +306,10 @@ onMounted(async () => {
           />
         </FlexContainer>
 
-        <CategoryImport v-if="store.panelMode === 'category-import'" />
+        <CategoryImport
+          v-if="store.panelMode === 'category-import'"
+          :document-number="importDocumentNumber"
+        />
       </div>
     </SideToggle>
   </FlexItem>

frontend/src/components/category-import/CategoryImport.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRaw, computed } from "vue"
+import { ref, toRaw, computed, watch } from "vue"
 import { RouterLink } from "vue-router"
 import ImportKeywords from "@/components/category-import/ImportKeywords.vue"
 import IconBadge from "@/components/IconBadge.vue"
@@ -12,7 +12,11 @@ import documentUnitService from "@/services/documentUnitService"
 import BaselineArrowOutward from "~icons/ic/baseline-arrow-outward"
 import IconSearch from "~icons/ic/baseline-search"
 
-const documentNumber = ref("")
+const props = defineProps<{
+  documentNumber?: string
+}>()
+
+const documentNumber = ref<string>(props.documentNumber ?? "")
 const documentUnitToImport = ref<DocumentUnit | undefined>(undefined)
 const errorMessage = ref<string | undefined>(undefined)
 const statusBadge = computed(
@@ -35,6 +39,16 @@ async function searchForDocumentUnit() {
     errorMessage.value = "Keine Dokumentationseinheit gefunden."
   }
 }
+watch(
+  () => props.documentNumber,
+  async () => {
+    documentNumber.value = props.documentNumber ?? ""
+    if (props.documentNumber) {
+      await searchForDocumentUnit()
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -85,7 +99,6 @@ async function searchForDocumentUnit() {
           :icon="toRaw(statusBadge.icon)"
           :label="statusBadge.label"
         />
-
         <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"

frontend/src/domain/documentUnit.ts

@@ -249,15 +249,15 @@ export default class DocumentUnit {
 
   get renderDecision(): string {
     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(", ")
+      this.coreData.court?.label,
+      this.coreData.decisionDate
+        ? dayjs(this.coreData.decisionDate).format("DD.MM.YYYY")
+        : null,
+      this.coreData.fileNumbers ? this.coreData.fileNumbers[0] : null,
+      this.coreData.documentType?.label,
+    ]
+      .filter(Boolean)
+      .join(", ")
   }
 
   get missingRequiredFields() {

frontend/src/routes/caselaw/documentUnit/[documentNumber].vue

@@ -117,7 +117,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
       extraContentSidePanelStore.togglePanel(true)
       extraContentSidePanelStore.setSidePanelMode("preview")
       break
-    case "k":
+    case "r":
       if (featureToggle.value) {
         extraContentSidePanelStore.togglePanel(true)
         extraContentSidePanelStore.setSidePanelMode("category-import")

frontend/src/stores/extraContentSidePanelStore.ts

@@ -9,6 +9,7 @@ export const useExtraContentSidePanelStore = defineStore(
   () => {
     const panelMode = ref<SelectablePanelContent | undefined>(undefined)
     const isExpanded = ref<boolean>(false)
+    const importDocumentNumber = ref<string | undefined>(undefined)
     const currentAttachmentIndex = ref(0)
 
     const { pushQueryToRoute } = useQuery()
@@ -71,6 +72,7 @@ export const useExtraContentSidePanelStore = defineStore(
       selectAttachments,
       togglePanel,
       onAttachmentDeleted,
+      importDocumentNumber,
       isExpanded,
       currentAttachmentIndex,
       panelMode,

frontend/test/components/activeCitations.spec.ts

@@ -1,6 +1,6 @@
 import { createTestingPinia } from "@pinia/testing"
 import { userEvent } from "@testing-library/user-event"
-import { fireEvent, render, screen } from "@testing-library/vue"
+import { fireEvent, render, screen, waitFor } from "@testing-library/vue"
 import { http, HttpResponse } from "msw"
 import { setupServer } from "msw/node"
 import { createRouter, createWebHistory } from "vue-router"
@@ -9,6 +9,7 @@ import ActiveCitation from "@/domain/activeCitation"
 import { CitationType } from "@/domain/citationType"
 import DocumentUnit, { Court, DocumentType } from "@/domain/documentUnit"
 import documentUnitService from "@/services/documentUnitService"
+import featureToggleService from "@/services/featureToggleService"
 import routes from "~/test-helper/routes"
 
 const server = setupServer(
@@ -110,6 +111,10 @@ describe("active citations", () => {
   beforeAll(() => server.listen())
   afterAll(() => server.close())
   beforeEach(() => {
+    vi.spyOn(featureToggleService, "isEnabled").mockResolvedValue({
+      status: 200,
+      data: true,
+    })
     vi.spyOn(
       documentUnitService,
       "searchByRelatedDocumentation",
@@ -507,6 +512,32 @@ describe("active citations", () => {
     )
   })
 
+  it("should render parallel decision icons for 'Teilweise Parallelentscheidung'", async () => {
+    renderComponent([
+      generateActiveCitation({
+        citationStyle: {
+          label: "Teilweise Parallelentscheidung",
+        },
+      }),
+    ])
+    await waitFor(() => {
+      expect(screen.getByTestId("import-categories")).toBeVisible()
+    })
+  })
+
+  it("should render parallel decision icons for 'Parallelentscheidung'", async () => {
+    renderComponent([
+      generateActiveCitation({
+        citationStyle: {
+          label: "Parallelentscheidung",
+        },
+      }),
+    ])
+    await waitFor(() => {
+      expect(screen.getByTestId("import-categories")).toBeVisible()
+    })
+  })
+
   describe("keyboard navigation", () => {
     it("should copy text of active citation summary", async () => {
       const { user } = renderComponent([generateActiveCitation()])

frontend/test/components/ensuingDecisions.spec.ts

@@ -8,6 +8,7 @@ import EnsuingDecisions from "@/components/EnsuingDecisions.vue"
 import DocumentUnit, { Court, DocumentType } from "@/domain/documentUnit"
 import EnsuingDecision from "@/domain/ensuingDecision"
 import documentUnitService from "@/services/documentUnitService"
+import featureToggleService from "@/services/featureToggleService"
 import routes from "~/test-helper/routes"
 
 const server = setupServer(
@@ -97,40 +98,46 @@ function generateEnsuingDecision(options?: {
 describe("EnsuingDecisions", () => {
   beforeAll(() => server.listen())
   afterAll(() => server.close())
-  vi.spyOn(
-    documentUnitService,
-    "searchByRelatedDocumentation",
-  ).mockImplementation(() =>
-    Promise.resolve({
+  beforeEach(() => {
+    vi.spyOn(featureToggleService, "isEnabled").mockResolvedValue({
       status: 200,
-      data: {
-        content: [
-          new EnsuingDecision({
-            uuid: "123",
-            court: {
-              type: "type1",
-              location: "location1",
-              label: "label1",
-            },
-            decisionDate: "2022-02-01",
-            documentType: {
-              jurisShortcut: "documentTypeShortcut1",
-              label: "documentType1",
-            },
-            fileNumber: "test fileNumber1",
-          }),
-        ],
-        size: 0,
-        number: 0,
-        numberOfElements: 20,
-        first: true,
-        last: false,
-        empty: false,
-      },
-    }),
-  )
+      data: true,
+    })
+    vi.spyOn(
+      documentUnitService,
+      "searchByRelatedDocumentation",
+    ).mockImplementation(() =>
+      Promise.resolve({
+        status: 200,
+        data: {
+          content: [
+            new EnsuingDecision({
+              uuid: "123",
+              court: {
+                type: "type1",
+                location: "location1",
+                label: "label1",
+              },
+              decisionDate: "2022-02-01",
+              documentType: {
+                jurisShortcut: "documentTypeShortcut1",
+                label: "documentType1",
+              },
+              fileNumber: "test fileNumber1",
+            }),
+          ],
+          size: 0,
+          number: 0,
+          numberOfElements: 20,
+          first: true,
+          last: false,
+          empty: false,
+        },
+      }),
+    )
 
-  vi.spyOn(window, "scrollTo").mockImplementation(() => vi.fn())
+    vi.spyOn(window, "scrollTo").mockImplementation(() => vi.fn())
+  })
 
   it("renders empty ensuing decision in edit mode, when no ensuingDecisions in list", async () => {
     renderComponent()