Add onboarding settings

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Home.vue

@@ -30,7 +30,7 @@
         </div>
       </div>
     </section>
-    <div class="container section" v-if="config">
+    <div class="container section" v-if="config && loggedUser && loggedUser.settings">
       <section v-if="currentActor.id">
         <b-message type="is-info" v-if="welcomeBack">{{
           $t("Welcome back {username}!", { username: currentActor.displayName() })
@@ -102,6 +102,7 @@
         <b-message v-else type="is-danger">{{ $t("No events found") }}</b-message>
       </section>
     </div>
+    <settings-onboard v-else-if="config && loggedUser && loggedUser.settings == undefined" />
   </div>
 </template>
 
@@ -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;

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.")
             }}
           </p>
-          <span v-if="loggedUser.settings.timezone">{{
+          <span v-if="loggedUser.settings && loggedUser.settings.timezone">{{
             $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,

js/src/views/User/SettingsOnboard.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="section container">
+    <h1 class="title">{{ $t("Let's define a few settings") }}</h1>
+    <settings-onboarding />
+    <notifications-onboarding />
+    <section class="has-text-centered section">
+      <b-button @click="refresh()" type="is-success" size="is-big">
+        {{ $t("All good, let's continue!") }}
+      </b-button>
+    </section>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { SET_USER_SETTINGS } from "../../graphql/user";
+import { TIMEZONES } from "../../graphql/config";
+import { IConfig } from "../../types/config.model";
+
+@Component({
+  components: {
+    NotificationsOnboarding: () => import("../../components/Settings/NotificationsOnboarding.vue"),
+    SettingsOnboarding: () => import("../../components/Settings/SettingsOnboarding.vue"),
+  },
+  apollo: {
+    config: TIMEZONES,
+  },
+})
+export default class SettingsOnboard extends Vue {
+  config!: IConfig;
+
+  @Watch("config")
+  async timezoneLoaded() {
+    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (this.config && this.config.timezones.includes(timezone)) {
+      await this.$apollo.mutate<{ setUserSettings: string }>({
+        mutation: SET_USER_SETTINGS,
+        variables: {
+          timezone,
+        },
+      });
+    }
+  }
+
+  refresh() {
+    location.reload();
+  }
+}
+</script>