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>

js/src/views/Event/Create.vue

@@ -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>