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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<template>
<div class="cw-block-actions">
<studip-action-menu
:items="menuItems"
@editBlock="editBlock"
@setVisibility="setVisibility"
@showInfo="showInfo"
@deleteBlock="deleteBlock"
/>
</div>
</template>
<script>
import StudipActionMenu from './../StudipActionMenu.vue';
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'courseware-block-actions',
components: {
StudipActionMenu,
},
props: {
canEdit: Boolean,
deleteOnly: {
type: Boolean,
default: false
},
block: Object,
},
data() {
return {
menuItems: [],
};
},
computed: {
...mapGetters({
userId: 'userId',
}),
blocked() {
return this.block?.relationships['edit-blocker'].data !== null;
},
blockerId() {
return this.blocked ? this.block?.relationships['edit-blocker'].data?.id : null;
},
},
mounted() {
if (this.canEdit) {
if (!this.deleteOnly) {
this.menuItems.push({
id: 1,
label: this.$gettext('Block bearbeiten'),
icon: 'edit',
emit: 'editBlock',
});
this.menuItems.push({
id: 2,
label: this.block.attributes.visible
? this.$gettext('unsichtbar setzen')
: this.$gettext('sichtbar setzen'),
icon: this.block.attributes.visible ? 'visibility-visible' : 'visibility-invisible', // do we change the icons ?
emit: 'setVisibility',
});
this.menuItems.push({
id: 7,
label: this.$gettext('Informationen zum Block'),
icon: 'info',
emit: 'showInfo',
});
}
this.menuItems.push({
id: 9,
label: this.$gettext('Block löschen'),
icon: 'trash',
emit: 'deleteBlock',
});
}
this.menuItems.sort((a, b) => {
return a.id > b.id ? 1 : b.id > a.id ? -1 : 0;
});
},
methods: {
...mapActions({
updateBlock: 'updateBlockInContainer',
lockObject: 'lockObject',
unlockObject: 'unlockObject',
}),
menuAction(action) {
this[action]();
},
editBlock() {
this.$emit('editBlock');
},
showInfo() {
this.$emit('showInfo');
},
showExportOptions() {
this.$emit('showExportOptions');
},
async setVisibility() {
if (!this.blocked) {
await this.lockObject({ id: this.block.id, type: 'courseware-blocks' });
} else {
if (this.blockerId !== this.userId) {
return false;
}
}
let attributes = {};
attributes.visible = !this.block.attributes.visible;
await this.updateBlock({
attributes: attributes,
blockId: this.block.id,
containerId: this.block.relationships.container.data.id,
});
await this.unlockObject({ id: this.block.id, type: 'courseware-blocks' });
},
copyToClipboard() {
// use JSONAPI to copy to clipboard
},
deleteBlock() {
this.$emit('deleteBlock');
},
},
};
</script>
|
