66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<div class="add-objective-group-button" @click="addObjectiveGroup()">
|
|
<add-icon class="add-objective-group-button__icon"></add-icon>
|
|
<div class="add-objective-group-button__text">Zusätzlich Lernziele für «{{typeDescription}}» erfassen</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AddIcon from '@/components/icons/AddIcon';
|
|
|
|
export default {
|
|
props: ['type', 'module'],
|
|
|
|
components: {
|
|
AddIcon
|
|
},
|
|
|
|
computed: {
|
|
typeDescription() {
|
|
if (this.type === 'society') {
|
|
return 'Gesellschaft'
|
|
}
|
|
return 'Sprache & Kommunikation';
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
addObjectiveGroup() {
|
|
this.$store.dispatch('addObjectiveGroup', {
|
|
module: this.module,
|
|
type: this.type
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.add-objective-group-button {
|
|
display: none;
|
|
grid-template-columns: 45px auto;
|
|
align-items: center;
|
|
margin-top: -20px;
|
|
margin-bottom: 35px;
|
|
cursor: pointer;
|
|
|
|
@include desktop {
|
|
display: grid;
|
|
}
|
|
|
|
&__icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
fill: $color-grey;
|
|
}
|
|
|
|
&__text {
|
|
color: $color-grey;
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
}
|
|
</style>
|