Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-10-06 05:19:43 +00:00
Code Issues Actions Projects Releases Wiki Activity

[wip] Refactor AddressDetailsMap to use vue-use-leaflet and enhance AddressPicker layout with dynamic styling adjustments.

Browse Source
This commit is contained in:
Julien Fastré
2025-08-22 23:05:44 +02:00
parent 4e61821e5b
commit 086d418aa3
3 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue
View File

@@ -7,7 +7,7 @@ import {
getAddressesAggregated,
getPostalCodes,
} from "ChillMainAssets/vuejs/AddressPicker/driver/local-search";
import { Ref, ref } from "vue";
import {computed, Ref, ref} from "vue";
import AddressAggregatedList from "ChillMainAssets/vuejs/AddressPicker/Component/AddressAggregatedList.vue";
import AddressDetailsForm from "ChillMainAssets/vuejs/AddressPicker/Component/AddressDetailsForm.vue";
@@ -27,6 +27,11 @@ const addressReference: Ref<AddressReference|null> = ref(null);
let abortControllerSearchAddress: null | AbortController = null;
let abortControllerSearchPostalCode: null | AbortController = null;
const searchResultsClasses = computed(() => ({
"mid-size": addressReference !== null,
}));
const onSearch = async function (search: string): Promise<void> {
performSearchForAddress(search);
performSearchForPostalCode(search);
@@ -104,10 +109,10 @@ const performSearchForPostalCode = async (search: string): Promise<void> => {
<template>
<search-bar @search="onSearch"></search-bar>
<div class="address-pick-content">
<div>
<div class="search-results" :class="searchResultsClasses">
<address-aggregated-list :addresses="addresses" :search-tokens="searchTokens" @pick-position="(id) => onPickPosition(id)"></address-aggregated-list>
</div>
<div v-if="addressReference !== null">
<div v-if="addressReference !== null" class="address-details-form">
<address-details-form :address="addressReference"></address-details-form>
</div>
</div>
@@ -118,5 +123,15 @@ const performSearchForPostalCode = async (search: string): Promise<void> => {
.address-pick-content {
display: flex;
flex-direction: row;
gap: 1rem;
.search-results {
&.mid-size {
width: 50%;
}
}
.address-details-form {
width: 50%;
}
}
</style>