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

81 lines
1.7 KiB
Vue

<template>
<div class="objective-group">
<h4>{{group.displayTitle}}</h4>
<ul class="objective-group__objective-list">
<objective class="objective-group__objective" v-for="objective in group.objectives" :key="objective.id"
:objective="objective" :school-class="currentFilter">
</objective>
</ul>
<add-content-button :parent="group" v-if="editModule">
</add-content-button>
</div>
</template>
<script>
import VisibilityAction from '@/components/visibility/VisibilityAction';
import Objective from '@/components/objective-groups/Objective';
import EyeIcon from '@/components/icons/EyeIcon';
import PenIcon from '@/components/icons/PenIcon';
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,
VisibilityAction,
Objective,
EyeIcon,
PenIcon
},
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;
},
},
methods: {
editObjectiveGroup() {
this.$store.dispatch('editObjectiveGroup', this.group.id);
}
}
}
</script>
<style scoped lang="scss">
.objective-group {
position: relative;
&__actions {
position: absolute;
left: -70px;
top: -4px;
display: grid;
}
}
</style>