From 71854ec7b7b7c5c07ed0d4d26b1a29f5d7cca21e Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 9 Dec 2020 19:09:31 +0100
Subject: [PATCH] Improve my events / my groups when there's no content

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/i18n/en_US.json          | 12 +++++-
 js/src/i18n/fr_FR.json          | 12 +++++-
 js/src/views/Event/MyEvents.vue | 76 ++++++++++++++++++++++++++-------
 js/src/views/Group/MyGroups.vue | 47 +++++++++++++++++---
 4 files changed, 124 insertions(+), 23 deletions(-)

diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 0db363aeb..c4a686b25 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -810,5 +810,15 @@
   "Unable to load event for participation. The error details are provided below:": "Unable to load event for participation. The error details are provided below:",
   "Unable to save your participation in this browser.": "Unable to save your participation in this browser.",
   "return to the event's page": "return to the event's page",
-  "View all events": "View all events"
+  "View all events": "View all events",
+  "You will find here all the events you have created or of which you are a participant.": "You will find here all the events you have created or of which you are a participant.",
+  "Create event": "Create event",
+  "You didn't create or join any event yet": "You didn't create or join any event yet",
+  "create an event": "create an event",
+  "explore the events": "explore the events",
+  "Do you wish to {create_event} or {explore_events}?": "Do you wish to {create_event} or {explore_events}?",
+  "You are not part of any group": "You are not part of any group",
+  "create a group": "create a group",
+  "explore the groups": "explore the groups",
+  "Do you wish to {create_group} or {explore_groups}?": "Do you wish to {create_group} or {explore_groups}?"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index f84e45794..8d4b9a144 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -904,5 +904,15 @@
   "Unable to save your participation in this browser.": "Échec de la sauvegarde de votre participation dans ce navigateur.",
   "return to the event's page": "retourner sur la page de l'événement",
   "You may now close this window, or {return_to_event}.": "Vous pouvez maintenant fermer cette fenêtre, ou bien {return_to_event}.",
-  "View all events": "Voir tous les événements"
+  "View all events": "Voir tous les événements",
+  "You will find here all the events you have created or of which you are a participant.": "Vous trouverez ici tous les événements que vous avez créé ou dont vous êtes un·e participant·e.",
+  "Create event": "Créer un événement",
+  "You didn't create or join any event yet.": "Vous n'avez pas encore créé ou rejoint d'événement.",
+  "create an event": "créer un événement",
+  "explore the events": "explorer les événements",
+  "Do you wish to {create_event} or {explore_events}?": "Voulez-vous {create_event} ou {explore_events} ?",
+  "You are not part of any group.": "Vous ne faites partie d'aucun groupe.",
+  "create a group": "créer un groupe",
+  "explore the groups": "explorer les groupes",
+  "Do you wish to {create_group} or {explore_groups}?": "Voulez-vous {create_group} ou {explore_groups} ?"
 }
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index 678b0b9f8..32083c01b 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -1,8 +1,22 @@
 <template>
-  <section class="section container">
+  <div class="section container">
     <h1 class="title">
       {{ $t("My events") }}
     </h1>
+    <p>
+      {{
+        $t(
+          "You will find here all the events you have created or of which you are a participant."
+        )
+      }}
+    </p>
+    <div class="buttons">
+      <router-link
+        class="button is-primary"
+        :to="{ name: RouteName.CREATE_EVENT }"
+        >{{ $t("Create event") }}</router-link
+      >
+    </div>
     <b-loading :active.sync="$apollo.loading"></b-loading>
     <section v-if="futureParticipations.length > 0">
       <subtitle>
@@ -77,32 +91,44 @@
         >
       </div>
     </section>
-    <b-message
+    <section
+      class="has-text-centered not-found"
       v-if="
         futureParticipations.length === 0 &&
         pastParticipations.length === 0 &&
-        $apollo.loading === false
+        !$apollo.loading
       "
-      type="is-danger"
     >
-      {{ $t("No events found") }}
-
-      <div class="suggest-create-event">
-        <b-button
-          tag="router-link"
-          :to="{ name: RouteName.CREATE_EVENT }"
-          type="is-primary"
-        >
-          {{ $t("Create") }}
-        </b-button>
+      <div class="columns is-vertical is-centered">
+        <div class="column is-three-quarters">
+          <div class="img-container" />
+          <div class="content has-text-centered">
+            <p>
+              {{ $t("You didn't create or join any event yet.") }}
+              <i18n path="Do you wish to {create_event} or {explore_events}?">
+                <router-link
+                  :to="{ name: RouteName.CREATE_EVENT }"
+                  slot="create_event"
+                  >{{ $t("create an event") }}</router-link
+                >
+                <router-link
+                  :to="{ name: RouteName.SEARCH }"
+                  slot="explore_events"
+                  >{{ $t("explore the events") }}</router-link
+                >
+              </i18n>
+            </p>
+          </div>
+        </div>
       </div>
-    </b-message>
-  </section>
+    </section>
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { ParticipantRole } from "@/types/enums";
+import RouteName from "@/router/name";
 import { IParticipant, Participant } from "../../types/participant.model";
 import {
   LOGGED_USER_PARTICIPATIONS,
@@ -183,6 +209,8 @@ export default class MyEvents extends Vue {
 
   drafts: IEvent[] = [];
 
+  RouteName = RouteName;
+
   static monthlyParticipations(
     participations: IParticipant[],
     revertSort = false
@@ -309,6 +337,10 @@ export default class MyEvents extends Vue {
 <style lang="scss" scoped>
 main > .container {
   background: $white;
+
+  & > h1 {
+    margin: 10px auto 5px;
+  }
 }
 
 .participation {
@@ -320,4 +352,16 @@ section {
     text-transform: capitalize;
   }
 }
+
+.not-found {
+  .img-container {
+    background-image: url("/img/pics/2020-10-06-mobilizon-illustration-B_creation-evenement.jpg");
+    max-width: 450px;
+    height: 300px;
+    box-shadow: 0 0 8px 8px white inset;
+    background-size: cover;
+    border-radius: 10px;
+    margin: auto auto 1rem;
+  }
+}
 </style>
diff --git a/js/src/views/Group/MyGroups.vue b/js/src/views/Group/MyGroups.vue
index 1d80acb27..43473ddaa 100644
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -40,12 +40,33 @@
       >
       </b-pagination>
     </section>
-    <b-message
-      v-if="$apollo.loading === false && memberships.length === 0"
-      type="is-danger"
+    <section
+      class="has-text-centered not-found"
+      v-if="memberships.length === 0 && !$apollo.loading"
     >
-      {{ $t("No groups found") }}
-    </b-message>
+      <div class="columns is-vertical is-centered">
+        <div class="column is-three-quarters">
+          <div class="img-container" />
+          <div class="content has-text-centered">
+            <p>
+              {{ $t("You are not part of any group.") }}
+              <i18n path="Do you wish to {create_group} or {explore_groups}?">
+                <router-link
+                  :to="{ name: RouteName.CREATE_GROUP }"
+                  slot="create_group"
+                  >{{ $t("create a group") }}</router-link
+                >
+                <router-link
+                  :to="{ name: RouteName.SEARCH }"
+                  slot="explore_groups"
+                  >{{ $t("explore the groups") }}</router-link
+                >
+              </i18n>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
   </section>
 </template>
 
@@ -156,6 +177,10 @@ export default class MyGroups extends Vue {
 <style lang="scss" scoped>
 main > .container {
   background: $white;
+
+  & > h1 {
+    margin: 10px auto 5px;
+  }
 }
 
 .participation {
@@ -171,4 +196,16 @@ section {
 .group-member-card {
   margin-bottom: 1rem;
 }
+
+.not-found {
+  .img-container {
+    background-image: url("/img/pics/2020-10-06-mobilizon-illustration-C_groupe.jpg");
+    max-width: 450px;
+    height: 300px;
+    box-shadow: 0 0 8px 8px white inset;
+    background-size: cover;
+    border-radius: 10px;
+    margin: auto auto 1rem;
+  }
+}
 </style>