run update mutation when submitting shouts form

webapp/locales/de.json

@@ -238,7 +238,8 @@
     },
     "privacy": {
       "name": "Privatsphäre",
-      "make-shouts-public": "Teile von mir empfohlene Artikel öffentlich auf meinem Profil"
+      "make-shouts-public": "Teile von mir empfohlene Artikel öffentlich auf meinem Profil",
+      "success-update": "Privatsphäre-Einstellungen gespeichert"
     },
     "invites": {
       "name": "Einladungen"

webapp/locales/en.json

@@ -239,7 +239,8 @@
     },
     "privacy": {
       "name": "Privacy",
-      "make-shouts-public": "Share articles I have shouted on my public profile"
+      "make-shouts-public": "Share articles I have shouted on my public profile",
+      "success-update": "Privacy settings saved"
     },
     "invites": {
       "name": "Invites"

webapp/pages/settings/privacy.vue

@@ -4,30 +4,55 @@
       <input id="allow-shouts" type="checkbox" v-model="shoutsAllowed" />
       <label for="allow-shouts">{{ $t('settings.privacy.make-shouts-public') }}</label>
     </ds-space>
-    <ds-button primary @click="submit">{{ $t('actions.save') }}</ds-button>
+    <ds-button primary @click="submit" :disabled="disabled">{{ $t('actions.save') }}</ds-button>
   </ds-card>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import { showShoutsPubliclyMutation } from '~/graphql/User'
 
 export default {
+  data() {
+    return {
+      shoutsAllowed: false,
+    }
+  },
   computed: {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
-    shoutsAllowed: {
-      get() {
-        return this.currentUser.shoutsAllowed || false
-      },
-      set(value) {
-        return value
-      },
+    disabled() {
+      return this.shoutsAllowed === this.currentUser.showShoutsPublicly
     },
   },
+  created() {
+    this.shoutsAllowed = this.currentUser.showShoutsPublicly || false
+  },
   methods: {
-    submit() {
-      console.log('wohoo')
+    ...mapMutations({
+      setCurrentUser: 'auth/SET_USER',
+    }),
+    async submit() {
+      try {
+        await this.$apollo.mutate({
+          mutation: showShoutsPubliclyMutation(),
+          variables: {
+            id: this.currentUser.id,
+            showShoutsPublicly: this.shoutsAllowed,
+          },
+          update: (_, { data: { UpdateUser } }) => {
+            const { showShoutsPublicly } = UpdateUser
+            this.setCurrentUser({
+              ...this.currentUser,
+              showShoutsPublicly,
+            })
+            this.$toast.success(this.$t('settings.privacy.success-update'))
+          },
+        })
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
     },
   },
 }