Replace Vuetify with Bulma
Signed-off-by: Thomas Citharel <tcit@tcit.fr> Remove vuetify and add Bulma Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
165
js/src/views/Event/Create.vue
Normal file
165
js/src/views/Event/Create.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1 class="title">
|
||||
<translate>Create a new event</translate>
|
||||
</h1>
|
||||
<div v-if="$apollo.loading">Loading...</div>
|
||||
<div class="columns" v-else>
|
||||
<form class="column" @submit="createEvent">
|
||||
<b-field :label="$gettext('Title')">
|
||||
<b-input aria-required="true" required v-model="event.title"/>
|
||||
</b-field>
|
||||
|
||||
<b-datepicker v-model="event.begins_on" inline></b-datepicker>
|
||||
|
||||
<b-field :label="$gettext('Category')">
|
||||
<b-select placeholder="Select a category" v-model="event.category">
|
||||
<option
|
||||
v-for="category in categories"
|
||||
:value="category"
|
||||
:key="category.title"
|
||||
>{{ category.title }}</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<button class="button is-primary">
|
||||
<translate>Create my event</translate>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// import Location from '@/components/Location';
|
||||
import VueMarkdown from "vue-markdown";
|
||||
import { CREATE_EVENT, EDIT_EVENT } from "@/graphql/event";
|
||||
import { FETCH_CATEGORIES } from "@/graphql/category";
|
||||
import { AUTH_USER_ACTOR } from "@/constants";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import {
|
||||
IEvent,
|
||||
ICategory,
|
||||
EventVisibility,
|
||||
EventStatus
|
||||
} from "../../types/event.model";
|
||||
import { LOGGED_PERSON } from "../../graphql/actor";
|
||||
import { IPerson } from "../../types/actor.model";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown
|
||||
},
|
||||
apollo: {
|
||||
categories: {
|
||||
query: FETCH_CATEGORIES
|
||||
}
|
||||
}
|
||||
})
|
||||
export default class CreateEvent extends Vue {
|
||||
@Prop({ required: false, type: String }) uuid!: string;
|
||||
|
||||
loggedPerson!: IPerson;
|
||||
categories: ICategory[] = [];
|
||||
event!: IEvent; // FIXME: correctly type an event
|
||||
|
||||
// created() {
|
||||
// if (this.uuid) {
|
||||
// this.fetchEvent();
|
||||
// }
|
||||
// }
|
||||
|
||||
async created() {
|
||||
// We put initialization here because we need loggedPerson to be ready before initalizing event
|
||||
const { data } = await this.$apollo.query({ query: LOGGED_PERSON });
|
||||
|
||||
this.loggedPerson = data.loggedPerson;
|
||||
|
||||
this.event = {
|
||||
title: "",
|
||||
organizerActor: this.loggedPerson,
|
||||
attributedTo: this.loggedPerson,
|
||||
description: "",
|
||||
begins_on: new Date(),
|
||||
ends_on: new Date(),
|
||||
category: this.categories[0],
|
||||
participants: [],
|
||||
uuid: "",
|
||||
url: "",
|
||||
local: true,
|
||||
status: EventStatus.CONFIRMED,
|
||||
visibility: EventVisibility.PUBLIC,
|
||||
thumbnail: "",
|
||||
large_image: "",
|
||||
publish_at: new Date()
|
||||
};
|
||||
}
|
||||
|
||||
createEvent(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.uuid === undefined) {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: CREATE_EVENT,
|
||||
variables: {
|
||||
title: this.event.title,
|
||||
description: this.event.description,
|
||||
beginsOn: this.event.begins_on,
|
||||
category: this.event.category.title,
|
||||
organizerActorId: this.event.organizerActor.id
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
console.log("event created", data);
|
||||
this.$router.push({
|
||||
name: "Event",
|
||||
params: { uuid: data.data.createEvent.uuid }
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: EDIT_EVENT
|
||||
})
|
||||
.then(data => {
|
||||
this.$router.push({
|
||||
name: "Event",
|
||||
params: { uuid: data.data.uuid }
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// getAddressData(addressData) {
|
||||
// if (addressData !== null) {
|
||||
// this.event.address = {
|
||||
// geom: {
|
||||
// data: {
|
||||
// latitude: addressData.latitude,
|
||||
// longitude: addressData.longitude
|
||||
// },
|
||||
// type: "point"
|
||||
// },
|
||||
// addressCountry: addressData.country,
|
||||
// addressLocality: addressData.locality,
|
||||
// addressRegion: addressData.administrative_area_level_1,
|
||||
// postalCode: addressData.postal_code,
|
||||
// streetAddress: `${addressData.street_number} ${addressData.route}`
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.markdown-render h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
196
js/src/views/Event/Event.vue
Normal file
196
js/src/views/Event/Event.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<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.begins_on | formatDay }}</span>
|
||||
<span class="tag is-primary">{{ event.category.title }}</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.begins_on | formatDate }} - {{ event.ends_on | formatDate }}</span>
|
||||
</div>
|
||||
<p v-if="actorIsOrganizer()">
|
||||
<translate>Vous êtes organisateur de cet événement.</translate>
|
||||
</p>
|
||||
<div v-else>
|
||||
<p v-if="actorIsParticipant()">
|
||||
<translate>Vous avez annoncé aller à cet événement.</translate>
|
||||
</p>
|
||||
<p v-else>
|
||||
Vous y allez ?
|
||||
<span>{{ event.participants.length }} personnes y vont.</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" color="button">Leave</a>
|
||||
</div>
|
||||
<h2 class="subtitle">Details</h2>
|
||||
<p v-if="event.description">
|
||||
<vue-markdown :source="event.description"></vue-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 { FETCH_EVENT } from "@/graphql/event";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import VueMarkdown from "vue-markdown";
|
||||
import { LOGGED_PERSON } from "../../graphql/actor";
|
||||
import { IEvent } from "@/types/event.model";
|
||||
import { JOIN_EVENT } from "../../graphql/event";
|
||||
import { IPerson } from "@/types/actor.model";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown
|
||||
},
|
||||
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;
|
||||
|
||||
deleteEvent() {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => router.push({ name: 'EventList' }));
|
||||
}
|
||||
|
||||
async joinEvent() {
|
||||
try {
|
||||
this.validationSent = true;
|
||||
await this.$apollo.mutate({
|
||||
mutation: JOIN_EVENT
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
leaveEvent() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/leave`, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((data) => {
|
||||
// console.log(data);
|
||||
// });
|
||||
}
|
||||
|
||||
downloadIcsEvent() {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// .then(response => response.text())
|
||||
// .then((response) => {
|
||||
// const blob = new Blob([ response ], { 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() {
|
||||
return (
|
||||
(this.loggedPerson &&
|
||||
this.event.participants
|
||||
.map(participant => participant.actor.preferredUsername)
|
||||
.includes(this.loggedPerson.preferredUsername)) ||
|
||||
this.actorIsOrganizer()
|
||||
);
|
||||
}
|
||||
//
|
||||
actorIsOrganizer() {
|
||||
return (
|
||||
this.loggedPerson &&
|
||||
this.loggedPerson.preferredUsername ===
|
||||
this.event.organizerActor.preferredUsername
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style>
|
||||
.v-card__media__background {
|
||||
filter: contrast(0.4);
|
||||
}
|
||||
</style>
|
||||
111
js/src/views/Event/EventList.vue
Normal file
111
js/src/views/Event/EventList.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>
|
||||
<translate>Event list</translate>
|
||||
</h1>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<div v-if="events.length > 0" class="columns is-multiline">
|
||||
<EventCard
|
||||
v-for="event in events"
|
||||
:key="event.uuid"
|
||||
:event="event"
|
||||
class="column is-one-quarter-desktop is-half-mobile"
|
||||
/>
|
||||
</div>
|
||||
<b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">
|
||||
<translate>No events found</translate>
|
||||
</b-message>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ngeohash from "ngeohash";
|
||||
import VueMarkdown from "vue-markdown";
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import EventCard from "@/components/Event/EventCard.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VueMarkdown,
|
||||
EventCard
|
||||
}
|
||||
})
|
||||
export default class EventList extends Vue {
|
||||
@Prop(String) location!: string;
|
||||
|
||||
events = [];
|
||||
loading = true;
|
||||
locationChip = false;
|
||||
locationText = "";
|
||||
|
||||
created() {
|
||||
this.fetchData(this.$router.currentRoute.params["location"]);
|
||||
}
|
||||
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
this.fetchData(to.params.location);
|
||||
next();
|
||||
}
|
||||
|
||||
@Watch("locationChip")
|
||||
onLocationChipChange(val) {
|
||||
if (val === false) {
|
||||
this.$router.push({ name: "EventList" });
|
||||
}
|
||||
}
|
||||
|
||||
geocode(lat, lon) {
|
||||
console.log({ lat, lon });
|
||||
console.log(ngeohash.encode(lat, lon, 10));
|
||||
return ngeohash.encode(lat, lon, 10);
|
||||
}
|
||||
|
||||
fetchData(location) {
|
||||
let queryString = "/events";
|
||||
if (location) {
|
||||
queryString += `?geohash=${location}`;
|
||||
const { latitude, longitude } = ngeohash.decode(location);
|
||||
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
|
||||
}
|
||||
this.locationChip = true;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(queryString, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.loading = false;
|
||||
// this.events = response.data;
|
||||
// console.log(this.events);
|
||||
// });
|
||||
}
|
||||
|
||||
deleteEvent(event) {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => router.push('/events'));
|
||||
}
|
||||
|
||||
viewEvent(event) {
|
||||
this.$router.push({ name: "Event", params: { uuid: event.uuid } });
|
||||
}
|
||||
|
||||
downloadIcsEvent(event) {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// .then(response => response.text())
|
||||
// .then((response) => {
|
||||
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||
// const link = document.createElement('a');
|
||||
// link.href = window.URL.createObjectURL(blob);
|
||||
// link.download = `${event.title}.ics`;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
// });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user