hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Introduce group basic federation, event new page and notifications

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-02-18 08:57:00 +01:00
parent 300ef8f245
commit 4144e9ffd0
416 changed files with 32220 additions and 16750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
js/src/views/Event/Participants.vue
View File

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