mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-10-06 05:19:43 +00:00
[WIP] refactorization to show details of an address
This commit is contained in:
@@ -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>
|
||||
|
Reference in New Issue
Block a user