ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add edit objective form wizard to client

This commit is contained in:
Ramon Wenger 2018-11-21 14:56:43 +01:00
parent a89c0d006b
commit 9a6b9bf3e3
11 changed files with 245 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/App.vue
View File

@ -15,6 +15,7 @@
import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
export default {
name: 'App',
@ -28,7 +29,8 @@
EditContentBlockWizard,
NewRoomEntryWizard,
EditRoomEntryWizard,
NewObjectiveGroupWizard
NewObjectiveGroupWizard,
EditObjectiveGroupWizard
},
computed: {

107
client/src/components/objective-groups/EditObjectiveGroupWizard.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<objective-group-form
:title="title"
:objectives="objectives"
@save="saveObjectiveGroup"
@hide="hideModal"
></objective-group-form>
</template>
<script>
import Modal from '@/components/Modal';
import ObjectiveGroupForm from '@/components/objective-groups/ObjectiveGroupForm';
import AddContentElement from '@/components/AddContentElement';
import UPDATE_OBJECTIVE_GROUP_MUTATION from '@/graphql/gql/mutations/updateObjectiveGroup.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
import OBJECTIVE_GROUP_QUERY from '@/graphql/gql/objectiveGroupQuery.gql';
export default {
components: {
AddContentElement,
Modal,
ObjectiveGroupForm
},
computed: {
title() {
if (this.$store.state.objectiveGroupType === 'society') {
return 'Gesellschaft';
}
return 'Sprache & Kommunikation';
},
objectives() {
return this.objectiveGroup.objectives.edges.map(edge => edge.node)
}
},
methods: {
saveObjectiveGroup(objectives) {
const objectiveGroup = {
id: this.$store.state.currentObjectiveGroup,
objectives,
};
this.$apollo.mutate({
mutation: UPDATE_OBJECTIVE_GROUP_MUTATION,
variables: {
input: {
objectiveGroup
}
},
// todo: make update work
// update: (store, {data: {addObjectiveGroup: {objectiveGroup}}}) => {
// const query = MODULE_DETAILS_QUERY;
// const variables = {slug: this.$route.params.slug};
// const data = store.readQuery({query, variables});
// debugger;
// if (data.module && data.module.objectiveGroups) {
// data.module.objectiveGroups.edges.push({
// node: objectiveGroup,
// __typename: 'ObjectiveGroupNode'
// });
// store.writeQuery({query, variables, data});
// }
//
// }
refetchQueries: [{
query: MODULE_DETAILS_QUERY,
variables: {
slug: this.$route.params.slug
}
}]
}).then(() => {
this.hideModal();
});
},
hideModal() {
this.$store.dispatch('hideModal');
},
},
apollo: {
objectiveGroup() {
return {
query: OBJECTIVE_GROUP_QUERY,
variables: {
id: this.$store.state.currentObjectiveGroup
}
}
}
},
data() {
return {
objectiveGroup: {
objectives: {
edges: []
}
}
}
}
}
</script>
<style scoped lang="scss">
</style>

47
client/src/components/objective-groups/NewObjectiveGroupWizard.vue
View File

@ -1,27 +1,15 @@
<template>
<modal class="new-objective-group-wizard">
<template slot="header">
<h4 class="new-objective-group-wizard__heading">Lernziele: {{title}}</h4>
</template>
<objective-form
:objective="objective"
v-for="(objective, index) in objectives"
@input="updateObjective($event, index)"
:key="index"></objective-form>
<add-content-element @add-element="addObjective"></add-content-element>
<div slot="footer">
<a class="button button--primary" data-cy="modal-save-button" @click="saveObjectiveGroup">Speichern</a>
<a class="button" @click="hideModal">Abbrechen</a>
</div>
</modal>
<objective-group-form
:title="title"
:objectives="objectives"
@save="saveObjectiveGroup"
@hide="hideModal"
></objective-group-form>
</template>
<script>
import Modal from '@/components/Modal';
import ObjectiveForm from '@/components/objective-groups/ObjectiveForm';
import ObjectiveGroupForm from '@/components/objective-groups/ObjectiveGroupForm';
import AddContentElement from '@/components/AddContentElement';
import NEW_OBJECTIVE_GROUP_MUTATION from '@/graphql/gql/mutations/addObjectiveGroup.gql';
@ -31,7 +19,7 @@
components: {
AddContentElement,
Modal,
ObjectiveForm
ObjectiveGroupForm
},
computed: {
@ -44,18 +32,11 @@
},
methods: {
addObjective() {
this.objectives.push({});
},
updateObjective(text, index) {
this.objectives.splice(index, 1, {text});
},
saveObjectiveGroup() {
console.log('saving');
saveObjectiveGroup(objectives) {
const objectiveGroup = {
title: this.$store.state.objectiveGroupType,
objectives: this.objectives,
module: this.$store.state.parentModule
module: this.$store.state.parentModule,
objectives,
};
this.$apollo.mutate({
mutation: NEW_OBJECTIVE_GROUP_MUTATION,
@ -106,9 +87,5 @@
</script>
<style scoped lang="scss">
.new-objective-group-wizard {
&__heading {
margin-bottom: 0;
}
}
</style>

6
client/src/components/objective-groups/ObjectiveForm.vue
View File

@ -2,10 +2,10 @@
<div class="objective-form">
<modal-input class="objective-form__input"
placeholder="Lernziel erfassen..."
:value="objective.value"
:value="objective.text"
@input="$emit('input', $event)"
></modal-input>
<a class="icon-button">
<a class="icon-button" @click="$emit('delete')">
<trash-icon class="icon-button__icon"></trash-icon>
</a>
</div>
@ -14,7 +14,7 @@
<script>
import TrashIcon from '@/components/icons/TrashIcon';
import ModalInput from "@/components/ModalInput";
import ModalInput from '@/components/ModalInput';
export default {
props: ['objective'],

14
client/src/components/objective-groups/ObjectiveGroup.vue
View File

@ -3,6 +3,10 @@
<div class="objective-group__actions">
<visibility-action :block="group">
</visibility-action>
<a @click="editObjectiveGroup()" v-if="group.mine" class="objective-group__action-button">
<pen-icon class="objective-group__action-icon action-icon"></pen-icon>
</a>
</div>
<h4>{{group.displayTitle}}</h4>
@ -19,6 +23,7 @@
<script>
import VisibilityAction from '@/components/visibility/VisibilityAction';
import EyeIcon from '@/components/icons/EyeIcon';
import PenIcon from '@/components/icons/PenIcon';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
@ -32,7 +37,8 @@
components: {
VisibilityAction,
EyeIcon
EyeIcon,
PenIcon
},
apollo: {
@ -45,6 +51,12 @@
canManageContent() {
return this.me.permissions.includes('users.can_manage_school_class_content');
}
},
methods: {
editObjectiveGroup() {
this.$store.dispatch('editObjectiveGroup', this.group.id);
}
}
}
</script>

64
client/src/components/objective-groups/ObjectiveGroupForm.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<modal class="objective-group-form">
<template slot="header">
<h4 class="objective-group-form__heading">Lernziele: {{title}}</h4>
</template>
<objective-form
:objective="objective"
v-for="(objective, index) in initialObjectives"
@input="updateObjective($event, index)"
@delete="removeObjective(index)"
:key="index"></objective-form>
<add-content-element @add-element="addObjective"></add-content-element>
<div slot="footer">
<a class="button button--primary" data-cy="modal-save-button"
@click="$emit('save', initialObjectives)">Speichern</a>
<a class="button" @click="$emit('hide')">Abbrechen</a>
</div>
</modal>
</template>
<script>
import Modal from '@/components/Modal';
import ObjectiveForm from '@/components/objective-groups/ObjectiveForm';
import AddContentElement from '@/components/AddContentElement';
export default {
props: ['title', 'objectives'],
components: {
AddContentElement,
Modal,
ObjectiveForm
},
methods: {
addObjective() {
this.initialObjectives.push({});
},
updateObjective(text, index) {
this.initialObjectives.splice(index, 1, {text});
},
removeObjective(index) {
this.initialObjectives.splice(index, 1);
}
},
data() {
return {
initialObjectives: this.objectives
}
}
}
</script>
<style scoped lang="scss">
.objective-group-form {
&__heading {
margin-bottom: 0;
}
}
</style>

3
client/src/graphql/client.js
View File

@ -44,7 +44,8 @@ const cache = new InMemoryCache({
contentBlock: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ContentBlockNode', id: args.id}),
chapter: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ChapterNode', id: args.id}),
assignment: (_, args, {getCacheKey}) => getCacheKey({__typename: 'AssignmentNode', id: args.id}),
objective: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveNode', id: args.id})
objective: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveNode', id: args.id}),
objectiveGroup: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveGroupNode', id: args.id})
}
}
});

1
client/src/graphql/gql/fragments/objectiveGroupParts.gql
View File

@ -2,6 +2,7 @@ fragment ObjectiveGroupParts on ObjectiveGroupNode {
id
title
displayTitle
mine
owner {
id
}

16
client/src/graphql/gql/mutations/updateObjectiveGroup.gql Normal file
View File

@ -0,0 +1,16 @@
#import "../fragments/objectiveGroupParts.gql"
mutation UpdateObjectiveGroup($input: UpdateObjectiveGroupInput!) {
updateObjectiveGroup(input: $input) {
objectiveGroup {
...ObjectiveGroupParts
objectives {
edges {
node {
id
text
}
}
}
}
}
}

14
client/src/graphql/gql/objectiveGroupQuery.gql Normal file
View File

@ -0,0 +1,14 @@
#import "./fragments/objectiveGroupParts.gql"
query ObjectiveGroupQuery($id: ID!) {
objectiveGroup(id: $id) {
...ObjectiveGroupParts
objectives {
edges {
node {
id
text
}
}
}
}
}

11
client/src/store/index.js
View File

@ -16,7 +16,8 @@ export default new Vuex.Store({
currentRoomEntry: '',
parentRoom: null,
parentModule: '',
objectiveGroupType: ''
objectiveGroupType: '',
currentObjectiveGroup: ''
},
getters: {},
@ -37,6 +38,7 @@ export default new Vuex.Store({
commit('setParentRoom', null);
commit('setParentModule', '');
commit('setObjectiveGroupType', '');
commit('setCurrentObjectiveGroup', '');
},
resetContentBlockPosition({commit}) {
commit('setContentBlockPosition', {});
@ -65,6 +67,10 @@ export default new Vuex.Store({
commit('setObjectiveGroupType', type);
dispatch('showModal', 'new-objective-group-wizard');
},
editObjectiveGroup({commit, dispatch}, payload) {
commit('setCurrentObjectiveGroup', payload);
dispatch('showModal', 'edit-objective-group-wizard');
},
showModal({commit}, payload) {
document.body.classList.add('no-scroll'); // won't get at the body any other way
commit('setModal', payload);
@ -107,6 +113,9 @@ export default new Vuex.Store({
},
setObjectiveGroupType(state, payload) {
state.objectiveGroupType = payload;
},
setCurrentObjectiveGroup(state, payload) {
state.currentObjectiveGroup = payload;
}
}
})