[WIP] refactorization to show details of an address

This commit is contained in:
2025-08-18 13:14:10 +02:00
parent e3aeab315f
commit 4e61821e5b
17 changed files with 341 additions and 84 deletions

View File

@@ -1,13 +1,15 @@
<script setup lang="ts">
import { Address } from "ChillMainAssets/types";
import {Address, AddressReference} from "ChillMainAssets/types";
import SearchBar from "ChillMainAssets/vuejs/AddressPicker/Component/SearchBar.vue";
import {
AddressAggregated,
AssociatedPostalCode,
AssociatedPostalCode, fetchAddressReference,
getAddressesAggregated,
getPostalCodes,
} from "ChillMainAssets/vuejs/AddressPicker/driver/local-search";
import { Ref, ref } from "vue";
import AddressAggregatedList from "ChillMainAssets/vuejs/AddressPicker/Component/AddressAggregatedList.vue";
import AddressDetailsForm from "ChillMainAssets/vuejs/AddressPicker/Component/AddressDetailsForm.vue";
interface AddressPickerProps {
suggestions?: Address[];
@@ -19,14 +21,23 @@ const props = withDefaults(defineProps<AddressPickerProps>(), {
const addresses: Ref<AddressAggregated[]> = ref([]);
const postalCodes: Ref<AssociatedPostalCode[]> = ref([]);
const searchTokens: Ref<string[]> = ref([]);
const addressReference: Ref<AddressReference|null> = ref(null);
let abortControllerSearchAddress: null | AbortController = null;
let abortControllerSearchPostalCode: null | AbortController = null;
const onSearch = async function (search: string): Promise<void> {
performSearchForAddress(search);
performSearchForPostalCode(search);
searchTokens.value = [search];
};
const onPickPosition = async (id: string) => {
console.log('Pick Position', id);
addressReference.value = await fetchAddressReference(id);
}
const performSearchForAddress = async (search: string): Promise<void> => {
if (null !== abortControllerSearchAddress) {
abortControllerSearchAddress.abort();
@@ -92,11 +103,20 @@ const performSearchForPostalCode = async (search: string): Promise<void> => {
<template>
<search-bar @search="onSearch"></search-bar>
<p>test</p>
<p v-for="a in addresses" :key="a.row_number">
{{ a.street }}, positions: {{ a.positions[0] }}
</p>
<p v-for="pc in postalCodes" :key="pc.postcode_id">{{ pc }}</p>
<div class="address-pick-content">
<div>
<address-aggregated-list :addresses="addresses" :search-tokens="searchTokens" @pick-position="(id) => onPickPosition(id)"></address-aggregated-list>
</div>
<div v-if="addressReference !== null">
<address-details-form :address="addressReference"></address-details-form>
</div>
</div>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.address-pick-content {
display: flex;
flex-direction: row;
}
</style>