From ea9fa06634074cd83767d09b3e56ea7905ab6c50 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Oct 2018 10:08:59 +0200 Subject: [PATCH] Add assignment queries and mutation to client --- client/package-lock.json | 5 ++ client/package.json | 1 + .../components/content-blocks/Assignment.vue | 54 ++++++++++++++++++- client/src/graphql/client.js | 3 +- client/src/graphql/gql/assignmentQuery.gql | 6 +++ client/src/graphql/gql/assignmentsQuery.gql | 10 ++++ .../graphql/gql/fragments/assignmentParts.gql | 10 ++++ .../mutations/updateAssignmentMutation.gql | 8 +++ client/src/main.js | 22 ++++---- client/src/pages/module.vue | 32 +++++------ 10 files changed, 119 insertions(+), 32 deletions(-) create mode 100644 client/src/graphql/gql/assignmentQuery.gql create mode 100644 client/src/graphql/gql/assignmentsQuery.gql create mode 100644 client/src/graphql/gql/fragments/assignmentParts.gql create mode 100644 client/src/graphql/gql/mutations/updateAssignmentMutation.gql diff --git a/client/package-lock.json b/client/package-lock.json index f91a8094..ea950d55 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 4dfdc144..b70ba648 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/content-blocks/Assignment.vue b/client/src/components/content-blocks/Assignment.vue index 6204a261..7e807a33 100644 --- a/client/src/components/content-blocks/Assignment.vue +++ b/client/src/components/content-blocks/Assignment.vue @@ -1,16 +1,66 @@ diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js index 27c3508b..cfe714df 100644 --- a/client/src/graphql/client.js +++ b/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}) } } }); diff --git a/client/src/graphql/gql/assignmentQuery.gql b/client/src/graphql/gql/assignmentQuery.gql new file mode 100644 index 00000000..c16c2b01 --- /dev/null +++ b/client/src/graphql/gql/assignmentQuery.gql @@ -0,0 +1,6 @@ +#import "./fragments/assignmentParts.gql" +query AssignmentQuery($id: ID!) { + assignment(id: $id) { + ...AssignmentParts + } +} diff --git a/client/src/graphql/gql/assignmentsQuery.gql b/client/src/graphql/gql/assignmentsQuery.gql new file mode 100644 index 00000000..73f6119c --- /dev/null +++ b/client/src/graphql/gql/assignmentsQuery.gql @@ -0,0 +1,10 @@ +#import "./fragments/assignmentParts.gql" +query AssignmentsQuery { + assignments { + edges { + node { + ...AssignmentParts + } + } + } +} diff --git a/client/src/graphql/gql/fragments/assignmentParts.gql b/client/src/graphql/gql/fragments/assignmentParts.gql new file mode 100644 index 00000000..de821f19 --- /dev/null +++ b/client/src/graphql/gql/fragments/assignmentParts.gql @@ -0,0 +1,10 @@ +fragment AssignmentParts on AssignmentNode { + id + title + assignment + submission { + id + text + final + } +} diff --git a/client/src/graphql/gql/mutations/updateAssignmentMutation.gql b/client/src/graphql/gql/mutations/updateAssignmentMutation.gql new file mode 100644 index 00000000..c580aed7 --- /dev/null +++ b/client/src/graphql/gql/mutations/updateAssignmentMutation.gql @@ -0,0 +1,8 @@ +#import "../fragments/assignmentParts.gql" +mutation UpdateAssignment($input: UpdateAssignmentInput!) { + updateAssignment(input: $input){ + updatedAssignment { + ...AssignmentParts + } + } +} diff --git a/client/src/main.js b/client/src/main.js index f306c74b..fce9ec13 100644 --- a/client/src/main.js +++ b/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) -}) +}); diff --git a/client/src/pages/module.vue b/client/src/pages/module.vue index bbac8b61..7ee4d9a1 100644 --- a/client/src/pages/module.vue +++ b/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: [] } } }