basic json download of user data

backend/src/schema/resolvers/userData.js

@@ -1,5 +1,3 @@
-import log from './helpers/databaseLogger'
-
 export default {
   Query: {
     userData: async (object, args, context, resolveInfo) => {
@@ -23,7 +21,6 @@ export default {
 
       try {
         const result = await resultPromise
-        log(result.records[0].get('result'))
         return result.records[0].get('result')
       } finally {
         session.close()

webapp/graphql/User.js

@@ -292,3 +292,24 @@ export const currentUserCountQuery = () => gql`
     }
   }
 `
+
+export const userDataQuery = (i18n) => {
+  return gql`
+    ${userFragment}
+    ${postFragment}
+    ${commentFragment}
+    query($id: ID!) {
+      userData(id: $id) {
+        user {
+          ...user
+        }
+        posts {
+          ...post
+          comments {
+            ...comment
+          }
+        }
+      }
+    }
+  `
+}

webapp/pages/settings.vue

@@ -51,6 +51,10 @@ export default {
           name: this.$t('settings.embeds.name'),
           path: `/settings/embeds`,
         },
+        {
+          name: this.$t('settings.download.name'),
+          path: `/settings/data-download`,
+        },
         {
           name: this.$t('settings.deleteUserAccount.name'),
           path: `/settings/delete-account`,
@@ -61,12 +65,6 @@ export default {
             path: `/settings/invites`
             }, */
         // TODO implement
-        /* {
-          name: this.$t('settings.download.name'),
-          path: `/settings/data-download`
-        }, */
-        // TODO implement
-        // TODO implement
         /* {
             name: this.$t('settings.organizations.name'),
             path: `/settings/my-organizations`

webapp/pages/settings/data-download.vue

@@ -1,16 +1,50 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('settings.download.name') }}</h2>
-    <hc-empty icon="tasks" message="Coming Soon…" />
+    <button @click="onClick">Download data</button>
   </base-card>
 </template>
 
 <script>
-import HcEmpty from '~/components/Empty/Empty'
+import { mapGetters } from 'vuex'
+import { userDataQuery } from '~/graphql/User'
 
 export default {
-  components: {
+  data() {
-    HcEmpty,
+    return {
+      userData: {},
+    }
+  },
+  computed: {
+    ...mapGetters({
+      user: 'auth/user',
+    }),
+    jsonData() {
+      return JSON.stringify(this.userData)
+    },
+  },
+  methods: {
+    onClick() {
+      var fileURL = window.URL.createObjectURL(new Blob([this.jsonData]))
+      var fileLink = document.createElement('a')
+      fileLink.href = fileURL
+      fileLink.setAttribute('download', 'userData.json')
+      document.body.appendChild(fileLink)
+      fileLink.click()
+    },
+  },
+  apollo: {
+    queryUserData: {
+      query() {
+        return userDataQuery()
+      },
+      variables() {
+        return { id: this.user.id }
+      },
+      update({ userData }) {
+        this.userData = userData
+      },
+    },
   },
 }
 </script>