Add a cancel button to event edit & make buttons fixed

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-01 20:10:53 +02:00
parent 587667078c
commit 0c732ab4f7
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
17 changed files with 258 additions and 167 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div id="mobilizon"> <div id="mobilizon">
<NavBar /> <NavBar />
<main class="container"> <main>
<router-view /> <router-view />
</main> </main>
<mobilizon-footer /> <mobilizon-footer />

View File

@ -1,5 +1,5 @@
<template> <template>
<footer class="footer"> <footer class="footer" ref="footer">
<mobilizon-logo :invert="true" class="logo" /> <mobilizon-logo :invert="true" class="logo" />
<img src="../assets/footer.png" :alt="$t('World map')" /> <img src="../assets/footer.png" :alt="$t('World map')" />
<ul> <ul>

View File

@ -125,6 +125,8 @@ export interface IEvent {
tags: ITag[]; tags: ITag[];
options: IEventOptions; options: IEventOptions;
toEditJSON();
} }
export interface IEventOptions { export interface IEventOptions {
@ -228,7 +230,7 @@ export class EventModel implements IEvent {
if (hash.options) this.options = hash.options; if (hash.options) this.options = hash.options;
} }
toEditJSON () { toEditJSON() {
return { return {
id: this.id, id: this.id,
title: this.title, title: this.title,

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <section class="container">
<span v-if="code === ErrorCode.REGISTRATION_CLOSED"> <span v-if="code === ErrorCode.REGISTRATION_CLOSED">
{{ $t('Registration is currently closed.') }} {{ $t('Registration is currently closed.') }}
</span> </span>
@ -7,7 +7,7 @@
<span v-else> <span v-else>
{{ $t('Unknown error.') }} {{ $t('Unknown error.') }}
</span> </span>
</div> </section>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,6 +1,6 @@
import {EventJoinOptions} from "@/types/event.model";
<template> <template>
<section class="container"> <section>
<div class="container">
<h1 class="title" v-if="isUpdate === false"> <h1 class="title" v-if="isUpdate === false">
{{ $t('Create a new event') }} {{ $t('Create a new event') }}
</h1> </h1>
@ -8,10 +8,8 @@ import {EventJoinOptions} from "@/types/event.model";
{{ $t('Update event {name}', { name: event.title }) }} {{ $t('Update event {name}', { name: event.title }) }}
</h1> </h1>
<div v-if="$apollo.loading">{{ $t('Loading') }}</div> <div class="columns is-centered">
<form class="column is-two-thirds-desktop">
<div class="columns is-centered" v-else>
<form class="column is-two-thirds-desktop" @submit="createOrUpdate">
<h2 class="subtitle"> <h2 class="subtitle">
{{ $t('General information') }} {{ $t('General information') }}
</h2> </h2>
@ -156,17 +154,41 @@ import {EventJoinOptions} from "@/types/event.model";
{{ $t('Confirmed: Will happen') }} {{ $t('Confirmed: Will happen') }}
</b-radio> </b-radio>
</div> </div>
<button class="button is-primary">
<span v-if="isUpdate === false">{{ $t('Create my event') }}</span>
<span v-else> {{ $t('Update my event') }}</span>
</button>
</form> </form>
</div> </div>
</div>
<span ref="bottomObserver"></span>
<nav role="navigation" aria-label="main navigation" class="navbar" :class="{'is-fixed-bottom': showFixedNavbar }">
<div class="container">
<div class="navbar-menu">
<div class="navbar-start">
<span class="navbar-item" v-if="isUpdate === true && isEventModified">{{ $t('Unsaved changes') }}</span>
</div>
<div class="navbar-end">
<span class="navbar-item">
<b-button type="is-text" @click="confirmGoBack">
{{ $t('Cancel') }}
</b-button>
</span>
<span class="navbar-item" v-if="isUpdate === false">
<b-button type="is-primary" outlined>
{{ $t('Save draft') }}
</b-button>
</span>
<span class="navbar-item">
<b-button type="is-primary" @click="createOrUpdate" @keyup.enter="createOrUpdate">
<span v-if="isUpdate === false">{{ $t('Create my event') }}</span>
<span v-else> {{ $t('Update my event') }}</span>
</b-button>
</span>
</div>
</div>
</div>
</nav>
</section> </section>
</template> </template>
<style lang="scss"> <style lang="scss" scoped>
@import "@/variables.scss"; @import "@/variables.scss";
h2.subtitle { h2.subtitle {
@ -178,6 +200,32 @@ import {EventJoinOptions} from "@/types/event.model";
background: $secondary; background: $secondary;
} }
} }
section {
& > .container {
margin-bottom: 2rem;
padding: 1rem;
}
nav.navbar {
min-height: 2rem !important;
background: lighten($secondary, 10%);
.container {
min-height: 2rem;
.navbar-menu, .navbar-end {
display: flex !important;
background: lighten($secondary, 10%);
}
.navbar-end {
justify-content: flex-end;
margin-left: auto;
}
}
}
}
</style> </style>
<script lang="ts"> <script lang="ts">
@ -187,8 +235,8 @@ import {
CommentModeration, EventJoinOptions, CommentModeration, EventJoinOptions,
EventModel, EventModel,
EventStatus, EventStatus,
EventVisibility, EventVisibility, IEvent,
} from '@/types/event.model'; } from '@/types/event.model';
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { Person } from '@/types/actor'; import { Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue'; import PictureUpload from '@/components/PictureUpload.vue';
@ -220,7 +268,8 @@ export default class EditEvent extends Vue {
currentActor = new Person(); currentActor = new Person();
tags: ITag[] = []; tags: ITag[] = [];
event = new EventModel(); event: IEvent = new EventModel();
unmodifiedEvent!: IEvent;
pictureFile: File | null = null; pictureFile: File | null = null;
EventStatus = EventStatus; EventStatus = EventStatus;
@ -229,6 +278,8 @@ export default class EditEvent extends Vue {
canPromote: boolean = true; canPromote: boolean = true;
limitedPlaces: boolean = false; limitedPlaces: boolean = false;
CommentModeration = CommentModeration; CommentModeration = CommentModeration;
showFixedNavbar: boolean = true;
observer!: IntersectionObserver;
// categories: string[] = Object.keys(Category); // categories: string[] = Object.keys(Category);
@ -240,6 +291,7 @@ export default class EditEvent extends Vue {
if (this.eventId) { if (this.eventId) {
this.event = await this.getEvent(); this.event = await this.getEvent();
this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event));
this.pictureFile = await buildFileFromIPicture(this.event.picture); this.pictureFile = await buildFileFromIPicture(this.event.picture);
this.limitedPlaces = this.event.options.maximumAttendeeCapacity != null; this.limitedPlaces = this.event.options.maximumAttendeeCapacity != null;
@ -256,6 +308,20 @@ export default class EditEvent extends Vue {
this.event.organizerActor = this.event.organizerActor || this.currentActor; this.event.organizerActor = this.event.organizerActor || this.currentActor;
} }
mounted() {
this.observer = new IntersectionObserver((entries, observer) => {
for (const entry of entries) {
if (entry) {
console.log(entry);
this.showFixedNavbar = !entry.isIntersecting;
}
}
}, {
rootMargin: '-50px 0px -50px',
});
this.observer.observe(this.$refs.bottomObserver as Element);
}
createOrUpdate(e: Event) { createOrUpdate(e: Event) {
e.preventDefault(); e.preventDefault();
@ -342,6 +408,34 @@ export default class EditEvent extends Vue {
return this.event.title.length > 80 ? ['is-info', this.$t('The event title will be ellipsed.')] : [undefined, undefined]; return this.event.title.length > 80 ? ['is-info', this.$t('The event title will be ellipsed.')] : [undefined, undefined];
} }
/**
* Confirm cancel
*/
confirmGoBack() {
const title: string = this.isUpdate ?
this.$t('Cancel edition') as string :
this.$t('Cancel creation') as string;
const message: string = this.isUpdate ?
this.$t('Are you sure you want to cancel the event edition? You\'ll lose all modifications.',
{ title: this.event.title }) as string :
this.$t('Are you sure you want to cancel the event creation? You\'ll lose all modifications.',
{ title: this.event.title }) as string;
this.$buefy.dialog.confirm({
title,
message,
confirmText: this.$t('Cancel') as string,
cancelText: this.$t('Continue editing') as string,
type: 'is-warning',
hasIcon: true,
onConfirm: () => this.$router.go(-1),
});
}
get isEventModified(): boolean {
return JSON.stringify(this.event) !== JSON.stringify(this.unmodifiedEvent);
}
// getAddressData(addressData) { // getAddressData(addressData) {
// if (addressData !== null) { // if (addressData !== null) {
// this.event.address = { // this.event.address = {

View File

@ -1,8 +1,5 @@
import {ParticipantRole} from "@/types/event.model";
import {ParticipantRole} from "@/types/event.model";
import {ParticipantRole} from "@/types/event.model";
<template> <template>
<div> <div class="container">
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="event"> <div v-if="event">
<div class="header-picture container"> <div class="header-picture container">

View File

@ -1,5 +1,5 @@
<template> <template>
<section> <section class="container">
<h1> <h1>
{{ $t('Event list') }} {{ $t('Event list') }}
</h1> </h1>

View File

@ -1,5 +1,5 @@
<template> <template>
<section> <section class="container">
<h1 class="title">{{ $t('Explore') }}</h1> <h1 class="title">{{ $t('Explore') }}</h1>
<!-- <pre>{{ events }}</pre>--> <!-- <pre>{{ events }}</pre>-->
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>

View File

@ -1,5 +1,5 @@
<template> <template>
<main> <main class="container">
<h1 class="title"> <h1 class="title">
{{ $t('My events') }} {{ $t('My events') }}
</h1> </h1>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="root"> <div class="container root">
<h1>{{ $t('Create a new group') }}</h1> <h1>{{ $t('Create a new group') }}</h1>
<div> <div>

View File

@ -1,5 +1,5 @@
<template> <template>
<section> <section class="container">
<h1> <h1>
{{ $t('Group List') }} {{ $t('Group List') }}
</h1> </h1>

View File

@ -1,4 +1,3 @@
import {ReportStatusEnum} from "@/types/report.model";
<template> <template>
<section class="container"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">

View File

@ -1,4 +1,3 @@
import {ReportStatusEnum} from "@/types/report.model";
<template> <template>
<section class="container"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">

View File

@ -1,5 +1,5 @@
<template> <template>
<section class="section"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li><router-link :to="{ name: MyAccountRouteName.UPDATE_IDENTITY }">{{ $t('My account') }}</router-link></li> <li><router-link :to="{ name: MyAccountRouteName.UPDATE_IDENTITY }">{{ $t('My account') }}</router-link></li>

View File

@ -1,5 +1,5 @@
<template> <template>
<section class="columns is-mobile is-centered"> <section class="container columns is-mobile is-centered">
<div class="card column is-half-desktop"> <div class="card column is-half-desktop">
<h1> <h1>
{{ $t('Password reset') }} {{ $t('Password reset') }}

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="container">
<section class="hero"> <section class="hero">
<div class="hero-body"> <div class="hero-body">
<h1 class="title"> <h1 class="title">

View File

@ -1,5 +1,5 @@
<template> <template>
<section> <section class="container">
<h1 class="title" v-if="loading"> <h1 class="title" v-if="loading">
{{ $t('Your account is being validated') }} {{ $t('Your account is being validated') }}
</h1> </h1>