hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve search

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-08-22 12:12:09 +02:00
parent 444e0d6a0c
commit baac00f678
36 changed files with 1343 additions and 1013 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
js/src/components/Local/CloseContent.vue
View File

@@ -9,7 +9,7 @@
</h2>
<button
v-if="suggestGeoloc && isIPLocation"
v-if="suggestGeoloc"
class="inline-flex bg-primary rounded text-white flex-initial px-4 py-2 justify-center w-full md:w-min whitespace-nowrap"
@click="emit('doGeoLoc')"
>
@@ -21,7 +21,7 @@
<div class="hidden sm:block" v-show="showScrollLeftButton">
<button
@click="scrollLeft"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white w-10 h-10 border border-shadowColor -left-5"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5"
>
<div class="">&lt;</div>
</button>
@@ -38,7 +38,7 @@
<div class="hidden sm:block" v-show="showScrollRightButton">
<button
@click="scrollRight"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white w-10 h-10 border border-shadowColor -right-5"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -right-5"
>
<div class="">&gt;</div>
</button>
@@ -47,9 +47,8 @@
</template>
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, ref } from "vue";
import { onMounted, onUnmounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { LocationType } from "../../types/user-location.model";
withDefaults(
defineProps<{
@@ -62,14 +61,6 @@ const emit = defineEmits(["doGeoLoc"]);
const { t } = useI18n({ useScope: "global" });
const userLocationInjection = inject<{
userLocation: LocationType;
}>("userLocation");
const isIPLocation = computed(
() => userLocationInjection?.userLocation.isIPLocation
);
const showScrollRightButton = ref(true);
const showScrollLeftButton = ref(false);

114
js/src/components/Local/CloseEvents.vue
View File

@@ -1,8 +1,10 @@
<template>
<close-content
class="container mx-auto px-2"
v-show="loadingEvents || (events && events.total > 0)"
:suggestGeoloc="suggestGeoloc"
v-on="attrs"
@doGeoLoc="emit('doGeoLoc')"
>
<template #title>
<template v-if="userLocationName">
@@ -25,13 +27,7 @@
:key="event.uuid"
/>
<more-content
v-if="
userLocation &&
userLocationName &&
userLocation.lat &&
userLocation.lon &&
userLocation.picture
"
v-if="userLocationName && userLocation?.lat && userLocation?.lon"
:to="{
name: 'SEARCH',
query: {
@@ -39,10 +35,10 @@
lat: userLocation.lat?.toString(),
lon: userLocation.lon?.toString(),
contentType: 'EVENTS',
distance: '25',
distance: '25_km',
},
}"
:picture="userLocation.picture"
:picture="userLocation?.picture"
>
{{
t("View more events around {position}", {
@@ -65,115 +61,33 @@ import { useQuery } from "@vue/apollo-composable";
import EventCard from "../Event/EventCard.vue";
import { Paginate } from "@/types/paginate";
import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
import { CURRENT_USER_LOCATION_CLIENT } from "@/graphql/location";
import { ICurrentUser, IUser } from "@/types/current-user.model";
import { CURRENT_USER_CLIENT, USER_SETTINGS } from "@/graphql/user";
import { coordsToGeoHash, geoHashToCoords } from "@/utils/location";
import { REVERSE_GEOCODE } from "@/graphql/address";
import { IAddress } from "@/types/address.model";
import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model";
import { useI18n } from "vue-i18n";
import { coordsToGeoHash } from "@/utils/location";
const props = defineProps<{ userLocation: LocationType }>();
const emit = defineEmits(["doGeoLoc"]);
const EVENT_PAGE_LIMIT = 12;
const { result: currentUserResult } = useQuery<{
currentUser: ICurrentUser;
}>(CURRENT_USER_CLIENT);
const currentUser = computed(() => currentUserResult.value?.currentUser);
const { result: userResult } = useQuery<{ loggedUser: IUser }>(
USER_SETTINGS,
{},
() => ({
enabled: currentUser.value?.isLoggedIn,
})
);
const loggedUser = computed(() => userResult.value?.loggedUser);
const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
const config = computed<IConfig | undefined>(() => configResult.value?.config);
const serverLocation = computed(() => config.value?.location);
const { t } = useI18n({ useScope: "global" });
const attrs = useAttrs();
const coords = computed(() => {
const userSettingsGeoHash =
loggedUser.value?.settings?.location?.geohash ?? undefined;
const userSettingsCoords = geoHashToCoords(userSettingsGeoHash);
if (userSettingsCoords) {
return { ...userSettingsCoords, isIPLocation: false };
}
return { ...serverLocation.value, isIPLocation: true };
});
const { result: reverseGeocodeResult } = useQuery<{
reverseGeocode: IAddress[];
}>(REVERSE_GEOCODE, coords, () => ({
enabled: coords.value?.longitude != undefined,
}));
const userSettingsLocation = computed(() => {
const address = reverseGeocodeResult.value?.reverseGeocode[0];
const placeName = address?.locality ?? address?.region ?? address?.country;
return {
lat: coords.value?.latitude,
lon: coords.value?.longitude,
name: placeName,
picture: address?.pictureInfo,
isIPLocation: coords.value?.isIPLocation,
};
});
const { result: currentUserLocationResult } = useQuery<{
currentUserLocation: LocationType;
}>(CURRENT_USER_LOCATION_CLIENT);
const currentUserLocation = computed(() => {
return {
...currentUserLocationResult.value?.currentUserLocation,
isIPLocation: false,
};
});
const geohash = computed(() => {
return coordsToGeoHash(userLocation.value?.lat, userLocation.value?.lon);
});
const userLocationName = computed(() => {
return userLocation.value?.name;
return props.userLocation?.name;
});
const userLocation = computed(() => {
if (
!userSettingsLocation.value ||
(userSettingsLocation.value?.isIPLocation &&
currentUserLocation.value?.name)
) {
return currentUserLocation.value;
}
return userSettingsLocation.value;
});
const suggestGeoloc = computed(() => userLocation.value?.isIPLocation);
const suggestGeoloc = computed(() => props.userLocation?.isIPLocation);
const { result: eventsResult, loading: loadingEvents } = useQuery<{
searchEvents: Paginate<IEvent>;
}>(SEARCH_EVENTS, {
location: geohash,
}>(SEARCH_EVENTS, () => ({
location: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon),
beginsOn: new Date(),
endsOn: undefined,
radius: 25,
eventPage: 1,
limit: EVENT_PAGE_LIMIT,
type: "IN_PERSON",
});
}));
const events = computed(
() => eventsResult.value?.searchEvents ?? { elements: [], total: 0 }

94
js/src/components/Local/CloseGroups.vue
View File

@@ -1,11 +1,21 @@
<template>
<close-content v-show="loadingGroups || selectedGroups.length > 0">
<close-content
class="container mx-auto px-2"
v-show="loadingGroups || selectedGroups.length > 0"
@do-geo-loc="emit('doGeoLoc')"
:suggestGeoloc="userLocation.isIPLocation"
>
<template #title>
{{
$t("Popular groups nearby {position}", {
position: userLocationName,
})
}}
<template v-if="userLocationName">
{{
t("Popular groups nearby {position}", {
position: userLocationName,
})
}}
</template>
<template v-else>
{{ t("Popular groups close to you") }}
</template>
</template>
<template #content>
<!-- <skeleton-group-result
@@ -14,32 +24,32 @@
:key="i"
v-show="loadingGroups"
/> -->
<group-result
<group-card
v-for="group in selectedGroups"
:key="group.id"
class="scroll-ml-6 snap-center shrink-0 first:pl-8 last:pr-8 w-[18rem]"
:group="group"
:view-mode="'column'"
:minimal="true"
:has-border="true"
:showSummary="false"
/>
<more-content
v-if="userLocation"
v-if="userLocationName"
:to="{
name: 'SEARCH',
query: {
locationName: userLocationName,
lat: userLocation.lat,
lon: userLocation.lon,
lat: userLocation.lat?.toString(),
lon: userLocation.lon?.toString(),
contentType: 'GROUPS',
distance: currentDistance,
distance: '25_km',
},
}"
:picture="userLocation.picture"
>
{{
$t("View more groups around {position}", {
t("View more groups around {position}", {
position: userLocationName,
})
}}
@@ -48,8 +58,7 @@
</close-content>
</template>
<script lang="ts">
import { defineComponent, inject, reactive, computed, ref } from "vue";
<script lang="ts" setup>
// import SkeletonGroupResult from "../../components/result/SkeletonGroupResult.vue";
import sampleSize from "lodash/sampleSize";
import { LocationType } from "../../types/user-location.model";
@@ -57,39 +66,36 @@ import MoreContent from "./MoreContent.vue";
import CloseContent from "./CloseContent.vue";
import { IGroup } from "@/types/actor";
import { SEARCH_GROUPS } from "@/graphql/search";
import { useQuery } from "@vue/apollo-composable";
import { Paginate } from "@/types/paginate";
import { computed } from "vue";
import GroupCard from "@/components/Group/GroupCard.vue";
import { coordsToGeoHash } from "@/utils/location";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
MoreContent,
CloseContent,
// SkeletonGroupResult,
},
apollo: {
groups: {
query: SEARCH_GROUPS,
},
},
setup() {
const userLocationInjection = inject<{
userLocation: LocationType;
}>("userLocation");
const props = defineProps<{ userLocation: LocationType }>();
const emit = defineEmits(["doGeoLoc"]);
const groups = reactive<IGroup[]>([]);
const { t } = useI18n({ useScope: "global" });
const selectedGroups = computed(() => sampleSize(groups, 5));
const { result: groupsResult, loading: loadingGroups } = useQuery<{
searchGroups: Paginate<IGroup>;
}>(
SEARCH_GROUPS,
() => ({
location: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon),
radius: 25,
page: 1,
limit: 12,
}),
() => ({ enabled: props.userLocation?.lat !== undefined })
);
const currentDistance = ref("25_km");
const groups = computed(
() => groupsResult.value?.searchGroups ?? { total: 0, elements: [] }
);
const userLocationName = computed(
() => userLocationInjection?.userLocation?.name
);
const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5));
return {
selectedGroups,
userLocation: userLocationInjection?.userLocation,
userLocationName,
currentDistance,
};
},
});
const userLocationName = computed(() => props?.userLocation?.name);
</script>

1
js/src/components/Local/LastEvents.vue
View File

@@ -1,5 +1,6 @@
<template>
<close-content
class="container mx-auto px-2"
v-show="loadingEvents || (events && events.total > 0)"
:suggestGeoloc="false"
v-on="attrs"

4
js/src/components/Local/MoreContent.vue
View File

@@ -1,7 +1,7 @@
<template>
<router-link
:to="to"
class="mbz-card flex flex-col items-center dark:border-gray-700 shadow-md md:flex-col snap-center shrink-0 first:pl-8 w-[18rem]"
class="mbz-card flex flex-col items-center dark:border-gray-700 shadow-md md:flex-col snap-center shrink-0 first:pl-8 w-[18rem] dark:bg-mbz-purple"
>
<div class="relative w-full group">
<img
@@ -63,7 +63,7 @@ import { computed } from "vue";
import { CategoryPictureLicencing } from "../Categories/constants";
const props = defineProps<{
to: { name: string; query: Record<string, string> };
to: { name: string; query: Record<string, string | undefined> };
picture?: CategoryPictureLicencing & { url: string };
}>();