Add assignment queries and mutation to client

client/package-lock.json

@@ -2736,6 +2736,11 @@
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",

client/package.json

@@ -31,6 +31,7 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "debounce": "^1.2.0",
     "eslint": "^4.15.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^3.0.0",

client/src/components/content-blocks/Assignment.vue

@@ -1,16 +1,66 @@
 <template>
   <div class="assignment">
-    <p v-html="value.assignment"></p>
-    <textarea class="assignment__input" placeholder="Text schreiben"></textarea>
+    {{assignment.title}}
+    <p v-html="assignment.assignment"></p>
+    <textarea
+      class="assignment__input"
+      placeholder="Text schreiben"
+      :value="assignment.submission.text"
+      @input="saveInput"
+    ></textarea>
     <button class="assignment__submit button">Ergebnis teilen</button>
   </div>
 </template>
 
 <script>
+  import ASSIGNMENT_QUERY from '@/graphql/gql/assignmentQuery.gql';
+  import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
+  import debounce from 'debounce';
 
   export default {
     props: ['value'],
 
+    computed: {
+      loading() {
+        return this.$apollo.loading;
+      }
+    },
+
+    methods: {
+      saveInput: debounce(function (event) {
+        this.$apollo.mutate({
+          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          variables: {
+            input: {
+              assignment: {
+                id: this.assignment.id,
+                answer: event.target.value
+              }
+            }
+          }
+        });
+      }, 500)
+    },
+
+    apollo: {
+      assignment: {
+        query: ASSIGNMENT_QUERY,
+        variables() {
+          return {
+            id: this.value.id
+          }
+        },
+      },
+    },
+
+    data() {
+      return {
+        assignment: {
+          submission: {
+            text: ''
+          }
+        }
+      }
     }
   }
 </script>

client/src/graphql/client.js

@@ -41,7 +41,8 @@ const composedLink = ApolloLink.from([createOmitTypenameLink, consoleLink, httpL
 const cache = new InMemoryCache({
   cacheRedirects: {
     Query: {
-      contentBlock: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ContentBlockNode', id: args.id})
+      contentBlock: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ContentBlockNode', id: args.id}),
+      assignment: (_, args, {getCacheKey}) => getCacheKey({__typename: 'AssignmentNode', id: args.id})
     }
   }
 });

client/src/graphql/gql/assignmentQuery.gql

@@ -0,0 +1,6 @@
+#import "./fragments/assignmentParts.gql"
+query AssignmentQuery($id: ID!) {
+  assignment(id: $id) {
+    ...AssignmentParts
+  }
+}

client/src/graphql/gql/assignmentsQuery.gql

@@ -0,0 +1,10 @@
+#import "./fragments/assignmentParts.gql"
+query AssignmentsQuery {
+  assignments {
+    edges {
+      node {
+        ...AssignmentParts
+      }
+    }
+  }
+}

client/src/graphql/gql/fragments/assignmentParts.gql

@@ -0,0 +1,10 @@
+fragment AssignmentParts on AssignmentNode {
+  id
+  title
+  assignment
+  submission {
+    id
+    text
+    final
+  }
+}

client/src/graphql/gql/mutations/updateAssignmentMutation.gql

@@ -0,0 +1,8 @@
+#import "../fragments/assignmentParts.gql"
+mutation UpdateAssignment($input: UpdateAssignmentInput!) {
+  updateAssignment(input: $input){
+    updatedAssignment {
+      ...AssignmentParts
+    }
+  }
+}

client/src/main.js

@@ -10,20 +10,20 @@ import router from './router'
 import store from '@/store/index'
 import VueScrollTo from 'vue-scrollto';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 // TODO: Move into a separate project as a plugin
 //
 function getRidOfEdges(collection) {
   if (typeof collection === 'object' && collection && !Array.isArray(collection)) {
-    let newObj = {}
+    let newObj = {};
     for (const k in collection) {
       if (k === 'edges') {
         return collection.edges.map(edge => getRidOfEdges(edge.node));
       } else {
-        newObj[k] = getRidOfEdges(collection[k])
+        newObj[k] = getRidOfEdges(collection[k]);
         if (newObj[k]) {
-          delete newObj[k]['__typename']
+          // delete newObj[k]['__typename']
         }
       }
     }
@@ -33,21 +33,21 @@ function getRidOfEdges(collection) {
   }
 }
 
-Object.defineProperty(Vue.prototype, '$getRidOfEdges', {value: getRidOfEdges})
+Object.defineProperty(Vue.prototype, '$getRidOfEdges', {value: getRidOfEdges});
 
-Vue.use(VueApollo)
-Vue.use(VueAxios, axios)
-Vue.use(VueVimeoPlayer)
+Vue.use(VueApollo);
+Vue.use(VueAxios, axios);
+Vue.use(VueVimeoPlayer);
 
 Vue.use(VueScrollTo, {
      duration: 500,
      easing: 'ease-out',
      offset: -50
- })
+ });
 
 const apolloProvider = new VueApollo({
   defaultClient: apolloClient
-})
+});
 
 /* eslint-disable no-new */
 new Vue({
@@ -56,4 +56,4 @@ new Vue({
   router,
   provide: apolloProvider.provide(),
   render: h => h(App)
-})
+});

client/src/pages/module.vue

@@ -9,6 +9,7 @@
   import store from '@/store/index';
 
   import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+  import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
 
   import Module from '@/components/modules/Module.vue';
   import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
@@ -20,30 +21,25 @@
     },
 
     apollo: {
-      module() {
-        return {
-          query: MODULE_DETAILS_QUERY,
-          variables: {
-            slug: store.state.moduleSlug
-          },
-          update(data) {
-            const cleanedData = this.$getRidOfEdges(data);
-            return cleanedData.module || {};
-          }
+      module: {
+        query: MODULE_DETAILS_QUERY,
+        variables: {
+          slug: store.state.moduleSlug
+        },
+        update(data) {
+          const cleanedData = this.$getRidOfEdges(data);
+          return cleanedData.module || {};
         }
+      },
+      assignments: {
+        query: ASSIGNMENTS_QUERY
       }
     },
 
     data() {
       return {
-        module: {
-          objectiveGroups: {
-            edges: {}
-          },
-          chapters: {
-            edges: {}
-          }
-        }
+        module: {},
+        assignments: []
       }
     }
   }