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
|
<template>
<div class="cw-blockadder-item-wrapper">
<span class="cw-sortable-handle cw-sortable-handle-blockadder"></span>
<button class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]" @click.prevent="addBlock">
<header class="cw-blockadder-item-title">
{{ title }}
</header>
<p class="cw-blockadder-item-description">
{{ description }}
</p>
</button>
<button
class="cw-blockadder-item-fav"
:title="favButtonTitle"
@click="toggleFavItem()"
>
<studip-icon :shape="blockTypeIsFav ? 'star' : 'star-empty'" />
</button>
</div>
</template>
<script>
import containerMixin from '@/vue/mixins/courseware/container.js';
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'courseware-blockadder-item',
mixins: [containerMixin],
components: {},
props: {
title: String,
description: String,
type: String,
},
data() {
return {
showInfo: false,
addInProgress: false,
};
},
computed: {
...mapGetters({
blockAdder: 'blockAdder',
blockById: 'courseware-blocks/byId',
containerById: 'courseware-containers/byId',
favoriteBlockTypes: 'favoriteBlockTypes',
lastCreatedBlock: 'courseware-blocks/lastCreated',
}),
blockTypeIsFav() {
return this.favoriteBlockTypes.some((type) => type.type === this.type);
},
favButtonTitle() {
if (this.blockTypeIsFav) {
return this.$gettext(
'%{ blockName } Block aus den Favoriten entfernen',
{ blockName: this.title }
);
}
return this.$gettext(
'%{ blockName } Block zu Favoriten hinzufügen',
{ blockName: this.title }
);
}
},
methods: {
...mapActions({
companionInfo: 'companionInfo',
companionSuccess: 'companionSuccess',
companionWarning: 'companionWarning',
createBlock: 'createBlockInContainer',
lockObject: 'lockObject',
unlockObject: 'unlockObject',
loadBlock: 'courseware-blocks/loadById',
updateContainer: 'updateContainer',
removeFavoriteBlockType: 'removeFavoriteBlockType',
addFavoriteBlockType: 'addFavoriteBlockType',
setAdderStorage: 'coursewareBlockAdder',
}),
async addBlock() {
if (!this.addInProgress) {
this.addInProgress = true;
this.setAdderStorage({
container: this.blockAdder.container,
section: this.blockAdder.section,
type: this.type ,
position: false
});
await this.addNewBlock();
this.addInProgress = false;
}
},
toggleFavItem() {
if (this.blockTypeIsFav) {
this.removeFavoriteBlockType(this.type);
} else {
this.addFavoriteBlockType(this.type);
}
},
},
};
</script>
|
