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

Send Notifications when participation approval

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-06-08 12:28:19 +02:00
parent 63efea7371
commit 3e74f59ee8
38 changed files with 2500 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/App.vue
View File

@@ -128,7 +128,7 @@ $mdi-font-path: "~@mdi/font/fonts";
body {
// background: #f7f8fa;
background: $body-background-color;
font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
font-family: BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Segoe UI", "Fira Sans",
"Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
/*main {*/

3
js/src/graphql/user.ts
View File

@@ -99,6 +99,7 @@ export const USER_SETTINGS_FRAGMENT = gql`
notificationOnDay
notificationEachWeek
notificationBeforeEvent
notificationPendingParticipation
}
`;
@@ -119,12 +120,14 @@ export const SET_USER_SETTINGS = gql`
$notificationOnDay: Boolean
$notificationEachWeek: Boolean
$notificationBeforeEvent: Boolean
$notificationPendingParticipation: NotificationPendingParticipationEnum
) {
setUserSettings(
timezone: $timezone
notificationOnDay: $notificationOnDay
notificationEachWeek: $notificationEachWeek
notificationBeforeEvent: $notificationBeforeEvent
notificationPendingParticipation: $notificationPendingParticipation
) {
...UserSettingFragment
}

12
js/src/i18n/en_US.json
View File

@@ -584,5 +584,15 @@
"Timezone": "Timezone",
"Select a timezone": "Select a timezone",
"Other": "Other",
"No moderation logs yet": "No moderation logs yet"
"No moderation logs yet": "No moderation logs yet",
"Participation notifications": "Participation notifications",
"We'll always send you emails to notify about important event updates": "We'll always send you emails to notify about important event updates",
"Like title or physical address update, start or end date change or event being confirmed or cancelled.": "Like title or physical address update, start or end date change or event being confirmed or cancelled.",
"Organizer notifications": "Organizer notifications",
"Notifications for manually approved participations to an event": "Notifications for manually approved participations to an event",
"We'll send you an email when there new participations requests.": "We'll send you an email when there new participations requests.",
"No notifications": "No notifications",
"Direct": "Direct",
"Every hour": "Every hour",
"Every day": "Every day"
}

1198
js/src/i18n/fr_FR.json
View File

File diff suppressed because it is too large Load Diff

8
js/src/types/current-user.model.ts
View File

@@ -19,9 +19,17 @@ export interface ICurrentUser {
settings: IUserSettings;
}
export enum INotificationPendingParticipationEnum {
NONE = "NONE",
DIRECT = "DIRECT",
ONE_DAY = "ONE_DAY",
ONE_HOUR = "ONE_HOUR",
}
export interface IUserSettings {
timezone: string;
notificationOnDay: string;
notificationEachWeek: string;
notificationBeforeEvent: string;
notificationPendingParticipation: INotificationPendingParticipationEnum;
}

136
js/src/views/Settings/Notifications.vue
View File

@@ -1,63 +1,92 @@
<template>
<div v-if="loggedUser">
<div class="setting-title">
<h2>{{ $t("Participation notifications") }}</h2>
</div>
<div class="field">
<strong>{{
$t("We'll always send you emails to notifiy about important event updates")
}}</strong>
<p>
{{
$t(
"Like title or physical address update, start or end date change or event being confirmed or cancelled."
)
}}
</p>
</div>
<div class="field">
<b-checkbox v-model="notificationOnDay" @input="updateSetting({ notificationOnDay })">
<strong>{{ $t("Notification on the day of the event") }}</strong>
<p>
{{ $t("We'll use your timezone settings to send a recap of the morning of the event.") }}
</p>
<span v-if="loggedUser.settings.timezone">{{
$t("Your timezone is currently set to {timezone}.", {
timezone: loggedUser.settings.timezone,
})
}}</span>
<span v-else>{{ $t("You can pick your timezone into your preferences.") }}</span>
</b-checkbox>
</div>
<div class="field">
<b-checkbox v-model="notificationEachWeek" @input="updateSetting({ notificationEachWeek })">
<strong>{{ $t("Recap every week") }}</strong>
<p>
{{ $t("You'll get a weekly recap every Monday for upcoming events, if you have any.") }}
</p>
</b-checkbox>
</div>
<div class="field">
<b-checkbox
v-model="notificationBeforeEvent"
@input="updateSetting({ notificationBeforeEvent })"
>
<strong>{{ $t("Notification before the event") }}</strong>
<section>
<div class="setting-title">
<h2>{{ $t("Participation notifications") }}</h2>
</div>
<div class="field">
<strong>{{
$t("We'll always send you emails to notify about important event updates")
}}</strong>
<p>
{{
$t(
"We'll send you an email one hour before the event begins, to be sure you won't forget about it."
"Like title or physical address update, start or end date change or event being confirmed or cancelled."
)
}}
</p>
</b-checkbox>
</div>
</div>
<div class="field">
<b-checkbox v-model="notificationOnDay" @input="updateSetting({ notificationOnDay })">
<strong>{{ $t("Notification on the day of the event") }}</strong>
<p>
{{
$t("We'll use your timezone settings to send a recap of the morning of the event.")
}}
</p>
<span v-if="loggedUser.settings.timezone">{{
$t("Your timezone is currently set to {timezone}.", {
timezone: loggedUser.settings.timezone,
})
}}</span>
<span v-else>{{ $t("You can pick your timezone into your preferences.") }}</span>
</b-checkbox>
</div>
<div class="field">
<b-checkbox v-model="notificationEachWeek" @input="updateSetting({ notificationEachWeek })">
<strong>{{ $t("Recap every week") }}</strong>
<p>
{{ $t("You'll get a weekly recap every Monday for upcoming events, if you have any.") }}
</p>
</b-checkbox>
</div>
<div class="field">
<b-checkbox
v-model="notificationBeforeEvent"
@input="updateSetting({ notificationBeforeEvent })"
>
<strong>{{ $t("Notification before the event") }}</strong>
<p>
{{
$t(
"We'll send you an email one hour before the event begins, to be sure you won't forget about it."
)
}}
</p>
</b-checkbox>
</div>
</section>
<section>
<div class="setting-title">
<h2>{{ $t("Organizer notifications") }}</h2>
</div>
<div class="field">
<strong>{{ $t("Notifications for manually approved participations to an event") }}</strong>
<b-select
v-model="notificationPendingParticipation"
@input="updateSetting({ notificationPendingParticipation })"
>
<option
v-for="(value, key) in notificationPendingParticipationValues"
:value="key"
:key="key"
>{{ value }}</option
>
</b-select>
<p>
{{ $t("We'll send you an email when there new participations requests.") }}
</p>
</div>
</section>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
import { ICurrentUser } from "../../types/current-user.model";
import {
ICurrentUser,
INotificationPendingParticipationEnum,
} from "../../types/current-user.model";
@Component({
apollo: {
@@ -73,6 +102,19 @@ export default class Notifications extends Vue {
notificationBeforeEvent = false;
notificationPendingParticipation = INotificationPendingParticipationEnum.NONE;
notificationPendingParticipationValues: object = {};
mounted() {
this.notificationPendingParticipationValues = {
[INotificationPendingParticipationEnum.NONE]: this.$t("No notifications"),
[INotificationPendingParticipationEnum.DIRECT]: this.$t("Direct"),
[INotificationPendingParticipationEnum.ONE_HOUR]: this.$t("Every hour"),
[INotificationPendingParticipationEnum.ONE_DAY]: this.$t("Every day"),
};
}
async updateSetting(variables: object) {
await this.$apollo.mutate<{ setUserSettings: string }>({
mutation: SET_USER_SETTINGS,