Added PLZ Autocompletion & InputChangeFunctions

2024-12-27 12:14:27 +01:00
parent a1e6061579
commit 42686efbe7
2 changed files with 38 additions and 2 deletions
--- a/components/EntityEdit.vue
+++ b/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"
              />
--- a/stores/data.js
+++ b/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",