Improve some components
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
c806beddcd
commit
096c3a435a
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
}"
|
|
||||||
>
|
|
||||||
<h3>{{ group.name }}</h3>
|
|
||||||
<p class="is-6 has-text-grey">
|
|
||||||
<span v-if="group.domain">{{
|
|
||||||
`@${group.preferredUsername}@${group.domain}`
|
|
||||||
}}</span>
|
|
||||||
<span v-else>{{ `@${group.preferredUsername}` }}</span>
|
|
||||||
</p>
|
|
||||||
</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content" v-html="group.summary" />
|
||||||
<p>{{ group.summary }}</p>
|
<div class="card-custom-footer">
|
||||||
|
<span class="has-text-grey-dark">
|
||||||
|
{{
|
||||||
|
$tc(
|
||||||
|
"{count} members or followers",
|
||||||
|
group.members.total + group.followers.total,
|
||||||
|
{
|
||||||
|
count: group.members.total + group.followers.total,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</router-link>
|
||||||
</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>
|
||||||
|
|
39
js/src/components/Group/MultiGroupCard.vue
Normal file
39
js/src/components/Group/MultiGroupCard.vue
Normal 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>
|
|
@ -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!
|
||||||
|
|
|
@ -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}
|
||||||
|
`;
|
||||||
|
|
|
@ -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}
|
||||||
|
`;
|
||||||
|
|
|
@ -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}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
// eslint-disable-next-line
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
delete variables.__typename;
|
if (variables.__typename) {
|
||||||
if (physicalAddress) {
|
// eslint-disable-next-line
|
||||||
|
// @ts-ignore
|
||||||
|
delete variables.__typename;
|
||||||
|
}
|
||||||
|
// 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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 ||
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue