Merge branch 'feature/edit-event' into 'master'
Prepare front to edit events See merge request framasoft/mobilizon!174
This commit is contained in:
commit
f928be3200
|
@ -139,15 +139,15 @@ export const FETCH_EVENTS = gql`
|
|||
|
||||
export const CREATE_EVENT = gql`
|
||||
mutation CreateEvent(
|
||||
$title: String!,
|
||||
$description: String!,
|
||||
$organizerActorId: ID!,
|
||||
$category: String,
|
||||
$beginsOn: DateTime!,
|
||||
$picture: PictureInput,
|
||||
$tags: [String],
|
||||
$physicalAddress: AddressInput,
|
||||
$visibility: EventVisibility
|
||||
$title: String!,
|
||||
$description: String!,
|
||||
$organizerActorId: ID!,
|
||||
$category: String,
|
||||
$beginsOn: DateTime!,
|
||||
$picture: PictureInput,
|
||||
$tags: [String],
|
||||
$physicalAddress: AddressInput,
|
||||
$visibility: EventVisibility
|
||||
) {
|
||||
createEvent(
|
||||
title: $title,
|
||||
|
|
|
@ -20,6 +20,7 @@ const language = (window.navigator as any).userLanguage || window.navigator.lang
|
|||
Vue.use(GetTextPlugin, {
|
||||
translations,
|
||||
defaultLanguage: 'en_US',
|
||||
silent: true,
|
||||
});
|
||||
|
||||
Vue.config.language = language.replace('-', '_');
|
||||
|
|
|
@ -3,7 +3,7 @@ import Location from '@/views/Location.vue';
|
|||
import { RouteConfig } from 'vue-router';
|
||||
|
||||
// tslint:disable:space-in-parens
|
||||
const createEvent = () => import(/* webpackChunkName: "create-event" */ '@/views/Event/Create.vue');
|
||||
const editEvent = () => import(/* webpackChunkName: "create-event" */ '@/views/Event/Edit.vue');
|
||||
const event = () => import(/* webpackChunkName: "event" */ '@/views/Event/Event.vue');
|
||||
// tslint:enable
|
||||
|
||||
|
@ -25,15 +25,15 @@ export const eventRoutes: RouteConfig[] = [
|
|||
{
|
||||
path: '/events/create',
|
||||
name: EventRouteName.CREATE_EVENT,
|
||||
component: createEvent,
|
||||
component: editEvent,
|
||||
meta: { requiredAuth: true },
|
||||
},
|
||||
{
|
||||
path: '/events/:id/edit',
|
||||
path: '/events/edit/:eventId',
|
||||
name: EventRouteName.EDIT_EVENT,
|
||||
component: createEvent,
|
||||
props: true,
|
||||
component: editEvent,
|
||||
meta: { requiredAuth: true },
|
||||
props: { isUpdate: true },
|
||||
},
|
||||
{
|
||||
path: '/location/new',
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { Actor, IActor } from './actor';
|
||||
import { IAddress } from '@/types/address.model';
|
||||
import { ITag } from '@/types/tag.model';
|
||||
import { IAbstractPicture, IPicture } from '@/types/picture.model';
|
||||
import { IPicture } from '@/types/picture.model';
|
||||
|
||||
export enum EventStatus {
|
||||
TENTATIVE,
|
||||
|
@ -53,10 +53,10 @@ export interface IEvent {
|
|||
title: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
category: Category|null;
|
||||
category: Category | null;
|
||||
|
||||
beginsOn: Date;
|
||||
endsOn: Date;
|
||||
endsOn: Date | null;
|
||||
publishAt: Date;
|
||||
|
||||
status: EventStatus;
|
||||
|
@ -64,7 +64,7 @@ export interface IEvent {
|
|||
|
||||
joinOptions: EventJoinOptions;
|
||||
|
||||
picture: IAbstractPicture|null;
|
||||
picture: IPicture | null;
|
||||
|
||||
organizerActor: IActor;
|
||||
attributedTo: IActor;
|
||||
|
@ -79,27 +79,76 @@ export interface IEvent {
|
|||
tags: ITag[];
|
||||
}
|
||||
|
||||
|
||||
export class EventModel implements IEvent {
|
||||
beginsOn: Date = new Date();
|
||||
category: Category = Category.MEETING;
|
||||
slug: string = '';
|
||||
description: string = '';
|
||||
endsOn: Date = new Date();
|
||||
joinOptions: EventJoinOptions = EventJoinOptions.FREE;
|
||||
local: boolean = true;
|
||||
id?: number;
|
||||
|
||||
beginsOn = new Date();
|
||||
endsOn: Date | null = new Date();
|
||||
|
||||
title = '';
|
||||
url = '';
|
||||
uuid = '';
|
||||
slug = '';
|
||||
description = '';
|
||||
local = true;
|
||||
|
||||
onlineAddress: string | undefined = '';
|
||||
phoneAddress: string | undefined = '';
|
||||
physicalAddress?: IAddress;
|
||||
|
||||
picture: IPicture | null = null;
|
||||
|
||||
visibility = EventVisibility.PUBLIC;
|
||||
category: Category | null = Category.MEETING;
|
||||
joinOptions = EventJoinOptions.FREE;
|
||||
status = EventStatus.CONFIRMED;
|
||||
|
||||
publishAt = new Date();
|
||||
|
||||
participants: IParticipant[] = [];
|
||||
publishAt: Date = new Date();
|
||||
status: EventStatus = EventStatus.CONFIRMED;
|
||||
title: string = '';
|
||||
url: string = '';
|
||||
uuid: string = '';
|
||||
visibility: EventVisibility = EventVisibility.PUBLIC;
|
||||
attributedTo: IActor = new Actor();
|
||||
organizerActor: IActor = new Actor();
|
||||
|
||||
relatedEvents: IEvent[] = [];
|
||||
onlineAddress: string = '';
|
||||
phoneAddress: string = '';
|
||||
picture: IAbstractPicture|null = null;
|
||||
|
||||
attributedTo = new Actor();
|
||||
organizerActor = new Actor();
|
||||
|
||||
tags: ITag[] = [];
|
||||
|
||||
constructor(hash?: IEvent) {
|
||||
if (!hash) return;
|
||||
|
||||
this.id = hash.id;
|
||||
this.uuid = hash.uuid;
|
||||
this.url = hash.url;
|
||||
this.local = hash.local;
|
||||
|
||||
this.title = hash.title;
|
||||
this.slug = hash.slug;
|
||||
this.description = hash.description;
|
||||
this.category = hash.category;
|
||||
|
||||
this.beginsOn = new Date(hash.beginsOn);
|
||||
if (hash.endsOn) this.endsOn = new Date(hash.endsOn);
|
||||
|
||||
this.publishAt = new Date(hash.publishAt);
|
||||
|
||||
this.status = hash.status;
|
||||
this.visibility = hash.visibility;
|
||||
|
||||
this.joinOptions = hash.joinOptions;
|
||||
|
||||
this.picture = hash.picture;
|
||||
|
||||
this.organizerActor = new Actor(hash.organizerActor);
|
||||
this.attributedTo = new Actor(hash.attributedTo);
|
||||
this.participants = hash.participants;
|
||||
|
||||
this.relatedEvents = hash.relatedEvents;
|
||||
|
||||
this.onlineAddress = hash.onlineAddress;
|
||||
this.phoneAddress = hash.phoneAddress;
|
||||
this.physicalAddress = hash.physicalAddress;
|
||||
|
||||
this.tags = hash.tags;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,16 +1,11 @@
|
|||
export interface IAbstractPicture {
|
||||
name;
|
||||
alt;
|
||||
}
|
||||
|
||||
export interface IPicture {
|
||||
url;
|
||||
name;
|
||||
alt;
|
||||
url: string;
|
||||
name: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
export interface IPictureUpload {
|
||||
file: File;
|
||||
name: String;
|
||||
alt: String|null;
|
||||
name: string;
|
||||
alt: string | null;
|
||||
}
|
||||
|
|
24
js/src/utils/image.ts
Normal file
24
js/src/utils/image.ts
Normal file
|
@ -0,0 +1,24 @@
|
|||
import { IPicture } from '@/types/picture.model';
|
||||
|
||||
export async function buildFileFromIPicture(obj: IPicture | null) {
|
||||
if (!obj) return null;
|
||||
|
||||
const response = await fetch(obj.url);
|
||||
const blob = await response.blob();
|
||||
|
||||
return new File([blob], obj.name);
|
||||
}
|
||||
|
||||
export function buildFileVariable<T>(file: File | null, name: string, alt?: string) {
|
||||
if (!file) return {};
|
||||
|
||||
return {
|
||||
[name]: {
|
||||
picture: {
|
||||
name: file.name,
|
||||
alt: alt || file.name,
|
||||
file,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
5
js/src/utils/object.ts
Normal file
5
js/src/utils/object.ts
Normal file
|
@ -0,0 +1,5 @@
|
|||
export function buildObjectCollection<T, U>(collection: T[] | undefined, builder: (new (p: T) => U)) {
|
||||
if (!collection || Array.isArray(collection) === false) return [];
|
||||
|
||||
return collection.map(v => new builder(v));
|
||||
}
|
|
@ -76,6 +76,7 @@ import PictureUpload from '@/components/PictureUpload.vue';
|
|||
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
|
||||
import { Dialog } from 'buefy/dist/components/dialog';
|
||||
import { RouteName } from '@/router';
|
||||
import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
|
@ -113,7 +114,7 @@ export default class EditIdentity extends Vue {
|
|||
if (this.identityName) {
|
||||
this.identity = await this.getIdentity();
|
||||
|
||||
this.avatarFile = await this.getAvatarFileFromIdentity(this.identity);
|
||||
this.avatarFile = await buildFileFromIPicture(this.identity.avatar);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -259,15 +260,6 @@ export default class EditIdentity extends Vue {
|
|||
return new Person(result.data.person);
|
||||
}
|
||||
|
||||
private async getAvatarFileFromIdentity(identity: IPerson) {
|
||||
if (!identity.avatar) return null;
|
||||
|
||||
const response = await fetch(identity.avatar.url);
|
||||
const blob = await response.blob();
|
||||
|
||||
return new File([blob], identity.avatar.name);
|
||||
}
|
||||
|
||||
private handleError(err: any) {
|
||||
console.error(err);
|
||||
|
||||
|
@ -285,18 +277,7 @@ export default class EditIdentity extends Vue {
|
|||
}
|
||||
|
||||
private buildVariables() {
|
||||
let avatarObj = {};
|
||||
if (this.avatarFile) {
|
||||
avatarObj = {
|
||||
avatar: {
|
||||
picture: {
|
||||
name: this.avatarFile.name,
|
||||
alt: `${this.identity.preferredUsername}'s avatar`,
|
||||
file: this.avatarFile,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
const avatarObj = buildFileVariable(this.avatarFile, 'avatar', `${this.identity.preferredUsername}'s avatar`);
|
||||
|
||||
return Object.assign({}, this.identity, avatarObj);
|
||||
}
|
||||
|
|
|
@ -1,14 +1,17 @@
|
|||
<template>
|
||||
<section class="container">
|
||||
<h1 class="title">
|
||||
<translate>Create a new event</translate>
|
||||
<translate v-if="isUpdate === false">Create a new event</translate>
|
||||
<translate v-else>Update event {{ event.name }}</translate>
|
||||
</h1>
|
||||
|
||||
<div v-if="$apollo.loading">Loading...</div>
|
||||
|
||||
<div class="columns is-centered" v-else>
|
||||
<form class="column is-two-thirds-desktop" @submit="createEvent">
|
||||
<form class="column is-two-thirds-desktop" @submit="createOrUpdate">
|
||||
<h2 class="subtitle">
|
||||
<translate>
|
||||
General informations
|
||||
General information
|
||||
</translate>
|
||||
</h2>
|
||||
<picture-upload v-model="pictureFile" />
|
||||
|
@ -46,22 +49,20 @@
|
|||
</h2>
|
||||
<label class="label">{{ $gettext('Event visibility') }}</label>
|
||||
<div class="field">
|
||||
<b-radio v-model="event.visibility"
|
||||
name="name"
|
||||
:native-value="EventVisibility.PUBLIC">
|
||||
<b-radio v-model="event.visibility" name="name" :native-value="EventVisibility.PUBLIC">
|
||||
<translate>Visible everywhere on the web (public)</translate>
|
||||
</b-radio>
|
||||
</div>
|
||||
<div class="field">
|
||||
<b-radio v-model="event.visibility"
|
||||
name="name"
|
||||
:native-value="EventVisibility.PRIVATE">
|
||||
<b-radio v-model="event.visibility" name="name" :native-value="EventVisibility.PRIVATE">
|
||||
<translate>Only accessible through link and search (private)</translate>
|
||||
</b-radio>
|
||||
</div>
|
||||
|
||||
<button class="button is-primary">
|
||||
<translate>Create my event</translate>
|
||||
|
||||
<translate v-if="isUpdate === false">Create my event</translate>
|
||||
<translate v-else>Update my event</translate>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
@ -69,15 +70,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// import Location from '@/components/Location';
|
||||
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import {
|
||||
Category,
|
||||
IEvent,
|
||||
EventModel,
|
||||
EventVisibility,
|
||||
} from '@/types/event.model';
|
||||
import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT } from '@/graphql/event';
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import { EventModel, EventVisibility, IEvent } from '@/types/event.model';
|
||||
import { LOGGED_PERSON } from '@/graphql/actor';
|
||||
import { IPerson, Person } from '@/types/actor';
|
||||
import PictureUpload from '@/components/PictureUpload.vue';
|
||||
|
@ -87,6 +82,7 @@ import TagInput from '@/components/Event/TagInput.vue';
|
|||
import { TAGS } from '@/graphql/tags';
|
||||
import { ITag } from '@/types/tag.model';
|
||||
import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
|
||||
import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
|
||||
|
||||
@Component({
|
||||
components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor },
|
||||
|
@ -99,57 +95,81 @@ import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
|
|||
},
|
||||
},
|
||||
})
|
||||
export default class CreateEvent extends Vue {
|
||||
export default class EditEvent extends Vue {
|
||||
@Prop({ type: Boolean, default: false }) isUpdate!: boolean;
|
||||
@Prop({ required: false, type: String }) uuid!: string;
|
||||
|
||||
loggedPerson: IPerson = new Person();
|
||||
/*categories: string[] = Object.keys(Category);*/
|
||||
event: IEvent = new EventModel();
|
||||
eventId!: string | undefined;
|
||||
|
||||
loggedPerson = new Person();
|
||||
event = new EventModel();
|
||||
pictureFile: File | null = null;
|
||||
|
||||
EventVisibility = EventVisibility;
|
||||
|
||||
// categories: string[] = Object.keys(Category);
|
||||
|
||||
@Watch('$route.params.eventId', { immediate: true })
|
||||
async onEventIdParamChanged (val: string) {
|
||||
if (this.isUpdate !== true) return;
|
||||
|
||||
this.eventId = val;
|
||||
|
||||
if (this.eventId) {
|
||||
this.event = await this.getEvent();
|
||||
|
||||
this.pictureFile = await buildFileFromIPicture(this.event.picture);
|
||||
}
|
||||
}
|
||||
|
||||
created() {
|
||||
const now = new Date();
|
||||
const end = new Date();
|
||||
end.setUTCHours(now.getUTCHours() + 3);
|
||||
|
||||
this.event.beginsOn = now;
|
||||
this.event.endsOn = end;
|
||||
}
|
||||
|
||||
createEvent(e: Event) {
|
||||
createOrUpdate(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.event.uuid === '') {
|
||||
console.log('event', this.event);
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: CREATE_EVENT,
|
||||
variables: this.buildVariables(),
|
||||
})
|
||||
.then(data => {
|
||||
console.log('event created', data);
|
||||
this.$router.push({
|
||||
name: 'Event',
|
||||
params: { uuid: data.data.createEvent.uuid },
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
} else {
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: EDIT_EVENT,
|
||||
})
|
||||
.then(data => {
|
||||
this.$router.push({
|
||||
name: 'Event',
|
||||
params: { uuid: data.data.uuid },
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
if (this.eventId) return this.updateEvent();
|
||||
|
||||
return this.createEvent();
|
||||
}
|
||||
|
||||
async createEvent() {
|
||||
try {
|
||||
const data = await this.$apollo.mutate({
|
||||
mutation: CREATE_EVENT,
|
||||
variables: this.buildVariables(),
|
||||
});
|
||||
|
||||
console.log('Event created', data);
|
||||
|
||||
this.$router.push({
|
||||
name: 'Event',
|
||||
params: { uuid: data.createEvent.uuid },
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
async updateEvent() {
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: EDIT_EVENT,
|
||||
variables: this.buildVariables(),
|
||||
});
|
||||
|
||||
this.$router.push({
|
||||
name: 'Event',
|
||||
params: { uuid: this.eventId as string },
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -157,10 +177,6 @@ export default class CreateEvent extends Vue {
|
|||
* Build variables for Event GraphQL creation query
|
||||
*/
|
||||
private buildVariables() {
|
||||
/**
|
||||
* Transform general variables
|
||||
*/
|
||||
let pictureObj = {};
|
||||
const obj = {
|
||||
organizerActorId: this.loggedPerson.id,
|
||||
beginsOn: this.event.beginsOn.toISOString(),
|
||||
|
@ -172,23 +188,22 @@ export default class CreateEvent extends Vue {
|
|||
delete this.event.physicalAddress['__typename'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform picture files
|
||||
*/
|
||||
if (this.pictureFile) {
|
||||
pictureObj = {
|
||||
picture: {
|
||||
picture: {
|
||||
name: this.pictureFile.name,
|
||||
file: this.pictureFile,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
const pictureObj = buildFileVariable(this.pictureFile, 'picture');
|
||||
|
||||
return Object.assign({}, res, pictureObj);
|
||||
}
|
||||
|
||||
private async getEvent() {
|
||||
const result = await this.$apollo.query({
|
||||
query: FETCH_EVENT,
|
||||
variables: {
|
||||
uuid: this.eventId,
|
||||
},
|
||||
});
|
||||
|
||||
return new EventModel(result.data.event);
|
||||
}
|
||||
|
||||
// getAddressData(addressData) {
|
||||
// if (addressData !== null) {
|
||||
// this.event.address = {
|
||||
|
@ -208,4 +223,4 @@ export default class CreateEvent extends Vue {
|
|||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
</script>
|
|
@ -6,10 +6,8 @@ import { onError } from 'apollo-link-error';
|
|||
import { createLink } from 'apollo-absinthe-upload-link';
|
||||
import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from './api/_entrypoint';
|
||||
import { ApolloClient } from 'apollo-client';
|
||||
import { DollarApollo } from 'vue-apollo/types/vue-apollo';
|
||||
import { buildCurrentUserResolver } from '@/apollo/user';
|
||||
import { isServerError } from '@/types/apollo';
|
||||
import { inspect } from 'util';
|
||||
import { REFRESH_TOKEN } from '@/graphql/auth';
|
||||
import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN } from '@/constants';
|
||||
import { logout, saveTokenData } from '@/utils/auth';
|
||||
|
|
Loading…
Reference in a new issue