Skip to content
Snippets Groups Projects
Commit 7fe465cc authored by mic29226's avatar mic29226
Browse files

quickfix for temporal resolution

parent 9c9a6393
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/piveau-hub-ui-modules/lib/data-provider-interface/HappyFlowComponents/ui/ButtonV3.vue
+ 73
− 143
View file @ 7fe465cc
<template>
<div class="dpiV3_V3-typography" :class="externalClass" v-bind="$attrs">
<button
tabindex="0"
v-if="buttonText"
:class="[
dpiV3_buttonClass,
{ activeStatePrimary: isPrimaryActive && variant === 'primary' },
{ activeStateSecondary: isSecondaryActive && variant === 'secondary' },
{ activeStateTertiary: isTertiaryActive && variant === 'tertiary' },
]"
:disabled="disabled"
@mousedown="removeFocus"
@mouseup="removeActiveState"
:style="focusStyle"
@focus="isFocused = true"
@blur="isFocused = false"
@keydown.enter="handleKeyPress"
@keydown.space.prevent="handleKeyPress"
@keyup.enter="removeActiveStateKeyUp"
@keyup.space="removeActiveStateKeyUp"
>
<button tabindex="0" v-if="buttonText" :class="[
dpiV3_buttonClass,
{ activeStatePrimary: isPrimaryActive && variant === 'primary' },
{ activeStateSecondary: isSecondaryActive && variant === 'secondary' },
{ activeStateTertiary: isTertiaryActive && variant === 'tertiary' },
]" :disabled="disabled" @mousedown="removeFocus" @mouseup="removeActiveState" :style="focusStyle"
@focus="isFocused = true" @blur="isFocused = false" @keydown.enter="handleKeyPress"
@keydown.space.prevent="handleKeyPress" @keyup.enter="removeActiveStateKeyUp"
@keyup.space="removeActiveStateKeyUp">
<span v-if="iconStart" class="dpiV3_icon" :class="iconSizeClass">
<PhPlusCircle
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'plus'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
<PhArrowCounterClockwise :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'reset'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhTrash
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'trash'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhPlusCircle :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'plus'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhMagnifyingGlass
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'MagnifyingGlass'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhTrash :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'trash'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhCheck
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'Check'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhMagnifyingGlass :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'MagnifyingGlass'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhCaretLeft
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'CaretLeft'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhCheck :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'Check'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhPlusSquare
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'PlusSquare'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhCaretLeft :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'CaretLeft'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
" />
<PhPlusSquare :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'PlusSquare'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
" />
</span>
<span>{{ buttonText }}</span>
<span v-if="iconEnd" class="dpiV3_icon" :class="iconSizeClass">
<PhMagnifyingGlass
:size="size === 'small' ? '16px' : '24px'"
v-if="iconEnd === 'MagnifyingGlass'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
<PhMagnifyingGlass :size="size === 'small' ? '16px' : '24px'" v-if="iconEnd === 'MagnifyingGlass'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhCheck
:size="size === 'small' ? '16px' : '24px'"
v-if="iconEnd === 'Check'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhCheck :size="size === 'small' ? '16px' : '24px'" v-if="iconEnd === 'Check'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhCaretRight
:size="size === 'small' ? '16px' : '24px'"
v-if="iconEnd === 'CaretRight'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhCaretRight :size="size === 'small' ? '16px' : '24px'" v-if="iconEnd === 'CaretRight'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
" />
</span>
</button>
<!-- Icon-only button -->
<div
tabindex="0"
v-if="!buttonText"
:class="[
'dpiV3_button-icon-only',
iconSizeClass,
{ 'dpiV3_button-icon-only-large': size === 'large' },
{ activeStatePrimary: isPrimaryActive && variant === 'primary' },
{ activeStateSecondary: isSecondaryActive && variant === 'secondary' },
{ activeStateTertiary: isTertiaryActive && variant === 'tertiary' },
]"
:disabled="disabled"
@mousedown="removeFocus"
@mouseup="removeActiveState"
:style="focusStyle"
@focus="isFocused = true"
@blur="isFocused = false"
@keydown.enter="handleKeyPress"
@keydown.space.prevent="handleKeyPress"
@keyup.enter="removeActiveStateKeyUp"
@keyup.space="removeActiveStateKeyUp"
>
<div tabindex="0" v-if="!buttonText" :class="[
'dpiV3_button-icon-only',
iconSizeClass,
{ 'dpiV3_button-icon-only-large': size === 'large' },
{ activeStatePrimary: isPrimaryActive && variant === 'primary' },
{ activeStateSecondary: isSecondaryActive && variant === 'secondary' },
{ activeStateTertiary: isTertiaryActive && variant === 'tertiary' },
]" :disabled="disabled" @mousedown="removeFocus" @mouseup="removeActiveState" :style="focusStyle"
@focus="isFocused = true" @blur="isFocused = false" @keydown.enter="handleKeyPress"
@keydown.space.prevent="handleKeyPress" @keyup.enter="removeActiveStateKeyUp"
@keyup.space="removeActiveStateKeyUp">
<span v-if="!buttonText" class="dpiV3_icon">
<PhMagnifyingGlass
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'MagnifyingGlass'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
<PhMagnifyingGlass :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'MagnifyingGlass'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
<PhCheck
:size="size === 'small' ? '16px' : '24px'"
v-if="iconStart === 'Check'"
:color="
variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
" />
<PhCheck :size="size === 'small' ? '16px' : '24px'" v-if="iconStart === 'Check'" :color="variant === 'primary'
? '#FFFFFF'
: variant === 'secondary'
? '#0B1A25'
: '#0172AD'
"
/>
" />
</span>
</div>
</div>
......@@ -189,7 +118,7 @@ import {
PhCaretLeft,
PhPlusCircle,
PhTrash,
PhPlusSquare
PhPlusSquare, PhArrowCounterClockwise
} from "@phosphor-icons/vue";
export default defineComponent({
......@@ -202,7 +131,8 @@ export default defineComponent({
PhCaretLeft,
PhPlusCircle,
PhTrash,
PhPlusSquare
PhPlusSquare,
PhArrowCounterClockwise
},
props: {
buttonText: {
......
packages/piveau-hub-ui-modules/lib/data-provider-interface/components/TempResPage.vue
+ 28
− 14
View file @ 7fe465cc
......@@ -2,7 +2,7 @@
<div class="dpiV3InnerComponentWrap">
<h4>{{ $t("message.dataupload.datasets.dcat:temporalResolution.title") }}</h4>
<div> {{ $t("message.dataupload.datasets.dcat:temporalResolution.description") }}</div>
<div class="dpiV3AutoCompleteWrap" v-for="(item, index) in timesList">
<div class="dpiV3AutoCompleteWrap" v-for="(item, index) in timesList " :key="item.id">
<div class="dpiV3_firstRow">
<div class="dpiV3_firstRow_inner">
<InputField @input="handleInput($event.target.value, index, 'dcat:startDate')" :defaultInput="true"
......@@ -33,12 +33,15 @@
<CheckboxV3 class="" :type="'checkbox'"
:text="{ label: $t('message.dataupload.datasets.dcat:temporalResolution.input.checkbox.label') }"
:data="[]" @change="handleCheckboxChange($event, index)" />
<ButtonV3 :buttonText='dynamicButtonText' size="small" iconStart="trash" variant="tertiary" />
<ButtonV3 v-if="timesList.length > 1" :buttonText='dynamicButtonText' size="small" iconStart="trash"
variant="tertiary" @click="removeIndex(index)" />
<ButtonV3 v-else :buttonText='dynamicButtonText' size="small" iconStart="reset" variant="tertiary">
</ButtonV3>
</div>
</div>
<div class="dpiV3_tempAddMore">
<ButtonV3 :buttonText='$t("message.dataupload.datasets.dcat:temporalResolution.addMore")' size="medium"
iconStart="plus" variant="tertiary" @click="timesList.push('index2')" />
iconStart="plus" variant="tertiary" @click="counter = counter + 1; timesList.push({ id: counter })" />
</div>
</div>
......@@ -49,30 +52,43 @@ import InputField from "../HappyFlowComponents/ui/InputField.vue";
import CheckboxV3 from "../HappyFlowComponents/ui/CheckboxV3.vue";
import ButtonV3 from "../HappyFlowComponents/ui/ButtonV3.vue";
import { ref, watch } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let checkboxState = ref([false]);
let timesList = ref(['init'])
let dynamicButtonText = ref()
let timesList = ref([{ id: 0, 'dcat:startDate': "DD/MM/YYYY", 'dcat:endDate': "DD/MM/YYYY" }])
let counter = 0
let dynamicButtonText = ref(t("message.dataupload.menu.reset"))
// Watcher für dynamische Aktualisierung
watch(() => t("message.dataupload.menu.reset"), (newText) => {
dynamicButtonText.value = newText;
});
watch(timesList.value, (newValue) => {
watch(timesList, (newValue) => {
if (timesList.length > 1) {
dynamicButtonText.value = 'Text für Bedingung A';
if (timesList.value.length > 1) {
dynamicButtonText.value = t("message.dataupload.menu.delete");
} else {
dynamicButtonText.value = 'Text für andere Bedingungen';
dynamicButtonText.value = t("message.dataupload.menu.reset");
}
});
// $t("message.dataupload.datasets.dcat:temporalResolution.input.button")
const handleCheckboxChange = (event, i) => {
const checked = event.target.checked; // Extrahiere den checked-Wert
checkboxState.value[i] = checked;
}
const handleInput = (dateItem, index, key) => {
// ToDo
}
const removeIndex = (index) => {
// Verwende die ID des Objekts, um es zu entfernen
const idToRemove = timesList.value[index].id;
// Filtere das Array basierend auf der ID
timesList.value = timesList.value.filter(item => item.id !== idToRemove);
}
</script>
<style scoped>
.dpiV3_firstRow {
......@@ -110,6 +126,4 @@ const handleInput = (dateItem, index, key) => {
.dpiV3AutoCompleteWrap {
gap: var(--Spacing-5, 32px);
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Help | Imprint | Privacy policy | Accessibility | Contact