Add draggable for fields

package-lock.json

@@ -26,6 +26,7 @@
                 "vite": "^4.5.2",
                 "vue": "^3.3.4",
                 "vue-toastification": "^2.0.0-rc.5",
+                "vuedraggable": "^4.1.0",
                 "wnumb": "^1.2.0"
             },
             "devDependencies": {
@@ -3799,6 +3800,11 @@
                 "tslib": "^2.0.3"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.14.0",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+            "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        },
         "node_modules/source-map": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -4407,6 +4413,17 @@
                 "vue": "^3.0.2"
             }
         },
+        "node_modules/vuedraggable": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+            "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+            "dependencies": {
+                "sortablejs": "1.14.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.1"
+            }
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -45,6 +45,7 @@
         "vite": "^4.5.2",
         "vue": "^3.3.4",
         "vue-toastification": "^2.0.0-rc.5",
+        "vuedraggable": "^4.1.0",
         "wnumb": "^1.2.0"
     }
 }

packages/adrema-form

@@ -1 +1 @@
-Subproject commit 846f2697d3a91d47232240b9dc95ed74f5420506
+Subproject commit 31b03b69ed3d57888cd82d1bfedcd0cb2b9cdc3c

resources/js/views/formtemplate/FormBuilder.vue

@@ -2,7 +2,7 @@
     <form class="grid gap-3 mt-4 grid-cols-[1fr_max-content] items-start" @submit.prevent="submit">
         <div class="grid gap-3">
             <slot name="meta"></slot>
-            <asideform v-if="singleSection !== null"
+            <asideform v-if="singleSection !== null && singleSection.mode === 'edit'"
                 :heading="`Sektion ${singleSection.index !== null ? 'bearbeiten' : 'erstellen'}`"
                 @close="singleSection = null" @submit="storeSection">
                 <f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name"
@@ -10,6 +10,20 @@
                 <f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung"
                     :name="`sectionform-intro`"></f-textarea>
             </asideform>
+            <asideform v-if="singleSection !== null && singleSection.mode === 'reorder'" heading="Felder ordnen"
+                @close="singleSection = null" @submit="storeSection">
+                <draggable item-key="key" :component-data="{ class: 'mt-3 grid gap-3' }" v-model="singleSection.model.fields">
+                    <template #item="{ element }">
+                        <div
+                            class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition justify-between flex items-center">
+                            <span v-text="element.name"></span>
+                            <a href="#">
+                                <ui-sprite class="w-5 h-5" v-tooltip="`Umordnen`" src="menu"></ui-sprite>
+                            </a>
+                        </div>
+                    </template>
+                </draggable>
+            </asideform>
             <asideform v-if="singleSection === null && singleField === null" heading="Feld erstellen" :closeable="false"
                 :storeable="false" @submit="storeField">
                 <div class="mt-3 grid gap-3">
@@ -43,7 +57,8 @@
                 :base-url="meta.base_url" :value="previewString" @editSection="editSection($event.detail[0])"
                 @addSection="addSection" @editField="editField($event.detail[0], $event.detail[1])"
                 @deleteField="deleteField($event.detail[0], $event.detail[1])"
-                @deleteSection="deleteSection($event.detail[0])" @active="updateActive($event.detail[0])"></event-form>
+                @editFields="startReordering($event.detail[0])" @deleteSection="deleteSection($event.detail[0])"
+                @active="updateActive($event.detail[0])"></event-form>
         </ui-box>
     </form>
 </template>
@@ -63,11 +78,19 @@ import NumberField from './NumberField.vue';
 import CheckboxField from './CheckboxField.vue';
 import CheckboxesField from './CheckboxesField.vue';
 import ColumnSelector from './ColumnSelector.vue';
+import Draggable from 'vuedraggable';
 
 const singleSection = ref(null);
 const singleField = ref(null);
 const active = ref(null);
 
+async function onReorder() {
+    var order = this.inner.map((f) => f.id);
+    this.loading = true;
+    this.inner = (await this.axios.patch(`/mediaupload/${this.parentName}/${this.parentId}/${this.collection}`, { order })).data;
+    this.loading = false;
+}
+
 function updateActive(a) {
     active.value = a;
     if (a === null) {
@@ -97,6 +120,15 @@ function editSection(sectionIndex) {
     singleSection.value = {
         model: { ...inner.value.sections[sectionIndex] },
         index: sectionIndex,
+        mode: 'edit',
+    };
+}
+
+function startReordering(index) {
+    singleSection.value = {
+        model: { ...inner.value.sections[index] },
+        index: index,
+        mode: 'reorder',
     };
 }
 
@@ -111,6 +143,7 @@ function addSection() {
     singleSection.value = {
         model: JSON.parse(JSON.stringify(innerMeta.value.section_default)),
         index: null,
+        mode: 'edit',
     };
 }