Newer
Older
<template>
<div class="cw-block cw-block-biography cw-block-biography-goals">
<courseware-default-block
:block="block"
:canEdit="canEdit"
:isTeacher="isTeacher"
:preview="true"
@closeEdit="initCurrentData"
@showEdit="setShowEdit"
@storeEdit="storeBlock"
>
<template #content>
<div class="cw-block-biography-content" >
<div class="cw-block-biography-type" :class="'cw-block-biography-goals-type-' + currentData.type">
<h2>{{ goalTypeName }}</h2>
</div>
<div class="cw-block-biography-details formatted-content" v-html="currentData.description">
</div>
</div>
</template>
<template v-if="canEdit" #edit>
<form class="default">
<label for="type">
<span><translate>Ziel</translate></span>
<select name="type" class="type" v-model="currentData.type">
<option value="personal"><translate>Persönliches Ziel</translate></option>
<option value="school"><translate>Schulisches Ziel</translate></option>
<option value="academic"><translate>Akademisches Ziel</translate></option>
<option value="professional"><translate>Berufliches Ziel</translate></option>
</select>
</label>
<div class="label-text">
<translate>Beschreibung</translate>
</div>
<studip-wysiwyg v-model="currentData.description"></studip-wysiwyg>
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
</form>
</template>
<template #info><translate>Informationen zum Ziele-Block</translate></template>
</courseware-default-block>
</div>
</template>
<script>
import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
import { mapActions } from 'vuex';
import { blockMixin } from './block-mixin.js';
import StudipWysiwyg from '../StudipWysiwyg.vue';
export default {
name: 'courseware-biography-goals-block',
mixins: [blockMixin],
components: {
CoursewareDefaultBlock,
StudipWysiwyg,
},
props: {
block: Object,
canEdit: Boolean,
isTeacher: Boolean,
},
data() {
return {
showEdit: false,
currentData: {
type: '',
description: ''
},
}
},
computed: {
type() {
return this.block?.attributes?.payload?.type;
},
description() {
return this.block?.attributes?.payload?.description;
},
goalTypeName() {
switch (this.currentData.type) {
case 'personal':
return this.$gettext('Persönliches Ziel');
case 'school':
return this.$gettext('Schulisches Ziel');
case 'academic':
return this.$gettext('Akademisches Ziel');
case 'professional':
return this.$gettext('Berufliches Ziel');
}
throw new Error('Undefined data type ' + this.currentData.type);
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
},
},
mounted() {
this.initCurrentData();
},
methods: {
...mapActions({
updateBlock: 'updateBlockInContainer',
}),
initCurrentData() {
this.currentData = {
type: this.type,
description: this.description
};
},
setShowEdit(state) {
this.showEdit = state;
},
storeBlock() {
let attributes = {
payload: {
type: this.currentData.type,
description: this.currentData.description
}
};
this.updateBlock({
attributes: attributes,
blockId: this.block.id,
containerId: this.block.relationships.container.data.id,
});
},
},
watch: {
type() {
if (!this.showEdit) {
this.currentData.type = this.type;
}
},
description() {
if (!this.showEdit) {
this.currentData.description = this.description;
}
},
}
};
</script>