skillbox/client/src/components/objective-groups/ObjectiveGroups.vue

69 lines
1.5 KiB
Vue

<template>
<div class="objective-groups">
<objective-group
:key="group.id"
:group="group"
v-for="group in objectiveGroups"/>
</div>
</template>
<script>
import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup';
import {meQuery} from '@/graphql/queries';
export default {
props: {
groups: Array,
control: {
type: Boolean,
default: false
}
},
components: {
ObjectiveGroup
},
apollo: {
me: meQuery
},
data() {
return {
me: {
permissions: []
}
};
},
computed: {
objectiveGroups() {
/*
a teacher should get multiple blocks, so he can manage the visibility for his students.
students don't care about the blocks, so they should get just one block that contains all the objectives
*/
if (this.me.permissions.includes('users.can_manage_school_class_content') || !this.groups.length) {
return this.groups;
} else {
// todo: maybe this can be done a bit more elegantly
let groups = this.groups;
const objectives = groups.map(g => g.objectives).flat(); // get all objectives in one array
const firstGroup = Object.assign({}, groups.shift(), {objectives});
return [firstGroup];
}
}
}
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.objective-groups {
margin-bottom: $large-spacing;
display: flex;
flex-direction: column;
}
</style>