Introduce group basic federation, event new page and notifications
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -1,17 +1,11 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="container">
|
||||
<h1 class="title" v-if="isUpdate === false">
|
||||
{{ $t('Create a new event') }}
|
||||
</h1>
|
||||
<h1 class="title" v-else>
|
||||
{{ $t('Update event {name}', { name: event.title }) }}
|
||||
</h1>
|
||||
<h1 class="title" v-if="isUpdate === false">{{ $t("Create a new event") }}</h1>
|
||||
<h1 class="title" v-else>{{ $t("Update event {name}", { name: event.title }) }}</h1>
|
||||
|
||||
<form ref="form">
|
||||
<subtitle>
|
||||
{{ $t('General information') }}
|
||||
</subtitle>
|
||||
<subtitle>{{ $t("General information") }}</subtitle>
|
||||
<picture-upload v-model="pictureFile" :textFallback="$t('Headline picture')" />
|
||||
|
||||
<b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
|
||||
@@ -21,18 +15,20 @@
|
||||
<tag-input v-model="event.tags" :data="tags" path="title" />
|
||||
|
||||
<date-time-picker v-model="event.beginsOn" :label="$t('Starts on…')" />
|
||||
<date-time-picker :min-datetime="event.beginsOn" v-model="event.endsOn" :label="$t('Ends on…')" />
|
||||
<!-- <b-switch v-model="endsOnNull">{{ $t('No end date') }}</b-switch>-->
|
||||
<b-button type="is-text" @click="dateSettingsIsOpen = true">{{ $t('Date parameters')}}</b-button>
|
||||
<date-time-picker
|
||||
:min-datetime="event.beginsOn"
|
||||
v-model="event.endsOn"
|
||||
:label="$t('Ends on…')"
|
||||
/>
|
||||
<!-- <b-switch v-model="endsOnNull">{{ $t('No end date') }}</b-switch>-->
|
||||
<b-button type="is-text" @click="dateSettingsIsOpen = true">
|
||||
{{ $t("Date parameters") }}
|
||||
</b-button>
|
||||
|
||||
<address-auto-complete v-model="event.physicalAddress" />
|
||||
|
||||
<b-field :label="$t('Organizer')">
|
||||
<identity-picker-wrapper v-model="event.organizerActor" />
|
||||
</b-field>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('Description') }}</label>
|
||||
<label class="label">{{ $t("Description") }}</label>
|
||||
<editor v-model="event.description" />
|
||||
</div>
|
||||
|
||||
@@ -40,6 +36,34 @@
|
||||
<b-input icon="link" type="url" v-model="event.onlineAddress" placeholder="URL" />
|
||||
</b-field>
|
||||
|
||||
<subtitle>{{ $t("Organizers") }}</subtitle>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<b-field :label="$t('Organizer')">
|
||||
<identity-picker-wrapper
|
||||
v-model="event.organizerActor"
|
||||
:masked="event.options.hideOrganizerWhenGroupEvent"
|
||||
@input="resetAttributedToOnOrganizerChange"
|
||||
/>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column">
|
||||
<b-field :label="$t('Group')" v-if="event.organizerActor">
|
||||
<group-picker-wrapper v-model="event.attributedTo" :identity="event.organizerActor" />
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="field" v-if="event.attributedTo.id">-->
|
||||
<!-- <label class="label">{{ $t('Hide the organizer') }}</label>-->
|
||||
<!-- <b-switch v-model="event.options.hideOrganizerWhenGroupEvent">-->
|
||||
<!-- {{ $t("Don't show @{organizer} as event host alongside @{group}", {organizer: event.organizerActor.preferredUsername, group: event.attributedTo.preferredUsername}) }}-->
|
||||
<!-- <small>-->
|
||||
<!-- <br>-->
|
||||
<!-- {{ $t('All group members and other eventual server admins will still be able to view this information.') }}-->
|
||||
<!-- </small>-->
|
||||
<!-- </b-switch>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--<b-field :label="$t('Category')">
|
||||
<b-select placeholder="Select a category" v-model="event.category">
|
||||
<option
|
||||
@@ -50,61 +74,67 @@
|
||||
</b-select>
|
||||
</b-field>-->
|
||||
|
||||
<subtitle>
|
||||
{{ $t('Who can view this event and participate') }}
|
||||
</subtitle>
|
||||
<div class="field">
|
||||
<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="event.visibility"
|
||||
name="eventVisibility"
|
||||
:native-value="EventVisibility.UNLISTED">
|
||||
{{ $t('Only accessible through link and search (private)') }}
|
||||
</b-radio>
|
||||
</div>
|
||||
<subtitle>{{ $t("Who can view this event and participate") }}</subtitle>
|
||||
<div class="field">
|
||||
<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="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="event.visibility"
|
||||
name="eventVisibility"
|
||||
:native-value="EventVisibility.PRIVATE">
|
||||
{{ $t('Page limited to my group (asks for auth)') }}
|
||||
</b-radio>
|
||||
</div> -->
|
||||
</div>-->
|
||||
|
||||
<div class="field" v-if="config && config.anonymous.participation.allowed">
|
||||
<label class="label">{{ $t('Anonymous participations') }}</label>
|
||||
<label class="label">{{ $t("Anonymous participations") }}</label>
|
||||
<b-switch v-model="event.options.anonymousParticipation">
|
||||
{{ $t('I want to allow people to participate without an account.') }}
|
||||
{{ $t("I want to allow people to participate without an account.") }}
|
||||
<small v-if="config.anonymous.participation.validation.email.confirmationRequired">
|
||||
<br>
|
||||
{{ $t('Anonymous participants will be asked to confirm their participation through e-mail.') }}
|
||||
<br />
|
||||
{{
|
||||
$t(
|
||||
"Anonymous participants will be asked to confirm their participation through e-mail."
|
||||
)
|
||||
}}
|
||||
</small>
|
||||
</b-switch>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('Participation approval') }}</label>
|
||||
<b-switch v-model="needsApproval">
|
||||
{{ $t('I want to approve every participation request') }}
|
||||
</b-switch>
|
||||
<label class="label">{{ $t("Participation approval") }}</label>
|
||||
<b-switch v-model="needsApproval">{{
|
||||
$t("I want to approve every participation request")
|
||||
}}</b-switch>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('Number of places') }}</label>
|
||||
<b-switch v-model="limitedPlaces">
|
||||
{{ $t('Limited number of places') }}
|
||||
</b-switch>
|
||||
<label class="label">{{ $t("Number of places") }}</label>
|
||||
<b-switch v-model="limitedPlaces">{{ $t("Limited number of places") }}</b-switch>
|
||||
</div>
|
||||
|
||||
<div class="box" v-if="limitedPlaces">
|
||||
<b-field :label="$t('Number of places')">
|
||||
<b-numberinput controls-position="compact" min="1" v-model="event.options.maximumAttendeeCapacity" />
|
||||
<b-numberinput
|
||||
controls-position="compact"
|
||||
min="1"
|
||||
v-model="event.options.maximumAttendeeCapacity"
|
||||
/>
|
||||
</b-field>
|
||||
<!--
|
||||
<!--
|
||||
<b-field>
|
||||
<b-switch v-model="event.options.showRemainingAttendeeCapacity">
|
||||
{{ $t('Show remaining number of places') }}
|
||||
@@ -115,60 +145,64 @@
|
||||
<b-switch v-model="event.options.showParticipationPrice">
|
||||
{{ $t('Display participation price') }}
|
||||
</b-switch>
|
||||
</b-field> -->
|
||||
</b-field>-->
|
||||
</div>
|
||||
|
||||
<subtitle>
|
||||
{{ $t('Public comment moderation') }}
|
||||
</subtitle>
|
||||
<subtitle>{{ $t("Public comment moderation") }}</subtitle>
|
||||
|
||||
<div class="field">
|
||||
<b-radio v-model="event.options.commentModeration"
|
||||
name="commentModeration"
|
||||
:native-value="CommentModeration.ALLOW_ALL">
|
||||
{{ $t('Allow all comments') }}
|
||||
</b-radio>
|
||||
<b-radio
|
||||
v-model="event.options.commentModeration"
|
||||
name="commentModeration"
|
||||
:native-value="CommentModeration.ALLOW_ALL"
|
||||
>{{ $t("Allow all comments") }}</b-radio
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- <div class="field">-->
|
||||
<!-- <b-radio v-model="event.options.commentModeration"-->
|
||||
<!-- name="commentModeration"-->
|
||||
<!-- :native-value="CommentModeration.MODERATED">-->
|
||||
<!-- {{ $t('Moderated comments (shown after approval)') }}-->
|
||||
<!-- </b-radio>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="field">-->
|
||||
<!-- <b-radio v-model="event.options.commentModeration"-->
|
||||
<!-- name="commentModeration"-->
|
||||
<!-- :native-value="CommentModeration.MODERATED">-->
|
||||
<!-- {{ $t('Moderated comments (shown after approval)') }}-->
|
||||
<!-- </b-radio>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="field">
|
||||
<b-radio v-model="event.options.commentModeration"
|
||||
name="commentModeration"
|
||||
:native-value="CommentModeration.CLOSED">
|
||||
{{ $t('Close comments for all (except for admins)') }}
|
||||
</b-radio>
|
||||
<b-radio
|
||||
v-model="event.options.commentModeration"
|
||||
name="commentModeration"
|
||||
:native-value="CommentModeration.CLOSED"
|
||||
>{{ $t("Close comments for all (except for admins)") }}</b-radio
|
||||
>
|
||||
</div>
|
||||
|
||||
<subtitle>
|
||||
{{ $t('Status') }}
|
||||
</subtitle>
|
||||
<subtitle>{{ $t("Status") }}</subtitle>
|
||||
|
||||
<b-field>
|
||||
<b-radio-button v-model="event.status"
|
||||
name="status"
|
||||
type="is-warning"
|
||||
:native-value="EventStatus.TENTATIVE">
|
||||
<b-radio-button
|
||||
v-model="event.status"
|
||||
name="status"
|
||||
type="is-warning"
|
||||
:native-value="EventStatus.TENTATIVE"
|
||||
>
|
||||
<b-icon icon="calendar-question" />
|
||||
{{ $t('Tentative: Will be confirmed later') }}
|
||||
{{ $t("Tentative: Will be confirmed later") }}
|
||||
</b-radio-button>
|
||||
<b-radio-button v-model="event.status"
|
||||
name="status"
|
||||
type="is-success"
|
||||
:native-value="EventStatus.CONFIRMED">
|
||||
<b-radio-button
|
||||
v-model="event.status"
|
||||
name="status"
|
||||
type="is-success"
|
||||
:native-value="EventStatus.CONFIRMED"
|
||||
>
|
||||
<b-icon icon="calendar-check" />
|
||||
{{ $t('Confirmed: Will happen') }}
|
||||
{{ $t("Confirmed: Will happen") }}
|
||||
</b-radio-button>
|
||||
<b-radio-button v-model="event.status"
|
||||
name="status"
|
||||
type="is-danger"
|
||||
:native-value="EventStatus.CANCELLED">
|
||||
<b-radio-button
|
||||
v-model="event.status"
|
||||
name="status"
|
||||
type="is-danger"
|
||||
:native-value="EventStatus.CANCELLED"
|
||||
>
|
||||
<b-icon icon="calendar-remove" />
|
||||
{{ $t("Cancelled: Won't happen") }}
|
||||
</b-radio-button>
|
||||
@@ -176,54 +210,62 @@
|
||||
</form>
|
||||
</div>
|
||||
<b-modal :active.sync="dateSettingsIsOpen" has-modal-card trap-focus>
|
||||
<form action="">
|
||||
<div class="modal-card" style="width: auto">
|
||||
<form action>
|
||||
<div class="modal-card" style="width: auto;">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">{{ $t('Date and time settings') }}</p>
|
||||
<p class="modal-card-title">{{ $t("Date and time settings") }}</p>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<b-field :label="$t('Event page settings')">
|
||||
<b-switch v-model="event.options.showStartTime">
|
||||
{{ $t('Show the time when the event begins') }}
|
||||
</b-switch>
|
||||
<b-switch v-model="event.options.showStartTime">{{
|
||||
$t("Show the time when the event begins")
|
||||
}}</b-switch>
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-switch v-model="event.options.showEndTime">
|
||||
{{ $t('Show the time when the event ends') }}
|
||||
</b-switch>
|
||||
<b-switch v-model="event.options.showEndTime">{{
|
||||
$t("Show the time when the event ends")
|
||||
}}</b-switch>
|
||||
</b-field>
|
||||
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button" type="button" @click="dateSettingsIsOpen = false">{{ $t('OK') }}</button>
|
||||
<button class="button" type="button" @click="dateSettingsIsOpen = false">
|
||||
{{ $t("OK") }}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</form>
|
||||
</b-modal>
|
||||
<span ref="bottomObserver" />
|
||||
<nav role="navigation" aria-label="main navigation" class="navbar" :class="{'is-fixed-bottom': showFixedNavbar }">
|
||||
<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="isEventModified">{{ $t('Unsaved changes') }}</span>
|
||||
<span class="navbar-item" v-if="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>
|
||||
<b-button type="is-text" @click="confirmGoBack">{{ $t("Cancel") }}</b-button>
|
||||
</span>
|
||||
<!-- If an event has been published we can't make it draft anymore -->
|
||||
<span class="navbar-item" v-if="event.draft === true">
|
||||
<b-button type="is-primary" outlined @click="createOrUpdateDraft">
|
||||
{{ $t('Save draft') }}
|
||||
</b-button>
|
||||
<b-button type="is-primary" outlined @click="createOrUpdateDraft">{{
|
||||
$t("Save draft")
|
||||
}}</b-button>
|
||||
</span>
|
||||
<span class="navbar-item">
|
||||
<b-button type="is-primary" @click="createOrUpdatePublish" @keyup.enter="createOrUpdatePublish">
|
||||
<span v-if="isUpdate === false">{{ $t('Create my event') }}</span>
|
||||
<span v-else-if="event.draft === true"> {{ $t('Publish') }}</span>
|
||||
<span v-else> {{ $t('Update my event') }}</span>
|
||||
<b-button
|
||||
type="is-primary"
|
||||
@click="createOrUpdatePublish"
|
||||
@keyup.enter="createOrUpdatePublish"
|
||||
>
|
||||
<span v-if="isUpdate === false">{{ $t("Create my event") }}</span>
|
||||
<span v-else-if="event.draft === true">{{ $t("Publish") }}</span>
|
||||
<span v-else>{{ $t("Update my event") }}</span>
|
||||
</b-button>
|
||||
</span>
|
||||
</div>
|
||||
@@ -234,146 +276,191 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
@import "@/variables.scss";
|
||||
|
||||
main section > .container {
|
||||
background: $white;
|
||||
main section > .container {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
h2.subtitle {
|
||||
margin: 10px 0;
|
||||
|
||||
span {
|
||||
padding: 5px 7px;
|
||||
display: inline;
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
& > .container {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
h2.subtitle {
|
||||
margin: 10px 0;
|
||||
nav.navbar {
|
||||
min-height: 2rem !important;
|
||||
background: lighten($secondary, 10%);
|
||||
|
||||
span {
|
||||
padding: 5px 7px;
|
||||
display: inline;
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
min-height: 2rem;
|
||||
|
||||
section {
|
||||
& > .container {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
.navbar-menu,
|
||||
.navbar-end {
|
||||
display: flex !important;
|
||||
background: lighten($secondary, 10%);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
.navbar-end {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { CREATE_EVENT, EDIT_EVENT, EVENT_PERSON_PARTICIPATION, FETCH_EVENT } from '@/graphql/event';
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import PictureUpload from "@/components/PictureUpload.vue";
|
||||
import EditorComponent from "@/components/Editor.vue";
|
||||
import DateTimePicker from "@/components/Event/DateTimePicker.vue";
|
||||
import TagInput from "@/components/Event/TagInput.vue";
|
||||
import AddressAutoComplete from "@/components/Event/AddressAutoComplete.vue";
|
||||
import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
|
||||
import Subtitle from "@/components/Utils/Subtitle.vue";
|
||||
import GroupPickerWrapper from "@/components/Group/GroupPickerWrapper.vue";
|
||||
import { Route } from "vue-router";
|
||||
import {
|
||||
CommentModeration,
|
||||
EventJoinOptions,
|
||||
EventModel,
|
||||
EventStatus,
|
||||
EventVisibility,
|
||||
IEvent, ParticipantRole,
|
||||
} from '@/types/event.model';
|
||||
import { CURRENT_ACTOR_CLIENT, LOGGED_USER_DRAFTS, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
|
||||
import { IPerson, Person } from '@/types/actor';
|
||||
import PictureUpload from '@/components/PictureUpload.vue';
|
||||
import EditorComponent from '@/components/Editor.vue';
|
||||
import DateTimePicker from '@/components/Event/DateTimePicker.vue';
|
||||
import TagInput from '@/components/Event/TagInput.vue';
|
||||
import { TAGS } from '@/graphql/tags';
|
||||
import { ITag } from '@/types/tag.model';
|
||||
import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
|
||||
import { buildFileFromIPicture, buildFileVariable, readFileAsync } from '@/utils/image';
|
||||
import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
|
||||
import { RouteName } from '@/router';
|
||||
import 'intersection-observer';
|
||||
import { CONFIG } from '@/graphql/config';
|
||||
import { IConfig } from '@/types/config.model';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
CREATE_EVENT,
|
||||
EDIT_EVENT,
|
||||
EVENT_PERSON_PARTICIPATION,
|
||||
FETCH_EVENT,
|
||||
} from "../../graphql/event";
|
||||
import {
|
||||
CommentModeration,
|
||||
EventJoinOptions,
|
||||
EventModel,
|
||||
EventStatus,
|
||||
EventVisibility,
|
||||
IEvent,
|
||||
ParticipantRole,
|
||||
} from "../../types/event.model";
|
||||
import {
|
||||
CURRENT_ACTOR_CLIENT,
|
||||
LOGGED_USER_DRAFTS,
|
||||
LOGGED_USER_PARTICIPATIONS,
|
||||
} from "../../graphql/actor";
|
||||
import { Group, IPerson, Person } from "../../types/actor";
|
||||
import { TAGS } from "../../graphql/tags";
|
||||
import { ITag } from "../../types/tag.model";
|
||||
import { buildFileFromIPicture, buildFileVariable, readFileAsync } from "../../utils/image";
|
||||
import RouteName from "../../router/name";
|
||||
import "intersection-observer";
|
||||
import { CONFIG } from "../../graphql/config";
|
||||
import { IConfig } from "../../types/config.model";
|
||||
|
||||
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
|
||||
|
||||
@Component({
|
||||
components: { Subtitle, IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent },
|
||||
components: {
|
||||
GroupPickerWrapper,
|
||||
Subtitle,
|
||||
IdentityPickerWrapper,
|
||||
AddressAutoComplete,
|
||||
TagInput,
|
||||
DateTimePicker,
|
||||
PictureUpload,
|
||||
Editor: EditorComponent,
|
||||
},
|
||||
apollo: {
|
||||
currentActor: CURRENT_ACTOR_CLIENT,
|
||||
tags: TAGS,
|
||||
config: CONFIG,
|
||||
event: {
|
||||
query: FETCH_EVENT,
|
||||
variables() {
|
||||
return {
|
||||
uuid: this.eventId,
|
||||
};
|
||||
},
|
||||
update(data) {
|
||||
return new EventModel(data.event);
|
||||
},
|
||||
skip() {
|
||||
return !this.eventId;
|
||||
},
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
// if no subcomponents specify a metaInfo.title, this title will be used
|
||||
title: (this.$props.isUpdate ? this.$t('Event edition') : this.$t('Event creation')) as string,
|
||||
// @ts-ignore
|
||||
title: (this.isUpdate ? this.$t("Event edition") : this.$t("Event creation")) as string,
|
||||
// all titles will be injected into this template
|
||||
titleTemplate: '%s | Mobilizon',
|
||||
titleTemplate: "%s | Mobilizon",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class EditEvent extends Vue {
|
||||
@Prop({ type: Boolean, default: false }) isUpdate!: boolean;
|
||||
@Prop({ required: false, type: String }) uuid!: string;
|
||||
|
||||
eventId!: string | undefined;
|
||||
@Prop({ required: false, type: String }) eventId: undefined | string;
|
||||
|
||||
currentActor = new Person();
|
||||
|
||||
tags: ITag[] = [];
|
||||
|
||||
event: IEvent = new EventModel();
|
||||
|
||||
config!: IConfig;
|
||||
|
||||
unmodifiedEvent!: IEvent;
|
||||
|
||||
pictureFile: File | null = null;
|
||||
|
||||
EventStatus = EventStatus;
|
||||
|
||||
EventVisibility = EventVisibility;
|
||||
needsApproval: boolean = false;
|
||||
canPromote: boolean = true;
|
||||
limitedPlaces: boolean = false;
|
||||
|
||||
needsApproval = false;
|
||||
|
||||
canPromote = true;
|
||||
|
||||
limitedPlaces = false;
|
||||
|
||||
CommentModeration = CommentModeration;
|
||||
showFixedNavbar: boolean = true;
|
||||
|
||||
showFixedNavbar = true;
|
||||
|
||||
observer!: IntersectionObserver;
|
||||
dateSettingsIsOpen: boolean = false;
|
||||
endsOnNull: boolean = false;
|
||||
|
||||
// categories: string[] = Object.keys(Category);
|
||||
dateSettingsIsOpen = false;
|
||||
|
||||
@Watch('$route.params.eventId', { immediate: true })
|
||||
async onEventIdParamChanged (val: string) {
|
||||
if (!this.isUpdate) return;
|
||||
|
||||
this.eventId = val;
|
||||
|
||||
if (this.eventId) {
|
||||
this.event = await this.getEvent();
|
||||
this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
|
||||
|
||||
this.pictureFile = await buildFileFromIPicture(this.event.picture);
|
||||
this.limitedPlaces = this.event.options.maximumAttendeeCapacity > 0;
|
||||
}
|
||||
}
|
||||
endsOnNull = false;
|
||||
|
||||
created() {
|
||||
this.initializeEvent();
|
||||
this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
|
||||
}
|
||||
|
||||
private initializeEvent() {
|
||||
const roundUpTo = roundTo => x => new Date(Math.ceil(x / roundTo) * roundTo);
|
||||
const roundUpTo15Minutes = roundUpTo(1000 * 60 * 15);
|
||||
get isUpdate(): boolean {
|
||||
return this.eventId !== undefined;
|
||||
}
|
||||
|
||||
const now = roundUpTo15Minutes(new Date());
|
||||
const end = roundUpTo15Minutes(new Date());
|
||||
@Watch("eventId", { immediate: true })
|
||||
resetFormForCreation(eventId: string) {
|
||||
if (eventId === undefined) {
|
||||
this.event = new EventModel();
|
||||
}
|
||||
}
|
||||
|
||||
private initializeEvent() {
|
||||
// TODO : Check me
|
||||
// const roundUpTo = (roundTo) => (x: number) => new Date(Math.ceil(x / roundTo) * roundTo);
|
||||
// const roundUpTo15Minutes = roundUpTo(1000 * 60 * 15);
|
||||
|
||||
// const now = roundUpTo15Minutes(new Date());
|
||||
// const end = roundUpTo15Minutes(new Date());
|
||||
const now = new Date();
|
||||
const end = new Date();
|
||||
end.setUTCHours(now.getUTCHours() + 3);
|
||||
|
||||
this.event.beginsOn = now;
|
||||
@@ -381,17 +468,24 @@ export default class EditEvent extends Vue {
|
||||
this.event.organizerActor = this.event.organizerActor || this.currentActor;
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry) {
|
||||
this.showFixedNavbar = !entry.isIntersecting;
|
||||
async mounted() {
|
||||
this.observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry) {
|
||||
this.showFixedNavbar = !entry.isIntersecting;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
rootMargin: "-50px 0px -50px",
|
||||
}
|
||||
}, {
|
||||
rootMargin: '-50px 0px -50px',
|
||||
});
|
||||
);
|
||||
this.observer.observe(this.$refs.bottomObserver as Element);
|
||||
this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
|
||||
|
||||
this.pictureFile = await buildFileFromIPicture(this.event.picture);
|
||||
this.limitedPlaces = this.event.options.maximumAttendeeCapacity > 0;
|
||||
}
|
||||
|
||||
createOrUpdateDraft(e: Event) {
|
||||
@@ -410,11 +504,22 @@ export default class EditEvent extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('currentActor')
|
||||
@Watch("currentActor")
|
||||
setCurrentActor() {
|
||||
this.event.organizerActor = this.currentActor;
|
||||
}
|
||||
|
||||
resetAttributedToOnOrganizerChange() {
|
||||
this.event.attributedTo = new Group();
|
||||
}
|
||||
|
||||
// @Watch('event.attributedTo', { deep: true })
|
||||
// updateHideOrganizerWhenGroupEventOption(attributedTo) {
|
||||
// if (!attributedTo.preferredUsername) {
|
||||
// this.event.options.hideOrganizerWhenGroupEvent = false;
|
||||
// }
|
||||
// }
|
||||
|
||||
private validateForm() {
|
||||
const form = this.$refs.form as HTMLFormElement;
|
||||
if (form.checkValidity()) {
|
||||
@@ -436,15 +541,15 @@ export default class EditEvent extends Vue {
|
||||
});
|
||||
|
||||
this.$buefy.notification.open({
|
||||
message: (this.event.draft ?
|
||||
this.$i18n.t('The event has been created as a draft') :
|
||||
this.$i18n.t('The event has been published')) as string,
|
||||
type: 'is-success',
|
||||
position: 'is-bottom-right',
|
||||
message: (this.event.draft
|
||||
? this.$i18n.t("The event has been created as a draft")
|
||||
: this.$i18n.t("The event has been published")) as string,
|
||||
type: "is-success",
|
||||
position: "is-bottom-right",
|
||||
duration: 5000,
|
||||
});
|
||||
await this.$router.push({
|
||||
name: 'Event',
|
||||
name: "Event",
|
||||
params: { uuid: data.createEvent.uuid },
|
||||
});
|
||||
} catch (err) {
|
||||
@@ -465,12 +570,12 @@ export default class EditEvent extends Vue {
|
||||
|
||||
this.$buefy.notification.open({
|
||||
message: this.updateEventMessage,
|
||||
type: 'is-success',
|
||||
position: 'is-bottom-right',
|
||||
type: "is-success",
|
||||
position: "is-bottom-right",
|
||||
duration: 5000,
|
||||
});
|
||||
await this.$router.push({
|
||||
name: 'Event',
|
||||
name: "Event",
|
||||
params: { uuid: this.eventId as string },
|
||||
});
|
||||
} catch (err) {
|
||||
@@ -479,63 +584,79 @@ export default class EditEvent extends Vue {
|
||||
}
|
||||
|
||||
get updateEventMessage(): string {
|
||||
if (this.unmodifiedEvent.draft && !this.event.draft) return this.$i18n.t('The event has been updated and published') as string;
|
||||
return (this.event.draft ? this.$i18n.t('The draft event has been updated') : this.$i18n.t('The event has been updated')) as string;
|
||||
if (this.unmodifiedEvent.draft && !this.event.draft)
|
||||
return this.$i18n.t("The event has been updated and published") as string;
|
||||
return (this.event.draft
|
||||
? this.$i18n.t("The draft event has been updated")
|
||||
: this.$i18n.t("The event has been updated")) as string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Put in cache the updated or created event.
|
||||
* If the event is not a draft anymore, also put in cache the participation
|
||||
*/
|
||||
private postCreateOrUpdate(store, updateEvent) {
|
||||
const resultEvent: IEvent = Object.assign({}, updateEvent);
|
||||
private postCreateOrUpdate(store: any, updateEvent: IEvent) {
|
||||
const resultEvent: IEvent = { ...updateEvent };
|
||||
const organizerActor: IPerson = this.event.organizerActor as Person;
|
||||
resultEvent.organizerActor = organizerActor;
|
||||
resultEvent.relatedEvents = [];
|
||||
|
||||
store.writeQuery({ query: FETCH_EVENT, variables: { uuid: updateEvent.uuid }, data: { event: resultEvent } });
|
||||
store.writeQuery({
|
||||
query: FETCH_EVENT,
|
||||
variables: { uuid: updateEvent.uuid },
|
||||
data: { event: resultEvent },
|
||||
});
|
||||
if (!updateEvent.draft) {
|
||||
store.writeQuery({
|
||||
query: EVENT_PERSON_PARTICIPATION,
|
||||
variables: { eventId: updateEvent.id, name: organizerActor.preferredUsername },
|
||||
variables: {
|
||||
eventId: updateEvent.id,
|
||||
name: organizerActor.preferredUsername,
|
||||
},
|
||||
data: {
|
||||
person: {
|
||||
__typename: 'Person',
|
||||
__typename: "Person",
|
||||
id: organizerActor.id,
|
||||
participations: [{
|
||||
__typename: 'Participant',
|
||||
id: 'unknown',
|
||||
role: ParticipantRole.CREATOR,
|
||||
actor: {
|
||||
__typename: 'Actor',
|
||||
id: organizerActor.id,
|
||||
participations: [
|
||||
{
|
||||
__typename: "Participant",
|
||||
id: "unknown",
|
||||
role: ParticipantRole.CREATOR,
|
||||
actor: {
|
||||
__typename: "Actor",
|
||||
id: organizerActor.id,
|
||||
},
|
||||
event: {
|
||||
__typename: "Event",
|
||||
id: updateEvent.id,
|
||||
},
|
||||
},
|
||||
event: {
|
||||
__typename: 'Event',
|
||||
id: updateEvent.id,
|
||||
},
|
||||
}],
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh drafts or participation cache depending if the event is still draft or not
|
||||
*/
|
||||
private postRefetchQueries(updateEvent) {
|
||||
/**
|
||||
* Refresh drafts or participation cache depending if the event is still draft or not
|
||||
*/
|
||||
private postRefetchQueries(updateEvent: IEvent) {
|
||||
if (updateEvent.draft) {
|
||||
return [{
|
||||
query: LOGGED_USER_DRAFTS,
|
||||
}];
|
||||
return [
|
||||
{
|
||||
query: LOGGED_USER_DRAFTS,
|
||||
},
|
||||
];
|
||||
}
|
||||
return [{
|
||||
query: LOGGED_USER_PARTICIPATIONS,
|
||||
variables: {
|
||||
afterDateTime: new Date(),
|
||||
return [
|
||||
{
|
||||
query: LOGGED_USER_PARTICIPATIONS,
|
||||
variables: {
|
||||
afterDateTime: new Date(),
|
||||
},
|
||||
},
|
||||
}];
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -544,25 +665,34 @@ export default class EditEvent extends Vue {
|
||||
private async buildVariables() {
|
||||
let res = this.event.toEditJSON();
|
||||
if (this.event.organizerActor) {
|
||||
res = Object.assign(res, { organizerActorId: this.event.organizerActor.id });
|
||||
res = Object.assign(res, {
|
||||
organizerActorId: this.event.organizerActor.id,
|
||||
});
|
||||
}
|
||||
if (this.event.attributedTo) {
|
||||
res = Object.assign(res, { attributedToId: this.event.attributedTo.id });
|
||||
}
|
||||
|
||||
delete this.event.options['__typename'];
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
delete this.event.options.__typename;
|
||||
|
||||
if (this.event.physicalAddress) {
|
||||
delete this.event.physicalAddress['__typename'];
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
delete this.event.physicalAddress.__typename;
|
||||
}
|
||||
|
||||
if (this.endsOnNull) {
|
||||
res.endsOn = null;
|
||||
}
|
||||
|
||||
const pictureObj = buildFileVariable(this.pictureFile, 'picture');
|
||||
res = Object.assign({}, res, pictureObj);
|
||||
const pictureObj = buildFileVariable(this.pictureFile, "picture");
|
||||
res = { ...res, ...pictureObj };
|
||||
|
||||
try {
|
||||
if (this.event.picture) {
|
||||
const oldPictureFile = await buildFileFromIPicture(this.event.picture) as File;
|
||||
const oldPictureFile = (await buildFileFromIPicture(this.event.picture)) as File;
|
||||
const oldPictureFileContent = await readFileAsync(oldPictureFile);
|
||||
const newPictureFileContent = await readFileAsync(this.pictureFile as File);
|
||||
if (oldPictureFileContent === newPictureFileContent) {
|
||||
@@ -589,19 +719,20 @@ export default class EditEvent extends Vue {
|
||||
return new EventModel(result.data.event);
|
||||
}
|
||||
|
||||
@Watch('limitedPlaces')
|
||||
@Watch("limitedPlaces")
|
||||
updatedEventCapacityOptions(limitedPlaces: boolean) {
|
||||
if (!limitedPlaces) {
|
||||
this.event.options.maximumAttendeeCapacity = 0;
|
||||
this.event.options.remainingAttendeeCapacity = 0;
|
||||
this.event.options.showRemainingAttendeeCapacity = false;
|
||||
} else {
|
||||
this.event.options.maximumAttendeeCapacity = this.event.options.maximumAttendeeCapacity || DEFAULT_LIMIT_NUMBER_OF_PLACES;
|
||||
this.event.options.maximumAttendeeCapacity =
|
||||
this.event.options.maximumAttendeeCapacity || DEFAULT_LIMIT_NUMBER_OF_PLACES;
|
||||
}
|
||||
}
|
||||
|
||||
@Watch('needsApproval')
|
||||
updateEventJoinOptions(needsApproval) {
|
||||
@Watch("needsApproval")
|
||||
updateEventJoinOptions(needsApproval: boolean) {
|
||||
if (needsApproval === true) {
|
||||
this.event.joinOptions = EventJoinOptions.RESTRICTED;
|
||||
} else {
|
||||
@@ -610,31 +741,37 @@ export default class EditEvent extends Vue {
|
||||
}
|
||||
|
||||
get checkTitleLength() {
|
||||
return this.event.title.length > 80 ? ['is-info', this.$t('The event title will be ellipsed.')] : [undefined, undefined];
|
||||
return this.event.title.length > 80
|
||||
? ["is-info", this.$t("The event title will be ellipsed.")]
|
||||
: [undefined, undefined];
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirm cancel
|
||||
*/
|
||||
confirmGoElsewhere(callback) {
|
||||
confirmGoElsewhere(callback: (value?: string) => any) {
|
||||
if (!this.isEventModified) {
|
||||
return callback();
|
||||
}
|
||||
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;
|
||||
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('Abandon edition') as string,
|
||||
cancelText: this.$t('Continue editing') as string,
|
||||
type: 'is-warning',
|
||||
confirmText: this.$t("Abandon edition") as string,
|
||||
cancelText: this.$t("Continue editing") as string,
|
||||
type: "is-warning",
|
||||
hasIcon: true,
|
||||
onConfirm: callback,
|
||||
});
|
||||
@@ -647,7 +784,7 @@ export default class EditEvent extends Vue {
|
||||
this.confirmGoElsewhere(() => this.$router.go(-1));
|
||||
}
|
||||
|
||||
beforeRouteLeave(to, from, next) {
|
||||
beforeRouteLeave(to: Route, from: Route, next: Function) {
|
||||
if (to.name === RouteName.EVENT) return next();
|
||||
this.confirmGoElsewhere(() => next());
|
||||
}
|
||||
@@ -656,10 +793,12 @@ export default class EditEvent extends Vue {
|
||||
return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent);
|
||||
}
|
||||
|
||||
get beginsOn(): Date { return this.event.beginsOn; }
|
||||
get beginsOn(): Date {
|
||||
return this.event.beginsOn;
|
||||
}
|
||||
|
||||
@Watch('beginsOn', { deep: true })
|
||||
onBeginsOnChanged(beginsOn) {
|
||||
@Watch("beginsOn", { deep: true })
|
||||
onBeginsOnChanged(beginsOn: string) {
|
||||
if (!this.event.endsOn) return;
|
||||
const dateBeginsOn = new Date(beginsOn);
|
||||
const dateEndsOn = new Date(this.event.endsOn);
|
||||
@@ -682,4 +821,3 @@ export default class EditEvent extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<section class="container">
|
||||
<h1>
|
||||
{{ $t('Event list') }}
|
||||
</h1>
|
||||
<h1>{{ $t("Event list") }}</h1>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<div v-if="events.length > 0" class="columns is-multiline">
|
||||
<EventCard
|
||||
@@ -12,18 +10,19 @@
|
||||
class="column is-one-quarter-desktop is-half-mobile"
|
||||
/>
|
||||
</div>
|
||||
<b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">
|
||||
{{ $t('No events found') }}
|
||||
</b-message>
|
||||
<b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">{{
|
||||
$t("No events found")
|
||||
}}</b-message>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import EventCard from '@/components/Event/EventCard.vue';
|
||||
import { RouteName } from '@/router';
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import EventCard from "../../components/Event/EventCard.vue";
|
||||
import RouteName from "../../router/name";
|
||||
import { IEvent } from "../../types/event.model";
|
||||
|
||||
const ngeohash = require('ngeohash');
|
||||
const ngeohash = require("ngeohash");
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -34,78 +33,80 @@ export default class EventList extends Vue {
|
||||
@Prop(String) location!: string;
|
||||
|
||||
events = [];
|
||||
|
||||
loading = true;
|
||||
|
||||
locationChip = false;
|
||||
locationText = '';
|
||||
|
||||
created() {
|
||||
this.fetchData(this.$router.currentRoute.params['location']);
|
||||
}
|
||||
locationText = "";
|
||||
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
this.fetchData(to.params.location);
|
||||
next();
|
||||
}
|
||||
// created() {
|
||||
// this.fetchData(this.$router.currentRoute.params.location);
|
||||
// }
|
||||
|
||||
@Watch('locationChip')
|
||||
onLocationChipChange(val) {
|
||||
if (val === false) {
|
||||
this.$router.push({ name: RouteName.EVENT_LIST });
|
||||
}
|
||||
}
|
||||
// beforeRouteUpdate(to, from, next) {
|
||||
// this.fetchData(to.params.location);
|
||||
// next();
|
||||
// }
|
||||
|
||||
geocode(lat, lon) {
|
||||
console.log({ lat, lon });
|
||||
console.log(ngeohash.encode(lat, lon, 10));
|
||||
return ngeohash.encode(lat, lon, 10);
|
||||
}
|
||||
// @Watch('locationChip')
|
||||
// onLocationChipChange(val) {
|
||||
// if (val === false) {
|
||||
// this.$router.push({ name: RouteName.EVENT_LIST });
|
||||
// }
|
||||
// }
|
||||
|
||||
fetchData(location) {
|
||||
let queryString = '/events';
|
||||
if (location) {
|
||||
queryString += `?geohash=${location}`;
|
||||
const { latitude, longitude } = ngeohash.decode(location);
|
||||
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
|
||||
}
|
||||
this.locationChip = true;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(queryString, this.$store)
|
||||
// .then(response => response.json())
|
||||
// .then((response) => {
|
||||
// this.loading = false;
|
||||
// this.events = response.data;
|
||||
// console.log(this.events);
|
||||
// });
|
||||
}
|
||||
// geocode(lat, lon) {
|
||||
// console.log({ lat, lon });
|
||||
// console.log(ngeohash.encode(lat, lon, 10));
|
||||
// return ngeohash.encode(lat, lon, 10);
|
||||
// }
|
||||
|
||||
deleteEvent(event) {
|
||||
const router = this.$router;
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// .then(() => router.push('/events'));
|
||||
}
|
||||
// fetchData(location: string) {
|
||||
// let queryString = '/events';
|
||||
// if (location) {
|
||||
// queryString += `?geohash=${location}`;
|
||||
// const { latitude, longitude } = ngeohash.decode(location);
|
||||
// this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
|
||||
// }
|
||||
// this.locationChip = true;
|
||||
// // FIXME: remove eventFetch
|
||||
// // eventFetch(queryString, this.$store)
|
||||
// // .then(response => response.json())
|
||||
// // .then((response) => {
|
||||
// // this.loading = false;
|
||||
// // this.events = response.data;
|
||||
// // console.log(this.events);
|
||||
// // });
|
||||
// }
|
||||
|
||||
viewEvent(event) {
|
||||
// deleteEvent(event: IEvent) {
|
||||
// const router = this.$router;
|
||||
// // FIXME: remove eventFetch
|
||||
// // eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
|
||||
// // .then(() => router.push('/events'));
|
||||
// }
|
||||
|
||||
viewEvent(event: IEvent) {
|
||||
this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
|
||||
}
|
||||
|
||||
downloadIcsEvent(event) {
|
||||
// FIXME: remove eventFetch
|
||||
// eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// .then(response => response.text())
|
||||
// .then((response) => {
|
||||
// const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||
// const link = document.createElement('a');
|
||||
// link.href = window.URL.createObjectURL(blob);
|
||||
// link.download = `${event.title}.ics`;
|
||||
// document.body.appendChild(link);
|
||||
// link.click();
|
||||
// document.body.removeChild(link);
|
||||
// });
|
||||
}
|
||||
// downloadIcsEvent(event: IEvent) {
|
||||
// // FIXME: remove eventFetch
|
||||
// // eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
|
||||
// // .then(response => response.text())
|
||||
// // .then((response) => {
|
||||
// // const blob = new Blob([ response ], { type: 'text/calendar' });
|
||||
// // const link = document.createElement('a');
|
||||
// // link.href = window.URL.createObjectURL(blob);
|
||||
// // link.download = `${event.title}.ics`;
|
||||
// // document.body.appendChild(link);
|
||||
// // link.click();
|
||||
// // document.body.removeChild(link);
|
||||
// // });
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
<template>
|
||||
<div class="section container">
|
||||
<h1 class="title">{{ $t('Explore') }}</h1>
|
||||
<h1 class="title">{{ $t("Explore") }}</h1>
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<form @submit.prevent="submit()">
|
||||
<b-field :label="$t('Event')" grouped group-multiline label-position="on-border">
|
||||
<b-input icon="magnify" type="search" size="is-large" expanded v-model="searchTerm" :placeholder="$t('For instance: London, Taekwondo, Architecture…')" />
|
||||
<b-field
|
||||
:label="$t('Event')"
|
||||
grouped
|
||||
group-multiline
|
||||
label-position="on-border"
|
||||
label-for="search"
|
||||
>
|
||||
<b-input
|
||||
icon="magnify"
|
||||
type="search"
|
||||
id="search"
|
||||
size="is-large"
|
||||
expanded
|
||||
v-model="searchTerm"
|
||||
:placeholder="$t('For instance: London, Taekwondo, Architecture…')"
|
||||
/>
|
||||
<p class="control">
|
||||
<b-button @click="submit" type="is-info" size="is-large" v-bind:disabled="searchTerm.trim().length === 0">{{ $t('Search') }}</b-button>
|
||||
<b-button
|
||||
@click="submit"
|
||||
type="is-info"
|
||||
size="is-large"
|
||||
v-bind:disabled="searchTerm.trim().length === 0"
|
||||
>{{ $t("Search") }}</b-button
|
||||
>
|
||||
</p>
|
||||
</b-field>
|
||||
</form>
|
||||
@@ -15,27 +35,25 @@
|
||||
</section>
|
||||
<section class="events-featured">
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<h3 class="title">{{ $t('Featured events') }}</h3>
|
||||
<h2 class="title">{{ $t("Featured events") }}</h2>
|
||||
<div v-if="events.length > 0" class="columns is-multiline">
|
||||
<div class="column is-one-third-desktop" v-for="event in events" :key="event.uuid">
|
||||
<EventCard
|
||||
:event="event"
|
||||
/>
|
||||
<EventCard :event="event" />
|
||||
</div>
|
||||
</div>
|
||||
<b-message v-else-if="events.length === 0 && $apollo.loading === false" type="is-danger">
|
||||
{{ $t('No events found') }}
|
||||
</b-message>
|
||||
<b-message v-else-if="events.length === 0 && $apollo.loading === false" type="is-danger">{{
|
||||
$t("No events found")
|
||||
}}</b-message>
|
||||
</section>
|
||||
</div>
|
||||
</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';
|
||||
import { RouteName } from '@/router';
|
||||
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";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -49,46 +67,50 @@ import { RouteName } from '@/router';
|
||||
metaInfo() {
|
||||
return {
|
||||
// if no subcomponents specify a metaInfo.title, this title will be used
|
||||
title: this.$t('Explore') as string,
|
||||
title: this.$t("Explore") as string,
|
||||
// all titles will be injected into this template
|
||||
titleTemplate: '%s | Mobilizon',
|
||||
titleTemplate: "%s | Mobilizon",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class Explore extends Vue {
|
||||
events: IEvent[] = [];
|
||||
searchTerm: string = '';
|
||||
|
||||
searchTerm = "";
|
||||
|
||||
submit() {
|
||||
this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchTerm } });
|
||||
this.$router.push({
|
||||
name: RouteName.SEARCH,
|
||||
params: { searchTerm: this.searchTerm },
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/variables.scss";
|
||||
@import "@/variables.scss";
|
||||
|
||||
main > .container {
|
||||
background: $white;
|
||||
main > .container {
|
||||
background: $white;
|
||||
|
||||
.hero-body {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
.hero-body {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1.title {
|
||||
margin-top: 1.5rem;
|
||||
h1.title {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
h3.title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.events-featured {
|
||||
margin: 25px auto;
|
||||
|
||||
.columns {
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
|
||||
h3.title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.events-featured {
|
||||
margin: 25px auto;
|
||||
|
||||
.columns {
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,80 +1,104 @@
|
||||
<template>
|
||||
<section class="section container">
|
||||
<h1 class="title">
|
||||
{{ $t('My events') }}
|
||||
</h1>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<section v-if="futureParticipations.length > 0">
|
||||
<subtitle>
|
||||
{{ $t('Upcoming') }}
|
||||
</subtitle>
|
||||
<transition-group name="list" tag="p">
|
||||
<div v-for="month in monthlyFutureParticipations" :key="month[0]">
|
||||
<h3 class="upcoming-month">{{ month[0] }}</h3>
|
||||
<EventListCard
|
||||
v-for="participation in month[1]"
|
||||
:key="participation.id"
|
||||
:participation="participation"
|
||||
:options="{ hideDate: false }"
|
||||
@eventDeleted="eventDeleted"
|
||||
class="participation"
|
||||
/>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="columns is-centered">
|
||||
<b-button class="column is-narrow"
|
||||
v-if="hasMoreFutureParticipations && (futureParticipations.length === limit)" @click="loadMoreFutureParticipations" size="is-large" type="is-primary">{{ $t('Load more') }}</b-button>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="drafts.length > 0">
|
||||
<subtitle>
|
||||
{{ $t('Drafts') }}
|
||||
</subtitle>
|
||||
<div class="columns is-multiline">
|
||||
<EventCard
|
||||
v-for="draft in drafts"
|
||||
:key="draft.uuid"
|
||||
:event="draft"
|
||||
class="is-one-quarter-desktop column"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="pastParticipations.length > 0">
|
||||
<subtitle>
|
||||
{{ $t('Past events') }}
|
||||
</subtitle>
|
||||
<transition-group name="list" tag="p">
|
||||
<div v-for="month in monthlyPastParticipations" :key="month[0]">
|
||||
<h3>{{ month[0] }}</h3>
|
||||
<EventListCard
|
||||
v-for="participation in month[1]"
|
||||
:key="participation.id"
|
||||
:participation="participation"
|
||||
:options="{ hideDate: false }"
|
||||
@eventDeleted="eventDeleted"
|
||||
class="participation"
|
||||
/>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="columns is-centered">
|
||||
<b-button class="column is-narrow"
|
||||
v-if="hasMorePastParticipations && (pastParticipations.length === limit)" @click="loadMorePastParticipations" size="is-large" type="is-primary">{{ $t('Load more') }}</b-button>
|
||||
</div>
|
||||
</section>
|
||||
<b-message v-if="futureParticipations.length === 0 && pastParticipations.length === 0 && $apollo.loading === false" type="is-danger">
|
||||
{{ $t('No events found') }}
|
||||
</b-message>
|
||||
<section class="section container">
|
||||
<h1 class="title">
|
||||
{{ $t("My events") }}
|
||||
</h1>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<section v-if="futureParticipations.length > 0">
|
||||
<subtitle>
|
||||
{{ $t("Upcoming") }}
|
||||
</subtitle>
|
||||
<transition-group name="list" tag="p">
|
||||
<div v-for="month in monthlyFutureParticipations" :key="month[0]">
|
||||
<span class="upcoming-month">{{ month[0] }}</span>
|
||||
<EventListCard
|
||||
v-for="participation in month[1]"
|
||||
:key="participation.id"
|
||||
:participation="participation"
|
||||
:options="{ hideDate: false }"
|
||||
@eventDeleted="eventDeleted"
|
||||
class="participation"
|
||||
/>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="columns is-centered">
|
||||
<b-button
|
||||
class="column is-narrow"
|
||||
v-if="hasMoreFutureParticipations && futureParticipations.length === limit"
|
||||
@click="loadMoreFutureParticipations"
|
||||
size="is-large"
|
||||
type="is-primary"
|
||||
>{{ $t("Load more") }}</b-button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="drafts.length > 0">
|
||||
<subtitle>
|
||||
{{ $t("Drafts") }}
|
||||
</subtitle>
|
||||
<div class="columns is-multiline">
|
||||
<EventCard
|
||||
v-for="draft in drafts"
|
||||
:key="draft.uuid"
|
||||
:event="draft"
|
||||
class="is-one-quarter-desktop column"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="pastParticipations.length > 0">
|
||||
<subtitle>
|
||||
{{ $t("Past events") }}
|
||||
</subtitle>
|
||||
<transition-group name="list" tag="p">
|
||||
<div v-for="month in monthlyPastParticipations" :key="month[0]">
|
||||
<span>{{ month[0] }}</span>
|
||||
<EventListCard
|
||||
v-for="participation in month[1]"
|
||||
:key="participation.id"
|
||||
:participation="participation"
|
||||
:options="{ hideDate: false }"
|
||||
@eventDeleted="eventDeleted"
|
||||
class="participation"
|
||||
/>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="columns is-centered">
|
||||
<b-button
|
||||
class="column is-narrow"
|
||||
v-if="hasMorePastParticipations && pastParticipations.length === limit"
|
||||
@click="loadMorePastParticipations"
|
||||
size="is-large"
|
||||
type="is-primary"
|
||||
>{{ $t("Load more") }}</b-button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<b-message
|
||||
v-if="
|
||||
futureParticipations.length === 0 &&
|
||||
pastParticipations.length === 0 &&
|
||||
$apollo.loading === false
|
||||
"
|
||||
type="is-danger"
|
||||
>
|
||||
{{ $t("No events found") }}
|
||||
</b-message>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import { LOGGED_USER_PARTICIPATIONS, LOGGED_USER_DRAFTS } from '@/graphql/actor';
|
||||
import { EventModel, IEvent, IParticipant, Participant, ParticipantRole } from '@/types/event.model';
|
||||
import EventListCard from '@/components/Event/EventListCard.vue';
|
||||
import EventCard from '@/components/Event/EventCard.vue';
|
||||
import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { LOGGED_USER_PARTICIPATIONS, LOGGED_USER_DRAFTS } from "../../graphql/actor";
|
||||
import {
|
||||
EventModel,
|
||||
IEvent,
|
||||
IParticipant,
|
||||
Participant,
|
||||
ParticipantRole,
|
||||
} from "../../types/event.model";
|
||||
import EventListCard from "../../components/Event/EventListCard.vue";
|
||||
import EventCard from "../../components/Event/EventCard.vue";
|
||||
import Subtitle from "../../components/Utils/Subtitle.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -85,76 +109,91 @@ import Subtitle from '@/components/Utils/Subtitle.vue';
|
||||
apollo: {
|
||||
futureParticipations: {
|
||||
query: LOGGED_USER_PARTICIPATIONS,
|
||||
fetchPolicy: 'network-only',
|
||||
fetchPolicy: "network-only",
|
||||
variables: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
afterDateTime: (new Date()).toISOString(),
|
||||
afterDateTime: new Date().toISOString(),
|
||||
},
|
||||
update: data => data.loggedUser.participations.map(participation => new Participant(participation)),
|
||||
update: (data) =>
|
||||
data.loggedUser.participations.elements.map(
|
||||
(participation: IParticipant) => new Participant(participation)
|
||||
),
|
||||
},
|
||||
drafts: {
|
||||
query: LOGGED_USER_DRAFTS,
|
||||
fetchPolicy: 'network-only',
|
||||
fetchPolicy: "network-only",
|
||||
variables: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
},
|
||||
update: data => data.loggedUser.drafts.map(event => new EventModel(event)),
|
||||
update: (data) => data.loggedUser.drafts.map((event: IEvent) => new EventModel(event)),
|
||||
},
|
||||
pastParticipations: {
|
||||
query: LOGGED_USER_PARTICIPATIONS,
|
||||
fetchPolicy: 'network-only',
|
||||
fetchPolicy: "network-only",
|
||||
variables: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
beforeDateTime: (new Date()).toISOString(),
|
||||
beforeDateTime: new Date().toISOString(),
|
||||
},
|
||||
update: data => data.loggedUser.participations.map(participation => new Participant(participation)),
|
||||
update: (data) =>
|
||||
data.loggedUser.participations.elements.map(
|
||||
(participation: IParticipant) => new Participant(participation)
|
||||
),
|
||||
},
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
// if no subcomponents specify a metaInfo.title, this title will be used
|
||||
title: this.$t('My events') as string,
|
||||
// all titles will be injected into this template
|
||||
titleTemplate: '%s | Mobilizon',
|
||||
// if no subcomponents specify a metaInfo.title, this title will be used
|
||||
title: this.$t("My events") as string,
|
||||
// all titles will be injected into this template
|
||||
titleTemplate: "%s | Mobilizon",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class MyEvents extends Vue {
|
||||
futurePage: number = 1;
|
||||
pastPage: number = 1;
|
||||
limit: number = 10;
|
||||
futurePage = 1;
|
||||
|
||||
pastPage = 1;
|
||||
|
||||
limit = 10;
|
||||
|
||||
futureParticipations: IParticipant[] = [];
|
||||
hasMoreFutureParticipations: boolean = true;
|
||||
|
||||
hasMoreFutureParticipations = true;
|
||||
|
||||
pastParticipations: IParticipant[] = [];
|
||||
hasMorePastParticipations: boolean = true;
|
||||
|
||||
hasMorePastParticipations = true;
|
||||
|
||||
drafts: IEvent[] = [];
|
||||
|
||||
private monthlyParticipations(participations: IParticipant[]): Map<string, Participant[]> {
|
||||
const res = participations.filter(({ event, role }) => event.beginsOn != null && role !== ParticipantRole.REJECTED);
|
||||
static monthlyParticipations(participations: IParticipant[]): Map<string, Participant[]> {
|
||||
const res = participations.filter(
|
||||
({ event, role }) => event.beginsOn != null && role !== ParticipantRole.REJECTED
|
||||
);
|
||||
res.sort(
|
||||
(a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime(),
|
||||
);
|
||||
(a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
|
||||
);
|
||||
return res.reduce((acc: Map<string, IParticipant[]>, participation: IParticipant) => {
|
||||
const month = (new Date(participation.event.beginsOn)).toLocaleDateString(undefined, { year: 'numeric', month: 'long' });
|
||||
const participations: IParticipant[] = acc.get(month) || [];
|
||||
participations.push(participation);
|
||||
acc.set(month, participations);
|
||||
const month = new Date(participation.event.beginsOn).toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
});
|
||||
const filteredParticipations: IParticipant[] = acc.get(month) || [];
|
||||
filteredParticipations.push(participation);
|
||||
acc.set(month, filteredParticipations);
|
||||
return acc;
|
||||
}, new Map());
|
||||
}, new Map());
|
||||
}
|
||||
|
||||
get monthlyFutureParticipations(): Map<string, Participant[]> {
|
||||
return this.monthlyParticipations(this.futureParticipations);
|
||||
return MyEvents.monthlyParticipations(this.futureParticipations);
|
||||
}
|
||||
|
||||
get monthlyPastParticipations(): Map<string, Participant[]> {
|
||||
return this.monthlyParticipations(this.pastParticipations);
|
||||
return MyEvents.monthlyParticipations(this.pastParticipations);
|
||||
}
|
||||
|
||||
loadMoreFutureParticipations() {
|
||||
@@ -183,12 +222,12 @@ export default class MyEvents extends Vue {
|
||||
loadMorePastParticipations() {
|
||||
this.pastPage += 1;
|
||||
this.$apollo.queries.pastParticipations.fetchMore({
|
||||
// New variables
|
||||
// New variables
|
||||
variables: {
|
||||
page: this.pastPage,
|
||||
limit: this.limit,
|
||||
},
|
||||
// Transform the previous result with new data
|
||||
// Transform the previous result with new data
|
||||
updateQuery: (previousResult, { fetchMoreResult }) => {
|
||||
const newParticipations = fetchMoreResult.loggedUser.participations;
|
||||
this.hasMorePastParticipations = newParticipations.length === this.limit;
|
||||
@@ -203,28 +242,32 @@ export default class MyEvents extends Vue {
|
||||
});
|
||||
}
|
||||
|
||||
eventDeleted(eventid) {
|
||||
this.futureParticipations = this.futureParticipations.filter(participation => participation.event.id !== eventid);
|
||||
this.pastParticipations = this.pastParticipations.filter(participation => participation.event.id !== eventid);
|
||||
eventDeleted(eventid: string) {
|
||||
this.futureParticipations = this.futureParticipations.filter(
|
||||
(participation) => participation.event.id !== eventid
|
||||
);
|
||||
this.pastParticipations = this.pastParticipations.filter(
|
||||
(participation) => participation.event.id !== eventid
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables";
|
||||
@import "../../variables";
|
||||
|
||||
main > .container {
|
||||
background: $white;
|
||||
}
|
||||
main > .container {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.participation {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
.participation {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
section {
|
||||
.upcoming-month {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
section {
|
||||
.upcoming-month {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,80 +1,92 @@
|
||||
import {ParticipantRole} from "@/types/event.model";
|
||||
<template>
|
||||
<main class="container">
|
||||
<b-tabs type="is-boxed" v-if="event" v-model="activeTab">
|
||||
<b-tab-item>
|
||||
<template slot="header">
|
||||
<b-icon icon="account-multiple" />
|
||||
<span>{{ $t('Participants')}} <b-tag rounded> {{ participantStats.going }} </b-tag> </span>
|
||||
</template>
|
||||
<template>
|
||||
<section v-if="participants && participants.total > 0">
|
||||
<h2 class="title">{{ $t('Participants') }}</h2>
|
||||
<ParticipationTable
|
||||
:data="participants.elements"
|
||||
:accept-participant="acceptParticipant"
|
||||
:refuse-participant="refuseParticipant"
|
||||
:showRole="true"
|
||||
:total="participants.total"
|
||||
:perPage="PARTICIPANTS_PER_PAGE"
|
||||
@page-change="(page) => participantPage = page"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</b-tab-item>
|
||||
<b-tab-item :disabled="participantStats.notApproved === 0">
|
||||
<template slot="header">
|
||||
<b-icon icon="account-multiple-plus" />
|
||||
<span>{{ $t('Requests') }} <b-tag rounded> {{ participantStats.notApproved }} </b-tag> </span>
|
||||
</template>
|
||||
<template>
|
||||
<section v-if="queue && queue.total > 0">
|
||||
<h2 class="title">{{ $t('Waiting list') }}</h2>
|
||||
<ParticipationTable
|
||||
:data="queue.elements"
|
||||
:accept-participant="acceptParticipant"
|
||||
:refuse-participant="refuseParticipant"
|
||||
:total="queue.total"
|
||||
:perPage="PARTICIPANTS_PER_PAGE"
|
||||
@page-change="(page) => queuePage = page"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</b-tab-item>
|
||||
<b-tab-item :disabled="participantStats.rejected === 0">
|
||||
<template slot="header">
|
||||
<b-icon icon="account-multiple-minus"></b-icon>
|
||||
<span>{{ $t('Rejected')}} <b-tag rounded> {{ participantStats.rejected }} </b-tag> </span>
|
||||
</template>
|
||||
<template>
|
||||
<section v-if="rejected && rejected.total > 0">
|
||||
<h2 class="title">{{ $t('Rejected participations') }}</h2>
|
||||
<ParticipationTable
|
||||
:data="rejected.elements"
|
||||
:accept-participant="acceptParticipant"
|
||||
:refuse-participant="refuseParticipant"
|
||||
:total="rejected.total"
|
||||
:perPage="PARTICIPANTS_PER_PAGE"
|
||||
@page-change="(page) => rejectedPage = page"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</b-tab-item>
|
||||
</b-tabs>
|
||||
</main>
|
||||
<main class="container">
|
||||
<b-tabs type="is-boxed" v-if="event" v-model="activeTab">
|
||||
<b-tab-item>
|
||||
<template slot="header">
|
||||
<b-icon icon="account-multiple" />
|
||||
<span
|
||||
>{{ $t("Participants") }} <b-tag rounded> {{ participantStats.going }} </b-tag>
|
||||
</span>
|
||||
</template>
|
||||
<template>
|
||||
<section v-if="participants && participants.total > 0">
|
||||
<h2 class="title">{{ $t("Participants") }}</h2>
|
||||
<ParticipationTable
|
||||
:data="participants.elements"
|
||||
:accept-participant="acceptParticipant"
|
||||
:refuse-participant="refuseParticipant"
|
||||
:showRole="true"
|
||||
:total="participants.total"
|
||||
:perPage="PARTICIPANTS_PER_PAGE"
|
||||
@page-change="(page) => (participantPage = page)"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</b-tab-item>
|
||||
<b-tab-item :disabled="participantStats.notApproved === 0">
|
||||
<template slot="header">
|
||||
<b-icon icon="account-multiple-plus" />
|
||||
<span
|
||||
>{{ $t("Requests") }} <b-tag rounded> {{ participantStats.notApproved }} </b-tag>
|
||||
</span>
|
||||
</template>
|
||||
<template>
|
||||
<section v-if="queue && queue.total > 0">
|
||||
<h2 class="title">{{ $t("Waiting list") }}</h2>
|
||||
<ParticipationTable
|
||||
:data="queue.elements"
|
||||
:accept-participant="acceptParticipant"
|
||||
:refuse-participant="refuseParticipant"
|
||||
:total="queue.total"
|
||||
:perPage="PARTICIPANTS_PER_PAGE"
|
||||
@page-change="(page) => (queuePage = page)"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</b-tab-item>
|
||||
<b-tab-item :disabled="participantStats.rejected === 0">
|
||||
<template slot="header">
|
||||
<b-icon icon="account-multiple-minus"></b-icon>
|
||||
<span
|
||||
>{{ $t("Rejected") }} <b-tag rounded> {{ participantStats.rejected }} </b-tag>
|
||||
</span>
|
||||
</template>
|
||||
<template>
|
||||
<section v-if="rejected && rejected.total > 0">
|
||||
<h2 class="title">{{ $t("Rejected participations") }}</h2>
|
||||
<ParticipationTable
|
||||
:data="rejected.elements"
|
||||
:accept-participant="acceptParticipant"
|
||||
:refuse-participant="refuseParticipant"
|
||||
:total="rejected.total"
|
||||
:perPage="PARTICIPANTS_PER_PAGE"
|
||||
@page-change="(page) => (rejectedPage = page)"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</b-tab-item>
|
||||
</b-tabs>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
|
||||
import { IEvent, IEventParticipantStats, IParticipant, Participant, ParticipantRole } from '@/types/event.model';
|
||||
import { PARTICIPANTS, UPDATE_PARTICIPANT } from '@/graphql/event';
|
||||
import ParticipantCard from '@/components/Account/ParticipantCard.vue';
|
||||
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
|
||||
import { IPerson } from '@/types/actor';
|
||||
import { CONFIG } from '@/graphql/config';
|
||||
import { IConfig } from '@/types/config.model';
|
||||
import ParticipationTable from '@/components/Event/ParticipationTable.vue';
|
||||
import { Paginate } from '@/types/paginate';
|
||||
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
||||
import {
|
||||
IEvent,
|
||||
IEventParticipantStats,
|
||||
IParticipant,
|
||||
Participant,
|
||||
ParticipantRole,
|
||||
} from "../../types/event.model";
|
||||
import { PARTICIPANTS, UPDATE_PARTICIPANT } from "../../graphql/event";
|
||||
import ParticipantCard from "../../components/Account/ParticipantCard.vue";
|
||||
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
|
||||
import { IPerson } from "../../types/actor";
|
||||
import { CONFIG } from "../../graphql/config";
|
||||
import { IConfig } from "../../types/config.model";
|
||||
import ParticipationTable from "../../components/Event/ParticipationTable.vue";
|
||||
import { Paginate } from "../../types/paginate";
|
||||
|
||||
const PARTICIPANTS_PER_PAGE = 20;
|
||||
const MESSAGE_ELLIPSIS_LENGTH = 130;
|
||||
@@ -115,7 +127,9 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
|
||||
actorId: this.currentActor.id,
|
||||
};
|
||||
},
|
||||
update(data) { return this.dataTransform(data); },
|
||||
update(data) {
|
||||
return this.dataTransform(data);
|
||||
},
|
||||
skip() {
|
||||
return !this.currentActor.id;
|
||||
},
|
||||
@@ -131,7 +145,9 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
|
||||
actorId: this.currentActor.id,
|
||||
};
|
||||
},
|
||||
update(data) { return this.dataTransform(data); },
|
||||
update(data) {
|
||||
return this.dataTransform(data);
|
||||
},
|
||||
skip() {
|
||||
return !this.currentActor.id;
|
||||
},
|
||||
@@ -147,45 +163,57 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
|
||||
actorId: this.currentActor.id,
|
||||
};
|
||||
},
|
||||
update(data) { return this.dataTransform(data); },
|
||||
update(data) {
|
||||
return this.dataTransform(data);
|
||||
},
|
||||
skip() {
|
||||
return !this.currentActor.id;
|
||||
},
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat('…'),
|
||||
ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat("…"),
|
||||
},
|
||||
})
|
||||
export default class Participants extends Vue {
|
||||
@Prop({ required: true }) eventId!: string;
|
||||
page: number = 1;
|
||||
limit: number = 10;
|
||||
|
||||
page = 1;
|
||||
|
||||
limit = 10;
|
||||
|
||||
participants!: Paginate<IParticipant>;
|
||||
participantPage: number = 1;
|
||||
|
||||
participantPage = 1;
|
||||
|
||||
queue!: Paginate<IParticipant>;
|
||||
queuePage: number = 1;
|
||||
|
||||
queuePage = 1;
|
||||
|
||||
rejected!: Paginate<IParticipant>;
|
||||
rejectedPage: number = 1;
|
||||
|
||||
rejectedPage = 1;
|
||||
|
||||
event!: IEvent;
|
||||
|
||||
config!: IConfig;
|
||||
|
||||
ParticipantRole = ParticipantRole;
|
||||
|
||||
currentActor!: IPerson;
|
||||
|
||||
hasMoreParticipants: boolean = false;
|
||||
activeTab: number = 0;
|
||||
hasMoreParticipants = false;
|
||||
|
||||
activeTab = 0;
|
||||
|
||||
PARTICIPANTS_PER_PAGE = PARTICIPANTS_PER_PAGE;
|
||||
|
||||
dataTransform(data): Paginate<Participant> {
|
||||
dataTransform(data: { event: IEvent }): Paginate<Participant> {
|
||||
return {
|
||||
total: data.event.participants.total,
|
||||
elements: data.event.participants.elements.map(participation => new Participant(participation)),
|
||||
elements: data.event.participants.elements.map(
|
||||
(participation: IParticipant) => new Participant(participation)
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -194,10 +222,13 @@ export default class Participants extends Vue {
|
||||
return this.event.participantStats;
|
||||
}
|
||||
|
||||
@Watch('participantStats', { deep: true })
|
||||
@Watch("participantStats", { deep: true })
|
||||
watchParticipantStats(stats: IEventParticipantStats) {
|
||||
if (!stats) return;
|
||||
if ((stats.notApproved === 0 && this.activeTab === 1) || stats.rejected === 0 && this.activeTab === 2 ) {
|
||||
if (
|
||||
(stats.notApproved === 0 && this.activeTab === 1) ||
|
||||
(stats.rejected === 0 && this.activeTab === 2)
|
||||
) {
|
||||
this.activeTab = 0;
|
||||
}
|
||||
}
|
||||
@@ -236,8 +267,12 @@ export default class Participants extends Vue {
|
||||
},
|
||||
});
|
||||
if (data) {
|
||||
this.queue.elements = this.queue.elements.filter(participant => participant.id !== data.updateParticipation.id);
|
||||
this.rejected.elements = this.rejected.elements.filter(participant => participant.id !== data.updateParticipation.id);
|
||||
this.queue.elements = this.queue.elements.filter(
|
||||
(participant) => participant.id !== data.updateParticipation.id
|
||||
);
|
||||
this.rejected.elements = this.rejected.elements.filter(
|
||||
(participant) => participant.id !== data.updateParticipation.id
|
||||
);
|
||||
this.event.participantStats.going += 1;
|
||||
if (participant.role === ParticipantRole.NOT_APPROVED) {
|
||||
this.event.participantStats.notApproved -= 1;
|
||||
@@ -265,9 +300,11 @@ export default class Participants extends Vue {
|
||||
});
|
||||
if (data) {
|
||||
this.event.participants.elements = this.event.participants.elements.filter(
|
||||
participant => participant.id !== data.updateParticipation.id,
|
||||
(participant) => participant.id !== data.updateParticipation.id
|
||||
);
|
||||
this.queue.elements = this.queue.elements.filter(
|
||||
(participant) => participant.id !== data.updateParticipation.id
|
||||
);
|
||||
this.queue.elements = this.queue.elements.filter(participant => participant.id !== data.updateParticipation.id);
|
||||
this.event.participantStats.rejected += 1;
|
||||
if (participant.role === ParticipantRole.PARTICIPANT) {
|
||||
this.event.participantStats.participant -= 1;
|
||||
@@ -277,7 +314,9 @@ export default class Participants extends Vue {
|
||||
this.event.participantStats.notApproved -= 1;
|
||||
}
|
||||
participant.role = ParticipantRole.REJECTED;
|
||||
this.rejected.elements = this.rejected.elements.filter(participantIn => participantIn.id !== participant.id);
|
||||
this.rejected.elements = this.rejected.elements.filter(
|
||||
(participantIn) => participantIn.id !== participant.id
|
||||
);
|
||||
this.rejected.elements.push(participant);
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -289,16 +328,16 @@ export default class Participants extends Vue {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
section {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
nav.tabs li {
|
||||
margin: 3rem 0 0;
|
||||
}
|
||||
nav.tabs li {
|
||||
margin: 3rem 0 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
background: #fff;
|
||||
}
|
||||
.tab-content {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user