Add a cancel button to event edit & make buttons fixed

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/App.vue

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

js/src/components/Footer.vue

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

js/src/types/event.model.ts

@@ -125,6 +125,8 @@ export interface IEvent {
 
   tags: ITag[];
   options: IEventOptions;
+
+  toEditJSON();
 }
 
 export interface IEventOptions {

js/src/views/Error.vue

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

js/src/views/Event/Edit.vue

@@ -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,7 +235,7 @@ import {
   CommentModeration, EventJoinOptions,
   EventModel,
   EventStatus,
-    EventVisibility,
+  EventVisibility, IEvent,
 } from '@/types/event.model';
 import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { Person } from '@/types/actor';
@@ -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 = {

js/src/views/Event/Event.vue

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

js/src/views/Event/EventList.vue

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

js/src/views/Event/Explore.vue

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

js/src/views/Event/MyEvents.vue

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

js/src/views/Group/Create.vue

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

js/src/views/Group/GroupList.vue

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

js/src/views/Moderation/Logs.vue

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

js/src/views/Moderation/ReportList.vue

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

js/src/views/User/PasswordChange.vue

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

js/src/views/User/PasswordReset.vue

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

js/src/views/User/Register.vue

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

js/src/views/User/Validate.vue

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