Couple of fixes, and introducing Explore section

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

js/src/views/Event/Edit.vue

@@ -55,23 +55,23 @@ import {EventJoinOptions} from "@/types/event.model";
           {{ $t('Who can view this event and participate') }}
         </h2>
           <div class="field">
-            <b-radio v-model="eventVisibilityJoinOptions"
-                     name="eventVisibilityJoinOptions"
-                     :native-value="EventVisibilityJoinOptions.PUBLIC">
+            <b-radio v-model="event.visibility"
+                     name="eventVisibility"
+                     :native-value="EventVisibility.PUBLIC">
               {{ $t('Visible everywhere on the web (public)') }}
             </b-radio>
           </div>
           <div class="field">
-            <b-radio v-model="eventVisibilityJoinOptions"
-                     name="eventVisibilityJoinOptions"
-                     :native-value="EventVisibilityJoinOptions.LINK">
+            <b-radio v-model="event.visibility"
+                     name="eventVisibility"
+                     :native-value="EventVisibility.UNLISTED">
               {{ $t('Only accessible through link and search (private)') }}
             </b-radio>
           </div>
         <div class="field">
-          <b-radio v-model="eventVisibilityJoinOptions"
-                   name="eventVisibilityJoinOptions"
-                   :native-value="EventVisibilityJoinOptions.LIMITED">
+          <b-radio v-model="event.visibility"
+                   name="eventVisibility"
+                   :native-value="EventVisibility.PRIVATE">
              {{ $t('Page limited to my group (asks for auth)') }}
           </b-radio>
         </div>
@@ -83,13 +83,6 @@ import {EventJoinOptions} from "@/types/event.model";
           </b-switch>
         </div>
 
-        <div class="field">
-          <label class="label">{{ $t('Promotion') }}</label>
-          <b-switch v-model="doNotPromote" :disabled="canPromote === false">
-            {{ $t('Disallow promoting on Mobilizon')}}
-          </b-switch>
-        </div>
-
         <div class="field">
           <b-switch v-model="limitedPlaces">
             {{ $t('Limited places') }}
@@ -232,10 +225,8 @@ export default class EditEvent extends Vue {
   pictureFile: File | null = null;
 
   EventStatus = EventStatus;
-  EventVisibilityJoinOptions = EventVisibilityJoinOptions;
-  eventVisibilityJoinOptions: EventVisibilityJoinOptions = EventVisibilityJoinOptions.PUBLIC;
+  EventVisibility = EventVisibility;
   needsApproval: boolean = false;
-  doNotPromote: boolean = false;
   canPromote: boolean = true;
   limitedPlaces: boolean = false;
   CommentModeration = CommentModeration;
@@ -339,26 +330,6 @@ export default class EditEvent extends Vue {
     return new EventModel(result.data.event);
   }
 
-  @Watch('eventVisibilityJoinOptions')
-  calculateVisibilityAndJoinOptions(eventVisibilityJoinOptions) {
-    switch (eventVisibilityJoinOptions) {
-      case EventVisibilityJoinOptions.PUBLIC:
-        this.event.visibility = EventVisibility.UNLISTED;
-        this.canPromote = true;
-        break;
-      case EventVisibilityJoinOptions.LINK:
-        this.event.visibility = EventVisibility.PRIVATE;
-        this.canPromote = false;
-        this.doNotPromote = false;
-        break;
-      case EventVisibilityJoinOptions.LIMITED:
-        this.event.visibility = EventVisibility.RESTRICTED;
-        this.canPromote = false;
-        this.doNotPromote = false;
-        break;
-    }
-  }
-
   @Watch('needsApproval')
   updateEventJoinOptions(needsApproval) {
     if (needsApproval === true) {

js/src/views/Event/Event.vue

@@ -38,10 +38,11 @@
           <div class="metadata columns">
             <div class="column is-three-quarters-desktop">
               <p class="tags" v-if="event.category || event.tags.length > 0">
-                <span class="tag" v-if="event.category">{{ event.category }}</span>
+<!--                <span class="tag" v-if="event.category">{{ event.category }}</span>-->
                 <span class="tag" v-if="event.tags" v-for="tag in event.tags">{{ tag.title }}</span>
                 <span class="visibility">
-                  <span v-if="event.visibility === EventVisibility.PUBLIC">{{ $t('public event') }}</span>
+                  <span v-if="event.visibility === EventVisibility.PUBLIC">{{ $t('Public event') }}</span>
+                  <span v-if="event.visibility === EventVisibility.UNLISTED">{{ $t('Private event') }}</span>
                 </span>
               </p>
               <div class="date-and-add-to-calendar">
@@ -84,7 +85,7 @@
                 <span v-if="!event.physicalAddress">{{ $t('No address defined') }}</span>
                 <div class="address" v-if="event.physicalAddress">
                   <address>
-                    <span class="addressDescription">{{ event.physicalAddress.description }}</span>
+                    <span class="addressDescription" :title="event.physicalAddress.description">{{ event.physicalAddress.description }}</span>
                     <span>{{ event.physicalAddress.floor }} {{ event.physicalAddress.street }}</span>
                     <span>{{ event.physicalAddress.postalCode }} {{ event.physicalAddress.locality }}</span>
   <!--                  <span>{{ event.physicalAddress.region }} {{ event.physicalAddress.country }}</span>-->
@@ -93,7 +94,7 @@
                     {{ $t('Show map') }}
                   </span>
                 </div>
-                <b-modal v-if="event.physicalAddress && event.physicalAddress.geom" :active.sync="showMap" :width="800" scroll="keep">
+                <b-modal v-if="event.physicalAddress && event.physicalAddress.geom" :active.sync="showMap" scroll="keep">
                   <div class="map">
                     <map-leaflet
                             :coords="event.physicalAddress.geom"
@@ -444,6 +445,8 @@ export default class Event extends EventMixin {
             white-space: nowrap;
             flex: 1 0 auto;
             min-width: 100%;
+            max-width: 4rem;
+            overflow: hidden;
           }
 
           :not(.addressDescription) {

js/src/views/Event/Explore.vue

@@ -0,0 +1,42 @@
+<template>
+  <section>
+    <h1 class="title">{{ $t('Explore') }}</h1>
+<!--    <pre>{{ events }}</pre>-->
+    <b-loading :active.sync="$apollo.loading"></b-loading>
+    <div v-if="events.length > 0" class="columns is-multiline">
+      <EventCard
+        v-for="event in events"
+        :key="event.uuid"
+        :event="event"
+        class="column is-one-quarter-desktop"
+      />
+    </div>
+    <b-message v-else-if="events.length === 0 && $apollo.loading === false" type="is-danger">
+      {{ $t('No events found') }}
+    </b-message>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import EventCard from '@/components/Event/EventCard.vue';
+import { FETCH_EVENTS } from '@/graphql/event';
+import { IEvent } from '@/types/event.model';
+
+@Component({
+  components: {
+    EventCard,
+  },
+  apollo: {
+    events: {
+      query: FETCH_EVENTS,
+    },
+  },
+})
+export default class Explore extends Vue {
+  events: IEvent[] = [];
+}
+</script>
+
+<style scoped>
+</style>

js/src/views/Event/MyEvents.vue

@@ -1,5 +1,5 @@
 <template>
-    <main class="container">
+    <main>
         <h1 class="title">
             {{ $t('My events') }}
         </h1>
@@ -87,8 +87,6 @@ import EventListCard from '@/components/Event/EventListCard.vue';
   },
 })
 export default class MyEvents extends Vue {
-  @Prop(String) location!: string;
-
   futurePage: number = 1;
   pastPage: number = 1;
   limit: number = 10;