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

Merge branch 'feature/objectives-created-by-user'

This commit is contained in:
Ramon Wenger 2018-11-21 15:19:44 +01:00
parent 35f29cb00f 4bf3f51644
commit bcb3e5e719
22 changed files with 578 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/App.vue
View File

@ -14,6 +14,8 @@
import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
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',
@ -26,7 +28,9 @@
NewContentBlockWizard,
EditContentBlockWizard,
NewRoomEntryWizard,
EditRoomEntryWizard
EditRoomEntryWizard,
NewObjectiveGroupWizard,
EditObjectiveGroupWizard
},
computed: {

60
client/src/components/AddObjectiveGroupButton.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="add-objective-group-button" @click="addObjectiveGroup()">
<add-icon class="add-objective-group-button__icon"></add-icon>
<div class="add-objective-group-button__text">Zusätzlich Lernziele für «{{typeDescription}}» erfassen</div>
</div>
</template>
<script>
import AddIcon from '@/components/icons/AddIcon';
export default {
props: ['type', 'module'],
components: {
AddIcon
},
computed: {
typeDescription() {
if (this.type === 'society') {
return 'Gesellschaft'
}
return 'Sprache & Kommunikation';
}
},
methods: {
addObjectiveGroup() {
this.$store.dispatch('addObjectiveGroup', {
module: this.module,
type: this.type
});
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.add-objective-group-button {
display: grid;
grid-template-columns: 45px auto;
align-items: center;
margin-top: -20px;
margin-bottom: 35px;
cursor: pointer;
&__icon {
width: 25px;
height: 25px;
fill: $color-grey;
}
&__text {
color: $color-grey;
font-family: $sans-serif-font-family;
}
}
</style>

15
client/src/components/content-block-form/ContentsForm.vue
View File

@ -14,7 +14,6 @@
@input="setContentBlockType"
class="contents-form__task"
></checkbox>
</template>
<add-content-element class="contents-form__add"
@ -44,9 +43,9 @@
v-on:assignment-change-assignment="changeAssignmentAssignment"
>
</component>
<a class="contents-form__remove" v-on:click="removeElement(index)">
<a class="contents-form__remove icon-button" @click="removeElement(index)">
<trash-icon v-if="type(element) !== 'content-block-element-chooser-widget'"
class="contents-form__trash-icon"></trash-icon>
class="contents-form__trash-icon icon-button__icon"></trash-icon>
</a>
<add-content-element class="contents-form__add"
@ -267,19 +266,9 @@
}
&__remove {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
&__trash-icon {
width: 25px;
height: 25px;
fill: $color-grey;
cursor: pointer;
justify-self: center;
}
&__chooser {

17
client/src/components/modules/Module.vue
View File

@ -10,29 +10,36 @@
<h3 id="objectives">Lernziele</h3>
<objective-groups :groups="languageCommunicationObjectiveGroups"></objective-groups>
<add-objective-group-button type="languageCommunication" :module="module.id"></add-objective-group-button>
<objective-groups :groups="societyObjectiveGroups"></objective-groups>
<add-objective-group-button type="society" :module="module.id"></add-objective-group-button>
<chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
<h3 id="objectives-confirm">Alles klar?</h3>
<objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="languageCommunicationObjectiveGroups" :control="true"></objective-groups>
<objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="societyObjectiveGroups" :control="true"></objective-groups>
<objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="languageCommunicationObjectiveGroups"
:control="true"></objective-groups>
<objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="societyObjectiveGroups"
:control="true"></objective-groups>
</div>
</template>
<script>
import ObjectiveGroups from '@/components/modules/ObjectiveGroups.vue';
import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl.vue';
import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl.vue';
import AddObjectiveGroupButton from '@/components/AddObjectiveGroupButton';
import Chapter from '@/components/Chapter.vue';
import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
import OBJECTIVE_QUERY from '@/graphql/gql/objectiveQuery.gql';
const withoutOwnerFirst = (a, b) => a.owner ? 1 : 0;
import {withoutOwnerFirst} from '@/helpers/sorting';
export default {
components: {
ObjectiveGroups,
ObjectiveGroupControl,
AddObjectiveGroupButton,
Chapter
},

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>

91
client/src/components/objective-groups/NewObjectiveGroupWizard.vue Normal file
View File

@ -0,0 +1,91 @@
<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 NEW_OBJECTIVE_GROUP_MUTATION from '@/graphql/gql/mutations/addObjectiveGroup.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
export default {
components: {
AddContentElement,
Modal,
ObjectiveGroupForm
},
computed: {
title() {
if (this.$store.state.objectiveGroupType === 'society') {
return 'Gesellschaft';
}
return 'Sprache & Kommunikation';
}
},
methods: {
saveObjectiveGroup(objectives) {
const objectiveGroup = {
title: this.$store.state.objectiveGroupType,
module: this.$store.state.parentModule,
objectives,
};
this.$apollo.mutate({
mutation: NEW_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');
},
},
data() {
return {
objectives: [
{},
]
}
}
}
</script>
<style scoped lang="scss">
</style>

41
client/src/components/objective-groups/ObjectiveForm.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="objective-form">
<modal-input class="objective-form__input"
placeholder="Lernziel erfassen..."
:value="objective.text"
@input="$emit('input', $event)"
></modal-input>
<a class="icon-button" @click="$emit('delete')">
<trash-icon class="icon-button__icon"></trash-icon>
</a>
</div>
</template>
<script>
import TrashIcon from '@/components/icons/TrashIcon';
import ModalInput from '@/components/ModalInput';
export default {
props: ['objective'],
components: {
ModalInput,
TrashIcon
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.objective-form {
display: grid;
grid-template-columns: 1fr 50px;
margin-bottom: 10px;
&__input {
width: $modal-input-width;
}
}
</style>

14
client/src/components/modules/ObjectiveGroup.vue → 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>

0
client/src/components/modules/ObjectiveGroupControl.vue → client/src/components/objective-groups/ObjectiveGroupControl.vue
View File

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>

7
client/src/components/modules/ObjectiveGroups.vue → client/src/components/objective-groups/ObjectiveGroups.vue
View File

@ -15,9 +15,10 @@
</template>
<script>
import ObjectiveGroup from '@/components/modules/ObjectiveGroup';
import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl';
import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup';
import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl';
import {meQuery} from '@/graphql/queries';
import {withoutOwnerFirst} from '@/helpers/sorting';
export default {
props: {
@ -55,7 +56,7 @@
return this.groups;
} else {
// todo: maybe this can be done a bit more elegantly
const groups = [...this.groups];
const groups = [...this.groups].sort(withoutOwnerFirst);
const objectives = groups.map(g => g.objectives).flat(); // get all objectives in one array
const firstGroup = Object.assign({}, groups.shift(), {objectives});

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/addObjectiveGroup.gql Normal file
View File

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

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
}
}
}
}
}

1
client/src/helpers/sorting.js Normal file
View File

@ -0,0 +1 @@
export const withoutOwnerFirst = (a, b) => a.owner ? 1 : -1;

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

@ -14,7 +14,10 @@ export default new Vuex.Store({
filterForSchoolClass: '',
currentContentBlock: '',
currentRoomEntry: '',
parentRoom: null
parentRoom: null,
parentModule: '',
objectiveGroupType: '',
currentObjectiveGroup: ''
},
getters: {},
@ -23,9 +26,19 @@ export default new Vuex.Store({
setSpecialContainerClass({commit}, payload) {
commit('setSpecialContainerClass', payload);
},
hideModal({commit}) {
hideModal({commit, dispatch}) {
document.body.classList.remove('no-scroll'); // won't get at the body any other way
commit('setModal', false);
dispatch('resetModalState');
},
resetModalState({commit}) {
commit('setCurrentRoomEntry', '');
commit('setCurrentContentBlock', '');
commit('setContentBlockPosition', {});
commit('setParentRoom', null);
commit('setParentModule', '');
commit('setObjectiveGroupType', '');
commit('setCurrentObjectiveGroup', '');
},
resetContentBlockPosition({commit}) {
commit('setContentBlockPosition', {});
@ -49,6 +62,15 @@ export default new Vuex.Store({
commit('setCurrentRoomEntry', payload);
dispatch('showModal', 'edit-room-entry-wizard');
},
addObjectiveGroup({commit, dispatch}, {module, type}) {
commit('setParentModule', module);
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);
@ -85,6 +107,15 @@ export default new Vuex.Store({
},
setCurrentRoomEntry(state, payload) {
state.currentRoomEntry = payload;
},
setParentModule(state, payload) {
state.parentModule = payload;
},
setObjectiveGroupType(state, payload) {
state.objectiveGroupType = payload;
},
setCurrentObjectiveGroup(state, payload) {
state.currentObjectiveGroup = payload;
}
}
})

16
client/src/styles/_buttons.scss
View File

@ -24,3 +24,19 @@
background-color: $color-lightgrey;
}
}
.icon-button {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
&__icon {
width: 25px;
height: 25px;
fill: $color-grey;
cursor: pointer;
justify-self: center;
}
}

18
server/objectives/inputs.py Normal file
View File

@ -0,0 +1,18 @@
import graphene
from graphene import InputObjectType
class ObjectiveInput(InputObjectType):
text = graphene.String(required=True)
id = graphene.ID()
class AddObjectiveGroupArgument(InputObjectType):
title = graphene.String(required=True)
module = graphene.ID(required=True)
objectives = graphene.List(ObjectiveInput)
class UpdateObjectiveGroupArgument(InputObjectType):
id = graphene.ID(required=True)
objectives = graphene.List(ObjectiveInput)

58
server/objectives/mutations.py
View File

@ -1,8 +1,12 @@
import graphene
from graphene import relay, InputObjectType
from graphql_relay import from_global_id
from api.utils import get_object
from books.models import Module
from books.schema.inputs import UserGroupBlockVisibility
from core.utils import set_visible_for, set_hidden_for
from objectives.inputs import AddObjectiveGroupArgument, UpdateObjectiveGroupArgument
from objectives.models import ObjectiveProgressStatus, Objective, ObjectiveGroup
from objectives.schema import ObjectiveNode, ObjectiveGroupNode
@ -52,6 +56,58 @@ class UpdateObjectiveGroupVisibility(relay.ClientIDMutation):
objective_group.save()
return cls(objective_group=objective_group)
class AddObjectiveGroup(relay.ClientIDMutation):
class Input:
objective_group = graphene.Argument(AddObjectiveGroupArgument)
objective_group = graphene.Field(ObjectiveGroupNode)
@classmethod
def mutate_and_get_payload(cls, root, info, **kwargs):
objective_group_data = kwargs.get('objective_group')
title = objective_group_data.get('title')
if title != 'society':
title = 'language_communication'
module_id = objective_group_data.get('module')
module = get_object(Module, module_id)
owner = info.context.user
new_objective_group = ObjectiveGroup.objects.create(title=title, module=module, owner=owner)
objectives = objective_group_data.get('objectives')
for objective in objectives:
Objective.objects.create(text=objective.get('text'), group=new_objective_group)
return cls(objective_group=new_objective_group)
class UpdateObjectiveGroup(relay.ClientIDMutation):
class Input:
objective_group = graphene.Argument(UpdateObjectiveGroupArgument)
objective_group = graphene.Field(ObjectiveGroupNode)
@classmethod
def mutate_and_get_payload(cls, root, info, **kwargs):
objective_group_data = kwargs.get('objective_group')
id = objective_group_data.get('id')
objective_group = get_object(ObjectiveGroup, id)
objectives = objective_group_data.get('objectives')
existing_objective_ids = list(objective_group.objectives.values_list('id', flat=True))
for objective in objectives:
if objective.get('id') is not None:
objective_id = objective.get('id')
updated_objective = get_object(Objective, objective_id)
updated_objective.text = objective.get('text')
updated_objective.save()
existing_objective_ids.remove(int(from_global_id(objective_id)[1]))
else:
Objective.objects.create(text=objective.get('text'), group=objective_group)
# remove existing items that are not in payload
for objective_id in existing_objective_ids:
objective = Objective.objects.get(pk=objective_id)
objective.delete()
return cls(objective_group=objective_group)
@ -59,3 +115,5 @@ class UpdateObjectiveGroupVisibility(relay.ClientIDMutation):
class ObjectiveMutations:
update_objective_progress = UpdateObjectiveProgress.Field()
update_objective_group_visibility = UpdateObjectiveGroupVisibility.Field()
add_objective_group = AddObjectiveGroup.Field()
update_objective_group = UpdateObjectiveGroup.Field()

4
server/objectives/schema.py
View File

@ -9,6 +9,7 @@ from objectives.models import ObjectiveGroup, Objective, ObjectiveProgressStatus
class ObjectiveGroupNode(DjangoObjectType):
pk = graphene.Int()
display_title = graphene.String()
mine = graphene.Boolean()
class Meta:
model = ObjectiveGroup
@ -21,6 +22,9 @@ class ObjectiveGroupNode(DjangoObjectType):
def resolve_display_title(self, *args, **kwargs):
return self.get_title_display()
def resolve_mine(self, info, **kwargs):
return self.owner is not None and self.owner.pk == info.context.user.pk
class ObjectiveNode(DjangoObjectType):