added the distribution to the RAP Step

packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/RapModal.vue

@@ -19,8 +19,11 @@
                         <EssentialsModal :context=context :newValues=values />
                     </essentials>
                     <coverage v-if="props.activeSection === 'coverage'">
-                        <CoverageModal :context=context :newValues=values />                    
+                        <CoverageModal :context=context :newValues=values />
                     </coverage>
+                    <distributionRap v-if="props.activeSection === 'distributions'">
+                        <DistributionModal :context=context :newValues=values ></DistributionModal>
+                    </distributionRAP>
                 </dpiV3_modalBody>
             </div>
 
@@ -44,6 +47,7 @@ import ButtonV3 from "./ButtonV3.vue";
 import FindabilityChips from "./SectionItems/FindabilityChips.vue"
 import HVDSwitch from "./SectionItems/HVDSwitch.vue"
 import EssentialsModal from "./SectionItems/EssentialsModal.vue"
+import DistributionModal from "./SectionItems/DistributionModal.vue"
 import CoverageModal from "./SectionItems/CoverageModal.vue"
 import { getNode } from '@formkit/core'
 
@@ -149,14 +153,18 @@ dpiV3_modalBody {
     border-radius: var(--Modal-Radius, 32px);
     background: var(--neutral-l0, #FFF);
     margin-top: 84px;
-    max-height: 60vh;
-    overflow-y: scroll;
+    /* max-height: 60vh; */
+    /* overflow-y: scroll; */
 }
-.dpiV3_RapModalOuter::-webkit-scrollbar{
+
+.dpiV3_RapModalContainer::-webkit-scrollbar {
+    display: none;
 }
+
 .dpiV3_RapModalContainer {
     z-index: 9999;
     position: fixed;
+    overflow: scroll;
     width: 100%;
     left: 0;
     height: 100%;

packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/SectionItems/DistributionModal.vue

+<template>
+    <div class="dpiV3_innerRapModalWrapper">
+        <innerRapModalItem>
+            <Dropdown @update:modelValue="handleChangeLicenseVal($event, 'dcterms:license', 1)" dropdownWidth="large"
+                type="inputField" v-model="getNode('DistributionSimple').value[Object.keys(getNode('DistributionSimple').value)[1]][0]['dcterms:license']" :inputFieldProps="{
+                    addOnText: false,
+                    initialHintText: false,
+                    datePicker: false,
+                    infoIcon: false,
+                    preIcon: false,
+                    label: 'Lizenz',
+                    dropdown_dpiV3: true,
+                    placeholder: 'Lizenz wählen...',
+                    inputFieldSize: 'large',
+                    modelValue: '',
+                    defaultInput: true,
+                    showError: false,
+                }" :data="licenseOptions" @deleteButtonClicked="deleteModifiedField"class="gap5BottomAsMargin"  />
+            <InputField :label="$t('message.metadata.publisher')"
+                :modelValue="getNode('DistributionSimple').value[Object.keys(getNode('DistributionSimple').value)[1]][0]['title']"
+                :infoIcon="false" :preIcon="false" :initialHintText="true" 
+                supporting-hint-message="Dieser Namensnennungstext stellt sicher, dass die Lizenzbedingungen eingehalten werden." :showEndIcon="false"
+                @input="" />
+        </innerRapModalItem>
+        <innerRapModalItem>
+            <DistributionSimplePage :context=context :inRap=true></DistributionSimplePage>
+        </innerRapModalItem>
+    </div>
+
+</template>
+<script setup>
+import { filterGeocodingURIs } from "../../services/dpiV3_apis";
+import Dropdown from "../Dropdown.vue";
+import DistributionSimplePage from "../../../components/DistributionSimplePage.vue";
+import { ref } from 'vue';
+import { getCurrentInstance } from "vue";
+import { getNode } from '@formkit/core'
+import InputField from "../InputField.vue";
+
+let URIList = ref([]);
+let instance = getCurrentInstance().appContext.app.config.globalProperties.$env;
+
+
+const props = defineProps({
+    context: Object,
+    newValues: Object
+})
+
+</script>
+<style scoped></style>
\ No newline at end of file

packages/piveau-hub-ui-modules/lib/data-provider-interface/components/ReviewAndPublishPage.vue

@@ -22,7 +22,7 @@
             <div class="secondSec">
                 <span class="copy-large-regular" style="margin-bottom:4px">{{
                     $t("message.dataupload.datasets.rap.findability.categoryHeader")
-                }}</span>
+                    }}</span>
                 <Chip
                     v-for="(item, index) in getNode('Discoverability').value[Object.keys(getNode('Discoverability').value)[0]].slice(1)"
                     :key="index" :text="item.labels['de']" :data="{ '@value': item.value, URI: item.URI }"
@@ -47,11 +47,11 @@
             </div>
             <div class="thirdSec">
                 <span>{{ getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[1]][0]['dct:description']
-                }}</span>
+                    }}</span>
             </div>
             <div class="fourthSec flexSec">
                 <span class="copy-large-regular">{{ $t("message.dataupload.datasets.rap.essentials.modifiedHeader")
-                }}</span>
+                    }}</span>
                 <!-- Dateformat anpassen? -->
                 <span class="copy-large-semi-bold">{{
                     new
@@ -60,13 +60,13 @@
             </div>
             <div class="fifthSec flexSec">
                 <span class="copy-large-regular">{{ $t("message.dataupload.datasets.rap.essentials.publisherHeader")
-                }}</span>
+                    }}</span>
                 <h5 class="headline-5">{{
                     getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[3]][0]['foaf:name']
-                    }}</h5>
+                }}</h5>
                 <a class="copy-large-regular">{{
                     getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[3]][0]['foaf:mbox']
-                    }}</a>
+                }}</a>
                 <a class="copy-large-regular"
                     :href="getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[3]][0]['foaf:homepage']">{{
                         getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[3]][0]['foaf:homepage']
@@ -74,16 +74,16 @@
             </div>
             <div class="sixthSec flexSec">
                 <span class="copy-large-regular">{{ $t("message.dataupload.datasets.rap.essentials.contactHeader")
-                }}</span>
+                    }}</span>
                 <h5 class="headline-5">{{
                     getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[4]][0]['vcard:fn']
-                    }}</h5>
+                }}</h5>
                 <a class="copy-large-regular">{{
                     getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[4]][0]['vcard:hasEmail']
-                    }}</a>
+                }}</a>
                 <span class="copy-large-regular">{{
                     getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[4]][0]['vcard:hasTelephone']
-                    }}</span>
+                }}</span>
             </div>
         </div>
         <!-- Coverage -->
@@ -102,7 +102,7 @@
                 <div class="coveragePlaceWrap">
                     <h5 class="headline-5">{{
                         getNode('Covering').value[Object.keys(getNode('Covering').value)[0]][0]['label']
-                    }} </h5>
+                        }} </h5>
                     <StateTag
                         :label="getNode('Covering').value[Object.keys(getNode('Covering').value)[0]][0]['inVoc'].toUpperCase()"
                         state="geopolitical" size="page" />
@@ -112,7 +112,7 @@
             <div class="thirdSec">
                 <div class="rapHeadWrap">
                     <span class="copy-large-regular">{{ $t("message.dataupload.datasets.rap.coverage.tempCoverage")
-                    }}</span>
+                        }}</span>
                     <TextButtonSmall buttonText="löschen" />
                 </div>
                 <div class="dpiV3_RapInnerCardWrapper">
@@ -162,23 +162,31 @@
             </div>
             <div class="secondSec flexSec">
                 <span class="copy-large-regular">{{ $t("message.dataupload.steps.dct:license")
-                }}</span>
+                    }}</span>
                 <h5 class="headline-5">{{
-                    getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[3]][0]['foaf:name']
-                    }}</h5>
+                    getNode('DistributionSimple').value[Object.keys(getNode('DistributionSimple').value)[1]][0]['dcterms:license']
+                }}</h5>
             </div>
             <div class="thirdSec flexSec">
                 <span class="copy-large-regular">{{ $t("message.dataupload.steps.dct:publisher")
-                }}</span>
+                    }}</span>
                 <h5 class="headline-5">{{
-                    getNode('BasicInfos').value[Object.keys(getNode('BasicInfos').value)[3]][0]['foaf:name']
-                    }}</h5>
+                    getNode('DistributionSimple').value[Object.keys(getNode('DistributionSimple').value)[1]][0]['title']
+                }}</h5>
             </div>
             <div class="fourthSec flexSec">
                 <span class="copy-large-regular">{{ $t("message.dataupload.steps.dcat:distribution")
-                }}</span>
+                    }}</span>
+                <div class="dpiV3_distCard"
+                    v-for="distribution in getNode('DistributionSimple').value[Object.keys(getNode('DistributionSimple').value)[0]]">
+                    <span class="copy-large-semi-bold">{{ distribution['dct:title'] }}</span>
+                    <formatBubble>{{ distribution['dct:format'] }}</formatBubble>
+                </div>
             </div>
         </div>
+        <div class="dpiV3_tempAddMore">
+      <ButtonV3 buttonText="Optionale Informationen hinzufügen" size="large" iconStart="plus" variant="tertiary" @click="addDistribution" />
+    </div>
     </div>
 
 </template>
@@ -215,6 +223,8 @@ console.log(chosenItems.value[0].isValid);
 const isModalVisible = ref(false);
 
 const openModal = (type) => {
+    console.log();
+
     dynamicSec.value = type
     isModalVisible.value = true;
     console.log('Modal sichtbar:', isModalVisible.value);
@@ -410,4 +420,39 @@ props.context.node.input(chosenItems)
         }
     }
 }
+
+.dpiV3_distCard {
+    display: flex;
+    padding: var(--Spacing-4, 24px);
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--Spacing-3, 16px);
+    align-self: stretch;
+    border-radius: var(--Inside-Modal-Radious, 16px);
+    background: var(--neutral-0, #FFF);
+    margin-bottom: var(--Spacing-3, 16px);
+    
+
+    span {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        flex: 1 0 0;
+        overflow: hidden;
+        color: var(--blue-80, #0172AD);
+        text-overflow: ellipsis;
+
+
+    }
+
+    formatBubble {
+        display: flex;
+        height: 32px;
+        padding: var(--Spacing-1, 4px) var(--Spacing-3, 16px);
+        align-items: center;
+        gap: var(--Spacing-2, 8px);
+        border-radius: var(--Button-Radius, 24px);
+        background: var(--blue-20, #D4EDFC);
+    }
+}
 </style>