Prepare front to edit events

This commit is contained in:
Chocobozzz 2019-09-02 14:35:50 +02:00
parent 57f839c17a
commit 2cfb777a9d
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
10 changed files with 213 additions and 145 deletions

View File

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

View File

@ -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('-', '_');

View File

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

View File

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

View File

@ -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
View 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
View 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));
}

View File

@ -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);
}

View File

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

View File

@ -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';
@ -107,7 +105,7 @@ const apolloClient = new ApolloClient({
cache,
link,
connectToDevTools: true,
resolvers: buildCurrentUserResolver(cache)
resolvers: buildCurrentUserResolver(cache),
});
export const apolloProvider = new VueApollo({