Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 1x 1x | <script setup>
import { ref, watch, onMounted, inject } from 'vue';
const props = defineProps({
goal: {
type: Object,
default: null,
},
});
// Load Store and Router
const store = inject('store');
const emit = defineEmits([
'change-GoalName',
'change-GoalDescription',
]);
// Define constants that will be referenced
const goalname = ref('')
const goaldescription = ref('')
onMounted(() => {
goalname.value = props.goal.name
goaldescription.value = props.goal.description
})
// Watch changes on goalname
watch(goalname, (newGoalName) => {
store.state.learningpath.name = newGoalName;
emit('change-GoalName', newGoalName);
});
// Watch changes on goaldescription
watch(goaldescription, (newGoalDescription) => {
store.state.learningpath.description = newGoalDescription;
emit('change-GoalDescription', newGoalDescription);
});
// Watch changes on goaldescription
watch(() => store.state.learningpath, async () => {
goalname.value = store.state.learningpath.name
goaldescription.value = store.state.learningpath.description
}, { deep: true } );
</script>
<template>
<div>
<div v-if="store.state.view!='teacher'">
<h4 class="font-weight-bold">
{{ store.state.strings.fromlearningtitel }}
</h4>
<div>
<input
id="goalnameplaceholder"
v-model="goalname"
v-autowidth="{ maxWidth: '960px', minWidth: '20px', comfortZone: 0 }"
class="form-control fancy-input"
:placeholder="store.state.strings.goalnameplaceholder"
type="text"
autofocus
>
</div>
<h4 class="font-weight-bold">
{{ store.state.strings.fromlearningdescription }}
</h4>
<div>
<textarea
id="goalsubjectplaceholder"
v-model="goaldescription"
v-autowidth="{ maxWidth: '960px', minWidth: '40%', comfortZone: 0 }"
class="form-control fancy-input"
:placeholder="store.state.strings.goalsubjectplaceholder"
/>
</div>
</div>
<div v-else>
<div class="card border-primary mb-3">
<div class="card-header bg-primary text-white">
<h5 class="card-title mb-0">
{{ store.state.strings.fromlearningtitel }}
</h5>
</div>
<div class="card-body">
<p class="card-text">
{{ goalname ? goalname : 'No name provided.' }}
</p>
</div>
</div>
<div class="card border-secondary">
<div class="card-header bg-secondary text-white">
<h5 class="card-title mb-0">
{{ store.state.strings.fromlearningdescription }}
</h5>
</div>
<div class="card-body">
<p class="card-text">
{{ goaldescription ? goaldescription : 'No description provided.' }}
</p>
</div>
</div>
</div>
</div>
</template> |