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
|
<script setup>
import {$gettext} from "../../../../assets/javascripts/lib/gettext";
import StudipDateTime from "../../StudipDateTime.vue";
import UserAvatarDropdown from "@/vue/components/avatar/UserAvatarDropdown.vue";
import {REACTION_ICONS} from "./reactions";
import {userProfileURL} from "../helpers/urls";
import {computed, onMounted} from "vue";
import {useSortable} from "../../../composables/useSortable";
const props = defineProps({
reactions: {
type: Array,
required: true
},
emoji: {
type: String,
default: 'all'
}
});
const computedReactions = computed(() => {
if (props.emoji === 'all') {
return props.reactions;
}
return props.reactions.filter(({ emoji }) => emoji === props.emoji);
});
const {
sortedData: sortedReactions,
sortBy,
getSortClass,
getAriaSortString,
getAriaSortLabel
} = useSortable(computedReactions);
onMounted(() => {
sortBy('mkdate', 'desc');
});
</script>
<template>
<table class="default forum-table --posts-reactors">
<colgroup>
<col style="width: 50px;">
<col>
<col>
</colgroup>
<thead>
<tr class="sortable">
<th scope="col">
<span class="sr-only">{{ $gettext('Benutzer') }}</span>
</th>
<th
scope="col"
:class="getSortClass('user.formatted_name')"
:aria-sort="getAriaSortString('user.formatted_name')"
:aria-label="getAriaSortLabel('user.formatted_name', $gettext('Name'))"
>
<button
type="button"
class="as-link"
@click="sortBy('user.formatted_name')"
:title="$gettext('Nach Name sortieren')"
:aria-label="$gettext('Nach Name sortieren')"
>
{{ $gettext('Name') }}
</button>
</th>
<th
scope="col"
:class="getSortClass('mkdate')"
:aria-sort="getAriaSortString('mkdate')"
:aria-label="getAriaSortLabel('mkdate', $gettext('Datum'))"
>
<button
type="button"
class="as-link"
@click="sortBy('mkdate')"
:title="$gettext('Nach Datum sortieren')"
:aria-label="$gettext('Nach Datum sortieren')"
>
{{ $gettext('Datum') }}
</button>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(reaction, index) in sortedReactions" :key="index">
<td>
<div class="user-reaction">
<UserAvatarDropdown
size="30px"
v-if="reaction.user.id"
:user="{
id: reaction.user.id,
username: reaction.user.username,
name: reaction.user.formatted_name,
avatar_url: reaction.user.meta.avatar.medium
}"
/>
<span class="emoji-icon" v-html="REACTION_ICONS[reaction.emoji].icon"></span>
<span class="sr-only">{{ emoji }}</span>
</div>
</td>
<td>
<a
v-if="reaction.user.id"
:href="userProfileURL(reaction.user.username)"
:title="$gettext('Zum Profil')"
:aria-label="$gettext('Zum Profil von %{name}', { name: reaction.user.formatted_name })"
class="author-name"
>
{{ reaction.user.formatted_name }}
</a>
<p v-else class="author-name">
{{ $gettext('Unbekannt') }}
</p>
</td>
<td>
<StudipDateTime :iso="reaction.mkdate" :relative="true" />
</td>
</tr>
</tbody>
</table>
</template>
|
