Add: Remove option in FormBuilder

resources/js/components/ui/ActionButton.vue

@@ -0,0 +1,28 @@
+<template>
+    <a v-tooltip="tooltip" :href="href" :target="blank ? '_BLANK' : '_SELF'" class="inline-flex btn btn-sm">
+        <ui-sprite :src="icon"></ui-sprite>
+    </a>
+</template>
+
+<script setup>
+defineProps({
+    tooltip: {
+        required: true,
+        type: String,
+    },
+    href: {
+        type: String,
+        default: () => '#',
+        required: false,
+    },
+    blank: {
+        type: Boolean,
+        default: () => false,
+        required: false,
+    },
+    icon: {
+        type: String,
+        required: true,
+    },
+});
+</script>

resources/js/views/form/Index.vue

@@ -112,9 +112,11 @@
                     <div v-text="form.participants_count"></div>
                 </td>
                 <td>
-                    <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="edit(form)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <div class="flex space-x-2">
-                    <a v-tooltip="`Teilnehmende anzeigen`" href="#" class="ml-2 inline-flex btn btn-info btn-sm" @click.prevent="showParticipants(form)"><ui-sprite src="user"></ui-sprite></a>
+                        <ui-action-button tooltip="Bearbeiten" class="btn-warning" icon="pencil" @click.prevent="edit(form)"></ui-action-button>
-                    <a v-tooltip="`Löschen`" href="#" class="ml-2 inline-flex btn btn-danger btn-sm" @click.prevent="deleting = form"><ui-sprite src="trash"></ui-sprite></a>
+                        <ui-action-button tooltip="Teilnehmende anzeigen" class="btn-info" icon="user" @click.prevent="showParticipants(form)"></ui-action-button>
+                        <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="deleting = form"></ui-action-button>
+                    </div>
                 </td>
             </tr>
         </table>

resources/js/views/formtemplate/CheckboxesField.vue

@@ -1,20 +1,30 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
-        <f-text
+        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
-            v-for="(option, index) in modelValue.options"
+            <f-text
-            :id="`options-${index}`"
+                :id="`options-${index}`"
-            :key="index"
+                size="sm"
-            size="sm"
+                class="grow"
-            :name="`options-${index}`"
+                :name="`options-${index}`"
-            :model-value="option"
+                :model-value="option"
-            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
+                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
-        ></f-text>
+            ></f-text>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
+            <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: {},

resources/js/views/formtemplate/RadioField.vue

@@ -1,16 +1,23 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
-        <f-text
+        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
-            v-for="(option, index) in modelValue.options"
+            <f-text
-            :id="`options-${index}`"
+                :id="`options-${index}`"
-            :key="index"
+                size="sm"
-            size="sm"
+                class="grow"
-            :name="`options-${index}`"
+                :name="`options-${index}`"
-            :model-value="option"
+                :model-value="option"
-            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
+                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
-        ></f-text>
+            ></f-text>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
+            <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: {},

resources/js/views/formtemplate/useElements.js

@@ -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};
+}

resources/js/views/invoice/Index.vue

@@ -99,10 +99,12 @@
                     <div v-text="invoice.via"></div>
                 </td>
                 <td>
-                    <a v-tooltip="`Anschauen`" :href="invoice.links.pdf" target="_BLANK" class="inline-flex btn btn-info btn-sm"><ui-sprite src="eye"></ui-sprite></a>
+                    <div class="flex space-x-2">
-                    <a v-tooltip="`Erinnerung anschauen`" :href="invoice.links.rememberpdf" target="_BLANK" class="ml-2 inline-flex btn btn-info btn-sm"><ui-sprite src="document"></ui-sprite></a>
+                        <ui-action-button tooltip="Anschauen" :href="invoice.links.pdf" class="btn-info" icon="eye" blank></ui-action-button>
-                    <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="edit(invoice)"><ui-sprite src="pencil"></ui-sprite></a>
+                        <ui-action-button tooltip="Erinnerung anschauen" :href="invoice.links.rememberpdf" class="btn-info" icon="document" blank></ui-action-button>
-                    <a v-tooltip="`Löschen`" href="#" class="ml-2 inline-flex btn btn-danger btn-sm" @click.prevent="deleting = invoice"><ui-sprite src="trash"></ui-sprite></a>
+                        <ui-action-button tooltip="Bearbeiten" class="btn-warning" icon="pencil" @click.prevent="edit(invoice)"></ui-action-button>
+                        <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="deleting = invoice"></ui-action-button>
+                    </div>
                 </td>
             </tr>
         </table>