mobilizon.chapril.org-mobilizon/js/src/components/Event/Create.vue

<template>
  <v-container fluid fill-height>
    <v-layout align-center justify-center>
      <v-flex xs12 sm8 md4>
        <v-card class="elevation-12">
          <v-toolbar dark color="primary">
            <v-toolbar-title>Create a new event</v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <v-form>
              <v-text-field
                label="Title"
                v-model="event.title"
                :counter="100"
                required
              ></v-text-field>
              <v-date-picker v-model="event.begins_on">
              </v-date-picker>
              <v-radio-group v-model="event.location_type" row>
                <v-radio label="Address" value="physical" off-icon="place"></v-radio>
                <v-radio label="Online" value="online" off-icon="link"></v-radio>
                <v-radio label="Phone" value="phone" off-icon="phone"></v-radio>
                <v-radio label="Other" value="other"></v-radio>
              </v-radio-group>
              <!-- <vuetify-google-autocomplete
                v-if="event.location_type === 'physical'"
                id="map"
                append-icon="search"
                classname="form-control"
                placeholder="Start typing"
                label="Location"
                enable-geolocation
                types="geocode"
                v-on:placechanged="getAddressData"
              >
              </vuetify-google-autocomplete> -->
              <v-text-field
                v-if="event.location_type === 'online'"
                label="Meeting adress"
                type="url"
                v-model="event.url"
                :required="event.location_type === 'online'"
              ></v-text-field>
              <v-text-field
                v-if="event.location_type === 'phone'"
                label="Phone number"
                type="tel"
                v-model="event.phone"
                :required="event.location_type === 'phone'"
              ></v-text-field>
              <v-autocomplete
                :items="categories"
                v-model="event.category"
                item-text="title"
                item-value="id"
                label="Categories"
              >
              </v-autocomplete>
              <v-btn color="primary" @click="create">Create event</v-btn>
            </v-form>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</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';

  @Component({
    components: {
      VueMarkdown
    },
    apollo: {
      categories: {
        query: FETCH_CATEGORIES,
      },
    }
  })
  export default class CreateEvent extends Vue {
    @Prop({required: false, type: String}) uuid!: string

    e1 = 0
    event = {
      title: null,
      organizer_actor_id: null,
      description: '',
      begins_on: (new Date()).toISOString().substr(0, 10),
      ends_on: new Date(),
      seats: null,
      physical_address: null,
      location_type: 'physical',
      online_address: null,
      tel_num: null,
      price: null,
      category: null,
      category_id: null,
      tags: [],
      participants: [],
    } as any // FIXME: correctly type an event
    categories = []
    tags = []
    tagsToSend = []
    tagsFetched = []
    loading = false

    // created() {
    //   if (this.uuid) {
    //     this.fetchEvent();
    //   }
    // }

    create () {
      // this.event.seats = parseInt(this.event.seats, 10);
      // this.tagsToSend.forEach((tag) => {
      //   this.event.tags.push({
      //     title: tag,
      //     // '@type': 'Tag',
      //   });
      // });
      // FIXME: correctly parse actor JSON
      const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}')
      this.event.category_id = this.event.category
      this.event.organizer_actor_id = actor.id
      this.event.participants = [actor.id]
      // this.event.price = parseFloat(this.event.price);

      if (this.uuid === undefined) {
        this.$apollo.mutate({
          mutation: CREATE_EVENT,
          variables: {
            title: this.event.title,
            description: this.event.description,
            organizerActorId: this.event.organizer_actor_id,
            categoryId: this.event.category_id,
            beginsOn: this.event.begins_on,
            addressType: this.event.location_type,
          }
        }).then((data) => {
          this.loading = false
          this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
        }).catch((error) => {
          console.log(error)
        })
      } else {
        this.$apollo.mutate({
          mutation: EDIT_EVENT,
        }).then((data) => {
          this.loading = false
          this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
        }).catch((error) => {
          console.log(error)
        })
      }
      this.event.tags = []
    }

    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>