77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<div class="objective-group">
|
|
<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>
|
|
|
|
<ul class="objective-group__objective-list">
|
|
<li class="objective-group__objective" v-for="objective in group.objectives" :key="objective.id">
|
|
{{objective.text}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<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';
|
|
|
|
export default {
|
|
props: {
|
|
group: {
|
|
required: true,
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
components: {
|
|
VisibilityAction,
|
|
EyeIcon,
|
|
PenIcon
|
|
},
|
|
|
|
apollo: {
|
|
me: {
|
|
query: ME_QUERY,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
canManageContent() {
|
|
return this.me.permissions.includes('users.can_manage_school_class_content');
|
|
}
|
|
},
|
|
|
|
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>
|