Add leave/join/delete event logic

This commit is contained in:
Chocobozzz 2019-02-22 11:24:41 +01:00
parent e4a08ff83b
commit e19a533e9d
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
5 changed files with 327 additions and 261 deletions

View File

@ -1,5 +1,14 @@
import gql from 'graphql-tag'; import gql from 'graphql-tag';
const participantQuery = `
role,
actor {
preferredUsername,
avatarUrl,
name
}
`;
export const FETCH_EVENT = gql` export const FETCH_EVENT = gql`
query($uuid:UUID!) { query($uuid:UUID!) {
event(uuid: $uuid) { event(uuid: $uuid) {
@ -29,12 +38,7 @@ export const FETCH_EVENT = gql`
# name, # name,
# }, # },
participants { participants {
actor { ${participantQuery}
avatarUrl,
preferredUsername,
name,
},
role,
}, },
category { category {
title, title,
@ -75,12 +79,7 @@ export const FETCH_EVENTS = gql`
title, title,
}, },
participants { participants {
role, ${participantQuery}
actor {
preferredUsername,
avatarUrl,
name
}
} }
} }
} }
@ -122,13 +121,37 @@ export const EDIT_EVENT = gql`
`; `;
export const JOIN_EVENT = gql` export const JOIN_EVENT = gql`
mutation JoinEvent( mutation JoinEvent($id: Int!, $actorId: Int!) {
$uuid: String!,
$username: String!
) {
joinEvent( joinEvent(
uuid: $uuid, id: $id,
username: $username actorId: $actorId
) {
actor {
${participantQuery}
},
role
}
}
`;
export const LEAVE_EVENT = gql`
mutation LeaveEvent($id: Int!, $actorId: Int!) {
leaveEvent(
id: $id,
actorId: $actorId
) {
actor {
id
}
}
}
`;
export const DELETE_EVENT = gql`
mutation DeleteEvent($id: Int!, $actorId: Int!) {
deleteEvent(
id: $id,
actorId: $actorId
) )
} }
`; `;

View File

@ -19,7 +19,10 @@ export interface IGroup extends IActor {
} }
export enum MemberRole { export enum MemberRole {
PENDING, MEMBER, MODERATOR, ADMIN PENDING,
MEMBER,
MODERATOR,
ADMIN,
} }
export interface IMember { export interface IMember {

View File

@ -1,30 +1,30 @@
import { IActor } from "./actor.model"; import { IActor } from './actor.model';
export enum EventStatus { export enum EventStatus {
TENTATIVE, TENTATIVE,
CONFIRMED, CONFIRMED,
CANCELLED CANCELLED,
} }
export enum EventVisibility { export enum EventVisibility {
PUBLIC, PUBLIC,
UNLISTED, UNLISTED,
RESTRICTED, RESTRICTED,
PRIVATE PRIVATE,
} }
export enum EventJoinOptions { export enum EventJoinOptions {
FREE, FREE,
RESTRICTED, RESTRICTED,
INVITE INVITE,
} }
export enum ParticipantRole { export enum ParticipantRole {
NOT_APPROVED = 'not_approved', NOT_APPROVED = 'not_approved',
PARTICIPANT = 'participant', PARTICIPANT = 'participant',
MODERATOR = 'moderator', MODERATOR = 'moderator',
ADMINSTRATOR = 'administrator', ADMINISTRATOR = 'administrator',
CREATOR = 'creator' CREATOR = 'creator',
} }
export interface ICategory { export interface ICategory {
@ -34,29 +34,37 @@ export interface ICategory {
} }
export interface IParticipant { export interface IParticipant {
role: ParticipantRole, role: ParticipantRole;
actor: IActor, actor: IActor;
event: IEvent event: IEvent;
} }
export interface IEvent { export interface IEvent {
id?: number;
uuid: string; uuid: string;
url: string; url: string;
local: boolean; local: boolean;
title: string; title: string;
description: string; description: string;
category: ICategory;
begins_on: Date; begins_on: Date;
ends_on: Date; ends_on: Date;
publish_at: Date;
status: EventStatus; status: EventStatus;
visibility: EventVisibility; visibility: EventVisibility;
join_options: EventJoinOptions; join_options: EventJoinOptions;
thumbnail: string; thumbnail: string;
large_image: string; large_image: string;
publish_at: Date;
// online_address: Adress;
// phone_address: string;
organizerActor: IActor; organizerActor: IActor;
attributedTo: IActor; attributedTo: IActor;
participants: IParticipant[]; participants: IParticipant[];
category: ICategory;
// online_address: Address;
// phone_address: string;
} }

View File

@ -93,13 +93,15 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { FETCH_EVENT } from "@/graphql/event"; import { DELETE_EVENT, FETCH_EVENT, LEAVE_EVENT } from '@/graphql/event';
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from 'vue-property-decorator';
import VueMarkdown from "vue-markdown"; import { LOGGED_PERSON } from '@/graphql/actor';
import { LOGGED_PERSON } from "../../graphql/actor"; import { IEvent, IParticipant } from '@/types/event.model';
import { IEvent } from "@/types/event.model"; import { JOIN_EVENT } from '@/graphql/event';
import { JOIN_EVENT } from "../../graphql/event"; import { IPerson } from '@/types/actor.model';
import { IPerson } from "@/types/actor.model";
// No typings for this component, so we use require
const VueMarkdown = require('vue-markdown');
@Component({ @Component({
components: { components: {
@ -126,31 +128,73 @@ export default class Event extends Vue {
loggedPerson!: IPerson; loggedPerson!: IPerson;
validationSent: boolean = false; validationSent: boolean = false;
deleteEvent() { async deleteEvent() {
const router = this.$router; const router = this.$router;
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' }) try {
// .then(() => router.push({ name: 'EventList' })); await this.$apollo.mutate<IParticipant>({
mutation: DELETE_EVENT,
variables: {
id: this.event.id,
actorId: this.loggedPerson.id,
}
});
router.push({ name: 'EventList' })
} catch (error) {
console.error(error);
}
} }
async joinEvent() { async joinEvent() {
try { try {
this.validationSent = true; await this.$apollo.mutate<IParticipant>({
await this.$apollo.mutate({ mutation: JOIN_EVENT,
mutation: JOIN_EVENT variables: {
id: this.event.id,
actorId: this.loggedPerson.id,
},
update: (store, { data: { joinEvent } }) => {
const event = store.readQuery<IEvent>({ query: FETCH_EVENT });
if (event === null) {
console.error('Cannot update event participant cache, because of null value.')
return
}
event.participants = event.participants.concat([ joinEvent ]);
store.writeQuery({ query: FETCH_EVENT, data: event });
}
}); });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
} }
leaveEvent() { async leaveEvent() {
// FIXME: remove eventFetch try {
// eventFetch(`/events/${this.uuid}/leave`, this.$store) await this.$apollo.mutate<IParticipant>({
// .then(response => response.json()) mutation: LEAVE_EVENT,
// .then((data) => { variables: {
// console.log(data); id: this.event.id,
// }); actorId: this.loggedPerson.id,
},
update: (store, { data: { leaveEvent } }) => {
const event = store.readQuery<IEvent>({ query: FETCH_EVENT });
if (event === null) {
console.error('Cannot update event participant cache, because of null value.');
return
}
event.participants = event.participants
.filter(p => p.actor.id !== leaveEvent.actor.id);
store.writeQuery({ query: FETCH_EVENT, data: event });
}
});
} catch (error) {
console.error(error);
}
} }
downloadIcsEvent() { downloadIcsEvent() {
@ -169,28 +213,16 @@ export default class Event extends Vue {
} }
actorIsParticipant() { actorIsParticipant() {
return ( if (this.actorIsOrganizer()) return true;
(this.loggedPerson &&
return this.loggedPerson &&
this.event.participants this.event.participants
.map(participant => participant.actor.preferredUsername) .some(participant => participant.actor.id === this.loggedPerson.id);
.includes(this.loggedPerson.preferredUsername)) ||
this.actorIsOrganizer()
);
} }
//
actorIsOrganizer() { actorIsOrganizer() {
return ( return this.loggedPerson &&
this.loggedPerson && this.loggedPerson.id === this.event.organizerActor.id;
this.loggedPerson.preferredUsername ===
this.event.organizerActor.preferredUsername
);
} }
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.v-card__media__background {
filter: contrast(0.4);
}
</style>