debianize-mobilizon/js/src/views/Event/Event.vue

<template>
  <div class="columns is-centered">
    <div class="column is-three-quarters">
      <b-loading :active.sync="$apollo.loading"></b-loading>
      <div class="card" v-if="event">
        <div class="card-image">
          <figure class="image is-4by3">
            <img src="https://picsum.photos/600/400/">
          </figure>
        </div>
        <div class="card-content">
          <span>{{ event.beginsOn | formatDay }}</span>
          <span class="tag is-primary">{{ event.category }}</span>
          <h1 class="title">{{ event.title }}</h1>
          <router-link
            :to="{name: 'Profile', params: { name: event.organizerActor.preferredUsername } }"
          >
            <figure v-if="event.organizerActor.avatarUrl">
              <img :src="event.organizerActor.avatarUrl">
            </figure>
          </router-link>
          <span
            v-if="event.organizerActor"
          >Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span>
          <div class="field has-addons">
            <p class="control">
              <router-link
                v-if="actorIsOrganizer()"
                class="button"
                :to="{ name: 'EditEvent', params: {uuid: event.uuid}}"
              >
                <translate>Edit</translate>
              </router-link>
            </p>
            <p class="control">
              <a class="button" @click="downloadIcsEvent()">
                <translate>Download</translate>
              </a>
            </p>
            <p class="control">
              <a class="button is-danger" v-if="actorIsOrganizer()" @click="deleteEvent()">
                <translate>Delete</translate>
              </a>
            </p>
          </div>
          <div>
            <span>{{ event.beginsOn | formatDate }} - {{ event.endsOn | formatDate }}</span>
          </div>
          <div class="address" v-if="event.physicalAddress">
            <h3 class="subtitle">Adresse</h3>
            <address>
              <span>{{ event.physicalAddress.description }}</span><br>
              <span>{{ event.physicalAddress.floor }} {{ event.physicalAddress.street }}</span><br>
              <span>{{ event.physicalAddress.postal_code }} {{ event.physicalAddress.locality }}</span><br>
              <span>{{ event.physicalAddress.region }} {{ event.physicalAddress.country }}</span>
            </address>
            <div class="map">
              <map-leaflet
                :coords="event.physicalAddress.geom"
                :popup="event.physicalAddress.description"
              />
            </div>
          </div>
          <p v-if="actorIsOrganizer()">
            <translate>You are an organizer.</translate>
          </p>
          <div v-else>
            <p v-if="actorIsParticipant()">
              <translate>You announced that you're going to this event.</translate>
            </p>
            <p v-else>
              <translate>Are you going to this event?</translate><br />
              <span>
                <translate
                        :translate-n="event.participants.length"
                        translate-plural="%{event.participants.length} persons are going"
                >
                  One person is going.
                </translate>
              </span>
            </p>
          </div>
          <div v-if="!actorIsOrganizer()">
            <a v-if="!actorIsParticipant()" @click="joinEvent" class="button">
              <translate>Join</translate>
            </a>
            <a v-if="actorIsParticipant()" @click="leaveEvent" class="button">Leave</a>
          </div>
          <h2 class="subtitle">Details</h2>
          <p v-if="event.description">
            <vue-simple-markdown :source="event.description"></vue-simple-markdown>
          </p>
          <h2 class="subtitle">Participants</h2>
          <span v-if="event.participants.length === 0">No participants yet.</span>
          <div class="columns">
            <router-link
              class="card column"
              v-for="participant in event.participants"
              :key="participant.preferredUsername"
              :to="{name: 'Profile', params: { name: participant.actor.preferredUsername }}"
            >
              <div>
                <figure>
                  <img v-if="!participant.actor.avatarUrl" src="https://picsum.photos/125/125/">
                  <img v-else :src="participant.actor.avatarUrl">
                </figure>
                <span>{{ participant.actor.preferredUsername }}</span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/event';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGGED_PERSON } from '@/graphql/actor';
import { IEvent, IParticipant } from '@/types/event.model';
import { IPerson } from '@/types/actor.model';
import { RouteName } from '@/router';
import 'vue-simple-markdown/dist/vue-simple-markdown.css';
import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';

@Component({
  components: {
    'map-leaflet': () => import('@/components/Map.vue'),
  },
  apollo: {
    event: {
      query: FETCH_EVENT,
      variables() {
        return {
          uuid: this.uuid,
        };
      },
    },
    loggedPerson: {
      query: LOGGED_PERSON,
    },
  },
})
export default class Event extends Vue {
  @Prop({ type: String, required: true }) uuid!: string;

  event!: IEvent;
  loggedPerson!: IPerson;
  validationSent: boolean = false;

  async deleteEvent() {
    const router = this.$router;

    try {
      await this.$apollo.mutate<IParticipant>({
        mutation: DELETE_EVENT,
        variables: {
          id: this.event.id,
          actorId: this.loggedPerson.id,
        },
      });

      router.push({ name: RouteName.EVENT });
    } catch (error) {
      console.error(error);
    }
  }

  async joinEvent() {
    try {
      await this.$apollo.mutate<IParticipant>({
        mutation: JOIN_EVENT,
        variables: {
          eventId: 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) {
      console.error(error);
    }
  }

  async leaveEvent() {
    try {
      await this.$apollo.mutate<IParticipant>({
        mutation: LEAVE_EVENT,
        variables: {
          eventId: 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);
    }
  }

  async downloadIcsEvent() {
    const data = await (await fetch(`${GRAPHQL_API_ENDPOINT}/events/${this.uuid}/export/ics`)).text();
    const blob = new Blob([data], { type: 'text/calendar' });
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = `${this.event.title}.ics`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  actorIsParticipant() {
    if (this.actorIsOrganizer()) return true;

    return this.loggedPerson &&
      this.event.participants
          .some(participant => participant.actor.id === this.loggedPerson.id);
  }

  actorIsOrganizer() {
    return this.loggedPerson &&
      this.loggedPerson.id === this.event.organizerActor.id;
  }
}
</script>
<style lang="scss">
  .address div.map {
    height: 400px;
    width: 400px;
    padding: 25px 35px;
  }
</style>