Improve some components

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-11-06 10:08:20 +01:00
parent c806beddcd
commit 096c3a435a
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
15 changed files with 299 additions and 225 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<router-link <router-link
class="card" class="card"
:to="{ name: 'Event', params: { uuid: event.uuid } }" :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
> >
<div class="card-image"> <div class="card-image">
<figure class="image is-16by9"> <figure class="image is-16by9">

View File

@ -42,7 +42,7 @@
><br /> ><br />
<small>{{ option.poiInfos.alternativeName }}</small> <small>{{ option.poiInfos.alternativeName }}</small>
</template> </template>
<template slot="empty"> <template #empty>
<span v-if="isFetching">{{ $t("Searching") }}</span> <span v-if="isFetching">{{ $t("Searching") }}</span>
<div v-else-if="queryText.length >= 3" class="is-enabled"> <div v-else-if="queryText.length >= 3" class="is-enabled">
<span>{{ <span>{{
@ -83,7 +83,7 @@
</div> </div>
<div <div
class="map column" class="map column"
v-if="selected && selected.geom && selected.poiInfos" v-if="!hideMap && selected && selected.geom && selected.poiInfos"
> >
<map-leaflet <map-leaflet
:coords="selected.geom" :coords="selected.geom"
@ -96,47 +96,6 @@
:readOnly="false" :readOnly="false"
/> />
</div> </div>
<!-- <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
<!-- <div class="modal-card" style="width: auto">-->
<!-- <header class="modal-card-head">-->
<!-- <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
<!-- </header>-->
<!-- <section class="modal-card-body">-->
<!-- <form>-->
<!-- <b-field :label="$t('Name')">-->
<!-- <b-input aria-required="true" required v-model="selected.description" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Street')">-->
<!-- <b-input v-model="selected.street" />-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Postal Code')">-->
<!-- <b-input v-model="selected.postalCode" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Locality')">-->
<!-- <b-input v-model="selected.locality" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- <b-field grouped>-->
<!-- <b-field :label="$t('Region')">-->
<!-- <b-input v-model="selected.region" />-->
<!-- </b-field>-->
<!-- <b-field :label="$t('Country')">-->
<!-- <b-input v-model="selected.country" />-->
<!-- </b-field>-->
<!-- </b-field>-->
<!-- </form>-->
<!-- </section>-->
<!-- <footer class="modal-card-foot">-->
<!-- <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
<!-- </footer>-->
<!-- </div>-->
<!-- </b-modal>-->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -158,6 +117,7 @@ export default class FullAddressAutoComplete extends Mixins(
@Prop({ required: false, default: "" }) label!: string; @Prop({ required: false, default: "" }) label!: string;
@Prop({ required: false }) userTimezone!: string; @Prop({ required: false }) userTimezone!: string;
@Prop({ required: false, default: false, type: Boolean }) disabled!: boolean; @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
@Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
addressModalActive = false; addressModalActive = false;
@ -175,10 +135,6 @@ export default class FullAddressAutoComplete extends Mixins(
updateEditing(): void { updateEditing(): void {
if (!(this.value && this.value.id)) return; if (!(this.value && this.value.id)) return;
this.selected = this.value; this.selected = this.value;
const address = new Address(this.selected);
if (address.poiInfos) {
this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
}
} }
updateSelected(option: IAddress): void { updateSelected(option: IAddress): void {
@ -212,20 +168,6 @@ export default class FullAddressAutoComplete extends Mixins(
get canShowLocateMeButton(): boolean { get canShowLocateMeButton(): boolean {
return window.isSecureContext; return window.isSecureContext;
} }
@Watch("queryText")
resetAddressOnEmptyField(queryText: string): void {
if (queryText === "" && this.selected?.id) {
console.log("doing reset");
this.resetAddress();
}
}
resetAddress(): void {
this.$emit("input", null);
this.queryText = "";
this.selected = new Address();
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -29,14 +29,7 @@ export default class MultiCard extends Vue {
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-column-gap: 30px; grid-column-gap: 30px;
grid-row-gap: 30px; grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
// @media (min-width: 400px) {
// grid-template-columns: repeat(2, 1fr);
// }
// @media (min-width: 800px) {
// grid-template-columns: repeat(4, 1fr);
// }
.event-card { .event-card {
height: 100%; height: 100%;
display: flex; display: flex;

View File

@ -1,7 +1,21 @@
<template> <template>
<div class="card"> <router-link
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group) },
}"
class="card"
>
<div class="card-image">
<figure class="image is-16by9">
<lazy-image-wrapper
:picture="group.banner"
style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
/>
</figure>
</div>
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media mb-3">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="group.avatar"> <figure class="image is-48x48" v-if="group.avatar">
<img class="is-rounded" :src="group.avatar.url" alt="" /> <img class="is-rounded" :src="group.avatar.url" alt="" />
@ -9,40 +23,101 @@
<b-icon v-else size="is-large" icon="account-group" /> <b-icon v-else size="is-large" icon="account-group" />
</div> </div>
<div class="media-content"> <div class="media-content">
<router-link <h3 class="is-size-5 group-title">{{ displayName(group) }}</h3>
:to="{ <span class="is-6 has-text-grey-dark">
name: RouteName.GROUP, {{ `@${usernameWithDomain(group)}` }}
params: { preferredUsername: usernameWithDomain(group) }, </span>
}" </div>
> </div>
<h3>{{ group.name }}</h3> <div class="content" v-html="group.summary" />
<p class="is-6 has-text-grey"> <div class="card-custom-footer">
<span v-if="group.domain">{{ <span class="has-text-grey-dark">
`@${group.preferredUsername}@${group.domain}` {{
}}</span> $tc(
<span v-else>{{ `@${group.preferredUsername}` }}</span> "{count} members or followers",
</p> group.members.total + group.followers.total,
{
count: group.members.total + group.followers.total,
}
)
}}
</span>
</div>
</div>
</router-link> </router-link>
</div>
</div>
<div class="content">
<p>{{ group.summary }}</p>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { IGroup, usernameWithDomain } from "@/types/actor"; import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
@Component @Component({
components: {
LazyImageWrapper,
},
})
export default class GroupCard extends Vue { export default class GroupCard extends Vue {
@Prop({ required: true }) group!: IGroup; @Prop({ required: true }) group!: IGroup;
RouteName = RouteName; RouteName = RouteName;
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
} }
</script> </script>
<style lang="scss" scoped>
.card {
.card-content {
padding: 0.75rem;
display: flex;
flex-direction: column;
height: 100%;
.content {
flex: 1;
}
::v-deep .content {
& > *:first-child {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0;
* {
font-weight: normal;
text-transform: none;
font-style: normal;
text-decoration: none;
}
}
& > *:not(:first-child) {
display: none;
}
}
.media-left {
margin-right: inherit;
margin-inline-end: 0.5rem;
}
.media-content {
overflow: hidden;
text-overflow: ellipsis;
.group-title {
line-height: 1.75rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: bold;
}
}
}
}
</style>

View File

@ -0,0 +1,39 @@
<template>
<div class="multi-card-group">
<group-card
class="group-card"
v-for="group in groups"
:group="group"
:key="group.id"
/>
</div>
</template>
<script lang="ts">
import { IGroup } from "@/types/actor";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import GroupCard from "./GroupCard.vue";
@Component({
components: {
GroupCard,
},
})
export default class MultiGroupCard extends Vue {
@Prop({ type: Array as PropType<IGroup[]>, required: true })
groups!: IGroup[];
}
</script>
<style lang="scss" scoped>
.multi-card-group {
display: grid;
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.group-card {
height: 100%;
display: flex;
flex-direction: column;
}
}
</style>

View File

@ -466,44 +466,6 @@ export const FETCH_GROUP_EVENTS = gql`
${ADDRESS_FRAGMENT} ${ADDRESS_FRAGMENT}
`; `;
export const CLOSE_EVENTS = gql`
query CloseEvents($location: String, $radius: Float) {
searchEvents(location: $location, radius: $radius, page: 1, limit: 10) {
total
elements {
id
title
uuid
beginsOn
picture {
id
url
}
tags {
...TagFragment
}
options {
...EventOptions
}
physicalAddress {
...AdressFragment
}
attributedTo {
...ActorFragment
}
organizerActor {
...ActorFragment
}
__typename
}
}
}
${ADDRESS_FRAGMENT}
${TAG_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
`;
export const EXPORT_EVENT_PARTICIPATIONS = gql` export const EXPORT_EVENT_PARTICIPATIONS = gql`
mutation ExportEventParticipants( mutation ExportEventParticipants(
$eventId: ID! $eventId: ID!

View File

@ -408,3 +408,19 @@ export const GROUP_TIMELINE = gql`
} }
${ACTOR_FRAGMENT} ${ACTOR_FRAGMENT}
`; `;
export const CLOSE_GROUPS = gql`
query CloseGroups($location: String, $radius: Float) {
searchGroups(location: $location, radius: $radius, page: 1, limit: 10) {
total
elements {
...ActorFragment
physicalAddress {
...AdressFragment
}
}
}
}
${ACTOR_FRAGMENT}
${ADDRESS_FRAGMENT}
`;

View File

@ -105,3 +105,51 @@ export const HOME_USER_QUERIES = gql`
${EVENT_OPTIONS_FRAGMENT} ${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT} ${ACTOR_FRAGMENT}
`; `;
export const CLOSE_CONTENT = gql`
query CloseContent(
$location: String!
$radius: Float
$page: Int
$limit: Int
) {
searchEvents(
location: $location
radius: $radius
page: $page
limit: $limit
) {
total
elements {
id
title
uuid
beginsOn
picture {
id
url
}
tags {
...TagFragment
}
options {
...EventOptions
}
physicalAddress {
...AdressFragment
}
attributedTo {
...ActorFragment
}
organizerActor {
...ActorFragment
}
__typename
}
}
}
${ADDRESS_FRAGMENT}
${TAG_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
`;

View File

@ -1,8 +1,10 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor"; import { ACTOR_FRAGMENT } from "./actor";
import { ADDRESS_FRAGMENT } from "./address";
import { TAG_FRAGMENT } from "./tags";
export const SEARCH_EVENTS = gql` export const SEARCH_EVENTS_AND_GROUPS = gql`
query SearchEvents( query SearchEventsAndGroups(
$location: String $location: String
$radius: Float $radius: Float
$tags: String $tags: String
@ -33,23 +35,20 @@ export const SEARCH_EVENTS = gql`
url url
} }
tags { tags {
slug ...TagFragment
title }
physicalAddress {
...AdressFragment
}
organizerActor {
...ActorFragment
}
attributedTo {
...ActorFragment
} }
__typename __typename
} }
} }
}
`;
export const SEARCH_GROUPS = gql`
query SearchGroups(
$term: String
$location: String
$radius: Float
$page: Int
$limit: Int
) {
searchGroups( searchGroups(
term: $term term: $term
location: $location location: $location
@ -60,9 +59,21 @@ export const SEARCH_GROUPS = gql`
total total
elements { elements {
...ActorFragment ...ActorFragment
banner {
id
url
}
members(roles: "member,moderator,administrator,creator") {
total
}
followers(approved: true) {
total
} }
} }
} }
}
${TAG_FRAGMENT}
${ADDRESS_FRAGMENT}
${ACTOR_FRAGMENT} ${ACTOR_FRAGMENT}
`; `;

View File

@ -1226,5 +1226,7 @@
"Post {eventTitle} reported": "Post {eventTitle} reported", "Post {eventTitle} reported": "Post {eventTitle} reported",
"You have attended {count} events in the past.": "You have not attended any events in the past.|You have attended one event in the past.|You have attended {count} events in the past.", "You have attended {count} events in the past.": "You have not attended any events in the past.|You have attended one event in the past.|You have attended {count} events in the past.",
"Showing events starting on": "Showing events starting on", "Showing events starting on": "Showing events starting on",
"Showing events before": "Showing events before" "Showing events before": "Showing events before",
"Clear date filter field": "Clear date filter field",
"{count} members or followers": "No members or followers|One member or follower|{count} members or followers"
} }

View File

@ -1330,5 +1330,7 @@
"Post {eventTitle} reported": "Billet {eventTitle} signalé", "Post {eventTitle} reported": "Billet {eventTitle} signalé",
"You have attended {count} events in the past.": "Vous n'avez participé à aucun événement par le passé.|Vous avez participé à un événement par le passé.|Vous avez participé à {count} événements par le passé.", "You have attended {count} events in the past.": "Vous n'avez participé à aucun événement par le passé.|Vous avez participé à un événement par le passé.|Vous avez participé à {count} événements par le passé.",
"Showing events starting on": "Afficher les événements à partir de", "Showing events starting on": "Afficher les événements à partir de",
"Showing events before": "Afficher les événements avant" "Showing events before": "Afficher les événements avant",
"Clear date filter field": "Vider le champ de filtre de la date",
"{count} members or followers": "Aucun⋅e membre ou abonné⋅e|Un⋅e membre ou abonné⋅e|{count} membres ou abonné⋅es"
} }

View File

@ -1,4 +1,3 @@
import { mixins } from "vue-class-component";
import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { LatLng } from "leaflet"; import { LatLng } from "leaflet";
import { Address, IAddress } from "../types/address.model"; import { Address, IAddress } from "../types/address.model";
@ -7,6 +6,7 @@ import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model"; import { IConfig } from "../types/config.model";
import debounce from "lodash/debounce"; import debounce from "lodash/debounce";
import { DebouncedFunc } from "lodash"; import { DebouncedFunc } from "lodash";
import { PropType } from "vue";
@Component({ @Component({
components: { components: {
@ -17,8 +17,9 @@ import { DebouncedFunc } from "lodash";
config: CONFIG, config: CONFIG,
}, },
}) })
export default class AddressAutoCompleteMixin extends mixins(Vue) { export default class AddressAutoCompleteMixin extends Vue {
@Prop({ required: true }) value!: IAddress; @Prop({ required: true, type: Object as PropType<IAddress> })
value!: IAddress;
gettingLocationError: string | null = null; gettingLocationError: string | null = null;
gettingLocation = false; gettingLocation = false;
@ -29,8 +30,6 @@ export default class AddressAutoCompleteMixin extends mixins(Vue) {
selected: IAddress = new Address(); selected: IAddress = new Address();
queryText: string = (this.value && new Address(this.value).fullName) || "";
config!: IConfig; config!: IConfig;
isFetching = false; isFetching = false;
@ -85,6 +84,22 @@ export default class AddressAutoCompleteMixin extends mixins(Vue) {
this.isFetching = false; this.isFetching = false;
} }
get queryText(): string {
return (this.value && new Address(this.value).fullName) || "";
}
set queryText(text: string) {
if (text === "" && this.selected?.id) {
console.log("doing reset");
this.resetAddress();
}
}
resetAddress(): void {
this.$emit("input", null);
this.selected = new Address();
}
async locateMe(): Promise<void> { async locateMe(): Promise<void> {
this.gettingLocation = true; this.gettingLocation = true;
this.gettingLocationError = null; this.gettingLocationError = null;
@ -124,7 +139,6 @@ export default class AddressAutoCompleteMixin extends mixins(Vue) {
const defaultAddress = new Address(this.addressData[0]); const defaultAddress = new Address(this.addressData[0]);
this.selected = defaultAddress; this.selected = defaultAddress;
this.$emit("input", this.selected); this.$emit("input", this.selected);
this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
} }
} }

View File

@ -153,8 +153,8 @@
<full-address-auto-complete <full-address-auto-complete
:label="$t('Group address')" :label="$t('Group address')"
v-model="editableGroup.physicalAddress" v-model="currentAddress"
:value="currentAddress" :hideMap="true"
/> />
<div class="buttons"> <div class="buttons">
@ -184,7 +184,7 @@ import { mixins } from "vue-class-component";
import GroupMixin from "@/mixins/group"; import GroupMixin from "@/mixins/group";
import { GroupVisibility, Openness } from "@/types/enums"; import { GroupVisibility, Openness } from "@/types/enums";
import { UPDATE_GROUP } from "../../graphql/group"; import { UPDATE_GROUP } from "../../graphql/group";
import { IGroup, usernameWithDomain } from "../../types/actor"; import { Group, IGroup, usernameWithDomain } from "../../types/actor";
import { Address, IAddress } from "../../types/address.model"; import { Address, IAddress } from "../../types/address.model";
import { CONFIG } from "@/graphql/config"; import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model"; import { IConfig } from "@/types/config.model";
@ -209,14 +209,10 @@ import { buildFileFromIMedia } from "@/utils/image";
}, },
}) })
export default class GroupSettings extends mixins(GroupMixin) { export default class GroupSettings extends mixins(GroupMixin) {
loading = true;
RouteName = RouteName; RouteName = RouteName;
config!: IConfig; config!: IConfig;
newMemberUsername = "";
errors: string[] = []; errors: string[] = [];
avatarFile: File | null = null; avatarFile: File | null = null;
@ -231,12 +227,11 @@ export default class GroupSettings extends mixins(GroupMixin) {
showCopiedTooltip = false; showCopiedTooltip = false;
editableGroup!: IGroup; editableGroup: IGroup = new Group();
async updateGroup(): Promise<void> { async updateGroup(): Promise<void> {
try { try {
const variables = this.buildVariables(); const variables = this.buildVariables();
console.log(variables);
await this.$apollo.mutate<{ updateGroup: IGroup }>({ await this.$apollo.mutate<{ updateGroup: IGroup }>({
mutation: UPDATE_GROUP, mutation: UPDATE_GROUP,
variables, variables,
@ -275,14 +270,23 @@ export default class GroupSettings extends mixins(GroupMixin) {
let avatarObj = {}; let avatarObj = {};
let bannerObj = {}; let bannerObj = {};
const variables = { ...this.editableGroup }; const variables = { ...this.editableGroup };
const physicalAddress = { let physicalAddress;
...variables.physicalAddress, if (variables.physicalAddress) {
}; physicalAddress = { ...variables.physicalAddress };
} else {
physicalAddress = variables.physicalAddress;
}
// eslint-disable-next-line
// @ts-ignore
if (variables.__typename) {
// eslint-disable-next-line // eslint-disable-next-line
// @ts-ignore // @ts-ignore
delete variables.__typename; delete variables.__typename;
if (physicalAddress) { }
// eslint-disable-next-line
// @ts-ignore
if (physicalAddress && physicalAddress.__typename) {
// eslint-disable-next-line // eslint-disable-next-line
// @ts-ignore // @ts-ignore
delete physicalAddress.__typename; delete physicalAddress.__typename;
@ -335,6 +339,10 @@ export default class GroupSettings extends mixins(GroupMixin) {
return new Address(this.editableGroup.physicalAddress); return new Address(this.editableGroup.physicalAddress);
} }
set currentAddress(address: IAddress) {
this.editableGroup.physicalAddress = address;
}
get avatarMaxSize(): number | undefined { get avatarMaxSize(): number | undefined {
return this?.config?.uploadLimits?.avatar; return this?.config?.uploadLimits?.avatar;
} }

View File

@ -328,7 +328,7 @@ import { EventSortField, ParticipantRole, SortDirection } from "@/types/enums";
import { Paginate } from "@/types/paginate"; import { Paginate } from "@/types/paginate";
import { supportsWebPFormat } from "@/utils/support"; import { supportsWebPFormat } from "@/utils/support";
import { IParticipant, Participant } from "../types/participant.model"; import { IParticipant, Participant } from "../types/participant.model";
import { CLOSE_EVENTS, FETCH_EVENTS } from "../graphql/event"; import { FETCH_EVENTS } from "../graphql/event";
import EventParticipationCard from "../components/Event/EventParticipationCard.vue"; import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
import MultiCard from "../components/Event/MultiCard.vue"; import MultiCard from "../components/Event/MultiCard.vue";
import { CURRENT_ACTOR_CLIENT } from "../graphql/actor"; import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
@ -339,7 +339,7 @@ import {
IUserSettings, IUserSettings,
} from "../types/current-user.model"; } from "../types/current-user.model";
import { CURRENT_USER_CLIENT } from "../graphql/user"; import { CURRENT_USER_CLIENT } from "../graphql/user";
import { HOME_USER_QUERIES } from "../graphql/home"; import { CLOSE_CONTENT, HOME_USER_QUERIES } from "../graphql/home";
import RouteName from "../router/name"; import RouteName from "../router/name";
import { IEvent } from "../types/event.model"; import { IEvent } from "../types/event.model";
import DateComponent from "../components/Event/DateCalendarIcon.vue"; import DateComponent from "../components/Event/DateCalendarIcon.vue";
@ -363,15 +363,17 @@ import Subtitle from "../components/Utils/Subtitle.vue";
}, },
currentUser: CURRENT_USER_CLIENT, currentUser: CURRENT_USER_CLIENT,
config: CONFIG, config: CONFIG,
closeEvents: { closeContent: {
query: CLOSE_EVENTS, query: CLOSE_CONTENT,
variables() { variables() {
return { return {
location: this.loggedUser?.settings?.location?.geohash, location: this.loggedUser?.settings?.location?.geohash,
radius: this.loggedUser?.settings?.location?.range, radius: this.loggedUser?.settings?.location?.range,
}; };
}, },
update: (data) => data.searchEvents, update(data) {
this.closeEvents = data.searchEvents;
},
skip() { skip() {
return ( return (
!this.currentUser?.isLoggedIn || !this.currentUser?.isLoggedIn ||

View File

@ -70,15 +70,7 @@
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<h2 class="title">{{ $t("Featured events") }}</h2> <h2 class="title">{{ $t("Featured events") }}</h2>
<div v-if="events.elements.length > 0"> <div v-if="events.elements.length > 0">
<div class="columns is-multiline"> <multi-card :events="events.elements" />
<div
class="column is-one-third-desktop"
v-for="event in events.elements"
:key="event.uuid"
>
<EventCard :event="event" />
</div>
</div>
<div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT"> <div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
<b-pagination <b-pagination
:total="events.total" :total="events.total"
@ -98,7 +90,7 @@
>{{ $t("No events found") }}</b-message >{{ $t("No events found") }}</b-message
> >
</section> </section>
<b-tabs v-else v-model="activeTab" type="is-boxed" class="searchTabs"> <b-tabs v-else v-model="activeTab" type="is-boxed" class="mt-3 searchTabs">
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<b-tab-item> <b-tab-item>
<template slot="header"> <template slot="header">
@ -109,15 +101,7 @@
</span> </span>
</template> </template>
<div v-if="searchEvents.total > 0"> <div v-if="searchEvents.total > 0">
<div class="columns is-multiline"> <multi-card class="my-4" :events="searchEvents.elements" />
<div
class="column is-one-third-desktop"
v-for="event in searchEvents.elements"
:key="event.uuid"
>
<EventCard :event="event" />
</div>
</div>
<div class="pagination" v-if="searchEvents.total > EVENT_PAGE_LIMIT"> <div class="pagination" v-if="searchEvents.total > EVENT_PAGE_LIMIT">
<b-pagination <b-pagination
:total="searchEvents.total" :total="searchEvents.total"
@ -146,15 +130,7 @@
{{ $t("Groups are not enabled on this instance.") }} {{ $t("Groups are not enabled on this instance.") }}
</b-message> </b-message>
<div v-else-if="searchGroups.total > 0"> <div v-else-if="searchGroups.total > 0">
<div class="columns is-multiline"> <multi-group-card class="my-4" :groups="searchGroups.elements" />
<div
class="column is-one-third-desktop"
v-for="group in searchGroups.elements"
:key="group.uuid"
>
<group-card :group="group" />
</div>
</div>
<div class="pagination"> <div class="pagination">
<b-pagination <b-pagination
:total="searchGroups.total" :total="searchGroups.total"
@ -193,16 +169,16 @@ import {
eachWeekendOfInterval, eachWeekendOfInterval,
} from "date-fns"; } from "date-fns";
import { SearchTabs } from "@/types/enums"; import { SearchTabs } from "@/types/enums";
import EventCard from "../components/Event/EventCard.vue"; import MultiCard from "../components/Event/MultiCard.vue";
import { FETCH_EVENTS } from "../graphql/event"; import { FETCH_EVENTS } from "../graphql/event";
import { IEvent } from "../types/event.model"; import { IEvent } from "../types/event.model";
import RouteName from "../router/name"; import RouteName from "../router/name";
import { IAddress, Address } from "../types/address.model"; import { IAddress, Address } from "../types/address.model";
import AddressAutoComplete from "../components/Event/AddressAutoComplete.vue"; import AddressAutoComplete from "../components/Event/AddressAutoComplete.vue";
import { SEARCH_EVENTS, SEARCH_GROUPS } from "../graphql/search"; import { SEARCH_EVENTS_AND_GROUPS } from "../graphql/search";
import { Paginate } from "../types/paginate"; import { Paginate } from "../types/paginate";
import { IGroup } from "../types/actor"; import { IGroup } from "../types/actor";
import GroupCard from "../components/Group/GroupCard.vue"; import MultiGroupCard from "../components/Group/MultiGroupCard.vue";
import { CONFIG } from "../graphql/config"; import { CONFIG } from "../graphql/config";
import { REVERSE_GEOCODE } from "../graphql/address"; import { REVERSE_GEOCODE } from "../graphql/address";
@ -226,9 +202,9 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
@Component({ @Component({
components: { components: {
EventCard, MultiCard,
AddressAutoComplete, AddressAutoComplete,
GroupCard, MultiGroupCard,
}, },
apollo: { apollo: {
config: CONFIG, config: CONFIG,
@ -241,8 +217,8 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
}; };
}, },
}, },
searchEvents: { search: {
query: SEARCH_EVENTS, query: SEARCH_EVENTS_AND_GROUPS,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
@ -256,27 +232,11 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
limit: EVENT_PAGE_LIMIT, limit: EVENT_PAGE_LIMIT,
}; };
}, },
throttle: THROTTLE, update(data) {
skip() { this.searchEvents = data.searchEvents;
return !this.canSearchEvents; this.searchGroups = data.searchGroups;
},
},
searchGroups: {
query: SEARCH_GROUPS,
fetchPolicy: "cache-and-network",
variables() {
return {
term: this.search,
location: this.geohash,
radius: this.radius,
page: this.groupPage,
limit: GROUP_PAGE_LIMIT,
};
}, },
throttle: THROTTLE, throttle: THROTTLE,
skip() {
return !this.canSearchGroups;
},
}, },
}, },
metaInfo() { metaInfo() {