feat: Add textarea form element
This commit is contained in:
@@ -99,7 +99,7 @@ Application Form
|
|||||||
└── Form Elements (FormElement)
|
└── Form Elements (FormElement)
|
||||||
├── id (UUID - generated by backend)
|
├── id (UUID - generated by backend)
|
||||||
├── reference (string - custom key like "art_der_massnahme")
|
├── reference (string - custom key like "art_der_massnahme")
|
||||||
├── type (SELECT, CHECKBOX, RADIOBUTTON, TEXTFIELD, SWITCH, TITLE_BODY_TEXTFIELDS)
|
├── type (SELECT, CHECKBOX, RADIOBUTTON, TEXTFIELD, TEXTAREA, SWITCH, TITLE_BODY_TEXTFIELDS, DATE)
|
||||||
├── title, description
|
├── title, description
|
||||||
├── options (FormOption[])
|
├── options (FormOption[])
|
||||||
│ ├── value, label
|
│ ├── value, label
|
||||||
@@ -227,7 +227,7 @@ Form elements can be conditionally shown or hidden based on the values of other
|
|||||||
"reference": "testphase_zeitraum",
|
"reference": "testphase_zeitraum",
|
||||||
"title": "Testphase Zeitraum",
|
"title": "Testphase Zeitraum",
|
||||||
"description": "Zeitraum der Testphase",
|
"description": "Zeitraum der Testphase",
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"options": [
|
"options": [
|
||||||
{
|
{
|
||||||
"value": "",
|
"value": "",
|
||||||
|
|||||||
@@ -1457,6 +1457,7 @@ components:
|
|||||||
- CHECKBOX
|
- CHECKBOX
|
||||||
- RADIOBUTTON
|
- RADIOBUTTON
|
||||||
- TEXTFIELD
|
- TEXTFIELD
|
||||||
|
- TEXTAREA
|
||||||
- SWITCH
|
- SWITCH
|
||||||
- TITLE_BODY_TEXTFIELDS
|
- TITLE_BODY_TEXTFIELDS
|
||||||
- DATE
|
- DATE
|
||||||
|
|||||||
@@ -89,6 +89,8 @@ function getResolvedComponent(formElement: FormElementDto) {
|
|||||||
return resolveComponent('TheSwitch')
|
return resolveComponent('TheSwitch')
|
||||||
case 'TEXTFIELD':
|
case 'TEXTFIELD':
|
||||||
return resolveComponent('TheInput')
|
return resolveComponent('TheInput')
|
||||||
|
case 'TEXTAREA':
|
||||||
|
return resolveComponent('TheTextarea')
|
||||||
case 'TITLE_BODY_TEXTFIELDS':
|
case 'TITLE_BODY_TEXTFIELDS':
|
||||||
return resolveComponent('TheTitleBodyInput')
|
return resolveComponent('TheTitleBodyInput')
|
||||||
case 'DATE':
|
case 'DATE':
|
||||||
|
|||||||
31
legalconsenthub/app/components/formelements/TheTextarea.vue
Normal file
31
legalconsenthub/app/components/formelements/TheTextarea.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<UFormField :label="label">
|
||||||
|
<UTextarea v-model="modelValue" class="w-full" autoresize />
|
||||||
|
</UFormField>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { FormOptionDto } from '~~/.api-client'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
label?: string
|
||||||
|
formOptions: FormOptionDto[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:formOptions', value: FormOptionDto[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const modelValue = computed({
|
||||||
|
get: () => props.formOptions[0]?.value ?? '',
|
||||||
|
set: (val) => {
|
||||||
|
const firstOption = props.formOptions[0]
|
||||||
|
if (val && firstOption) {
|
||||||
|
const updatedModelValue = [...props.formOptions]
|
||||||
|
updatedModelValue[0] = { ...firstOption, value: val.toString() }
|
||||||
|
emit('update:formOptions', updatedModelValue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -107,7 +107,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "testphase_findet_statt",
|
"sourceFormElementReference": "testphase_findet_statt",
|
||||||
@@ -153,7 +153,7 @@
|
|||||||
"employeeDataCategory": "SENSITIVE"
|
"employeeDataCategory": "SENSITIVE"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "verwendung_anonymisierter_daten",
|
"sourceFormElementReference": "verwendung_anonymisierter_daten",
|
||||||
@@ -173,7 +173,7 @@
|
|||||||
"employeeDataCategory": "REVIEW_REQUIRED"
|
"employeeDataCategory": "REVIEW_REQUIRED"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "verwendung_anonymisierter_daten",
|
"sourceFormElementReference": "verwendung_anonymisierter_daten",
|
||||||
@@ -193,7 +193,7 @@
|
|||||||
"employeeDataCategory": "SENSITIVE"
|
"employeeDataCategory": "SENSITIVE"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "verwendung_anonymisierter_daten",
|
"sourceFormElementReference": "verwendung_anonymisierter_daten",
|
||||||
@@ -233,7 +233,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "abgeloestes_system",
|
"sourceFormElementReference": "abgeloestes_system",
|
||||||
@@ -273,7 +273,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "geaendertes_system",
|
"sourceFormElementReference": "geaendertes_system",
|
||||||
@@ -299,7 +299,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "HIDE",
|
"conditionType": "HIDE",
|
||||||
"sourceFormElementReference": "art_der_massnahme",
|
"sourceFormElementReference": "art_der_massnahme",
|
||||||
@@ -319,7 +319,7 @@
|
|||||||
"employeeDataCategory": "REVIEW_REQUIRED"
|
"employeeDataCategory": "REVIEW_REQUIRED"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "HIDE",
|
"conditionType": "HIDE",
|
||||||
"sourceFormElementReference": "art_der_massnahme",
|
"sourceFormElementReference": "art_der_massnahme",
|
||||||
@@ -339,7 +339,7 @@
|
|||||||
"employeeDataCategory": "REVIEW_REQUIRED"
|
"employeeDataCategory": "REVIEW_REQUIRED"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "HIDE",
|
"conditionType": "HIDE",
|
||||||
"sourceFormElementReference": "art_der_massnahme",
|
"sourceFormElementReference": "art_der_massnahme",
|
||||||
@@ -365,7 +365,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "HIDE",
|
"conditionType": "HIDE",
|
||||||
"sourceFormElementReference": "art_der_massnahme",
|
"sourceFormElementReference": "art_der_massnahme",
|
||||||
@@ -385,7 +385,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "HIDE",
|
"conditionType": "HIDE",
|
||||||
"sourceFormElementReference": "art_der_massnahme",
|
"sourceFormElementReference": "art_der_massnahme",
|
||||||
@@ -405,7 +405,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "HIDE",
|
"conditionType": "HIDE",
|
||||||
"sourceFormElementReference": "art_der_massnahme",
|
"sourceFormElementReference": "art_der_massnahme",
|
||||||
@@ -535,7 +535,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "modulbasiertes_system",
|
"sourceFormElementReference": "modulbasiertes_system",
|
||||||
@@ -555,7 +555,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "modulbasiertes_system",
|
"sourceFormElementReference": "modulbasiertes_system",
|
||||||
@@ -575,7 +575,7 @@
|
|||||||
"employeeDataCategory": "NON_CRITICAL"
|
"employeeDataCategory": "NON_CRITICAL"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "modulbasiertes_system",
|
"sourceFormElementReference": "modulbasiertes_system",
|
||||||
@@ -647,7 +647,7 @@
|
|||||||
"employeeDataCategory": "REVIEW_REQUIRED"
|
"employeeDataCategory": "REVIEW_REQUIRED"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"type": "TEXTFIELD",
|
"type": "TEXTAREA",
|
||||||
"visibilityCondition": {
|
"visibilityCondition": {
|
||||||
"conditionType": "SHOW",
|
"conditionType": "SHOW",
|
||||||
"sourceFormElementReference": "wirtschaftliche_auswirkungen",
|
"sourceFormElementReference": "wirtschaftliche_auswirkungen",
|
||||||
|
|||||||
Reference in New Issue
Block a user