From 8e688b277b96b81592a1db4e027d31b7eea24d5f Mon Sep 17 00:00:00 2001
From: mic29226 <michael.peters@fokus.fraunhofer.de>
Date: Tue, 18 Mar 2025 10:48:54 +0100
Subject: [PATCH] fixed the kardinality of the widget
---
.../components/WidgetInput.vue | 86 +++++++++++++++++--
.../config/dcatapde_BFS/input-definition.ts | 2 +-
.../views/InputPage.vue | 2 +-
.../lib/form/inputDefinitions.ts | 2 +-
4 files changed, 83 insertions(+), 9 deletions(-)
diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/WidgetInput.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/WidgetInput.vue
index 61261ef13..2f96c43ae 100644
--- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/WidgetInput.vue
+++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/components/WidgetInput.vue
@@ -1,17 +1,26 @@
<template>
<div class="formkitProperty">
- <h4 class="">Widget</h4>
+ <h4 class="">Tag</h4>
<div class="formkitCmpWrap d-flex p-3 w-100">
<div class="formkit-inner">
<input readonly="" placeholder="Wählen Sie die Art des Widgets aus" class="formkit-input" type="text"
- name="mode" id="input_164" aria-required="true" value="" aria-describedby="input_164-rule_required">
+ name="mode" aria-required="true" :value="widgetType" aria-describedby="input_164-rule_required"
+ @click="activeList = !activeList">
+ <ul ref="dropdownListWidget" v-show="activeList" class="autocompleteResultList">
+ <li v-for="match in matches" :key="match" @click="setValue(match); activeList = !activeList"
+ class="p-2 border-b border-gray-200 data-[selected=true]:bg-blue-100 choosableItemsAC">{{ match
+ }}
+ </li>
+ </ul>
</div>
- <button class="ml-3 btn btn-secondary" :class="{ activeLeading: isLeading }" type="button" @click="isLeading">
- Primär?
- </button>
+ <!-- Liste Distribution/ Widget/ Report --- leading kann nur 1 sein und auch nur ein widget -->
+ <button class="ml-3 widgetButton" v-if="widgetType === 'Widget'"
+ :class="{ activeLeading: activeButton,}" type="button" @click="isLeading">
+ Leading
+ </button>
</div>
</div>
@@ -19,13 +28,57 @@
</template>
<script setup>
+import { ref, watch } from 'vue';
+import { getNode } from '@formkit/core'
+
const props = defineProps({
context: Object
})
+let disList = ref(getNode('Distributions').value['distributionList'])
+
+
+// Init every dis as distribution - default state
+props.context.node.input({ type: 'distribution' })
+let activeButton = ref(false)
const isLeading = () => {
- return true
+ checkForLead()
+
+ console.log(props.context.value['type']);
+ if (props.context.value['type'] != 'LeadingWidget' && !activeLeadingWidget.value) {
+ props.context.node.input({ type: 'LeadingWidget' })
+ activeButton.value = !activeButton.value
+ } else {
+ activeLeadingWidget.value = false
+ activeButton.value = false
+ props.context.node.input({ type: 'Widget' })
+ }
+
+}
+const activeList = ref(false)
+const matches = ref(['Distribution', 'Widget', 'Report'])
+let activeLeadingWidget = ref(false)
+let widgetType = ref('')
+
+const checkForLead = () => {
+ disList.value = getNode('Distributions').value['distributionList']
+ console.log(disList.value, getNode('Distributions').value['distributionList']);
+
+ for (let index = 0; index < disList.value.length; index++) {
+ console.log(disList.value[index]['Mandatory']['pv:DistributionType']['type']);
+
+ if (disList.value[index]['Mandatory']['pv:DistributionType']['type'] === 'LeadingWidget') {
+ activeLeadingWidget.value = true
+ }
+ }
+}
+
+const setValue = (item) => {
+ checkForLead()
+ console.log(getNode('Distributions').value['distributionList'].length);
+ props.context.node.input({ type: item })
+ widgetType.value = item
}
</script>
<style scoped>
@@ -37,5 +90,26 @@ const isLeading = () => {
flex-grow: 1;
+}
+
+.formkitCmpWrap {
+ position: relative;
+}
+
+.widgetButton {
+ border-color: lightgray;
+
+ &:hover {
+ background-color: green;
+ color: white;
+ }
+
+}
+
+.activeLeading {
+ background-color: green;
+ color: white;
+ border-color: green;
+
}
</style>
\ No newline at end of file
diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/config/dcatapde_BFS/input-definition.ts b/packages/piveau-hub-ui-modules/lib/data-provider-interface/config/dcatapde_BFS/input-definition.ts
index 8de969b8a..657020c24 100644
--- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/config/dcatapde_BFS/input-definition.ts
+++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/config/dcatapde_BFS/input-definition.ts
@@ -1377,7 +1377,7 @@ const dcatapProperties: InputDefinition = {
distributions: {
isWidget: {
identifier: "widget",
- name: "pv:isWidget",
+ name: "pv:DistributionType",
$formkit: "widget",
class: "property inDistribution",
},
diff --git a/packages/piveau-hub-ui-modules/lib/data-provider-interface/views/InputPage.vue b/packages/piveau-hub-ui-modules/lib/data-provider-interface/views/InputPage.vue
index 5ca7d8654..ca65d5249 100644
--- a/packages/piveau-hub-ui-modules/lib/data-provider-interface/views/InputPage.vue
+++ b/packages/piveau-hub-ui-modules/lib/data-provider-interface/views/InputPage.vue
@@ -3,7 +3,7 @@
<div ref="fkInputContainer" class="inputContainer" v-if="isInput">
<div class="formContainer formkit position-relative">
- <!-- <details>{{ formValues }}</details> -->
+ <details>{{ formValues }}</details>
<FormKit type="form" v-model="formValues" :actions="false" :plugins="[stepPlugin]" id="dpiForm"
@change="saveFormValues({ property: property, page: page, distid: id, values: formValues })"
@click="saveFormValues({ property: property, page: page, distid: id, values: formValues })" @submit.prevent=""
diff --git a/packages/piveau-hub-ui-modules/lib/form/inputDefinitions.ts b/packages/piveau-hub-ui-modules/lib/form/inputDefinitions.ts
index de8ef3926..b5e5dc9b5 100644
--- a/packages/piveau-hub-ui-modules/lib/form/inputDefinitions.ts
+++ b/packages/piveau-hub-ui-modules/lib/form/inputDefinitions.ts
@@ -17,7 +17,7 @@ export default {
component: Repeatable,
},
widget: {
- type: "list",
+ type: "input",
component: WidgetInput,
},
id: {
--
GitLab