74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div class="objective-group objective-group-control">
|
|
<h4>{{group.displayTitle}}</h4>
|
|
|
|
<ul class="objective-group__objective-list objective-group__objective-list--no-list">
|
|
<li v-if="objectives" class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
|
|
<checkbox :checked="objective.done"
|
|
:item="objective"
|
|
:label="objective.text"
|
|
@input="updateObjectiveProgress"
|
|
></checkbox>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Checkbox from '@/components/Checkbox';
|
|
|
|
export default {
|
|
name: 'objective-group-control',
|
|
components: {Checkbox},
|
|
|
|
props: {
|
|
group: {
|
|
required: true,
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateObjectiveProgress(checked, objective) {
|
|
this.$emit('updateObjectiveProgress', checked, objective.id);
|
|
},
|
|
objectiveIsDone(objective) {
|
|
return objective.objectiveProgress.length > 0 && objective.objectiveProgress[0].done
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
objectives() {
|
|
return this.group.objectives.map(objective => {
|
|
return Object.assign({}, objective, { done: this.objectiveIsDone(objective) })
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_functions.scss";
|
|
|
|
.objective-group__objective-list /deep/ {
|
|
.base-input-container {
|
|
|
|
position: relative;
|
|
|
|
&__checkbox {
|
|
background-color: white;
|
|
position: absolute;
|
|
top: 5px;
|
|
}
|
|
|
|
&__label {
|
|
font-family: $serif-font-family;
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|