Introduce list of email notification settings (WIP)

webapp/locales/de.json

@@ -1041,7 +1041,14 @@
     "notifications": {
       "name": "Benachrichtigungen",
       "send-email-notifications": "Sende E-Mail-Benachrichtigungen",
-      "success-update": "Benachrichtigungs-Einstellungen gespeichert!"
+      "success-update": "Benachrichtigungs-Einstellungen gespeichert!",
+      "commentOnObservedPost": "Kommentare zu beobachteten Beiträgen",
+      "postByFollowedUser": "Beitrag von einem Nutzer, dem ich folge",
+      "postInGroup": "Beitrag in einer Gruppe, die ich beobachte",
+      "groupMemberJoined": "Ein Mitglied ist deiner Gruppe beigetreten",
+      "groupMemberLeft": "Ein Mitglied hat deine Gruppe verlassen",
+      "groupMemberRoleChanged": "Deine Rolle in einer Gruppe wurde geändert",
+      "groupMemberRemoved": "Du wurdest aus einer Gruppe entfernt",
     },
     "organizations": {
       "name": "Meine Organisationen"

webapp/locales/en.json

@@ -1041,7 +1041,14 @@
     "notifications": {
       "name": "Notifications",
       "send-email-notifications": "Send e-mail notifications",
-      "success-update": "Notifications settings saved!"
+      "success-update": "Notifications settings saved!",
+      "commentOnObservedPost": "Comments on observed posts",
+      "postByFollowedUser": "Posts by users I follow",
+      "postInGroup": "Post in a group I am a member of",
+      "groupMemberJoined": "Member joined a group I own",
+      "groupMemberLeft": "Member left a group I own",
+      "groupMemberRoleChanged": "My role in a group was changed",
+      "groupMemberRemoved": "I was removed from a group"
     },
     "organizations": {
       "name": "My Organizations"

webapp/pages/settings/notifications.spec.js

@@ -26,7 +26,15 @@ describe('notifications.vue', () => {
           return {
             id: 'u343',
             name: 'MyAccount',
-            sendNotificationEmails: true,
+            emailNotificationSettings: {
+              commentOnObservedPost: true,
+              postByFollowedUser: true,
+              postInGroup: true,
+              groupMemberJoined: true,
+              groupMemberLeft: true,
+              groupMemberRemoved: true,
+              groupMemberRoleChanged: true,
+            },
           }
         },
       },

webapp/pages/settings/notifications.vue

@@ -2,7 +2,7 @@
   <base-card>
     <h2 class="title">{{ $t('settings.notifications.name') }}</h2>
     <ds-space margin-bottom="small" v-for="topic in topics" :key="topic.id">
-      <input :id="topic.id" type="checkbox" v-model="notifyByEmail[topic.id]" />
+      <input :id="topic.id" type="checkbox" v-model="emailNotificationSettings[topic.id]" />
       <label :for="topic.id">{{ topic.name }}</label>
     </ds-space>
     <base-button @click="activateAll">
@@ -24,13 +24,21 @@ import { updateUserMutation } from '~/graphql/User'
 export default {
   data() {
     return {
-      notifyByEmail: {
-        posts: false,
-        comments: false,
-      },
+      emailNotificationSettings: [...this.currentUser.emailNotificationSettings],
       topics: [
-        { id: 'posts', name: this.$t('settings.notifications.posts') },
-        { id: 'comments', name: this.$t('settings.notifications.comments') },
+        {
+          id: 'commentOnObservedPost',
+          name: this.$t('settings.notifications.commentOnObservedPost'),
+        },
+        { id: 'postByFollowedUser', name: this.$t('settings.notifications.postByFollowedUser') },
+        { id: 'postInGroup', name: this.$t('settings.notifications.postInGroup') },
+        { id: 'groupMemberJoined', name: this.$t('settings.notifications.groupMemberJoined') },
+        { id: 'groupMemberLeft', name: this.$t('settings.notifications.groupMemberLeft') },
+        { id: 'groupMemberRemoved', name: this.$t('settings.notifications.groupMemberRemoved') },
+        {
+          id: 'groupMemberRoleChanged',
+          name: this.$t('settings.notifications.groupMemberRoleChanged'),
+        },
       ],
     }
   },
@@ -39,22 +47,18 @@ export default {
       currentUser: 'auth/user',
     }),
     disabled() {
-      return this.notifyByEmail === this.currentUser.sendNotificationEmails
+      return this.emailNotificationSettings.every(
+        (value, index) => value === this.currentUser.emailNotificationSettings[index],
+      )
     },
   },
-  created() {
-    this.notifyByEmail = {
-      posts: this.currentUser.sendNotificationEmails || false,
-      comments: this.currentUser.sendNotificationEmails || false,
-    }
-  },
   methods: {
     ...mapMutations({
       setCurrentUser: 'auth/SET_USER',
     }),
     setAll(value) {
-      for (const key of Object.keys(this.notifyByEmail)) {
-        this.notifyByEmail[key] = value
+      for (const key of Object.keys(this.emailNotificationSettings)) {
+        this.emailNotificationSettings[key] = value
       }
     },
     activateAll() {
@@ -69,19 +73,19 @@ export default {
           mutation: updateUserMutation(),
           variables: {
             id: this.currentUser.id,
-            sendNotificationEmails: this.notifyByEmail,
+            emailNotificationSettings: this.emailNotificationSettings,
           },
           update: (_, { data: { UpdateUser } }) => {
-            const { sendNotificationEmails } = UpdateUser
+            const { emailNotificationSettings } = UpdateUser
             this.setCurrentUser({
               ...this.currentUser,
-              sendNotificationEmails,
+              emailNotificationSettings,
             })
             this.$toast.success(this.$t('settings.notifications.success-update'))
           },
         })
       } catch (error) {
-        this.notifyByEmail = !this.notifyByEmail
+        this.emailNotificationSettings = !this.emailNotificationSettings
         this.$toast.error(error.message)
       }
     },