Fix participations list actions with another identity

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-13 16:24:43 +02:00
parent 717ef84ab8
commit 3e4bd76f29
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
12 changed files with 135 additions and 59 deletions

View File

@ -76,17 +76,10 @@ A simple card for an event
</template> </template>
<script lang="ts"> <script lang="ts">
import { IEvent, ParticipantRole } from '@/types/event.model'; import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue'; import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
import { IActor, IPerson, Person } from '@/types/actor'; import { Person } from '@/types/actor';
export interface IEventCardOptions {
hideDate: boolean;
loggedPerson: IPerson | boolean;
hideDetails: boolean;
organizerActor: IActor | null;
}
@Component({ @Component({
components: { components: {

View File

@ -60,35 +60,37 @@ export default {
</div> </div>
<h2 class="title">{{ participation.event.title }}</h2> <h2 class="title">{{ participation.event.title }}</h2>
</div> </div>
<div> <div class="participation-actor has-text-grey">
<span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span> <span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span>
<span v-if="participation.actor.id === participation.event.organizerActor.id">{{ $t("You're organizing this event") }}</span> <span>
<span v-else> {{ $t('Organized by {name}', { name: participation.event.organizerActor.displayName() } ) }}</span>
<span v-if="participation.event.beginsOn < new Date()">{{ $t('Organized by {name}', { name: participation.event.organizerActor.displayName() } ) }}</span> <span v-if="participation.role === ParticipantRole.PARTICIPANT">{{ $t('Going as {name}', { name: participation.actor.displayName() }) }}</span>
|
<span>{{ $t('Going as {name}', { name: participation.actor.displayName() }) }}</span>
</span> </span>
</div> </div>
<div class="columns"> <div class="columns">
<span class="column is-narrow"> <span class="column is-narrow">
<b-icon icon="earth" v-if=" participation.event.visibility === EventVisibility.PUBLIC" /> <b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" />
<b-icon icon="lock_opened" v-if=" participation.event.visibility === EventVisibility.RESTRICTED" /> <b-icon icon="lock-open" v-if="participation.event.visibility === EventVisibility.UNLISTED" />
<b-icon icon="lock" v-if=" participation.event.visibility === EventVisibility.PRIVATE" /> <b-icon icon="lock" v-if="participation.event.visibility === EventVisibility.PRIVATE" />
</span> </span>
<span class="column"> <span class="column is-narrow participant-stats">
<span v-if="!participation.event.options.maximumAttendeeCapacity"> <!-- <span v-if="participation.event.options.maximumAttendeeCapacity !== 0">-->
{{ $tc('{count} participants', participation.event.participantStats.approved, { count: participation.event.participantStats.approved })}} <!-- {{ $tc('{count} participants', participation.event.participantStats.participants, { count: participation.event.participantStats.participants })}}-->
<!-- </span>-->
<span v-if="participation.event.options.maximumAttendeeCapacity !== 0">
{{ $t('{approved} / {total} seats', {approved: participation.event.participantStats.participants, total: participation.event.options.maximumAttendeeCapacity }) }}
<!-- <b-progress-->
<!-- v-if="participation.event.options.maximumAttendeeCapacity > 0"-->
<!-- size="is-medium"-->
<!-- :value="participation.event.participantStats.participants * 100 / participation.event.options.maximumAttendeeCapacity">-->
<!-- </b-progress>-->
</span> </span>
<b-progress <span v-else>{{ $t('No participants yet') }}</span>
v-if="participation.event.options.maximumAttendeeCapacity > 0"
type="is-primary"
size="is-medium"
:value="participation.event.participantStats.approved * 100 / participation.event.options.maximumAttendeeCapacity" show-value>
{{ $t('{approved} / {total} seats', {approved: participation.event.participantStats.approved, total: participation.event.options.maximumAttendeeCapacity }) }}
</b-progress>
<span <span
v-if="participation.event.participantStats.unapproved > 0"> v-if="participation.event.participantStats.unapproved > 0">
<b-button type="is-text" @click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })">
{{ $tc('{count} requests waiting', participation.event.participantStats.unapproved, { count: participation.event.participantStats.unapproved })}} {{ $tc('{count} requests waiting', participation.event.participantStats.unapproved, { count: participation.event.participantStats.unapproved })}}
</b-button>
</span> </span>
</span> </span>
</div> </div>
@ -96,20 +98,36 @@ export default {
<div class="actions column is-narrow"> <div class="actions column is-narrow">
<ul> <ul>
<li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))"> <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
<router-link :to="{ name: RouteName.EDIT_EVENT, params: { eventId: participation.event.uuid } }"> <b-button
<b-icon icon="pencil" /> {{ $t('Edit') }} type="is-text"
</router-link> @click="gotToWithCheck(participation, { name: RouteName.EDIT_EVENT, params: { eventId: participation.event.uuid } })"
icon-left="pencil"
>
{{ $t('Edit') }}
</b-button>
</li>
<li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))" @click="openDeleteEventModalWrapper">
<b-button type="is-text" icon-left="delete">
{{ $t('Delete') }}
</b-button>
</li> </li>
<li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))"> <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
<a @click="openDeleteEventModalWrapper"><b-icon icon="delete" /> {{ $t('Delete') }}</a> <b-button
</li> type="is-text"
<li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))"> @click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })"
<router-link :to="{ name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } }"> icon-left="account-multiple-plus"
<b-icon icon="account-multiple-plus" /> {{ $t('Manage participations') }} >
</router-link> {{ $t('Manage participations') }}
</b-button>
</li> </li>
<li> <li>
<router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"><b-icon icon="view-compact" /> {{ $t('View event page') }}</router-link> <b-button
tag="router-link"
icon-left="view-compact"
type="is-text"
:to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
{{ $t('View event page') }}
</b-button>
</li> </li>
</ul> </ul>
</div> </div>
@ -118,17 +136,17 @@ export default {
</template> </template>
<script lang="ts"> <script lang="ts">
import { IParticipant, ParticipantRole, EventVisibility } from '@/types/event.model'; import { IParticipant, ParticipantRole, EventVisibility, IEventCardOptions } from '@/types/event.model';
import { Component, Prop } from 'vue-property-decorator'; import { Component, Prop } from 'vue-property-decorator';
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue'; import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
import { IActor, IPerson, Person } from '@/types/actor'; import { IPerson } from '@/types/actor';
import { mixins } from 'vue-class-component'; import { mixins } from 'vue-class-component';
import ActorMixin from '@/mixins/actor'; import ActorMixin from '@/mixins/actor';
import { CURRENT_ACTOR_CLIENT, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import EventMixin from '@/mixins/event'; import EventMixin from '@/mixins/event';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import { ICurrentUser } from '@/types/current-user.model'; import { changeIdentity } from '@/utils/auth';
import { IEventCardOptions } from './EventCard.vue'; import { Route } from 'vue-router';
const defaultOptions: IEventCardOptions = { const defaultOptions: IEventCardOptions = {
hideDate: true, hideDate: true,
@ -174,10 +192,26 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
await this.openDeleteEventModal(this.participation.event, this.currentActor); await this.openDeleteEventModal(this.participation.event, this.currentActor);
} }
async gotToWithCheck(participation: IParticipant, route: Route) {
if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) {
const organizer = participation.event.organizerActor as IPerson;
await changeIdentity(this.$apollo.provider.defaultClient, organizer);
this.$buefy.notification.open({
message: this.$t('Current identity has been changed to {identityName} in order to manage this event.', {
identityName: organizer.preferredUsername,
}) as string,
type: 'is-info',
position: 'is-bottom-right',
duration: 5000,
});
}
return await this.$router.push(route);
}
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import "../../variables"; @import "../../variables";
article.box { article.box {
@ -205,6 +239,15 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
div.content { div.content {
padding: 5px; padding: 5px;
.participation-actor span, .participant-stats span {
padding: 0 5px;
button {
height: auto;
padding-top: 0;
}
}
div.title-wrapper { div.title-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
@ -227,14 +270,29 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
} }
} }
progress + .progress-value { /deep/ progress + .progress-value {
color: $primary !important; color: lighten($primary, 20%) !important;
} }
} }
.actions { .actions {
ul li { ul li {
margin: 0 auto; margin: 0 auto;
.is-link {
cursor: pointer;
}
.button.is-text {
text-decoration: none;
/deep/ span:first-child i.mdi::before {
font-size: 24px !important;
}
/deep/ span:last-child {
padding-left: 4px;
}
}
* { * {
font-size: 0.8rem; font-size: 0.8rem;

View File

@ -20,7 +20,7 @@
<figure class="image is-32x32" v-if="currentActor.avatar"> <figure class="image is-32x32" v-if="currentActor.avatar">
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url"> <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url">
</figure> </figure>
<span>{{ currentActor.preferredUsername }}</span> <b-icon v-else icon="account-circle" />
</template> </template>
<b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 1" :active="identity.id === currentActor.id" :key="identity.id"> <b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 1" :active="identity.id === currentActor.id" :key="identity.id">
@ -29,10 +29,14 @@
<figure class="image is-32x32" v-if="identity.avatar"> <figure class="image is-32x32" v-if="identity.avatar">
<img class="is-rounded" :src="identity.avatar.url" alt="" /> <img class="is-rounded" :src="identity.avatar.url" alt="" />
</figure> </figure>
<b-icon v-else icon="account-circle" />
</div> </div>
<div class="media-content"> <div class="media-content">
<span>{{ identity.displayName() }}</span> <span>{{ identity.displayName() }}</span>
<span class="has-text-grey" v-if="identity.name">
@{{ identity.preferredUsername }}
</span>
</div> </div>
</span> </span>

View File

@ -114,7 +114,8 @@ query LoggedUserParticipations($afterDateTime: DateTime, $beforeDateTime: DateTi
}, },
participantStats { participantStats {
approved, approved,
unapproved unapproved,
participants
}, },
options { options {
maximumAttendeeCapacity maximumAttendeeCapacity

View File

@ -56,6 +56,7 @@
"Create your communities and your events": "Create your communities and your events", "Create your communities and your events": "Create your communities and your events",
"Create": "Create", "Create": "Create",
"Creator": "Creator", "Creator": "Creator",
"Current identity has been changed to {identityName} in order to manage this event.": "Current identity has been changed to {identityName} in order to manage this event.",
"Delete event": "Delete event", "Delete event": "Delete event",
"Delete this identity": "Delete this identity", "Delete this identity": "Delete this identity",
"Delete your identity": "Delete your identity", "Delete your identity": "Delete your identity",
@ -149,6 +150,7 @@
"No events found": "No events found", "No events found": "No events found",
"No group found": "No group found", "No group found": "No group found",
"No groups found": "No groups found", "No groups found": "No groups found",
"No participants yet": "No participants yet",
"No results for \"{queryText}\"": "No results for \"{queryText}\"", "No results for \"{queryText}\"": "No results for \"{queryText}\"",
"Number of places": "Number of places", "Number of places": "Number of places",
"Old password": "Old password", "Old password": "Old password",
@ -225,6 +227,7 @@
"Street": "Street", "Street": "Street",
"Tentative: Will be confirmed later": "Tentative: Will be confirmed later", "Tentative: Will be confirmed later": "Tentative: Will be confirmed later",
"The content came from another server. Transfer an anonymous copy of the report?": "The content came from another server. Transfer an anonymous copy of the report ?", "The content came from another server. Transfer an anonymous copy of the report?": "The content came from another server. Transfer an anonymous copy of the report ?",
"The current identity doesn't have any permission on this event. You should probably change it.": "The current identity doesn't have any permission on this event. You should probably change it.",
"The draft event has been updated": "The draft event has been updated", "The draft event has been updated": "The draft event has been updated",
"The event has been created as a draft": "The event has been created as a draft", "The event has been created as a draft": "The event has been created as a draft",
"The event has been published": "The event has been published", "The event has been published": "The event has been published",
@ -281,7 +284,6 @@
"You have one event today.": "You have no events today | You have one event today. | You have {count} events today", "You have one event today.": "You have no events today | You have one event today. | You have {count} events today",
"You have one event tomorrow.": "You have no events tomorrow | You have one event tomorrow. | You have {count} events tomorrow", "You have one event tomorrow.": "You have no events tomorrow | You have one event tomorrow. | You have {count} events tomorrow",
"You need to login.": "You need to login.", "You need to login.": "You need to login.",
"You're organizing this event": "You're organizing this event",
"Your account has been validated": "Your account has been validated", "Your account has been validated": "Your account has been validated",
"Your account is being validated": "Your account is being validated", "Your account is being validated": "Your account is being validated",
"Your account is nearly ready, {username}": "Your account is nearly ready, {username}", "Your account is nearly ready, {username}": "Your account is nearly ready, {username}",

View File

@ -56,6 +56,7 @@
"Create your communities and your events": "Créer vos communautés et vos événements", "Create your communities and your events": "Créer vos communautés et vos événements",
"Create": "Créer", "Create": "Créer",
"Creator": "Créateur", "Creator": "Créateur",
"Current identity has been changed to {identityName} in order to manage this event.": "L'identité actuelle a été changée à {identityName} pour pouvoir gérer cet événement.",
"Delete event": "Supprimer un événement", "Delete event": "Supprimer un événement",
"Delete this identity": "Supprimer cette identité", "Delete this identity": "Supprimer cette identité",
"Delete your identity": "Supprimer votre identité", "Delete your identity": "Supprimer votre identité",
@ -149,6 +150,7 @@
"No events found": "Aucun événement trouvé", "No events found": "Aucun événement trouvé",
"No group found": "Aucun groupe trouvé", "No group found": "Aucun groupe trouvé",
"No groups found": "Aucun groupe trouvé", "No groups found": "Aucun groupe trouvé",
"No participants yet": "Aucun⋅e participant⋅e pour le moment",
"No results for \"{queryText}\"": "Pas de résultats pour « {queryText} »", "No results for \"{queryText}\"": "Pas de résultats pour « {queryText} »",
"Number of places": "Nombre de places", "Number of places": "Nombre de places",
"Old password": "Ancien mot de passe", "Old password": "Ancien mot de passe",
@ -225,6 +227,7 @@
"Street": "Rue", "Street": "Rue",
"Tentative: Will be confirmed later": "Provisoire : sera confirmé plus tard", "Tentative: Will be confirmed later": "Provisoire : sera confirmé plus tard",
"The content came from another server. Transfer an anonymous copy of the report?": "Le contenu provient d'une autre instance. Transférer une copie anonyme du signalement ?", "The content came from another server. Transfer an anonymous copy of the report?": "Le contenu provient d'une autre instance. Transférer une copie anonyme du signalement ?",
"The current identity doesn't have any permission on this event. You should probably change it.": "L'identité actuelle n'a pas de permissions sur cet événement. Vous devriez probablement en changer.",
"The draft event has been updated": "L'événement brouillon a été mis à jour", "The draft event has been updated": "L'événement brouillon a été mis à jour",
"The event has been created as a draft": "L'événement a été créé en tant que brouillon", "The event has been created as a draft": "L'événement a été créé en tant que brouillon",
"The event has been published": "L'événement a été publié", "The event has been published": "L'événement a été publié",
@ -281,7 +284,6 @@
"You have one event today.": "Vous n'avez pas d'évenement aujourd'hui | Vous avez un événement aujourd'hui. | Vous avez {count} événements aujourd'hui", "You have one event today.": "Vous n'avez pas d'évenement aujourd'hui | Vous avez un événement aujourd'hui. | Vous avez {count} événements aujourd'hui",
"You have one event tomorrow.": "Vous n'avez pas d'événement demain | Vous avez un événement demain. | Vous avez {count} événements demain", "You have one event tomorrow.": "Vous n'avez pas d'événement demain | Vous avez un événement demain. | Vous avez {count} événements demain",
"You need to login.": "Vous devez vous connecter.", "You need to login.": "Vous devez vous connecter.",
"You're organizing this event": "Vous organisez cet événement",
"Your account has been validated": "Votre compte a été validé", "Your account has been validated": "Votre compte a été validé",
"Your account is being validated": "Votre compte est en cours de validation", "Your account is being validated": "Votre compte est en cours de validation",
"Your account is nearly ready, {username}": "Votre compte est presque prêt, {username}", "Your account is nearly ready, {username}": "Votre compte est presque prêt, {username}",
@ -301,7 +303,7 @@
"with {identity}": "avec {identity}", "with {identity}": "avec {identity}",
"{approved} / {total} seats": "{approved} / {total} places", "{approved} / {total} seats": "{approved} / {total} places",
"{count} participants": "Un⋅e participant⋅e|{count} participant⋅e⋅s", "{count} participants": "Un⋅e participant⋅e|{count} participant⋅e⋅s",
"{count} requests waiting": "Une demande en attente|{count} demandes en attente", "{count} requests waiting": "Une demande en attente|{count} demandes en attente",
"{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} garantit {respect} des personnes qui l'utiliseront. Puisque {source}, il est publiquement auditable, ce qui garantit sa transparence.", "{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} garantit {respect} des personnes qui l'utiliseront. Puisque {source}, il est publiquement auditable, ce qui garantit sa transparence.",
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines" "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines"
} }

View File

@ -121,7 +121,6 @@
"{count} participants": "Un participant|{count} participants", "{count} participants": "Un participant|{count} participants",
"{approved} / {total} seats": "{approved} / {total} plaças", "{approved} / {total} seats": "{approved} / {total} plaças",
"meditate a bit": "meditatz un pauc", "meditate a bit": "meditatz un pauc",
"You're organizing this event": "Organizatz aqueste eveniment",
"You need to login.": "Vos cal vos connectar.", "You need to login.": "Vos cal vos connectar.",
"You are an organizer.": "Sètz un organizaire.", "You are an organizer.": "Sètz un organizaire.",
"You are already logged-in.": "Sètz ja connectat.", "You are already logged-in.": "Sètz ja connectat.",

View File

@ -1,4 +1,4 @@
import { Actor, IActor } from './actor'; import { Actor, IActor, IPerson } from './actor';
import { IAddress } from '@/types/address.model'; import { IAddress } from '@/types/address.model';
import { ITag } from '@/types/tag.model'; import { ITag } from '@/types/tag.model';
import { IPicture } from '@/types/picture.model'; import { IPicture } from '@/types/picture.model';
@ -45,6 +45,13 @@ export enum Category {
MEETING = 'meeting', MEETING = 'meeting',
} }
export interface IEventCardOptions {
hideDate: boolean;
loggedPerson: IPerson | boolean;
hideDetails: boolean;
organizerActor: IActor | null;
}
export interface IParticipant { export interface IParticipant {
id?: string; id?: string;
role: ParticipantRole; role: ParticipantRole;

View File

@ -43,5 +43,9 @@ export const errors: IError[] = [
match: /NetworkError when attempting to fetch resource.$/, match: /NetworkError when attempting to fetch resource.$/,
value: i18n.t('Error while communicating with the server.') as string, value: i18n.t('Error while communicating with the server.') as string,
}, },
{
match: /Provided moderator actor ID doesn't have permission on this event$/,
value: i18n.t("The current identity doesn't have any permission on this event. You should probably change it.") as string,
suggestRefresh: false,
},
]; ];

View File

@ -13,7 +13,7 @@
<h3>{{ month[0] }}</h3> <h3>{{ month[0] }}</h3>
<EventListCard <EventListCard
v-for="participation in month[1]" v-for="participation in month[1]"
:key="`${participation.event.uuid}${participation.actor.id}`" :key="participation.id"
:participation="participation" :participation="participation"
:options="{ hideDate: false }" :options="{ hideDate: false }"
@eventDeleted="eventDeleted" @eventDeleted="eventDeleted"
@ -48,7 +48,7 @@
<h3>{{ month[0] }}</h3> <h3>{{ month[0] }}</h3>
<EventListCard <EventListCard
v-for="participation in month[1]" v-for="participation in month[1]"
:key="`${participation.event.uuid}${participation.actor.id}`" :key="participation.id"
:participation="participation" :participation="participation"
:options="{ hideDate: false }" :options="{ hideDate: false }"
@eventDeleted="eventDeleted" @eventDeleted="eventDeleted"

View File

@ -55,7 +55,7 @@
<EventListCard <EventListCard
v-for="participation in row[1]" v-for="participation in row[1]"
v-if="isInLessThanSevenDays(row[0])" v-if="isInLessThanSevenDays(row[0])"
:key="participation[1].event.uuid" :key="participation[1].id"
:participation="participation[1]" :participation="participation[1]"
/> />
</div> </div>

View File

@ -89,10 +89,16 @@ const errorLink = onError(({ graphQLErrors, networkError, forward, operation })
} }
if (graphQLErrors) { if (graphQLErrors) {
const messages: Set<string> = new Set();
graphQLErrors.forEach(({ message, locations, path }) => { graphQLErrors.forEach(({ message, locations, path }) => {
Snackbar.open({ message: computeErrorMessage(message), type: 'is-danger', position: 'is-bottom' }); messages.add(computeErrorMessage(message));
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`); console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
}); });
for (const message of messages) {
Snackbar.open({ message, type: 'is-danger', position: 'is-bottom' });
}
} }
if (networkError) { if (networkError) {