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

76 lines
1.4 KiB
Vue

<template>
<div class="objective-group">
<h4>{{ group.displayTitle }}</h4>
<ul class="objective-group__objective-list">
<objective
:key="objective.id"
:objective="objective"
:school-class="currentFilter"
class="objective-group__objective"
v-for="objective in group.objectives"/>
</ul>
<add-content-button
:parent="group"
v-if="editModule"/>
</div>
</template>
<script>
import Objective from '@/components/objective-groups/Objective';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
import AddContentButton from '@/components/AddContentButton';
import {mapGetters} from 'vuex';
export default {
props: {
group: {
required: true,
type: Object
}
},
components: {
AddContentButton,
Objective
},
apollo: {
me: {
query: ME_QUERY,
},
},
computed: {
...mapGetters(['editModule']),
canManageContent() {
return this.me.permissions.includes('users.can_manage_school_class_content');
},
currentFilter() {
return this.me.selectedClass;
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.objective-group {
position: relative;
margin-top: $large-spacing;
&__actions {
position: absolute;
left: -70px;
top: -4px;
display: grid;
}
}
</style>