#1492: add distance value in selector + add with filter in search page
This commit is contained in:
Laurent GAY
@@ -28,11 +28,12 @@
|
||||
<!-- Search fields -->
|
||||
<search-fields
|
||||
v-model:search="search"
|
||||
v-model:location="location"
|
||||
v-model:address="userAddress"
|
||||
v-model:distance="distance"
|
||||
:locationDefaultText="userLocation?.name"
|
||||
v-on:update:location="updateLocation"
|
||||
v-on:update:address="updateAddress"
|
||||
:fromLocalStorage="true"
|
||||
:addressDefaultText="userLocation?.name"
|
||||
:key="increated"
|
||||
/>
|
||||
<!-- Categories preview -->
|
||||
<categories-preview />
|
||||
@@ -185,7 +186,13 @@ import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
|
||||
import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
|
||||
import SearchFields from "@/components/Home/SearchFields.vue";
|
||||
import { useHead } from "@unhead/vue";
|
||||
import { addressToLocation, geoHashToCoords } from "@/utils/location";
|
||||
import {
|
||||
addressToLocation,
|
||||
geoHashToCoords,
|
||||
getAddressFromLocal,
|
||||
locationToAddress,
|
||||
storeAddressInLocal,
|
||||
} from "@/utils/location";
|
||||
import { useServerProvidedLocation } from "@/composition/apollo/config";
|
||||
import { ABOUT } from "@/graphql/config";
|
||||
import { IConfig } from "@/types/config.model";
|
||||
@@ -238,13 +245,14 @@ const currentUserParticipations = computed(
|
||||
() => loggedUser.value?.participations.elements
|
||||
);
|
||||
|
||||
const location = ref(null);
|
||||
const increated = ref(0);
|
||||
const address = ref(null);
|
||||
const search = ref("");
|
||||
const noLocation = ref(false);
|
||||
const noAddress = ref(false);
|
||||
const current_distance = ref(null);
|
||||
|
||||
watch(location, (newLoc, oldLoc) =>
|
||||
console.debug("LOCATION UPDATED from", { ...oldLoc }, " to ", { ...newLoc })
|
||||
watch(address, (newAdd, oldAdd) =>
|
||||
console.debug("ADDRESS UPDATED from", { ...oldAdd }, " to ", { ...newAdd })
|
||||
);
|
||||
|
||||
const isToday = (date: string): boolean => {
|
||||
@@ -401,13 +409,13 @@ const { result: reverseGeocodeResult } = useQuery<{
|
||||
}));
|
||||
|
||||
const userSettingsLocation = computed(() => {
|
||||
const address = reverseGeocodeResult.value?.reverseGeocode[0];
|
||||
const placeName = address?.locality ?? address?.region ?? address?.country;
|
||||
const location = reverseGeocodeResult.value?.reverseGeocode[0];
|
||||
const placeName = location?.locality ?? location?.region ?? location?.country;
|
||||
return {
|
||||
lat: coords.value?.latitude,
|
||||
lon: coords.value?.longitude,
|
||||
name: placeName,
|
||||
picture: address?.pictureInfo,
|
||||
picture: location?.pictureInfo,
|
||||
isIPLocation: coords.value?.isIPLocation,
|
||||
};
|
||||
});
|
||||
@@ -433,16 +441,20 @@ const currentUserLocation = computed(() => {
|
||||
|
||||
const userLocation = computed(() => {
|
||||
console.debug("new userLocation");
|
||||
if (noLocation.value) {
|
||||
if (noAddress.value) {
|
||||
return {
|
||||
lon: null,
|
||||
lat: null,
|
||||
name: null,
|
||||
};
|
||||
}
|
||||
if (location.value) {
|
||||
if (address.value) {
|
||||
console.debug("userLocation is typed location");
|
||||
return addressToLocation(location.value);
|
||||
return addressToLocation(address.value);
|
||||
}
|
||||
const local_address = getAddressFromLocal();
|
||||
if (local_address) {
|
||||
return addressToLocation(local_address);
|
||||
}
|
||||
if (
|
||||
!userSettingsLocation.value ||
|
||||
@@ -454,9 +466,36 @@ const userLocation = computed(() => {
|
||||
return userSettingsLocation.value;
|
||||
});
|
||||
|
||||
const userAddress = computed({
|
||||
get(): IAddress | null {
|
||||
if (noAddress.value) {
|
||||
return null;
|
||||
}
|
||||
if (address.value) {
|
||||
return address.value;
|
||||
}
|
||||
const local_address = getAddressFromLocal();
|
||||
if (local_address) {
|
||||
return local_address;
|
||||
}
|
||||
if (
|
||||
!userSettingsLocation.value ||
|
||||
(userSettingsLocation.value?.isIPLocation &&
|
||||
currentUserLocation.value?.name)
|
||||
) {
|
||||
return locationToAddress(currentUserLocation.value);
|
||||
}
|
||||
return locationToAddress(userSettingsLocation.value);
|
||||
},
|
||||
set(newAddress: IAddress | null) {
|
||||
address.value = newAddress;
|
||||
noAddress.value = newAddress == null;
|
||||
},
|
||||
});
|
||||
|
||||
const distance = computed({
|
||||
get(): number | null {
|
||||
if (noLocation.value || !userLocation.value?.name) {
|
||||
if (noAddress.value || !userLocation.value?.name) {
|
||||
return null;
|
||||
} else if (current_distance.value == null) {
|
||||
return userLocation.value?.isIPLocation ? 150 : 25;
|
||||
@@ -528,8 +567,13 @@ const performGeoLocation = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const updateLocation = (newlocation: IAddress | null) => {
|
||||
noLocation.value = newlocation == null;
|
||||
const updateAddress = (newAddress: IAddress | null) => {
|
||||
if (address.value?.geom != newAddress?.geom || newAddress == null) {
|
||||
increated.value += 1;
|
||||
storeAddressInLocal(newAddress);
|
||||
}
|
||||
address.value = newAddress;
|
||||
noAddress.value = newAddress == null;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,8 +3,9 @@
|
||||
<search-fields
|
||||
class="md:ml-10 mr-2"
|
||||
v-model:search="search"
|
||||
v-model:location="location"
|
||||
:locationDefaultText="locationName"
|
||||
v-model:address="address"
|
||||
v-model:distance="radius"
|
||||
:addressDefaultText="addressName"
|
||||
:fromLocalStorage="true"
|
||||
/>
|
||||
</div>
|
||||
@@ -155,43 +156,6 @@
|
||||
</template>
|
||||
</filter-section>
|
||||
|
||||
<filter-section
|
||||
v-show="!isOnline"
|
||||
v-model:opened="searchFilterSectionsOpenStatus.eventDistance"
|
||||
:title="t('Distance')"
|
||||
>
|
||||
<template #options>
|
||||
<fieldset class="flex flex-col">
|
||||
<legend class="sr-only">{{ t("Distance") }}</legend>
|
||||
<div
|
||||
v-for="distanceOption in eventDistance"
|
||||
:key="distanceOption.id"
|
||||
>
|
||||
<input
|
||||
:id="distanceOption.id"
|
||||
v-model="distance"
|
||||
type="radio"
|
||||
name="eventDistance"
|
||||
:value="distanceOption.id"
|
||||
class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
:for="distanceOption.id"
|
||||
class="cursor-pointer ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>{{ distanceOption.label }}</label
|
||||
>
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
<template #preview>
|
||||
<span
|
||||
class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
|
||||
>
|
||||
{{ eventDistance.find(({ id }) => id === distance)?.label }}
|
||||
</span>
|
||||
</template>
|
||||
</filter-section>
|
||||
|
||||
<filter-section
|
||||
v-show="contentType !== 'GROUPS'"
|
||||
v-model:opened="searchFilterSectionsOpenStatus.eventCategory"
|
||||
@@ -620,7 +584,7 @@
|
||||
:contentType="contentType"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
:locationName="locationName"
|
||||
:locationName="addressName"
|
||||
@map-updated="setBounds"
|
||||
:events="searchEvents"
|
||||
:groups="searchGroups"
|
||||
@@ -697,25 +661,25 @@ const EventMarkerMap = defineAsyncComponent(
|
||||
|
||||
const search = useRouteQuery("search", "");
|
||||
const searchDebounced = refDebounced(search, 1000);
|
||||
const locationName = useRouteQuery("locationName", null);
|
||||
const location = ref<IAddress | null>(null);
|
||||
const addressName = useRouteQuery("locationName", null);
|
||||
const address = ref<IAddress | null>(null);
|
||||
|
||||
watch(location, (newLocation) => {
|
||||
console.debug("location change", newLocation);
|
||||
if (newLocation?.geom) {
|
||||
latitude.value = parseFloat(newLocation?.geom.split(";")[1]);
|
||||
longitude.value = parseFloat(newLocation?.geom.split(";")[0]);
|
||||
locationName.value = newLocation?.description;
|
||||
console.debug("set location", [
|
||||
watch(address, (newAddress: IAddress) => {
|
||||
console.debug("address change", newAddress);
|
||||
if (newAddress?.geom) {
|
||||
latitude.value = parseFloat(newAddress?.geom.split(";")[1]);
|
||||
longitude.value = parseFloat(newAddress?.geom.split(";")[0]);
|
||||
addressName.value = newAddress?.description;
|
||||
console.debug("set address", [
|
||||
latitude.value,
|
||||
longitude.value,
|
||||
locationName.value,
|
||||
addressName.value,
|
||||
]);
|
||||
} else {
|
||||
console.debug("location emptied");
|
||||
console.debug("address emptied");
|
||||
latitude.value = undefined;
|
||||
longitude.value = undefined;
|
||||
locationName.value = null;
|
||||
addressName.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -759,9 +723,6 @@ const groupPage = useRouteQuery("groupPage", 1, integerTransformer);
|
||||
const latitude = useRouteQuery("lat", undefined, floatTransformer);
|
||||
const longitude = useRouteQuery("lon", undefined, floatTransformer);
|
||||
|
||||
// TODO
|
||||
// This should be updated with getRadiusFromLocal if we want to use user's
|
||||
// preferences
|
||||
const distance = useRouteQuery("distance", "10_km");
|
||||
const when = useRouteQuery("when", "any");
|
||||
const contentType = useRouteQuery(
|
||||
@@ -946,75 +907,6 @@ const contentTypeMapping = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const eventDistance = computed(() => {
|
||||
return [
|
||||
{
|
||||
id: "anywhere",
|
||||
label: t("Any distance"),
|
||||
},
|
||||
{
|
||||
id: "5_km",
|
||||
label: t(
|
||||
"{number} kilometers",
|
||||
{
|
||||
number: 5,
|
||||
},
|
||||
5
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "10_km",
|
||||
label: t(
|
||||
"{number} kilometers",
|
||||
{
|
||||
number: 10,
|
||||
},
|
||||
10
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "25_km",
|
||||
label: t(
|
||||
"{number} kilometers",
|
||||
{
|
||||
number: 25,
|
||||
},
|
||||
25
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "50_km",
|
||||
label: t(
|
||||
"{number} kilometers",
|
||||
{
|
||||
number: 50,
|
||||
},
|
||||
50
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "100_km",
|
||||
label: t(
|
||||
"{number} kilometers",
|
||||
{
|
||||
number: 100,
|
||||
},
|
||||
100
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "150_km",
|
||||
label: t(
|
||||
"{number} kilometers",
|
||||
{
|
||||
number: 150,
|
||||
},
|
||||
150
|
||||
),
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const eventStatuses = computed(() => {
|
||||
return [
|
||||
{
|
||||
@@ -1049,7 +941,14 @@ const geoHashLocation = computed(() =>
|
||||
coordsToGeoHash(latitude.value, longitude.value)
|
||||
);
|
||||
|
||||
const radius = computed(() => Number.parseInt(distance.value.slice(0, -3)));
|
||||
const radius = computed({
|
||||
get(): number | null {
|
||||
return Number.parseInt(distance.value.slice(0, -3));
|
||||
},
|
||||
set(newRadius: number) {
|
||||
distance.value = newRadius.toString() + "_km";
|
||||
},
|
||||
});
|
||||
|
||||
const longEvents = computed(() => {
|
||||
if (contentType.value === ContentType.EVENTS) {
|
||||
|
||||
Reference in New Issue
Block a user