Add AddressForm component and integrate it into AddressPicker

- Created `AddressForm.vue` for managing address details inputs (e.g., floor, corridor, steps, etc.). - Replaced placeholder form in `AddressDetailsForm.vue` with the new `AddressForm` component. - Added bi-directional binding for address fields in `AddressPicker.vue`. - Updated `package.json` to include `vue-tsc` dependency for improved TypeScript support.
2025-10-06 13:29:43 +00:00 · 2025-10-06 13:00:43 +02:00
parent 6380fdd9a4
commit caaed3e759
4 changed files with 162 additions and 4 deletions
--- a/package.json
+++ b/package.json
@@ -67,10 +67,11 @@
    "mime": "^4.0.0",
    "pdfjs-dist": "^4.3.136",
    "vis-network": "^9.1.0",
-    "vue": "^3.5.6",
+    "vue": "^3.5.x",
    "vue-i18n": "^9.1.6",
    "vue-multiselect": "3.0.0-alpha.2",
    "vue-toast-notification": "^3.1.2",
+    "vue-tsc": "^3.1.0",
    "vue-use-leaflet": "^0.1.7",
    "vuex": "^4.0.0"
  },
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue
@@ -10,6 +10,8 @@ import {
 import {computed, Ref, ref} from "vue";
 import AddressAggregatedList from "ChillMainAssets/vuejs/AddressPicker/Component/AddressAggregatedList.vue";
 import AddressDetailsForm from "ChillMainAssets/vuejs/AddressPicker/Component/AddressDetailsForm.vue";
+import AddressForm from "ChillMainAssets/vuejs/AddressPicker/Component/AddressForm.vue";
+import {trans, SAVE} from "translator";

 interface AddressPickerProps {
    suggestions?: Address[];
@@ -31,6 +33,14 @@ const searchResultsClasses = computed(() => ({
    "mid-size": addressReference !== null,
 }));

+const floor = ref<string>("");
+const corridor = ref<string>("");
+const steps = ref<string>("");
+const flat = ref<string>("");
+const buildingName = ref<string>("");
+const extra = ref<string>("");
+const distribution = ref<string>("");
+

 const onSearch = async function (search: string): Promise<void> {
    performSearchForAddress(search);
@@ -109,6 +119,11 @@ const performSearchForPostalCode = async (search: string): Promise<void> => {
        throw e;
    }
 };
+
+const save = async(): Promise<void> => {
+    console.log("save");
+    console.log("content", floor, corridor, steps, flat, buildingName, extra, distribution);
+}
 </script>

 <template>
@@ -118,7 +133,20 @@ const performSearchForPostalCode = async (search: string): Promise<void> => {
            <address-aggregated-list :addresses="addresses" :search-tokens="searchTokens" @pick-position="(id) => onPickPosition(id)"></address-aggregated-list>
        </div>
        <div v-if="addressReference !== null" class="address-details-form">
-            <address-details-form :address="addressReference"></address-details-form>
+            <address-details-form :address="addressReference"
+                                  v-model:floor="floor"
+                                  v-model:corridor="corridor"
+                                  v-model:steps="steps"
+                                  v-model:flat="flat"
+                                  v-model:building-name="buildingName"
+                                  v-model:extra="extra"
+                                  v-model:distribution="distribution"
+            />
+        </div>
+        <div>
+            <ul class="record_actions">
+                <li><button class="btn btn-save">{{ trans(SAVE) }}</button></li>
+            </ul>
        </div>
    </div>

--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressDetailsForm.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressDetailsForm.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import {AddressReference} from "ChillMainAssets/types";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 import {addressReferenceToAddress} from "ChillMainAssets/vuejs/AddressPicker/helper";
 import AddressDetailsContent from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsContent.vue";
+import AddressForm from "ChillMainAssets/vuejs/AddressPicker/Component/AddressForm.vue";

 export interface AddressDetailsFormProps {
    address: AddressReference;
@@ -10,12 +11,28 @@ export interface AddressDetailsFormProps {

 const props = defineProps<AddressDetailsFormProps>();

+const floor = ref<string>("");
+const corridor = ref<string>("");
+const steps = ref<string>("");
+const flat = ref<string>("");
+const buildingName = ref<string>("");
+const extra = ref<string>("");
+const distribution = ref<string>("");
+
 const address = computed(() => addressReferenceToAddress(props.address));
 </script>

 <template>
    <div>
-        FORM
+        <address-form
+            @update:floor="val => (floor = val)"
+            @update:corridor="val => (corridor = val)"
+            @update:steps="val => (steps = val)"
+            @update:flat="val => (flat = val)"
+            @update:building-name="val => (buildingName = val)"
+            @update:extra="val => (extra = val)"
+            @update:distribution="val => (distribution = val)"
+        ></address-form>
    </div>
    <div>
        <address-details-content :address="address"></address-details-content>
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressForm.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressForm.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import {
+    ADDRESS_STREET,
+    ADDRESS_STREET_NUMBER,
+    ADDRESS_FLOOR,
+    ADDRESS_CORRIDOR,
+    ADDRESS_STEPS,
+    ADDRESS_FLAT,
+    ADDRESS_BUILDING_NAME,
+    ADDRESS_DISTRIBUTION,
+    ADDRESS_EXTRA,
+    ADDRESS_FILL_AN_ADDRESS,
+    trans,
+} from "translator";
+import {ref} from "vue";
+
+const isNoAddress = ref(false);
+
+const floor = defineModel("floor");
+const corridor = defineModel("corridor");
+const steps = defineModel("steps");
+const flat = defineModel("flat");
+const buildingName = defineModel("buildingName");
+const extra = defineModel("extra");
+const distribution = defineModel("distribution");
+</script>
+
+<template>
+    <div class="form-floating my-1">
+        <input
+            class="form-control"
+            type="text"
+            name="floor"
+            :placeholder="trans(ADDRESS_FLOOR)"
+            v-model="floor"
+        />
+        <label for="floor">{{ trans(ADDRESS_FLOOR) }}</label>
+    </div>
+    <div class="form-floating my-1">
+        <input
+            class="form-control"
+            type="text"
+            name="corridor"
+            :placeholder="trans(ADDRESS_CORRIDOR)"
+            v-model="corridor"
+        />
+        <label for="corridor">{{ trans(ADDRESS_CORRIDOR) }}</label>
+    </div>
+    <div class="form-floating my-1">
+        <input
+            class="form-control"
+            type="text"
+            name="steps"
+            :placeholder="trans(ADDRESS_STEPS)"
+            v-model="steps"
+        />
+        <label for="steps">{{ trans(ADDRESS_STEPS) }}</label>
+    </div>
+    <div class="form-floating my-1">
+        <input
+            class="form-control"
+            type="text"
+            name="flat"
+            :placeholder="trans(ADDRESS_FLAT)"
+            v-model="flat"
+        />
+        <label for="flat">{{ trans(ADDRESS_FLAT) }}</label>
+    </div>
+    <div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
+        <div class="form-floating my-1" v-if="!isNoAddress">
+            <input
+                class="form-control"
+                type="text"
+                name="buildingName"
+                maxlength="255"
+                :placeholder="trans(ADDRESS_BUILDING_NAME)"
+                v-model="buildingName"
+            />
+            <label for="buildingName">{{
+                    trans(ADDRESS_BUILDING_NAME)
+                }}</label>
+        </div>
+        <div class="form-floating my-1">
+            <input
+                class="form-control"
+                type="text"
+                name="extra"
+                maxlength="255"
+                :placeholder="trans(ADDRESS_EXTRA)"
+                v-model="extra"
+            />
+            <label for="extra">{{ trans(ADDRESS_EXTRA) }}</label>
+        </div>
+        <div class="form-floating my-1" v-if="!isNoAddress">
+            <input
+                class="form-control"
+                type="text"
+                name="distribution"
+                maxlength="255"
+                :placeholder="trans(ADDRESS_DISTRIBUTION)"
+                v-model="distribution"
+            />
+            <label for="distribution">{{
+                    trans(ADDRESS_DISTRIBUTION)
+                }}</label>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>