Added PLZ Autocompletion & InputChangeFunctions

components/EntityEdit.vue

@@ -191,6 +191,7 @@ const contentChanged = (content, datapoint) => {
             </template>
             <div v-if="datapoint.key.includes('.')">
               <UInput
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-if="['text','number'].includes(datapoint.inputType)"
                   v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -198,11 +199,13 @@ const contentChanged = (content, datapoint) => {
                   :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
               />
               <UToggle
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-else-if="datapoint.inputType === 'bool'"
                   v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
               />
               <USelectMenu
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-else-if="datapoint.inputType === 'select'"
                   v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -218,6 +221,7 @@ const contentChanged = (content, datapoint) => {
                 </template>
               </USelectMenu>
               <UTextarea
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-else-if="datapoint.inputType === 'textarea'"
                   v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -234,6 +238,7 @@ const contentChanged = (content, datapoint) => {
 
                 <template #panel="{ close }">
                   <LazyDatePicker
+                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                       v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
                       :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
                   />
@@ -248,6 +253,7 @@ const contentChanged = (content, datapoint) => {
             </div>
             <div v-else>
               <UInput
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-if="['text','number'].includes(datapoint.inputType)"
                   v-model="props.item[datapoint.key]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -255,11 +261,13 @@ const contentChanged = (content, datapoint) => {
                   :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
               />
               <UToggle
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-else-if="datapoint.inputType === 'bool'"
                   v-model="props.item[datapoint.key]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
               />
               <USelectMenu
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-else-if="datapoint.inputType === 'select'"
                   v-model="props.item[datapoint.key]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -276,6 +284,7 @@ const contentChanged = (content, datapoint) => {
                 </template>
               </USelectMenu>
               <UTextarea
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-else-if="datapoint.inputType === 'textarea'"
                   v-model="props.item[datapoint.key]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -291,6 +300,7 @@ const contentChanged = (content, datapoint) => {
 
                 <template #panel="{ close }">
                   <LazyDatePicker
+                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                       v-model="props.item[datapoint.key]" @close="close"
                       :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
                   />
@@ -342,6 +352,7 @@ const contentChanged = (content, datapoint) => {
         </template>
         <div v-if="datapoint.key.includes('.')">
           <UInput
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
               v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -349,11 +360,13 @@ const contentChanged = (content, datapoint) => {
               :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
           />
           <UToggle
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
           />
           <USelectMenu
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-else-if="datapoint.inputType === 'select'"
               v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -369,6 +382,7 @@ const contentChanged = (content, datapoint) => {
             </template>
           </USelectMenu>
           <UTextarea
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-else-if="datapoint.inputType === 'textarea'"
               v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -385,6 +399,7 @@ const contentChanged = (content, datapoint) => {
 
             <template #panel="{ close }">
               <LazyDatePicker
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
               />
@@ -399,6 +414,7 @@ const contentChanged = (content, datapoint) => {
         </div>
         <div v-else>
           <UInput
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
               v-model="props.item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -406,11 +422,13 @@ const contentChanged = (content, datapoint) => {
               :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
           />
           <UToggle
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="props.item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
           />
           <USelectMenu
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-else-if="datapoint.inputType === 'select'"
               v-model="props.item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -427,6 +445,7 @@ const contentChanged = (content, datapoint) => {
             </template>
           </USelectMenu>
           <UTextarea
+              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
               v-else-if="datapoint.inputType === 'textarea'"
               v-model="props.item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
@@ -442,6 +461,7 @@ const contentChanged = (content, datapoint) => {
 
             <template #panel="{ close }">
               <LazyDatePicker
+                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(props.item) : null"
                   v-model="props.item[datapoint.key]" @close="close"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(props.item) : false"
               />

stores/data.js

@@ -27,6 +27,7 @@ import vehicle from "~/components/columnRenderings/vehicle.vue"
 import usePlanning from "~/components/columnRenderings/usePlanning.vue"
 
 import quantity from "~/components/helpRenderings/quantity.vue"
+import {useZipCheck} from "~/composables/useZipCheck.js";
 
 // @ts-ignore
 export const useDataStore = defineStore('data', () => {
@@ -166,6 +167,11 @@ export const useDataStore = defineStore('data', () => {
                     key: "infoData.zip",
                     label: "Postleitzahl",
                     inputType: "number",
+                    inputChangeFunction: async function (row) {
+                        if(row.infoData.zip) {
+                            row.infoData.city = (await useZipCheck(row.infoData.zip))
+                        }
+                    },
                     disabledInTable: true
                 },
                 {
@@ -764,7 +770,12 @@ export const useDataStore = defineStore('data', () => {
                     key: "infoData.zip",
                     label: "Postleitzahl",
                     inputType: "number",
-                    disabledInTable: true
+                    disabledInTable: true,
+                    inputChangeFunction: async function (row) {
+                        if(row.infoData.zip) {
+                            row.infoData.city = (await useZipCheck(row.infoData.zip))
+                        }
+                    },
                 },
                 {
                     key: "infoData.city",
@@ -904,7 +915,12 @@ export const useDataStore = defineStore('data', () => {
                     label: "Postleitzahl",
                     inputType: "number",
                     disabledInTable: true,
-                    inputColumn: "Ort"
+                    inputColumn: "Ort",
+                    inputChangeFunction: async function (row) {
+                        if(row.infoData.zip) {
+                            row.infoData.city = (await useZipCheck(row.infoData.zip))
+                        }
+                    },
                 },
                 {
                     key: "infoData.city",