fixes #49

assets/apps/labels.js

+export default {
+    data: () => ({
+        sort: {
+            by: 'name',
+            asc: true,
+        },
+        needle: '',
+    }),
+    components: {
+        gitlabLabel: {
+            template: '#label-template',
+            props: {
+                label: {
+                    type: Object,
+                    required: true,
+                },
+            },
+            computed: {
+                isScoped() {
+                    return this.label.name.includes('::');
+                },
+                name() {
+                    return this.isScoped ? this.label.name.split('::').slice(0, -1).join('::') : this.label.name;
+                },
+                scope() {
+                    return this.isScoped ? this.label.name.split('::').at(-1) : null;
+                },
+                style() {
+                    return {
+                        '--label-background-color': this.label.color,
+                        '--label-text-color': this.label.text_color,
+                    };
+                },
+                link() {
+                    const url = new URL('/studip/studip/-/issues', 'https://gitlab.studip.de');
+                    url.searchParams.append('label_name[]', this.label.name);
+                    return url.toString();
+                },
+            },
+        },
+    },
+    methods: {
+        sortClass(column) {
+            if (this.sort.by !== column) {
+                return '';
+            }
+
+            return {
+                sortasc: this.sort.asc,
+                sortdesc: !this.sort.asc,
+            };
+        },
+        selectSort(column) {
+            if (this.sort.by === column) {
+                this.sort.asc = !this.sort.asc;
+            } else {
+                this.sort.by = column;
+                this.sort.asc = true;
+            }
+        }
+    },
+    computed: {
+        sortedLabels () {
+            const dirFactor = this.sort.asc ? 1 : -1;
+            return this.labels
+                .filter(label => {
+                    return this.needle.trim().length === 0
+                        || label.name.toLowerCase().includes(this.needle.toLowerCase())
+                        || label.description?.toLowerCase().includes(this.needle.toLowerCase());
+                })
+                .sort((a, b) => {
+                    if (this.sort.by === 'name') {
+                        return dirFactor * a.name.localeCompare(b.name);
+                    }
+                    if (this.sort.by === 'description') {
+                        return dirFactor * (a.description ?? '').localeCompare(b.description ?? '');
+                    }
+                    if (this.sort.by === 'count') {
+                        return dirFactor * (a.count - b.count);
+                    }
+
+                    throw new Error('Invalid sorting defined');
+                });
+        },
+    },
+};