silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add: Remove option in FormBuilder
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2024-04-11 23:01:52 +02:00
parent 45b559ea17
commit a1b0f6496c
3 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/views/formtemplate/CheckboxesField.vue
View File

@ -1,20 +1,30 @@
<template>
<div class="space-y-1">
<span class="text-xs font-semibold text-gray-400">Optionen</span>
<f-text
v-for="(option, index) in modelValue.options"
:id="`options-${index}`"
:key="index"
size="sm"
:name="`options-${index}`"
:model-value="option"
@update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
></f-text>
<ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
<div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
<f-text
:id="`options-${index}`"
size="sm"
class="grow"
:name="`options-${index}`"
:model-value="option"
@update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
></f-text>
<ui-action-button
tooltip="Löschen"
icon="trash"
class="btn-danger"
@click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
></ui-action-button>
</div>
<ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
</div>
</template>
<script setup>
import useElements from './useElements.js';
const {addOption, setOption, removeOption} = useElements();
const props = defineProps({
modelValue: {},
meta: {},

30
resources/js/views/formtemplate/RadioField.vue
View File

@ -1,16 +1,23 @@
<template>
<div class="space-y-1">
<span class="text-xs font-semibold text-gray-400">Optionen</span>
<f-text
v-for="(option, index) in modelValue.options"
:id="`options-${index}`"
:key="index"
size="sm"
:name="`options-${index}`"
:model-value="option"
@update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
></f-text>
<ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
<div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
<f-text
:id="`options-${index}`"
size="sm"
class="grow"
:name="`options-${index}`"
:model-value="option"
@update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
></f-text>
<ui-action-button
tooltip="Löschen"
icon="trash"
class="btn-danger"
@click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
></ui-action-button>
</div>
<ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
</div>
<f-switch
id="fieldrequired"
@ -24,6 +31,9 @@
</template>
<script setup>
import useElements from './useElements.js';
const {addOption, setOption, removeOption} = useElements();
const props = defineProps({
modelValue: {},
meta: {},

15
resources/js/views/formtemplate/useElements.js vendored Normal file
View File

@ -0,0 +1,15 @@
export default function useElements() {
function addOption(options) {
return [...options, ''];
}
function setOption(options, index, $event) {
return options.toSpliced(index, 1, $event);
}
function removeOption(options, index) {
return options.toSpliced(index, 1);
}
return {addOption, setOption, removeOption};
}