From caaed3e759baa84dfcb28e9d8fa508f93e68d43f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 6 Oct 2025 13:00:43 +0200
Subject: [PATCH] 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.
---
 package.json                                  |   3 +-
 .../vuejs/AddressPicker/AddressPicker.vue     |  30 ++++-
 .../Component/AddressDetailsForm.vue          |  21 +++-
 .../AddressPicker/Component/AddressForm.vue   | 112 ++++++++++++++++++
 4 files changed, 162 insertions(+), 4 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressForm.vue

diff --git a/package.json b/package.json
index 5731bcb0a..90f0d518e 100644
--- 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"
   },
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue
index 2103f493d..f7600da6c 100644
--- 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>
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressDetailsForm.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressDetailsForm.vue
index e5d039383..44afb7c25 100644
--- 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>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressForm.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/AddressForm.vue
new file mode 100644
index 000000000..575863588
--- /dev/null
+++ 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>