Improve my events / my groups when there's no content

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-12-09 19:09:31 +01:00
parent 9de04695d9
commit 71854ec7b7
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
4 changed files with 124 additions and 23 deletions

View File

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

View File

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

View File

@ -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"
<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 }"
type="is-primary"
slot="create_event"
>{{ $t("create an event") }}</router-link
>
{{ $t("Create") }}
</b-button>
<router-link
:to="{ name: RouteName.SEARCH }"
slot="explore_events"
>{{ $t("explore the events") }}</router-link
>
</i18n>
</p>
</div>
</div>
</div>
</b-message>
</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>

View File

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