Massedil
@@ -1,187 +1,179 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="address-autocomplete">
|
<div class="address-autocomplete">
|
||||||
<div class="">
|
<o-field
|
||||||
<o-field
|
:label-for="id"
|
||||||
:label-for="id"
|
:message="fieldErrors"
|
||||||
:message="fieldErrors"
|
:variant="fieldErrors ? 'danger' : ''"
|
||||||
:variant="fieldErrors ? 'danger' : ''"
|
class="!-mt-2"
|
||||||
class="!-mt-2"
|
:labelClass="labelClass"
|
||||||
:labelClass="labelClass"
|
>
|
||||||
|
<template #label>
|
||||||
|
{{ actualLabel }}
|
||||||
|
</template>
|
||||||
|
<o-button
|
||||||
|
v-if="canShowLocateMeButton"
|
||||||
|
class="!h-auto"
|
||||||
|
ref="mapMarker"
|
||||||
|
icon-right="map-marker"
|
||||||
|
@click="locateMe"
|
||||||
|
:title="t('Use my location')"
|
||||||
|
/>
|
||||||
|
<o-autocomplete
|
||||||
|
:data="addressData"
|
||||||
|
v-model="queryTextWithDefault"
|
||||||
|
:placeholder="placeholderWithDefault"
|
||||||
|
:formatter="(elem: IAddress) => addressFullName(elem)"
|
||||||
|
:debounce="debounceDelay"
|
||||||
|
@input="asyncData"
|
||||||
|
:icon="canShowLocateMeButton ? null : 'map-marker'"
|
||||||
|
expanded
|
||||||
|
@select="setSelected"
|
||||||
|
:id="id"
|
||||||
|
:disabled="disabled"
|
||||||
|
dir="auto"
|
||||||
|
class="!mt-0 !h-full"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #default="{ option }">
|
||||||
{{ actualLabel }}
|
<p class="flex gap-1">
|
||||||
|
<o-icon :icon="addressToPoiInfos(option).poiIcon.icon" />
|
||||||
|
<b>{{ addressToPoiInfos(option).name }}</b>
|
||||||
|
</p>
|
||||||
|
<p class="text-small">
|
||||||
|
{{ addressToPoiInfos(option).alternativeName }}
|
||||||
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<o-button
|
<template #empty>
|
||||||
v-if="canShowLocateMeButton"
|
<template v-if="isFetching">{{ t("Searching…") }}</template>
|
||||||
class="!h-auto"
|
<template v-else-if="queryTextWithDefault.length >= 3">
|
||||||
ref="mapMarker"
|
<p>
|
||||||
icon-right="map-marker"
|
{{
|
||||||
@click="locateMe"
|
t('No results for "{queryText}"', {
|
||||||
:title="t('Use my location')"
|
queryText: queryTextWithDefault,
|
||||||
/>
|
})
|
||||||
<o-autocomplete
|
}}
|
||||||
:data="addressData"
|
|
||||||
v-model="queryTextWithDefault"
|
|
||||||
:placeholder="placeholderWithDefault"
|
|
||||||
:formatter="(elem: IAddress) => addressFullName(elem)"
|
|
||||||
:debounce="debounceDelay"
|
|
||||||
@input="asyncData"
|
|
||||||
:icon="canShowLocateMeButton ? null : 'map-marker'"
|
|
||||||
expanded
|
|
||||||
@select="setSelected"
|
|
||||||
:id="id"
|
|
||||||
:disabled="disabled"
|
|
||||||
dir="auto"
|
|
||||||
class="!mt-0"
|
|
||||||
>
|
|
||||||
<template #default="{ option }">
|
|
||||||
<p class="flex gap-1">
|
|
||||||
<o-icon :icon="addressToPoiInfos(option).poiIcon.icon" />
|
|
||||||
<b>{{ addressToPoiInfos(option).name }}</b>
|
|
||||||
</p>
|
</p>
|
||||||
<p class="text-small">
|
<p>
|
||||||
{{ addressToPoiInfos(option).alternativeName }}
|
{{
|
||||||
|
t(
|
||||||
|
"You can try another search term or add the address details manually below."
|
||||||
|
)
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<template #empty>
|
</template>
|
||||||
<template v-if="isFetching">{{ t("Searching…") }}</template>
|
</o-autocomplete>
|
||||||
<template v-else-if="queryTextWithDefault.length >= 3">
|
<slot></slot>
|
||||||
<p>
|
<o-button
|
||||||
{{
|
:disabled="!queryTextWithDefault"
|
||||||
t('No results for "{queryText}"', {
|
@click="resetAddress"
|
||||||
queryText: queryTextWithDefault,
|
class="reset-area !h-auto"
|
||||||
})
|
icon-left="close"
|
||||||
}}
|
:title="t('Clear address field')"
|
||||||
</p>
|
/>
|
||||||
<p>
|
</o-field>
|
||||||
{{
|
<p v-if="gettingLocation" class="flex gap-2">
|
||||||
t(
|
<Loading class="animate-spin" />
|
||||||
"You can try another search term or add the address details manually below."
|
{{ t("Getting location") }}
|
||||||
)
|
</p>
|
||||||
}}
|
<div
|
||||||
</p>
|
class="mt-2 p-2 rounded-lg shadow-md bg-white dark:bg-violet-3"
|
||||||
</template>
|
v-if="!hideSelected && (selected?.originId || selected?.url)"
|
||||||
</template>
|
>
|
||||||
</o-autocomplete>
|
<div class="">
|
||||||
<slot></slot>
|
<address-info
|
||||||
<o-button
|
:address="selected"
|
||||||
:disabled="!queryTextWithDefault"
|
:show-icon="true"
|
||||||
@click="resetAddress"
|
:show-timezone="true"
|
||||||
class="reset-area !h-auto"
|
:user-timezone="userTimezone"
|
||||||
icon-left="close"
|
|
||||||
:title="t('Clear address field')"
|
|
||||||
/>
|
/>
|
||||||
</o-field>
|
|
||||||
<p v-if="gettingLocation" class="flex gap-2">
|
|
||||||
<Loading class="animate-spin" />
|
|
||||||
{{ t("Getting location") }}
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="mt-2 p-2 rounded-lg shadow-md bg-white dark:bg-violet-3"
|
|
||||||
v-if="!hideSelected && (selected?.originId || selected?.url)"
|
|
||||||
>
|
|
||||||
<div class="">
|
|
||||||
<address-info
|
|
||||||
:address="selected"
|
|
||||||
:show-icon="true"
|
|
||||||
:show-timezone="true"
|
|
||||||
:user-timezone="userTimezone"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<o-collapse
|
</div>
|
||||||
v-model:open="detailsAddress"
|
<o-collapse
|
||||||
:aria-id="`${id}-address-details`"
|
v-model:open="detailsAddress"
|
||||||
class="my-3"
|
:aria-id="`${id}-address-details`"
|
||||||
v-if="allowManualDetails"
|
class="my-3"
|
||||||
>
|
v-if="allowManualDetails"
|
||||||
<template #trigger>
|
>
|
||||||
<o-button
|
<template #trigger>
|
||||||
variant="primary"
|
<o-button
|
||||||
outlined
|
variant="primary"
|
||||||
:aria-controls="`${id}-address-details`"
|
outlined
|
||||||
:icon-right="detailsAddress ? 'chevron-up' : 'chevron-down'"
|
:aria-controls="`${id}-address-details`"
|
||||||
>
|
:icon-right="detailsAddress ? 'chevron-up' : 'chevron-down'"
|
||||||
{{ t("Details") }}
|
>
|
||||||
</o-button>
|
{{ t("Details") }}
|
||||||
</template>
|
</o-button>
|
||||||
<form @submit.prevent="saveManualAddress">
|
</template>
|
||||||
<header>
|
<form @submit.prevent="saveManualAddress">
|
||||||
<h2>{{ t("Manually enter address") }}</h2>
|
<header>
|
||||||
</header>
|
<h2>{{ t("Manually enter address") }}</h2>
|
||||||
<section>
|
</header>
|
||||||
<o-field :label="t('Name')" labelFor="addressNameInput">
|
<section>
|
||||||
|
<o-field :label="t('Name')" labelFor="addressNameInput">
|
||||||
|
<o-input
|
||||||
|
aria-required="true"
|
||||||
|
required
|
||||||
|
v-model="selected.description"
|
||||||
|
id="addressNameInput"
|
||||||
|
expanded
|
||||||
|
/>
|
||||||
|
</o-field>
|
||||||
|
|
||||||
|
<o-field :label="t('Street')" labelFor="streetInput">
|
||||||
|
<o-input v-model="selected.street" id="streetInput" expanded />
|
||||||
|
</o-field>
|
||||||
|
|
||||||
|
<o-field grouped>
|
||||||
|
<o-field :label="t('Postal Code')" labelFor="postalCodeInput">
|
||||||
<o-input
|
<o-input
|
||||||
aria-required="true"
|
v-model="selected.postalCode"
|
||||||
required
|
id="postalCodeInput"
|
||||||
v-model="selected.description"
|
|
||||||
id="addressNameInput"
|
|
||||||
expanded
|
expanded
|
||||||
/>
|
/>
|
||||||
</o-field>
|
</o-field>
|
||||||
|
|
||||||
<o-field :label="t('Street')" labelFor="streetInput">
|
<o-field :label="t('Locality')" labelFor="localityInput">
|
||||||
<o-input v-model="selected.street" id="streetInput" expanded />
|
<o-input v-model="selected.locality" id="localityInput" expanded />
|
||||||
|
</o-field>
|
||||||
|
</o-field>
|
||||||
|
|
||||||
|
<o-field grouped>
|
||||||
|
<o-field :label="t('Region')" labelFor="regionInput">
|
||||||
|
<o-input v-model="selected.region" id="regionInput" expanded />
|
||||||
</o-field>
|
</o-field>
|
||||||
|
|
||||||
<o-field grouped>
|
<o-field :label="t('Country')" labelFor="countryInput">
|
||||||
<o-field :label="t('Postal Code')" labelFor="postalCodeInput">
|
<o-input v-model="selected.country" id="countryInput" expanded />
|
||||||
<o-input
|
|
||||||
v-model="selected.postalCode"
|
|
||||||
id="postalCodeInput"
|
|
||||||
expanded
|
|
||||||
/>
|
|
||||||
</o-field>
|
|
||||||
|
|
||||||
<o-field :label="t('Locality')" labelFor="localityInput">
|
|
||||||
<o-input
|
|
||||||
v-model="selected.locality"
|
|
||||||
id="localityInput"
|
|
||||||
expanded
|
|
||||||
/>
|
|
||||||
</o-field>
|
|
||||||
</o-field>
|
</o-field>
|
||||||
|
</o-field>
|
||||||
<o-field grouped>
|
</section>
|
||||||
<o-field :label="t('Region')" labelFor="regionInput">
|
<footer class="mt-3 flex gap-2 items-center">
|
||||||
<o-input v-model="selected.region" id="regionInput" expanded />
|
<o-button native-type="submit">
|
||||||
</o-field>
|
{{ t("Save") }}
|
||||||
|
</o-button>
|
||||||
<o-field :label="t('Country')" labelFor="countryInput">
|
<o-button outlined type="button" @click="resetAddress">
|
||||||
<o-input v-model="selected.country" id="countryInput" expanded />
|
{{ t("Clear") }}
|
||||||
</o-field>
|
</o-button>
|
||||||
</o-field>
|
<p>
|
||||||
</section>
|
{{
|
||||||
<footer class="mt-3 flex gap-2 items-center">
|
t("You can drag and drop the marker below to the desired location")
|
||||||
<o-button native-type="submit">
|
}}
|
||||||
{{ t("Save") }}
|
</p>
|
||||||
</o-button>
|
</footer>
|
||||||
<o-button outlined type="button" @click="resetAddress">
|
</form>
|
||||||
{{ t("Clear") }}
|
</o-collapse>
|
||||||
</o-button>
|
<div
|
||||||
<p>
|
class="map"
|
||||||
{{
|
v-if="!hideMap && !disabled && (selected.geom || detailsAddress)"
|
||||||
t(
|
>
|
||||||
"You can drag and drop the marker below to the desired location"
|
<map-leaflet
|
||||||
)
|
:coords="selected.geom ?? defaultCoords"
|
||||||
}}
|
:marker="mapMarkerValue"
|
||||||
</p>
|
:updateDraggableMarkerCallback="reverseGeoCode"
|
||||||
</footer>
|
:options="{ zoom: mapDefaultZoom }"
|
||||||
</form>
|
:readOnly="false"
|
||||||
</o-collapse>
|
/>
|
||||||
<div
|
|
||||||
class="map"
|
|
||||||
v-if="!hideMap && !disabled && (selected.geom || detailsAddress)"
|
|
||||||
>
|
|
||||||
<map-leaflet
|
|
||||||
:coords="selected.geom ?? defaultCoords"
|
|
||||||
:marker="mapMarkerValue"
|
|
||||||
:updateDraggableMarkerCallback="reverseGeoCode"
|
|
||||||
:options="{ zoom: mapDefaultZoom }"
|
|
||||||
:readOnly="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|||||||
@@ -35,6 +35,7 @@
|
|||||||
<o-dropdown v-model="distance" position="bottom-right" v-if="distance">
|
<o-dropdown v-model="distance" position="bottom-right" v-if="distance">
|
||||||
<template #trigger="{ active }">
|
<template #trigger="{ active }">
|
||||||
<o-button
|
<o-button
|
||||||
|
class="!h-full"
|
||||||
:title="t('Select distance')"
|
:title="t('Select distance')"
|
||||||
:icon-right="active ? 'menu-up' : 'menu-down'"
|
:icon-right="active ? 'menu-up' : 'menu-down'"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user