Merge branch 'bugs' into 'master'
Allow to search events by online status See merge request framasoft/mobilizon!1098
This commit is contained in:
Thomas Citharel
commit
4f739d8672
@ -39,7 +39,8 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="event-title" :title="event.title">{{ event.title }}</p>
|
||||
<h3 class="event-title" :title="event.title">{{ event.title }}</h3>
|
||||
<div class="content-end">
|
||||
<div class="event-organizer">
|
||||
<figure
|
||||
class="image is-24x24"
|
||||
@ -71,6 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@ -201,12 +203,14 @@ a.card {
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
|
||||
& > .media {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
& > .media-left {
|
||||
margin-top: -15px;
|
||||
@ -222,6 +226,9 @@ a.card {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow-x: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -27,9 +27,9 @@ export default class MultiCard extends Vue {
|
||||
.multi-card-event {
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-column-gap: 30px;
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 30px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
.event-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media mb-3">
|
||||
<div class="media mb-2">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48" v-if="group.avatar">
|
||||
<img class="is-rounded" :src="group.avatar.url" alt="" />
|
||||
@ -24,12 +24,12 @@
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<h3 class="is-size-5 group-title">{{ displayName(group) }}</h3>
|
||||
<span class="is-6 has-text-grey-dark">
|
||||
<span class="is-6 has-text-grey-dark group-federated-username">
|
||||
{{ `@${usernameWithDomain(group)}` }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-html="group.summary" />
|
||||
<div class="content mb-2" v-html="group.summary" />
|
||||
<div class="card-custom-footer">
|
||||
<inline-address
|
||||
class="has-text-grey-dark"
|
||||
@ -37,6 +37,7 @@
|
||||
:physicalAddress="group.physicalAddress"
|
||||
/>
|
||||
<p class="has-text-grey-dark">
|
||||
<b-icon icon="account" />
|
||||
{{
|
||||
$tc(
|
||||
"{count} members or followers",
|
||||
@ -117,13 +118,16 @@ export default class GroupCard extends Vue {
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.group-title {
|
||||
line-height: 1.75rem;
|
||||
line-height: 1.5rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
}
|
||||
.group-federated-username {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,8 +158,6 @@ export const FETCH_EVENTS = gql`
|
||||
url
|
||||
}
|
||||
publishAt
|
||||
# online_address,
|
||||
# phone_address,
|
||||
physicalAddress {
|
||||
...AdressFragment
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import gql from "graphql-tag";
|
||||
import { ACTOR_FRAGMENT } from "./actor";
|
||||
import { ADDRESS_FRAGMENT } from "./address";
|
||||
import { EVENT_OPTIONS_FRAGMENT } from "./event_options";
|
||||
import { TAG_FRAGMENT } from "./tags";
|
||||
|
||||
export const SEARCH_EVENTS_AND_GROUPS = gql`
|
||||
@ -9,9 +10,11 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
|
||||
$radius: Float
|
||||
$tags: String
|
||||
$term: String
|
||||
$type: EventType
|
||||
$beginsOn: DateTime
|
||||
$endsOn: DateTime
|
||||
$page: Int
|
||||
$eventPage: Int
|
||||
$groupPage: Int
|
||||
$limit: Int
|
||||
) {
|
||||
searchEvents(
|
||||
@ -19,9 +22,10 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
|
||||
radius: $radius
|
||||
tags: $tags
|
||||
term: $term
|
||||
type: $type
|
||||
beginsOn: $beginsOn
|
||||
endsOn: $endsOn
|
||||
page: $page
|
||||
page: $eventPage
|
||||
limit: $limit
|
||||
) {
|
||||
total
|
||||
@ -46,6 +50,9 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
|
||||
attributedTo {
|
||||
...ActorFragment
|
||||
}
|
||||
options {
|
||||
...EventOptions
|
||||
}
|
||||
__typename
|
||||
}
|
||||
}
|
||||
@ -53,7 +60,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
|
||||
term: $term
|
||||
location: $location
|
||||
radius: $radius
|
||||
page: $page
|
||||
page: $groupPage
|
||||
limit: $limit
|
||||
) {
|
||||
total
|
||||
@ -75,6 +82,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
|
||||
}
|
||||
}
|
||||
}
|
||||
${EVENT_OPTIONS_FRAGMENT}
|
||||
${TAG_FRAGMENT}
|
||||
${ADDRESS_FRAGMENT}
|
||||
${ACTOR_FRAGMENT}
|
||||
|
||||
@ -1230,5 +1230,7 @@
|
||||
"Clear date filter field": "Clear date filter field",
|
||||
"{count} members or followers": "No members or followers|One member or follower|{count} members or followers",
|
||||
"This profile is from another instance, the informations shown here may be incomplete.": "This profile is from another instance, the informations shown here may be incomplete.",
|
||||
"View full profile": "View full profile"
|
||||
"View full profile": "View full profile",
|
||||
"Any type": "Any type",
|
||||
"In person": "In person"
|
||||
}
|
||||
|
||||
@ -1334,5 +1334,7 @@
|
||||
"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",
|
||||
"This profile is from another instance, the informations shown here may be incomplete.": "Ce profil provient d'une autre instance, les informations montrées ici peuvent être incomplètes.",
|
||||
"View full profile": "Voir le profil complet"
|
||||
"View full profile": "Voir le profil complet",
|
||||
"Any type": "N'importe quel type",
|
||||
"In person": "En personne"
|
||||
}
|
||||
|
||||
@ -31,6 +31,8 @@ export interface IEventParticipantStats {
|
||||
going: number;
|
||||
}
|
||||
|
||||
export type EventType = "IN_PERSON" | "ONLINE" | null;
|
||||
|
||||
interface IEventEditJSON {
|
||||
id?: string;
|
||||
title: string;
|
||||
|
||||
@ -9,31 +9,37 @@
|
||||
<section class="hero is-light" v-else>
|
||||
<div class="hero-body">
|
||||
<form @submit.prevent="submit()">
|
||||
<b-field :label="$t('Key words')" label-for="search" expanded>
|
||||
<b-field
|
||||
class="searchQuery"
|
||||
:label="$t('Key words')"
|
||||
label-for="search"
|
||||
>
|
||||
<b-input
|
||||
icon="magnify"
|
||||
type="search"
|
||||
id="search"
|
||||
size="is-large"
|
||||
expanded
|
||||
v-model="search"
|
||||
:value="search"
|
||||
@input="debouncedUpdateSearchQuery"
|
||||
:placeholder="
|
||||
$t('For instance: London, Taekwondo, Architecture…')
|
||||
"
|
||||
/>
|
||||
</b-field>
|
||||
<b-field grouped group-multiline position="is-right" expanded>
|
||||
<b-field :label="$t('Location')" label-for="location">
|
||||
<address-auto-complete
|
||||
<full-address-auto-complete
|
||||
class="searchLocation"
|
||||
:label="$t('Location')"
|
||||
v-model="location"
|
||||
id="location"
|
||||
ref="aac"
|
||||
:placeholder="$t('For instance: London')"
|
||||
@input="locchange"
|
||||
/>
|
||||
</b-field>
|
||||
<b-field :label="$t('Radius')" label-for="radius">
|
||||
<b-select v-model="radius" id="radius" expanded>
|
||||
<b-field
|
||||
:label="$t('Radius')"
|
||||
label-for="radius"
|
||||
class="searchRadius"
|
||||
>
|
||||
<b-select expanded v-model="radius" id="radius">
|
||||
<option
|
||||
v-for="(radiusOption, index) in radiusOptions"
|
||||
:key="index"
|
||||
@ -43,15 +49,15 @@
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<b-field :label="$t('Date')" label-for="date">
|
||||
<b-field :label="$t('Date')" label-for="date" class="searchDate">
|
||||
<b-select
|
||||
expanded
|
||||
v-model="when"
|
||||
id="date"
|
||||
:disabled="activeTab !== 0"
|
||||
expanded
|
||||
>
|
||||
<option
|
||||
v-for="(option, index) in options"
|
||||
v-for="(option, index) in dateOptions"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
@ -59,6 +65,28 @@
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<b-field
|
||||
expanded
|
||||
:label="$t('Type')"
|
||||
label-for="type"
|
||||
class="searchType"
|
||||
>
|
||||
<b-select
|
||||
expanded
|
||||
v-model="type"
|
||||
id="type"
|
||||
:disabled="activeTab !== 0"
|
||||
>
|
||||
<option :value="null">
|
||||
{{ $t("Any type") }}
|
||||
</option>
|
||||
<option :value="'ONLINE'">
|
||||
{{ $t("Online") }}
|
||||
</option>
|
||||
<option :value="'IN_PERSON'">
|
||||
{{ $t("In person") }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</form>
|
||||
</div>
|
||||
@ -171,16 +199,17 @@ import {
|
||||
import { SearchTabs } from "@/types/enums";
|
||||
import MultiCard from "../components/Event/MultiCard.vue";
|
||||
import { FETCH_EVENTS } from "../graphql/event";
|
||||
import { IEvent } from "../types/event.model";
|
||||
import { EventType, IEvent } from "../types/event.model";
|
||||
import RouteName from "../router/name";
|
||||
import { IAddress, Address } from "../types/address.model";
|
||||
import AddressAutoComplete from "../components/Event/AddressAutoComplete.vue";
|
||||
import FullAddressAutoComplete from "../components/Event/FullAddressAutoComplete.vue";
|
||||
import { SEARCH_EVENTS_AND_GROUPS } from "../graphql/search";
|
||||
import { Paginate } from "../types/paginate";
|
||||
import { IGroup } from "../types/actor";
|
||||
import MultiGroupCard from "../components/Group/MultiGroupCard.vue";
|
||||
import { CONFIG } from "../graphql/config";
|
||||
import { REVERSE_GEOCODE } from "../graphql/address";
|
||||
import debounce from "lodash/debounce";
|
||||
|
||||
interface ISearchTimeOption {
|
||||
label: string;
|
||||
@ -198,12 +227,10 @@ const DEFAULT_ZOOM = 11; // zoom on a city
|
||||
|
||||
const GEOHASH_DEPTH = 9; // put enough accuracy, radius will be used anyway
|
||||
|
||||
const THROTTLE = 2000; // minimum interval in ms between two requests
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
MultiCard,
|
||||
AddressAutoComplete,
|
||||
FullAddressAutoComplete,
|
||||
MultiGroupCard,
|
||||
},
|
||||
apollo: {
|
||||
@ -217,7 +244,7 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
|
||||
};
|
||||
},
|
||||
},
|
||||
search: {
|
||||
searchElements: {
|
||||
query: SEARCH_EVENTS_AND_GROUPS,
|
||||
fetchPolicy: "cache-and-network",
|
||||
variables() {
|
||||
@ -228,15 +255,16 @@ const THROTTLE = 2000; // minimum interval in ms between two requests
|
||||
beginsOn: this.start,
|
||||
endsOn: this.end,
|
||||
radius: this.radius,
|
||||
page: this.eventPage,
|
||||
eventPage: this.eventPage,
|
||||
groupPage: this.groupPage,
|
||||
limit: EVENT_PAGE_LIMIT,
|
||||
type: this.type,
|
||||
};
|
||||
},
|
||||
update(data) {
|
||||
this.searchEvents = data.searchEvents;
|
||||
this.searchGroups = data.searchGroups;
|
||||
},
|
||||
throttle: THROTTLE,
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
@ -261,11 +289,9 @@ export default class Search extends Vue {
|
||||
|
||||
searchGroups: Paginate<IGroup> = { total: 0, elements: [] };
|
||||
|
||||
groupPage = 1;
|
||||
|
||||
location: IAddress = new Address();
|
||||
|
||||
options: Record<string, ISearchTimeOption> = {
|
||||
dateOptions: Record<string, ISearchTimeOption> = {
|
||||
today: {
|
||||
label: this.$t("Today") as string,
|
||||
start: new Date(),
|
||||
@ -315,9 +341,15 @@ export default class Search extends Vue {
|
||||
GROUP_PAGE_LIMIT = GROUP_PAGE_LIMIT;
|
||||
|
||||
$refs!: {
|
||||
aac: AddressAutoComplete;
|
||||
aac: FullAddressAutoComplete;
|
||||
};
|
||||
|
||||
data(): Record<string, unknown> {
|
||||
return {
|
||||
debouncedUpdateSearchQuery: debounce(this.updateSearchQuery, 200),
|
||||
};
|
||||
}
|
||||
|
||||
mounted(): void {
|
||||
this.prepareLocation(this.$route.query.geohash as string);
|
||||
}
|
||||
@ -335,6 +367,10 @@ export default class Search extends Vue {
|
||||
this.$apollo.queries.searchEvents.refetch();
|
||||
}
|
||||
|
||||
updateSearchQuery(searchQuery: string): void {
|
||||
this.search = searchQuery;
|
||||
}
|
||||
|
||||
get eventPage(): number {
|
||||
return parseInt(this.$route.query.eventPage as string, 10) || 1;
|
||||
}
|
||||
@ -346,6 +382,17 @@ export default class Search extends Vue {
|
||||
});
|
||||
}
|
||||
|
||||
get groupPage(): number {
|
||||
return parseInt(this.$route.query.groupPage as string, 10) || 1;
|
||||
}
|
||||
|
||||
set groupPage(page: number) {
|
||||
this.$router.push({
|
||||
name: this.$route.name || RouteName.SEARCH,
|
||||
query: { ...this.$route.query, groupPage: page.toString() },
|
||||
});
|
||||
}
|
||||
|
||||
get search(): string | undefined {
|
||||
return this.$route.query.term as string;
|
||||
}
|
||||
@ -411,6 +458,23 @@ export default class Search extends Vue {
|
||||
});
|
||||
}
|
||||
|
||||
get type(): EventType {
|
||||
return this.$route.query.type as EventType;
|
||||
}
|
||||
|
||||
set type(type: EventType) {
|
||||
const query = { ...this.$route.query, type };
|
||||
if (type == null) {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
delete query.type;
|
||||
}
|
||||
this.$router.replace({
|
||||
name: RouteName.SEARCH,
|
||||
query,
|
||||
});
|
||||
}
|
||||
|
||||
get weekend(): { start: Date; end: Date } {
|
||||
const now = new Date();
|
||||
const endOfWeekDate = endOfWeek(now, { locale: this.$dateFnsLocale });
|
||||
@ -453,22 +517,24 @@ export default class Search extends Vue {
|
||||
if (this.radius === undefined || this.radius === null) {
|
||||
this.radius = DEFAULT_RADIUS;
|
||||
}
|
||||
if (e.geom) {
|
||||
if (e?.geom) {
|
||||
const [lon, lat] = e.geom.split(";");
|
||||
this.geohash = ngeohash.encode(lat, lon, GEOHASH_DEPTH);
|
||||
} else {
|
||||
this.geohash = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
get start(): Date | undefined {
|
||||
if (this.options[this.when]) {
|
||||
return this.options[this.when].start;
|
||||
if (this.dateOptions[this.when]) {
|
||||
return this.dateOptions[this.when].start;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
get end(): Date | undefined | null {
|
||||
if (this.options[this.when]) {
|
||||
return this.options[this.when].end;
|
||||
if (this.dateOptions[this.when]) {
|
||||
return this.dateOptions[this.when].end;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
@ -484,6 +550,7 @@ export default class Search extends Vue {
|
||||
return (
|
||||
this.stringExists(this.search) ||
|
||||
this.stringExists(this.tag) ||
|
||||
this.stringExists(this.type) ||
|
||||
(this.stringExists(this.geohash) && this.valueExists(this.radius)) ||
|
||||
this.valueExists(this.end)
|
||||
);
|
||||
@ -494,13 +561,14 @@ export default class Search extends Vue {
|
||||
return value !== undefined && value !== null;
|
||||
}
|
||||
|
||||
private stringExists(value: string | undefined): boolean {
|
||||
private stringExists(value: string | null | undefined): boolean {
|
||||
return this.valueExists(value) && (value as string).length > 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "~bulma/sass/utilities/mixins.sass";
|
||||
main > .container {
|
||||
background: $white;
|
||||
|
||||
@ -526,19 +594,73 @@ h3.title {
|
||||
}
|
||||
|
||||
form {
|
||||
::v-deep .field label.label {
|
||||
margin-bottom: 0;
|
||||
// ::v-deep .field label.label {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
|
||||
// .field.is-expanded:last-child > .field-body > .field.is-grouped {
|
||||
// flex-wrap: wrap;
|
||||
// flex: 1;
|
||||
// .field {
|
||||
// flex: 1 0 auto;
|
||||
// &:first-child {
|
||||
// flex: 3 0 300px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
display: grid;
|
||||
grid-gap: 0 15px;
|
||||
grid-template-areas: "query" "location" "radius" "date" "type";
|
||||
|
||||
& > * {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.field.is-expanded:last-child > .field-body > .field.is-grouped {
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
.field {
|
||||
flex: 1 0 auto;
|
||||
&:first-child {
|
||||
flex: 3 0 300px;
|
||||
@include tablet {
|
||||
grid-template-columns: max-content max-content max-content auto;
|
||||
grid-template-areas: "query . ." "location . ." "radius date type";
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
grid-template-columns: max-content max-content max-content 1fr 3fr;
|
||||
grid-template-areas: "query . location" "radius date type";
|
||||
}
|
||||
|
||||
.searchQuery {
|
||||
grid-area: query;
|
||||
@include tablet {
|
||||
grid-column: span 4;
|
||||
}
|
||||
@include desktop {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.searchLocation {
|
||||
grid-area: location;
|
||||
:v-deep .column {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@include tablet {
|
||||
grid-column: span 4;
|
||||
}
|
||||
@include desktop {
|
||||
grid-column-start: 4;
|
||||
grid-column-end: 7;
|
||||
}
|
||||
}
|
||||
|
||||
.searchRadius {
|
||||
grid-area: radius;
|
||||
}
|
||||
|
||||
.searchDate {
|
||||
grid-area: date;
|
||||
}
|
||||
|
||||
.searchType {
|
||||
grid-area: type;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,6 +44,15 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
|
||||
end)
|
||||
end
|
||||
|
||||
enum :event_type do
|
||||
value(:in_person,
|
||||
description:
|
||||
"The event will happen in person. It can also be livestreamed, but has a physical address"
|
||||
)
|
||||
|
||||
value(:online, description: "The event will only happen online. It has no physical address")
|
||||
end
|
||||
|
||||
object :search_queries do
|
||||
@desc "Search persons"
|
||||
field :search_persons, :persons do
|
||||
@ -83,6 +92,7 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
|
||||
arg(:term, :string, default_value: "")
|
||||
arg(:tags, :string, description: "A comma-separated string listing the tags")
|
||||
arg(:location, :string, description: "A geohash for coordinates")
|
||||
arg(:type, :event_type, description: "Whether the event is online or in person")
|
||||
|
||||
arg(:radius, :float,
|
||||
default_value: 50,
|
||||
|
||||
@ -506,6 +506,7 @@ defmodule Mobilizon.Events do
|
||||
|> events_for_ends_on(args)
|
||||
|> events_for_tags(args)
|
||||
|> events_for_location(args)
|
||||
|> filter_online(args)
|
||||
|> filter_draft()
|
||||
|> filter_local_or_from_followed_instances_events()
|
||||
|> filter_public_visibility()
|
||||
@ -1307,6 +1308,18 @@ defmodule Mobilizon.Events do
|
||||
|
||||
defp events_for_location(query, _args), do: query
|
||||
|
||||
@spec filter_online(Ecto.Query.t(), map()) :: Ecto.Query.t()
|
||||
defp filter_online(query, %{type: :online}), do: is_online_fragment(query, true)
|
||||
|
||||
defp filter_online(query, %{type: :in_person}), do: is_online_fragment(query, false)
|
||||
|
||||
defp filter_online(query, _), do: query
|
||||
|
||||
@spec is_online_fragment(Ecto.Query.t(), boolean()) :: Ecto.Query.t()
|
||||
defp is_online_fragment(query, value) do
|
||||
where(query, [q], fragment("(?->>'is_online')::bool = ?", q.options, ^value))
|
||||
end
|
||||
|
||||
@spec normalize_search_string(String.t()) :: String.t()
|
||||
defp normalize_search_string(search_string) do
|
||||
search_string
|
||||
|
||||
Loading…
Reference in New Issue
Block a user