mobilizon/js/src/views/Group/Create.vue

101 lines
2.5 KiB
Vue
Raw Normal View History

<template>
<section>
<h1>
<translate>Create a new group</translate>
</h1>
<div class="columns">
<form class="column" @submit="createGroup">
<b-field :label="$gettext('Group name')">
<b-input aria-required="true" required v-model="group.preferred_username"/>
</b-field>
<b-field :label="$gettext('Group full name')">
<b-input aria-required="true" required v-model="group.name"/>
</b-field>
<b-field :label="$gettext('Description')">
<b-input aria-required="true" required v-model="group.summary" type="textarea"/>
</b-field>
<button class="button is-primary">
<translate>Create my group</translate>
</button>
</form>
</div>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
2019-02-22 14:55:47 +01:00
// VueMarkdown is untyped
const VueMarkdown = require('vue-markdown')
@Component({
components: {
VueMarkdown
}
})
export default class CreateGroup extends Vue {
e1 = 0;
// FIXME: correctly type group
group: {
preferred_username: string;
name: string;
summary: string;
address?: any;
} = {
2019-02-22 14:55:47 +01:00
preferred_username: '',
name: '',
summary: '',
// category: null,
};
categories = [];
mounted() {
this.fetchCategories();
}
createGroup() {
// this.group.organizer = "/accounts/" + this.$store.state.user.id;
// FIXME: remove eventFetch
// eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.$router.push({ path: 'Group', params: { id: data.id } });
// });
}
fetchCategories() {
// FIXME: remove eventFetch
// eventFetch('/categories', this.$store)
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.categories = data.data;
// });
}
getAddressData(addressData) {
this.group.address = {
geo: {
latitude: addressData.latitude,
longitude: addressData.longitude
},
addressCountry: addressData.country,
addressLocality: addressData.city,
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>