Merge branch 'follow-groups' into 'master'

Group follows

Closes #512

See merge request framasoft/mobilizon!1092
This commit is contained in:
Thomas Citharel 2021-11-03 09:41:49 +00:00
commit 3dc1707e01
118 changed files with 4904 additions and 3485 deletions

View file

@ -4,6 +4,9 @@ FROM node:16-alpine as assets
RUN apk add --no-cache python3 build-base libwebp-tools bash imagemagick ncurses RUN apk add --no-cache python3 build-base libwebp-tools bash imagemagick ncurses
WORKDIR /build WORKDIR /build
COPY js . COPY js .
ENV CYPRESS_INSTALL_BINARY 0
RUN yarn install \ RUN yarn install \
&& yarn run build && yarn run build

View file

@ -5,79 +5,41 @@
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "ActionLogObject", "name": "ActionLogObject",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Comment" },
"name": "Comment" { "name": "Event" },
}, { "name": "Group" },
{ { "name": "Person" },
"name": "Event" { "name": "Report" },
}, { "name": "ReportNote" },
{ { "name": "User" }
"name": "Person"
},
{
"name": "Report"
},
{
"name": "ReportNote"
},
{
"name": "User"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "ActivityObject", "name": "ActivityObject",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Comment" },
"name": "Comment" { "name": "Discussion" },
}, { "name": "Event" },
{ { "name": "Group" },
"name": "Discussion" { "name": "Member" },
}, { "name": "Post" },
{ { "name": "Resource" }
"name": "Event"
},
{
"name": "Group"
},
{
"name": "Member"
},
{
"name": "Post"
},
{
"name": "Resource"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "Actor", "name": "Actor",
"possibleTypes": [ "possibleTypes": [
{ { "name": "Application" },
"name": "Person" { "name": "Group" },
}, { "name": "Person" }
{
"name": "Group"
},
{
"name": "Application"
}
] ]
}, },
{ {
"kind": "INTERFACE", "kind": "INTERFACE",
"name": "Interactable", "name": "Interactable",
"possibleTypes": [ "possibleTypes": [{ "name": "Event" }, { "name": "Group" }]
{
"name": "Event"
},
{
"name": "Group"
}
]
} }
] ]
} }

View file

@ -76,18 +76,19 @@
"@types/prosemirror-view": "^1.11.4", "@types/prosemirror-view": "^1.11.4",
"@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0", "@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~5.0.0-beta.5", "@vue/cli-plugin-babel": "~5.0.0-beta.7",
"@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.5", "@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.7",
"@vue/cli-plugin-eslint": "~5.0.0-beta.5", "@vue/cli-plugin-eslint": "~5.0.0-beta.7",
"@vue/cli-plugin-pwa": "~5.0.0-beta.5", "@vue/cli-plugin-pwa": "~5.0.0-beta.7",
"@vue/cli-plugin-router": "~5.0.0-beta.5", "@vue/cli-plugin-router": "~5.0.0-beta.7",
"@vue/cli-plugin-typescript": "~5.0.0-beta.5", "@vue/cli-plugin-typescript": "~5.0.0-beta.7",
"@vue/cli-plugin-unit-jest": "~5.0.0-beta.5", "@vue/cli-plugin-unit-jest": "~5.0.0-beta.7",
"@vue/cli-service": "~5.0.0-beta.5", "@vue/cli-service": "~5.0.0-beta.7",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0", "@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^1.1.0", "@vue/test-utils": "^1.1.0",
"@vue/vue2-jest": "^27.0.0-alpha.2", "@vue/vue2-jest": "^27.0.0-alpha.2",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"cypress": "^8.3.0", "cypress": "^8.3.0",
"eslint": "^7.20.0", "eslint": "^7.20.0",
"eslint-plugin-cypress": "^2.10.3", "eslint-plugin-cypress": "^2.10.3",

View file

@ -157,3 +157,10 @@ p {
background-color: whitesmoke; background-color: whitesmoke;
color: #0a0a0a; color: #0a0a0a;
} }
/**
* Bulma/Buefy fixes
*/
.icon {
vertical-align: middle;
}

View file

@ -12,18 +12,17 @@
</docs> </docs>
<template> <template>
<time <div
class="datetime-container" class="datetime-container"
:class="{ small }" :class="{ small }"
:datetime="dateObj.getUTCSeconds()"
:style="`--small: ${smallStyle}`" :style="`--small: ${smallStyle}`"
> >
<div class="datetime-container-header" /> <div class="datetime-container-header" />
<div class="datetime-container-content"> <div class="datetime-container-content">
<span class="day">{{ day }}</span> <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
<span class="month">{{ month }}</span> <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
</div>
</div> </div>
</time>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
@ -54,7 +53,7 @@ export default class DateCalendarIcon extends Vue {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
time.datetime-container { div.datetime-container {
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -76,7 +75,7 @@ time.datetime-container {
height: calc(30px * var(--small)); height: calc(30px * var(--small));
} }
span { time {
display: block; display: block;
font-weight: 600; font-weight: 600;
color: $violet-3; color: $violet-3;

View file

@ -0,0 +1,36 @@
<template>
<div
:title="
isDescriptionDifferentFromLocality
? `${physicalAddress.description}, ${physicalAddress.locality}`
: physicalAddress.description
"
>
<b-icon icon="map-marker" />
<span v-if="isDescriptionDifferentFromLocality">
{{ physicalAddress.description }},
{{ physicalAddress.locality }}
</span>
<span v-else>
{{ physicalAddress.description }}
</span>
</div>
</template>
<script lang="ts">
import { IAddress } from "@/types/address.model";
import { PropType } from "vue";
import { Prop, Vue, Component } from "vue-property-decorator";
@Component
export default class EventAddress extends Vue {
@Prop({ required: true, type: Object as PropType<IAddress> })
physicalAddress!: IAddress;
get isDescriptionDifferentFromLocality(): boolean {
return (
this.physicalAddress?.description !== this.physicalAddress?.locality &&
this.physicalAddress?.description !== undefined
);
}
}
</script>

View file

@ -40,78 +40,60 @@
</div> </div>
<div class="media-content"> <div class="media-content">
<p class="event-title" :title="event.title">{{ event.title }}</p> <p class="event-title" :title="event.title">{{ event.title }}</p>
<div class="event-organizer">
<figure
class="image is-24x24"
v-if="organizer(event) && organizer(event).avatar"
>
<img
class="is-rounded"
:src="organizer(event).avatar.url"
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
</div>
<event-address
v-if="event.physicalAddress"
class="event-subtitle"
:physical-address="event.physicalAddress"
/>
<div <div
class="event-subtitle" class="event-subtitle"
v-if="event.physicalAddress" v-else-if="event.options && event.options.isOnline"
:title="
isDescriptionDifferentFromLocality
? `${event.physicalAddress.description}, ${event.physicalAddress.locality}`
: event.physicalAddress.description
"
> >
<!-- <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>--> <b-icon icon="video" />
<span v-if="isDescriptionDifferentFromLocality"> <span>{{ $t("Online") }}</span>
{{ event.physicalAddress.description }},
{{ event.physicalAddress.locality }}
</span>
<span v-else>
{{ event.physicalAddress.description }}
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="date-and-title">-->
<!-- <div class="date-component">-->
<!-- <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
<!-- </div>-->
<!-- <div class="title-wrapper">-->
<!-- <h4>{{ event.title }}</h4>-->
<!-- <div class="organizer-place-wrapper has-text-grey">-->
<!-- <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
<!-- ·-->
<!-- <span v-if="event.physicalAddress">-->
<!-- {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-if="!mergedOptions.hideDetails" class="details">-->
<!-- <div v-if="event.participants.length > 0 &&-->
<!-- mergedOptions.loggedPerson &&-->
<!-- event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
<!-- <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
<!-- </div>-->
<!-- <div v-else-if="event.participants.length === 1">-->
<!-- <translate-->
<!-- :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
<!-- >{name} organizes this event</translate>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
<!-- {{ participant.actor.preferredUsername }}-->
<!-- <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
<!-- &lt;!&ndash; <translate-->
<!-- :translate-params="{name: participant.actor.preferredUsername}"-->
<!-- >&nbsp;{name} is in,</translate>&ndash;&gt;-->
<!-- </span>-->
<!-- </div>-->
</router-link> </router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
import { IEvent, IEventCardOptions } from "@/types/event.model"; import {
IEvent,
IEventCardOptions,
organizerDisplayName,
organizer,
} from "@/types/event.model";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue"; import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import { Actor, Person } from "@/types/actor"; import { Actor, Person } from "@/types/actor";
import { EventStatus, ParticipantRole } from "@/types/enums"; import { EventStatus, ParticipantRole } from "@/types/enums";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import EventAddress from "@/components/Event/EventAddress.vue";
@Component({ @Component({
components: { components: {
DateCalendarIcon, DateCalendarIcon,
LazyImageWrapper, LazyImageWrapper,
EventAddress,
}, },
}) })
export default class EventCard extends Vue { export default class EventCard extends Vue {
@ -125,6 +107,10 @@ export default class EventCard extends Vue {
RouteName = RouteName; RouteName = RouteName;
organizerDisplayName = organizerDisplayName;
organizer = organizer;
defaultOptions: IEventCardOptions = { defaultOptions: IEventCardOptions = {
hideDate: false, hideDate: false,
loggedPerson: false, loggedPerson: false,
@ -143,18 +129,12 @@ export default class EventCard extends Vue {
this.event.organizerActor || this.mergedOptions.organizerActor this.event.organizerActor || this.mergedOptions.organizerActor
); );
} }
get isDescriptionDifferentFromLocality(): boolean {
return (
this.event?.physicalAddress?.description !==
this.event?.physicalAddress?.locality &&
this.event?.physicalAddress?.description !== undefined
);
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_event-card";
a.card { a.card {
display: block; display: block;
background: $secondary; background: $secondary;
@ -236,35 +216,31 @@ a.card {
margin-bottom: 15px; margin-bottom: 15px;
margin-left: 0rem; margin-left: 0rem;
} }
& > .media-content {
flex: 1;
width: 100%;
overflow-x: inherit;
}
} }
.event-title { .event-title {
font-size: 1.2rem; font-size: 18px;
line-height: 1.25rem; line-height: 24px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
min-height: 2.4rem; padding-bottom: 8px;
font-weight: bold; font-weight: bold;
} }
.event-subtitle { .event-subtitle {
font-size: 0.85rem; font-size: 0.85rem;
display: inline-flex;
flex-wrap: wrap;
color: #3c376e;
span {
width: 14rem;
display: block;
overflow: hidden;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
} }
.organizer-name {
font-size: 14px;
} }
} }
} }

View file

@ -14,9 +14,9 @@
/> />
</span> </span>
<b-icon v-else-if="icon" :icon="icon" size="is-medium" /> <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
<p :class="{ 'padding-left': icon }"> <div class="content-wrapper" :class="{ 'padding-left': icon }">
<slot></slot> <slot></slot>
</p> </div>
</div> </div>
</div> </div>
</template> </template>
@ -42,7 +42,7 @@ div.eventMetadataBlock {
align-items: center; align-items: center;
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
p { .content-wrapper {
overflow: hidden; overflow: hidden;
&.padding-left { &.padding-left {

View file

@ -3,17 +3,55 @@
class="event-minimalist-card-wrapper" class="event-minimalist-card-wrapper"
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }" :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
> >
<date-calendar-icon <div class="event-preview mr-0 ml-0">
class="calendar-icon" <div>
:date="event.beginsOn" <div class="date-component">
:small="true" <date-calendar-icon :date="event.beginsOn" :small="true" />
</div>
<lazy-image-wrapper
:picture="event.picture"
:rounded="true"
style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
/> />
<div class="title-info-wrapper"> </div>
<p class="event-minimalist-title">{{ event.title }}</p> </div>
<p v-if="event.physicalAddress" class="has-text-grey"> <div class="title-info-wrapper has-text-grey-dark">
{{ event.physicalAddress.description }} <h3 class="event-minimalist-title">
</p> <b-tag
<p v-else> class="mr-2"
type="is-warning"
size="is-medium"
v-if="event.draft"
>{{ $t("Draft") }}</b-tag
>
{{ event.title }}
</h3>
<event-address
v-if="event.physicalAddress"
class="event-subtitle"
:physical-address="event.physicalAddress"
/>
<div
class="event-subtitle"
v-else-if="event.options && event.options.isOnline"
>
<b-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
<div class="event-subtitle event-organizer" v-if="showOrganizer">
<figure
class="image is-24x24"
v-if="organizer(event) && organizer(event).avatar"
>
<img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
</div>
<p class="participant-metadata">
<b-icon icon="account-multiple" />
<span v-if="event.options.maximumAttendeeCapacity !== 0"> <span v-if="event.options.maximumAttendeeCapacity !== 0">
{{ {{
$tc( $tc(
@ -64,30 +102,65 @@
</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 { IEvent } from "@/types/event.model"; import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { ParticipantRole } from "@/types/enums"; import { ParticipantRole } from "@/types/enums";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import EventAddress from "@/components/Event/EventAddress.vue";
@Component({ @Component({
components: { components: {
DateCalendarIcon, DateCalendarIcon,
LazyImageWrapper,
EventAddress,
}, },
}) })
export default class EventMinimalistCard extends Vue { export default class EventMinimalistCard extends Vue {
@Prop({ required: true, type: Object }) event!: IEvent; @Prop({ required: true, type: Object }) event!: IEvent;
@Prop({ required: false, type: Boolean, default: false })
showOrganizer!: boolean;
RouteName = RouteName; RouteName = RouteName;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
organizerDisplayName = organizerDisplayName;
organizer = organizer;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass";
@import "@/variables.scss";
.event-minimalist-card-wrapper { .event-minimalist-card-wrapper {
display: flex; display: grid;
width: 100%; grid-gap: 5px 10px;
grid-template-areas: "preview" "body";
color: initial; color: initial;
align-items: flex-start;
@include desktop {
grid-template-columns: 200px 3fr;
grid-template-areas: "preview body";
}
.event-preview {
& > div {
position: relative;
height: 120px;
width: 100%;
div.date-component {
display: flex;
position: absolute;
bottom: 5px;
left: 5px;
z-index: 1;
}
}
}
.calendar-icon { .calendar-icon {
margin-right: 1rem; margin-right: 1rem;
@ -97,11 +170,19 @@ export default class EventMinimalistCard extends Vue {
flex: 2; flex: 2;
.event-minimalist-title { .event-minimalist-title {
color: #3c376e; padding-bottom: 5px;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, font-size: 18px;
serif; line-height: 24px;
font-size: 1.25rem; display: -webkit-box;
font-weight: 700; -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: bold;
color: $title-color;
}
::v-deep .icon {
vertical-align: middle;
} }
} }
} }

View file

@ -1,5 +1,5 @@
<template> <template>
<article class="box"> <article class="box mb-5 mt-4">
<div class="identity-header"> <div class="identity-header">
<figure class="image is-24x24" v-if="participation.actor.avatar"> <figure class="image is-24x24" v-if="participation.actor.avatar">
<img <img
@ -10,16 +10,39 @@
width="24" width="24"
/> />
</figure> </figure>
<b-icon v-else icon="account-circle" />
{{ displayNameAndUsername(participation.actor) }} {{ displayNameAndUsername(participation.actor) }}
</div> </div>
<div class="list-card"> <div class="list-card">
<div class="content-and-actions">
<div class="event-preview mr-0 ml-0">
<div>
<div class="date-component"> <div class="date-component">
<date-calendar-icon <date-calendar-icon
:date="participation.event.beginsOn" :date="participation.event.beginsOn"
:small="true" :small="true"
/> />
</div> </div>
<div class="content-and-actions"> <router-link
:to="{
name: RouteName.EVENT,
params: { uuid: participation.event.uuid },
}"
>
<lazy-image-wrapper
:rounded="true"
:picture="participation.event.picture"
style="
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
"
/>
</router-link>
</div>
</div>
<div class="list-card-content"> <div class="list-card-content">
<div class="title-wrapper"> <div class="title-wrapper">
<router-link <router-link
@ -31,59 +54,61 @@
<h3 class="title">{{ participation.event.title }}</h3> <h3 class="title">{{ participation.event.title }}</h3>
</router-link> </router-link>
</div> </div>
<div class="participation-actor"> <event-address
<span> v-if="participation.event.physicalAddress"
<b-icon class="event-subtitle"
icon="earth" :physical-address="participation.event.physicalAddress"
v-if="participation.event.visibility === EventVisibility.PUBLIC"
/> />
<b-icon <div
icon="link" class="event-subtitle"
v-else-if=" v-else-if="
participation.event.visibility === EventVisibility.UNLISTED participation.event.options &&
participation.event.options.isOnline
" "
/>
<b-icon
icon="lock"
v-else-if="
participation.event.visibility === EventVisibility.PRIVATE
"
/>
</span>
<span
v-if="
participation.event.physicalAddress &&
participation.event.physicalAddress.locality
"
>{{ participation.event.physicalAddress.locality }} -</span
> >
<i18n <b-icon icon="video" />
tag="span" <span>{{ $t("Online") }}</span>
path="Organized by {name}"
v-if="organizerActor.id !== currentActor.id"
>
<popover-actor-card
slot="name"
:actor="organizerActor"
:inline="true"
>
{{ organizerActor.displayName() }}
</popover-actor-card>
</i18n>
<span v-else>{{ $t("Organized by you") }}</span>
</div> </div>
<div> <div class="event-subtitle event-organizer">
<figure
class="image is-24x24"
v-if="
organizer(participation.event) &&
organizer(participation.event).avatar
"
>
<img
class="is-rounded"
:src="organizer(participation.event).avatar.url"
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(participation.event) }}
</span>
</div>
<div class="event-subtitle event-participants">
<b-icon
:class="{ 'has-text-danger': lastSeatsLeft }"
icon="account-group"
/>
<span <span
class="participant-stats" class="participant-stats"
v-if=" v-if="participation.role !== ParticipantRole.NOT_APPROVED"
![
ParticipantRole.PARTICIPANT,
ParticipantRole.NOT_APPROVED,
].includes(participation.role)
"
> >
<!-- Less than 10 seats left -->
<span class="has-text-danger" v-if="lastSeatsLeft">
{{
$t("{number} seats left", {
number: seatsLeft,
})
}}
</span>
<span <span
v-if="participation.event.options.maximumAttendeeCapacity !== 0" v-else-if="
participation.event.options.maximumAttendeeCapacity !== 0
"
> >
{{ {{
$tc( $tc(
@ -111,8 +136,8 @@
) )
}} }}
</span> </span>
<span v-if="participation.event.participantStats.notApproved > 0">
<b-button <b-button
v-if="participation.event.participantStats.notApproved > 0"
type="is-text" type="is-text"
@click=" @click="
gotToWithCheck(participation, { gotToWithCheck(participation, {
@ -133,7 +158,6 @@
}} }}
</b-button> </b-button>
</span> </span>
</span>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
@ -233,7 +257,11 @@ import { mixins } from "vue-class-component";
import { RawLocation, Route } from "vue-router"; import { RawLocation, Route } from "vue-router";
import { EventVisibility, ParticipantRole } from "@/types/enums"; import { EventVisibility, ParticipantRole } from "@/types/enums";
import { IParticipant } from "../../types/participant.model"; import { IParticipant } from "../../types/participant.model";
import { IEventCardOptions } from "../../types/event.model"; import {
IEventCardOptions,
organizer,
organizerDisplayName,
} from "../../types/event.model";
import { displayNameAndUsername, IActor, IPerson } from "../../types/actor"; import { displayNameAndUsername, IActor, IPerson } from "../../types/actor";
import ActorMixin from "../../mixins/actor"; import ActorMixin from "../../mixins/actor";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor"; import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
@ -241,6 +269,9 @@ import EventMixin from "../../mixins/event";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { changeIdentity } from "../../utils/auth"; import { changeIdentity } from "../../utils/auth";
import PopoverActorCard from "../Account/PopoverActorCard.vue"; import PopoverActorCard from "../Account/PopoverActorCard.vue";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import EventAddress from "@/components/Event/EventAddress.vue";
import { PropType } from "vue";
const defaultOptions: IEventCardOptions = { const defaultOptions: IEventCardOptions = {
hideDate: true, hideDate: true,
@ -254,6 +285,8 @@ const defaultOptions: IEventCardOptions = {
components: { components: {
DateCalendarIcon, DateCalendarIcon,
PopoverActorCard, PopoverActorCard,
LazyImageWrapper,
EventAddress,
}, },
apollo: { apollo: {
currentActor: { currentActor: {
@ -261,11 +294,15 @@ const defaultOptions: IEventCardOptions = {
}, },
}, },
}) })
export default class EventListCard extends mixins(ActorMixin, EventMixin) { export default class EventParticipationCard extends mixins(
ActorMixin,
EventMixin
) {
/** /**
* The participation associated * The participation associated
*/ */
@Prop({ required: true }) participation!: IParticipant; @Prop({ required: true, type: Object as PropType<IParticipant> })
participation!: IParticipant;
/** /**
* Options are merged with default options * Options are merged with default options
@ -281,6 +318,10 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
displayNameAndUsername = displayNameAndUsername; displayNameAndUsername = displayNameAndUsername;
organizerDisplayName = organizerDisplayName;
organizer = organizer;
RouteName = RouteName; RouteName = RouteName;
get mergedOptions(): IEventCardOptions { get mergedOptions(): IEventCardOptions {
@ -304,13 +345,13 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
participation.actor.id !== this.currentActor.id && participation.actor.id !== this.currentActor.id &&
participation.event.organizerActor participation.event.organizerActor
) { ) {
const organizer = participation.event.organizerActor as IPerson; const organizerActor = participation.event.organizerActor as IPerson;
await changeIdentity(this.$apollo.provider.defaultClient, organizer); await changeIdentity(this.$apollo.provider.defaultClient, organizerActor);
this.$buefy.notification.open({ this.$buefy.notification.open({
message: this.$t( message: this.$t(
"Current identity has been changed to {identityName} in order to manage this event.", "Current identity has been changed to {identityName} in order to manage this event.",
{ {
identityName: organizer.preferredUsername, identityName: organizerActor.preferredUsername,
} }
) as string, ) as string,
type: "is-info", type: "is-info",
@ -330,10 +371,30 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
} }
return this.participation.event.organizerActor; return this.participation.event.organizerActor;
} }
get seatsLeft(): number | null {
if (this.participation.event.options.maximumAttendeeCapacity > 0) {
return (
this.participation.event.options.maximumAttendeeCapacity -
this.participation.event.participantStats.participant
);
}
return null;
}
get lastSeatsLeft(): boolean {
if (this.seatsLeft) {
return this.seatsLeft < 10;
}
return false;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass";
article.box { article.box {
div.tag-container { div.tag-container {
position: absolute; position: absolute;
@ -359,49 +420,67 @@ article.box {
.list-card { .list-card {
display: flex; display: flex;
padding: 0 6px; padding: 0 6px 0 0;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
div.date-component { .content-and-actions {
align-self: flex-start; display: grid;
padding: 5px; grid-gap: 5px 10px;
position: absolute; grid-template-areas: "preview" "body" "actions";
top: 0;
left: 0; @include tablet {
margin-top: 1px; grid-template-columns: 1fr 3fr;
height: 0; grid-template-areas: "preview body" "actions actions";
display: flex;
align-items: flex-end;
margin-bottom: 15px;
margin-left: 0rem;
} }
.content-and-actions { @include desktop {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas: "preview body actions";
}
.event-preview {
grid-area: preview;
& > div {
height: 128px;
width: 100%;
position: relative;
div.date-component {
display: flex; display: flex;
flex-wrap: wrap; position: absolute;
align-items: center; bottom: 5px;
justify-content: center; left: 5px;
padding-bottom: 1rem; z-index: 1;
}
img {
width: 100%;
object-position: center;
object-fit: cover;
height: 100%;
}
}
}
.actions { .actions {
padding-right: 7.5px; padding: 7px;
cursor: pointer; cursor: pointer;
align-self: center;
justify-self: center;
grid-area: actions;
} }
div.list-card-content { div.list-card-content {
flex: 1; flex: 1;
padding: 5px; padding: 5px;
min-width: 350px; grid-area: body;
.participation-actor span, .participant-stats {
.participant-stats span { display: flex;
align-items: center;
padding: 0 5px; padding: 0 5px;
button {
height: auto;
padding-top: 0;
}
} }
div.title-wrapper { div.title-wrapper {
@ -419,11 +498,11 @@ article.box {
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
font-weight: 400; font-size: 18px;
line-height: 1em; line-height: 24px;
font-size: 1.4em;
padding-bottom: 5px;
margin: auto 0; margin: auto 0;
font-weight: bold;
color: $title-color;
} }
} }
} }
@ -434,9 +513,9 @@ article.box {
background: $yellow-2; background: $yellow-2;
display: flex; display: flex;
padding: 5px; padding: 5px;
padding-left: calc(48px + 15px);
figure { figure,
span.icon {
padding-right: 3px; padding-right: 3px;
} }
} }

View file

@ -0,0 +1,90 @@
<template>
<div class="events-wrapper">
<div class="month-group" v-for="key of keys" :key="key">
<h2 class="is-size-5 month-name">
{{ monthName(groupEvents(key)[0]) }}
</h2>
<event-minimalist-card
class="py-4"
v-for="event in groupEvents(key)"
:key="event.id"
:event="event"
:isCurrentActorMember="isCurrentActorMember"
/>
</div>
</div>
</template>
<script lang="ts">
import { IEvent } from "@/types/event.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import EventMinimalistCard from "./EventMinimalistCard.vue";
@Component({
components: {
EventMinimalistCard,
},
})
export default class GroupedMultiEventMinimalistCard extends Vue {
@Prop({ type: Array as PropType<IEvent[]>, required: true })
events!: IEvent[];
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
get monthlyGroupedEvents(): Map<string, IEvent[]> {
return this.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
const beginsOn = new Date(event.beginsOn);
const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
const monthEvents = acc.get(month) || [];
acc.set(month, [...monthEvents, event]);
return acc;
}, new Map());
}
get keys(): string[] {
return Array.from(this.monthlyGroupedEvents.keys()).sort((a, b) =>
b.localeCompare(a)
);
}
groupEvents(key: string): IEvent[] {
return this.monthlyGroupedEvents.get(key) || [];
}
monthName(event: IEvent): string {
const beginsOn = new Date(event.beginsOn);
return new Intl.DateTimeFormat(undefined, {
month: "long",
year: "numeric",
}).format(beginsOn);
}
}
</script>
<style lang="scss" scoped>
.events-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr;
}
.month-group {
.month-name {
text-transform: capitalize;
text-transform: capitalize;
display: inline-block;
position: relative;
font-size: 1.3rem;
&::after {
background: $orange-3;
position: absolute;
left: 0;
right: 0;
top: 100%;
content: "";
width: calc(100% + 30px);
height: 3px;
max-width: 150px;
}
}
}
</style>

View file

@ -0,0 +1,46 @@
<template>
<div class="multi-card-event">
<event-card
class="event-card"
v-for="event in events"
:event="event"
:key="event.uuid"
/>
</div>
</template>
<script lang="ts">
import { IEvent } from "@/types/event.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import EventCard from "./EventCard.vue";
@Component({
components: {
EventCard,
},
})
export default class MultiCard extends Vue {
@Prop({ type: Array as PropType<IEvent[]>, required: true })
events!: IEvent[];
}
</script>
<style lang="scss" scoped>
.multi-card-event {
display: grid;
grid-auto-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
// @media (min-width: 400px) {
// grid-template-columns: repeat(2, 1fr);
// }
// @media (min-width: 800px) {
// grid-template-columns: repeat(4, 1fr);
// }
.event-card {
height: 100%;
display: flex;
flex-direction: column;
}
}
</style>

View file

@ -0,0 +1,38 @@
<template>
<div class="events-wrapper">
<event-minimalist-card
v-for="event in events"
:key="event.id"
:event="event"
:isCurrentActorMember="isCurrentActorMember"
:showOrganizer="showOrganizer"
/>
</div>
</template>
<script lang="ts">
import { IEvent } from "@/types/event.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import EventMinimalistCard from "./EventMinimalistCard.vue";
@Component({
components: {
EventMinimalistCard,
},
})
export default class MultiEventMinimalistCard extends Vue {
@Prop({ type: Array as PropType<IEvent[]>, required: true })
events!: IEvent[];
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
@Prop({ required: false, type: Boolean, default: false })
showOrganizer!: boolean;
}
</script>
<style lang="scss" scoped>
.events-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr;
}
</style>

View file

@ -151,6 +151,7 @@ A button to set your participation
> >
</b-dropdown> </b-dropdown>
<b-button <b-button
rel="nofollow"
tag="router-link" tag="router-link"
:to="{ :to="{
name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT, name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT,
@ -164,6 +165,7 @@ A button to set your participation
> >
<b-button <b-button
tag="router-link" tag="router-link"
rel="nofollow"
:to="{ :to="{
name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
params: { uuid: event.uuid }, params: { uuid: event.uuid },

View file

@ -47,6 +47,7 @@
</li> </li>
<li> <li>
<a <a
rel="external"
hreflang="en" hreflang="en"
href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE" href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE"
> >
@ -62,13 +63,16 @@
tag="span" tag="span"
path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}." path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
> >
<a slot="mobilizon" href="https://joinmobilizon.org">{{ <a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
$t("Mobilizon") $t("Mobilizon")
}}</a> }}</a>
<span slot="date">{{ new Date().getFullYear() }}</span> <span slot="date">{{ new Date().getFullYear() }}</span>
<a href="https://joinmobilizon.org/hall-of-fame" slot="contributors">{{ <a
$t("more than 1360 contributors") rel="external"
}}</a> href="https://joinmobilizon.org/hall-of-fame"
slot="contributors"
>{{ $t("more than 1360 contributors") }}</a
>
</i18n> </i18n>
</div> </div>
</footer> </footer>

View file

@ -4,6 +4,7 @@
<figure class="image is-24x24" v-if="member.actor.avatar"> <figure class="image is-24x24" v-if="member.actor.avatar">
<img class="is-rounded" :src="member.actor.avatar.url" alt="" /> <img class="is-rounded" :src="member.actor.avatar.url" alt="" />
</figure> </figure>
<b-icon v-else icon="account-circle" />
{{ displayNameAndUsername(member.actor) }} {{ displayNameAndUsername(member.actor) }}
</div> </div>
<div class="card-content"> <div class="card-content">
@ -47,7 +48,7 @@
</div> </div>
</div> </div>
<div class="content" v-if="member.parent.summary"> <div class="content" v-if="member.parent.summary">
<p>{{ member.parent.summary }}</p> <p v-html="member.parent.summary" />
</div> </div>
</div> </div>
<div> <div>
@ -110,7 +111,8 @@ export default class GroupMemberCard extends Vue {
display: flex; display: flex;
padding: 5px; padding: 5px;
figure { figure,
span.icon {
padding-right: 3px; padding-right: 3px;
} }
} }

View file

@ -16,7 +16,7 @@
:width="width" :width="width"
:height="height" :height="height"
class="absolute top-0 left-0 transition-opacity duration-500" class="absolute top-0 left-0 transition-opacity duration-500"
:class="isLoaded ? 'opacity-100' : 'opacity-0'" :class="{ isLoaded: isLoaded ? 'opacity-100' : 'opacity-0', rounded }"
alt="" alt=""
/> />
</div> </div>
@ -37,6 +37,7 @@ export default class LazyImage extends Vue {
@Prop({ type: String, required: false, default: null }) blurhash!: string; @Prop({ type: String, required: false, default: null }) blurhash!: string;
@Prop({ type: Number, default: 1 }) width!: number; @Prop({ type: Number, default: 1 }) width!: number;
@Prop({ type: Number, default: 1 }) height!: number; @Prop({ type: Number, default: 1 }) height!: number;
@Prop({ type: Boolean, default: false }) rounded!: boolean;
inheritAttrs = false; inheritAttrs = false;
isLoaded = false; isLoaded = false;
@ -63,6 +64,7 @@ export default class LazyImage extends Vue {
onEnter(): void { onEnter(): void {
// Image is visible (means: has entered the viewport), // Image is visible (means: has entered the viewport),
// so start loading by setting the src attribute // so start loading by setting the src attribute
if (this.image) {
this.image.src = this.src; this.image.src = this.src;
this.image.onload = () => { this.image.onload = () => {
@ -70,6 +72,7 @@ export default class LazyImage extends Vue {
this.isLoaded = true; this.isLoaded = true;
}; };
} }
}
@Watch("src") @Watch("src")
updateImageWithSrcChange(): void { updateImageWithSrcChange(): void {
@ -113,5 +116,8 @@ img {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: 50% 50%; object-position: 50% 50%;
&.rounded {
border-radius: 8px;
}
} }
</style> </style>

View file

@ -5,6 +5,7 @@
:width="pictureOrDefault.metadata.width" :width="pictureOrDefault.metadata.width"
:height="pictureOrDefault.metadata.height" :height="pictureOrDefault.metadata.height"
:blurhash="pictureOrDefault.metadata.blurhash" :blurhash="pictureOrDefault.metadata.blurhash"
:rounded="rounded"
/> />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -34,6 +35,7 @@ const DEFAULT_PICTURE = {
export default class LazyImageWrapper extends Vue { export default class LazyImageWrapper extends Vue {
@Prop({ required: false, type: Object as PropType<IMedia | null> }) @Prop({ required: false, type: Object as PropType<IMedia | null> })
picture!: IMedia | null; picture!: IMedia | null;
@Prop({ required: false, type: Boolean, default: false }) rounded!: boolean;
get pictureOrDefault(): Partial<IMedia> { get pictureOrDefault(): Partial<IMedia> {
if (this.picture === null) { if (this.picture === null) {

View file

@ -58,7 +58,7 @@
tag="a" tag="a"
href="https://mediation.koena.net/framasoft/mobilizon/" href="https://mediation.koena.net/framasoft/mobilizon/"
target="_blank" target="_blank"
rel="noopener" rel="noopener external"
hreflang="fr" hreflang="fr"
> >
<img <img
@ -208,12 +208,8 @@ import RouteName from "../router/name";
@Component({ @Component({
apollo: { apollo: {
currentUser: { currentUser: CURRENT_USER_CLIENT,
query: CURRENT_USER_CLIENT, currentActor: CURRENT_ACTOR_CLIENT,
},
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update: ({ identities }) => update: ({ identities }) =>

View file

@ -31,6 +31,7 @@ import { IEvent } from "@/types/event.model";
metaInfo() { metaInfo() {
return { return {
title: this.$t("Participation with account") as string, title: this.$t("Participation with account") as string,
meta: [{ name: "robots", content: "noindex" }],
}; };
}, },
}) })

View file

@ -158,6 +158,7 @@ import { ApolloCache, FetchResult } from "@apollo/client/core";
metaInfo() { metaInfo() {
return { return {
title: this.$t("Participation without account") as string, title: this.$t("Participation without account") as string,
meta: [{ name: "robots", content: "noindex" }],
}; };
}, },
}) })

View file

@ -133,6 +133,7 @@ import RouteName from "../../router/name";
metaInfo() { metaInfo() {
return { return {
title: this.$t("Unlogged participation") as string, title: this.$t("Unlogged participation") as string,
meta: [{ name: "robots", content: "noindex" }],
}; };
}, },
}) })

View file

@ -0,0 +1,34 @@
<template>
<div class="posts-wrapper">
<post-list-item
v-for="post in posts"
:key="post.id"
:post="post"
:isCurrentActorMember="isCurrentActorMember"
/>
</div>
</template>
<script lang="ts">
import { IPost } from "@/types/post.model";
import { PropType } from "vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import PostListItem from "./PostListItem.vue";
@Component({
components: {
PostListItem,
},
})
export default class MultiPostListItem extends Vue {
@Prop({ type: Array as PropType<IPost[]>, required: true }) posts!: IPost[];
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
}
</script>
<style lang="scss" scoped>
.posts-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr;
}
</style>

View file

@ -1,134 +0,0 @@
<template>
<router-link
class="post-minimalist-card-wrapper"
:to="{ name: RouteName.POST, params: { slug: post.slug } }"
>
<div class="title-info-wrapper">
<div class="media">
<div class="media-left">
<figure class="image is-96x96" v-if="post.picture">
<img :src="post.picture.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="post" />
</div>
<div class="media-content">
<p class="post-minimalist-title">{{ post.title }}</p>
<div class="metadata">
<b-tag type="is-warning" size="is-small" v-if="post.draft">{{
$t("Draft")
}}</b-tag>
<small
v-if="
post.visibility === PostVisibility.PUBLIC &&
isCurrentActorMember
"
class="has-text-grey-dark"
>
<b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small
>
<small
v-else-if="post.visibility === PostVisibility.UNLISTED"
class="has-text-grey-dark"
>
<b-icon icon="link" size="is-small" />{{
$t("Accessible through link")
}}</small
>
<small
v-else-if="post.visibility === PostVisibility.PRIVATE"
class="has-text-grey-dark"
>
<b-icon icon="lock" size="is-small" />{{
$t("Accessible only to members", {
group: post.attributedTo.name,
})
}}</small
>
<small class="has-text-grey-dark">{{
$options.filters.formatDateTimeString(
new Date(post.insertedAt),
undefined,
false
)
}}</small>
<small class="has-text-grey-dark" v-if="isCurrentActorMember">{{
$t("Created by {username}", {
username: `@${usernameWithDomain(post.author)}`,
})
}}</small>
</div>
</div>
</div>
</div>
</router-link>
</template>
<script lang="ts">
import { usernameWithDomain } from "@/types/actor";
import { PostVisibility } from "@/types/enums";
import { Component, Prop, Vue } from "vue-property-decorator";
import RouteName from "../../router/name";
import { IPost } from "../../types/post.model";
@Component
export default class PostElementItem extends Vue {
@Prop({ required: true, type: Object }) post!: IPost;
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
RouteName = RouteName;
usernameWithDomain = usernameWithDomain;
PostVisibility = PostVisibility;
}
</script>
<style lang="scss" scoped>
.post-minimalist-card-wrapper {
text-decoration: none;
display: flex;
width: 100%;
color: initial;
border-bottom: 1px solid #e9e9e9;
align-items: center;
.title-info-wrapper {
flex: 2;
.post-minimalist-title {
color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif;
font-size: 1rem;
font-weight: 700;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.media .media-left {
& > span.icon {
height: 96px;
width: 96px;
}
& > figure.image > img {
object-fit: cover;
height: 100%;
object-position: center;
width: 100%;
}
}
.metadata {
& > span.tag {
margin-right: 5px;
}
& > small:not(:last-child):after {
content: "·";
padding: 0 5px;
}
}
}
}
</style>

View file

@ -3,53 +3,116 @@
class="post-minimalist-card-wrapper" class="post-minimalist-card-wrapper"
:to="{ name: RouteName.POST, params: { slug: post.slug } }" :to="{ name: RouteName.POST, params: { slug: post.slug } }"
> >
<div class="title-info-wrapper"> <lazy-image-wrapper
:picture="post.picture"
:rounded="true"
style="height: 120px"
/>
<div class="title-info-wrapper has-text-grey-dark">
<p class="post-minimalist-title">{{ post.title }}</p> <p class="post-minimalist-title">{{ post.title }}</p>
<small class="has-text-grey-dark">{{ <p class="post-publication-date">
formatDistanceToNow(new Date(post.publishAt || post.insertedAt), { <b-icon icon="clock" />
<span class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
publishedAt | formatDateTimeString(undefined, false, "short")
}}</span>
<span v-else>{{
formatDistanceToNow(publishedAt, {
locale: $dateFnsLocale, locale: $dateFnsLocale,
addSuffix: true, addSuffix: true,
}) })
}}</small> }}</span>
</p>
<b-taglist v-if="post.tags.length > 0" style="display: inline">
<b-icon icon="tag" />
<b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
</b-taglist>
<p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
<b-icon icon="account-edit" />
<i18n path="Published by {name}">
<b class="has-text-weight-medium" slot="name">{{
displayName(post.author)
}}</b>
</i18n>
</p>
</div> </div>
</router-link> </router-link>
</template> </template>
<script lang="ts"> <script lang="ts">
import { formatDistanceToNow } from "date-fns"; import { formatDistanceToNow, subWeeks, isBefore } from "date-fns";
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
import { displayName } from "@/types/actor";
@Component @Component({
components: {
LazyImageWrapper,
},
})
export default class PostListItem extends Vue { export default class PostListItem extends Vue {
@Prop({ required: true, type: Object }) post!: IPost; @Prop({ required: true, type: Object }) post!: IPost;
@Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
RouteName = RouteName; RouteName = RouteName;
formatDistanceToNow = formatDistanceToNow; formatDistanceToNow = formatDistanceToNow;
displayName = displayName;
get publishedAt(): Date {
return new Date((this.post.publishAt || this.post.insertedAt) as Date);
}
get isBeforeLastWeek(): boolean {
return isBefore(this.publishedAt, subWeeks(new Date(), 1));
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~bulma/sass/utilities/mixins.sass";
.post-minimalist-card-wrapper { .post-minimalist-card-wrapper {
display: grid;
grid-gap: 5px 10px;
grid-template-areas: "preview" "body";
text-decoration: none; text-decoration: none;
display: flex;
width: 100%; width: 100%;
color: initial; color: initial;
border-bottom: 1px solid #e9e9e9;
align-items: center; @include desktop {
grid-template-columns: 200px 3fr;
grid-template-areas: "preview body";
}
.title-info-wrapper { .title-info-wrapper {
flex: 2;
.post-minimalist-title { .post-minimalist-title {
color: #3c376e; color: #3c376e;
font-family: Roboto, Helvetica, Arial, serif; font-size: 18px;
font-size: 16px; line-height: 24px;
font-weight: 500; font-weight: 700;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 3;
}
}
::v-deep .icon {
vertical-align: middle;
margin-right: 5px;
}
::v-deep .tags {
display: inline;
span.tag {
max-width: 200px;
& > span {
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
} }

View file

@ -0,0 +1,219 @@
<template>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t("Share this post") }}</p>
</header>
<section class="modal-card-body is-flex" v-if="post">
<div class="container has-text-centered">
<b-notification
type="is-warning"
v-if="post.visibility !== PostVisibility.PUBLIC"
:closable="false"
>
{{
$t(
"This post is accessible only through it's link. Be careful where you post this link."
)
}}
</b-notification>
<b-field :label="$t('Post URL')" label-for="post-url-text">
<b-input
id="post-url-text"
ref="postURLInput"
:value="postURL"
expanded
/>
<p class="control">
<b-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
type="is-success"
position="is-left"
>
<b-button
type="is-primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/>
</b-tooltip>
</p>
</b-field>
<div>
<a
:href="twitterShareUrl"
target="_blank"
rel="nofollow noopener"
title="Twitter"
><b-icon icon="twitter" size="is-large" type="is-primary"
/></a>
<a
:href="mastodonShareUrl"
class="mastodon"
target="_blank"
rel="nofollow noopener"
title="Mastodon"
>
<mastodon-logo />
</a>
<a
:href="facebookShareUrl"
target="_blank"
rel="nofollow noopener"
title="Facebook"
><b-icon icon="facebook" size="is-large" type="is-primary"
/></a>
<a
:href="whatsAppShareUrl"
target="_blank"
rel="nofollow noopener"
title="WhatsApp"
><b-icon icon="whatsapp" size="is-large" type="is-primary"
/></a>
<a
:href="telegramShareUrl"
class="telegram"
target="_blank"
rel="nofollow noopener"
title="Telegram"
>
<telegram-logo />
</a>
<a
:href="linkedInShareUrl"
target="_blank"
rel="nofollow noopener"
title="LinkedIn"
><b-icon icon="linkedin" size="is-large" type="is-primary"
/></a>
<a
:href="diasporaShareUrl"
class="diaspora"
target="_blank"
rel="nofollow noopener"
title="Diaspora"
>
<diaspora-logo />
</a>
<a
:href="emailShareUrl"
target="_blank"
rel="nofollow noopener"
title="Email"
><b-icon icon="email" size="is-large" type="is-primary"
/></a>
</div>
</div>
</section>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref } from "vue-property-decorator";
import { PostVisibility } from "@/types/enums";
import { IPost } from "../../types/post.model";
import DiasporaLogo from "../Share/DiasporaLogo.vue";
import MastodonLogo from "../Share/MastodonLogo.vue";
import TelegramLogo from "../Share/TelegramLogo.vue";
import { PropType } from "vue";
import RouteName from "@/router/name";
@Component({
components: {
DiasporaLogo,
MastodonLogo,
TelegramLogo,
},
})
export default class SharePostModal extends Vue {
@Prop({ type: Object as PropType<IPost>, required: true }) post!: IPost;
@Ref("postURLInput") readonly postURLInput!: any;
PostVisibility = PostVisibility;
RouteName = RouteName;
showCopiedTooltip = false;
get twitterShareUrl(): string {
return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
this.postURL
)}&text=${this.post.title}`;
}
get facebookShareUrl(): string {
return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
this.postURL
)}`;
}
get linkedInShareUrl(): string {
return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
this.postURL
)}&title=${this.post.title}`;
}
get whatsAppShareUrl(): string {
return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
}
get telegramShareUrl(): string {
return `https://t.me/share/url?url=${encodeURIComponent(
this.postURL
)}&text=${encodeURIComponent(this.post.title)}`;
}
get emailShareUrl(): string {
return `mailto:?to=&body=${this.postURL}&subject=${this.post.title}`;
}
get diasporaShareUrl(): string {
return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
this.post.title
)}&url=${encodeURIComponent(this.postURL)}`;
}
get mastodonShareUrl(): string {
return `https://toot.karamoff.dev/?text=${encodeURIComponent(
this.basicTextToEncode
)}`;
}
get basicTextToEncode(): string {
return `${this.post.title}\r\n${this.postURL}`;
}
get postURL(): string {
if (this.post.id) {
return this.$router.resolve({
name: RouteName.POST,
params: { id: this.post.id },
}).href;
}
return "";
}
copyURL(): void {
this.postURLInput.$refs.input.select();
document.execCommand("copy");
this.showCopiedTooltip = true;
setTimeout(() => {
this.showCopiedTooltip = false;
}, 2000);
}
}
</script>
<style lang="scss" scoped>
.diaspora,
.mastodon,
.telegram {
::v-deep span svg {
width: 2.25rem;
}
}
</style>

View file

@ -61,7 +61,7 @@ export default class FolderItem extends Mixins(ResourceMixin) {
list = []; list = [];
groupObject: Record<string, unknown> = { groupObject: Record<string, unknown> = {
name: `folder-${this.resource.title}`, name: `folder-${this.resource?.title}`,
pull: false, pull: false,
put: ["resources"], put: ["resources"],
}; };

View file

@ -32,6 +32,7 @@ export default class EmptyContent extends Vue {
} }
&.inline { &.inline {
margin-top: 5vh; margin-top: 5vh;
margin-bottom: 2vh;
} }
} }
</style> </style>

View file

@ -1,14 +1,25 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
export const ACTOR_FRAGMENT = gql`
fragment ActorFragment on Actor {
id
avatar {
id
url
}
type
preferredUsername
name
domain
summary
url
}
`;
export const FETCH_PERSON = gql` export const FETCH_PERSON = gql`
query ($username: String!) { query ($username: String!) {
fetchPerson(preferredUsername: $username) { fetchPerson(preferredUsername: $username) {
id ...ActorFragment
url
name
domain
summary
preferredUsername
suspended suspended
mediaSize mediaSize
avatar { avatar {
@ -34,6 +45,7 @@ export const FETCH_PERSON = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const GET_PERSON = gql` export const GET_PERSON = gql`
@ -47,12 +59,7 @@ export const GET_PERSON = gql`
$membershipsLimit: Int $membershipsLimit: Int
) { ) {
person(id: $actorId) { person(id: $actorId) {
id ...ActorFragment
url
name
domain
summary
preferredUsername
suspended suspended
mediaSize mediaSize
avatar { avatar {
@ -98,14 +105,7 @@ export const GET_PERSON = gql`
role role
insertedAt insertedAt
parent { parent {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
} }
} }
@ -115,6 +115,7 @@ export const GET_PERSON = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const PERSON_FRAGMENT = gql` export const PERSON_FRAGMENT = gql`
@ -126,6 +127,7 @@ export const PERSON_FRAGMENT = gql`
} }
type type
preferredUsername preferredUsername
domain
name name
} }
`; `;
@ -151,17 +153,11 @@ export const LIST_PROFILES = gql`
) { ) {
total total
elements { elements {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const UPDATE_DEFAULT_ACTOR = gql` export const UPDATE_DEFAULT_ACTOR = gql`
@ -179,12 +175,9 @@ export const CURRENT_ACTOR_CLIENT = gql`
query currentActor { query currentActor {
currentActor @client { currentActor @client {
id id
avatar {
id
url
}
preferredUsername preferredUsername
name name
avatar
} }
} }
`; `;
@ -205,91 +198,6 @@ export const UPDATE_CURRENT_ACTOR_CLIENT = gql`
} }
`; `;
export const LOGGED_USER_PARTICIPATIONS = gql`
query LoggedUserParticipations(
$afterDateTime: DateTime
$beforeDateTime: DateTime
$page: Int
$limit: Int
) {
loggedUser {
id
participations(
afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime
page: $page
limit: $limit
) {
total
elements {
event {
id
uuid
title
picture {
id
url
alt
}
beginsOn
visibility
organizerActor {
id
preferredUsername
name
domain
summary
avatar {
id
url
}
}
attributedTo {
avatar {
id
url
}
preferredUsername
name
summary
domain
url
id
}
participantStats {
going
notApproved
participant
}
options {
maximumAttendeeCapacity
remainingAttendeeCapacity
}
tags {
id
slug
title
}
}
id
role
actor {
id
preferredUsername
name
domain
summary
avatar {
id
url
}
}
}
}
}
}
`;
export const LOGGED_USER_DRAFTS = gql` export const LOGGED_USER_DRAFTS = gql`
query LoggedUserDrafts($page: Int, $limit: Int) { query LoggedUserDrafts($page: Int, $limit: Int) {
loggedUser { loggedUser {
@ -298,6 +206,7 @@ export const LOGGED_USER_DRAFTS = gql`
id id
uuid uuid
title title
draft
picture { picture {
id id
url url
@ -306,14 +215,7 @@ export const LOGGED_USER_DRAFTS = gql`
beginsOn beginsOn
visibility visibility
organizerActor { organizerActor {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
participantStats { participantStats {
going going
@ -326,6 +228,7 @@ export const LOGGED_USER_DRAFTS = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const LOGGED_USER_MEMBERSHIPS = gql` export const LOGGED_USER_MEMBERSHIPS = gql`
@ -338,25 +241,10 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
id id
role role
actor { actor {
id ...ActorFragment
avatar {
id
url
}
preferredUsername
name
domain
} }
parent { parent {
id ...ActorFragment
preferredUsername
domain
name
type
avatar {
id
url
}
organizedEvents { organizedEvents {
elements { elements {
id id
@ -370,34 +258,22 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
} }
} }
invitedBy { invitedBy {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
} }
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const IDENTITIES = gql` export const IDENTITIES = gql`
query Identities { query Identities {
identities { identities {
id ...ActorFragment
avatar {
id
url
}
type
preferredUsername
name
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const PERSON_MEMBERSHIPS = gql` export const PERSON_MEMBERSHIPS = gql`
@ -410,20 +286,10 @@ export const PERSON_MEMBERSHIPS = gql`
id id
role role
parent { parent {
id ...ActorFragment
preferredUsername
name
domain
type
avatar {
id
url
}
} }
invitedBy { invitedBy {
id ...ActorFragment
preferredUsername
name
} }
insertedAt insertedAt
updatedAt updatedAt
@ -431,9 +297,10 @@ export const PERSON_MEMBERSHIPS = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const PERSON_MEMBERSHIP_GROUP = gql` export const PERSON_STATUS_GROUP = gql`
query PersonMembershipGroup($id: ID!, $group: String!) { query PersonMembershipGroup($id: ID!, $group: String!) {
person(id: $id) { person(id: $id) {
id id
@ -443,19 +310,26 @@ export const PERSON_MEMBERSHIP_GROUP = gql`
id id
role role
parent { parent {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
invitedBy { invitedBy {
...ActorFragment
}
insertedAt
updatedAt
}
}
follows(group: $group) {
total
elements {
id id
preferredUsername notify
name approved
target_actor {
...ActorFragment
}
actor {
...ActorFragment
} }
insertedAt insertedAt
updatedAt updatedAt
@ -463,6 +337,7 @@ export const PERSON_MEMBERSHIP_GROUP = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql` export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
@ -478,19 +353,10 @@ export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
id id
role role
parent { parent {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
invitedBy { invitedBy {
id ...ActorFragment
preferredUsername
name
} }
insertedAt insertedAt
updatedAt updatedAt
@ -498,6 +364,7 @@ export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const CREATE_PERSON = gql` export const CREATE_PERSON = gql`
@ -513,16 +380,10 @@ export const CREATE_PERSON = gql`
summary: $summary summary: $summary
avatar: $avatar avatar: $avatar
) { ) {
id ...ActorFragment
preferredUsername
name
summary
avatar {
id
url
}
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const UPDATE_PERSON = gql` export const UPDATE_PERSON = gql`
@ -533,16 +394,10 @@ export const UPDATE_PERSON = gql`
$avatar: MediaInput $avatar: MediaInput
) { ) {
updatePerson(id: $id, name: $name, summary: $summary, avatar: $avatar) { updatePerson(id: $id, name: $name, summary: $summary, avatar: $avatar) {
id ...ActorFragment
preferredUsername
name
summary
avatar {
id
url
}
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const DELETE_PERSON = gql` export const DELETE_PERSON = gql`
@ -570,16 +425,10 @@ export const REGISTER_PERSON = gql`
summary: $summary summary: $summary
email: $email email: $email
) { ) {
id ...ActorFragment
preferredUsername
name
summary
avatar {
id
url
}
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const SUSPEND_PROFILE = gql` export const SUSPEND_PROFILE = gql`

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const DASHBOARD = gql` export const DASHBOARD = gql`
query { query {
@ -14,14 +15,7 @@ export const DASHBOARD = gql`
} }
} }
lastGroupCreated { lastGroupCreated {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
numberOfUsers numberOfUsers
numberOfEvents numberOfEvents
@ -33,31 +27,23 @@ export const DASHBOARD = gql`
numberOfConfirmedParticipationsToLocalEvents numberOfConfirmedParticipationsToLocalEvents
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const RELAY_FRAGMENT = gql` export const RELAY_FRAGMENT = gql`
fragment relayFragment on Follower { fragment relayFragment on Follower {
id id
actor { actor {
id ...ActorFragment
preferredUsername
name
domain
type
summary
} }
targetActor { targetActor {
id ...ActorFragment
preferredUsername
name
domain
type
summary
} }
approved approved
insertedAt insertedAt
updatedAt updatedAt
} }
${ACTOR_FRAGMENT}
`; `;
export const RELAY_FOLLOWERS = gql` export const RELAY_FOLLOWERS = gql`

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const COMMENT_FIELDS_FRAGMENT_NAME = "CommentFields"; export const COMMENT_FIELDS_FRAGMENT_NAME = "CommentFields";
export const COMMENT_FIELDS_FRAGMENT = gql` export const COMMENT_FIELDS_FRAGMENT = gql`
@ -10,15 +11,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
visibility visibility
local local
actor { actor {
avatar { ...ActorFragment
id
url
}
id
domain
preferredUsername
name
summary
} }
totalReplies totalReplies
insertedAt insertedAt
@ -26,6 +19,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
deletedAt deletedAt
isAnnouncement isAnnouncement
} }
${ACTOR_FRAGMENT}
`; `;
export const COMMENT_RECURSIVE_FRAGMENT = gql` export const COMMENT_RECURSIVE_FRAGMENT = gql`

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const DISCUSSION_BASIC_FIELDS_FRAGMENT = gql` export const DISCUSSION_BASIC_FIELDS_FRAGMENT = gql`
fragment DiscussionBasicFields on Discussion { fragment DiscussionBasicFields on Discussion {
@ -11,18 +12,13 @@ export const DISCUSSION_BASIC_FIELDS_FRAGMENT = gql`
id id
text text
actor { actor {
id ...ActorFragment
preferredUsername
domain
avatar {
id
url
}
} }
publishedAt publishedAt
deletedAt deletedAt
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const DISCUSSION_FIELDS_FOR_REPLY_FRAGMENT = gql` export const DISCUSSION_FIELDS_FOR_REPLY_FRAGMENT = gql`
@ -35,26 +31,17 @@ export const DISCUSSION_FIELDS_FOR_REPLY_FRAGMENT = gql`
text text
updatedAt updatedAt
actor { actor {
id ...ActorFragment
preferredUsername
domain
avatar {
id
url
}
} }
} }
actor { actor {
id ...ActorFragment
preferredUsername
domain
} }
creator { creator {
id ...ActorFragment
preferredUsername
domain
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const DISCUSSION_FIELDS_FRAGMENT = gql` export const DISCUSSION_FIELDS_FRAGMENT = gql`
@ -70,28 +57,17 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
deletedAt deletedAt
publishedAt publishedAt
actor { actor {
id ...ActorFragment
domain
name
preferredUsername
avatar {
url
}
} }
} }
actor { actor {
id ...ActorFragment
domain
name
preferredUsername
} }
creator { creator {
id ...ActorFragment
domain
name
preferredUsername
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const CREATE_DISCUSSION = gql` export const CREATE_DISCUSSION = gql`
@ -121,14 +97,7 @@ export const GET_DISCUSSION = gql`
id id
text text
actor { actor {
id ...ActorFragment
avatar {
id
url
}
name
domain
preferredUsername
} }
insertedAt insertedAt
updatedAt updatedAt
@ -140,6 +109,7 @@ export const GET_DISCUSSION = gql`
} }
} }
${DISCUSSION_FIELDS_FRAGMENT} ${DISCUSSION_FIELDS_FRAGMENT}
${ACTOR_FRAGMENT}
`; `;
export const UPDATE_DISCUSSION = gql` export const UPDATE_DISCUSSION = gql`
@ -171,16 +141,10 @@ export const DISCUSSION_COMMENT_CHANGED = gql`
deletedAt deletedAt
publishedAt publishedAt
actor { actor {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;

View file

@ -1,71 +1,13 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
import { ADDRESS_FRAGMENT } from "./address"; import { ADDRESS_FRAGMENT } from "./address";
import { EVENT_OPTIONS_FRAGMENT } from "./event_options";
import {
PARTICIPANTS_QUERY_FRAGMENT,
PARTICIPANT_QUERY_FRAGMENT,
} from "./participant";
import { TAG_FRAGMENT } from "./tags"; import { TAG_FRAGMENT } from "./tags";
const PARTICIPANT_QUERY_FRAGMENT = gql`
fragment ParticipantQuery on Participant {
role
id
actor {
preferredUsername
avatar {
id
url
}
name
id
domain
}
event {
id
uuid
}
metadata {
cancellationToken
message
}
insertedAt
}
`;
const PARTICIPANTS_QUERY_FRAGMENT = gql`
fragment ParticipantsQuery on PaginatedParticipantList {
total
elements {
...ParticipantQuery
}
}
${PARTICIPANT_QUERY_FRAGMENT}
`;
const EVENT_OPTIONS_FRAGMENT = gql`
fragment EventOptions on EventOptions {
maximumAttendeeCapacity
remainingAttendeeCapacity
showRemainingAttendeeCapacity
anonymousParticipation
showStartTime
showEndTime
timezone
offers {
price
priceCurrency
url
}
participationConditions {
title
content
url
}
attendees
program
commentModeration
showParticipationPrice
hideOrganizerWhenGroupEvent
isOnline
}
`;
const FULL_EVENT_FRAGMENT = gql` const FULL_EVENT_FRAGMENT = gql`
fragment FullEvent on Event { fragment FullEvent on Event {
id id
@ -97,40 +39,13 @@ const FULL_EVENT_FRAGMENT = gql`
...AdressFragment ...AdressFragment
} }
organizerActor { organizerActor {
avatar { ...ActorFragment
id
url
}
preferredUsername
domain
name
url
id
summary
} }
contacts { contacts {
avatar { ...ActorFragment
id
url
}
preferredUsername
name
summary
domain
url
id
} }
attributedTo { attributedTo {
avatar { ...ActorFragment
id
url
}
preferredUsername
name
summary
domain
url
id
} }
participantStats { participantStats {
going going
@ -156,18 +71,19 @@ const FULL_EVENT_FRAGMENT = gql`
} }
} }
physicalAddress { physicalAddress {
id ...AdressFragment
description
} }
organizerActor { organizerActor {
id ...ActorFragment
avatar {
id
url
} }
preferredUsername attributedTo {
domain ...ActorFragment
name }
options {
...EventOptions
}
tags {
...TagFragment
} }
} }
options { options {
@ -183,6 +99,7 @@ const FULL_EVENT_FRAGMENT = gql`
${ADDRESS_FRAGMENT} ${ADDRESS_FRAGMENT}
${TAG_FRAGMENT} ${TAG_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT} ${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
`; `;
export const FETCH_EVENT = gql` export const FETCH_EVENT = gql`
@ -244,36 +161,28 @@ export const FETCH_EVENTS = gql`
# online_address, # online_address,
# phone_address, # phone_address,
physicalAddress { physicalAddress {
id ...AdressFragment
description
locality
} }
organizerActor { organizerActor {
id ...ActorFragment
avatar {
id
url
}
preferredUsername
domain
name
} }
attributedTo { attributedTo {
avatar { ...ActorFragment
id
url
}
preferredUsername
name
} }
category category
tags { tags {
...TagFragment ...TagFragment
} }
options {
...EventOptions
} }
} }
} }
}
${ADDRESS_FRAGMENT}
${TAG_FRAGMENT} ${TAG_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
`; `;
export const CREATE_EVENT = gql` export const CREATE_EVENT = gql`
@ -511,18 +420,15 @@ export const FETCH_GROUP_EVENTS = gql`
$afterDateTime: DateTime $afterDateTime: DateTime
$beforeDateTime: DateTime $beforeDateTime: DateTime
$organisedEventsPage: Int $organisedEventsPage: Int
$organisedEventslimit: Int $organisedEventsLimit: Int
) { ) {
group(preferredUsername: $name) { group(preferredUsername: $name) {
id ...ActorFragment
preferredUsername
domain
name
organizedEvents( organizedEvents(
afterDatetime: $afterDateTime afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime beforeDatetime: $beforeDateTime
page: $organisedEventsPage page: $organisedEventsPage
limit: $organisedEventslimit limit: $organisedEventsLimit
) { ) {
elements { elements {
id id
@ -531,29 +437,33 @@ export const FETCH_GROUP_EVENTS = gql`
beginsOn beginsOn
draft draft
options { options {
maximumAttendeeCapacity ...EventOptions
} }
participantStats { participantStats {
participant participant
notApproved notApproved
} }
attributedTo { attributedTo {
id ...ActorFragment
preferredUsername
name
domain
} }
organizerActor { organizerActor {
...ActorFragment
}
physicalAddress {
...AdressFragment
}
picture {
url
id id
preferredUsername
name
domain
} }
} }
total total
} }
} }
} }
${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
${ADDRESS_FRAGMENT}
`; `;
export const CLOSE_EVENTS = gql` export const CLOSE_EVENTS = gql`
@ -570,13 +480,28 @@ export const CLOSE_EVENTS = gql`
url url
} }
tags { tags {
slug ...TagFragment
title }
options {
...EventOptions
}
physicalAddress {
...AdressFragment
}
attributedTo {
...ActorFragment
}
organizerActor {
...ActorFragment
} }
__typename __typename
} }
} }
} }
${ADDRESS_FRAGMENT}
${TAG_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
`; `;
export const EXPORT_EVENT_PARTICIPATIONS = gql` export const EXPORT_EVENT_PARTICIPATIONS = gql`

View file

@ -0,0 +1,29 @@
import gql from "graphql-tag";
export const EVENT_OPTIONS_FRAGMENT = gql`
fragment EventOptions on EventOptions {
maximumAttendeeCapacity
remainingAttendeeCapacity
showRemainingAttendeeCapacity
anonymousParticipation
showStartTime
showEndTime
timezone
offers {
price
priceCurrency
url
}
participationConditions {
title
content
url
}
attendees
program
commentModeration
showParticipationPrice
hideOrganizerWhenGroupEvent
isOnline
}
`;

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const GROUP_FOLLOWERS = gql` export const GROUP_FOLLOWERS = gql`
query ( query (
@ -8,10 +9,7 @@ export const GROUP_FOLLOWERS = gql`
$approved: Boolean $approved: Boolean
) { ) {
group(preferredUsername: $name) { group(preferredUsername: $name) {
id ...ActorFragment
preferredUsername
name
domain
followers( followers(
page: $followersPage page: $followersPage
limit: $followersLimit limit: $followersLimit
@ -21,14 +19,7 @@ export const GROUP_FOLLOWERS = gql`
elements { elements {
id id
actor { actor {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
approved approved
insertedAt insertedAt
@ -37,6 +28,7 @@ export const GROUP_FOLLOWERS = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const UPDATE_FOLLOWER = gql` export const UPDATE_FOLLOWER = gql`
@ -47,3 +39,28 @@ export const UPDATE_FOLLOWER = gql`
} }
} }
`; `;
export const FOLLOW_GROUP = gql`
mutation FollowGroup($groupId: ID!, $notify: Boolean) {
followGroup(groupId: $groupId, notify: $notify) {
id
}
}
`;
export const UNFOLLOW_GROUP = gql`
mutation UnfollowGroup($groupId: ID!) {
unfollowGroup(groupId: $groupId) {
id
}
}
`;
export const UPDATE_GROUP_FOLLOW = gql`
mutation UpdateGroupFollow($followId: ID!, $notify: Boolean) {
updateGroupFollow(followId: $followId, notify: $notify) {
id
notify
}
}
`;

View file

@ -2,6 +2,10 @@ import gql from "graphql-tag";
import { DISCUSSION_BASIC_FIELDS_FRAGMENT } from "./discussion"; import { DISCUSSION_BASIC_FIELDS_FRAGMENT } from "./discussion";
import { RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT } from "./resources"; import { RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT } from "./resources";
import { POST_BASIC_FIELDS } from "./post"; import { POST_BASIC_FIELDS } from "./post";
import { ACTOR_FRAGMENT } from "./actor";
import { ADDRESS_FRAGMENT } from "./address";
import { TAG_FRAGMENT } from "./tags";
import { EVENT_OPTIONS_FRAGMENT } from "./event_options";
export const LIST_GROUPS = gql` export const LIST_GROUPS = gql`
query ListGroups( query ListGroups(
@ -23,12 +27,7 @@ export const LIST_GROUPS = gql`
limit: $limit limit: $limit
) { ) {
elements { elements {
id ...ActorFragment
url
name
domain
summary
preferredUsername
suspended suspended
avatar { avatar {
id id
@ -51,16 +50,12 @@ export const LIST_GROUPS = gql`
total total
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const GROUP_FIELDS_FRAGMENTS = gql` export const GROUP_FIELDS_FRAGMENTS = gql`
fragment GroupFullFields on Group { fragment GroupFullFields on Group {
id ...ActorFragment
url
name
domain
summary
preferredUsername
suspended suspended
visibility visibility
openness openness
@ -76,6 +71,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
type type
id id
originId originId
url
} }
avatar { avatar {
id id
@ -101,7 +97,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
afterDatetime: $afterDateTime afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime beforeDatetime: $beforeDateTime
page: $organisedEventsPage page: $organisedEventsPage
limit: $organisedEventslimit limit: $organisedEventsLimit
) { ) {
elements { elements {
id id
@ -117,16 +113,23 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
notApproved notApproved
} }
attributedTo { attributedTo {
id ...ActorFragment
preferredUsername
name
domain
} }
organizerActor { organizerActor {
...ActorFragment
}
picture {
id id
preferredUsername url
name }
domain physicalAddress {
...AdressFragment
}
options {
...EventOptions
}
tags {
...TagFragment
} }
} }
total total
@ -148,14 +151,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
id id
role role
actor { actor {
id ...ActorFragment
name
domain
preferredUsername
avatar {
id
url
}
} }
insertedAt insertedAt
} }
@ -197,6 +193,10 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
total total
} }
} }
${ACTOR_FRAGMENT}
${ADDRESS_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${TAG_FRAGMENT}
`; `;
export const FETCH_GROUP = gql` export const FETCH_GROUP = gql`
@ -205,7 +205,7 @@ export const FETCH_GROUP = gql`
$afterDateTime: DateTime $afterDateTime: DateTime
$beforeDateTime: DateTime $beforeDateTime: DateTime
$organisedEventsPage: Int $organisedEventsPage: Int
$organisedEventslimit: Int $organisedEventsLimit: Int
$postsPage: Int $postsPage: Int
$postsLimit: Int $postsLimit: Int
$membersPage: Int $membersPage: Int
@ -229,7 +229,7 @@ export const GET_GROUP = gql`
$afterDateTime: DateTime $afterDateTime: DateTime
$beforeDateTime: DateTime $beforeDateTime: DateTime
$organisedEventsPage: Int $organisedEventsPage: Int
$organisedEventslimit: Int $organisedEventsLimit: Int
$postsPage: Int $postsPage: Int
$postsLimit: Int $postsLimit: Int
$membersPage: Int $membersPage: Int
@ -263,21 +263,14 @@ export const CREATE_GROUP = gql`
banner: $banner banner: $banner
avatar: $avatar avatar: $avatar
) { ) {
id ...ActorFragment
preferredUsername
name
domain
summary
avatar {
id
url
}
banner { banner {
id id
url url
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const UPDATE_GROUP = gql` export const UPDATE_GROUP = gql`
@ -303,23 +296,17 @@ export const UPDATE_GROUP = gql`
physicalAddress: $physicalAddress physicalAddress: $physicalAddress
manuallyApprovesFollowers: $manuallyApprovesFollowers manuallyApprovesFollowers: $manuallyApprovesFollowers
) { ) {
id ...ActorFragment
preferredUsername
name
summary
visibility visibility
openness openness
manuallyApprovesFollowers manuallyApprovesFollowers
avatar {
id
url
}
banner { banner {
id id
url url
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const DELETE_GROUP = gql` export const DELETE_GROUP = gql`
@ -355,10 +342,7 @@ export const GROUP_TIMELINE = gql`
$limit: Int $limit: Int
) { ) {
group(preferredUsername: $preferredUsername) { group(preferredUsername: $preferredUsername) {
id ...ActorFragment
preferredUsername
domain
name
activity(type: $type, author: $author, page: $page, limit: $limit) { activity(type: $type, author: $author, page: $page, limit: $limit) {
total total
elements { elements {
@ -371,18 +355,10 @@ export const GROUP_TIMELINE = gql`
} }
type type
author { author {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
group { group {
id ...ActorFragment
preferredUsername
} }
object { object {
... on Event { ... on Event {
@ -396,14 +372,7 @@ export const GROUP_TIMELINE = gql`
... on Member { ... on Member {
id id
actor { actor {
id ...ActorFragment
name
preferredUsername
domain
avatar {
id
url
}
} }
} }
... on Resource { ... on Resource {
@ -421,11 +390,7 @@ export const GROUP_TIMELINE = gql`
id id
} }
... on Group { ... on Group {
id ...ActorFragment
preferredUsername
domain
name
summary
visibility visibility
openness openness
physicalAddress { physicalAddress {
@ -433,9 +398,7 @@ export const GROUP_TIMELINE = gql`
} }
banner { banner {
id id
} url
avatar {
id
} }
} }
} }
@ -443,4 +406,5 @@ export const GROUP_TIMELINE = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;

107
js/src/graphql/home.ts Normal file
View file

@ -0,0 +1,107 @@
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";
import { USER_SETTINGS_FRAGMENT } from "./user";
export const HOME_USER_QUERIES = gql`
query HomeUserQueries(
$afterDateTime: DateTime
$beforeDateTime: DateTime
$page: Int
$limit: Int
) {
loggedUser {
id
locale
settings {
...UserSettingFragment
}
participations(
afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime
page: $page
limit: $limit
) {
total
elements {
event {
id
uuid
title
picture {
id
url
alt
}
beginsOn
visibility
organizerActor {
...ActorFragment
}
attributedTo {
...ActorFragment
}
participantStats {
going
notApproved
participant
}
options {
...EventOptions
}
tags {
...TagFragment
}
}
id
role
actor {
...ActorFragment
}
}
}
followedGroupEvents {
total
elements {
profile {
id
}
group {
...ActorFragment
}
event {
id
uuid
title
beginsOn
picture {
url
}
attributedTo {
...ActorFragment
}
organizerActor {
...ActorFragment
}
options {
...EventOptions
}
physicalAddress {
...AdressFragment
}
tags {
...TagFragment
}
}
}
}
}
}
${USER_SETTINGS_FRAGMENT}
${ADDRESS_FRAGMENT}
${TAG_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${ACTOR_FRAGMENT}
`;

View file

@ -1,31 +1,19 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const MEMBER_FRAGMENT = gql` export const MEMBER_FRAGMENT = gql`
fragment MemberFragment on Member { fragment MemberFragment on Member {
id id
role role
parent { parent {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
actor { actor {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
insertedAt insertedAt
} }
${ACTOR_FRAGMENT}
`; `;
export const INVITE_MEMBER = gql` export const INVITE_MEMBER = gql`
@ -57,24 +45,13 @@ export const REJECT_INVITATION = gql`
export const GROUP_MEMBERS = gql` export const GROUP_MEMBERS = gql`
query ($name: String!, $roles: String, $page: Int, $limit: Int) { query ($name: String!, $roles: String, $page: Int, $limit: Int) {
group(preferredUsername: $name) { group(preferredUsername: $name) {
id ...ActorFragment
url
name
domain
preferredUsername
members(page: $page, limit: $limit, roles: $roles) { members(page: $page, limit: $limit, roles: $roles) {
elements { elements {
id id
role role
actor { actor {
id ...ActorFragment
name
domain
preferredUsername
avatar {
id
url
}
} }
insertedAt insertedAt
} }
@ -82,6 +59,7 @@ export const GROUP_MEMBERS = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const UPDATE_MEMBER = gql` export const UPDATE_MEMBER = gql`

View file

@ -0,0 +1,210 @@
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 LOGGED_USER_PARTICIPATIONS = gql`
query LoggedUserParticipations(
$afterDateTime: DateTime
$beforeDateTime: DateTime
$page: Int
$limit: Int
) {
loggedUser {
id
participations(
afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime
page: $page
limit: $limit
) {
total
elements {
event {
id
uuid
url
title
picture {
id
url
alt
}
beginsOn
visibility
organizerActor {
...ActorFragment
}
attributedTo {
...ActorFragment
}
participantStats {
going
notApproved
participant
}
options {
...EventOptions
}
tags {
id
slug
title
}
physicalAddress {
...AdressFragment
}
}
id
role
actor {
...ActorFragment
}
}
}
}
}
${ACTOR_FRAGMENT}
${ADDRESS_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
`;
export const LOGGED_USER_UPCOMING_EVENTS = gql`
query LoggedUserUpcomingEvents(
$afterDateTime: DateTime
$beforeDateTime: DateTime
$page: Int
$limit: Int
) {
loggedUser {
id
participations(
afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime
page: $page
limit: $limit
) {
total
elements {
event {
id
uuid
url
title
picture {
id
url
alt
}
beginsOn
visibility
organizerActor {
...ActorFragment
}
attributedTo {
...ActorFragment
}
participantStats {
going
notApproved
rejected
participant
}
options {
...EventOptions
}
tags {
id
slug
title
}
physicalAddress {
...AdressFragment
}
}
id
role
actor {
...ActorFragment
}
}
}
followedGroupEvents(afterDatetime: $afterDateTime) {
total
elements {
profile {
id
}
group {
...ActorFragment
}
event {
id
uuid
title
beginsOn
picture {
url
}
attributedTo {
...ActorFragment
}
organizerActor {
...ActorFragment
}
options {
...EventOptions
}
physicalAddress {
...AdressFragment
}
tags {
...TagFragment
}
participantStats {
going
notApproved
rejected
participant
}
}
}
}
}
}
${ACTOR_FRAGMENT}
${ADDRESS_FRAGMENT}
${EVENT_OPTIONS_FRAGMENT}
${TAG_FRAGMENT}
`;
export const PARTICIPANT_QUERY_FRAGMENT = gql`
fragment ParticipantQuery on Participant {
role
id
actor {
...ActorFragment
}
event {
id
uuid
}
metadata {
cancellationToken
message
}
insertedAt
}
${ACTOR_FRAGMENT}
`;
export const PARTICIPANTS_QUERY_FRAGMENT = gql`
fragment ParticipantsQuery on PaginatedParticipantList {
total
elements {
...ParticipantQuery
}
}
${PARTICIPANT_QUERY_FRAGMENT}
`;

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
import { TAG_FRAGMENT } from "./tags"; import { TAG_FRAGMENT } from "./tags";
export const POST_FRAGMENT = gql` export const POST_FRAGMENT = gql`
@ -10,24 +11,10 @@ export const POST_FRAGMENT = gql`
body body
draft draft
author { author {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
attributedTo { attributedTo {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
insertedAt insertedAt
updatedAt updatedAt
@ -49,6 +36,7 @@ export const POST_FRAGMENT = gql`
} }
} }
${TAG_FRAGMENT} ${TAG_FRAGMENT}
${ACTOR_FRAGMENT}
`; `;
export const POST_BASIC_FIELDS = gql` export const POST_BASIC_FIELDS = gql`
@ -58,24 +46,10 @@ export const POST_BASIC_FIELDS = gql`
slug slug
url url
author { author {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
attributedTo { attributedTo {
id ...ActorFragment
preferredUsername
name
domain
avatar {
id
url
}
} }
insertedAt insertedAt
updatedAt updatedAt
@ -87,16 +61,18 @@ export const POST_BASIC_FIELDS = gql`
url url
name name
} }
tags {
...TagFragment
} }
}
${ACTOR_FRAGMENT}
${TAG_FRAGMENT}
`; `;
export const FETCH_GROUP_POSTS = gql` export const FETCH_GROUP_POSTS = gql`
query GroupPosts($preferredUsername: String!, $page: Int, $limit: Int) { query GroupPosts($preferredUsername: String!, $page: Int, $limit: Int) {
group(preferredUsername: $preferredUsername) { group(preferredUsername: $preferredUsername) {
id ...ActorFragment
preferredUsername
domain
name
posts(page: $page, limit: $limit) { posts(page: $page, limit: $limit) {
total total
elements { elements {

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const REPORTS = gql` export const REPORTS = gql`
query Reports($status: ReportStatus, $page: Int, $limit: Int) { query Reports($status: ReportStatus, $page: Int, $limit: Int) {
@ -7,25 +8,10 @@ export const REPORTS = gql`
elements { elements {
id id
reported { reported {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
reporter { reporter {
id ...ActorFragment
preferredUsername
name
avatar {
id
url
}
domain
type
} }
event { event {
id id
@ -41,31 +27,17 @@ export const REPORTS = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
const REPORT_FRAGMENT = gql` const REPORT_FRAGMENT = gql`
fragment ReportFragment on Report { fragment ReportFragment on Report {
id id
reported { reported {
id ...ActorFragment
preferredUsername
name
avatar {
id
url
}
domain
} }
reporter { reporter {
id ...ActorFragment
preferredUsername
name
avatar {
id
url
}
domain
type
} }
event { event {
id id
@ -81,27 +53,14 @@ const REPORT_FRAGMENT = gql`
id id
text text
actor { actor {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
} }
notes { notes {
id id
content content
moderator { moderator {
id ...ActorFragment
preferredUsername
name
avatar {
id
url
}
} }
insertedAt insertedAt
} }
@ -110,6 +69,7 @@ const REPORT_FRAGMENT = gql`
status status
content content
} }
${ACTOR_FRAGMENT}
`; `;
export const REPORT = gql` export const REPORT = gql`
@ -167,13 +127,7 @@ export const LOGS = gql`
id id
action action
actor { actor {
id ...ActorFragment
preferredUsername
domain
avatar {
id
url
}
} }
object { object {
... on Report { ... on Report {
@ -197,23 +151,14 @@ export const LOGS = gql`
uuid uuid
} }
actor { actor {
id ...ActorFragment
preferredUsername
domain
name
} }
} }
... on Person { ... on Person {
id ...ActorFragment
preferredUsername
domain
name
} }
... on Group { ... on Group {
id ...ActorFragment
preferredUsername
domain
name
} }
... on User { ... on User {
id id
@ -226,4 +171,5 @@ export const LOGS = gql`
total total
} }
} }
${ACTOR_FRAGMENT}
`; `;

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT = gql` export const RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT = gql`
fragment ResourceMetadataBasicFields on ResourceMetadata { fragment ResourceMetadataBasicFields on ResourceMetadata {
@ -38,10 +39,7 @@ export const GET_RESOURCE = gql`
type type
} }
actor { actor {
id ...ActorFragment
preferredUsername
name
domain
} }
children(page: $page, limit: $limit) { children(page: $page, limit: $limit) {
total total
@ -68,6 +66,7 @@ export const GET_RESOURCE = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT} ${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT}
`; `;

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const SEARCH_EVENTS = gql` export const SEARCH_EVENTS = gql`
query SearchEvents( query SearchEvents(
@ -58,18 +59,11 @@ export const SEARCH_GROUPS = gql`
) { ) {
total total
elements { elements {
id ...ActorFragment
avatar {
id
url
}
domain
preferredUsername
name
__typename
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const SEARCH_PERSONS = gql` export const SEARCH_PERSONS = gql`
@ -77,18 +71,11 @@ export const SEARCH_PERSONS = gql`
searchPersons(term: $searchText, page: $page, limit: $limit) { searchPersons(term: $searchText, page: $page, limit: $limit) {
total total
elements { elements {
id ...ActorFragment
avatar {
id
url
}
domain
preferredUsername
name
__typename
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const INTERACT = gql` export const INTERACT = gql`
@ -110,16 +97,9 @@ export const INTERACT = gql`
__typename __typename
} }
... on Group { ... on Group {
id ...ActorFragment
avatar {
id
url
}
domain
preferredUsername
name
__typename
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const GET_TODO = gql` export const GET_TODO = gql`
query GetTodo($id: ID!) { query GetTodo($id: ID!) {
@ -9,26 +10,17 @@ export const GET_TODO = gql`
dueDate dueDate
todoList { todoList {
actor { actor {
id ...ActorFragment
preferredUsername
domain
name
} }
title title
id id
} }
assignedTo { assignedTo {
id ...ActorFragment
preferredUsername
domain
name
avatar {
id
url
}
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const FETCH_TODO_LIST = gql` export const FETCH_TODO_LIST = gql`
@ -43,21 +35,17 @@ export const FETCH_TODO_LIST = gql`
title title
status status
assignedTo { assignedTo {
id ...ActorFragment
preferredUsername
domain
} }
dueDate dueDate
} }
} }
actor { actor {
id ...ActorFragment
preferredUsername
domain
name
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const CREATE_TODO_LIST = gql` export const CREATE_TODO_LIST = gql`

View file

@ -1,4 +1,5 @@
import gql from "graphql-tag"; import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const CREATE_USER = gql` export const CREATE_USER = gql`
mutation CreateUser($email: String!, $password: String!, $locale: String) { mutation CreateUser($email: String!, $password: String!, $locale: String) {
@ -18,17 +19,12 @@ export const VALIDATE_USER = gql`
id id
email email
defaultActor { defaultActor {
id ...ActorFragment
preferredUsername
name
avatar {
id
url
}
} }
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const LOGGED_USER = gql` export const LOGGED_USER = gql`
@ -37,17 +33,12 @@ export const LOGGED_USER = gql`
id id
email email
defaultActor { defaultActor {
id ...ActorFragment
preferredUsername
name
avatar {
id
url
}
} }
provider provider
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const CHANGE_PASSWORD = gql` export const CHANGE_PASSWORD = gql`
@ -228,14 +219,7 @@ export const LIST_USERS = gql`
confirmedAt confirmedAt
disabled disabled
actors { actors {
id ...ActorFragment
preferredUsername
avatar {
id
url
}
name
summary
} }
settings { settings {
timezone timezone
@ -243,6 +227,7 @@ export const LIST_USERS = gql`
} }
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const GET_USER = gql` export const GET_USER = gql`
@ -263,13 +248,7 @@ export const GET_USER = gql`
id id
} }
actors { actors {
id ...ActorFragment
preferredUsername
name
avatar {
id
url
}
} }
participations { participations {
total total
@ -277,6 +256,7 @@ export const GET_USER = gql`
role role
} }
} }
${ACTOR_FRAGMENT}
`; `;
export const UPDATE_USER_LOCALE = gql` export const UPDATE_USER_LOCALE = gql`

View file

@ -1021,7 +1021,6 @@
"A member has been updated": "A member has been updated", "A member has been updated": "A member has been updated",
"User settings": "User settings", "User settings": "User settings",
"You changed your email or password": "You changed your email or password", "You changed your email or password": "You changed your email or password",
"Organized by you": "Organized by you",
"Move resource to the root folder": "Move resource to the root folder", "Move resource to the root folder": "Move resource to the root folder",
"Share this group": "Share this group", "Share this group": "Share this group",
"This group is accessible only through it's link. Be careful where you post this link.": "This group is accessible only through it's link. Be careful where you post this link.", "This group is accessible only through it's link. Be careful where you post this link.": "This group is accessible only through it's link. Be careful where you post this link.",
@ -1202,6 +1201,30 @@
"{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})", "{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})",
"Back to top": "Back to top", "Back to top": "Back to top",
"Powered by Mobilizon": "Powered by Mobilizon", "Powered by Mobilizon": "Powered by Mobilizon",
"Instance follows": "Instance follows", "The event is fully online": "The event is fully online",
"The event is fully online": "The event is fully online" "Follow": "Follow",
"Cancel follow request": "Cancel follow request",
"Unfollow": "Unfollow",
"your notification settings": "your notification settings",
"You will receive notifications about this group's public activity depending on %{notification_settings}.": "You will receive notifications about this group's public activity depending on %{notification_settings}.",
"Online": "Online",
"That you follow or of which you are a member": "That you follow or of which you are a member",
"{number} seats left": "{number} seats left",
"Published by {name}": "Published by {name}",
"Share this post": "Share this post",
"This post is accessible only through it's link. Be careful where you post this link.": "This post is accessible only through it's link. Be careful where you post this link.",
"Post URL": "Post URL",
"Are you sure you want to delete this post? This action cannot be reverted.": "Are you sure you want to delete this post? This action cannot be reverted.",
"Attending": "Attending",
"From my groups": "From my groups",
"You don't have any upcoming events. Maybe try another filter?": "You don't have any upcoming events. Maybe try another filter?",
"Leave group": "Leave group",
"Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone.": "Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone.",
"Upcoming events from your groups": "Upcoming events from your groups",
"Accessible only by link": "Accessible only by link",
"Report this post": "Report this post",
"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.",
"Showing events starting on": "Showing events starting on",
"Showing events before": "Showing events before"
} }

View file

@ -488,7 +488,6 @@
"Instance administrator": "Administrador de instancia", "Instance administrator": "Administrador de instancia",
"Instance configuration": "Configuración de instancia", "Instance configuration": "Configuración de instancia",
"Instance feeds": "Flujos de instancias", "Instance feeds": "Flujos de instancias",
"Instance follows": "La instancia sigue",
"Instance languages": "Idiomas de instancia", "Instance languages": "Idiomas de instancia",
"Instance rules": "Reglas de instancia", "Instance rules": "Reglas de instancia",
"Instance settings": "Configuraciones de instancia", "Instance settings": "Configuraciones de instancia",

View file

@ -1267,8 +1267,6 @@
"Time in your timezone ({timezone})": "Heure dans votre fuseau horaire ({timezone})", "Time in your timezone ({timezone})": "Heure dans votre fuseau horaire ({timezone})",
"Export": "Export", "Export": "Export",
"Times in your timezone ({timezone})": "Heures dans votre fuseau horaire ({timezone})", "Times in your timezone ({timezone})": "Heures dans votre fuseau horaire ({timezone})",
"has loaded": "a chargé",
"Skip to main": "",
"Navigated to {pageTitle}": "Navigué vers {pageTitle}", "Navigated to {pageTitle}": "Navigué vers {pageTitle}",
"Comment body": "Corps du commentaire", "Comment body": "Corps du commentaire",
"Confirm participation": "Confirmer la participation", "Confirm participation": "Confirmer la participation",
@ -1308,6 +1306,29 @@
"{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})", "{timezoneLongName} ({timezoneShortName})": "{timezoneLongName} ({timezoneShortName})",
"Back to top": "Retour en haut", "Back to top": "Retour en haut",
"Powered by Mobilizon": "Propulsé par Mobilizon", "Powered by Mobilizon": "Propulsé par Mobilizon",
"Instance follows": "Abonnements de l'instance", "The event is fully online": "L'événement est entièrement en ligne",
"The event is fully online": "L'événement est entièrement en ligne" "Follow": "Suivre",
"Cancel follow request": "Annuler la demande de suivi",
"Unfollow": "Ne plus suivre",
"your notification settings": "vos paramètres de notification",
"You will receive notifications about this group's public activity depending on %{notification_settings}.": "Vous recevrez des notifications à propos de l'activité publique de ce groupe en fonction de %{notification_settings}.",
"Online": "En ligne",
"That you follow or of which you are a member": "Que vous suivez ou dont vous êtes membre",
"{number} seats left": "{number} places restantes",
"Published by {name}": "Publié par {name}",
"Share this post": "Partager ce billet",
"This post is accessible only through it's link. Be careful where you post this link.": "Ce billet est accessible uniquement à travers son lien. Faites attention où vous le diffusez.",
"Post URL": "URL du billet",
"Are you sure you want to delete this post? This action cannot be reverted.": "Voulez-vous vraiment supprimer ce billet ? Cette action ne peut pas être annulée.",
"Attending": "Participant⋅e",
"From my groups": "De mes groupes",
"You don't have any upcoming events. Maybe try another filter?": "Vous n'avez pas d'événements à venir. Essayez peut-être un autre filtre ?",
"Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone.": "Êtes-vous certain⋅e de vouloir quitter le groupe {groupName}? Vous perdrez accès au contenu privé de ce groupe. Cette action ne peut être annulée.",
"Upcoming events from your groups": "Événements de vos groupes à venir",
"Accessible only by link": "Accessible uniquement par lien",
"Report this post": "Signaler ce billet",
"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é.",
"Showing events starting on": "Afficher les événements à partir de",
"Showing events before": "Afficher les événements avant"
} }

View file

@ -1,13 +1,20 @@
import { import {
CURRENT_ACTOR_CLIENT, CURRENT_ACTOR_CLIENT,
GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED, GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
PERSON_MEMBERSHIP_GROUP, PERSON_STATUS_GROUP,
} from "@/graphql/actor"; } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group"; import { DELETE_GROUP, FETCH_GROUP } from "@/graphql/group";
import RouteName from "@/router/name"; import RouteName from "@/router/name";
import { IActor, IGroup, IPerson, usernameWithDomain } from "@/types/actor"; import {
IActor,
IFollower,
IGroup,
IPerson,
usernameWithDomain,
} from "@/types/actor";
import { MemberRole } from "@/types/enums"; import { MemberRole } from "@/types/enums";
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
const now = new Date(); const now = new Date();
@ -31,7 +38,7 @@ const now = new Date();
}, },
}, },
person: { person: {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
@ -100,6 +107,27 @@ export default class GroupMixin extends Vue {
); );
} }
get isCurrentActorFollowing(): boolean {
return this.currentActorFollow?.approved === true;
}
get isCurrentActorPendingFollow(): boolean {
return this.currentActorFollow?.approved === false;
}
get isCurrentActorFollowingNotify(): boolean {
return (
this.isCurrentActorFollowing && this.currentActorFollow?.notify === true
);
}
get currentActorFollow(): IFollower | null {
if (this.person?.follows?.total > 0) {
return this.person?.follows?.elements[0];
}
return null;
}
handleErrors(errors: any[]): void { handleErrors(errors: any[]): void {
if ( if (
errors.some((error) => error.status_code === 404) || errors.some((error) => error.status_code === 404) ||
@ -108,4 +136,28 @@ export default class GroupMixin extends Vue {
this.$router.replace({ name: RouteName.PAGE_NOT_FOUND }); this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
} }
} }
confirmDeleteGroup(): void {
this.$buefy.dialog.confirm({
title: this.$t("Delete group") as string,
message: this.$t(
"Are you sure you want to <b>completely delete</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
) as string,
confirmText: this.$t("Delete group") as string,
cancelText: this.$t("Cancel") as string,
type: "is-danger",
hasIcon: true,
onConfirm: () => this.deleteGroup(),
});
}
async deleteGroup(): Promise<Route> {
await this.$apollo.mutate<{ deleteGroup: IGroup }>({
mutation: DELETE_GROUP,
variables: {
groupId: this.group.id,
},
});
return this.$router.push({ name: RouteName.MY_GROUPS });
}
} }

64
js/src/mixins/post.ts Normal file
View file

@ -0,0 +1,64 @@
import { DELETE_POST, FETCH_POST } from "@/graphql/post";
import { usernameWithDomain } from "@/types/actor";
import { IPost } from "@/types/post.model";
import { Component, Vue } from "vue-property-decorator";
import RouteName from "../router/name";
@Component({
apollo: {
post: {
query: FETCH_POST,
fetchPolicy: "cache-and-network",
variables() {
return {
slug: this.slug,
};
},
skip() {
return !this.slug;
},
error({ graphQLErrors }) {
this.handleErrors(graphQLErrors);
},
},
},
})
export default class PostMixin extends Vue {
post!: IPost;
RouteName = RouteName;
protected async openDeletePostModal(): Promise<void> {
this.$buefy.dialog.confirm({
type: "is-danger",
title: this.$t("Delete post") as string,
message: this.$t(
"Are you sure you want to delete this post? This action cannot be reverted."
) as string,
onConfirm: () => this.deletePost(),
});
}
async deletePost(): Promise<void> {
const { data } = await this.$apollo.mutate({
mutation: DELETE_POST,
variables: {
id: this.post.id,
},
});
if (data && this.post.attributedTo) {
this.$router.push({
name: RouteName.POSTS,
params: {
preferredUsername: usernameWithDomain(this.post.attributedTo),
},
});
}
}
handleErrors(errors: any[]): void {
if (errors.some((error) => error.status_code === 404)) {
this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
}
}
}

View file

@ -52,6 +52,7 @@ export const eventRoutes: RouteConfig[] = [
path: "/events/me", path: "/events/me",
name: EventRouteName.MY_EVENTS, name: EventRouteName.MY_EVENTS,
component: myEvents, component: myEvents,
props: true,
meta: { meta: {
requiredAuth: true, requiredAuth: true,
announcer: { message: (): string => i18n.t("My events") as string }, announcer: { message: (): string => i18n.t("My events") as string },

View file

@ -18,6 +18,7 @@ export enum GroupsRouteName {
POSTS = "POSTS", POSTS = "POSTS",
GROUP_EVENTS = "GROUP_EVENTS", GROUP_EVENTS = "GROUP_EVENTS",
GROUP_JOIN = "GROUP_JOIN", GROUP_JOIN = "GROUP_JOIN",
GROUP_FOLLOW = "GROUP_FOLLOW",
TIMELINE = "TIMELINE", TIMELINE = "TIMELINE",
} }
@ -149,6 +150,14 @@ export const groupsRoutes: RouteConfig[] = [
name: GroupsRouteName.GROUP_JOIN, name: GroupsRouteName.GROUP_JOIN,
meta: { requiredAuth: false, announcer: { skip: true } }, meta: { requiredAuth: false, announcer: { skip: true } },
}, },
{
path: "/@:preferredUsername/follow",
component: (): Promise<ImportedComponent> =>
import("@/components/Group/JoinGroupWithAccount.vue"),
props: true,
name: GroupsRouteName.GROUP_FOLLOW,
meta: { requiredAuth: false, announcer: { skip: true } },
},
{ {
path: "/@:preferredUsername/timeline", path: "/@:preferredUsername/timeline",
name: GroupsRouteName.TIMELINE, name: GroupsRouteName.TIMELINE,

View file

@ -0,0 +1,18 @@
.event-organizer {
display: flex;
align-items: center;
.organizer-name {
padding-left: 5px;
font-weight: 600;
}
}
.event-subtitle {
display: flex;
align-items: center;
& > span:not(.icon) {
padding-left: 5px;
}
}

View file

@ -5,4 +5,5 @@ export interface IFollower {
actor: IActor; actor: IActor;
targetActor: IActor; targetActor: IActor;
approved: boolean; approved: boolean;
notify?: boolean;
} }

View file

@ -1,3 +1,4 @@
export * from "./actor.model"; export * from "./actor.model";
export * from "./group.model"; export * from "./group.model";
export * from "./person.model"; export * from "./person.model";
export * from "./follower.model";

View file

@ -6,12 +6,14 @@ import type { Paginate } from "../paginate";
import type { IParticipant } from "../participant.model"; import type { IParticipant } from "../participant.model";
import type { IMember } from "./member.model"; import type { IMember } from "./member.model";
import type { IFeedToken } from "../feedtoken.model"; import type { IFeedToken } from "../feedtoken.model";
import { IFollower } from "./follower.model";
export interface IPerson extends IActor { export interface IPerson extends IActor {
feedTokens: IFeedToken[]; feedTokens: IFeedToken[];
goingToEvents: IEvent[]; goingToEvents: IEvent[];
participations: Paginate<IParticipant>; participations: Paginate<IParticipant>;
memberships: Paginate<IMember>; memberships: Paginate<IMember>;
follows: Paginate<IFollower>;
user?: ICurrentUser; user?: ICurrentUser;
} }
@ -31,6 +33,7 @@ export class Person extends Actor implements IPerson {
this.patch(hash); this.patch(hash);
} }
follows!: Paginate<IFollower>;
patch(hash: IPerson | Record<string, unknown>): void { patch(hash: IPerson | Record<string, unknown>): void {
Object.assign(this, hash); Object.assign(this, hash);

View file

@ -3,6 +3,7 @@ import type { IPerson } from "@/types/actor/person.model";
import type { Paginate } from "./paginate"; import type { Paginate } from "./paginate";
import type { IParticipant } from "./participant.model"; import type { IParticipant } from "./participant.model";
import { ICurrentUserRole, INotificationPendingEnum } from "./enums"; import { ICurrentUserRole, INotificationPendingEnum } from "./enums";
import { IFollowedGroupEvent } from "./followedGroupEvent.model";
export interface ICurrentUser { export interface ICurrentUser {
id: string; id: string;
@ -47,6 +48,7 @@ export interface IUser extends ICurrentUser {
drafts: IEvent[]; drafts: IEvent[];
settings: IUserSettings; settings: IUserSettings;
activitySettings: IActivitySetting[]; activitySettings: IActivitySetting[];
followedGroupEvents: Paginate<IFollowedGroupEvent>;
locale: string; locale: string;
provider?: string; provider?: string;
lastSignInAt: string; lastSignInAt: string;

View file

@ -4,7 +4,7 @@ import type { ITag } from "@/types/tag.model";
import type { IMedia } from "@/types/media.model"; import type { IMedia } from "@/types/media.model";
import type { IComment } from "@/types/comment.model"; import type { IComment } from "@/types/comment.model";
import type { Paginate } from "@/types/paginate"; import type { Paginate } from "@/types/paginate";
import { Actor, Group } from "./actor"; import { Actor, displayName, Group } from "./actor";
import type { IActor, IGroup, IPerson } from "./actor"; import type { IActor, IGroup, IPerson } from "./actor";
import type { IParticipant } from "./participant.model"; import type { IParticipant } from "./participant.model";
import { EventOptions } from "./event-options.model"; import { EventOptions } from "./event-options.model";
@ -257,3 +257,21 @@ export function toEditJSON(event: IEditableEvent): IEventEditJSON {
})), })),
}; };
} }
export function organizer(event: IEvent): IActor | null {
if (event.attributedTo?.id) {
return event.attributedTo;
}
if (event.organizerActor) {
return event.organizerActor;
}
return null;
}
export function organizerDisplayName(event: IEvent): string | null {
const organizerActor = organizer(event);
if (organizerActor) {
return displayName(organizerActor);
}
return null;
}

View file

@ -0,0 +1,10 @@
import { IEvent } from "./event.model";
import { IPerson, IGroup } from "./actor";
import { IUser } from "./current-user.model";
export interface IFollowedGroupEvent {
profile: IPerson;
group: IGroup;
user: IUser;
event: IEvent;
}

View file

@ -53,7 +53,7 @@ $success: #0d8758;
$success-invert: findColorInvert($success); $success-invert: findColorInvert($success);
$info: #36bcd4; $info: #36bcd4;
$info-invert: findColorInvert($info); $info-invert: findColorInvert($info);
$danger: #ff2e54; $danger: #cd2026;
$danger-invert: findColorInvert($danger); $danger-invert: findColorInvert($danger);
$link: $primary; $link: $primary;
$link-invert: $primary-invert; $link-invert: $primary-invert;

View file

@ -89,7 +89,7 @@ import RouteName from "../../router/name";
}, },
metaInfo() { metaInfo() {
return { return {
title: this.$t("Instance follows") as string, title: this.$t("Federation") as string,
}; };
}, },
}) })

View file

@ -89,7 +89,7 @@ import { MemberRole } from "@/types/enums";
import { import {
CURRENT_ACTOR_CLIENT, CURRENT_ACTOR_CLIENT,
GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED, GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
PERSON_MEMBERSHIP_GROUP, PERSON_STATUS_GROUP,
} from "@/graphql/actor"; } from "@/graphql/actor";
import { IMember } from "@/types/actor/member.model"; import { IMember } from "@/types/actor/member.model";
import EmptyContent from "@/components/Utils/EmptyContent.vue"; import EmptyContent from "@/components/Utils/EmptyContent.vue";
@ -116,7 +116,7 @@ const DISCUSSIONS_PER_PAGE = 10;
}, },
}, },
person: { person: {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {

View file

@ -606,8 +606,7 @@ import {
CURRENT_ACTOR_CLIENT, CURRENT_ACTOR_CLIENT,
IDENTITIES, IDENTITIES,
LOGGED_USER_DRAFTS, LOGGED_USER_DRAFTS,
LOGGED_USER_PARTICIPATIONS, PERSON_STATUS_GROUP,
PERSON_MEMBERSHIP_GROUP,
} from "../../graphql/actor"; } from "../../graphql/actor";
import { import {
displayNameAndUsername, displayNameAndUsername,
@ -635,6 +634,7 @@ import { IEventOptions } from "@/types/event-options.model";
import { USER_SETTINGS } from "@/graphql/user"; import { USER_SETTINGS } from "@/graphql/user";
import { IUser } from "@/types/current-user.model"; import { IUser } from "@/types/current-user.model";
import { IAddress } from "@/types/address.model"; import { IAddress } from "@/types/address.model";
import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10; const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
@ -669,7 +669,7 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
}, },
}, },
person: { person: {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {

View file

@ -345,15 +345,7 @@
<h3 class="title has-text-centered"> <h3 class="title has-text-centered">
{{ $t("These events may interest you") }} {{ $t("These events may interest you") }}
</h3> </h3>
<div class="columns"> <multi-card :events="event.relatedEvents" />
<div
class="column is-one-third-desktop"
v-for="relatedEvent in event.relatedEvents"
:key="relatedEvent.uuid"
>
<EventCard :event="relatedEvent" />
</div>
</div>
</section> </section>
<b-modal <b-modal
:active.sync="isReportModalActive" :active.sync="isReportModalActive"
@ -496,15 +488,12 @@ import {
FETCH_EVENT, FETCH_EVENT,
JOIN_EVENT, JOIN_EVENT,
} from "../../graphql/event"; } from "../../graphql/event";
import { import { CURRENT_ACTOR_CLIENT, PERSON_STATUS_GROUP } from "../../graphql/actor";
CURRENT_ACTOR_CLIENT,
PERSON_MEMBERSHIP_GROUP,
} from "../../graphql/actor";
import { EventModel, IEvent } from "../../types/event.model"; import { EventModel, IEvent } from "../../types/event.model";
import { IActor, IPerson, Person, usernameWithDomain } from "../../types/actor"; import { IActor, IPerson, Person, usernameWithDomain } from "../../types/actor";
import { GRAPHQL_API_ENDPOINT } from "../../api/_entrypoint"; import { GRAPHQL_API_ENDPOINT } from "../../api/_entrypoint";
import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue"; import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue";
import EventCard from "../../components/Event/EventCard.vue"; import MultiCard from "../../components/Event/MultiCard.vue";
import ReportModal from "../../components/Report/ReportModal.vue"; import ReportModal from "../../components/Report/ReportModal.vue";
import { IReport } from "../../types/report.model"; import { IReport } from "../../types/report.model";
import { CREATE_REPORT } from "../../graphql/report"; import { CREATE_REPORT } from "../../graphql/report";
@ -539,7 +528,7 @@ import { IUser } from "@/types/current-user.model";
@Component({ @Component({
components: { components: {
Subtitle, Subtitle,
EventCard, MultiCard,
BIcon, BIcon,
DateCalendarIcon, DateCalendarIcon,
ReportModal, ReportModal,
@ -579,7 +568,6 @@ import { IUser } from "@/types/current-user.model";
apollo: { apollo: {
event: { event: {
query: FETCH_EVENT, query: FETCH_EVENT,
fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
uuid: this.uuid, uuid: this.uuid,
@ -593,7 +581,6 @@ import { IUser } from "@/types/current-user.model";
loggedUser: USER_SETTINGS, loggedUser: USER_SETTINGS,
participations: { participations: {
query: EVENT_PERSON_PARTICIPATION, query: EVENT_PERSON_PARTICIPATION,
fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
eventId: this.event.id, eventId: this.event.id,
@ -623,8 +610,7 @@ import { IUser } from "@/types/current-user.model";
}, },
}, },
person: { person: {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
id: this.currentActor.id, id: this.currentActor.id,

View file

@ -52,14 +52,10 @@
{{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }} {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
</subtitle> </subtitle>
<b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch> <b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
<transition-group name="list" tag="div" class="event-list"> <grouped-multi-event-minimalist-card
<EventListViewCard :events="group.organizedEvents.elements"
v-for="event in group.organizedEvents.elements" :isCurrentActorMember="isCurrentActorMember"
:key="event.id"
:event="event"
:options="{ memberofGroup: isCurrentActorMember }"
/> />
</transition-group>
<b-message <b-message
v-if=" v-if="
group.organizedEvents.elements.length === 0 && group.organizedEvents.elements.length === 0 &&
@ -88,7 +84,7 @@ import { Component } from "vue-property-decorator";
import { mixins } from "vue-class-component"; import { mixins } from "vue-class-component";
import RouteName from "@/router/name"; import RouteName from "@/router/name";
import Subtitle from "@/components/Utils/Subtitle.vue"; import Subtitle from "@/components/Utils/Subtitle.vue";
import EventListViewCard from "@/components/Event/EventListViewCard.vue"; import GroupedMultiEventMinimalistCard from "@/components/Event/GroupedMultiEventMinimalistCard.vue";
import { PERSON_MEMBERSHIPS } from "@/graphql/actor"; import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import GroupMixin from "@/mixins/group"; import GroupMixin from "@/mixins/group";
import { IMember } from "@/types/actor/member.model"; import { IMember } from "@/types/actor/member.model";
@ -120,14 +116,14 @@ const EVENTS_PAGE_LIMIT = 10;
beforeDateTime: this.showPassedEvents ? new Date() : null, beforeDateTime: this.showPassedEvents ? new Date() : null,
afterDateTime: this.showPassedEvents ? null : new Date(), afterDateTime: this.showPassedEvents ? null : new Date(),
organisedEventsPage: this.eventsPage, organisedEventsPage: this.eventsPage,
organisedEventslimit: EVENTS_PAGE_LIMIT, organisedEventsLimit: EVENTS_PAGE_LIMIT,
}; };
}, },
}, },
}, },
components: { components: {
Subtitle, Subtitle,
EventListViewCard, GroupedMultiEventMinimalistCard,
}, },
metaInfo() { metaInfo() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment

View file

@ -18,28 +18,102 @@
> >
</div> </div>
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<section v-if="futureParticipations.length > 0"> <div class="wrapper">
<subtitle> <div class="event-filter">
{{ $t("Upcoming") }} <b-field grouped group-multiline>
</subtitle> <b-field>
<b-switch v-model="showUpcoming">{{
showUpcoming ? $t("Upcoming events") : $t("Past events")
}}</b-switch>
</b-field>
<b-field v-if="showUpcoming">
<b-checkbox v-model="showDrafts">{{ $t("Drafts") }}</b-checkbox>
</b-field>
<b-field v-if="showUpcoming">
<b-checkbox v-model="showAttending">{{
$t("Attending")
}}</b-checkbox>
</b-field>
<b-field v-if="showUpcoming">
<b-checkbox v-model="showMyGroups">{{
$t("From my groups")
}}</b-checkbox>
</b-field>
<p v-if="!showUpcoming">
{{
$tc(
"You have attended {count} events in the past.",
pastParticipations.total,
{
count: pastParticipations.total,
}
)
}}
</p>
<b-field
class="date-filter"
expanded
:label="
showUpcoming
? $t('Showing events starting on')
: $t('Showing events before')
"
>
<b-datepicker v-model="dateFilter" />
<b-button
@click="dateFilter = new Date()"
class="reset-area"
icon-left="close"
:title="$t('Clear date filter field')"
/>
</b-field>
</b-field>
</div>
<div class="my-events">
<section
class="py-4"
v-if="showUpcoming && showDrafts && drafts.length > 0"
>
<multi-event-minimalist-card :events="drafts" :showOrganizer="true" />
</section>
<section
class="py-4"
v-if="
showUpcoming && monthlyFutureEvents && monthlyFutureEvents.size > 0
"
>
<transition-group name="list" tag="p"> <transition-group name="list" tag="p">
<div v-for="month in monthlyFutureParticipations" :key="month[0]"> <div
class="mb-5"
v-for="month in monthlyFutureEvents"
:key="month[0]"
>
<span class="upcoming-month">{{ month[0] }}</span> <span class="upcoming-month">{{ month[0] }}</span>
<EventListCard <div v-for="element in month[1]" :key="element.id">
v-for="participation in month[1]" <event-participation-card
:key="participation.id" v-if="'role' in element"
:participation="participation" :participation="element"
:options="{ hideDate: false }" :options="{ hideDate: false }"
@event-deleted="eventDeleted" @event-deleted="eventDeleted"
class="participation" class="participation"
/> />
<event-minimalist-card
v-else-if="
!monthParticipationsIds(month[1]).includes(element.id)
"
:event="element"
class="participation"
/>
</div>
</div> </div>
</transition-group> </transition-group>
<div class="columns is-centered"> <div class="columns is-centered">
<b-button <b-button
class="column is-narrow" class="column is-narrow"
v-if=" v-if="
hasMoreFutureParticipations && futureParticipations.length === limit hasMoreFutureParticipations &&
futureParticipations &&
futureParticipations.length === limit
" "
@click="loadMoreFutureParticipations" @click="loadMoreFutureParticipations"
size="is-large" size="is-large"
@ -48,64 +122,28 @@
> >
</div> </div>
</section> </section>
<section v-if="drafts.length > 0">
<subtitle>
{{ $t("Drafts") }}
</subtitle>
<div class="columns is-multiline">
<EventCard
v-for="draft in drafts"
:key="draft.uuid"
:event="draft"
class="is-one-quarter-desktop column"
/>
</div>
</section>
<section v-if="pastParticipations.length > 0">
<subtitle>
{{ $t("Past events") }}
</subtitle>
<transition-group name="list" tag="p">
<div v-for="month in monthlyPastParticipations" :key="month[0]">
<span class="past-month">{{ month[0] }}</span>
<EventListCard
v-for="participation in month[1]"
:key="participation.id"
:participation="participation"
:options="{ hideDate: false }"
@event-deleted="eventDeleted"
class="participation"
/>
</div>
</transition-group>
<div class="columns is-centered">
<b-button
class="column is-narrow"
v-if="
hasMorePastParticipations && pastParticipations.length === limit
"
@click="loadMorePastParticipations"
size="is-large"
type="is-primary"
>{{ $t("Load more") }}</b-button
>
</div>
</section>
<section <section
class="has-text-centered not-found" class="has-text-centered not-found"
v-if=" v-if="
futureParticipations.length === 0 && showUpcoming &&
pastParticipations.length === 0 && monthlyFutureEvents &&
monthlyFutureEvents.size === 0 &&
!$apollo.loading !$apollo.loading
" "
> >
<div class="columns is-vertical is-centered">
<div class="column is-three-quarters">
<div class="img-container" :class="{ webp: supportsWebPFormat }" /> <div class="img-container" :class="{ webp: supportsWebPFormat }" />
<div class="content has-text-centered"> <div class="content has-text-centered">
<p> <p>
{{ $t("You didn't create or join any event yet.") }} {{
<i18n path="Do you wish to {create_event} or {explore_events}?"> $t(
"You don't have any upcoming events. Maybe try another filter?"
)
}}
</p>
<i18n
path="Do you wish to {create_event} or {explore_events}?"
tag="p"
>
<router-link <router-link
:to="{ name: RouteName.CREATE_EVENT }" :to="{ name: RouteName.CREATE_EVENT }"
slot="create_event" slot="create_event"
@ -117,11 +155,38 @@
>{{ $t("explore the events") }}</router-link >{{ $t("explore the events") }}</router-link
> >
</i18n> </i18n>
</p>
</div>
</div>
</div> </div>
</section> </section>
<section v-if="!showUpcoming && pastParticipations.elements.length > 0">
<transition-group name="list" tag="p">
<div v-for="month in monthlyPastParticipations" :key="month[0]">
<span class="past-month">{{ month[0] }}</span>
<event-participation-card
v-for="participation in month[1]"
:key="participation.id"
:participation="participation"
:options="{ hideDate: false }"
@event-deleted="eventDeleted"
class="participation"
/>
</div>
</transition-group>
<div class="columns is-centered">
<b-button
class="column is-narrow"
v-if="
hasMorePastParticipations &&
pastParticipations.elements.length === limit
"
@click="loadMorePastParticipations"
size="is-large"
type="is-primary"
>{{ $t("Load more") }}</b-button
>
</div>
</section>
</div>
</div>
</div> </div>
</template> </template>
@ -133,35 +198,47 @@ import { ParticipantRole } from "@/types/enums";
import RouteName from "@/router/name"; import RouteName from "@/router/name";
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 { LOGGED_USER_DRAFTS } from "../../graphql/actor";
import { EventModel, IEvent } from "../../types/event.model";
import EventParticipationCard from "../../components/Event/EventParticipationCard.vue";
import MultiEventMinimalistCard from "../../components/Event/MultiEventMinimalistCard.vue";
import EventMinimalistCard from "../../components/Event/EventMinimalistCard.vue";
import Subtitle from "../../components/Utils/Subtitle.vue";
import { import {
LOGGED_USER_PARTICIPATIONS, LOGGED_USER_PARTICIPATIONS,
LOGGED_USER_DRAFTS, LOGGED_USER_UPCOMING_EVENTS,
} from "../../graphql/actor"; } from "@/graphql/participant";
import { EventModel, IEvent } from "../../types/event.model"; import { Paginate } from "@/types/paginate";
import EventListCard from "../../components/Event/EventListCard.vue";
import EventCard from "../../components/Event/EventCard.vue"; type Eventable = IParticipant | IEvent;
import Subtitle from "../../components/Utils/Subtitle.vue";
@Component({ @Component({
components: { components: {
Subtitle, Subtitle,
EventCard, MultiEventMinimalistCard,
EventListCard, EventParticipationCard,
EventMinimalistCard,
}, },
apollo: { apollo: {
config: CONFIG, config: CONFIG,
futureParticipations: { userUpcomingEvents: {
query: LOGGED_USER_PARTICIPATIONS, query: LOGGED_USER_UPCOMING_EVENTS,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables: { variables() {
return {
page: 1, page: 1,
limit: 10, limit: 10,
afterDateTime: new Date().toISOString(), afterDateTime: this.dateFilter,
};
}, },
update: (data) => update(data) {
data.loggedUser.participations.elements.map( this.futureParticipations = data.loggedUser.participations.elements.map(
(participation: IParticipant) => new Participant(participation) (participation: IParticipant) => new Participant(participation)
), );
this.groupEvents = data.loggedUser.followedGroupEvents.elements.map(
({ event }: { event: IEvent }) => event
);
},
}, },
drafts: { drafts: {
query: LOGGED_USER_DRAFTS, query: LOGGED_USER_DRAFTS,
@ -176,15 +253,14 @@ import Subtitle from "../../components/Utils/Subtitle.vue";
pastParticipations: { pastParticipations: {
query: LOGGED_USER_PARTICIPATIONS, query: LOGGED_USER_PARTICIPATIONS,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables: { variables() {
return {
page: 1, page: 1,
limit: 10, limit: 10,
beforeDateTime: new Date().toISOString(), beforeDateTime: this.dateFilter,
};
}, },
update: (data) => update: (data) => data.loggedUser.participations,
data.loggedUser.participations.elements.map(
(participation: IParticipant) => new Participant(participation)
),
}, },
}, },
metaInfo() { metaInfo() {
@ -200,13 +276,89 @@ export default class MyEvents extends Vue {
limit = 10; limit = 10;
get showUpcoming(): boolean {
return ((this.$route.query.showUpcoming as string) || "true") === "true";
}
set showUpcoming(showUpcoming: boolean) {
this.$router.push({
name: RouteName.MY_EVENTS,
query: { ...this.$route.query, showUpcoming: showUpcoming.toString() },
});
}
get showDrafts(): boolean {
return ((this.$route.query.showDrafts as string) || "true") === "true";
}
set showDrafts(showDrafts: boolean) {
this.$router.push({
name: RouteName.MY_EVENTS,
query: { ...this.$route.query, showDrafts: showDrafts.toString() },
});
}
get showAttending(): boolean {
return ((this.$route.query.showAttending as string) || "true") === "true";
}
set showAttending(showAttending: boolean) {
this.$router.push({
name: RouteName.MY_EVENTS,
query: { ...this.$route.query, showAttending: showAttending.toString() },
});
}
get showMyGroups(): boolean {
return ((this.$route.query.showMyGroups as string) || "false") === "true";
}
set showMyGroups(showMyGroups: boolean) {
this.$router.push({
name: RouteName.MY_EVENTS,
query: { ...this.$route.query, showMyGroups: showMyGroups.toString() },
});
}
get dateFilter(): Date {
const query = this.$route.query.dateFilter as string;
if (query && /(\d{4}-\d{2}-\d{2})/.test(query)) {
return new Date(`${query}T00:00:00Z`);
}
return new Date();
}
set dateFilter(date: Date) {
const pad = (number: number) => {
if (number < 10) {
return "0" + number;
}
return number;
};
const stringifiedDate = `${date.getFullYear()}-${pad(
date.getMonth() + 1
)}-${pad(date.getDate())}`;
if (this.$route.query.dateFilter !== stringifiedDate) {
this.$router.push({
name: RouteName.MY_EVENTS,
query: {
...this.$route.query,
dateFilter: stringifiedDate,
},
});
}
}
config!: IConfig; config!: IConfig;
futureParticipations: IParticipant[] = []; futureParticipations: IParticipant[] = [];
groupEvents: IEvent[] = [];
hasMoreFutureParticipations = true; hasMoreFutureParticipations = true;
pastParticipations: IParticipant[] = []; pastParticipations: Paginate<IParticipant> = { elements: [], total: 0 };
hasMorePastParticipations = true; hasMorePastParticipations = true;
@ -216,49 +368,68 @@ export default class MyEvents extends Vue {
supportsWebPFormat = supportsWebPFormat; supportsWebPFormat = supportsWebPFormat;
static monthlyParticipations( static monthlyEvents(
participations: IParticipant[], elements: Eventable[],
revertSort = false revertSort = false
): Map<string, Participant[]> { ): Map<string, Eventable[]> {
const res = participations.filter( const res = elements.filter((element: Eventable) => {
({ event, role }) => if ("role" in element) {
event.beginsOn != null && role !== ParticipantRole.REJECTED return (
); element.event.beginsOn != null &&
if (revertSort) { element.role !== ParticipantRole.REJECTED
res.sort(
(a: IParticipant, b: IParticipant) =>
b.event.beginsOn.getTime() - a.event.beginsOn.getTime()
);
} else {
res.sort(
(a: IParticipant, b: IParticipant) =>
a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
); );
} }
return res.reduce( return element.beginsOn != null;
(acc: Map<string, IParticipant[]>, participation: IParticipant) => { });
const month = new Date(participation.event.beginsOn).toLocaleDateString( if (revertSort) {
undefined, res.sort((a: Eventable, b: Eventable) => {
{ const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
return new Date(bTime).getTime() - new Date(aTime).getTime();
});
} else {
res.sort((a: Eventable, b: Eventable) => {
const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
return new Date(aTime).getTime() - new Date(bTime).getTime();
});
}
return res.reduce((acc: Map<string, Eventable[]>, element: Eventable) => {
const month = new Date(
"role" in element ? element.event.beginsOn : element.beginsOn
).toLocaleDateString(undefined, {
year: "numeric", year: "numeric",
month: "long", month: "long",
} });
); const filteredElements: Eventable[] = acc.get(month) || [];
const filteredParticipations: IParticipant[] = acc.get(month) || []; filteredElements.push(element);
filteredParticipations.push(participation); acc.set(month, filteredElements);
acc.set(month, filteredParticipations);
return acc; return acc;
}, }, new Map());
new Map()
);
} }
get monthlyFutureParticipations(): Map<string, Participant[]> { get monthlyFutureEvents(): Map<string, Eventable[]> {
return MyEvents.monthlyParticipations(this.futureParticipations); let eventable = [] as Eventable[];
if (this.showAttending) {
eventable = [...eventable, ...this.futureParticipations];
}
if (this.showMyGroups) {
eventable = [...eventable, ...this.groupEvents];
}
return MyEvents.monthlyEvents(eventable);
} }
get monthlyPastParticipations(): Map<string, Participant[]> { get monthlyPastParticipations(): Map<string, Eventable[]> {
return MyEvents.monthlyParticipations(this.pastParticipations, true); return MyEvents.monthlyEvents(this.pastParticipations.elements, true);
}
monthParticipationsIds(elements: Eventable[]): string[] {
let res = elements.filter((element: Eventable) => {
return "role" in element;
}) as IParticipant[];
return res.map(({ event }: { event: IEvent }) => {
return event.id as string;
});
} }
loadMoreFutureParticipations(): void { loadMoreFutureParticipations(): void {
@ -287,9 +458,12 @@ export default class MyEvents extends Vue {
this.futureParticipations = this.futureParticipations.filter( this.futureParticipations = this.futureParticipations.filter(
(participation) => participation.event.id !== eventid (participation) => participation.event.id !== eventid
); );
this.pastParticipations = this.pastParticipations.filter( this.pastParticipations = {
elements: this.pastParticipations.elements.filter(
(participation) => participation.event.id !== eventid (participation) => participation.event.id !== eventid
); ),
total: this.pastParticipations.total - 1,
};
} }
get hideCreateEventButton(): boolean { get hideCreateEventButton(): boolean {
@ -300,6 +474,8 @@ export default class MyEvents extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~bulma/sass/utilities/mixins.sass";
main > .container { main > .container {
background: $white; background: $white;
@ -335,6 +511,7 @@ section {
} }
.not-found { .not-found {
margin-top: 2rem;
.img-container { .img-container {
background-image: url("../../../public/img/pics/event_creation-480w.jpg"); background-image: url("../../../public/img/pics/event_creation-480w.jpg");
@media (min-resolution: 2dppx) { @media (min-resolution: 2dppx) {
@ -359,4 +536,41 @@ section {
margin: auto auto 1rem; margin: auto auto 1rem;
} }
} }
.wrapper {
display: grid;
grid-template-areas: "filter" "events";
align-items: start;
@include desktop {
gap: 2rem;
grid-template-columns: 1fr 3fr;
grid-template-areas: "filter events";
}
.event-filter {
grid-area: filter;
background: lightgray;
border-radius: 5px;
padding: 0.75rem 1.25rem 0.25rem;
@include desktop {
padding: 2rem 1.25rem;
::v-deep .field.is-grouped {
display: block;
}
}
::v-deep .field > .field {
margin: 0 auto 1.25rem !important;
}
.date-filter ::v-deep .field-body {
display: block;
}
}
.my-events {
grid-area: events;
}
}
</style> </style>

View file

@ -149,6 +149,7 @@
currentActor.id currentActor.id
" "
@click="joinGroup" @click="joinGroup"
@keyup.enter="joinGroup"
type="is-primary" type="is-primary"
:disabled="previewPublic" :disabled="previewPublic"
>{{ $t("Join group") }}</b-button >{{ $t("Join group") }}</b-button
@ -164,10 +165,64 @@
type="is-primary" type="is-primary"
>{{ $t("Join group") }}</b-button >{{ $t("Join group") }}</b-button
> >
<b-button
v-if="
((!isCurrentActorFollowing && !isCurrentActorAGroupMember) ||
previewPublic) &&
!isCurrentActorPendingFollow &&
currentActor.id
"
@click="followGroup"
@keyup.enter="followGroup"
type="is-primary"
:disabled="isCurrentActorPendingFollow"
>{{ $t("Follow") }}</b-button
>
<b-button
tag="router-link"
:to="{
name: RouteName.GROUP_FOLLOW,
params: { preferredUsername: usernameWithDomain(group) },
}"
v-else-if="
!isCurrentActorPendingFollow &&
!isCurrentActorFollowing &&
previewPublic
"
:disabled="previewPublic"
type="is-primary"
>{{ $t("Follow") }}</b-button
>
<b-button
outlined
v-if="isCurrentActorPendingFollow && currentActor.id"
@click="unFollowGroup"
@keyup.enter="unFollowGroup"
type="is-primary"
>{{ $t("Cancel follow request") }}</b-button
><b-button
v-if="
isCurrentActorFollowing && !previewPublic && currentActor.id
"
type="is-primary"
@click="unFollowGroup"
>{{ $t("Unfollow") }}</b-button
>
<b-button
v-if="isCurrentActorFollowing"
@click="toggleFollowNotify"
@keyup.enter="toggleFollowNotify"
:icon-left="
isCurrentActorFollowingNotify
? 'bell-outline'
: 'bell-off-outline'
"
></b-button>
<b-button <b-button
outlined outlined
icon-left="share" icon-left="share"
@click="triggerShare()" @click="triggerShare()"
@keyup.enter="triggerShare()"
v-if="!isCurrentActorAGroupMember || previewPublic" v-if="!isCurrentActorAGroupMember || previewPublic"
> >
{{ $t("Share") }} {{ $t("Share") }}
@ -196,6 +251,7 @@
v-if="!previewPublic && isCurrentActorAGroupMember" v-if="!previewPublic && isCurrentActorAGroupMember"
aria-role="menuitem" aria-role="menuitem"
@click="triggerShare()" @click="triggerShare()"
@keyup.enter="triggerShare()"
> >
<span> <span>
<b-icon icon="share" /> <b-icon icon="share" />
@ -230,6 +286,7 @@
v-if="ableToReport" v-if="ableToReport"
aria-role="menuitem" aria-role="menuitem"
@click="isReportModalActive = true" @click="isReportModalActive = true"
@keyup.enter="isReportModalActive = true"
> >
<span> <span>
<b-icon icon="flag" /> <b-icon icon="flag" />
@ -239,7 +296,8 @@
<b-dropdown-item <b-dropdown-item
aria-role="menuitem" aria-role="menuitem"
v-if="isCurrentActorAGroupMember && !previewPublic" v-if="isCurrentActorAGroupMember && !previewPublic"
@click="leaveGroup" @click="openLeaveGroupModal"
@keyup.enter="openLeaveGroupModal"
> >
<span> <span>
<b-icon icon="exit-to-app" /> <b-icon icon="exit-to-app" />
@ -351,8 +409,8 @@
class="organized-events-wrapper" class="organized-events-wrapper"
v-if="group && group.organizedEvents.total > 0" v-if="group && group.organizedEvents.total > 0"
> >
<EventMinimalistCard <event-minimalist-card
v-for="event in group.organizedEvents.elements" v-for="event in group.organizedEvents.elements.slice(0, 3)"
:event="event" :event="event"
:key="event.uuid" :key="event.uuid"
class="organized-event" class="organized-event"
@ -386,13 +444,11 @@
}" }"
> >
<template v-slot:default> <template v-slot:default>
<div v-if="group.posts.total > 0" class="posts-wrapper"> <multi-post-list-item
<post-list-item v-if="group.posts.total > 0"
v-for="post in group.posts.elements" :posts="group.posts.elements.slice(0, 3)"
:key="post.id" :isCurrentActorMember="isCurrentActorAGroupMember"
:post="post"
/> />
</div>
<empty-content v-else-if="group" icon="bullhorn" :inline="true"> <empty-content v-else-if="group" icon="bullhorn" :inline="true">
{{ $t("No posts yet") }} {{ $t("No posts yet") }}
</empty-content> </empty-content>
@ -425,7 +481,7 @@
}} }}
</event-metadata-block> </event-metadata-block>
<event-metadata-block <event-metadata-block
v-if="physicalAddress" v-if="physicalAddress && physicalAddress.url"
:title="$t('Location')" :title="$t('Location')"
:icon=" :icon="
physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth' physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'
@ -452,6 +508,7 @@
<span <span
class="map-show-button" class="map-show-button"
@click="showMap = !showMap" @click="showMap = !showMap"
@keyup.enter="showMap = !showMap"
v-if="physicalAddress.geom" v-if="physicalAddress.geom"
>{{ $t("Show map") }}</span >{{ $t("Show map") }}</span
> >
@ -477,8 +534,8 @@
class="organized-events-wrapper" class="organized-events-wrapper"
v-if="group && organizedEvents.elements.length > 0" v-if="group && organizedEvents.elements.length > 0"
> >
<EventMinimalistCard <event-minimalist-card
v-for="event in organizedEvents.elements" v-for="event in organizedEvents.elements.slice(0, 3)"
:event="event" :event="event"
:key="event.uuid" :key="event.uuid"
class="organized-event" class="organized-event"
@ -486,6 +543,18 @@
</div> </div>
<empty-content v-else-if="group" icon="calendar" :inline="true"> <empty-content v-else-if="group" icon="calendar" :inline="true">
{{ $t("No public upcoming events") }} {{ $t("No public upcoming events") }}
<template #desc v-if="isCurrentActorFollowing">
<i18n
class="has-text-grey-dark"
path="You will receive notifications about this group's public activity depending on %{notification_settings}."
>
<router-link
:to="{ name: RouteName.NOTIFICATIONS }"
slot="notification_settings"
>{{ $t("your notification settings") }}</router-link
>
</i18n>
</template>
</empty-content> </empty-content>
<b-skeleton animated v-else-if="$apollo.loading"></b-skeleton> <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
<router-link <router-link
@ -500,13 +569,21 @@
</section> </section>
<section> <section>
<subtitle>{{ $t("Latest posts") }}</subtitle> <subtitle>{{ $t("Latest posts") }}</subtitle>
<div v-if="posts.elements.length > 0" class="posts-wrapper">
<post-list-item <multi-post-list-item
v-for="post in posts.elements" v-if="
:key="post.id" posts.elements.filter(
:post="post" (post) =>
!post.draft && post.visibility === PostVisibility.PUBLIC
).length > 0
"
:posts="
posts.elements.filter(
(post) =>
!post.draft && post.visibility === PostVisibility.PUBLIC
)
"
/> />
</div>
<empty-content v-else-if="group" icon="bullhorn" :inline="true"> <empty-content v-else-if="group" icon="bullhorn" :inline="true">
{{ $t("No posts yet") }} {{ $t("No posts yet") }}
</empty-content> </empty-content>
@ -568,7 +645,7 @@ import Subtitle from "@/components/Utils/Subtitle.vue";
import CompactTodo from "@/components/Todo/CompactTodo.vue"; import CompactTodo from "@/components/Todo/CompactTodo.vue";
import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue"; import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue"; import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
import PostListItem from "@/components/Post/PostListItem.vue"; import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
import ResourceItem from "@/components/Resource/ResourceItem.vue"; import ResourceItem from "@/components/Resource/ResourceItem.vue";
import FolderItem from "@/components/Resource/FolderItem.vue"; import FolderItem from "@/components/Resource/FolderItem.vue";
import { Address } from "@/types/address.model"; import { Address } from "@/types/address.model";
@ -586,7 +663,7 @@ import { IMember } from "@/types/actor/member.model";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import GroupSection from "../../components/Group/GroupSection.vue"; import GroupSection from "../../components/Group/GroupSection.vue";
import ReportModal from "../../components/Report/ReportModal.vue"; import ReportModal from "../../components/Report/ReportModal.vue";
import { PERSON_MEMBERSHIP_GROUP } from "@/graphql/actor"; import { PERSON_STATUS_GROUP } from "@/graphql/actor";
import { LEAVE_GROUP } from "@/graphql/group"; import { LEAVE_GROUP } from "@/graphql/group";
import LazyImageWrapper from "../../components/Image/LazyImageWrapper.vue"; import LazyImageWrapper from "../../components/Image/LazyImageWrapper.vue";
import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue"; import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
@ -594,6 +671,11 @@ import EmptyContent from "../../components/Utils/EmptyContent.vue";
import { Paginate } from "@/types/paginate"; import { Paginate } from "@/types/paginate";
import { IEvent } from "@/types/event.model"; import { IEvent } from "@/types/event.model";
import { IPost } from "@/types/post.model"; import { IPost } from "@/types/post.model";
import {
FOLLOW_GROUP,
UNFOLLOW_GROUP,
UPDATE_GROUP_FOLLOW,
} from "@/graphql/followers";
@Component({ @Component({
apollo: { apollo: {
@ -601,7 +683,7 @@ import { IPost } from "@/types/post.model";
}, },
components: { components: {
DiscussionListItem, DiscussionListItem,
PostListItem, MultiPostListItem,
EventMinimalistCard, EventMinimalistCard,
CompactTodo, CompactTodo,
Subtitle, Subtitle,
@ -645,6 +727,8 @@ export default class Group extends mixins(GroupMixin) {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
PostVisibility = PostVisibility;
Openness = Openness; Openness = Openness;
showMap = false; showMap = false;
@ -674,7 +758,7 @@ export default class Group extends mixins(GroupMixin) {
}, },
refetchQueries: [ refetchQueries: [
{ {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
variables: { variables: {
id: currentActorId, id: currentActorId,
group, group,
@ -684,6 +768,20 @@ export default class Group extends mixins(GroupMixin) {
}); });
} }
protected async openLeaveGroupModal(): Promise<void> {
this.$buefy.dialog.confirm({
type: "is-danger",
title: this.$t("Leave group") as string,
message: this.$t(
"Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone.",
{ groupName: `<b>${displayName(this.group)}</b>` }
) as string,
onConfirm: () => this.leaveGroup(),
confirmText: this.$t("Leave group") as string,
cancelText: this.$t("Cancel") as string,
});
}
async leaveGroup(): Promise<void> { async leaveGroup(): Promise<void> {
try { try {
const [group, currentActorId] = [ const [group, currentActorId] = [
@ -697,7 +795,7 @@ export default class Group extends mixins(GroupMixin) {
}, },
refetchQueries: [ refetchQueries: [
{ {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
variables: { variables: {
id: currentActorId, id: currentActorId,
group, group,
@ -712,6 +810,73 @@ export default class Group extends mixins(GroupMixin) {
} }
} }
async followGroup(): Promise<void> {
try {
const [group, currentActorId] = [
usernameWithDomain(this.group),
this.currentActor.id,
];
await this.$apollo.mutate({
mutation: FOLLOW_GROUP,
variables: {
groupId: this.group.id,
},
refetchQueries: [
{
query: PERSON_STATUS_GROUP,
variables: {
id: currentActorId,
group,
},
},
],
});
} catch (error: any) {
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message);
}
}
}
async unFollowGroup(): Promise<void> {
console.debug("unfollow group");
try {
const [group, currentActorId] = [
usernameWithDomain(this.group),
this.currentActor.id,
];
await this.$apollo.mutate({
mutation: UNFOLLOW_GROUP,
variables: {
groupId: this.group.id,
},
refetchQueries: [
{
query: PERSON_STATUS_GROUP,
variables: {
id: currentActorId,
group,
},
},
],
});
} catch (error: any) {
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message);
}
}
}
async toggleFollowNotify(): Promise<void> {
await this.$apollo.mutate({
mutation: UPDATE_GROUP_FOLLOW,
variables: {
followId: this.currentActorFollow?.id,
notify: !this.isCurrentActorFollowingNotify,
},
});
}
acceptInvitation(): void { acceptInvitation(): void {
if (this.groupMember) { if (this.groupMember) {
const index = this.person.memberships.elements.findIndex( const index = this.person.memberships.elements.findIndex(
@ -882,8 +1047,8 @@ export default class Group extends mixins(GroupMixin) {
return { return {
total: this.group.posts.total, total: this.group.posts.total,
elements: this.group.posts.elements.filter((post: IPost) => { elements: this.group.posts.elements.filter((post: IPost) => {
if (this.previewPublic) { if (this.previewPublic || !this.isCurrentActorAGroupMember) {
return !(post.draft || post.visibility == PostVisibility.PRIVATE); return !post.draft && post.visibility == PostVisibility.PUBLIC;
} }
return true; return true;
}), }),
@ -1010,19 +1175,6 @@ div.container {
section { section {
background: $white; background: $white;
.posts-wrapper {
padding-bottom: 1rem;
}
.organized-events-wrapper {
display: flex;
flex-wrap: wrap;
.organized-event {
margin: 0.25rem 0;
}
}
&.presentation { &.presentation {
.media-left { .media-left {
span.icon.is-large { span.icon.is-large {
@ -1155,6 +1307,7 @@ div.container {
min-width: 20rem; min-width: 20rem;
flex: 2; flex: 2;
background: white; background: white;
padding: 0 5px;
@include desktop { @include desktop {
padding: 10px; padding: 10px;
@ -1171,10 +1324,6 @@ div.container {
section { section {
margin-top: 0; margin-top: 0;
.posts-wrapper {
margin-bottom: 1rem;
}
} }
} }
@ -1184,5 +1333,12 @@ div.container {
padding-right: 1rem; padding-right: 1rem;
} }
} }
.organized-events-wrapper,
.posts-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr;
}
} }
</style> </style>

View file

@ -31,6 +31,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<b-loading :active="$apollo.loading" />
<section <section
class="container section" class="container section"
v-if="group && isCurrentActorAGroupAdmin && followers" v-if="group && isCurrentActorAGroupAdmin && followers"
@ -125,7 +126,7 @@
</template> </template>
</b-table> </b-table>
</section> </section>
<b-message v-else-if="group"> <b-message v-else-if="!$apollo.loading && group">
{{ $t("You are not an administrator for this group.") }} {{ $t("You are not an administrator for this group.") }}
</b-message> </b-message>
</div> </div>

View file

@ -31,6 +31,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<b-loading :active="$apollo.loading" />
<section <section
class="container section" class="container section"
v-if="group && isCurrentActorAGroupAdmin" v-if="group && isCurrentActorAGroupAdmin"
@ -230,7 +231,7 @@
</template> </template>
</b-table> </b-table>
</section> </section>
<b-message v-else-if="group"> <b-message v-else-if="!$apollo.loading && group">
{{ $t("You are not an administrator for this group.") }} {{ $t("You are not an administrator for this group.") }}
</b-message> </b-message>
</div> </div>

View file

@ -32,6 +32,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<b-loading :active="$apollo.loading" />
<section <section
class="container section" class="container section"
v-if="group && isCurrentActorAGroupAdmin" v-if="group && isCurrentActorAGroupAdmin"
@ -169,7 +170,7 @@
{{ value }} {{ value }}
</b-message> </b-message>
</section> </section>
<b-message v-else> <b-message v-else-if="!$apollo.loading">
{{ $t("You are not an administrator for this group.") }} {{ $t("You are not an administrator for this group.") }}
</b-message> </b-message>
</div> </div>
@ -178,12 +179,11 @@
<script lang="ts"> <script lang="ts">
import { Component, Watch } from "vue-property-decorator"; import { Component, Watch } from "vue-property-decorator";
import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue"; import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
import { Route } from "vue-router";
import PictureUpload from "@/components/PictureUpload.vue"; import PictureUpload from "@/components/PictureUpload.vue";
import { mixins } from "vue-class-component"; 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, DELETE_GROUP } from "../../graphql/group"; import { UPDATE_GROUP } from "../../graphql/group";
import { IGroup, usernameWithDomain } from "../../types/actor"; import { 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";
@ -246,31 +246,6 @@ export default class GroupSettings extends mixins(GroupMixin) {
this.handleError(err); this.handleError(err);
} }
} }
confirmDeleteGroup(): void {
this.$buefy.dialog.confirm({
title: this.$t("Delete group") as string,
message: this.$t(
"Are you sure you want to <b>completely delete</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
) as string,
confirmText: this.$t("Delete group") as string,
cancelText: this.$t("Cancel") as string,
type: "is-danger",
hasIcon: true,
onConfirm: () => this.deleteGroup(),
});
}
async deleteGroup(): Promise<Route> {
await this.$apollo.mutate<{ deleteGroup: IGroup }>({
mutation: DELETE_GROUP,
variables: {
groupId: this.group.id,
},
});
return this.$router.push({ name: RouteName.MY_GROUPS });
}
async copyURL(): Promise<void> { async copyURL(): Promise<void> {
await window.navigator.clipboard.writeText(this.group.url); await window.navigator.clipboard.writeText(this.group.url);
this.showCopiedTooltip = true; this.showCopiedTooltip = true;

View file

@ -1,5 +1,6 @@
<template> <template>
<div id="homepage"> <div id="homepage">
<b-loading :active.sync="$apollo.loading" />
<section <section
class="hero" class="hero"
:class="{ webp: supportsWebPFormat }" :class="{ webp: supportsWebPFormat }"
@ -59,19 +60,9 @@
<i18n tag="span" path="On {instance} and other federated instances"> <i18n tag="span" path="On {instance} and other federated instances">
<b slot="instance">{{ config.name }}</b> <b slot="instance">{{ config.name }}</b>
</i18n> </i18n>
<b-loading :active.sync="$apollo.loading" />
</p> </p>
<b-loading :active.sync="$apollo.loading" />
<div v-if="this.events.total > 0"> <div v-if="this.events.total > 0">
<div class="columns is-multiline"> <multi-card :events="events.elements.slice(0, 6)" />
<div
class="column is-one-third-desktop"
v-for="event in this.events.elements.slice(0, 6)"
:key="event.uuid"
>
<EventCard :event="event" />
</div>
</div>
<span class="view-all"> <span class="view-all">
<router-link :to="{ name: RouteName.SEARCH }" <router-link :to="{ name: RouteName.SEARCH }"
>{{ $t("View everything") }} >></router-link >{{ $t("View everything") }} >></router-link
@ -181,10 +172,7 @@
</div> </div>
</div> </div>
</div> </div>
<div <div class="container section" v-if="config && loggedUserSettings">
class="container section"
v-if="config && loggedUser && loggedUser.settings"
>
<section v-if="currentActor.id && (welcomeBack || newRegisteredUser)"> <section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
<b-message type="is-info" v-if="welcomeBack">{{ <b-message type="is-info" v-if="welcomeBack">{{
$t("Welcome back {username}!", { $t("Welcome back {username}!", {
@ -200,7 +188,6 @@
<!-- Your upcoming events --> <!-- Your upcoming events -->
<section v-if="canShowMyUpcomingEvents"> <section v-if="canShowMyUpcomingEvents">
<h2 class="title">{{ $t("Your upcoming events") }}</h2> <h2 class="title">{{ $t("Your upcoming events") }}</h2>
<b-loading :active.sync="$apollo.loading" />
<div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]"> <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
<p <p
class="date-component-container" class="date-component-container"
@ -226,7 +213,7 @@
</span> </span>
</p> </p>
<div> <div>
<EventListCard <event-participation-card
v-for="participation in thisWeek(row)" v-for="participation in thisWeek(row)"
@event-deleted="eventDeleted" @event-deleted="eventDeleted"
:key="participation[1].id" :key="participation[1].id"
@ -243,27 +230,36 @@
<hr <hr
role="presentation" role="presentation"
class="home-separator" class="home-separator"
v-if="canShowMyUpcomingEvents && canShowLastWeekEvents" v-if="canShowMyUpcomingEvents && canShowFollowedGroupEvents"
/> />
<!-- Last week events --> <!-- Events from your followed groups -->
<section v-if="canShowLastWeekEvents"> <section class="followActivity" v-if="canShowFollowedGroupEvents">
<h2 class="title">{{ $t("Last week") }}</h2> <h2 class="title">
<b-loading :active.sync="$apollo.loading" /> {{ $t("Upcoming events from your groups") }}
<div> </h2>
<EventListCard <p>{{ $t("That you follow or of which you are a member") }}</p>
v-for="participation in lastWeekEvents" <multi-card :events="filteredFollowedGroupsEvents" />
:key="participation.id" <span class="view-all">
:participation="participation" <router-link
@event-deleted="eventDeleted" :to="{
:options="{ hideDate: false }" name: RouteName.MY_EVENTS,
/> query: {
</div> showUpcoming: 'true',
showDrafts: 'false',
showAttending: 'false',
showMyGroups: 'true',
},
}"
>{{ $t("View everything") }} >></router-link
>
</span>
</section> </section>
<hr <hr
role="presentation" role="presentation"
class="home-separator" class="home-separator"
v-if="canShowLastWeekEvents && canShowCloseEvents" v-if="canShowFollowedGroupEvents && canShowCloseEvents"
/> />
<!-- Events close to you --> <!-- Events close to you -->
<section class="events-close" v-if="canShowCloseEvents"> <section class="events-close" v-if="canShowCloseEvents">
<h2 class="title"> <h2 class="title">
@ -273,10 +269,10 @@
{{ {{
$tc( $tc(
"Within {number} kilometers of {place}", "Within {number} kilometers of {place}",
loggedUser.settings.location.range, loggedUserSettings.location.range,
{ {
number: loggedUser.settings.location.range, number: loggedUserSettings.location.range,
place: loggedUser.settings.location.name, place: loggedUserSettings.location.name,
} }
) )
}} }}
@ -286,24 +282,13 @@
> >
<b-icon class="clickable" icon="pencil" size="is-small" /> <b-icon class="clickable" icon="pencil" size="is-small" />
</router-link> </router-link>
<b-loading :active.sync="$apollo.loading" />
</p> </p>
<div class="columns is-multiline"> <multi-card :events="closeEvents.elements.slice(0, 3)" />
<div
class="column is-one-third-desktop"
v-for="event in closeEvents.elements.slice(0, 3)"
:key="event.uuid"
>
<event-card :event="event" />
</div>
</div>
</section> </section>
<hr <hr
role="presentation" role="presentation"
class="home-separator" class="home-separator"
v-if=" v-if="canShowMyUpcomingEvents || canShowCloseEvents"
canShowMyUpcomingEvents || canShowLastWeekEvents || canShowCloseEvents
"
/> />
<section class="events-recent"> <section class="events-recent">
<h2 class="title"> <h2 class="title">
@ -313,19 +298,10 @@
<i18n tag="span" path="On {instance} and other federated instances"> <i18n tag="span" path="On {instance} and other federated instances">
<b slot="instance">{{ config.name }}</b> <b slot="instance">{{ config.name }}</b>
</i18n> </i18n>
<b-loading :active.sync="$apollo.loading" />
</p> </p>
<div v-if="this.events.total > 0"> <div v-if="events.total > 0">
<div class="columns is-multiline"> <multi-card :events="events.elements.slice(0, 8)" />
<div
class="column is-one-third-desktop"
v-for="event in this.events.elements.slice(0, 6)"
:key="event.uuid"
>
<recent-event-card-wrapper :event="event" />
</div>
</div>
<span class="view-all"> <span class="view-all">
<router-link :to="{ name: RouteName.SEARCH }" <router-link :to="{ name: RouteName.SEARCH }"
>{{ $t("View everything") }} >></router-link >{{ $t("View everything") }} >></router-link
@ -334,7 +310,7 @@
</div> </div>
<b-message v-else type="is-danger" <b-message v-else type="is-danger"
>{{ $t("No events found") }}<br /> >{{ $t("No events found") }}<br />
<div v-if="goingToEvents.size > 0 || lastWeekEvents.length > 0"> <div v-if="goingToEvents.size > 0">
<b-icon size="is-small" icon="information-outline" /> <b-icon size="is-small" icon="information-outline" />
<small>{{ <small>{{
$t("The events you created are not shown here.") $t("The events you created are not shown here.")
@ -353,28 +329,29 @@ 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 { CLOSE_EVENTS, FETCH_EVENTS } from "../graphql/event";
import EventListCard from "../components/Event/EventListCard.vue"; import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
import EventCard from "../components/Event/EventCard.vue"; import MultiCard from "../components/Event/MultiCard.vue";
import RecentEventCardWrapper from "../components/Event/RecentEventCardWrapper.vue"; import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
import {
CURRENT_ACTOR_CLIENT,
LOGGED_USER_PARTICIPATIONS,
} from "../graphql/actor";
import { IPerson, Person } from "../types/actor"; import { IPerson, Person } from "../types/actor";
import { ICurrentUser, IUser } from "../types/current-user.model"; import {
import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user"; ICurrentUser,
IUser,
IUserSettings,
} from "../types/current-user.model";
import { CURRENT_USER_CLIENT } from "../graphql/user";
import { 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";
import { CONFIG } from "../graphql/config"; import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model"; import { IConfig } from "../types/config.model";
import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
import Subtitle from "../components/Utils/Subtitle.vue"; import Subtitle from "../components/Utils/Subtitle.vue";
@Component({ @Component({
apollo: { apollo: {
events: { events: {
query: FETCH_EVENTS, query: FETCH_EVENTS,
fetchPolicy: "no-cache", // Debug me: https://github.com/apollographql/apollo-client/issues/3030
variables: { variables: {
orderBy: EventSortField.INSERTED_AT, orderBy: EventSortField.INSERTED_AT,
direction: SortDirection.DESC, direction: SortDirection.DESC,
@ -385,35 +362,7 @@ import Subtitle from "../components/Utils/Subtitle.vue";
update: (data) => new Person(data.currentActor), update: (data) => new Person(data.currentActor),
}, },
currentUser: CURRENT_USER_CLIENT, currentUser: CURRENT_USER_CLIENT,
loggedUser: {
query: USER_SETTINGS,
fetchPolicy: "network-only",
skip() {
return !this.currentUser || this.currentUser.isLoggedIn === false;
},
error() {
return null;
},
},
config: CONFIG, config: CONFIG,
currentUserParticipations: {
query: LOGGED_USER_PARTICIPATIONS,
fetchPolicy: "cache-and-network",
variables() {
const lastWeek = new Date();
lastWeek.setDate(new Date().getDate() - 7);
return {
afterDateTime: lastWeek.toISOString(),
};
},
update: (data) =>
data.loggedUser.participations.elements.map(
(participation: IParticipant) => new Participant(participation)
),
skip() {
return this.currentUser?.isLoggedIn === false;
},
},
closeEvents: { closeEvents: {
query: CLOSE_EVENTS, query: CLOSE_EVENTS,
variables() { variables() {
@ -431,13 +380,30 @@ import Subtitle from "../components/Utils/Subtitle.vue";
); );
}, },
}, },
userQueries: {
query: HOME_USER_QUERIES,
update(data) {
console.log("loggedUser", data.loggedUser);
this.loggedUser = data.loggedUser;
this.followedGroupEvents = data.loggedUser.followedGroupEvents;
this.currentUserParticipations =
data.loggedUser.participations.elements.map(
(participation: IParticipant) => new Participant(participation)
);
},
variables: {
afterDateTime: new Date().toISOString(),
},
skip() {
return !this.currentUser?.isLoggedIn;
},
},
}, },
components: { components: {
Subtitle, Subtitle,
DateComponent, DateComponent,
EventListCard, EventParticipationCard,
EventCard, MultiCard,
RecentEventCardWrapper,
"settings-onboard": () => import("./User/SettingsOnboard.vue"), "settings-onboard": () => import("./User/SettingsOnboard.vue"),
}, },
metaInfo() { metaInfo() {
@ -461,9 +427,9 @@ export default class Home extends Vue {
country = { name: null }; country = { name: null };
currentUser!: IUser; currentUser!: ICurrentUser;
loggedUser!: ICurrentUser; loggedUser: IUser | null = null;
currentActor!: IPerson; currentActor!: IPerson;
@ -477,6 +443,11 @@ export default class Home extends Vue {
closeEvents: Paginate<IEvent> = { elements: [], total: 0 }; closeEvents: Paginate<IEvent> = { elements: [], total: 0 };
followedGroupEvents: Paginate<IFollowedGroupEvent> = {
elements: [],
total: 0,
};
// get displayed_name() { // get displayed_name() {
// return this.loggedPerson && this.loggedPerson.name === null // return this.loggedPerson && this.loggedPerson.name === null
// ? this.loggedPerson.preferredUsername // ? this.loggedPerson.preferredUsername
@ -584,20 +555,6 @@ export default class Home extends Vue {
); );
} }
get lastWeekEvents(): IParticipant[] {
const res = this.currentUserParticipations.filter(
({ event, role }) =>
event.beginsOn != null &&
this.isBefore(event.beginsOn.toDateString(), 0) &&
role !== ParticipantRole.REJECTED
);
res.sort(
(a: IParticipant, b: IParticipant) =>
a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
);
return res;
}
eventDeleted(eventid: string): void { eventDeleted(eventid: string): void {
this.currentUserParticipations = this.currentUserParticipations.filter( this.currentUserParticipations = this.currentUserParticipations.filter(
(participation) => participation.event.id !== eventid (participation) => participation.event.id !== eventid
@ -610,7 +567,7 @@ export default class Home extends Vue {
@Watch("loggedUser") @Watch("loggedUser")
detectEmptyUserSettings(loggedUser: IUser): void { detectEmptyUserSettings(loggedUser: IUser): void {
if (loggedUser && loggedUser.id && loggedUser.settings === null) { if (loggedUser?.id && loggedUser?.settings === null) {
this.$router.push({ this.$router.push({
name: RouteName.WELCOME_SCREEN, name: RouteName.WELCOME_SCREEN,
params: { step: "1" }, params: { step: "1" },
@ -618,16 +575,35 @@ export default class Home extends Vue {
} }
} }
get loggedUserSettings(): IUserSettings | undefined {
return this.loggedUser?.settings;
}
get canShowMyUpcomingEvents(): boolean { get canShowMyUpcomingEvents(): boolean {
return this.currentActor.id != undefined && this.goingToEvents.size > 0; return this.currentActor.id != undefined && this.goingToEvents.size > 0;
} }
get canShowLastWeekEvents(): boolean { get canShowCloseEvents(): boolean {
return this.currentActor && this.lastWeekEvents.length > 0; return (
this.loggedUser?.settings?.location != undefined &&
this.closeEvents.total > 0
);
} }
get canShowCloseEvents(): boolean { get canShowFollowedGroupEvents(): boolean {
return this.closeEvents.total > 0; return this.filteredFollowedGroupsEvents.length > 0;
}
get filteredFollowedGroupsEvents(): IEvent[] {
return this.followedGroupEvents.elements
.map(({ event }: { event: IEvent }) => event)
.filter(
({ id }) =>
!this.thisWeekGoingToEvents
.map(({ event: { id: event_id } }) => event_id)
.includes(id)
)
.slice(0, 3);
} }
} }
</script> </script>

View file

@ -119,9 +119,11 @@
}}</b-button> }}</b-button>
</span> </span>
<span class="navbar-item" v-if="this.isUpdate"> <span class="navbar-item" v-if="this.isUpdate">
<b-button type="is-danger is-outlined" @click="deletePost">{{ <b-button
$t("Delete post") type="is-danger is-outlined"
}}</b-button> @click="openDeletePostModal"
>{{ $t("Delete post") }}</b-button
>
</span> </span>
<!-- If an post has been published we can't make it draft anymore --> <!-- If an post has been published we can't make it draft anymore -->
<span class="navbar-item" v-if="post.draft === true"> <span class="navbar-item" v-if="post.draft === true">
@ -167,12 +169,7 @@ import {
import GroupMixin from "@/mixins/group"; import GroupMixin from "@/mixins/group";
import { PostVisibility } from "@/types/enums"; import { PostVisibility } from "@/types/enums";
import { CONFIG } from "../../graphql/config"; import { CONFIG } from "../../graphql/config";
import { import { CREATE_POST, UPDATE_POST } from "../../graphql/post";
FETCH_POST,
CREATE_POST,
UPDATE_POST,
DELETE_POST,
} from "../../graphql/post";
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import Editor from "../../components/Editor.vue"; import Editor from "../../components/Editor.vue";
@ -181,8 +178,9 @@ import TagInput from "../../components/Event/TagInput.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import Subtitle from "../../components/Utils/Subtitle.vue"; import Subtitle from "../../components/Utils/Subtitle.vue";
import PictureUpload from "../../components/PictureUpload.vue"; import PictureUpload from "../../components/PictureUpload.vue";
import { PERSON_MEMBERSHIP_GROUP } from "@/graphql/actor"; import { PERSON_STATUS_GROUP } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group"; import { FETCH_GROUP } from "@/graphql/group";
import PostMixin from "../../mixins/post";
@Component({ @Component({
apollo: { apollo: {
@ -198,20 +196,8 @@ import { FETCH_GROUP } from "@/graphql/group";
return !this.preferredUsername; return !this.preferredUsername;
}, },
}, },
post: {
query: FETCH_POST,
fetchPolicy: "cache-and-network",
variables() {
return {
slug: this.slug,
};
},
skip() {
return !this.slug;
},
},
person: { person: {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
@ -242,7 +228,7 @@ import { FETCH_GROUP } from "@/graphql/group";
}; };
}, },
}) })
export default class EditPost extends mixins(GroupMixin) { export default class EditPost extends mixins(GroupMixin, PostMixin) {
@Prop({ required: false, type: String }) slug: undefined | string; @Prop({ required: false, type: String }) slug: undefined | string;
@Prop({ required: false, type: String }) preferredUsername!: string; @Prop({ required: false, type: String }) preferredUsername!: string;
@ -266,7 +252,7 @@ export default class EditPost extends mixins(GroupMixin) {
RouteName = RouteName; RouteName = RouteName;
editablePost!: IPost; editablePost: IPost = this.post;
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
@ -338,23 +324,6 @@ export default class EditPost extends mixins(GroupMixin) {
} }
} }
async deletePost(): Promise<void> {
const { data } = await this.$apollo.mutate({
mutation: DELETE_POST,
variables: {
id: this.post.id,
},
});
if (data && this.post.attributedTo) {
this.$router.push({
name: RouteName.POSTS,
params: {
preferredUsername: usernameWithDomain(this.post.attributedTo),
},
});
}
}
static transformMessage(message: string[] | string): string | undefined { static transformMessage(message: string[] | string): string | undefined {
if (Array.isArray(message) && message.length > 0) { if (Array.isArray(message) && message.length > 0) {
return message[0]; return message[0];

View file

@ -49,10 +49,8 @@
> >
</div> </div>
<div class="post-list"> <div class="post-list">
<post-element-item <multi-post-list-item
v-for="post in group.posts.elements" :posts="group.posts.elements"
:key="post.id"
:post="post"
:isCurrentActorMember="isCurrentActorMember" :isCurrentActorMember="isCurrentActorMember"
/> />
</div> </div>
@ -88,7 +86,7 @@ import { Paginate } from "../../types/paginate";
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import { usernameWithDomain } from "../../types/actor"; import { usernameWithDomain } from "../../types/actor";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import PostElementItem from "../../components/Post/PostElementItem.vue"; import MultiPostListItem from "../../components/Post/MultiPostListItem.vue";
const POSTS_PAGE_LIMIT = 10; const POSTS_PAGE_LIMIT = 10;
@ -124,7 +122,7 @@ const POSTS_PAGE_LIMIT = 10;
}, },
}, },
components: { components: {
PostElementItem, MultiPostListItem,
}, },
metaInfo() { metaInfo() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -132,7 +130,7 @@ const POSTS_PAGE_LIMIT = 10;
const { group } = this; const { group } = this;
return { return {
title: this.$t("{group} posts", { title: this.$t("{group} posts", {
group: group.name || usernameWithDomain(group), group: group?.name || usernameWithDomain(group),
}) as string, }) as string,
}; };
}, },

View file

@ -7,7 +7,16 @@
<div class="heading-section"> <div class="heading-section">
<div class="heading-wrapper"> <div class="heading-wrapper">
<div class="title-metadata"> <div class="title-metadata">
<div class="title-wrapper">
<b-tag
class="mr-2"
type="is-warning"
size="is-medium"
v-if="post.draft"
>{{ $t("Draft") }}</b-tag
>
<h1 class="title">{{ post.title }}</h1> <h1 class="title">{{ post.title }}</h1>
</div>
<p class="metadata"> <p class="metadata">
<router-link <router-link
slot="author" slot="author"
@ -49,7 +58,14 @@
}} }}
</span> </span>
<span <span
v-if="post.visibility === PostVisibility.PRIVATE" v-if="post.visibility === PostVisibility.UNLISTED"
class="has-text-grey-dark"
>
<b-icon icon="link" size="is-small" />
{{ $t("Accessible only by link") }}
</span>
<span
v-else-if="post.visibility === PostVisibility.PRIVATE"
class="has-text-grey-dark" class="has-text-grey-dark"
> >
<b-icon icon="lock" size="is-small" /> <b-icon icon="lock" size="is-small" />
@ -61,21 +77,72 @@
</span> </span>
</p> </p>
</div> </div>
<p class="buttons" v-if="isCurrentActorMember"> <b-dropdown position="is-bottom-left" aria-role="list">
<b-tag type="is-warning" size="is-medium" v-if="post.draft">{{ <b-button slot="trigger" role="button" icon-right="dots-horizontal">
$t("Draft") {{ $t("Actions") }}
}}</b-tag> </b-button>
<router-link <b-dropdown-item
aria-role="listitem"
has-link
v-if=" v-if="
currentActor.id === post.author.id || currentActor.id === post.author.id ||
isCurrentActorAGroupModerator isCurrentActorAGroupModerator
" "
:to="{ name: RouteName.POST_EDIT, params: { slug: post.slug } }"
tag="button"
class="button is-text"
>{{ $t("Edit") }}</router-link
> >
</p> <router-link
:to="{
name: RouteName.POST_EDIT,
params: { slug: post.slug },
}"
>{{ $t("Edit") }} <b-icon icon="pencil"
/></router-link>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
v-if="
currentActor.id === post.author.id ||
isCurrentActorAGroupModerator
"
@click="openDeletePostModal"
@keyup.enter="openDeletePostModal"
>
{{ $t("Delete") }}
<b-icon icon="delete" />
</b-dropdown-item>
<hr
role="presentation"
class="dropdown-divider"
aria-role="menuitem"
v-if="
currentActor.id === post.author.id ||
isCurrentActorAGroupModerator
"
/>
<b-dropdown-item
aria-role="listitem"
v-if="!post.draft"
@click="triggerShare()"
@keyup.enter="triggerShare()"
>
<span>
{{ $t("Share this event") }}
<b-icon icon="share" />
</span>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
v-if="ableToReport"
@click="isReportModalActive = true"
@keyup.enter="isReportModalActive = true"
>
<span>
{{ $t("Report") }}
<b-icon icon="flag" />
</span>
</b-dropdown-item>
</b-dropdown>
</div> </div>
</div> </div>
</header> </header>
@ -108,6 +175,21 @@
<tag>{{ tag.title }}</tag> <tag>{{ tag.title }}</tag>
</router-link> </router-link>
</section> </section>
<b-modal
:active.sync="isReportModalActive"
has-modal-card
ref="reportModal"
>
<report-modal
:on-confirm="reportPost"
:title="$t('Report this post')"
:outside-domain="groupDomain"
@close="$refs.reportModal.close()"
/>
</b-modal>
<b-modal :active.sync="isShareModalActive" has-modal-card ref="shareModal">
<share-post-modal :post="post" />
</b-modal>
</article> </article>
</template> </template>
@ -120,10 +202,8 @@ import { IMember } from "@/types/actor/member.model";
import { import {
CURRENT_ACTOR_CLIENT, CURRENT_ACTOR_CLIENT,
PERSON_MEMBERSHIPS, PERSON_MEMBERSHIPS,
PERSON_MEMBERSHIP_GROUP, PERSON_STATUS_GROUP,
} from "../../graphql/actor"; } from "../../graphql/actor";
import { FETCH_POST } from "../../graphql/post";
import { IPost } from "../../types/post.model";
import { usernameWithDomain } from "../../types/actor"; import { usernameWithDomain } from "../../types/actor";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import Tag from "../../components/Tag.vue"; import Tag from "../../components/Tag.vue";
@ -132,9 +212,17 @@ import ActorInline from "../../components/Account/ActorInline.vue";
import { formatDistanceToNowStrict } from "date-fns"; import { formatDistanceToNowStrict } from "date-fns";
import { CURRENT_USER_CLIENT } from "@/graphql/user"; import { CURRENT_USER_CLIENT } from "@/graphql/user";
import { ICurrentUser } from "@/types/current-user.model"; import { ICurrentUser } from "@/types/current-user.model";
import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model";
import SharePostModal from "../../components/Post/SharePostModal.vue";
import { IReport } from "@/types/report.model";
import { CREATE_REPORT } from "@/graphql/report";
import ReportModal from "../../components/Report/ReportModal.vue";
import PostMixin from "../../mixins/post";
@Component({ @Component({
apollo: { apollo: {
config: CONFIG,
currentUser: CURRENT_USER_CLIENT, currentUser: CURRENT_USER_CLIENT,
currentActor: CURRENT_ACTOR_CLIENT, currentActor: CURRENT_ACTOR_CLIENT,
memberships: { memberships: {
@ -150,23 +238,8 @@ import { ICurrentUser } from "@/types/current-user.model";
return !this.currentActor || !this.currentActor.id; return !this.currentActor || !this.currentActor.id;
}, },
}, },
post: {
query: FETCH_POST,
fetchPolicy: "cache-and-network",
variables() {
return {
slug: this.slug,
};
},
skip() {
return !this.slug;
},
error({ graphQLErrors }) {
this.handleErrors(graphQLErrors);
},
},
person: { person: {
query: PERSON_MEMBERSHIP_GROUP, query: PERSON_STATUS_GROUP,
fetchPolicy: "cache-and-network", fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
@ -187,6 +260,8 @@ import { ICurrentUser } from "@/types/current-user.model";
Tag, Tag,
LazyImageWrapper, LazyImageWrapper,
ActorInline, ActorInline,
SharePostModal,
ReportModal,
}, },
metaInfo() { metaInfo() {
return { return {
@ -200,13 +275,13 @@ import { ICurrentUser } from "@/types/current-user.model";
}; };
}, },
}) })
export default class Post extends mixins(GroupMixin) { export default class Post extends mixins(GroupMixin, PostMixin) {
@Prop({ required: true, type: String }) slug!: string; @Prop({ required: true, type: String }) slug!: string;
post!: IPost;
memberships!: IMember[]; memberships!: IMember[];
config!: IConfig;
RouteName = RouteName; RouteName = RouteName;
currentUser!: ICurrentUser; currentUser!: ICurrentUser;
@ -217,11 +292,9 @@ export default class Post extends mixins(GroupMixin) {
PostVisibility = PostVisibility; PostVisibility = PostVisibility;
handleErrors(errors: any[]): void { isShareModalActive = false;
if (errors.some((error) => error.status_code === 404)) {
this.$router.replace({ name: RouteName.PAGE_NOT_FOUND }); isReportModalActive = false;
}
}
get isCurrentActorMember(): boolean { get isCurrentActorMember(): boolean {
if (!this.post.attributedTo || !this.memberships) return false; if (!this.post.attributedTo || !this.memberships) return false;
@ -236,6 +309,62 @@ export default class Post extends mixins(GroupMixin) {
ICurrentUserRole.MODERATOR, ICurrentUserRole.MODERATOR,
].includes(this.currentUser.role); ].includes(this.currentUser.role);
} }
get ableToReport(): boolean {
return (
this.config &&
(this.currentActor.id != null || this.config.anonymous.reports.allowed)
);
}
triggerShare(): void {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-start
if (navigator.share) {
navigator
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
.share({
title: this.post.title,
url: this.post.url,
})
.then(() => console.log("Successful share"))
.catch((error: any) => console.log("Error sharing", error));
} else {
this.isShareModalActive = true;
// send popup
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-end
}
async reportPost(content: string, forward: boolean): Promise<void> {
this.isReportModalActive = false;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this.$refs.reportModal.close();
const postTitle = this.post.title;
try {
await this.$apollo.mutate<IReport>({
mutation: CREATE_REPORT,
variables: {
postId: this.post.id,
reportedId: this.post.attributedTo?.id,
content,
forward,
},
});
this.$notifier.success(
this.$t("Post {eventTitle} reported", { postTitle }) as string
);
} catch (error) {
console.error(error);
}
}
get groupDomain(): string | undefined | null {
return this.post.attributedTo?.domain;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -261,16 +390,31 @@ article.post {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center;
.title-metadata { .title-metadata {
min-width: 300px; min-width: 300px;
flex: 20; flex: 20;
.title-wrapper {
display: inline;
.tag {
height: 38px;
vertical-align: text-bottom;
}
& > h1 {
display: inline;
}
}
p.metadata { p.metadata {
margin-top: 16px; margin-top: 10px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column;
*:not(:first-child) { *:not(:first-child) {
padding-left: 5px; padding-left: 5px;
@ -328,5 +472,14 @@ article.post {
} }
margin: 0 auto; margin: 0 auto;
a.dropdown-item,
.dropdown .dropdown-menu .has-link a,
button.dropdown-item {
white-space: nowrap;
width: 100%;
padding-right: 1rem;
text-align: right;
}
} }
</style> </style>

View file

@ -60,11 +60,11 @@
<hr <hr
role="presentation" role="presentation"
class="dropdown-divider" class="dropdown-divider"
v-if="config.resourceProviders.length" v-if="resourceProviders.length"
/> />
<b-dropdown-item <b-dropdown-item
aria-role="listitem" aria-role="listitem"
v-for="resourceProvider in config.resourceProviders" v-for="resourceProvider in resourceProviders"
:key="resourceProvider.software" :key="resourceProvider.software"
@click="createResourceFromProvider(resourceProvider)" @click="createResourceFromProvider(resourceProvider)"
> >
@ -418,6 +418,10 @@ export default class Resources extends Mixins(ResourceMixin) {
return this.filteredPath.slice(-1)[0]; return this.filteredPath.slice(-1)[0];
} }
get resourceProviders(): IProvider[] {
return this.config?.resourceProviders || [];
}
async createResource(): Promise<void> { async createResource(): Promise<void> {
if (!this.resource.actor) return; if (!this.resource.actor) return;
this.modalError = ""; this.modalError = "";

View file

@ -158,6 +158,7 @@ import AuthProviders from "../../components/User/AuthProviders.vue";
return { return {
title: this.$t("Login on Mobilizon!") as string, title: this.$t("Login on Mobilizon!") as string,
titleTemplate: "%s | Mobilizon", titleTemplate: "%s | Mobilizon",
meta: [{ name: "robots", content: "noindex" }],
}; };
}, },
}) })

View file

@ -60,6 +60,7 @@ import RouteName from "../../router/name";
metaInfo() { metaInfo() {
return { return {
title: this.$t("Resend confirmation email") as string, title: this.$t("Resend confirmation email") as string,
meta: [{ name: "robots", content: "noindex" }],
}; };
}, },
}) })

View file

@ -19,6 +19,7 @@ exports[`ParticipationWithoutAccount handles being already a participant 1`] = `
</div> </div>
</div> </div>
</section> </section>
<!---->
</article> </article>
</transition-stub> </transition-stub>
<transition-stub name="fade"> <transition-stub name="fade">
@ -30,6 +31,7 @@ exports[`ParticipationWithoutAccount handles being already a participant 1`] = `
<div class="media-content">You are already a participant of this event</div> <div class="media-content">You are already a participant of this event</div>
</div> </div>
</section> </section>
<!---->
</article> </article>
</transition-stub> </transition-stub>
<div class="field"><label class="label">Email address</label> <div class="field"><label class="label">Email address</label>
@ -88,6 +90,7 @@ exports[`ParticipationWithoutAccount renders the participation without account v
<div class="media-content">Unable to save your participation in this browser.</div> <div class="media-content">Unable to save your participation in this browser.</div>
</div> </div>
</section> </section>
<!---->
</article> </article>
</transition-stub> </transition-stub>
<p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p> <p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p>
@ -116,6 +119,7 @@ exports[`ParticipationWithoutAccount renders the warning if the event participat
<div class="media-content">Unable to save your participation in this browser.</div> <div class="media-content">Unable to save your participation in this browser.</div>
</div> </div>
</section> </section>
<!---->
</article> </article>
</transition-stub> </transition-stub>
<p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p> <p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p>

View file

@ -1,106 +0,0 @@
import { config, createLocalVue, mount } from "@vue/test-utils";
import PostElementItem from "@/components/Post/PostElementItem.vue";
import { formatDateTimeString } from "@/filters/datetime";
import Buefy from "buefy";
import VueRouter from "vue-router";
import { routes } from "@/router";
import { PostVisibility } from "@/types/enums";
const localVue = createLocalVue();
localVue.use(Buefy);
localVue.use(VueRouter);
const router = new VueRouter({ routes, mode: "history" });
localVue.filter("formatDateTimeString", formatDateTimeString);
config.mocks.$t = (key: string): string => key;
const postData = {
id: "1",
slug: "my-blog-post-some-uuid",
title: "My Blog Post",
body: "My content",
insertedAt: "2020-12-02T09:01:20.873Z",
visibility: PostVisibility.PUBLIC,
author: {
preferredUsername: "author",
domain: "remote-domain.tld",
name: "Author",
},
attributedTo: {
preferredUsername: "my-awesome-group",
domain: null,
name: "My Awesome Group",
},
};
const generateWrapper = (
customPostData: Record<string, unknown> = {},
isCurrentActorMember = false
) => {
return mount(PostElementItem, {
localVue,
router,
propsData: {
post: { ...postData, ...customPostData },
isCurrentActorMember,
},
});
};
describe("PostElementItem", () => {
it("renders post with basic informations", () => {
const wrapper = generateWrapper();
expect(wrapper.html()).toMatchSnapshot();
expect(
wrapper.find("a.post-minimalist-card-wrapper").attributes("href")
).toBe(`/p/${postData.slug}`);
expect(wrapper.find(".post-minimalist-title").text()).toContain(
postData.title
);
expect(wrapper.find(".metadata").text()).toContain(
formatDateTimeString(postData.insertedAt, undefined, false)
);
expect(wrapper.find(".metadata small").text()).not.toContain("Public");
});
it("shows the author if actor is a group member", () => {
const wrapper = generateWrapper({}, true);
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".metadata").text()).toContain(`Created by {username}`);
});
it("shows the draft tag if post is a draft", () => {
const wrapper = generateWrapper({ draft: true });
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.findComponent({ name: "b-tag" }).exists()).toBe(true);
});
it("tells if the post is public when the actor is a group member", () => {
const wrapper = generateWrapper({}, true);
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".metadata small").text()).toContain("Public");
});
it("tells if the post is accessible only through link", () => {
const wrapper = generateWrapper({ visibility: PostVisibility.UNLISTED });
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".metadata small").text()).toContain(
"Accessible through link"
);
});
it("tells if the post is accessible only to members", () => {
const wrapper = generateWrapper({ visibility: PostVisibility.PRIVATE });
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".metadata small").text()).toContain(
"Accessible only to members"
);
});
});

View file

@ -4,6 +4,8 @@ import Buefy from "buefy";
import VueRouter from "vue-router"; import VueRouter from "vue-router";
import { routes } from "@/router"; import { routes } from "@/router";
import { enUS } from "date-fns/locale"; import { enUS } from "date-fns/locale";
import { formatDateTimeString } from "@/filters/datetime";
import { i18n } from "@/utils/i18n";
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Buefy); localVue.use(Buefy);
@ -20,14 +22,23 @@ const postData = {
title: "My Blog Post", title: "My Blog Post",
body: "My content", body: "My content",
insertedAt: "2020-12-02T09:01:20.873Z", insertedAt: "2020-12-02T09:01:20.873Z",
tags: [],
}; };
const generateWrapper = (customPostData: Record<string, unknown> = {}) => { const generateWrapper = (
customPostData: Record<string, unknown> = {},
customProps: Record<string, unknown> = {}
) => {
return mount(PostListItem, { return mount(PostListItem, {
localVue, localVue,
router, router,
i18n,
propsData: { propsData: {
post: { ...postData, ...customPostData }, post: { ...postData, ...customPostData },
...customProps,
},
filters: {
formatDateTimeString,
}, },
}); });
}; };
@ -36,14 +47,40 @@ describe("PostListItem", () => {
it("renders post list item with basic informations", () => { it("renders post list item with basic informations", () => {
const wrapper = generateWrapper(); const wrapper = generateWrapper();
// can't use the snapshot feature because of `ago` expect(wrapper.html()).toMatchSnapshot();
expect( expect(
wrapper.find("a.post-minimalist-card-wrapper").attributes("href") wrapper.find("a.post-minimalist-card-wrapper").attributes("href")
).toBe(`/p/${postData.slug}`); ).toBe(`/p/${postData.slug}`);
expect(wrapper.find(".post-minimalist-title").text()).toContain( expect(wrapper.find(".post-minimalist-title").text()).toBe(postData.title);
postData.title
expect(wrapper.find(".post-publication-date").text()).toBe("Dec 2, 2020");
expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
});
it("renders post list item with tags", () => {
const wrapper = generateWrapper({
tags: [{ slug: "a-tag", title: "A tag" }],
});
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".tags").text()).toContain("A tag");
expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
});
it("renders post list item with publisher name", () => {
const wrapper = generateWrapper(
{ author: { name: "An author" } },
{ isCurrentActorMember: true }
); );
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.find(".post-publisher").exists()).toBeTruthy();
expect(wrapper.find(".post-publisher").text()).toContain("An author");
}); });
}); });

View file

@ -1,103 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PostElementItem renders post with basic informations 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<div class="title-info-wrapper">
<div class="media">
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
<div class="media-content">
<p class="post-minimalist-title">My Blog Post</p>
<div class="metadata">
<!---->
<!----> <small class="has-text-grey-dark">December 2, 2020</small>
<!---->
</div>
</div>
</div>
</div>
</a>
`;
exports[`PostElementItem shows the author if actor is a group member 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<div class="title-info-wrapper">
<div class="media">
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
<div class="media-content">
<p class="post-minimalist-title">My Blog Post</p>
<div class="metadata">
<!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">Created by {username}</small>
</div>
</div>
</div>
</div>
</a>
`;
exports[`PostElementItem shows the draft tag if post is a draft 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<div class="title-info-wrapper">
<div class="media">
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
<div class="media-content">
<p class="post-minimalist-title">My Blog Post</p>
<div class="metadata"><span class="tag is-warning is-small"><span class="">Draft</span>
<!----></span>
<!----> <small class="has-text-grey-dark">December 2, 2020</small>
<!---->
</div>
</div>
</div>
</div>
</a>
`;
exports[`PostElementItem tells if the post is accessible only through link 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<div class="title-info-wrapper">
<div class="media">
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
<div class="media-content">
<p class="post-minimalist-title">My Blog Post</p>
<div class="metadata">
<!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-link"></i></span>Accessible through link</small> <small class="has-text-grey-dark">December 2, 2020</small>
<!---->
</div>
</div>
</div>
</div>
</a>
`;
exports[`PostElementItem tells if the post is accessible only to members 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<div class="title-info-wrapper">
<div class="media">
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
<div class="media-content">
<p class="post-minimalist-title">My Blog Post</p>
<div class="metadata">
<!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-lock"></i></span>Accessible only to members</small> <small class="has-text-grey-dark">December 2, 2020</small>
<!---->
</div>
</div>
</div>
</div>
</a>
`;
exports[`PostElementItem tells if the post is public when the actor is a group member 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<div class="title-info-wrapper">
<div class="media">
<div class="media-left"><span class="icon is-large"><i class="mdi mdi-post mdi-48px"></i></span></div>
<div class="media-content">
<p class="post-minimalist-title">My Blog Post</p>
<div class="metadata">
<!----> <small class="has-text-grey-dark"><span class="icon is-small"><i class="mdi mdi-earth"></i></span>Public</small> <small class="has-text-grey-dark">December 2, 2020</small> <small class="has-text-grey-dark">Created by {username}</small>
</div>
</div>
</div>
</div>
</a>
`;

View file

@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PostListItem renders post list item with basic informations 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<!---->
<div class="title-info-wrapper has-text-grey-dark">
<p class="post-minimalist-title">My Blog Post</p>
<p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span class="has-text-grey-dark">Dec 2, 2020</span></p>
<!---->
<!---->
</div>
</a>
`;
exports[`PostListItem renders post list item with publisher name 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<!---->
<div class="title-info-wrapper has-text-grey-dark">
<p class="post-minimalist-title">My Blog Post</p>
<p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span class="has-text-grey-dark">Dec 2, 2020</span></p>
<!---->
<p class="post-publisher has-text-grey-dark"><span class="icon"><i class="mdi mdi-account-edit mdi-24px"></i></span> <span>Published by <b class="has-text-weight-medium">An author</b></span></p>
</div>
</a>
`;
exports[`PostListItem renders post list item with tags 1`] = `
<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper">
<!---->
<div class="title-info-wrapper has-text-grey-dark">
<p class="post-minimalist-title">My Blog Post</p>
<p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span class="has-text-grey-dark">Dec 2, 2020</span></p>
<div class="tags" style="display: inline;"><span class="icon"><i class="mdi mdi-tag mdi-24px"></i></span> <span class="tag"><!----><span class="">A tag</span>
<!----></span>
</div>
<!---->
</div>
</a>
`;

View file

@ -48,6 +48,7 @@ exports[`Reset page shows error if token is invalid 1`] = `
<div class="media-content">The token you provided is invalid.</div> <div class="media-content">The token you provided is invalid.</div>
</div> </div>
</section> </section>
<!---->
</article> </article>
</transition-stub> </transition-stub>
<form> <form>

View file

@ -21,7 +21,9 @@ module.exports = {
css: { css: {
loaderOptions: { loaderOptions: {
scss: { scss: {
additionalData: `@import "@/variables.scss";`, additionalData: `
@use "@/variables.scss" as *;
`,
sassOptions: { sassOptions: {
quietDeps: true, quietDeps: true,
}, },

File diff suppressed because it is too large Load diff

View file

@ -300,7 +300,7 @@ defmodule Mobilizon.Federation.ActivityPub.Utils do
end end
def origin_check?(id, %{"type" => type, "id" => actor_id} = _params) def origin_check?(id, %{"type" => type, "id" => actor_id} = _params)
when type in ["Actor", "Person", "Group"], when type in ["Actor", "Person", "Group", "Application"],
do: id == actor_id do: id == actor_id
def origin_check?(_id, %{"actor" => nil} = _args), do: false def origin_check?(_id, %{"actor" => nil} = _args), do: false

View file

@ -21,7 +21,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Event do
# We limit the max number of events that can be retrieved # We limit the max number of events that can be retrieved
@event_max_limit 100 @event_max_limit 100
@number_of_related_events 3 @number_of_related_events 4
@spec organizer_for_event(Event.t(), map(), Absinthe.Resolution.t()) :: @spec organizer_for_event(Event.t(), map(), Absinthe.Resolution.t()) ::
{:ok, Actor.t() | nil} | {:error, String.t()} {:ok, Actor.t() | nil} | {:error, String.t()}
@ -213,38 +213,19 @@ defmodule Mobilizon.GraphQL.Resolvers.Event do
""" """
@spec list_related_events(Event.t(), map(), Absinthe.Resolution.t()) :: {:ok, list(Event.t())} @spec list_related_events(Event.t(), map(), Absinthe.Resolution.t()) :: {:ok, list(Event.t())}
def list_related_events( def list_related_events(
%Event{tags: tags, organizer_actor: organizer_actor, uuid: uuid}, %Event{uuid: uuid} = event,
_args, _args,
_resolution _resolution
) do ) do
# We get the organizer's next public event # We get the organizer's next public event
events = events =
[Events.get_upcoming_public_event_for_actor(organizer_actor, uuid)] event
|> Enum.filter(&is_map/1) |> organizer_next_public_event()
# We find similar events with the same tags # We find similar events with the same tags
# uniq_by : It's possible event_from_same_actor is inside events_from_tags |> similar_events_common_tags(event)
events =
events
|> Enum.concat(Events.list_events_by_tags(tags, @number_of_related_events))
|> uniq_events()
# TODO: We should use tag_relations to find more appropriate events # TODO: We should use tag_relations to find more appropriate events
# We've considered all recommended events, so we fetch the latest events # We've considered all recommended events, so we fetch the latest events
events = |> add_latest_events()
if @number_of_related_events - length(events) > 0 do
events
|> Enum.concat(
Events.list_events(1, @number_of_related_events, :begins_on, :asc, true).elements
)
|> uniq_events()
else
events
end
events =
events
# We remove the same event from the results # We remove the same event from the results
|> Enum.filter(fn event -> event.uuid != uuid end) |> Enum.filter(fn event -> event.uuid != uuid end)
# We return only @number_of_related_events right now # We return only @number_of_related_events right now
@ -253,6 +234,39 @@ defmodule Mobilizon.GraphQL.Resolvers.Event do
{:ok, events} {:ok, events}
end end
@spec organizer_next_public_event(Event.t()) :: list(Event.t())
defp organizer_next_public_event(%Event{attributed_to: %Actor{} = group, uuid: uuid}) do
[Events.get_upcoming_public_event_for_actor(group, uuid)]
|> Enum.filter(&is_map/1)
end
defp organizer_next_public_event(%Event{organizer_actor: %Actor{} = profile, uuid: uuid}) do
[Events.get_upcoming_public_event_for_actor(profile, uuid)]
|> Enum.filter(&is_map/1)
end
@spec similar_events_common_tags(list(Event.t()), Event.t()) :: list(Event.t())
defp similar_events_common_tags(events, %Event{tags: tags, uuid: uuid}) do
events
|> Enum.concat(Events.list_events_by_tags(tags, @number_of_related_events))
|> Enum.filter(fn event -> event.uuid != uuid end)
# uniq_by : It's possible event_from_same_actor is inside events_from_tags
|> uniq_events()
end
@spec add_latest_events(list(Event.t())) :: list(Event.t())
defp add_latest_events(events) do
if @number_of_related_events - length(events) > 0 do
events
|> Enum.concat(
Events.list_events(1, @number_of_related_events + 1, :begins_on, :asc, true).elements
)
|> uniq_events()
else
events
end
end
@spec uniq_events(list(Event.t())) :: list(Event.t()) @spec uniq_events(list(Event.t())) :: list(Event.t())
defp uniq_events(events), do: Enum.uniq_by(events, fn event -> event.uuid end) defp uniq_events(events), do: Enum.uniq_by(events, fn event -> event.uuid end)

View file

@ -6,7 +6,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Group do
import Mobilizon.Users.Guards import Mobilizon.Users.Guards
alias Mobilizon.Config alias Mobilizon.Config
alias Mobilizon.{Actors, Events} alias Mobilizon.{Actors, Events}
alias Mobilizon.Actors.{Actor, Member} alias Mobilizon.Actors.{Actor, Follower, Member}
alias Mobilizon.Federation.ActivityPub.Actions alias Mobilizon.Federation.ActivityPub.Actions
alias Mobilizon.Federation.ActivityPub.Actor, as: ActivityPubActor alias Mobilizon.Federation.ActivityPub.Actor, as: ActivityPubActor
alias Mobilizon.GraphQL.API alias Mobilizon.GraphQL.API
@ -320,6 +320,82 @@ defmodule Mobilizon.GraphQL.Resolvers.Group do
{:error, dgettext("errors", "You need to be logged-in to leave a group")} {:error, dgettext("errors", "You need to be logged-in to leave a group")}
end end
@doc """
Follow a group
"""
@spec follow_group(any(), map(), Absinthe.Resolution.t()) ::
{:ok, Follower.t()} | {:error, String.t()}
def follow_group(_parent, %{group_id: group_id, notify: _notify}, %{
context: %{current_actor: %Actor{} = actor}
}) do
case Actors.get_actor(group_id) do
%Actor{type: :Group} = group ->
case Actions.Follow.follow(actor, group) do
{:ok, _activity, %Follower{} = follower} ->
{:ok, follower}
{:error, :already_following} ->
{:error, dgettext("errors", "You are already following this group")}
end
nil ->
{:error, dgettext("errors", "Group not found")}
end
end
def follow_group(_parent, _args, _resolution) do
{:error, dgettext("errors", "You need to be logged-in to follow a group")}
end
@doc """
Update a group follow
"""
@spec update_group_follow(any(), map(), Absinthe.Resolution.t()) ::
{:ok, Member.t()} | {:error, String.t()}
def update_group_follow(_parent, %{follow_id: follow_id, notify: notify}, %{
context: %{current_actor: %Actor{} = actor}
}) do
case Actors.get_follower(follow_id) do
%Follower{} = follower ->
if follower.actor_id == actor.id do
# Update notify
Actors.update_follower(follower, %{notify: notify})
else
{:error, dgettext("errors", "Follow does not match your account")}
end
nil ->
{:error, dgettext("errors", "Follow not found")}
end
end
def update_group_follow(_parent, _args, _resolution) do
{:error, dgettext("errors", "You need to be logged-in to update a group follow")}
end
@doc """
Unfollow a group
"""
@spec unfollow_group(any(), map(), Absinthe.Resolution.t()) ::
{:ok, Follower.t()} | {:error, String.t()}
def unfollow_group(_parent, %{group_id: group_id}, %{
context: %{current_actor: %Actor{} = actor}
}) do
case Actors.get_actor(group_id) do
%Actor{type: :Group} = group ->
with {:ok, _activity, %Follower{} = follower} <- Actions.Follow.unfollow(actor, group) do
{:ok, follower}
end
nil ->
{:error, dgettext("errors", "Group not found")}
end
end
def unfollow_group(_parent, _args, _resolution) do
{:error, dgettext("errors", "You need to be logged-in to unfollow a group")}
end
@spec find_events_for_group(Actor.t(), map(), Absinthe.Resolution.t()) :: @spec find_events_for_group(Actor.t(), map(), Absinthe.Resolution.t()) ::
{:ok, Page.t(Event.t())} {:ok, Page.t(Event.t())}
def find_events_for_group( def find_events_for_group(

View file

@ -6,7 +6,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Person do
import Mobilizon.Users.Guards import Mobilizon.Users.Guards
alias Mobilizon.{Actors, Events, Users} alias Mobilizon.{Actors, Events, Users}
alias Mobilizon.Actors.{Actor, Member} alias Mobilizon.Actors.{Actor, Follower, Member}
alias Mobilizon.Events.Participant alias Mobilizon.Events.Participant
alias Mobilizon.Storage.{Page, Repo} alias Mobilizon.Storage.{Page, Repo}
alias Mobilizon.Users.User alias Mobilizon.Users.User
@ -355,7 +355,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Person do
end end
@doc """ @doc """
Returns the list of events this person is going to Returns this person's group memberships
""" """
@spec person_memberships(Actor.t(), map(), map()) :: {:ok, Page.t()} | {:error, String.t()} @spec person_memberships(Actor.t(), map(), map()) :: {:ok, Page.t()} | {:error, String.t()}
def person_memberships(%Actor{id: actor_id} = person, %{group: group}, %{ def person_memberships(%Actor{id: actor_id} = person, %{group: group}, %{
@ -398,6 +398,49 @@ defmodule Mobilizon.GraphQL.Resolvers.Person do
end end
end end
@doc """
Returns this person's group follows
"""
@spec person_follows(Actor.t(), map(), map()) :: {:ok, Page.t()} | {:error, String.t()}
def person_follows(%Actor{} = person, %{group: group}, %{
context: %{current_user: %User{} = user}
}) do
if user_can_access_person_details?(person, user) do
with {:group, %Actor{} = group} <- {:group, Actors.get_actor_by_name(group, :Group)},
%Follower{} = follow <-
Actors.get_follower_by_followed_and_following(group, person) do
{:ok,
%Page{
total: 1,
elements: [follow]
}}
else
nil ->
{:ok, %Page{total: 0, elements: []}}
{:group, nil} ->
{:error, :group_not_found}
end
else
{:error, dgettext("errors", "Profile is not owned by authenticated user")}
end
end
def person_follows(
%Actor{} = person,
%{page: page, limit: limit},
%{
context: %{current_user: %User{} = user}
}
) do
if user_can_access_person_details?(person, user) do
follows = Actors.list_paginated_follows_for_actor(person, page, limit)
{:ok, follows}
else
{:error, dgettext("errors", "Profile is not owned by authenticated user")}
end
end
@spec user_for_person(Actor.t(), map(), Absinthe.Resolution.t()) :: @spec user_for_person(Actor.t(), map(), Absinthe.Resolution.t()) ::
{:ok, User.t() | nil} | {:error, String.t() | nil} {:ok, User.t() | nil} | {:error, String.t() | nil}
def user_for_person(%Actor{type: :Person, user_id: user_id}, _args, %{ def user_for_person(%Actor{type: :Person, user_id: user_id}, _args, %{

View file

@ -5,7 +5,7 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
import Mobilizon.Users.Guards import Mobilizon.Users.Guards
alias Mobilizon.{Actors, Admin, Config, Events, Users} alias Mobilizon.{Actors, Admin, Config, Events, FollowedGroupActivity, Users}
alias Mobilizon.Actors.Actor alias Mobilizon.Actors.Actor
alias Mobilizon.Federation.ActivityPub.{Actions, Relay} alias Mobilizon.Federation.ActivityPub.{Actions, Relay}
alias Mobilizon.Service.Auth.Authenticator alias Mobilizon.Service.Auth.Authenticator
@ -311,19 +311,20 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
def change_default_actor( def change_default_actor(
_parent, _parent,
%{preferred_username: username}, %{preferred_username: username},
%{context: %{current_user: %User{id: user_id} = user}} %{context: %{current_user: %User{} = user}}
) do ) do
with %Actor{id: actor_id} = actor <- Actors.get_local_actor_by_name(username), case Actors.get_local_actor_by_name(username) do
{:user_actor, true} <- %Actor{id: actor_id} = actor ->
{:user_actor, actor_id in Enum.map(Users.get_actors_for_user(user), & &1.id)}, if actor_id in Enum.map(Users.get_actors_for_user(user), & &1.id) do
%User{} = user <- Users.update_user_default_actor(user_id, actor) do %User{} = user = Users.update_user_default_actor(user, actor)
{:ok, user} {:ok, user}
else else
{:user_actor, _} -> {:error, dgettext("errors", "This profile does not belong to you")}
{:error, :actor_not_from_user} end
_error -> nil ->
{:error, :unable_to_change_default_actor} {:error,
dgettext("errors", "Profile with username %{username} not found", %{username: username})}
end end
end end
@ -632,6 +633,29 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
}} }}
end end
def user_followed_group_events(%User{id: user_id}, %{page: page, limit: limit} = args, %{
context: %{current_user: %User{id: logged_in_user_id}}
})
when user_id == logged_in_user_id do
activities =
FollowedGroupActivity.user_followed_group_events(
user_id,
Map.get(args, :after_datetime),
page,
limit
)
activities = %Page{
activities
| elements:
Enum.map(activities.elements, fn [event, group, profile] ->
%{group: group, profile: profile, event: event}
end)
}
{:ok, activities}
end
@spec update_user_login_information(User.t(), map()) :: @spec update_user_login_information(User.t(), map()) ::
{:ok, User.t()} | {:error, Ecto.Changeset.t()} {:ok, User.t()} | {:error, Ecto.Changeset.t()}
defp update_user_login_information( defp update_user_login_information(

View file

@ -49,6 +49,7 @@ defmodule Mobilizon.GraphQL.Schema do
import_types(Schema.StatisticsType) import_types(Schema.StatisticsType)
import_types(Schema.Users.PushSubscription) import_types(Schema.Users.PushSubscription)
import_types(Schema.Users.ActivitySetting) import_types(Schema.Users.ActivitySetting)
import_types(Schema.FollowedGroupActivityType)
@desc "A struct containing the id of the deleted object" @desc "A struct containing the id of the deleted object"
object :deleted_object do object :deleted_object do
@ -157,7 +158,6 @@ defmodule Mobilizon.GraphQL.Schema do
import_fields(:resource_queries) import_fields(:resource_queries)
import_fields(:post_queries) import_fields(:post_queries)
import_fields(:statistics_queries) import_fields(:statistics_queries)
# import_fields(:push_queries)
end end
@desc """ @desc """

View file

@ -17,6 +17,11 @@ defmodule Mobilizon.GraphQL.Schema.Actors.FollowerType do
description: "Whether the follow has been approved by the target actor" description: "Whether the follow has been approved by the target actor"
) )
field(:notify, :boolean,
description:
"Whether the follower will be notified by the target actor's activity or not (applicable for profile/group follows)"
)
field(:inserted_at, :datetime, description: "When the follow was created") field(:inserted_at, :datetime, description: "When the follow was created")
field(:updated_at, :datetime, description: "When the follow was updated") field(:updated_at, :datetime, description: "When the follow was updated")
end end

View file

@ -205,6 +205,12 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
value(:private, description: "Visible only to people with the link - or invited") value(:private, description: "Visible only to people with the link - or invited")
end end
object :group_follow do
field(:group, :group, description: "The group followed")
field(:profile, :group, description: "The group followed")
field(:notify, :boolean, description: "Whether to notify profile from group activity")
end
object :group_queries do object :group_queries do
@desc "Get all groups" @desc "Get all groups"
field :groups, :paginated_group_list do field :groups, :paginated_group_list do
@ -310,5 +316,36 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
resolve(&Group.delete_group/3) resolve(&Group.delete_group/3)
end end
@desc "Follow a group"
field :follow_group, :follower do
arg(:group_id, non_null(:id), description: "The group ID")
arg(:notify, :boolean,
description: "Whether to notify profile from group activity",
default_value: true
)
resolve(&Group.follow_group/3)
end
@desc "Update a group follow"
field :update_group_follow, :follower do
arg(:follow_id, non_null(:id), description: "The follow ID")
arg(:notify, :boolean,
description: "Whether to notify profile from group activity",
default_value: true
)
resolve(&Group.update_group_follow/3)
end
@desc "Unfollow a group"
field :unfollow_group, :follower do
arg(:group_id, non_null(:id), description: "The group ID")
resolve(&Group.unfollow_group/3)
end
end end
end end

View file

@ -102,6 +102,21 @@ defmodule Mobilizon.GraphQL.Schema.Actors.PersonType do
arg(:limit, :integer, default_value: 10, description: "The limit of memberships per page") arg(:limit, :integer, default_value: 10, description: "The limit of memberships per page")
resolve(&Person.person_memberships/3) resolve(&Person.person_memberships/3)
end end
@desc "The list of groups this person follows"
field(:follows, :paginated_follower_list,
description: "The list of groups this person follows"
) do
arg(:group, :string, description: "Filter by group federated username")
arg(:page, :integer,
default_value: 1,
description: "The page in the follows list"
)
arg(:limit, :integer, default_value: 10, description: "The limit of follows per page")
resolve(&Person.person_follows/3)
end
end end
@desc """ @desc """

View file

@ -0,0 +1,20 @@
defmodule Mobilizon.GraphQL.Schema.FollowedGroupActivityType do
@moduledoc """
Schema representation for a follow activity
"""
use Absinthe.Schema.Notation
@desc "A paginated list of follow group events"
object :paginated_followed_group_events do
field(:elements, list_of(:followed_group_event), description: "A list of follow group events")
field(:total, :integer, description: "The total number of follow group events in the list")
end
@desc "A follow group event"
object :followed_group_event do
field(:user, :user)
field(:profile, :person)
field(:group, :group)
field(:event, :event)
end
end

View file

@ -104,6 +104,26 @@ defmodule Mobilizon.GraphQL.Schema.UserType do
resolve(&User.user_drafted_events/3) resolve(&User.user_drafted_events/3)
end end
field(:followed_group_events, :paginated_followed_group_events,
description: "The suggested events from the groups this user follows"
) do
arg(:page, :integer,
default_value: 1,
description: "The page in the follow group events list"
)
arg(:limit, :integer,
default_value: 10,
description: "The limit of follow group events per page"
)
arg(:after_datetime, :datetime,
description: "Filter follow group events by event start datetime"
)
resolve(&User.user_followed_group_events/3)
end
field(:settings, :user_settings, description: "The list of settings for this user") do field(:settings, :user_settings, description: "The list of settings for this user") do
resolve(&User.user_settings/3) resolve(&User.user_settings/3)
end end

View file

@ -19,7 +19,6 @@ defmodule Mobilizon do
alias Mobilizon.Federation.ActivityPub alias Mobilizon.Federation.ActivityPub
alias Mobilizon.Service.{ErrorPage, ErrorReporting} alias Mobilizon.Service.{ErrorPage, ErrorReporting}
alias Mobilizon.Service.Export.{Feed, ICalendar} alias Mobilizon.Service.Export.{Feed, ICalendar}
alias TzWorld.Backend.DetsWithIndexCache
@name Mix.Project.config()[:name] @name Mix.Project.config()[:name]
@version Mix.Project.config()[:version] @version Mix.Project.config()[:version]
@ -38,9 +37,8 @@ defmodule Mobilizon do
@spec start(:normal | {:takeover, node} | {:failover, node}, term) :: @spec start(:normal | {:takeover, node} | {:failover, node}, term) ::
{:ok, pid} | {:ok, pid, term} | {:error, term} {:ok, pid} | {:ok, pid, term} | {:error, term}
def start(_type, _args) do def start(_type, _args) do
# We update and reload TzWorld at runtime so that the data is not contained in releases # We update TzWorld at runtime so that the data is not contained in releases
TzWorldUpdate.run(nil) TzWorldUpdate.run(nil)
DetsWithIndexCache.handle_call(:reload_data, nil, nil)
children = children =
[ [

View file

@ -1030,6 +1030,14 @@ defmodule Mobilizon.Actors do
|> Repo.delete() |> Repo.delete()
end end
@spec list_paginated_follows_for_actor(Actor.t(), integer | nil, integer | nil) ::
Page.t(Follower.t())
def list_paginated_follows_for_actor(%Actor{id: actor_id}, page \\ nil, limit \\ nil) do
actor_id
|> followings_for_actor_query
|> Page.build_page(page, limit)
end
@doc """ @doc """
Returns the list of external followers for an actor. Returns the list of external followers for an actor.
""" """

View file

@ -17,12 +17,14 @@ defmodule Mobilizon.Actors.Follower do
url: String.t(), url: String.t(),
target_actor: Actor.t(), target_actor: Actor.t(),
actor: Actor.t(), actor: Actor.t(),
notify: boolean(),
inserted_at: DateTime.t(), inserted_at: DateTime.t(),
updated_at: DateTime.t() updated_at: DateTime.t()
} }
@required_attrs [:url, :approved, :target_actor_id, :actor_id] @required_attrs [:url, :approved, :target_actor_id, :actor_id]
@attrs @required_attrs @optional_attrs [:notify]
@attrs @required_attrs ++ @optional_attrs
@timestamps_opts [type: :utc_datetime] @timestamps_opts [type: :utc_datetime]
@ -30,6 +32,7 @@ defmodule Mobilizon.Actors.Follower do
schema "followers" do schema "followers" do
field(:approved, :boolean, default: false) field(:approved, :boolean, default: false)
field(:url, :string) field(:url, :string)
field(:notify, :boolean, default: true)
timestamps() timestamps()

View file

@ -0,0 +1,56 @@
defmodule Mobilizon.FollowedGroupActivity do
@moduledoc """
Provide recent elements from groups that profiles follow
"""
import Ecto.Query
alias Mobilizon.Actors.{Actor, Follower, Member}
alias Mobilizon.Events.{Event, Participant}
alias Mobilizon.Storage.Page
@spec user_followed_group_events(
integer() | String.t(),
DateTime.t() | nil,
integer() | nil,
integer() | nil
) :: Page.t(Event.t())
def user_followed_group_events(user_id, after_datetime, page \\ nil, limit \\ nil) do
Event
|> distinct([e], e.id)
|> join(:left, [e], p in Participant, on: e.id == p.event_id)
|> join(:inner, [_e, p], pa in Actor, on: p.actor_id == pa.id)
|> join(:inner, [e], g in Actor, on: e.attributed_to_id == g.id)
|> join(:left, [_e, _p, _pa, g], f in Follower, on: g.id == f.target_actor_id)
|> join(:left, [_e, _p, _pa, g], m in Member, on: g.id == m.parent_id)
|> join(:inner, [_e, _p, pa, _g, f, m], a in Actor,
on: a.id == f.actor_id or a.id == m.actor_id
)
|> add_after_datetime_filter(after_datetime)
|> where(
[_e, p, pa, _g, f, m, a],
(f.approved or m.role in ^[:member, :moderator, :administrator, :creator]) and
a.user_id == ^user_id and
pa.user_id != ^user_id
)
|> preload([
:organizer_actor,
:attributed_to,
:tags,
:physical_address,
:picture
])
|> select([e, g, _f, _m, a], [
e,
g,
a
])
|> Page.build_page(page, limit)
end
@spec add_after_datetime_filter(Ecto.Query.t(), DateTime.t() | nil) :: Ecto.Query.t()
defp add_after_datetime_filter(query, nil),
do: where(query, [e], e.begins_on > ^DateTime.utc_now())
defp add_after_datetime_filter(query, %DateTime{} = datetime),
do: where(query, [e], e.begins_on > ^datetime)
end

Some files were not shown because too many files have changed in this diff Show more