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>
<div id="mobilizon">
<NavBar />
<main class="container">
<main>
<router-view />
</main>
<mobilizon-footer />

View File

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

View File

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

View File

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

View File

@ -1,6 +1,6 @@
import {EventJoinOptions} from "@/types/event.model";
<template>
<section class="container">
<section>
<div class="container">
<h1 class="title" v-if="isUpdate === false">
{{ $t('Create a new event') }}
</h1>
@ -8,10 +8,8 @@ import {EventJoinOptions} from "@/types/event.model";
{{ $t('Update event {name}', { name: event.title }) }}
</h1>
<div v-if="$apollo.loading">{{ $t('Loading') }}</div>
<div class="columns is-centered" v-else>
<form class="column is-two-thirds-desktop" @submit="createOrUpdate">
<div class="columns is-centered">
<form class="column is-two-thirds-desktop">
<h2 class="subtitle">
{{ $t('General information') }}
</h2>
@ -156,17 +154,41 @@ import {EventJoinOptions} from "@/types/event.model";
{{ $t('Confirmed: Will happen') }}
</b-radio>
</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>
</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>
</template>
<style lang="scss">
<style lang="scss" scoped>
@import "@/variables.scss";
h2.subtitle {
@ -178,6 +200,32 @@ import {EventJoinOptions} from "@/types/event.model";
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>
<script lang="ts">
@ -187,8 +235,8 @@ import {
CommentModeration, EventJoinOptions,
EventModel,
EventStatus,
EventVisibility,
} from '@/types/event.model';
EventVisibility, IEvent,
} from '@/types/event.model';
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue';
@ -220,7 +268,8 @@ export default class EditEvent extends Vue {
currentActor = new Person();
tags: ITag[] = [];
event = new EventModel();
event: IEvent = new EventModel();
unmodifiedEvent!: IEvent;
pictureFile: File | null = null;
EventStatus = EventStatus;
@ -229,6 +278,8 @@ export default class EditEvent extends Vue {
canPromote: boolean = true;
limitedPlaces: boolean = false;
CommentModeration = CommentModeration;
showFixedNavbar: boolean = true;
observer!: IntersectionObserver;
// categories: string[] = Object.keys(Category);
@ -240,6 +291,7 @@ export default class EditEvent extends Vue {
if (this.eventId) {
this.event = await this.getEvent();
this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event));
this.pictureFile = await buildFileFromIPicture(this.event.picture);
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;
}
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) {
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];
}
/**
* 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) {
// if (addressData !== null) {
// 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>
<div>
<div class="container">
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="event">
<div class="header-picture container">

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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