76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<div class="objective-groups">
|
|
<template v-for="group in filteredObjectiveGroups">
|
|
<objective-group
|
|
:group="group"
|
|
v-if="group.objectives.length"
|
|
:key="group.id"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup.vue';
|
|
import { meQuery } from '@/graphql/queries';
|
|
|
|
export default {
|
|
props: {
|
|
groups: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
|
|
components: {
|
|
ObjectiveGroup,
|
|
},
|
|
|
|
apollo: {
|
|
me: meQuery,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
me: {},
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
filteredObjectiveGroups() {
|
|
return this.objectiveGroups.filter((g) => !g.hidden);
|
|
},
|
|
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.isTeacher || !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[0], { objectives });
|
|
|
|
return [firstGroup];
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.objective-groups {
|
|
margin-bottom: $large-spacing;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|