merge-upstream-5.0.1 #66
|
|
@ -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
|
||||
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">
|
||||
<router-link
|
||||
:to="{
|
||||
|
|
@ -257,13 +250,6 @@
|
|||
>{{ t("Register") }}</router-link
|
||||
>
|
||||
</li>
|
||||
|
||||
<search-fields
|
||||
v-if="!showMobileMenu"
|
||||
class="m-auto w-auto"
|
||||
v-model:search="search"
|
||||
v-model:location="location"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -943,7 +943,11 @@ const geoHashLocation = computed(() =>
|
|||
|
||||
const radius = computed({
|
||||
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) {
|
||||
distance.value = newRadius.toString() + "_km";
|
||||
|
|
|
|||
Loading…
Reference in a new issue