Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'improve-navbar-and-edition-page' into 'master' 

Improve navbar and edition page

Closes #169

See merge request framasoft/mobilizon!216
This commit is contained in:
Thomas Citharel 2019-10-03 12:45:31 +02:00
parent 1e945a3d14 8bfb9ddf1a
commit 1ff2c6871e
20 changed files with 148 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/src/components/Event/EventListCard.vue
View File

@ -44,7 +44,7 @@
<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: EventRouteName.EDIT_EVENT, params: { eventId: participation.event.uuid } }"> <router-link :to="{ name: RouteName.EDIT_EVENT, params: { eventId: participation.event.uuid } }">
<b-icon icon="pencil" /> {{ $t('Edit') }} <b-icon icon="pencil" /> {{ $t('Edit') }}
</router-link> </router-link>
</li> </li>
@ -52,12 +52,12 @@
<a @click="openDeleteEventModalWrapper"><b-icon icon="delete" /> {{ $t('Delete') }}</a> <a @click="openDeleteEventModalWrapper"><b-icon icon="delete" /> {{ $t('Delete') }}</a>
</li> </li>
<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: EventRouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } }"> <router-link :to="{ name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } }">
<b-icon icon="account-multiple-plus" /> {{ $t('Manage participations') }} <b-icon icon="account-multiple-plus" /> {{ $t('Manage participations') }}
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link :to="{ name: EventRouteName.EVENT, params: { uuid: participation.event.uuid } }"><b-icon icon="view-compact" /> {{ $t('View event page') }}</router-link> <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"><b-icon icon="view-compact" /> {{ $t('View event page') }}</router-link>
</li> </li>
</ul> </ul>
</div> </div>
@ -70,7 +70,6 @@ import { IParticipant, ParticipantRole, EventVisibility } from '@/types/event.mo
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 { IActor, IPerson, Person } from '@/types/actor';
import { EventRouteName } from '@/router/event';
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, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
@ -100,8 +99,8 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
currentActor!: IPerson; currentActor!: IPerson;
ParticipantRole = ParticipantRole; ParticipantRole = ParticipantRole;
EventRouteName = EventRouteName;
EventVisibility = EventVisibility; EventVisibility = EventVisibility;
RouteName = RouteName;
defaultOptions: IEventCardOptions = { defaultOptions: IEventCardOptions = {
hideDate: true, hideDate: true,

2
js/src/components/Logo.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}" height="60px"> <img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}" height="40px">
</template> </template>
<script lang="ts"> <script lang="ts">

57
js/src/components/NavBar.vue
View File

@ -1,11 +1,14 @@
<template> <template>
<b-navbar type="is-secondary" shadow wrapper-class="container"> <b-navbar type="is-secondary" shadow wrapper-class="container">
<template slot="brand"> <template slot="brand">
<b-navbar-item tag="router-link" :to="{ name: 'Home' }"><logo /></b-navbar-item> <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }"><logo /></b-navbar-item>
</template> </template>
<template slot="start"> <template slot="start">
<b-navbar-item tag="router-link" :to="{ name: EventRouteName.EXPLORE }">{{ $t('Explore') }}</b-navbar-item> <b-navbar-item tag="router-link" :to="{ name: RouteName.EXPLORE }">{{ $t('Explore') }}</b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: EventRouteName.MY_EVENTS }">{{ $t('Events') }}</b-navbar-item> <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{ $t('Events') }}</b-navbar-item>
<b-navbar-item tag="span">
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{ $t('Create') }}</b-button>
</b-navbar-item>
</template> </template>
<template slot="end"> <template slot="end">
<b-navbar-item tag="div"> <b-navbar-item tag="div">
@ -37,16 +40,16 @@
</b-navbar-item> </b-navbar-item>
<b-navbar-item> <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">
<router-link :to="{ name: 'UpdateIdentity' }">{{ $t('My account') }}</router-link> {{ $t('My account') }}
</b-navbar-item> </b-navbar-item>
<b-navbar-item> <!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
<router-link :to="{ name: ActorRouteName.CREATE_GROUP }">{{ $t('Create group') }}</router-link> <!-- {{ $t('Create group') }}-->
</b-navbar-item> <!-- </b-navbar-item>-->
<b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"> <b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" tag="router-link" :to="{ name: RouteName.DASHBOARD }">
<router-link :to="{ name: AdminRouteName.DASHBOARD }">{{ $t('Administration') }}</router-link> {{ $t('Administration') }}
</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="span"> <b-navbar-item tag="span">
@ -56,11 +59,11 @@
<b-navbar-item v-else tag="div"> <b-navbar-item v-else tag="div">
<div class="buttons"> <div class="buttons">
<router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }"> <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: RouteName.REGISTER }">
<strong>{{ $t('Sign up') }}</strong> <strong>{{ $t('Sign up') }}</strong>
</router-link> </router-link>
<router-link class="button is-light" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link> <router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{ $t('Log in') }}</router-link>
</div> </div>
</b-navbar-item> </b-navbar-item>
</template> </template>
@ -71,17 +74,14 @@
import { Component, Vue, Watch } from 'vue-property-decorator'; import { Component, Vue, Watch } from 'vue-property-decorator';
import { CURRENT_USER_CLIENT } from '@/graphql/user'; import { CURRENT_USER_CLIENT } from '@/graphql/user';
import { changeIdentity, logout } from '@/utils/auth'; import { changeIdentity, logout } from '@/utils/auth';
import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor'; import { IPerson, Person } from '@/types/actor';
import { CONFIG } from '@/graphql/config'; import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model'; import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model';
import Logo from '@/components/Logo.vue'; import Logo from '@/components/Logo.vue';
import SearchField from '@/components/SearchField.vue'; import SearchField from '@/components/SearchField.vue';
import { ActorRouteName } from '@/router/actor';
import { AdminRouteName } from '@/router/admin';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import { EventRouteName } from '@/router/event';
@Component({ @Component({
apollo: { apollo: {
@ -105,20 +105,12 @@ import { EventRouteName } from '@/router/event';
}, },
}) })
export default class NavBar extends Vue { export default class NavBar extends Vue {
notifications = [
{ header: 'Coucou' },
{ title: 'T\'as une notification', subtitle: 'Et elle est cool' },
];
currentActor!: IPerson; currentActor!: IPerson;
config!: IConfig; config!: IConfig;
currentUser!: ICurrentUser; currentUser!: ICurrentUser;
ICurrentUserRole = ICurrentUserRole; ICurrentUserRole = ICurrentUserRole;
identities: IPerson[] = []; identities: IPerson[] = [];
showNavbar: boolean = false; RouteName = RouteName;
ActorRouteName = ActorRouteName;
AdminRouteName = AdminRouteName;
EventRouteName = EventRouteName;
@Watch('currentActor') @Watch('currentActor')
async initializeListOfIdentities() { async initializeListOfIdentities() {
@ -130,21 +122,6 @@ export default class NavBar extends Vue {
} }
} }
// @Watch('currentUser')
// async onCurrentUserChanged() {
// // Refresh logged person object
// if (this.currentUser.isLoggedIn) {
// const result = await this.$apollo.query({
// query: CURRENT_ACTOR_CLIENT,
// });
// console.log(result);
//
// this.loggedPerson = result.data.currentActor;
// } else {
// this.loggedPerson = null;
// }
// }
async logout() { async logout() {
await logout(this.$apollo.provider.defaultClient); await logout(this.$apollo.provider.defaultClient);
this.$buefy.notification.open({ this.$buefy.notification.open({

3
js/src/components/Report/ReportCard.vue
View File

@ -27,13 +27,10 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { IReport } from '@/types/report.model'; import { IReport } from '@/types/report.model';
import { EventRouteName } from '@/router/event';
@Component @Component
export default class ReportCard extends Vue { export default class ReportCard extends Vue {
@Prop({ required: true }) report!: IReport; @Prop({ required: true }) report!: IReport;
EventRouteName = EventRouteName;
} }
</script> </script>
<style lang="scss"> <style lang="scss">

1
js/src/graphql/admin.ts
View File

@ -4,6 +4,7 @@ export const DASHBOARD = gql`
query { query {
dashboard { dashboard {
lastPublicEventPublished { lastPublicEventPublished {
uuid,
title, title,
picture { picture {
alt alt

52
js/src/router/actor.ts
View File

@ -19,32 +19,32 @@ export enum MyAccountRouteName {
} }
export const actorRoutes: RouteConfig[] = [ export const actorRoutes: RouteConfig[] = [
{ // {
path: '/groups', // path: '/groups',
name: ActorRouteName.GROUP_LIST, // name: ActorRouteName.GROUP_LIST,
component: GroupList, // component: GroupList,
meta: { requiredAuth: false }, // meta: { requiredAuth: false },
}, // },
{ // {
path: '/groups/create', // path: '/groups/create',
name: ActorRouteName.CREATE_GROUP, // name: ActorRouteName.CREATE_GROUP,
component: CreateGroup, // component: CreateGroup,
meta: { requiredAuth: true }, // meta: { requiredAuth: true },
}, // },
{ // {
path: '/~:preferredUsername', // path: '/~:preferredUsername',
name: ActorRouteName.GROUP, // name: ActorRouteName.GROUP,
component: Group, // component: Group,
props: true, // props: true,
meta: { requiredAuth: false }, // meta: { requiredAuth: false },
}, // },
{ // {
path: '/@:name', // path: '/@:name',
name: ActorRouteName.PROFILE, // name: ActorRouteName.PROFILE,
component: Profile, // component: Profile,
props: true, // props: true,
meta: { requiredAuth: false }, // meta: { requiredAuth: false },
}, // },
{ {
path: '/my-account/identity', path: '/my-account/identity',
component: MyAccount, component: MyAccount,

2
js/src/variables.scss
View File

@ -16,7 +16,7 @@ $colors: map-merge(
// Navbar // Navbar
$navbar-background-color: $secondary; $navbar-background-color: $secondary;
$navbar-item-color: $primary; $navbar-item-color: $primary;
$navbar-height: 7rem; $navbar-height: 4rem;
// Footer // Footer

10
js/src/views/Account/MyAccount.vue
View File

@ -2,7 +2,7 @@
<section class="container"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li class="is-active"><router-link :to="{ name: MyAccountRouteName.UPDATE_IDENTITY }" aria-current="page">{{ $t('My account') }}</router-link></li> <li class="is-active"><router-link :to="{ name: RouteName.UPDATE_IDENTITY }" aria-current="page">{{ $t('My account') }}</router-link></li>
</ul> </ul>
</nav> </nav>
<div v-if="currentActor"> <div v-if="currentActor">
@ -16,7 +16,7 @@
<div class="identities column is-4"> <div class="identities column is-4">
<identities v-bind:currentIdentityName="currentIdentityName"></identities> <identities v-bind:currentIdentityName="currentIdentityName"></identities>
<div class="buttons"> <div class="buttons">
<b-button tag="router-link" type="is-secondary" :to="{ name: UserRouteName.PASSWORD_CHANGE }">{{ $t('Change password') }}</b-button> <b-button tag="router-link" type="is-secondary" :to="{ name: RouteName.PASSWORD_CHANGE }">{{ $t('Change password') }}</b-button>
</div> </div>
</div> </div>
<div class="column is-8"> <div class="column is-8">
@ -48,8 +48,7 @@ import { Component, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue'; import EventCard from '@/components/Event/EventCard.vue';
import { IPerson } from '@/types/actor'; import { IPerson } from '@/types/actor';
import Identities from '@/components/Account/Identities.vue'; import Identities from '@/components/Account/Identities.vue';
import { UserRouteName } from '@/router/user'; import { RouteName } from '@/router';
import { MyAccountRouteName } from '@/router/actor';
@Component({ @Component({
components: { components: {
@ -66,8 +65,7 @@ export default class MyAccount extends Vue {
currentActor!: IPerson; currentActor!: IPerson;
currentIdentityName: string | null = null; currentIdentityName: string | null = null;
UserRouteName = UserRouteName; RouteName = RouteName;
MyAccountRouteName = MyAccountRouteName;
@Watch('$route.params.identityName', { immediate: true }) @Watch('$route.params.identityName', { immediate: true })
async onIdentityParamChanged (val: string) { async onIdentityParamChanged (val: string) {

22
js/src/views/Admin/Dashboard.vue
View File

@ -19,7 +19,7 @@
<p class="title">{{ dashboard.numberOfUsers }}</p> <p class="title">{{ dashboard.numberOfUsers }}</p>
<p class="subtitle">{{ $t('Users')}}</p> <p class="subtitle">{{ $t('Users')}}</p>
</article> </article>
<router-link :to="{ name: ModerationRouteName.REPORTS}"> <router-link :to="{ name: RouteName.REPORTS}">
<article class="tile is-child box"> <article class="tile is-child box">
<p class="title">{{ dashboard.numberOfReports }}</p> <p class="title">{{ dashboard.numberOfReports }}</p>
<p class="subtitle">{{ $t('Opened reports')}}</p> <p class="subtitle">{{ $t('Opened reports')}}</p>
@ -28,13 +28,15 @@
</div> </div>
</div> </div>
<div class="tile is-parent" v-if="dashboard.lastPublicEventPublished"> <div class="tile is-parent" v-if="dashboard.lastPublicEventPublished">
<article class="tile is-child box"> <router-link :to="{ name: RouteName.EVENT, params: { uuid: dashboard.lastPublicEventPublished.uuid } }">
<p class="title">{{ $t('Last published event') }}</p> <article class="tile is-child box">
<p class="subtitle">{{ dashboard.lastPublicEventPublished.title }}</p> <p class="title">{{ $t('Last published event') }}</p>
<figure class="image is-4by3" v-if="dashboard.lastPublicEventPublished.picture"> <p class="subtitle">{{ dashboard.lastPublicEventPublished.title }}</p>
<img :src="dashboard.lastPublicEventPublished.picture.url" /> <figure class="image is-4by3" v-if="dashboard.lastPublicEventPublished.picture">
</figure> <img :src="dashboard.lastPublicEventPublished.picture.url" />
</article> </figure>
</article>
</router-link>
</div> </div>
</div> </div>
<div class="tile is-parent"> <div class="tile is-parent">
@ -57,7 +59,7 @@
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { DASHBOARD } from '@/graphql/admin'; import { DASHBOARD } from '@/graphql/admin';
import { IDashboard } from '@/types/admin.model'; import { IDashboard } from '@/types/admin.model';
import { ModerationRouteName } from '@/router/moderation'; import { RouteName } from '@/router';
@Component({ @Component({
apollo: { apollo: {
@ -68,6 +70,6 @@ import { ModerationRouteName } from '@/router/moderation';
}) })
export default class Dashboard extends Vue { export default class Dashboard extends Vue {
dashboard!: IDashboard; dashboard!: IDashboard;
ModerationRouteName = ModerationRouteName; RouteName = RouteName;
} }
</script> </script>

20
js/src/views/Event/Edit.vue
View File

@ -162,7 +162,7 @@
<div class="container"> <div class="container">
<div class="navbar-menu"> <div class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<span class="navbar-item" v-if="isUpdate === true && isEventModified">{{ $t('Unsaved changes') }}</span> <span class="navbar-item" v-if="isEventModified">{{ $t('Unsaved changes') }}</span>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<span class="navbar-item"> <span class="navbar-item">
@ -293,7 +293,7 @@ export default class EditEvent extends Vue {
if (this.eventId) { if (this.eventId) {
this.event = await this.getEvent(); this.event = await this.getEvent();
this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event)); this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
this.pictureFile = await buildFileFromIPicture(this.event.picture); this.pictureFile = await buildFileFromIPicture(this.event.picture);
this.limitedPlaces = this.event.options.maximumAttendeeCapacity != null; this.limitedPlaces = this.event.options.maximumAttendeeCapacity != null;
@ -301,8 +301,16 @@ export default class EditEvent extends Vue {
} }
created() { created() {
const now = new Date(); this.initializeEvent();
const end = new Date(); 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);
const now = roundUpTo15Minutes(new Date());
const end = roundUpTo15Minutes(new Date());
end.setUTCHours(now.getUTCHours() + 3); end.setUTCHours(now.getUTCHours() + 3);
this.event.beginsOn = now; this.event.beginsOn = now;
@ -311,7 +319,7 @@ export default class EditEvent extends Vue {
} }
mounted() { mounted() {
this.observer = new IntersectionObserver((entries, observer) => { this.observer = new IntersectionObserver((entries) => {
for (const entry of entries) { for (const entry of entries) {
if (entry) { if (entry) {
this.showFixedNavbar = !entry.isIntersecting; this.showFixedNavbar = !entry.isIntersecting;
@ -454,7 +462,7 @@ export default class EditEvent extends Vue {
} }
get isEventModified(): boolean { get isEventModified(): boolean {
return JSON.stringify(this.event) !== JSON.stringify(this.unmodifiedEvent); return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent);
} }
// getAddressData(addressData) { // getAddressData(addressData) {

3
js/src/views/Event/Event.vue
View File

@ -74,7 +74,7 @@
<p class="control" v-if="actorIsOrganizer || event.draft"> <p class="control" v-if="actorIsOrganizer || event.draft">
<router-link <router-link
class="button" class="button"
:to="{ name: 'EditEvent', params: {eventId: event.uuid}}" :to="{ name: RouteName.EDIT_EVENT, params: {eventId: event.uuid}}"
> >
{{ $t('Edit') }} {{ $t('Edit') }}
</router-link> </router-link>
@ -277,6 +277,7 @@ export default class Event extends EventMixin {
isReportModalActive: boolean = false; isReportModalActive: boolean = false;
isJoinModalActive: boolean = false; isJoinModalActive: boolean = false;
EventVisibility = EventVisibility; EventVisibility = EventVisibility;
RouteName = RouteName;
mounted() { mounted() {
this.identity = this.currentActor; this.identity = this.currentActor;

33
js/src/views/Home.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="container" v-if="config"> <div class="container" v-if="config">
<section class="hero is-link" v-if="!currentUser.id || !currentActor"> <section class="hero is-info" v-if="!currentUser.id || !currentActor">
<div class="hero-body"> <div class="hero-body">
<div> <div>
<h1 class="title">{{ config.name }}</h1> <h1 class="title">{{ config.name }}</h1>
<h2 class="subtitle">{{ config.description }}</h2> <h2 class="subtitle">{{ config.description }}</h2>
<router-link class="button" :to="{ name: 'Register' }" v-if="config.registrationsOpen"> <router-link class="button" :to="{ name: RouteName.REGISTER }" v-if="config.registrationsOpen">
{{ $t('Register') }} {{ $t('Sign up') }}
</router-link> </router-link>
<p v-else> <p v-else>
{{ $t("This instance isn't opened to registrations, but you can register on other instances.") }} {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
@ -14,24 +14,12 @@
</div> </div>
</div> </div>
</section> </section>
<section v-else> <section v-else-if="currentActor">
<h1> <b-message type="is-info">
{{ $t('Welcome back {username}', {username: `@${currentActor.preferredUsername}`}) }} {{ $t('Welcome back {username}', { username: currentActor.displayName() }) }}
</h1> </b-message>
</section> </section>
<b-dropdown aria-role="list"> <section v-else-if="currentActor && goingToEvents.size > 0" class="container">
<button class="button is-primary" slot="trigger">
<span>{{ $t('Create') }}</span>
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<router-link :to="{ name: RouteName.CREATE_GROUP }">{{ $t('Group') }}</router-link>
</b-dropdown-item>
</b-dropdown>
<section v-if="currentActor && goingToEvents.size > 0" class="container">
<h3 class="title"> <h3 class="title">
{{ $t("Upcoming") }} {{ $t("Upcoming") }}
</h3> </h3>
@ -62,7 +50,7 @@
</div> </div>
</div> </div>
<span class="view-all"> <span class="view-all">
<router-link :to=" { name: EventRouteName.MY_EVENTS }">{{ $t('View everything')}} >></router-link> <router-link :to=" { name: RouteName.MY_EVENTS }">{{ $t('View everything')}} >></router-link>
</span> </span>
</section> </section>
<section v-if="currentActor && lastWeekEvents.length > 0"> <section v-if="currentActor && lastWeekEvents.length > 0">
@ -111,7 +99,6 @@ import { EventModel, IEvent, IParticipant, Participant } from '@/types/event.mod
import DateComponent from '@/components/Event/DateCalendarIcon.vue'; import DateComponent from '@/components/Event/DateCalendarIcon.vue';
import { CONFIG } from '@/graphql/config'; import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model'; import { IConfig } from '@/types/config.model';
import { EventRouteName } from '@/router/event';
@Component({ @Component({
apollo: { apollo: {
@ -121,6 +108,7 @@ import { EventRouteName } from '@/router/event';
}, },
currentActor: { currentActor: {
query: CURRENT_ACTOR_CLIENT, query: CURRENT_ACTOR_CLIENT,
update: data => new Person(data.currentActor),
}, },
currentUser: { currentUser: {
query: CURRENT_USER_CLIENT, query: CURRENT_USER_CLIENT,
@ -145,7 +133,6 @@ export default class Home extends Vue {
currentActor!: IPerson; currentActor!: IPerson;
config: IConfig = { description: '', name: '', registrationsOpen: false }; config: IConfig = { description: '', name: '', registrationsOpen: false };
RouteName = RouteName; RouteName = RouteName;
EventRouteName = EventRouteName;
// get displayed_name() { // get displayed_name() {
// return this.loggedPerson && this.loggedPerson.name === null // return this.loggedPerson && this.loggedPerson.name === null

18
js/src/views/Moderation/Logs.vue
View File

@ -2,8 +2,8 @@
<section class="container"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li><router-link :to="{ name: AdminRouteName.DASHBOARD }">Dashboard</router-link></li> <li><router-link :to="{ name: RouteName.DASHBOARD }">Dashboard</router-link></li>
<li class="is-active"><router-link :to="{ name: ModerationRouteName.LOGS }" aria-current="page">Logs</router-link></li> <li class="is-active"><router-link :to="{ name: RouteName.LOGS }" aria-current="page">Logs</router-link></li>
</ul> </ul>
</nav> </nav>
<ul v-if="actionLogs.length > 0"> <ul v-if="actionLogs.length > 0">
@ -12,17 +12,17 @@
<img class="image" :src="log.actor.avatar.url" /> <img class="image" :src="log.actor.avatar.url" />
<span>@{{ log.actor.preferredUsername }}</span> <span>@{{ log.actor.preferredUsername }}</span>
<span v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"> <span v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED">
closed <router-link :to="{ name: ModerationRouteName.REPORT, params: { reportId: log.object.id } }">report #{{ log.object.id }}</router-link> closed <router-link :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }">report #{{ log.object.id }}</router-link>
</span> </span>
<span v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"> <span v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED">
reopened <router-link :to="{ name: ModerationRouteName.REPORT, params: { reportId: log.object.id } }">report #{{ log.object.id }}</router-link> reopened <router-link :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }">report #{{ log.object.id }}</router-link>
</span> </span>
<span v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"> <span v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED">
marked <router-link :to="{ name: ModerationRouteName.REPORT, params: { reportId: log.object.id } }">report #{{ log.object.id }}</router-link> as resolved marked <router-link :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }">report #{{ log.object.id }}</router-link> as resolved
</span> </span>
<span v-else-if="log.action === ActionLogAction.NOTE_CREATION"> <span v-else-if="log.action === ActionLogAction.NOTE_CREATION">
added a note on added a note on
<router-link v-if="log.object.report" :to="{ name: ModerationRouteName.REPORT, params: { reportId: log.object.report.id } }">report #{{ log.object.report.id }}</router-link> <router-link v-if="log.object.report" :to="{ name: RouteName.REPORT, params: { reportId: log.object.report.id } }">report #{{ log.object.report.id }}</router-link>
<span v-else>a non-existent report</span> <span v-else>a non-existent report</span>
</span> </span>
<span v-else-if="log.action === ActionLogAction.EVENT_DELETION"> <span v-else-if="log.action === ActionLogAction.EVENT_DELETION">
@ -44,8 +44,7 @@ import { Component, Vue } from 'vue-property-decorator';
import { IActionLog, ActionLogAction } from '@/types/report.model'; import { IActionLog, ActionLogAction } from '@/types/report.model';
import { LOGS } from '@/graphql/report'; import { LOGS } from '@/graphql/report';
import ReportCard from '@/components/Report/ReportCard.vue'; import ReportCard from '@/components/Report/ReportCard.vue';
import { AdminRouteName } from '@/router/admin'; import { RouteName } from '@/router';
import { ModerationRouteName } from '@/router/moderation';
@Component({ @Component({
components: { components: {
@ -62,8 +61,7 @@ export default class ReportList extends Vue {
actionLogs?: IActionLog[] = []; actionLogs?: IActionLog[] = [];
ActionLogAction = ActionLogAction; ActionLogAction = ActionLogAction;
AdminRouteName = AdminRouteName; RouteName = RouteName;
ModerationRouteName = ModerationRouteName;
} }
</script> </script>
<style lang="scss"> <style lang="scss">

26
js/src/views/Moderation/Report.vue
View File

@ -4,9 +4,9 @@
<div class="container" v-if="report"> <div class="container" v-if="report">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li><router-link :to="{ name: AdminRouteName.DASHBOARD }">Dashboard</router-link></li> <li><router-link :to="{ name: RouteName.DASHBOARD }">Dashboard</router-link></li>
<li><router-link :to="{ name: ModerationRouteName.REPORTS }">Reports</router-link></li> <li><router-link :to="{ name: RouteName.REPORTS }">Reports</router-link></li>
<li class="is-active"><router-link :to="{ name: ModerationRouteName.REPORT, params: { reportId: this.report.id} }" aria-current="page">Report</router-link></li> <li class="is-active"><router-link :to="{ name: RouteName.REPORT, params: { reportId: this.report.id} }" aria-current="page">Report</router-link></li>
</ul> </ul>
</nav> </nav>
<div class="buttons"> <div class="buttons">
@ -22,7 +22,7 @@
<tr> <tr>
<td>Compte signalé</td> <td>Compte signalé</td>
<td> <td>
<router-link :to="{ name: ActorRouteName.PROFILE, params: { name: report.reported.preferredUsername } }"> <router-link :to="{ name: RouteName.PROFILE, params: { name: report.reported.preferredUsername } }">
<img v-if="report.reported.avatar" class="image" :src="report.reported.avatar.url" /> @{{ report.reported.preferredUsername }} <img v-if="report.reported.avatar" class="image" :src="report.reported.avatar.url" /> @{{ report.reported.preferredUsername }}
</router-link> </router-link>
</td> </td>
@ -30,7 +30,7 @@
<tr> <tr>
<td>Signalé par</td> <td>Signalé par</td>
<td> <td>
<router-link :to="{ name: ActorRouteName.PROFILE, params: { name: report.reporter.preferredUsername } }"> <router-link :to="{ name: RouteName.PROFILE, params: { name: report.reporter.preferredUsername } }">
<img v-if="report.reporter.avatar" class="image" :src="report.reporter.avatar.url" /> @{{ report.reporter.preferredUsername }} <img v-if="report.reporter.avatar" class="image" :src="report.reporter.avatar.url" /> @{{ report.reporter.preferredUsername }}
</router-link> </router-link>
</td> </td>
@ -66,14 +66,14 @@
</div> </div>
<div class="box" v-if="report.event"> <div class="box" v-if="report.event">
<router-link :to="{ name: EventRouteName.EVENT, params: { uuid: report.event.uuid }}"> <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid }}">
<h3 class="title">{{ report.event.title }}</h3> <h3 class="title">{{ report.event.title }}</h3>
<p v-html="report.event.description"></p> <p v-html="report.event.description"></p>
</router-link> </router-link>
<b-button <b-button
tag="router-link" tag="router-link"
type="is-primary" type="is-primary"
:to="{ name: EventRouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }" :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"
icon-left="pencil" icon-left="pencil"
size="is-small">Edit</b-button> size="is-small">Edit</b-button>
<b-button <b-button
@ -86,7 +86,7 @@
<h2 class="title" v-if="report.notes.length > 0">Notes</h2> <h2 class="title" v-if="report.notes.length > 0">Notes</h2>
<div class="box note" v-for="note in report.notes" :id="`note-${note.id}`"> <div class="box note" v-for="note in report.notes" :id="`note-${note.id}`">
<p>{{ note.content }}</p> <p>{{ note.content }}</p>
<router-link :to="{ name: ActorRouteName.PROFILE, params: { name: note.moderator.preferredUsername } }"> <router-link :to="{ name: RouteName.PROFILE, params: { name: note.moderator.preferredUsername } }">
<img class="image" :src="note.moderator.avatar.url" /> @{{ note.moderator.preferredUsername }} <img class="image" :src="note.moderator.avatar.url" /> @{{ note.moderator.preferredUsername }}
</router-link><br /> </router-link><br />
<small><a :href="`#note-${note.id}`" v-if="note.insertedAt">{{ note.insertedAt | formatDateTimeString }}</a></small> <small><a :href="`#note-${note.id}`" v-if="note.insertedAt">{{ note.insertedAt | formatDateTimeString }}</a></small>
@ -105,10 +105,7 @@
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { CREATE_REPORT_NOTE, REPORT, REPORTS, UPDATE_REPORT } from '@/graphql/report'; import { CREATE_REPORT_NOTE, REPORT, REPORTS, UPDATE_REPORT } from '@/graphql/report';
import { IReport, IReportNote, ReportStatusEnum } from '@/types/report.model'; import { IReport, IReportNote, ReportStatusEnum } from '@/types/report.model';
import { EventRouteName } from '@/router/event'; import { RouteName } from '@/router';
import { ActorRouteName } from '@/router/actor';
import { AdminRouteName } from '@/router/admin';
import { ModerationRouteName } from '@/router/moderation';
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor'; import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson } from '@/types/actor'; import { IPerson } from '@/types/actor';
import { DELETE_EVENT } from '@/graphql/event'; import { DELETE_EVENT } from '@/graphql/event';
@ -139,10 +136,7 @@ export default class Report extends Vue {
errors: string[] = []; errors: string[] = [];
ReportStatusEnum = ReportStatusEnum; ReportStatusEnum = ReportStatusEnum;
EventRouteName = EventRouteName; RouteName = RouteName;
ActorRouteName = ActorRouteName;
AdminRouteName = AdminRouteName;
ModerationRouteName = ModerationRouteName;
noteContent: string = ''; noteContent: string = '';

14
js/src/views/Moderation/ReportList.vue
View File

@ -2,8 +2,8 @@
<section class="container"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li><router-link :to="{ name: AdminRouteName.DASHBOARD }">Dashboard</router-link></li> <li><router-link :to="{ name: RouteName.DASHBOARD }">Dashboard</router-link></li>
<li class="is-active"><router-link :to="{ name: ModerationRouteName.REPORTS }" aria-current="page">Reports</router-link></li> <li class="is-active"><router-link :to="{ name: RouteName.REPORTS }" aria-current="page">Reports</router-link></li>
</ul> </ul>
</nav> </nav>
<b-field> <b-field>
@ -22,7 +22,7 @@
</b-field> </b-field>
<ul v-if="reports.length > 0"> <ul v-if="reports.length > 0">
<li v-for="report in reports"> <li v-for="report in reports">
<router-link :to="{ name: ModerationRouteName.REPORT, params: { reportId: report.id } }"> <router-link :to="{ name: RouteName.REPORT, params: { reportId: report.id } }">
<report-card :report="report" /> <report-card :report="report" />
</router-link> </router-link>
</li> </li>
@ -39,8 +39,7 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { IReport, ReportStatusEnum } from '@/types/report.model'; import { IReport, ReportStatusEnum } from '@/types/report.model';
import { REPORTS } from '@/graphql/report'; import { REPORTS } from '@/graphql/report';
import ReportCard from '@/components/Report/ReportCard.vue'; import ReportCard from '@/components/Report/ReportCard.vue';
import { AdminRouteName } from '@/router/admin'; import { RouteName } from '@/router';
import { ModerationRouteName } from '@/router/moderation';
@Component({ @Component({
components: { components: {
@ -62,8 +61,7 @@ import { ModerationRouteName } from '@/router/moderation';
export default class ReportList extends Vue { export default class ReportList extends Vue {
reports?: IReport[] = []; reports?: IReport[] = [];
AdminRouteName = AdminRouteName; RouteName = RouteName;
ModerationRouteName = ModerationRouteName;
ReportStatusEnum = ReportStatusEnum; ReportStatusEnum = ReportStatusEnum;
filterReports: ReportStatusEnum = ReportStatusEnum.OPEN; filterReports: ReportStatusEnum = ReportStatusEnum.OPEN;
@ -78,7 +76,7 @@ export default class ReportList extends Vue {
@Watch('filterReports', { immediate: true }) @Watch('filterReports', { immediate: true })
async onFilterChanged (val: string) { async onFilterChanged (val: string) {
await this.$router.push({ name: ModerationRouteName.REPORTS, params: { filter: val.toLowerCase() } }); await this.$router.push({ name: RouteName.REPORTS, params: { filter: val.toLowerCase() } });
} }
} }
</script> </script>

36
js/src/views/Search.vue
View File

@ -25,24 +25,24 @@
{{ $t('No events found') }} {{ $t('No events found') }}
</b-message> </b-message>
</b-tab-item> </b-tab-item>
<b-tab-item> <!-- <b-tab-item>-->
<template slot="header"> <!-- <template slot="header">-->
<b-icon icon="account-multiple"></b-icon> <!-- <b-icon icon="account-multiple"></b-icon>-->
<span> <!-- <span>-->
{{ $t('Groups') }} <b-tag rounded>{{ searchGroups.total }}</b-tag> <!-- {{ $t('Groups') }} <b-tag rounded>{{ searchGroups.total }}</b-tag>-->
</span> <!-- </span>-->
</template> <!-- </template>-->
<div v-if="searchGroups.total > 0" class="columns is-multiline"> <!-- <div v-if="searchGroups.total > 0" class="columns is-multiline">-->
<div class="column is-one-quarter-desktop is-half-mobile" <!-- <div class="column is-one-quarter-desktop is-half-mobile"-->
v-for="group in groups" <!-- v-for="group in groups"-->
:key="group.uuid"> <!-- :key="group.uuid">-->
<group-card :group="group" /> <!-- <group-card :group="group" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<b-message v-else-if="$apollo.loading === false" type="is-danger"> <!-- <b-message v-else-if="$apollo.loading === false" type="is-danger">-->
{{ $t('No groups found') }} <!-- {{ $t('No groups found') }}-->
</b-message> <!-- </b-message>-->
</b-tab-item> <!-- </b-tab-item>-->
</b-tabs> </b-tabs>
</section> </section>
</template> </template>

6
js/src/views/User/Login.vue
View File

@ -37,7 +37,7 @@
<div class="control"> <div class="control">
<router-link <router-link
class="button is-text" class="button is-text"
:to="{ name: 'SendPasswordReset', params: { email: credentials.email }}" :to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email }}"
> >
{{ $t('Forgot your password ?') }} {{ $t('Forgot your password ?') }}
</router-link> </router-link>
@ -45,7 +45,7 @@
<div class="control" v-if="config && config.registrationsOpen"> <div class="control" v-if="config && config.registrationsOpen">
<router-link <router-link
class="button is-text" class="button is-text"
:to="{ name: 'Register', params: { default_email: credentials.email, default_password: credentials.password }}" :to="{ name: RouteName.REGISTER, params: { default_email: credentials.email, default_password: credentials.password }}"
> >
{{ $t('Register') }} {{ $t('Register') }}
</router-link> </router-link>
@ -95,6 +95,8 @@ export default class Login extends Vue {
config!: IConfig; config!: IConfig;
currentUser!: ICurrentUser; currentUser!: ICurrentUser;
RouteName = RouteName;
credentials = { credentials = {
email: '', email: '',
password: '', password: '',

10
js/src/views/User/PasswordChange.vue
View File

@ -2,8 +2,8 @@
<section class="container"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li><router-link :to="{ name: MyAccountRouteName.UPDATE_IDENTITY }">{{ $t('My account') }}</router-link></li> <li><router-link :to="{ name: RouteName.UPDATE_IDENTITY }">{{ $t('My account') }}</router-link></li>
<li class="is-active"><router-link :to="{ name: UserRouteName.PASSWORD_CHANGE }" aria-current="page">{{ $t('Password change') }}</router-link></li> <li class="is-active"><router-link :to="{ name: RouteName.PASSWORD_CHANGE }" aria-current="page">{{ $t('Password change') }}</router-link></li>
</ul> </ul>
</nav> </nav>
<h1 class="title">{{ $t('Password') }}</h1> <h1 class="title">{{ $t('Password') }}</h1>
@ -48,8 +48,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { CHANGE_PASSWORD } from '@/graphql/user'; import { CHANGE_PASSWORD } from '@/graphql/user';
import { UserRouteName } from '@/router/user'; import { RouteName } from '@/router';
import { MyAccountRouteName } from '@/router/actor';
@Component @Component
export default class PasswordChange extends Vue { export default class PasswordChange extends Vue {
@ -57,8 +56,7 @@ export default class PasswordChange extends Vue {
newPassword: string = ''; newPassword: string = '';
errors: string[] = []; errors: string[] = [];
MyAccountRouteName = MyAccountRouteName; RouteName = RouteName;
UserRouteName = UserRouteName;
async resetAction(e) { async resetAction(e) {
e.preventDefault(); e.preventDefault();

9
js/src/views/User/Register.vue
View File

@ -77,7 +77,7 @@
<div class="control"> <div class="control">
<router-link <router-link
class="button is-text" class="button is-text"
:to="{ name: 'ResendConfirmation', params: { email: credentials.email }}" :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
> >
{{ $t("Didn't receive the instructions ?") }} {{ $t("Didn't receive the instructions ?") }}
</router-link> </router-link>
@ -85,7 +85,7 @@
<div class="control"> <div class="control">
<router-link <router-link
class="button is-text" class="button is-text"
:to="{ name: 'Login', params: { email: credentials.email, password: credentials.password }}" :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
:disabled="sendingValidation" :disabled="sendingValidation"
> >
{{ $t('Login') }} {{ $t('Login') }}
@ -107,7 +107,7 @@
<script lang="ts"> <script lang="ts">
import { CREATE_USER } from '@/graphql/user'; import { CREATE_USER } from '@/graphql/user';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { UserRouteName } from '@/router/user'; import { RouteName } from '@/router';
@Component @Component
export default class Register extends Vue { export default class Register extends Vue {
@ -121,6 +121,7 @@ export default class Register extends Vue {
errors: object = {}; errors: object = {};
sendingValidation: boolean = false; sendingValidation: boolean = false;
validationSent: boolean = false; validationSent: boolean = false;
RouteName = RouteName;
async submit() { async submit() {
try { try {
@ -135,7 +136,7 @@ export default class Register extends Vue {
this.validationSent = true; this.validationSent = true;
this.$router.push({ this.$router.push({
name: UserRouteName.REGISTER_PROFILE, name: RouteName.REGISTER_PROFILE,
params: { email: this.credentials.email }, params: { email: this.credentials.email },
}); });
} catch (error) { } catch (error) {

3
js/src/views/User/Validate.vue
View File

@ -21,7 +21,6 @@ import { VALIDATE_USER } from '@/graphql/user';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { AUTH_USER_ID } from '@/constants'; import { AUTH_USER_ID } from '@/constants';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import { UserRouteName } from '@/router/user';
import { saveTokenData } from '@/utils/auth'; import { saveTokenData } from '@/utils/auth';
@Component @Component
@ -51,7 +50,7 @@ export default class Validate extends Vue {
if (user.defaultActor) { if (user.defaultActor) {
this.$router.push({ name: RouteName.HOME }); this.$router.push({ name: RouteName.HOME });
} else { // If the user didn't register any profile yet, let's create one for them } else { // If the user didn't register any profile yet, let's create one for them
this.$router.push({ name: UserRouteName.REGISTER_PROFILE, params: { email: user.email, userAlreadyActivated: 'true' } }); this.$router.push({ name: RouteName.REGISTER_PROFILE, params: { email: user.email, userAlreadyActivated: 'true' } });
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);