further vueify messages (pretty far already)

app/views/messages/overview.php

 <div data-vue-app='<?= json_encode(['components' => ['MessagesList']]) ?>'>
-    vue
     <messages-list type="<?= $received ? 'inbox' : 'outbox' ?>" />
-    app
 </div>
 
 <input type="hidden" name="received" id="received" value="<?= (int) $received ?>">

resources/vue/components/MessagesList.vue

 <template>
-    <table class="default">
+    <table class="default" id="messages">
         <caption>{{ messageListName }}</caption>
         <colgroup>
             <col class="hidden-small-down">
@@ -10,40 +10,66 @@
         </colgroup>
         <thead>
             <tr>
-                <th>
-
+                <th class="hidden-small-down">
+                    <input type="checkbox" @click="setCheckboxesByProxy"
+                           :disabled="messages.length === 0"
+                           :checked="selected.length === messages.length"
+                           :indeterminate.prop="selected.length > 0 && selected.length < messages.length">
                 </th>
                 <th>
                     <translate>Betreff</translate>
                 </th>
-                <th>
-                    <translate>Absender</translate>
+                <th class="hidden-small-down">
+                    <translate v-if="type === 'inbox'">Absender</translate>
+                    <translate v-else>Empfänger</translate>
                 </th>
                 <th>
                     <translate>Zeit</translate>
                 </th>
-                <th>
+                <th class="hidden-small-down">
                     <translate>Schlagworte</translate>
                 </th>
             </tr>
         </thead>
         <tbody>
-            <tr v-for="message in messages">
-                <td></td>
-                <td>{{ message.subject }}</td>
-                <td v-if="type === 'inbox'">
-                    {{ getUser(message.sender)['formatted-name'] }}
+            <tr v-for="message in messages" :key="message.id" :id="`message_${message.id}`" :class="isMessageRead(message) ? 'read' : 'unread'">
+                <td class="hidden-small-down">
+                    <input type="checkbox" :checked="messageIsSelected(message)" :value="message.id" @click="selectedMessage(message)">
+                </td>
+                <td class="title">
+                    <a :href="getMessageURL(message)" data-dialog>
+                        {{ message.subject }}
+
+                        <div class="message-indicators">
+                            <span v-if="message.attachments.length > 0">
+                                <studip-icon shape="staple" role="info" :size="20" :title="$gettext('Mit Anhang')"/>
+                            </span>
+                            <span v-if="message['is-answered']">
+                                <studip-icon shape="outbox" role="info" :size="20" :title="$gettext('Beantwortet')"/>
+                            </span>
+                        </div>
+                    </a>
+                </td>
+                <td v-if="type === 'inbox'" class="hidden-small-down">
+                    <a v-if="message.sender" :href="getProfileURL(getUser(message.sender))">
+                        {{ getUser(message.sender)['formatted-name'] }}
+                    </a>
+                    <translate v-else>
+                        Systemnachricht
+                    </translate>
+                </td>
+                <td v-else class="hidden-small-down">
+                    <a v-for="recipient in message.recipients" :href="getProfileURL(getUser(recipient))">
+                        {{ getUser(recipient)['formatted-name'] }}
+                    </a>
                 </td>
-                <td v-else></td>
                 <td>
                     {{ showDate(message.mkdate) }}
                 </td>
-                <td>
-                    <ul class="list-csv" v-if="message.tags.length > 0">
-                        <li v-for="tag in message.tags">
-                            {{ tag }}
-                        </li>
-                    </ul>
+                <td class="tag-container hidden-small-down">
+                    <a v-for="tag in message.tags" class="message-tag" :href="`?tag=${tag}`" :title="$gettext('Alle Nachrichten zu diesem Schlagwort')">
+                        {{ tag }}
+                    </a>
                 </td>
             </tr>
         </tbody>
@@ -64,15 +90,15 @@ export default {
     data () {
         return {
             messages: [],
-            users: []
+            users: [],
+            selected: [],
         }
     },
     methods: {
         getUser (userId) {
-            console.log('get user', userId);
             if (userId === undefined) {
                 return {
-                    'formatted-name': this.$gettext('Systemnachricht')
+                    'formatted-name': this.$gettext()
                 };
             }
             return this.users.find(user => user.id === userId);
@@ -82,6 +108,7 @@ export default {
                 id: data.id,
                 sender: data.relationships.sender?.data.id,
                 recipients: data.relationships.recipients.data.map(attributes => attributes.id),
+                attachments: data.relationships.attachments?.data.map(attributes => attributes.id),
             });
         },
         getUserFromResponse (data) {
@@ -91,18 +118,47 @@ export default {
         },
         showDate (date) {
             const jsDate = new Date(date);
-            return jsDate.toLocaleString(String.locale, {
+            const dateOptions = {
                 day: '2-digit',
                 month: '2-digit',
                 year: 'numeric',
+            };
+            const timeOptions = {
                 hour: '2-digit',
                 minute: '2-digit'
-            });
+            };
+            return jsDate.toLocaleDateString(String.locale, dateOptions) + ' ' + jsDate.toLocaleTimeString(String.locale, timeOptions);
+        },
+        setCheckboxesByProxy () {
+            if (this.selected.length === this.messages.length) {
+                this.selected = [];
+            } else {
+                this.selected = this.messages.map(message => message.id);
+            }
+        },
+        messageIsSelected(message) {
+            return this.selected.includes(message.id);
+        },
+        selectedMessage(message) {
+            if (this.selected.includes(message.id)) {
+                this.selected = this.selected.filter(m => m !== message.id);
+            } else {
+                this.selected.push(message.id);
+            }
+        },
+        getMessageURL(message) {
+            return STUDIP.URLHelper.getURL(`dispatch.php/messages/read/${message.id}`);
+        },
+        getProfileURL(user) {
+            return STUDIP.URLHelper.getURL('dispatch.php/profile', {username: user.username});
+        },
+        isMessageRead(message) {
+            return message['is-read'] || message.sender === STUDIP.USER_ID;
         }
     },
     computed: {
         messageListName () {
-            return this.type === 'inbox' ? this.$gettext('Eingang') : this.$gettext('Ausgang');
+            return this.type === 'inbox' ? this.$gettext('Eingang') : this.$gettext('Gesendet');
         }
     },
     created () {
@@ -121,12 +177,9 @@ export default {
 
             if (response.data && response.data.length > 0) {
                 response.data.forEach(message => {
-                    console.log('push message');
                     this.messages.push(this.getMessageFromResponse(message));
                 })
             }
-
-            console.log('response', response);
         });
     }
 }

resources/vue/components/StudipIcon.vue

 <template>
-    <input v-if="name" type="image" :name="name" :src="url"
+    <input v-if="name" type="image" :name="name" :src="url" :class="classes"
            :width="size" :height="size" v-bind="$attrs" v-on="$listeners">
-    <img v-else :src="url" :width="size" :height="size" v-bind="$attrs" v-on="$listeners">
+    <img v-else :src="url" :width="size" :height="size" :class="classes" v-bind="$attrs" v-on="$listeners">
 </template>
 
 <script>
@@ -24,14 +24,14 @@
             }
         },
         computed: {
-            url: function () {
+            url() {
                 if (this.shape.indexOf("http") === 0) {
                     return this.shape;
                 }
                 var path = this.shape.split('+').reverse().join('/');
                 return `${STUDIP.ASSETS_URL}images/icons/${this.color}/${path}.svg`;
             },
-            color: function () {
+            color() {
                 switch (this.role) {
                     case 'info':
                         return 'black';
@@ -60,6 +60,12 @@
                     default:
                         return 'blue';
                 }
+            },
+            classes() {
+                return [
+                    `icon-role-${this.role}`,
+                    `icon-shape-${this.shape}`
+                ];
             }
         }
     }