diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue index b044ccd3ac4b94c6322f4c0b80e4256b99a19ff5..ae8c6800cbfcea0a6b0ce534f1580e6d21bd6d2e 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue @@ -7,7 +7,7 @@ <MoreButton v-if="props.type === 'moreButton'" @click="toggleDropdownHandler" ref="accActive"></MoreButton> <InputField v-if="props.type === 'inputField'" v-bind="props.inputFieldProps" @click="toggleDropdownHandler" @keydown.space.prevent="toggleDropdownHandler" @keydown.enter="toggleDropdownHandler" - @keydown.arrow-down.prevent="focusFirstItem" @input="handleInputEvent" :modelValue="inputText" + @keydown.arrow-down.prevent="focusFirstItem" @input="handleInputEvent" @deleteButtonClicked="deleteField" :modelValue="inputText" :dropDownExpanded="toggleDropdown" ref="accActive"></InputField> <div class="dpiV3_dropdownWrapper" v-if="toggleDropdown" :class="{ @@ -70,7 +70,7 @@ const itemBackgroundColors = ref({}); const itemBackgroundMultiColors = ref([]); const focusedIndex = ref(0); -const emit = defineEmits(["update:modelValue", "input"]); +const emit = defineEmits(["update:modelValue", "input", "deleteDropdownField"]); const parentCategory = (item) => { return t("message.dataupload.datasets.dcatde:politicalGeocodingURI.titles." + item) } @@ -123,6 +123,10 @@ watch(() => props.modelValue, (newVal) => { inputText.value = newVal; }); +const deleteField = () => { + emit("deleteDropdownField") +} + const handleInputEvent = (event) => { console.log("firedDropdown") inputText.value = event.target.value; diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/InputField.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/InputField.vue index 743b8ed9a855c599b3b60cd733481392317e9724..519f267e4cc8f8d6ee588b0c9fa4693fed4bc455 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/InputField.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/InputField.vue @@ -166,7 +166,7 @@ </div> <TextButtonSmall v-if="!defaultInput" - buttonText="Löschen" + buttonText="löschen" @click="eraseText()" class="dpiV3_deleteButton" tabindex="0" diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/ModalV3.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/ModalV3.vue index dfd79c8d14022594488c6dbb0e1c964171a42147..203b52b78a26ddee96e59d40bbdb65071ab72089 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/ModalV3.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/ModalV3.vue @@ -143,7 +143,6 @@ <div class="dpiV3_modified" v-if="selectedItem.key === 'dct:modified'"> <ModifiedDateV3 :modelValue="modifiedDate" - :labelText="selectedItem.text + ' (optional)'" @addModifiedDate="handleModifiedDate" /> </div> diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/AvailabilityV3.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/AvailabilityV3.vue index 6acf0a3b137c7cfbba74542ad39c2e140745f8f4..35272e9d4439f4eb8b9982bc6ed773647554752f 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/AvailabilityV3.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/AvailabilityV3.vue @@ -10,21 +10,24 @@ datePicker: false, infoIcon: false, preIcon: false, - label: 'Verfügbarkeit (optional)', + label: t('message.dataupload.datasets.dcat:distribution.advanced.dcatap:availability')+ ' (optional)', dropdown_dpiV3: true, - placeholder: 'Geben Sie die Verfügbarkeit ein...', + placeholder: t('message.dataupload.datasets.dcat:distribution.advanced.availability-placeholder'), inputFieldSize: 'large', modelValue: availabiltyTextVal, defaultInput: !showDeleteButton }" :data="plannedAvailabilityOptions" - @deleteButtonClicked="deleteModifiedField" + @deleteDropdownField="deleteAvailability" /> </template> <script setup> import { getPlannedAvailability } from "../../services/dpiV3_apis"; import Dropdown from "../Dropdown.vue"; import {onMounted, getCurrentInstance, ref, defineProps, defineEmits, watch } from "vue"; +import { useI18n } from "vue-i18n"; + +const { t } = useI18n(); onMounted(async () => { const instance = getCurrentInstance(); @@ -63,8 +66,7 @@ watch( } ); -const deleteModifiedField = () => { - console.log("delete clicked"); +const deleteAvailability = () => { emits("deleteButtonClicked", props.distributionId); }; </script> diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ByteSizeV3.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ByteSizeV3.vue index 1e12e7ed622c01600817796deafbbec4c5fff629..2be8a23472ddd3650376e969289fde32ced03e61 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ByteSizeV3.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ByteSizeV3.vue @@ -4,19 +4,30 @@ v-model="ByteSizeText" :addOnText="true" :trailingText="true" - :placeholder="`Geben Sie die Größe in Bytes ein...`" - :label="`Größe in Bytes (optional)`" + :placeholder="$t( + 'message.dataupload.datasets.dcat:distribution.advanced.byteSize-placeholder' + )" + :label=" + $t( + 'message.dataupload.datasets.dcat:distribution.advanced.dcat:byteSize' + )+ ' (optional)' + " :datePicker="false" :infoIcon="false" trailing_text="bytes" :showEndIcon="false" :initialHintText="false" inputType="number" + :defaultInput=!showDeleteButton + @deleteButtonClicked="deleteModifiedField" /> </template> <script setup> import InputField from "../InputField.vue"; import { ref, defineProps, defineEmits, watch } from "vue"; +import { useI18n } from "vue-i18n"; + +const { t } = useI18n(); const props = defineProps({ distributionId: { type: Number, required: false }, diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/DescriptionV3.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/DescriptionV3.vue index c4c84ac0be57fa06d55fc86211ba8a15c5b7c07b..eacb4b0d751382b0c1dfc63d5ed184e13a5eef7a 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/DescriptionV3.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/DescriptionV3.vue @@ -2,9 +2,17 @@ <div class="dpiV3_modified"> <TextAreaV3 @input="handleInput" + @deleteClicked="handleDelete" + :showDeleteButton="showDeleteButton" :hint="false" - label="Beschreibung (optional)" - placeholder="Bitte Beschreibung eingeben..." + :label=" + $t( + 'message.dataupload.datasets.dcat:distribution.recommended.dct:description' + )+ ' (optional)' + " + :placeholder="$t( + 'message.dataupload.datasets.dcat:distribution.recommended.description-placeholder' + )" v-model="descriptionV3" ></TextAreaV3> </div> @@ -12,11 +20,15 @@ <script setup> import TextAreaV3 from "../TextAreaV3.vue"; import { ref, defineEmits, defineProps, watch } from "vue"; +import { useI18n } from "vue-i18n"; -const emits = defineEmits(["addDescription"]); +const { t } = useI18n(); + +const emits = defineEmits(["addDescription", "deleteDescription"]); const props = defineProps({ descriptionText: { type: String, default: "" }, distributionId: { type: Number, required: false }, + showDeleteButton: {type: Boolean, default: false} }) const descriptionV3 = ref(props.descriptionText) @@ -26,6 +38,10 @@ const handleInput = (event) => { emits("addDescription", descriptionV3.value, props.distributionId); }; +const handleDelete = () => { + emits("deleteDescription") +} + watch(() => props.descriptionText, (newVal) => { descriptionV3.value = newVal; }); diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/IssuedDateV3.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/IssuedDateV3.vue index a298a8586610b9a361c4c63be8b170c29e6c8609..edf1ed3022fe49770855f55dc3b7da8e463ea8cf 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/IssuedDateV3.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/IssuedDateV3.vue @@ -8,7 +8,11 @@ :datePicker="true" :infoIcon="false" placeholder="TT/MM/JJJJ" - :label="labelText" + :label=" + $t( + 'message.dataupload.datasets.dcat:distribution.advanced.dct:issued' + )+ ' (optional)' + " :preIcon="false" :initialHintText="false" :showEndIcon="false" @@ -19,6 +23,9 @@ <script setup> import InputField from "../InputField.vue"; import { defineProps, defineEmits, watch, ref } from "vue"; +import { useI18n } from "vue-i18n"; + +const { t } = useI18n(); const issuedDate = ref(""); diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/LicenseAttributionByText.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/LicenseAttributionByText.vue index 394d2c1f9ffd47e98c10c8d3766c06c34fb67f2e..a8b80c2e091063127fc872cc6f6efc6226aef97c 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/LicenseAttributionByText.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/LicenseAttributionByText.vue @@ -5,11 +5,17 @@ :addOnText="false" :datePicker="false" :infoIcon="false" - :placeholder="'Bitte ' + 'Namensnennungstext für By-Clauses' + ' eingeben...'" + :placeholder="$t( + 'message.dataupload.datasets.dcat:distribution.advanced.licenseAttrByText-placeholder' + )" :preIcon="false" inputFieldSize="large" :initialHintText="false" - label="Namensnennungstext für By-Clauses (optional)" + :label=" + $t( + 'message.dataupload.datasets.dcat:distribution.advanced.dcatde:licenseAttributionByText' + )+ ' (optional)' + " :showEndIcon="false" :defaultInput=!showDeleteButton @deleteButtonClicked="deleteModifiedField" @@ -18,6 +24,9 @@ <script setup> import InputField from "../InputField.vue"; import {ref, defineProps, defineEmits, watch } from "vue"; +import { useI18n } from "vue-i18n"; + +const { t } = useI18n(); const props = defineProps({ distributionId: { type: Number, required: false }, diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ModifiedDateV3.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ModifiedDateV3.vue index d70dc46727e151fdba8f40ebfa6cbfe5d6ace481..d6ec3649958c56052ef075977af20d5c869bf688 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ModifiedDateV3.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/OptionalInformation/ModifiedDateV3.vue @@ -2,13 +2,17 @@ <InputField @input="handleInput($event, 'dct:modified')" v-model="modifiedDate" - :defaultInput=!showDeleteButton + :defaultInput="!showDeleteButton" :addOnText="false" :eraseable="false" :datePicker="true" :infoIcon="false" placeholder="TT/MM/JJJJ" - :label="labelText" + :label=" + $t( + 'message.dataupload.datasets.dcat:distribution.recommended.dct:modified' + )+ ' (optional)' + " :preIcon="false" :initialHintText="false" :showEndIcon="false" @@ -19,9 +23,11 @@ <script setup> import InputField from "../InputField.vue"; import { defineProps, defineEmits, watch } from "vue"; +import { useI18n } from "vue-i18n"; + +const { t } = useI18n(); const props = defineProps({ - labelText: { type: String, default: "Date (optional)" }, distributionId: { type: Number, required: false }, showDeleteButton: { type: Boolean, default: false }, }); @@ -33,8 +39,6 @@ const handleInput = (event, field) => { }; const deleteModifiedField = () => { - console.log("delete clicked") - emits("deleteButtonClicked", props.distributionId) -} - + emits("deleteButtonClicked", props.distributionId); +}; </script> diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/TextAreaV3.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/TextAreaV3.vue index af26d5fa6d1fb32a7507b27ffebbe39344963a09..7676853ebadce95a6200ced7d353c77b39fa098d 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/TextAreaV3.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/TextAreaV3.vue @@ -4,29 +4,51 @@ <div class="dpiV3_InputWithLabel"> <div class="dpiV3_Top"> <div class="dpiV3_Label"> - <label class="dpiV3_label copy-small-regular">{{ props.label }}</label> + <label class="dpiV3_label copy-small-regular">{{ + props.label + }}</label> + <TextButtonSmall + v-if="showDeleteButton" + buttonText="löschen" + @click="deleteButton" + tabindex="0" + /> </div> </div> - <div class="dpiV3_Input" :class="{ - dpiV3_disabled: isDisabled, - 'error-state': showError && !isInput_boxFocused && !isFilled, - 'focused-error-state': showError && isInput_boxFocused, - 'filled-error-state': showError && isFilled, - }" @mouseenter="handleMouseEnterInput_box" @mouseleave="handleMouseLeaveInput_box" - @mousedown="handleMouseDownInput_box" :style="{ 'box-shadow': input_box_box_shadow }"> - <textarea ref="inputRef" v-model="inputText" type="text" class="dpiV3_textArea copy-large-regular" - :disabled="isDisabled" :class="{ + <div + class="dpiV3_Input" + :class="{ + dpiV3_disabled: isDisabled, + 'error-state': showError && !isInput_boxFocused && !isFilled, + 'focused-error-state': showError && isInput_boxFocused, + 'filled-error-state': showError && isFilled, + }" + @mouseenter="handleMouseEnterInput_box" + @mouseleave="handleMouseLeaveInput_box" + @mousedown="handleMouseDownInput_box" + :style="{ 'box-shadow': input_box_box_shadow }" + > + <textarea + ref="inputRef" + v-model="inputText" + type="text" + class="dpiV3_textArea copy-large-regular" + :disabled="isDisabled" + :class="{ 'error-state': showError, dpiV3_input_disabled: isDisabled, - }" :placeholder=placeholder @focus="handleInputFocus" @blur="handleInputBlur" - @mousedown="handleInputMouseDown"></textarea> + }" + :placeholder="placeholder" + @focus="handleInputFocus" + @blur="handleInputBlur" + @mousedown="handleInputMouseDown" + ></textarea> </div> </div> <div class="dpiV3_hintText copy-small-regular" v-if="hint && !showError"> <span>This is a supporting message.</span> </div> - </div> </div> </template> @@ -35,6 +57,7 @@ import { ref, watch, defineEmits, defineProps } from "vue"; import "../../config/styles/variables.css"; import "../../config/styles/typography.css"; +import TextButtonSmall from "./TextButtonSmall.vue"; let isInput_boxFocused = ref(false); @@ -79,21 +102,31 @@ const props = defineProps({ type: Boolean, default: false, }, - label: {}, placeholder: {}, hint: {}, + label: {}, + placeholder: {}, + hint: {}, modelValue: { type: String, default: "" }, + showDeleteButton: { type: Boolean, default: false} }); const inputText = ref(props.modelValue); -const emit = defineEmits(["update:modelValue"]); +const emit = defineEmits(["update:modelValue", "deleteClicked"]); -watch(() => props.modelValue, (newVal) => { - inputText.value = newVal; -}); +watch( + () => props.modelValue, + (newVal) => { + inputText.value = newVal; + } +); watch(inputText, (newVal) => { emit("update:modelValue", newVal); }); +const deleteButton = () => { + emit("deleteClicked") +} + const handleInputFocus = () => { isCalendarFocused.value = false; isInputFocused.value = true; @@ -211,9 +244,9 @@ const logVarStatus = (methodName) => { .dpiV3_Label { display: flex; + justify-content: space-between; align-items: center; - gap: var(--Spacing-1, 4px); - flex: 1 0 0; + width: 100%; } .dpiV3_label { diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/DistributionSimplePage.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/DistributionSimplePage.vue index c61a38dd2cdb9547efc888420a01dad7d2da0229..bb664282c3c2f0069b09227cb9a32450e8d30117 100644 --- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/DistributionSimplePage.vue +++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/DistributionSimplePage.vue @@ -146,7 +146,6 @@ showDeleteButton="true" :distributionId="distribution.id" :modelValue="distribution['dct:modified']" - labelText="Aktualisierungsdatum (optional)" @addModifiedDate="handleModifiedDate" @deleteButtonClicked="removeModifiedDate" /> @@ -165,7 +164,6 @@ showDeleteButton="true" :distributionId="distribution.id" :modelValue="distribution['dct:issued']" - labelText="Veröffentlichungsdatum (optional)" @addIssuedDate="handleIssuedDate" @deleteButtonClicked="removeIssuedDate" /> @@ -174,26 +172,22 @@ <!------------------------------ Description, dct:description ----------------------------------> <div - v-if=" - distribution['dct:description'] && - distribution['dct:description'].trim() !== '' - " + v-show="distribution['dct:description'] !== undefined" class="dpiV3_modified dpiV3_label" > <DescriptionV3 @addDescription="handleDescription" :distributionId="distribution.id" :descriptionText="distribution['dct:description']" + :showDeleteButton="true" + @deleteDescription="removeDescriptionField(distribution.id)" /> </div> <!------------------------------ End Description, dct:description ----------------------------------> <!------------------------------ LicenseAttributionByText , dcatde:licenseAttributionByText ----------------------------------> <div - v-if=" - distribution['dcatde:licenseAttributionByText'] && - distribution['dcatde:licenseAttributionByText'].trim() !== '' - " + v-if="distribution['dcatde:licenseAttributionByText'] !== undefined" class="dpiV3_modified dpiV3_label" > <LicenseAttributionByText @@ -232,6 +226,8 @@ @addAvailability="handleAddAvailability" :availabilityText="distribution['dcatap:availability']" :distributionId="distribution.id" + :showDeleteButton="true" + @deleteButtonClicked="removeAvailability(distribution.id)" /> </div> <!------------------- End Availability,dcatap:availability -------------------> @@ -352,8 +348,7 @@ <!------------------- Byte Size,dcat:byteSize -------------------> <div v-if=" - distribution['dcat:byteSize'] && - distribution['dcat:byteSize'].trim() !== '' + distribution['dcat:byteSize'] !== undefined " class="dpiV3_modified dpiV3_label" > @@ -361,6 +356,8 @@ :byteSizeProp="distribution['dcat:byteSize']" :distributionId="distribution.id" @addByteSize="handleByteSize" + @deleteButtonClicked="removeByteSize(distribution.id)" + showDeleteButton="true" /> </div> <!------------------- End Byte Size,dcat:byteSize -------------------> @@ -550,12 +547,12 @@ const distributions = ref([ accessServices: [], "dct:modified": "", "dct:issued": "", - "dct:description": "", - "dcatde:licenseAttributionByText": "", + "dct:description": undefined, + "dcatde:licenseAttributionByText": undefined, "dct:accessRights": "", "dcatap:availability": "", "dct:language": "", - "dcat:byteSize": 0, + "dcat:byteSize": undefined, "dcat:mediaType": "", "dcat:compressFormat": "", "dcat:packageFormat": "", @@ -761,6 +758,16 @@ const removeConformsToStandardBlock = (distributionId) => { distribution.conformsToItems = []; }; +const removeAvailability = (distributionId) => { + const distribution = distributions.value.find((d) => d.id === distributionId); + distribution["dcatap:availability"] = ""; +}; + +const removeByteSize = (distributionId) => { + const distribution = distributions.value.find((d) => d.id === distributionId); + distribution['dcat:byteSize'] = undefined; +}; + const removePolicyItemsBlock = (distributionId) => { const distribution = distributions.value.find((d) => d.id === distributionId); distribution.policyItems = []; @@ -786,9 +793,14 @@ const removeIssuedDate = (distributionId) => { distribution["dct:issued"] = ""; }; +const removeDescriptionField = (distributionId) => { + const distribution = distributions.value.find((d) => d.id === distributionId); + distribution["dct:description"] = undefined; +}; + const removeLicenseAttributionByText = (distributionId) => { const distribution = distributions.value.find((d) => d.id === distributionId); - distribution["dcatde:licenseAttributionByText"] = ""; + distribution["dcatde:licenseAttributionByText"] = undefined; }; const removeAccessRights = (distributionId) => { @@ -816,7 +828,30 @@ const addDistribution = () => { "dct:format": "", "dct:title": "", documentations: [], - }); + conformsToItems: [], + policyItems: [], + accessServices: [], + "dct:modified": "", + "dct:issued": "", + "dct:description": undefined, + "dcatde:licenseAttributionByText": undefined, + "dct:accessRights": "", + "dcatap:availability": "", + "dct:language": "", + "dcat:byteSize": undefined, + "dcat:mediaType": "", + "dcat:compressFormat": "", + "dcat:packageFormat": "", + "adms:status": "", + checksum: { + title: "", + "spdx:checksum": "", + }, + changeLicense: { + title: "", + "dcterms:license": "", + }, + }) }; const addDocumentationsToDistribution = (distributionId, newDocumentations) => {