From 6094e90f288426f90dcd5c5396ebd3b35aaebf56 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 11 Jun 2020 10:58:23 +0200 Subject: [PATCH] Add onboarding settings Signed-off-by: Thomas Citharel --- js/src/App.vue | 6 +- .../Settings/NotificationsOnboarding.vue | 68 +++++++++++++++++++ .../Settings/SettingsOnboarding.vue | 53 +++++++++++++++ js/src/i18n/en_US.json | 9 ++- js/src/i18n/fr_FR.json | 9 ++- js/src/types/current-user.model.ts | 6 +- js/src/views/Home.vue | 18 +++-- js/src/views/Settings/Notifications.vue | 12 +++- js/src/views/User/SettingsOnboard.vue | 48 +++++++++++++ 9 files changed, 213 insertions(+), 16 deletions(-) create mode 100644 js/src/components/Settings/NotificationsOnboarding.vue create mode 100644 js/src/components/Settings/SettingsOnboarding.vue create mode 100644 js/src/views/User/SettingsOnboard.vue diff --git a/js/src/App.vue b/js/src/App.vue index bd8452a80..4e772c08f 100644 --- a/js/src/App.vue +++ b/js/src/App.vue @@ -58,11 +58,10 @@ import Logo from "./components/Logo.vue"; import { initializeCurrentActor } from "./utils/auth"; import { CONFIG } from "./graphql/config"; import { IConfig } from "./types/config.model"; +import { ICurrentUser } from "./types/current-user.model"; @Component({ apollo: { - currentUser: { - query: CURRENT_USER_CLIENT, - }, + currentUser: CURRENT_USER_CLIENT, config: CONFIG, }, components: { @@ -73,6 +72,7 @@ import { IConfig } from "./types/config.model"; }) export default class App extends Vue { config!: IConfig; + currentUser!: ICurrentUser; async created() { if (await this.initializeCurrentUser()) { diff --git a/js/src/components/Settings/NotificationsOnboarding.vue b/js/src/components/Settings/NotificationsOnboarding.vue new file mode 100644 index 000000000..fd8b4153b --- /dev/null +++ b/js/src/components/Settings/NotificationsOnboarding.vue @@ -0,0 +1,68 @@ + + diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue new file mode 100644 index 000000000..5ed1c2b0d --- /dev/null +++ b/js/src/components/Settings/SettingsOnboarding.vue @@ -0,0 +1,53 @@ + + + diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json index 0be4cb2c5..4d8be4669 100644 --- a/js/src/i18n/en_US.json +++ b/js/src/i18n/en_US.json @@ -600,5 +600,12 @@ "We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.": "We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.", "So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.": "So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.", "fit the needs and uses of the people": "fit the needs and uses of the people", - "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020." + "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.", + "To activate more notifications, head over to the notification settings.": "To activate more notifications, head over to the notification settings.", + "Manage my notifications": "Manage my notifications", + "We use your timezone to make sure you get notifications for an event at the correct time.": "We use your timezone to make sure you get notifications for an event at the correct time.", + "Your timezone was detected as {timezone}.": "Your timezone was detected as {timezone}.", + "Manage my settings": "Manage my settings", + "Let's define a few settings": "Let's define a few settings", + "All good, let's continue!": "All good, let's continue!" } diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json index 67d486e66..ad71613a7 100644 --- a/js/src/i18n/fr_FR.json +++ b/js/src/i18n/fr_FR.json @@ -619,5 +619,12 @@ "We asked professional designers to help us develop our vision for Mobilizon. We took time to study the {digital_habits} in order to understand the features they need to gather, organize, and mobilize.": "Nous avons demandé de l’aide à des professionnel·les du design pour concevoir ce que pourrait être Mobilizon. Nous avons pris le temps d’étudier {digital_habits} afin de comprendre les fonctionnalités dont ils et elles ont besoin pour se rassembler, s’organiser, se mobiliser.", "So that, right from its conception, Mobilizon would {fit_needs_uses_people} who are going to use it.": "Afin que Mobilizon corresponde, dès sa conception, {fit_needs_uses_people} des personnes qui sont vouées à l’utiliser.", "fit the needs and uses of the people": "aux besoins et usages", - "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon est en cours de développement, nous ajouterons de nouvelles fonctionnalités à ce site lors de mises à jour régulières, jusqu'à la publication de la version 1 du logiciel à l'automne 2020." + "Mobilizon is under development, we will add new features to this site during regular updates, until the release of version 1 of the software in the fall of 2020.": "Mobilizon est en cours de développement, nous ajouterons de nouvelles fonctionnalités à ce site lors de mises à jour régulières, jusqu'à la publication de la version 1 du logiciel à l'automne 2020.", + "To activate more notifications, head over to the notification settings.": "Pour activer plus de notifications, rendez-vous dans vos paramètres de notification.", + "Manage my notifications": "Gérer mes notifications", + "We use your timezone to make sure you get notifications for an event at the correct time.": "Nous utilisons votre fuseau hoaire pour nous assurer que vous recevez les notifications pour un événement au bon moment.", + "Your timezone was detected as {timezone}.": "Votre fuseau horaire a été détecté en tant que {timezone}.", + "Manage my settings": "Gérer mes paramètres", + "Let's define a few settings": "Définissons quelques paramètres", + "All good, let's continue!": "C'est tout bon, continuons !" } diff --git a/js/src/types/current-user.model.ts b/js/src/types/current-user.model.ts index d8e3473e6..ba4d03361 100644 --- a/js/src/types/current-user.model.ts +++ b/js/src/types/current-user.model.ts @@ -28,8 +28,8 @@ export enum INotificationPendingParticipationEnum { export interface IUserSettings { timezone: string; - notificationOnDay: string; - notificationEachWeek: string; - notificationBeforeEvent: string; + notificationOnDay: boolean; + notificationEachWeek: boolean; + notificationBeforeEvent: boolean; notificationPendingParticipation: INotificationPendingParticipationEnum; } diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue index 5bf342cc8..9528e7d7d 100644 --- a/js/src/views/Home.vue +++ b/js/src/views/Home.vue @@ -30,7 +30,7 @@ -
+
{{ $t("Welcome back {username}!", { username: currentActor.displayName() }) @@ -102,6 +102,7 @@ {{ $t("No events found") }}
+
@@ -114,7 +115,7 @@ import EventCard from "../components/Event/EventCard.vue"; import { CURRENT_ACTOR_CLIENT, LOGGED_USER_PARTICIPATIONS } from "../graphql/actor"; import { IPerson, Person } from "../types/actor"; import { ICurrentUser } from "../types/current-user.model"; -import { CURRENT_USER_CLIENT } from "../graphql/user"; +import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user"; import RouteName from "../router/name"; import { EventModel, @@ -138,12 +139,12 @@ import Subtitle from "../components/Utils/Subtitle.vue"; query: CURRENT_ACTOR_CLIENT, update: (data) => new Person(data.currentActor), }, - currentUser: { - query: CURRENT_USER_CLIENT, - }, - config: { - query: CONFIG, + currentUser: CURRENT_USER_CLIENT, + loggedUser: { + query: USER_SETTINGS, + fetchPolicy: "no-cache", }, + config: CONFIG, currentUserParticipations: { query: LOGGED_USER_PARTICIPATIONS, variables() { @@ -167,6 +168,7 @@ import Subtitle from "../components/Utils/Subtitle.vue"; DateComponent, EventListCard, EventCard, + "settings-onboard": () => import("./User/SettingsOnboard.vue"), }, metaInfo() { return { @@ -189,6 +191,8 @@ export default class Home extends Vue { currentUser!: ICurrentUser; + loggedUser!: ICurrentUser; + currentActor!: IPerson; config!: IConfig; diff --git a/js/src/views/Settings/Notifications.vue b/js/src/views/Settings/Notifications.vue index 13710c0d2..d855bde25 100644 --- a/js/src/views/Settings/Notifications.vue +++ b/js/src/views/Settings/Notifications.vue @@ -24,7 +24,7 @@ $t("We'll use your timezone settings to send a recap of the morning of the event.") }}

- {{ + {{ $t("Your timezone is currently set to {timezone}.", { timezone: loggedUser.settings.timezone, }) @@ -115,6 +115,16 @@ export default class Notifications extends Vue { }; } + @Watch("loggedUser") + setSettings() { + if (this.loggedUser && this.loggedUser.settings) { + this.notificationOnDay = this.loggedUser.settings.notificationOnDay; + this.notificationEachWeek = this.loggedUser.settings.notificationEachWeek; + this.notificationBeforeEvent = this.loggedUser.settings.notificationBeforeEvent; + this.notificationPendingParticipation = this.loggedUser.settings.notificationPendingParticipation; + } + } + async updateSetting(variables: object) { await this.$apollo.mutate<{ setUserSettings: string }>({ mutation: SET_USER_SETTINGS, diff --git a/js/src/views/User/SettingsOnboard.vue b/js/src/views/User/SettingsOnboard.vue new file mode 100644 index 000000000..9e2119166 --- /dev/null +++ b/js/src/views/User/SettingsOnboard.vue @@ -0,0 +1,48 @@ + +