#1492: search page correction + refactoring
This commit is contained in:
Laurent GAY
parent
f2d7da7af7
commit
ea6d1ba83d
|
|
@ -1,116 +0,0 @@
|
||||||
<template>
|
|
||||||
<close-content
|
|
||||||
class="container mx-auto px-2"
|
|
||||||
v-show="loading || selectedGroups.length > 0"
|
|
||||||
@do-geo-loc="emit('doGeoLoc')"
|
|
||||||
:suggestGeoloc="userLocation.isIPLocation"
|
|
||||||
:doingGeoloc="doingGeoloc"
|
|
||||||
>
|
|
||||||
<template #title>
|
|
||||||
<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
|
|
||||||
v-for="i in [...Array(6).keys()]"
|
|
||||||
class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
|
|
||||||
:key="i"
|
|
||||||
v-show="loading"
|
|
||||||
/>
|
|
||||||
<group-card
|
|
||||||
v-for="group in selectedGroups"
|
|
||||||
:key="group.id"
|
|
||||||
:group="group"
|
|
||||||
:mode="'column'"
|
|
||||||
:showSummary="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<more-content
|
|
||||||
v-if="userLocationName"
|
|
||||||
:to="{
|
|
||||||
name: RouteName.SEARCH,
|
|
||||||
query: {
|
|
||||||
locationName: userLocationName,
|
|
||||||
lat: userLocation.lat?.toString(),
|
|
||||||
lon: userLocation.lon?.toString(),
|
|
||||||
contentType: 'GROUPS',
|
|
||||||
distance: `${distance}_km`,
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
:picture="userLocation.picture"
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
t("View more groups around {position}", {
|
|
||||||
position: userLocationName,
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</more-content>
|
|
||||||
</template>
|
|
||||||
</close-content>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import SkeletonGroupResult from "@/components/Group/SkeletonGroupResult.vue";
|
|
||||||
import sampleSize from "lodash/sampleSize";
|
|
||||||
import { LocationType } from "@/types/user-location.model";
|
|
||||||
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";
|
|
||||||
import RouteName from "@/router/name";
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
userLocation: LocationType;
|
|
||||||
doingGeoloc?: boolean;
|
|
||||||
}>();
|
|
||||||
const emit = defineEmits(["doGeoLoc"]);
|
|
||||||
|
|
||||||
const { t } = useI18n({ useScope: "global" });
|
|
||||||
|
|
||||||
const userLocation = computed(() => props.userLocation);
|
|
||||||
|
|
||||||
const geoHash = computed(() =>
|
|
||||||
coordsToGeoHash(userLocation.value.lat, userLocation.value.lon)
|
|
||||||
);
|
|
||||||
|
|
||||||
const distance = computed<number>(() =>
|
|
||||||
userLocation.value?.isIPLocation ? 150 : 25
|
|
||||||
);
|
|
||||||
|
|
||||||
const { result: groupsResult, loading: loadingGroups } = useQuery<{
|
|
||||||
searchGroups: Paginate<IGroup>;
|
|
||||||
}>(
|
|
||||||
SEARCH_GROUPS,
|
|
||||||
() => ({
|
|
||||||
location: geoHash.value,
|
|
||||||
radius: distance.value,
|
|
||||||
page: 1,
|
|
||||||
limit: 12,
|
|
||||||
}),
|
|
||||||
() => ({ enabled: geoHash.value !== undefined })
|
|
||||||
);
|
|
||||||
|
|
||||||
const groups = computed(
|
|
||||||
() => groupsResult.value?.searchGroups ?? { total: 0, elements: [] }
|
|
||||||
);
|
|
||||||
|
|
||||||
const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5));
|
|
||||||
|
|
||||||
const userLocationName = computed(() => props?.userLocation?.name);
|
|
||||||
|
|
||||||
const loading = computed(() => props.doingGeoloc || loadingGroups.value);
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<template>
|
|
||||||
<close-content
|
|
||||||
class="container mx-auto px-2"
|
|
||||||
v-show="loadingEvents || (events && events.total > 0)"
|
|
||||||
:suggestGeoloc="false"
|
|
||||||
v-on="attrs"
|
|
||||||
>
|
|
||||||
<template #title>
|
|
||||||
{{ t("Agenda") }}
|
|
||||||
</template>
|
|
||||||
<template #content>
|
|
||||||
<skeleton-event-result
|
|
||||||
v-for="i in 6"
|
|
||||||
class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
|
|
||||||
:key="i"
|
|
||||||
v-show="loadingEvents"
|
|
||||||
/>
|
|
||||||
<event-card
|
|
||||||
v-for="event in events.elements"
|
|
||||||
:event="event"
|
|
||||||
:key="event.uuid"
|
|
||||||
/>
|
|
||||||
<more-content
|
|
||||||
:to="{
|
|
||||||
name: RouteName.SEARCH,
|
|
||||||
query: {
|
|
||||||
contentType: 'EVENTS',
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ t("View more events") }}
|
|
||||||
</more-content>
|
|
||||||
</template>
|
|
||||||
</close-content>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import MoreContent from "./MoreContent.vue";
|
|
||||||
import CloseContent from "./CloseContent.vue";
|
|
||||||
import { computed, useAttrs } from "vue";
|
|
||||||
import { IEvent } from "@/types/event.model";
|
|
||||||
import { useQuery } from "@vue/apollo-composable";
|
|
||||||
import EventCard from "../Event/EventCard.vue";
|
|
||||||
import { Paginate } from "@/types/paginate";
|
|
||||||
import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
|
|
||||||
import { EventSortField, SortDirection } from "@/types/enums";
|
|
||||||
import { FETCH_EVENTS } from "@/graphql/event";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
import RouteName from "@/router/name";
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
instanceName: string;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const { t } = useI18n({ useScope: "global" });
|
|
||||||
const attrs = useAttrs();
|
|
||||||
|
|
||||||
const { result: resultEvents, loading: loadingEvents } = useQuery<{
|
|
||||||
events: Paginate<IEvent>;
|
|
||||||
}>(FETCH_EVENTS, {
|
|
||||||
orderBy: EventSortField.BEGINS_ON,
|
|
||||||
direction: SortDirection.ASC,
|
|
||||||
longevents: false,
|
|
||||||
});
|
|
||||||
const events = computed(
|
|
||||||
() => resultEvents.value?.events ?? { total: 0, elements: [] }
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
<template>
|
|
||||||
<close-content
|
|
||||||
class="container mx-auto px-2"
|
|
||||||
:suggest-geoloc="false"
|
|
||||||
v-show="loadingEvents || (events?.elements && events?.elements.length > 0)"
|
|
||||||
>
|
|
||||||
<template #title>
|
|
||||||
{{ $t("Online upcoming events") }}
|
|
||||||
</template>
|
|
||||||
<template #content>
|
|
||||||
<skeleton-event-result
|
|
||||||
v-for="i in [...Array(6).keys()]"
|
|
||||||
class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
|
|
||||||
:key="i"
|
|
||||||
v-show="loadingEvents"
|
|
||||||
/>
|
|
||||||
<event-card
|
|
||||||
class="scroll-ml-6 snap-center shrink-0 first:pl-8 last:pr-8 w-[18rem]"
|
|
||||||
v-for="event in events?.elements"
|
|
||||||
:key="event.id"
|
|
||||||
:event="event"
|
|
||||||
mode="column"
|
|
||||||
/>
|
|
||||||
<more-content
|
|
||||||
:to="{
|
|
||||||
name: RouteName.SEARCH,
|
|
||||||
query: {
|
|
||||||
contentType: 'EVENTS',
|
|
||||||
isOnline: 'true',
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
:picture="{
|
|
||||||
url: '/img/online-event.webp',
|
|
||||||
author: {
|
|
||||||
name: 'Chris Montgomery',
|
|
||||||
url: 'https://unsplash.com/@cwmonty',
|
|
||||||
},
|
|
||||||
source: {
|
|
||||||
name: 'Unsplash',
|
|
||||||
url: 'https://unsplash.com/?utm_source=Mobilizon&utm_medium=referral',
|
|
||||||
},
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ $t("View more online events") }}
|
|
||||||
</more-content>
|
|
||||||
</template>
|
|
||||||
</close-content>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from "vue";
|
|
||||||
import SkeletonEventResult from "@/components/Event/SkeletonEventResult.vue";
|
|
||||||
import MoreContent from "./MoreContent.vue";
|
|
||||||
import CloseContent from "./CloseContent.vue";
|
|
||||||
import { SEARCH_EVENTS } from "@/graphql/search";
|
|
||||||
import EventCard from "@/components/Event/EventCard.vue";
|
|
||||||
import { useQuery } from "@vue/apollo-composable";
|
|
||||||
import RouteName from "@/router/name";
|
|
||||||
import { Paginate } from "@/types/paginate";
|
|
||||||
import { IEvent } from "@/types/event.model";
|
|
||||||
|
|
||||||
const EVENT_PAGE_LIMIT = 12;
|
|
||||||
|
|
||||||
const { result: searchEventResult, loading: loadingEvents } = useQuery<{
|
|
||||||
searchEvents: Paginate<IEvent>;
|
|
||||||
}>(SEARCH_EVENTS, () => ({
|
|
||||||
beginsOn: new Date(),
|
|
||||||
endsOn: undefined,
|
|
||||||
eventPage: 1,
|
|
||||||
limit: EVENT_PAGE_LIMIT,
|
|
||||||
type: "ONLINE",
|
|
||||||
}));
|
|
||||||
|
|
||||||
const events = computed(() => searchEventResult.value?.searchEvents);
|
|
||||||
</script>
|
|
||||||
|
|
@ -179,13 +179,6 @@
|
||||||
<ul
|
<ul
|
||||||
class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
|
class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
|
||||||
>
|
>
|
||||||
<search-fields
|
|
||||||
v-if="showMobileMenu"
|
|
||||||
class="m-auto w-auto"
|
|
||||||
v-model:search="search"
|
|
||||||
v-model:location="location"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<li class="m-auto">
|
<li class="m-auto">
|
||||||
<router-link
|
<router-link
|
||||||
:to="{
|
:to="{
|
||||||
|
|
@ -257,13 +250,6 @@
|
||||||
>{{ t("Register") }}</router-link
|
>{{ t("Register") }}</router-link
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<search-fields
|
|
||||||
v-if="!showMobileMenu"
|
|
||||||
class="m-auto w-auto"
|
|
||||||
v-model:search="search"
|
|
||||||
v-model:location="location"
|
|
||||||
/>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -943,7 +943,11 @@ const geoHashLocation = computed(() =>
|
||||||
|
|
||||||
const radius = computed({
|
const radius = computed({
|
||||||
get(): number | null {
|
get(): number | null {
|
||||||
return Number.parseInt(distance.value.slice(0, -3));
|
if (addressName.value) {
|
||||||
|
return Number.parseInt(distance.value.slice(0, -3));
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
set(newRadius: number) {
|
set(newRadius: number) {
|
||||||
distance.value = newRadius.toString() + "_km";
|
distance.value = newRadius.toString() + "_km";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue