Add copying and moving of form fields

.drone.yml

@@ -31,10 +31,15 @@ steps:
       commands:
           - while ! curl  --silent 'http://owncloudserver:8080/ocs/v1.php/cloud/capabilities?format=json' -u admin:admin | grep '"status":"ok"'; do sleep 1; done
 
+    - name: node_submodules
+      image: node:20.15.0-slim
+      commands:
+          - cd packages/adrema-form && npm ci && npm run build-import && rm -R node_modules && cd ../../
+
     - name: node
       image: node:20.15.0-slim
       commands:
-          - npm ci && cd packages/adrema-form && npm ci && npm run build && rm -R node_modules && cd ../../ && npm run img && npm run prod && rm -R node_modules
+          - npm ci && npm run img && npm run prod && rm -R node_modules
 
     - name: tests
       image: zoomyboy/adrema-base:latest

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Letzte Änderungen
 
+### 1.12.26
+
+-   Felder im Form-Builder können nun verschoben und kopiert werden
+
 ### 1.12.25
 
 -   Ein Bug wurde behoben, sodass nun wieder Bedingungen für Formular-Mails vergeben werden können

packages/adrema-form

@@ -1 +1 @@
-Subproject commit a4a2a2b3fd7a099cf1e5a9360d5d5450030bf673
+Subproject commit 010825124f7791dfc0dc607e23ec99f49be8aef5

resources/js/views/form/Index.vue

@@ -69,13 +69,13 @@
                     <div>
                         <ui-tabs v-model="activeMailTab" :entries="mailTabs" />
                         <f-editor v-if="activeMailTab === 0" id="mail_top" v-model="single.mail_top" name="mail_top" label="E-Mail-Teil 1" :rows="8" conditions required>
-                            <template #conditions="{cData, resolve}">
+                            <template #conditions="{data, resolve}">
-                                <conditions-form id="mail_top_conditions" :single="single" :value="cData" @save="resolve" />
+                                <conditions-form id="mail_top_conditions" :single="single" :value="data" @save="resolve" />
                             </template>
                         </f-editor>
                         <f-editor v-if="activeMailTab === 1" id="mail_bottom" v-model="single.mail_bottom" name="mail_bottom" label="E-Mail-Teil 2" :rows="8" conditions required>
-                            <template #conditions="{d, resolve}">
+                            <template #conditions="{data, resolve}">
-                                <conditions-form id="mail_bottom_conditions" :single="single" :value="d" @save="resolve" />
+                                <conditions-form id="mail_bottom_conditions" :single="single" :value="data" @save="resolve" />
                             </template>
                         </f-editor>
                     </div>

resources/js/views/formtemplate/FormBuilder.vue

@@ -11,6 +11,17 @@
                 <f-text id="sectionform-name" v-model="singleSection.model.name" label="Name"></f-text>
                 <f-textarea id="sectionform-intro" v-model="singleSection.model.intro" label="Einleitung"></f-textarea>
             </asideform>
+            <asideform
+                v-if="moving !== null"
+                heading="Feld verschieben nach Sektion …"
+                @close="moving = null"
+            >
+                <div class="mt-3 grid gap-3">
+                    <a v-for="(section, index) in modelValue.sections" :key="index" class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#" @click.prevent="moveFieldToSection(index)">
+                        <span v-text="section.name"></span>
+                    </a>
+                </div>
+            </asideform>
             <asideform v-if="singleSection !== null && singleSection.mode === 'reorder'" heading="Felder ordnen" @close="singleSection = null" @submit="storeSection">
                 <draggable v-model="singleSection.model.fields" item-key="key" :component-data="{class: 'mt-3 grid gap-3'}">
                     <template #item="{element}">
@@ -59,6 +70,8 @@
                 @editFields="startReordering($event.detail[0])"
                 @deleteSection="deleteSection($event.detail[0])"
                 @active="updateActive($event.detail[0])"
+                @copy-field="copyField($event.detail[0], $event.detail[1])"
+                @move-field="moving = {section: $event.detail[0], field: $event.detail[1]}"
             ></event-form>
         </ui-box>
     </form>
@@ -67,7 +80,7 @@
 <script lang="js" setup>
 import { watch, computed, ref } from 'vue';
 import { snakeCase } from 'change-case';
-import '!/adrema-form/dist/main.js';
+import '!/adrema-form/dist/assets/main.js';
 import Asideform from './Asideform.vue';
 import TextareaField from './TextareaField.vue';
 import TextField from './TextField.vue';
@@ -83,6 +96,7 @@ import Draggable from 'vuedraggable';
 
 const singleSection = ref(null);
 const singleField = ref(null);
+const moving = ref(null);
 const active = ref(null);
 
 async function onReorder() {
@@ -124,6 +138,29 @@ function editSection(sectionIndex) {
         mode: 'edit',
     };
 }
+function moveFieldToSection(newSectionIndex) {
+    if (!moving.value) {
+        return;
+    }
+    singleField.value = {
+        model: JSON.parse(JSON.stringify(inner.value.sections[moving.value.section].fields[moving.value.field])),
+        sectionIndex: newSectionIndex,
+        index: null,
+    };
+    storeField();
+    deleteField(moving.value.section, moving.value.field);
+    moving.value = null;
+}
+
+function copyField(sectionIndex, fieldIndex) {
+    var field = JSON.parse(JSON.stringify(inner.value.sections[sectionIndex].fields[fieldIndex]));
+    field.name = field.name + ' - Kopie';
+    singleField.value = {
+        model: field,
+        sectionIndex: sectionIndex,
+        index: null,
+    };
+}
 
 function startReordering(index) {
     singleSection.value = {