Fixes

2025-06-30 20:11:01 +02:00 · 2025-06-30 20:11:01 +02:00 · ab2971e56d
commit ab2971e56d
parent 5ce737a749
93 changed files with 761 additions and 486 deletions
--- a/.docker/images/php/base/Dockerfile
+++ b/.docker/images/php/base/Dockerfile
@ -57,9 +57,7 @@ RUN apt-get update && apt-get install -y \
        unzip \
        libzip-dev \
        mupdf-tools \
-        imagemagick \
-        libmcrypt-dev
-
+        imagemagick
 # Install fileinfo
 RUN docker-php-ext-install -j$(nproc) fileinfo
 # Install intl
@ -69,9 +67,6 @@ RUN docker-php-ext-install -j$(nproc) intl
 # Install mongodb
 RUN pecl install mongodb \
    && docker-php-ext-enable mongodb
-# Install mcrypt
-RUN pecl install mcrypt \
-    && docker-php-ext-enable mcrypt
 # Install curl
 RUN docker-php-ext-install -j$(nproc) curl
 # Install Zip
@ -97,8 +92,10 @@ RUN apt-get update && apt-get install -y \
 # Install ldap
 RUN docker-php-ext-install -j$(nproc) ldap

-RUN docker-php-ext-configure imap --with-kerberos --with-imap-ssl && \
-    docker-php-ext-install -j$(nproc) imap
+#RUN docker-php-ext-configure imap --with-kerberos --with-imap-ssl && \
+#    docker-php-ext-install -j$(nproc) imap
+
+RUN pecl install imap 

 # COPY ./.docker/images/php/base/pdf/php_pdflib.so /pdflib.so

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Controller/Backend/IndexController.php
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Controller/Backend/IndexController.php
@ -0,0 +1,20 @@
+<?php
+namespace Plugin\Custom\PSC\FormBuilder\Controller\Backend;
+
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\Security;
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Lexik\Bundle\JWTAuthenticationBundle\Services\JWTTokenManagerInterface;
+use Symfony\Component\Routing\Annotation\Route;
+
+#[Route('/index')]
+class IndexController extends AbstractController
+{
+    #[Template]
+    #[Security("is_granted('ROLE_USER')")]
+    #[Route(path: '/create', name: 'psc_backend_invoice_index_create')]
+    public function indexAction(JWTTokenManagerInterface $jwtManager)
+    {
+        return array('jwt' => $jwtManager->create($this->getUser()));
+    }
+}
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/+
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/+
@ -1,64 +0,0 @@
-import {v4 as uuidv4} from 'uuid'
-import Dependency from './Dependency.ts'
-
-export default class Border {
-    uuid: string = "";
-    formula: string = "";
-    calcValue: string = "";
-    calcValue1: string = "";
-    calcValue2: string = "";
-    calcValue3: string = "";
-    calcValue4: string = "";
-    calcValue5: string = "";
-    calcValue6: string = "";
-    calcValue7: string = "";
-    calcValue8: string = "";
-    calcValue9: string = "";
-    calcValue10: string = "";
-    flatRate: string = "";
-    value: string = "";
-    dependencys: Dependency[] = [];
-
-    constructor() {
-        this.uuid = uuidv4();
-    }
-
-    addDependency(dep: Dependeny)
-    {
-        this.dependencys.push(dep)
-    }
-
-    toJSON() {
-        return {
-            'formula': this.formula,
-            'calcValue': this.calcValue,
-            'calcValue1': this.calcValue1,
-            'calcValue2': this.calcValue2,
-            'calcValue3': this.calcValue3,
-            'calcValue4': this.calcValue4,
-            'calcValue5': this.calcValue5,
-            'calcValue6': this.calcValue6,
-            'calcValue7': this.calcValue7,
-            'calcValue8': this.calcValue8,
-            'calcValue9': this.calcValue9,
-            'calcValue10': this.calcValue10,
-            'flatRate': this.flatRate,
-            'value': this.value,
-            'dependencys': this.dependencys.reduce((result, dep) => {
-                result.push(dep.toJSON())
-                return result
-            }, [])
-        }
-    }
-    fromJSON(obj) {
-        this.formula = obj.formula
-        this.value = obj.value
-        this.flatRate = obj.flatRate
-        this.calcValue = obj.calcValue
-        obj.dependencys.map((d) => {
-            const dep = new Dependency()
-            dep.fromJSON(d)
-            this.dependencys.push(dep)
-        })
-    }
-}
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/bun.lock
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/bun.lock
@ -8,6 +8,7 @@
        "@vueuse/core": "^13.4.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "ky": "^1.8.1",
        "lucide-vue-next": "^0.514.0",
        "pinia": "^3.0.3",
        "reka-ui": "^2.3.1",
@ -420,6 +421,8 @@

    "kolorist": ["kolorist@1.8.0", "", {}, "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="],

+    "ky": ["ky@1.8.1", "", {}, "sha512-7Bp3TpsE+L+TARSnnDpk3xg8Idi8RwSLdj6CMbNWoOARIrGrbuLGusV0dYwbZOm4bB3jHNxSw8Wk/ByDqJEnDw=="],
+
    "lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],

    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ=="],
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/package.json
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/package.json
@ -5,6 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
+    "check": "vue-tsc -b",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
@ -13,6 +14,7 @@
    "@vueuse/core": "^13.4.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "ky": "^1.8.1",
    "lucide-vue-next": "^0.514.0",
    "pinia": "^3.0.3",
    "reka-ui": "^2.3.1",
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/Gui.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/Gui.vue
@ -3,13 +3,13 @@ import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
-} from '@/components/ui/resizable'
+} from '../components/ui/resizable'

-import { Library } from '@/components/app/library'
-import { Debug } from '@/components/app/debug'
-import { ElementProperties } from '@/components/app/elementproperties'
-import { ElementDependency } from '@/components/app/elementdependency'
-import { Main } from '@/components/app/main'
+import { Library } from '../components/app/library'
+import { Debug } from '../components/app/debug'
+import { ElementProperties } from '../components/app/elementproperties'
+import { ElementDependency } from '../components/app/elementdependency'
+import { Main } from '../components/app/main'
 </script>

 <template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/debug/Debug.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/debug/Debug.vue
@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useElementStore } from '@/stores/Items';
-import { Textarea } from '@/components/ui/textarea'
-import { Button } from '@/components/ui/button'
-import { ref } from 'vue'
+import { useElementStore } from '../../../stores/Items';
+import { Textarea } from '../../../components/ui/textarea'
+import { Button } from '../../../components/ui/button'
 const store = useElementStore()

 function loadJson() {
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementborder/Border.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementborder/Border.vue
@ -1,23 +1,19 @@

 <script lang="ts" setup>
-import { useElementStore } from '@/stores/Items'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Select,SelectContent,SelectItem,SelectTrigger,SelectValue } from '@/components/ui/select'
+import { Input } from '../../../components/ui/input'
+import { Button } from '../../../components/ui/button'
 import Border from '../../../model/Border.ts'
 import { default as DepModel } from '../../../model/Dependency.ts'
 import { Dependency } from '../elementdependency'

-const props = defineProps({
-    borders: Array as PropType<Border[]>
-})
+defineProps<{
+    borders: Border[]
+}>()

-function addDependency(border) {
+function addDependency(border: Border) {
    border.addDependency(new DepModel());
 }

-const store = useElementStore()
-
 </script>

 <template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementborder/ElementBorder.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementborder/ElementBorder.vue
@ -1,23 +1,10 @@
 <script lang="ts" setup>
-import { useElementStore } from '@/stores/Items'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Dependency } from '.'
 import { Border } from '.'
-import { default as DepModel } from '../../../model/Dependency.ts'
-import { default as BorderModel } from '../../../model/Border.ts'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-    dependency: Object as PropType<DepModel>
-})
-
-const store = useElementStore()
-
-function addBorder(dep) {
-    dep.addBorder(new BorderModel());
-}
+import Dependency from '../../../model/Dependency.ts'

+defineProps<{
+    dependency: Dependency
+}>()

 </script>

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementdependency/Dependency.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementdependency/Dependency.vue
@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import { useElementStore } from '@/stores/Items'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Select,SelectContent,SelectItem,SelectTrigger,SelectValue } from '@/components/ui/select'
-import Deptendency from '../../../model/Dependency.ts'
+import { useElementStore } from '../../../stores/Items'
+import { Input } from '../../../components/ui/input'
+import { Button } from '../../../components/ui/button'
+import { Label } from '../../../components/ui/label'
+import { Select,SelectContent,SelectItem,SelectTrigger,SelectValue } from '../../../components/ui/select'
+import Dependency from '../../../model/Dependency.ts'
 import { ElementBorder } from '../elementborder'
 import Border from '../../../model/Border.ts'

-const props = defineProps({
-    dependencys: Array as PropType<Dependency[]>
-})
+defineProps<{
+    dependencys: Dependency[]
+}>()

 const store = useElementStore()

-function addBorder(dep) {
+function addBorder(dep: Dependency) {
   dep.addBorder(new Border()) 
 }

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementdependency/ElementDependency.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementdependency/ElementDependency.vue
@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
-import { useElementStore } from '@/stores/Items'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
+import { useElementStore } from '../../../stores/Items'
+import { Button } from '../../../components/ui/button'
 import { Dependency } from '.'
 import { default as DepModel } from '../../../model/Dependency.ts'
 import {
@ -12,13 +11,13 @@ import {
  DialogFooter,
  DialogHeader,
  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
+} from '../../../components/ui/dialog'

 const store = useElementStore()
+
 let openModal = ref(false)

-function addDependency(event) {
+function addDependency() {
    store.getActiveItem.addDependency(new DepModel());
 }

@ -44,7 +43,7 @@ watch(openModal, (newOpenModal) => {
 	    </DialogDescription>
 	  </DialogHeader>
 	    <div class="overflow-auto h-full w-full">
-		<Button v-on:click="addDependency($event)">Add Dependency</Button>
+		<Button v-on:click="addDependency()">Add Dependency</Button>
 		<Dependency :dependencys="store.getActiveItem.dependencys" />	    
 	    </div>

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementproperties/ElementProperties.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elementproperties/ElementProperties.vue
@ -1,14 +1,16 @@
 <script lang="ts" setup>
-import { useElementStore } from '@/stores/Items'
-import InputElement from '@/model/InputElement'
-import SelectElement from '@/model/SelectElement'
-import HiddenElement from '@/model/HiddenElement'
-import TextElement from '@/model/TextElement'
-import Row from '@/model/Row'
-import TextareaElement from '@/model/TextareaElement'
-import HeadlineElement from '@/model/HeadlineElement'
+import { useElementStore } from '../../../stores/Items'
+import InputElement from '../../../model/InputElement'
+import SelectElement from '../../../model/SelectElement'
+import MediaElement from '../../../model/MediaElement'
+import HiddenElement from '../../../model/HiddenElement'
+import TextElement from '../../../model/TextElement'
+import Row from '../../../model/Row'
+import TextareaElement from '../../../model/TextareaElement'
+import HeadlineElement from '../../../model/HeadlineElement'
 import InputElementProperties from '../properties/InputElement.vue'
 import SelectElementProperties from '../properties/SelectElement.vue'
+import MediaElementProperties from '../properties/MediaElement.vue'
 import HiddenElementProperties from '../properties/HiddenElement.vue'
 import TextElementProperties from '../properties/TextElement.vue'
 import TextareaElementProperties from '../properties/TextareaElement.vue'
@ -17,14 +19,11 @@ import RowProperties from '../properties/RowElement.vue'
 import { ref, watch } from 'vue'
 import {
  Sheet,
-  SheetClose,
  SheetContent,
  SheetDescription,
-  SheetFooter,
  SheetHeader,
  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet'
+} from '../../../components/ui/sheet'

 let openModal = ref(false)

@ -58,6 +57,12 @@ watch(openModal, (newOpenModal) => {
                >
                </HeadlineElementProperties>

+                <MediaElementProperties
+                v-if="store.getActiveItem.type === 9"
+                v-model="store.getActiveItem as MediaElement"
+                >
+                </MediaElementProperties>
+
                <RowProperties
                v-if="store.getActiveItem.type === 7"
                v-model="store.getActiveItem as Row"
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/HeadlineElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/HeadlineElementForm.vue
@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import HeadlineElement from '@/model/HeadlineElement';
+import HeadlineElement from '../../../model/HeadlineElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'

-const props = defineProps({
+const props = defineProps<{
    modelValue: HeadlineElement
-})
+}>()

 let emit = defineEmits(['update:modelValue']);

-const theModel = computed({ 
+const theModel = computed<HeadlineElement>({ 
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
  });
@ -18,12 +17,12 @@ const theModel = computed({
 </script>
 <template>
    <div class="flex gap-2 flex-row items-center content-center">
-      <h1 v-if="theModel.variant == 1" class="text-4xl">{{theModel.default}}</h1>
-      <h6 v-else-if="theModel.variant == 6" class="text-base">{{theModel.default}}</h6>
-      <h5 v-else-if="theModel.variant == 5" class="text-lg">{{theModel.default}}</h5>
-      <h4 v-else-if="theModel.variant == 4" class="text-xl">{{theModel.default}}</h4>
-      <h3 v-else-if="theModel.variant == 3" class="text-2xl">{{theModel.default}}</h3>
-      <h2 v-else-if="theModel.variant == 2" class="text-3xl">{{theModel.default}}</h2>
-      <h1 v-else class="text-4xl">{{theModel.default}}</h1>
+      <h1 v-if="theModel?.variant == '1'" class="text-4xl">{{theModel?.default}}</h1>
+      <h6 v-else-if="theModel?.variant == '6'" class="text-base">{{theModel?.default}}</h6>
+      <h5 v-else-if="theModel?.variant == '5'" class="text-lg">{{theModel?.default}}</h5>
+      <h4 v-else-if="theModel?.variant == '4'" class="text-xl">{{theModel?.default}}</h4>
+      <h3 v-else-if="theModel?.variant == '3'" class="text-2xl">{{theModel?.default}}</h3>
+      <h2 v-else-if="theModel?.variant == '2'" class="text-3xl">{{theModel?.default}}</h2>
+      <h1 v-else class="text-4xl">{{theModel?.default}}</h1>
    </div>
 </template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/HiddenElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/HiddenElementForm.vue
@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import HiddenElement from '@/model/HiddenElement';
+import HiddenElement from '../../../model/HiddenElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { SquareDashed } from 'lucide-vue-next';

-const props = defineProps({
-    modelValue: HiddenElement
-})
+interface Props {
+  modelValue: HiddenElement
+}
+const props = defineProps<Props>()

 let emit = defineEmits(['update:modelValue']);

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/InputElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/InputElementForm.vue
@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import InputElement from '@/model/InputElement';
+import InputElement from '../../../model/InputElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { SquarePen } from 'lucide-vue-next';
+import { Input } from '../../../components/ui/input'

-const props = defineProps({
+const props = defineProps<{
    modelValue: InputElement
-})
+}>()

 let emit = defineEmits(['update:modelValue']);

-const theModel = computed({ 
+const theModel = computed<InputElement>({ 
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
  });
@ -21,6 +20,6 @@ const theModel = computed({
 <template>
    <div class="flex gap-2 flex-row items-center">
        <label class="w-60 flex-inital">{{theModel.name}} {{theModel.default}}</label>
-        <Input v-model:placeholder="theModel.placeholder" :modelValue="theModel.default" v-model:name="theModel.name" v-model:id="theModel.id" v-model:required="theModel.required"/>
+        <Input v-model:placeholder="theModel.placeHolder" :modelValue="theModel.default" v-model:name="theModel.name" v-model:id="theModel.id" v-model:required="theModel.required"/>
    </div>
 </template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/MediaElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/MediaElementForm.vue
@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import MediaElement from '../../../model/MediaElement';
+import { computed } from 'vue';
+
+interface Props {
+  modelValue: MediaElement
+}
+const props = defineProps<Props>()
+
+let emit = defineEmits(['update:modelValue']);
+
+const theModel = computed({ 
+      get: () => props.modelValue,
+      set: (value) => emit('update:modelValue', value),
+  });
+  
+
+</script>
+
+<template>
+    <div class="flex gap-2 flex-row">
+        <label class="w-60 flex-inital">{{theModel.name}}</label>
+    </div>
+</template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/RowElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/RowElementForm.vue
@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import Row from '@/model/Row';
-import Column from '@/model/Column';
+import Row from '../../../model/Row';
+import Column from '../../../model/Column';
+import BaseElement from '../../../model/BaseElement';
 import { ref, computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { SquareDashed } from 'lucide-vue-next';
 import EmptyElementForm from './EmptyElementForm.vue'
 import { RenderElements } from './../renderelements'
-import { useElementStore } from '@/stores/Items'
-import Parser from '@/lib/parser'
+import { useElementStore } from '../../../stores/Items'
+import Parser from '../../../lib/parser'
 import { CirclePlus } from 'lucide-vue-next';

-const props = defineProps({
+interface Props {
    modelValue: Row
-})
+}
+
+const props = defineProps<Props>()

 let emit = defineEmits(['update:modelValue']);
 const dragUuid = ref("");
@ -29,8 +29,10 @@ const theModel = computed({
 const onDrop = (event: DragEvent, targetUuid: string, column: Column) => {
    dragUuid.value = ""
    if(event.dataTransfer?.getData('mode') == "sort") {
-        let item = store.cutItem(store.getSourceDragUuid)
-        column.items.push(item)
+        let item: BaseElement|null  = store.cutItem(store.getSourceDragUuid)
+        if(item !== null) {
+            column.items.push(item)
+        }
        store.setDragMode("")
        event.stopImmediatePropagation()
    }
@ -44,14 +46,6 @@ const onDrop = (event: DragEvent, targetUuid: string, column: Column) => {
    }
 }

-const dragEnter = (event: DragEvent, uuid: string) => {
-    dragUuid.value = uuid
-    event.stopImmediatePropagation()
-    if(store.getDragMode == "sort" && uuid != store.getSourceDragUuid) {
-        event.stopImmediatePropagation()
-    }
-}
-
 const dragLeaveEmpty = (event: DragEvent, uuid: string) => {
    dragUuid.value = ""
    event.stopImmediatePropagation()
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/SelectElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/SelectElementForm.vue
@ -1,16 +1,14 @@
 <script lang="ts" setup>
-import SelectElement from '@/model/SelectElement'
+import SelectElement from '../../../model/SelectElement'
 import { computed } from 'vue'
 import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
-  SelectLabel,
  SelectTrigger,
  SelectValue,
-} from '@/components/ui/select'
-import { SquareParking, SquareChevronDown, SquareDashed } from 'lucide-vue-next';
+} from '../../../components/ui/select'

 const props = defineProps({
    modelValue: SelectElement
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/TextElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/TextElementForm.vue
@ -1,16 +1,14 @@
 <script lang="ts" setup>
-import TextElement from '@/model/TextElement';
+import TextElement from '../../../model/TextElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { SquareParking } from 'lucide-vue-next';

-const props = defineProps({
+const props = defineProps<{
    modelValue: TextElement
-})
+}>()

 let emit = defineEmits(['update:modelValue']);

-const theModel = computed({ 
+const theModel = computed<TextElement>({ 
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
  });
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/TextareaElementForm.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/elements/TextareaElementForm.vue
@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import TextareaElement from '@/model/TextareaElement';
+import TextareaElement from '../../../model/TextareaElement';
 import { computed } from 'vue';
-import { Textarea } from '@/components/ui/textarea'
-import { SquareMenu } from 'lucide-vue-next';
+import { Textarea } from '../../../components/ui/textarea'

-const props = defineProps({
+const props = defineProps<{
    modelValue: TextareaElement
-})
+}>()

 let emit = defineEmits(['update:modelValue']);

-const theModel = computed({ 
+const theModel = computed<TextareaElement>({ 
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
  });
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/library/Library.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/library/Library.vue
@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useElementStore } from '@/stores/Items'
-import { SquareParking, SquareDot, SquareMenu, SquarePen, SquareChevronDown, SquareDashed } from 'lucide-vue-next';
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
+import { useElementStore } from '../../../stores/Items'
+import { Image, SquareParking, SquareDot, SquareMenu, SquarePen, SquareChevronDown, SquareDashed } from 'lucide-vue-next';
+import { Switch } from '../../../components/ui/switch'
+import { Label } from '../../../components/ui/label'
 import { ref, watch } from 'vue'

 const store = useElementStore()
@ -10,9 +10,11 @@ const store = useElementStore()
 let previewMode = ref(false)

 function startDrag(event: DragEvent, item: string) { 
-    event.dataTransfer.dropEffect = 'move';
-    event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData('itemId', item);
+    if(event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('itemId', item)
+    }
    store.setDragMode("insert")
 }

@ -40,6 +42,10 @@ watch(previewMode, (newPreviewMode) => {
            <SquareParking />
            <span>Text</span>
        </div>
+        <div id="media" class="border-1 p-2 w-full flex flex-row gap-2" draggable="true" @dragstart="startDrag($event, '9')" @dragenter.prevent @dragover.prevent>
+            <Image />
+            <span>Media</span>
+        </div>
        <div id="textarea" class="border-1 p-2 w-full flex flex-row gap-2" draggable="true" @dragstart="startDrag($event, '5')" @dragenter.prevent @dragover.prevent>
            <SquareMenu />
            <span>Textarea</span>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/main/Main.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/main/Main.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { RenderElements } from '@/components/app/renderelements'
-import { useElementStore } from '@/stores/Items'
-import Parser from '@/lib/parser'
+import { RenderElements } from '../../../components/app/renderelements'
+import { useElementStore } from '../../../stores/Items'
+import Parser from '../../../lib/parser'

 const store = useElementStore()
+
 function onDrop(event: DragEvent) {
    if(store.dragMode == "insert") {
        const itemType = Number(event.dataTransfer?.getData('itemId'));
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/HeadlineElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/HeadlineElement.vue
@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import HeadlineElement from '@/model/HeadlineElement';
+import HeadlineElement from '../../../model/HeadlineElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '../../../components/ui/input'
 import {
  Select,
  SelectContent,
@ -10,7 +9,7 @@ import {
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from '@/components/ui/select'
+} from '../../../components/ui/select'

 const props = defineProps({
    modelValue: HeadlineElement
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/HiddenElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/HiddenElement.vue
@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import HiddenElement from '@/model/HiddenElement';
+import HiddenElement from '../../../model/HiddenElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '../../../components/ui/input'

 const props = defineProps({
    modelValue: HiddenElement
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/InputElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/InputElement.vue
@ -1,27 +1,27 @@
-<script lang="ts" setup>
-import InputElement from '@/model/InputElement';
-import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Checkbox } from '@/components/ui/checkbox'
-
-const props = defineProps({
-    modelValue: InputElement
-})
-
-let emit = defineEmits(['update:modelValue']);
-
-const theModel = computed({ 
-      get: () => props.modelValue,
-      set: (value) => emit('update:modelValue', value),
-  });
-
-</script>
-
-<template>
+<script lang="ts" setup>
+import InputElement from '../../../model/InputElement'
+import { computed } from 'vue'
+import { Input } from '../../../components/ui/input'
+import { Checkbox } from '../../../components/ui/checkbox'
+
+const props = defineProps<{
+    modelValue: InputElement
+}>()
+
+let emit = defineEmits(['update:modelValue']);
+
+const theModel = computed<InputElement>({
+      get: () => props.modelValue,
+      set: (value) => emit('update:modelValue', value),
+  })
+
+</script>
+
+<template>
    <label>ID</label>
    <Input v-model="theModel!.id" />
    <label>Placeholder</label>
-    <Input v-model="theModel!.placeholder"/>
+    <Input v-model="theModel!.placeHolder"/>
    <label>Default</label>
    <Input v-model="theModel!.default"/>
    <label>Name</label>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/MediaElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/MediaElement.vue
@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import MediaElement from '../../../model/MediaElement';
+import { computed } from 'vue';
+import { Input } from '../../../components/ui/input'
+import { useMedia } from '../../../composables/useMedia'
+
+const props = defineProps({
+    modelValue: MediaElement
+})
+
+let emit = defineEmits(['update:modelValue']);
+
+const theModel = computed({ 
+      get: () => props.modelValue,
+      set: (value) => emit('update:modelValue', value),
+  });
+
+const { media, loading, error } = useMedia()
+
+</script>
+
+<template>
+    <label>ID</label>
+    <Input v-model="theModel!.id" />
+    <label>Default</label>
+    <Input v-model="theModel!.default"/>
+    <label>Name</label>
+    <Input v-model="theModel!.name"/>
+</template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/OptionElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/OptionElement.vue
@ -1,29 +1,36 @@
 <script lang="ts" setup>
-import Option from '@/model/select/Option';
+import Option from '../../../model/select/Option';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
+import { Input } from '../../../components/ui/input'
+import { Button } from '../../../components/ui/button'
 import { Dependency } from '../elementdependency'
 import { default as DepModel } from '../../../model/Dependency.ts'

-const props = defineProps({
+const props = defineProps<{
    option: Option,
-})
+}>()

-function addDependency(option) {
+function addDependency(option: Option) {
    option.addDependency(new DepModel());
 }

+let emit = defineEmits(['update:option'])
+
+const theModel = computed<Option>({
+    get: () => props.option,
+    set: (value) => emit('update:option', value),
+})
+

 </script>

 <template>
    <div class="flex flex-row gap-1">
        <label>ID</label>
-        <Input v-model="option.id" />
+        <Input v-model="theModel.id" />
        <label>Name</label>
-        <Input v-model="option.name"/>
-        <Button v-on:click="addDependency(option)">Add Dependency</Button>
+        <Input v-model="theModel.name"/>
+        <Button v-on:click="addDependency(theModel)">Add Dependency</Button>
    </div>
-    <Dependency :dependencys="option.dependencys" />	    
+    <Dependency :dependencys="theModel.dependencys" />	    
 </template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/RowElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/RowElement.vue
@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import Row from '@/model/Row'
-import Column from '@/model/Column'
+import Row from '../../../model/Row'
+import Column from '../../../model/Column'
 import { computed } from 'vue'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
+import { Button } from '../../../components/ui/button'

 const props = defineProps({
    modelValue: Row
@ -12,16 +11,18 @@ const props = defineProps({
 let emit = defineEmits(['update:modelValue'])

 const theModel = computed({ 
-      get: () => props.modelValue,
-      set: (value) => emit('update:modelValue', value),
-  })
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})

 function addColumn(row: Row) {
-    row.addColumn(new Column())
+    if(row !== null) {
+        row.addColumn(new Column())
+    }
 }

 </script>

 <template>
-    <Button v-on:click="addColumn(theModel)">add Column</Button>
+    <Button v-on:click="addColumn(theModel!)">add Column</Button>
 </template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/SelectElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/SelectElement.vue
@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import SelectElement from '@/model/SelectElement';
-import Option from '@/model/select/Option';
+import SelectElement from '../../../model/SelectElement';
+import Option from '../../../model/select/Option';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '../../../components/ui/input'
+import { Button } from '../../../components/ui/button'
 import {
  Select,
  SelectContent,
@ -12,7 +11,7 @@ import {
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from '@/components/ui/select'
+} from '../../../components/ui/select'
 import OptionElement from './OptionElement.vue'
 import {
  Dialog,
@ -23,20 +22,20 @@ import {
  DialogHeader,
  DialogTitle,
  DialogTrigger,
-} from '@/components/ui/dialog'
+} from '../../../components/ui/dialog'

-const props = defineProps({
+const props = defineProps<{
    modelValue: SelectElement
-})
+}>()

 let emit = defineEmits(['update:modelValue']);

-const theModel = computed({ 
+const theModel = computed<SelectElement>({ 
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
  });

-function addOption(obj) {
+function addOption(obj: SelectElement) {
   obj.addOption(new Option(String(obj.options.length + 1))); 
 }
 </script>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/TextElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/TextElement.vue
@ -1,20 +1,19 @@
 <script lang="ts" setup>
-import TextElement from '@/model/TextElement';
+import TextElement from '../../../model/TextElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '../../../components/ui/input'
+import { Textarea } from '../../../components/ui/textarea'

-const props = defineProps({
+const props = defineProps<{
    modelValue: TextElement
-})
+}>()

-let emit = defineEmits(['update:modelValue']);
+let emit = defineEmits(['update:modelValue'])

-const theModel = computed({ 
+const theModel = computed<TextElement>({ 
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
-  });
+})

 </script>

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/TextareaElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/TextareaElement.vue
@ -1,28 +1,28 @@
 <script lang="ts" setup>
-import TextareaElement from '@/model/TextareaElement';
+import TextareaElement from '../../../model/TextareaElement';
 import { computed } from 'vue';
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '../../../components/ui/input'
+import { Textarea } from '../../../components/ui/textarea'

-const props = defineProps({
+const props = defineProps<{
    modelValue: TextareaElement
-})
+}>()

 let emit = defineEmits(['update:modelValue']);

-const theModel = computed({ 
+const theModel = computed<TextareaElement>({ 
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value),
-  });
+});
+

 </script>

 <template>
    <label>ID</label>
-    <Input v-model="theModel!.id" />
+    <Input v-model="theModel.id" />
    <label>Name</label>
-    <Input v-model="theModel!.name"/>
+    <Input v-model="theModel.name"/>
    <label>Default</label>
-    <Textarea v-model="theModel!.default"/>
+    <Textarea v-model="theModel.default"/>
 </template>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/renderelements/RenderElements.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/renderelements/RenderElements.vue
@ -1,28 +1,31 @@
 <script lang="ts" setup>
-import BaseElement from '@/model/BaseElement';
+import BaseElement from '../../../model/BaseElement';
 import InputElementForm from '../elements/InputElementForm.vue'
 import HiddenElementForm from '../elements/HiddenElementForm.vue'
 import HeadlineElementForm from '../elements/HeadlineElementForm.vue'
 import TextElementForm from '../elements/TextElementForm.vue'
+import MediaElementForm from '../elements/MediaElementForm.vue'
 import TextareaElementForm from '../elements/TextareaElementForm.vue'
 import SelectElementForm from '../elements/SelectElementForm.vue'
 import RowElementForm from '../elements/RowElementForm.vue'
-import InputElement from '@/model/InputElement'
-import HiddenElement from '@/model/HiddenElement'
-import TextElement from '@/model/TextElement'
-import TextareaElement from '@/model/TextareaElement'
-import HeadlineElement from '@/model/HeadlineElement'
-import Row from '@/model/Row'
-import SelectElement from '@/model/SelectElement'
-import { useElementStore } from '@/stores/Items'
-import type { PropType } from 'vue'
-import Parser from '@/lib/parser'
-import { Settings, Trash, Move, CirclePlus, Waypoints } from 'lucide-vue-next';
+import InputElement from '../../../model/InputElement'
+import HiddenElement from '../../../model/HiddenElement'
+import TextElement from '../../../model/TextElement'
+import TextareaElement from '../../../model/TextareaElement'
+import HeadlineElement from '../../../model/HeadlineElement'
+import MediaElement from '../../../model/MediaElement'
+import Row from '../../../model/Row'
+import SelectElement from '../../../model/SelectElement'
+import { useElementStore } from '../../../stores/Items'
+import Parser from '../../../lib/parser'
+import { Settings, Trash, CirclePlus, Waypoints } from 'lucide-vue-next';
 import { ref } from 'vue'

-const props = defineProps({
-    items: Array as PropType<BaseElement[]>
-})
+interface Props {
+    items: BaseElement[]
+}
+
+defineProps<Props>()

 const store = useElementStore()

@ -111,7 +114,7 @@ const editElementDependency = (item: BaseElement) => {
                                />
                            <HiddenElementForm
                                v-if="item.type === 1"
-                                v-model="item as InputElement"
+                                v-model="item as HiddenElement"
                                />
                            <SelectElementForm
                                v-if="item.type === 3"
@ -133,6 +136,10 @@ const editElementDependency = (item: BaseElement) => {
                                v-if="item.type === 7"
                                v-model="item as Row"
                            />
+                            <MediaElementForm
+                                v-if="item.type === 9"
+                                v-model="item as MediaElement"
+                            />
                        </div>
                        <div class="buttons absolute rounded-sm invisible right-0 bg-slate-100/70 flex flex-row gap-2" v-if="!isPreview">
                            <div v-on:click="editElementDependency(item)" class="m-2 cursor-pointer">
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/button/Button.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/button/Button.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'
 import { type ButtonVariants, buttonVariants } from '.'

 interface Props extends PrimitiveProps {
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/checkbox/Checkbox.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/checkbox/Checkbox.vue
@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { Check } from 'lucide-vue-next'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogContent.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogContent.vue
@ -10,7 +10,7 @@ import {
  DialogPortal,
  useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'
 import DialogOverlay from './DialogOverlay.vue'

 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogDescription.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogDescription.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogFooter.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogFooter.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogHeader.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogHeader.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<{
  class?: HTMLAttributes['class']
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogOverlay.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogOverlay.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogScrollContent.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogScrollContent.vue
@ -11,7 +11,7 @@ import {
  DialogPortal,
  useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogTitle.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/dialog/DialogTitle.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/input/Input.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/input/Input.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<{
  defaultValue?: string | number
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/label/Label.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/label/Label.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { Label, type LabelProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/resizable/ResizableHandle.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/resizable/ResizableHandle.vue
@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { GripVertical } from 'lucide-vue-next'
 import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
 const emits = defineEmits<SplitterResizeHandleEmits>()
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/resizable/ResizablePanelGroup.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/resizable/ResizablePanelGroup.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SplitterGroupEmits>()
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectContent.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectContent.vue
@ -9,7 +9,7 @@ import {
  SelectViewport,
  useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'

 defineOptions({
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectItem.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectItem.vue
@ -9,7 +9,7 @@ import {
  SelectItemText,
  useForwardProps,
 } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectLabel.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectLabel.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { SelectLabel, type SelectLabelProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
 </script>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectScrollDownButton.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectScrollDownButton.vue
@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { ChevronDown } from 'lucide-vue-next'
 import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectScrollUpButton.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectScrollUpButton.vue
@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { ChevronUp } from 'lucide-vue-next'
 import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectSeparator.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectSeparator.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectTrigger.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/select/SelectTrigger.vue
@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { ChevronDown } from 'lucide-vue-next'
 import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = withDefaults(
  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetContent.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetContent.vue
@ -10,7 +10,7 @@ import {
  DialogPortal,
  useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'
 import SheetOverlay from './SheetOverlay.vue'

 interface SheetContentProps extends DialogContentProps {
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetDescription.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetDescription.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetFooter.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetFooter.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetHeader.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetHeader.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetOverlay.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetOverlay.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetTitle.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/sheet/SheetTitle.vue
@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogTitle, type DialogTitleProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/switch/Switch.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/switch/Switch.vue
@ -8,7 +8,7 @@ import {
  SwitchThumb,
  useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()

--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/textarea/Textarea.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/ui/textarea/Textarea.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import { cn } from '../../../lib/utils'

 const props = defineProps<{
  class?: HTMLAttributes['class']
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/composables/useMedia.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/composables/useMedia.ts
@ -0,0 +1,28 @@
+import { ref, onMounted } from 'vue'
+import api from '../lib/api'
+
+interface Media {
+  id: number
+  title: string
+}
+
+export function useMedia() {
+  const media = ref<Media[]>([])
+  const loading = ref(false)
+  const error = ref<unknown>(null)
+
+  const fetchMedia = async () => {
+    loading.value = true
+    try {
+      media.value = await api.get('api/plugins/media').json<Media[]>()
+    } catch (err) {
+      error.value = err
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(fetchMedia)
+
+  return { media, loading, error, fetchMedia }
+}
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/lib/api.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/lib/api.ts
@ -0,0 +1,22 @@
+import ky from 'ky';
+
+const api = ky.create({
+  prefixUrl: 'apps',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000,
+  hooks: {
+    beforeRequest: [
+      request => {
+        // Optional: Token aus Storage holen
+        const token = localStorage.getItem('token');
+        if (token) {
+          request.headers.set('Authorization', `Bearer ${token}`);
+        }
+      },
+    ],
+  },
+});
+
+export default api;
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/lib/parser.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/lib/parser.ts
@ -1,6 +1,7 @@
 import type BaseElement from "../model/BaseElement"
 import InputElement from "../model/InputElement"
 import Row from "../model/Row"
+import MediaElement from "../model/MediaElement"
 import Column from "../model/Column"
 import HiddenElement from "../model/HiddenElement"
 import SelectElement from "../model/SelectElement"
@ -12,6 +13,8 @@ export default class Parser {

    static getModelForType(type: Number) : BaseElement {
        switch(type) {
+            case 9:
+                return new MediaElement
            case 8:
                return new Column
            case 7:
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/BaseElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/BaseElement.ts
@ -6,7 +6,10 @@ export enum ElementType {
    InputElement = 2,
    SelectElement = 3,
    EMailElement = 4,
-    Column2Element = 10
+    TextareaElement = 5,
+    HeadlineElement = 6,
+    Column = 8,
+    Row = 7
 }

 export default class BaseElement {
@ -20,17 +23,17 @@ export default class BaseElement {
        return {
            'id': this.id,
            'type': this.type,
-            'dependencys': this.dependencys.reduce((result, dep) => {
+            'dependencys': this.dependencys.reduce((result: object[], dep: Dependency) => {
                result.push(dep.toJSON())
                return result
            }, [])
        }
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        this.id = obj.id
        this.type = obj.type
-        obj.dependencys.map((d) => {
+        obj.dependencys.map((d: any) => {
            const dep = new Dependency()
            dep.fromJSON(d)
            this.dependencys.push(dep)
@ -50,7 +53,7 @@ export default class BaseElement {
        }
    }

-    addDependency(dep: Dependeny)
+    addDependency(dep: Dependency)
    {
        this.dependencys.push(dep)
    }
@ -59,18 +62,11 @@ export default class BaseElement {
        return false
    }

-    insertItemInEmptyColumn(item: BaseElement, targetUuid: string, column: Number) {
-        return false
-    }
-
    cutItem(existingUuid: string) {
        return null
    }

-    getItem(existingUuid: string) {
-        return null
-    }
-
-    deleteItem(item: BaseElement) {
+    deleteItem(item: BaseElement): boolean {
+        return false
    }
 }
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Border.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Border.ts
@ -23,7 +23,7 @@ export default class Border {
        this.uuid = uuidv4();
    }

-    addDependency(dep: Dependeny)
+    addDependency(dep: Dependency)
    {
        this.dependencys.push(dep)
    }
@ -44,13 +44,13 @@ export default class Border {
            'calcValue10': this.calcValue10,
            'flatRate': this.flatRate,
            'value': this.value,
-            'dependencys': this.dependencys.reduce((result, dep) => {
+            'dependencys': this.dependencys.reduce((result: object[], dep: Dependency) => {
                result.push(dep.toJSON())
                return result
            }, [])
        }
    }
-    fromJSON(obj) {
+    fromJSON(obj: any) {
        this.formula = obj.formula
        this.value = obj.value
        this.flatRate = obj.flatRate
@ -65,7 +65,7 @@ export default class Border {
        this.calcValue8 = obj.calcValue8
        this.calcValue9 = obj.calcValue9
        this.calcValue10 = obj.calcValue10
-        obj.dependencys.map((d) => {
+        obj.dependencys.map((d: any) => {
            const dep = new Dependency()
            dep.fromJSON(d)
            this.dependencys.push(dep)
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Column.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Column.ts
@ -16,38 +16,25 @@ export default class Column extends BaseElement  {
        return Object.assign(
            super.toJSON(),
            {
-                'items': this.items.reduce((result, item) => {
+                'items': this.items.reduce((result: object[], item: BaseElement) => {
                    result.push(item.toJSON())
                    return result
                }, [])
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
-        obj.columns.map((d) => {
+        obj.columns.map((d: any) => {
            const column = new Column()
            column.fromJSON(d)
-            this.columns.push(column)
+            this.items.push(column)
        })
    }

-    getItem(existingUuid: string) {
-        let item: BaseElement|null = null;
-        this.items.some((element,indexArray) => {
-            if(element.uuid === existingUuid) {
-                return element
-            }
-            if(item === null) {
-                return element.getItem(existingUuid)
-            }
-        });
-        return item
-    }
-
    cutItem(existingUuid: string) {
        let item: BaseElement|null = null;
-        this.items.forEach((element,indexArray) => {
+        this.items.forEach((element: BaseElement,indexArray: number) => {
            if(element.uuid === existingUuid) {
                item = this.items.splice(indexArray, 1)[0]
                return true
@ -76,7 +63,7 @@ export default class Column extends BaseElement  {
    }

    deleteItem(item: BaseElement): boolean {
-      return this.items.some((element,indexArray) => {
+      return this.items.some((element: BaseElement,indexArray: number) => {
        if(element.uuid === item.uuid) {
          item = this.items.splice(indexArray, 1)[0]
          return true
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Dependency.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Dependency.ts
@ -20,17 +20,17 @@ export default class Dependency {
        return {
            'formula': this.formula,
            'relation': this.relation,
-            'borders': this.borders.reduce((result, border) => {
+            'borders': this.borders.reduce((result: object[], border: Border) => {
                result.push(border.toJSON())
                return result
            }, [])
        }
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        this.relation = obj.relation
        this.formula = obj.formula
-        obj.borders.map((b) => {
+        obj.borders.map((b: any) => {
            const border = new Border()
            border.fromJSON(b)
            this.borders.push(border)
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/HeadlineElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/HeadlineElement.ts
@ -22,7 +22,7 @@ export default class HeadlineElement extends BaseElement  {
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
        this.name = obj.name
        this.default = obj.default
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/HiddenElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/HiddenElement.ts
@ -20,7 +20,7 @@ export default class HiddenElement extends BaseElement  {
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
        this.name = obj.name
        this.default = obj.default
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/InputElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/InputElement.ts
@ -2,12 +2,12 @@ import BaseElement from "./BaseElement";

 export default class InputElement extends BaseElement  {
    default: string = ""
-    placeholder: string = "Placeholder"
+    placeHolder: string = "Placeholder"
    required: boolean = false
    name: string = ""
    xmlType: string = "input"
-    minValue: int = 0
-    maxValue: int = 0
+    minValue: number = 0
+    maxValue: number = 0

    constructor() {
        super();
@ -18,7 +18,7 @@ export default class InputElement extends BaseElement  {
        return Object.assign(
            super.toJSON(),
            {
-                'placeHolder': this.placeholder,
+                'placeHolder': this.placeHolder,
                'default': this.default,
                'name': this.name,
                'minValue': this.minValue,
@ -27,7 +27,7 @@ export default class InputElement extends BaseElement  {
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
        this.name = obj.name
        this.default = obj.default
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/MediaElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/MediaElement.ts
@ -7,7 +7,7 @@ export default class MediaElement extends BaseElement  {
    
    constructor() {
        super();
-        this.type = 8
+        this.type = 9
    }

    public toJSON() {
@ -19,7 +19,7 @@ export default class MediaElement extends BaseElement  {
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
        this.name = obj.name
        this.default = obj.default
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Row.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/Row.ts
@ -17,7 +17,7 @@ export default class Row extends BaseElement  {
        return Object.assign(
            super.toJSON(),
            {
-                'columns': this.columns.reduce((result, column) => {
+                'columns': this.columns.reduce((result: object[], column: Column) => {
                    result.push(column.toJSON())
                    return result
                }, [])
@ -26,7 +26,7 @@ export default class Row extends BaseElement  {

    cutItem(existingUuid: string) {
        let item: BaseElement|null = null;
-        this.columns.some((col,indexArray) => {
+        this.columns.some((col: Column) => {
            item = col.cutItem(existingUuid)
            if(item !== null) {
                return true
@ -35,20 +35,8 @@ export default class Row extends BaseElement  {
        return item
    }

-    getItem(existingUuid: string) {
-        let item: BaseElement|null = null;
-        this.columns.some((col,indexArray) => {
-            item = col.getItem(existingUuid)
-            if(item !== null) {
-                return item;
-            }
-        });
-        return item
-    }
-
-
    insertItem(item: BaseElement, targetUuid: string): boolean {
-        this.columns.some((col,indexArray) => {
+        this.columns.some((col: Column) => {
            if(col.insertItem(item, targetUuid)) {
                return true;
            }
@ -57,7 +45,7 @@ export default class Row extends BaseElement  {
    }

    deleteItem(item: BaseElement): boolean {
-        this.columns.some((col,indexArray) => {
+        this.columns.some((col: Column) => {
            if(col.deleteItem(item)) {
                return true;
            }
@ -72,9 +60,9 @@ export default class Row extends BaseElement  {
        return false
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
-        obj.columns.map((d) => {
+        obj.columns.map((d: any) => {
            const column = new Column()
            column.fromJSON(d)
            this.columns.push(column)
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/SelectElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/SelectElement.ts
@ -13,7 +13,7 @@ export default class SelectElement extends BaseElement  {
        this.type = 3 
    }

-    addOption(option: SelectElementOption) {
+    addOption(option: Option) {
        this.options.push(option)
    }

@ -24,7 +24,7 @@ export default class SelectElement extends BaseElement  {
                'default': this.default,
                'mode': this.mode,
                'container': this.container,
-                'options': this.options.reduce((result, opt) => {
+                'options': this.options.reduce((result: object[], opt: Option) => {
                    result.push(opt.toJSON())
                    return result
                }, []),
@ -32,14 +32,14 @@ export default class SelectElement extends BaseElement  {
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
        this.name = obj.name
        this.mode = obj.mode
        this.container = obj.container
        this.default = obj.default
-        obj.options.map((d) => {
-            const option = new Option()
+        obj.options.map((d: any) => {
+            const option = new Option("")
            option.fromJSON(d)
            this.options.push(option)
        })
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/TextElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/TextElement.ts
@ -20,7 +20,7 @@ export default class TextElement extends BaseElement  {
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
        this.name = obj.name
        this.default = obj.default
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/TextareaElement.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/TextareaElement.ts
@ -19,7 +19,7 @@ export default class TextareaElement extends BaseElement  {
            })
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        super.fromJSON(obj)
        this.name = obj.name
        this.default = obj.default
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/select/Option.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/model/select/Option.ts
@ -13,7 +13,7 @@ export default class Option {
        this.id = id;
    }

-    addDependency(dep: Dependeny)
+    addDependency(dep: Dependency)
    {
        this.dependencys.push(dep)
    }
@ -22,17 +22,17 @@ export default class Option {
        return {
            'id': this.id,
            'name': this.name,
-            'dependencys': this.dependencys.reduce((result, dep) => {
+            'dependencys': this.dependencys.reduce((result: object[], dep: Dependency) => {
                result.push(dep.toJSON())
                return result
            }, [])
        }
    }

-    fromJSON(obj) {
+    fromJSON(obj: any) {
        this.name = obj.name
        this.id = obj.id
-        obj.dependencys.map((d) => {
+        obj.dependencys.map((d: any) => {
            const dep = new Dependency()
            dep.fromJSON(d)
            this.dependencys.push(dep)
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/stores/Items.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/stores/Items.ts
@ -1,7 +1,6 @@
-import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
-import BaseElement from '@/model/BaseElement'
-import Parser from '@/lib/parser'
+import BaseElement from '../model/BaseElement'
+import Parser from '../lib/parser'
 import {v4 as uuidv4} from 'uuid'

 export const useElementStore = defineStore('items', {
@ -32,7 +31,7 @@ export const useElementStore = defineStore('items', {
        this.items.push(item)
    },
    loadJSON() {
-      let options: [] = this.items.reduce((result, opt) => {
+      let options: object[] = this.items.reduce((result: object[], opt: BaseElement) => {
        result.push(opt.toJSON())
        return result
      }, [])
@ -52,19 +51,19 @@ export const useElementStore = defineStore('items', {
      if(obj[0].uuid) {
        this.uuid = obj[0].uuid
      }
-      obj[0].options.map((ob) => {
+      obj[0].options.map((ob: any) => {
        const item = Parser.getModelForType(ob.type)
        item.fromJSON(ob)
        this.addElement(item)
      })
    },
    changeFocus(uuid: string) {
-      this.items.forEach(element => {
+      this.items.forEach((element: BaseElement) => {
        element.changeFocus(uuid)
      })
    },
    clearSelection() {
-      this.items.forEach(element => {
+      this.items.forEach((element: BaseElement) => {
        element.changeFocus("xx")
      })
      this.showProperties = false
@ -81,8 +80,8 @@ export const useElementStore = defineStore('items', {
    setActiveItem(item: BaseElement) {
      this.activeItem = item
    },
-    deleteItem(item: BaseElement) {
-      return this.items.some((element,indexArray) => {
+    deleteItem(item: BaseElement): boolean {
+      return this.items.some((element: BaseElement,indexArray: number) => {
        if(element.uuid === item.uuid) {
          item = this.items.splice(indexArray, 1)[0]
          return true
@ -92,14 +91,12 @@ export const useElementStore = defineStore('items', {
        }
      })
    },
-    moveSortItemToEmptyElement(targetUuid: string, column: Column) {
-      const item = this.cutItem(this.sourceDragUuid)
-      this.insertItemInEmptyColumn(this.items, item!, targetUuid, column)
-
-    },
    moveItemBefore(dragUuid: string, targetUuid: string): boolean {
      const item = this.cutItem(dragUuid)
-      return this.insertItem(this.items, item, targetUuid)
+      if(item) {
+        return this.insertItem(this.items, item, targetUuid)
+      }
+      return false
    },
    addElementAfter(item: BaseElement, targetUuid: string) {
      this.insertItem(this.items, item, targetUuid)
@ -109,7 +106,7 @@ export const useElementStore = defineStore('items', {
    },
    cutItem(existingUuid: string) {
      let item: BaseElement|null = null
-      this.items.some((element,indexArray) => {
+      this.items.some((element: BaseElement,indexArray: number) => {
          if(element.uuid === existingUuid) {
            item = this.items.splice(indexArray, 1)[0]
            return true
@ -123,22 +120,6 @@ export const useElementStore = defineStore('items', {
      })
      return item
    },
-    getItem(existingUuid: string) {
-      let item: BaseElement|null = null
-      item = this.items.some((element,indexArray) => {
-          if(element.uuid === existingUuid) {
-            return element
-          }
-          if(item === null) {
-            item = element.getItem(existingUuid)
-            if(item !== null) {
-              return item
-            }
-          }
-          
-      })
-      return item
-    },
    insertItem(items: BaseElement[], item: BaseElement, targetUuid: string): boolean {
      let inserted = false
      for (let i = 0; i < items.length; ++i) {
@ -154,15 +135,6 @@ export const useElementStore = defineStore('items', {

      return inserted
    },
-    insertItemInEmptyColumn(items: BaseElement[], item: BaseElement, targetUuid: string, column: Column): boolean {
-      let inserted = false
-      for (let i = 0; i < items.length; ++i) {
-          inserted = items[i].insertItemInEmptyColumn(item, targetUuid, column)
-      }
-
-      return inserted
-    },
-
    setDragMode(mode: string) {
      this.dragMode = mode
    }
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/tsconfig.app.json
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/tsconfig.app.json
@ -6,16 +6,17 @@
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": false,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "baseUrl": ".",
    "paths": {
+      "@/lib*": ["./src/lib/*"],
      "@/*": [
-        "./src/*"
+        "./src/*",
      ]
    }
 }
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/vite.config.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/vite.config.ts
@ -6,6 +6,17 @@ import vueDevTools from 'vite-plugin-vue-devtools'

 export default defineConfig({
  plugins: [vueDevTools(), vue(), tailwindcss()],
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`
+      }
+    },
+    outDir: '../Resources/public/formbuilderts',
+    emptyOutDir: true, // also necessary
+  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/config/routing.yml
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/config/routing.yml
@ -0,0 +1,6 @@
+psc_backend_component_formbuilder:
+    resource: "@PluginCustomPSCFormBuilder/Controller/Backend"
+    type:     annotation
+    prefix:   /backend/component/formbuilder
+
+
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/config/services.yml
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/config/services.yml
@ -0,0 +1,11 @@
+services:
+    _defaults:
+        autowire: true
+        autoconfigure: true
+
+    Plugin\Custom\PSC\FormBuilder\:
+        resource: '../../*/*'
+
+#    Plugin\System\PSC\Invoice\Section\Invoice:
+#        tags:
+#            - { name: psc.backend.custom.section }
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/assets/index.css
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/assets/index.css
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/assets/index.js
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/assets/index.js
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/index.html
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Calc</title>
+    <script type="module" crossorigin src="/assets/index.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index.css">
+  </head>
+  <body>
+    <div id="app" class="w-screen h-screen"></div>
+  </body>
+</html>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/vite.svg
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/public/formbuilderts/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/views/backend/index/index.html.twig
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/views/backend/index/index.html.twig
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="de-DE">
+<head>
+    <meta charset="utf-8">
+
+    <title>PSC FormBuilder</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <base href="/apps/backend/component/formbuilder/index/create/"/>
+    <link rel="stylesheet" href="/apps/bundles/plugincustompscformbuilder/formbuilderts/assets/index.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    {% block stylesheets %}
+    {% endblock %}
+</head>
+<body>
+<main id="app"></main>
+{% block javascripts %}
+    <script>
+        var jwt_token = '{{ jwt }}';
+    </script>
+    <script src="/apps/bundles/plugincustompscformbuilder/formbuilderts/assets/index.js"></script>
+{% endblock %}
+</body>
+</html>
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/views/backend/order/index.html.twig
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/Resources/views/backend/order/index.html.twig
@ -0,0 +1,7 @@
+{% if uuid %}
+<a href="/apps/backend/component/invoice/index/create#/{{ uuid }}" target="_blank" class="btn btn-warning btn-sm">Auftrag bearbeiten (BETA)</a>
+{% else %}
+    <div class="panel">
+        <div class="body"><a href="/apps/backend/component/invoice/index/create" target="_blank" class="btn btn-warning btn-sm">Auftrag anlegen (BETA)</a></div>
+    </div>
+{% endif %}
--- a/src/old/application/design/vorlagen/bootstrap4_api/articletemplates/scripts/100.phtml
+++ b/src/old/application/design/vorlagen/bootstrap4_api/articletemplates/scripts/100.phtml
@ -35,12 +35,33 @@ if ($teile[5] == "") {
    productUUId = '<?php echo $this->article->uuid ?>';
    productLoaded = <?php echo ($this->load) ? 1 : 0 ?>;
    productUrl = '<?php echo $this->article->url ?>';
+    productValues = new Map();
+    <?php
+
+    if ($this->load || $this->rebuy) {
+        foreach (TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getAdditionalInfo('saxoprint')['infos'] as $var) {
+            echo "productValues.set('" . $var['name'] . "', '" . $var['value'] . "');";
+        }
+    }
+    ?>
+
    $(document).ready(function(){
        var saxoprint = new Saxoprint("<?php echo $this->article->uuid; ?>", "<?php echo $this->article->getPluginSettings('saxoprint', 'saxoprint'); ?>", "<?php echo $this->article->getPluginSettings('saxoprint', 'saxoprintauflage'); ?>", <?php echo $this->article->mwert ?>)
        saxoprint.init();
    });

    window.onload = function() {
+        <?php
+
+        if ($this->load || $this->rebuy) {
+            echo 'document.getElementById("upload_mode").value = "' . TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getUploadMode() . '";';
+        }
+        if($this->layouterSession) {
+                echo 'document.getElementById("upload_mode").value = "' . $this->layouterSession->layouter_modus . '";';
+        }
+
+        ?>
+
        <?php if ($backlink == "") { ?>
        $("#breadcrumbs-Article").attr("href", "/overview/")
        <?php } else { ?>
@ -630,6 +651,7 @@ if ($teile[5] == "") {
                                    <?php if (!$this->article->not_buy) : ?>
                                        <form action="/article/buy/?id=<?= $this->article->id ?>" target="_self" class="buy" role="form" id="buyform" method="POST">
                                            <input type="hidden" value="1" name="count">
+                                            <?= $this->formHidden('load', $this->load) ?>
                                            <input type="hidden" id="upload_mode" name="upload_mode" value="<?php echo $this->upload_mode ?>" />
                                            <input type="hidden" value="" name="collecting_orders_data" id="collecting_orders_data"/>
                                            <input type="submit" id="in_basket" class="btn btn-success btn-large" value="Bestellen"/>
--- a/src/old/application/design/vorlagen/tailwindcss_wp/articletemplates/scripts/100.phtml
+++ b/src/old/application/design/vorlagen/tailwindcss_wp/articletemplates/scripts/100.phtml
@ -5,8 +5,28 @@ $this->headScript()->prependFile('/'. $this->designPath . '/js/saxoprint.js');
    productUUId = '<?php echo $this->article->uuid ?>';
    productLoaded = <?php echo ($this->load) ? 1 : 0 ?>;
    productUrl = '<?php echo $this->article->url ?>';
+    productValues = new Map();
+    <?php

+    if ($this->load || $this->rebuy) {
+
+        foreach (TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getAdditionalInfo('saxoprint')['infos'] as $var) {
+            echo "productValues.set('" . $var['name'] . "', '" . $var['value'] . "');";
+        }
+    }
+    ?>
    window.onload = function() {
+        <?php
+
+        if ($this->load || $this->rebuy) {
+            echo 'document.getElementById("upload_mode").value = "' . TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getUploadMode() . '";';
+        }
+        if($this->layouterSession) {
+                echo 'document.getElementById("upload_mode").value = "' . $this->layouterSession->layouter_modus . '";';
+        }
+
+        ?>
+
        $('#in_basket').removeClass('disabled');
        var saxoprint = new Saxoprint("<?php echo $this->article->uuid; ?>", "<?php echo $this->article->getPluginSettings('saxoprint', 'saxoprint'); ?>", "<?php echo $this->article->getPluginSettings('saxoprint', 'saxoprintauflage'); ?>", <?php echo $this->article->mwert ?>)
        saxoprint.init();
@ -14,26 +34,7 @@ $this->headScript()->prependFile('/'. $this->designPath . '/js/saxoprint.js');

 </script>

-<!--
-<div class="md:flex mt-10 md:w-2/4 md:m-auto gap-10  ml-2 mr-2  md:mt-10">
-    <div class="md:w-1/2">
-        <?php if ($this->article->file != "" && $this->layouterPreviewId == "") : ?>
-            <?php echo $this->image()->thumbnailImage($this->article->title, 'productdetail', $this->article->file); ?> 
-        <?php endif; ?>
-    </div>
-    <div class="md:w-1/2">
-        <h2 class="text-highlight text-2xl font-lenzFont"><?php echo $this->article->title ?></h2>
-        <p><?php echo $this->article->einleitung ?></p>
-    </div>
-</div>
-->
 <div class="mt-10 md:m-auto ml-2 mr-2">
-<!--
-    <div class="bg-gray-200 divide-x flex w-full" id="default-tab" data-tabs-active-classes="border-b-2 border-gray-400 bg-gray-300" data-tabs-toggle="#product-content" role="tablist">
-        <div class="w-1/2 p-1 cursor-pointer" data-tabs-target="#div-calc" type="button" role="tab" aria-controls="div-calc" aria-selected="false">Kalkulation</div>
-        <div class="w-1/2 p-1 cursor-pointer" data-tabs-target="#div-details" type="button" role="tab" aria-controls="div-details" aria-selected="false">Beschreibung</div>
-    </div>
-->	
    <div id="product-content">
        <div id="div-calc" role="tabpanel" aria-labelledby="div-calc-tab">
            <div class="md:flex">
@ -63,6 +64,7 @@ $this->headScript()->prependFile('/'. $this->designPath . '/js/saxoprint.js');
                    <?php if (!$this->article->not_buy) : ?>
                                        <form action="/article/buy/?id=<?= $this->article->id ?>" target="_self" class="buy" role="form" id="buyform" method="POST">
                                            <input type="hidden" value="1" name="count">
+                                            <?= $this->formHidden('load', $this->load) ?>
                                            <input type="hidden" id="upload_mode" name="upload_mode" value="<?php echo $this->upload_mode ?>" />
                                            <input type="hidden" value="" name="collecting_orders_data" id="collecting_orders_data"/>
                        <button type="submit" id="in_basket" class="w-full transition ease-in-out duration-300 delay-150 hover:bg-white hover:text-black border-slate-200 border bg-highlight text-white p-2 pl-5 pr-5 rounded-full disabled bg-highlight "><?= $this->translate('Buy') ?></button>
--- a/src/old/application/design/vorlagen/tailwindcss_wp/articletemplates/scripts/6.phtml
+++ b/src/old/application/design/vorlagen/tailwindcss_wp/articletemplates/scripts/6.phtml
@ -13,26 +13,22 @@
        foreach (TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getOptions() as $key => $var) {
            echo "productValues['" . $key . "'] = '" . $var . "';";
        }
-        echo '$("#upload_mode").val("' . TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getUploadMode() . '");';
    }
-if($this->layouterSession) {
-    echo '$("#upload_mode").val("' . $this->layouterSession->layouter_modus . '");';
-}

-?>
+    ?>
+
    window.onload = function() {
-        <?php
+    <?php

-        if ($this->load || $this->rebuy) {
-            echo '$("#upload_mode").val("' . TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getUploadMode() . '");';
-        }
-if($this->layouterSession) {
-    echo '$("#upload_mode").val("' . $this->layouterSession->layouter_modus . '");';
-}
+    if ($this->load || $this->rebuy) {
+        echo 'document.getElementById("upload_mode").value = "' . TP_Basket::getBasket()->getTempProduct($this->article->uuid)->getUploadMode() . '";';
+    }
+    if($this->layouterSession) {
+            echo 'document.getElementById("upload_mode").value = "' . $this->layouterSession->layouter_modus . '";';
+    }

-?>
+    ?>

-        $('#in_basket').removeClass('disabled');
    }

 </script>
--- a/src/old/library/TP/Basket/Item.php
+++ b/src/old/library/TP/Basket/Item.php
@ -727,6 +727,12 @@ class TP_Basket_Item
        return $this->_additionalInfos;
    }

+    public function getAdditionalInfo(string $key)
+    {
+        return array_find($this->_additionalInfos, fn($element) => $element['key'] == $key);
+    }
+
+
    /**
     * @param array $additionalInfos
     */
--- a/src/old/public/styles/vorlagen/bootstrap4_api/saxoprint.js
+++ b/src/old/public/styles/vorlagen/bootstrap4_api/saxoprint.js
@ -6,6 +6,7 @@ class Saxoprint {
  price = 0
  options = []
  info = []
+  firstLoad = true

  constructor(productId, saxoprintProductId, auflage, mwert) {
    this.productId = productId;
@ -25,6 +26,27 @@ class Saxoprint {
  getProduct() {
    $(".loading").show();
    var self = this;
+    $.post(
+      "/apps/plugin/custom/psc/saxoprint/config",
+      {
+        saxoprintProductId: this.saxoprintProductId,
+        productId: self.productId,
+        config: $("#calc_saxoprint").serialize(),
+      },
+      function (data, status) {
+        self.buildUi(data.config);
+        if(self.firstLoad && productValues.size > 0) {
+          self.loadProduct();
+        }else{
+          self.buildPrice(data.price);
+        }
+      },
+    );
+  }
+
+  loadProduct() {
+    $(".loading").removeClass('hidden');
+    var self = this;
    $.post(
      "/apps/plugin/custom/psc/saxoprint/config",
      {
@ -60,8 +82,12 @@ class Saxoprint {
    var form = "";
    var options = "";
    var selected = "";
+    var self = this;

    $.each(productOptions, function (index, item) {
+      if(self.firstLoad && productValues.has('property[' + item.id + ']')) {
+        item.defaultValue = productValues.get('property[' + item.id + ']');
+      }
      if (item.type == "select") {
        options = "";
        $.each(item.values, function (i, value) {
--- a/src/old/public/styles/vorlagen/tailwindcss_wp/js/saxoprint.js
+++ b/src/old/public/styles/vorlagen/tailwindcss_wp/js/saxoprint.js
@ -8,6 +8,7 @@ class Saxoprint {
    this.saxoprintProductId = saxoprintProductId;
    this.auflage = auflage;
    this.mwert = mwert;
+    this.firstLoad = true;
  }

  init() {
@ -17,6 +18,28 @@ class Saxoprint {
  getProduct() {
    $(".loading").toggleClass('hidden');
    var self = this;
+    $.post(
+      "/apps/plugin/custom/psc/saxoprint/config",
+      {
+        saxoprintProductId: this.saxoprintProductId,
+        productId: self.productId,
+        config: $("#calc_saxoprint").serialize(),
+      },
+      function (data, status) {
+        self.buildUi(data.config);
+        if(self.firstLoad && productValues.size > 0) {
+          self.loadProduct();
+          self.firstLoad = false;
+        }else{
+          self.buildPrice(data.price);
+        }
+      },
+    );
+  }
+
+  loadProduct() {
+    $(".loading").removeClass('hidden');
+    var self = this;
    $.post(
      "/apps/plugin/custom/psc/saxoprint/config",
      {
@ -53,7 +76,12 @@ class Saxoprint {
    var options = "";
    var selected = "";

+    var self = this;
+    console.log(productValues);
    $.each(productOptions, function (index, item) {
+      if(self.firstLoad && productValues.has('property[' + item.id + ']')) {
+        item.defaultValue = productValues.get('property[' + item.id + ']');
+      }
      if (item.type == "select") {
        options = "";
        $.each(item.values, function (i, value) {
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>