RISDEV-6143 Add 'documentType category (#70)

digitalservicebund · Jan 17, 2025 · 37e876a · 37e876a
1 parent aafb8f1
commit 37e876a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 13 deletions.
diff --git a/frontend/e2e/RubrikenPage.spec.ts b/frontend/e2e/RubrikenPage.spec.ts
@@ -34,10 +34,12 @@ test(
     amtlicheLangüberschriftElement.fill('my long title')
     await expect(amtlicheLangüberschriftElement).toHaveValue('my long title')
 
-    // const dokumentTyp = page.getByText('Dokumenttyp')
-    // await expect(dokumentTyp).toHaveCount(1)
-    // dokumentTyp.selectOption({ label: 'VR' }) // select by visible text option
-    // await expect(dokumentTyp).toHaveValue('vr') // confirm selection by value
+    const dokumentTyp = page.getByText('Dokumenttyp')
+    await expect(dokumentTyp).toHaveCount(1)
+    await dokumentTyp.fill('V')
+    await expect(page.getByText('VR')).toHaveCount(1)
+    await page.getByText('VR').click()
+    await expect(dokumentTyp).toHaveValue('VR') // confirm selection by value
 
     const inkrafttretedatumElement = page.getByText('Datum des Inkrafttretens *')
     await expect(inkrafttretedatumElement).toHaveCount(1)

diff --git a/frontend/src/components/input/types.ts b/frontend/src/components/input/types.ts
@@ -1,6 +1,6 @@
 import { LabelPosition } from '@/components/input/InputField.vue'
 import LegalPeriodical from '@/domain/legalPeriodical'
-import type { Court } from '@/domain/documentUnit'
+import type { Court, DocumentType } from '@/domain/documentUnit'
 import type { Ref } from 'vue'
 import type { ComboboxResult } from '@/domain/comboboxResult.ts'
 
@@ -118,7 +118,7 @@ export interface DropdownInputField extends BaseInputField {
 }
 
 //COMBOBOX
-export type ComboboxInputModelType = LegalPeriodical | Court
+export type ComboboxInputModelType = LegalPeriodical | Court | DocumentType
 
 export type ComboboxItem = {
   label: string

diff --git a/frontend/src/domain/documentUnit.ts b/frontend/src/domain/documentUnit.ts
@@ -1,5 +1,11 @@
 import type DocumentationOffice from './documentationOffice'
 
+export type DocumentType = {
+  uuid?: string
+  jurisShortcut: string
+  label: string
+}
+
 export type Court = {
   type?: string
   location?: string

diff --git a/frontend/src/routes/documentUnit/[documentNumber]/RubrikenPage.vue b/frontend/src/routes/documentUnit/[documentNumber]/RubrikenPage.vue
@@ -11,6 +11,7 @@ const selectedCourt = ref()
 const zitierdatum = ref()
 const inkrafttretedatum = ref()
 const ausserkrafttretedatum = ref()
+const selectedDocumentType = ref()
 </script>
 
 <template>
@@ -23,7 +24,7 @@ const ausserkrafttretedatum = ref()
             <DateInput
               id="zitierdatum"
               v-model="zitierdatum"
-              aria-label="Zitierdatum"
+              ariaLabel="Zitierdatum"
               class="ds-input-medium"
             ></DateInput>
           </InputField>
@@ -39,7 +40,7 @@ const ausserkrafttretedatum = ref()
           </InputField>
         </div>
       </div>
-      <div class="flex flex-col">
+      <div class="flex flex-row gap-24">
         <InputField id="langue" label="Amtl. Langüberschrift *">
           <Textarea
             id="langue"
@@ -50,7 +51,17 @@ const ausserkrafttretedatum = ref()
           />
         </InputField>
       </div>
-
+      <div class="border-b-1 border-b-gray-400"></div>
+      <div class="flex flex-row gap-24 w-[calc(50%-10px)]">
+        <InputField id="documentType" label="Dokumenttyp *">
+          <ComboboxInput
+            id="documentType"
+            v-model="selectedDocumentType"
+            aria-label="Dokumenttyp"
+            :item-service="ComboboxItemService.getDocumentTypes"
+          ></ComboboxInput>
+        </InputField>
+      </div>
       <div class="flex flex-col">
         <div class="flex flex-row gap-24">
           <InputField
@@ -61,7 +72,7 @@ const ausserkrafttretedatum = ref()
             <DateInput
               id="inkrafttretedatum"
               v-model="inkrafttretedatum"
-              aria-label="Inkrafttretedatum"
+              ariaLabel="Inkrafttretedatum"
               class="ds-input-medium"
             ></DateInput>
           </InputField>
@@ -73,12 +84,13 @@ const ausserkrafttretedatum = ref()
             <DateInput
               id="ausserkrafttretedatum"
               v-model="ausserkrafttretedatum"
-              aria-label="Ausserkrafttretedatum"
+              ariaLabel="Ausserkrafttretedatum"
               class="ds-input-medium"
             ></DateInput>
           </InputField>
         </div>
       </div>
+      <div class="mt-4">* Pflichtfelder für die Veröffentlichung</div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/services/comboboxItemService.spec.ts b/frontend/src/services/comboboxItemService.spec.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import ComboboxItemService from '@/services/comboboxItemService.ts'
+import { ref } from 'vue'
+import type { ComboboxItem } from '@/components/input/types.ts'
+
+describe('comboboxItemService', () => {
+  it('getDocumentTypes.data', () => {
+    const documentTypes = ComboboxItemService.getDocumentTypes(ref(''))
+
+    expect(documentTypes.data.value as ComboboxItem[]).toEqual(
+      expect.arrayContaining([<ComboboxItem>{ label: 'VR', value: { label: 'VR' } }]),
+    )
+  })
+
+  it('getDocumentTypes.execute', async () => {
+    const documentTypes = ComboboxItemService.getDocumentTypes(ref(''))
+
+    const executionResult = await documentTypes.execute()
+
+    expect(executionResult.data.value).toEqual(documentTypes.data.value)
+  })
+})
diff --git a/frontend/src/services/comboboxItemService.ts b/frontend/src/services/comboboxItemService.ts
@@ -1,13 +1,14 @@
 import type { Ref } from 'vue'
 import type { ComboboxItem } from '@/components/input/types'
 import LegalPeriodical from '@/domain/legalPeriodical.ts'
-import type { Court } from '@/domain/documentUnit'
+import type { Court, DocumentType } from '@/domain/documentUnit'
 import type { ComboboxResult } from '@/domain/comboboxResult.ts'
 import { computed, ref } from 'vue'
 
-type ComboboxItemService = {
+export type ComboboxItemService = {
   getLegalPeriodicals: (filter: Ref<string | undefined>) => ComboboxResult<ComboboxItem[]>
   getCourts: (filter: Ref<string | undefined>) => ComboboxResult<ComboboxItem[]>
+  getDocumentTypes: (filter: Ref<string | undefined>) => ComboboxResult<ComboboxItem[]>
 }
 
 const service: ComboboxItemService = {
@@ -82,6 +83,21 @@ const service: ComboboxItemService = {
     }
     return result
   },
+  getDocumentTypes: (filter: Ref<string | undefined>) => {
+    const documentTypeValues = ['VR', 'VE', 'VV', 'ST']
+    const documentTypes = documentTypeValues.map((v) => <DocumentType>{ label: v })
+    const items = ref(documentTypes.map((dt) => <ComboboxItem>{ label: dt.label, value: dt }))
+    const execute = async () => {
+      return service.getDocumentTypes(filter)
+    }
+    const result: ComboboxResult<ComboboxItem[]> = {
+      data: items,
+      execute: execute,
+      canAbort: computed(() => false),
+      abort: () => {},
+    }
+    return result
+  },
 }
 
 export default service