Some icons changed, first implementation of contact edit

frontend/src/i18n/locales/de/admin.json

@@ -11,6 +11,14 @@
                 "isadult": "Nur für Erwachsene",
                 "delete": "Löschen"
             }
+        },
+        "contacts": {
+            "title": "[Admin] - Kontaktanfragen",
+            "date": "Datum",
+            "from": "Absender",
+            "actions": "Aktionen",
+            "open": "Bearbeiten",
+            "finished": "Abschließen"
         }
     }
 }

frontend/src/i18n/locales/de/general.json

@@ -24,5 +24,8 @@
             "acceptdatasave": "Ich stimme der vorübergehenden Speicherung meiner Email-Adresse zu.",
             "accept2": "Ohne diese Zustimmung können wir Dir leider nicht antworten."
         }
+    },
+    "general": {
+        "datetimelong": "dd.MM.yyyy HH:mm:ss"
     }
 }

frontend/src/router/index.js

@@ -8,6 +8,7 @@ import SexualitySettingsView from '../views/settings/SexualityView.vue';
 import AccountSettingsView from '../views/settings/AccountView.vue';
 import InterestsView from '../views/settings/InterestsView.vue';
 import AdminInterestsView from '../views/admin/InterestsView.vue';
+import AdminContactsView from '../views/admin/ContactsView.vue';
 
 const routes = [
   {
@@ -55,7 +56,13 @@ const routes = [
     name: 'AdminInterests',
     component: AdminInterestsView,
     meta: { requiresAuth: true }
-  }
+  },
+  {
+    path: '/admin/contacts',
+    name: 'AdminContacts',
+    component: AdminContactsView,
+    meta: { requiresAuth: true }
+  },
 ];
 
 

frontend/src/utils/datetime.js

@@ -0,0 +1,9 @@
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+
+export function formatDateTimeLong(timestamp) {
+    const { t } = useI18n();
+    const dateFormat = t('general.datetimelong', 'yyyy-MM-dd HH:mm:ss');
+    const date = new Date(timestamp);
+    return format(date, dateFormat);
+}

frontend/src/views/admin/ContactsView.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <h2>{{ $t('admin.contacts.title') }}</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>{{ $t('admin.contacts.date') }}</th>
+                    <th>{{ $t('admin.contacts.from') }}</th>
+                    <th>{{ $t('admin.contacts.actions') }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="contact in contacts">
+                    <td>{{ formatDateTimeLong(contact.createdAt) }}</td>
+                    <td>{{ contact.email }}</td>
+                    <td>
+                        <button @clicked="openRequest(contact)">{{ $t('admin.contacts.open') }}</button>
+                        <button @clicked="finishRequest(contact)">{{ $t('admin.contacts.finished') }}</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <ErrorDialog ref="errorDialog" />
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+import { mapGetters } from 'vuex';
+import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue';
+import { formatDateTimeLong } from '@/utils/datetime.js';
+
+export default {
+    name: 'AdminContactsView',
+    components: {
+        ErrorDialog
+    },
+    data() {
+        return {
+            contacts: []
+        }
+    },
+    mounted() {
+        this.getContacts()
+    },
+    methods: {
+        formatDateTimeLong,
+        async getContacts() {
+            try {
+                const openContactRequests = await apiClient.get('/api/admin/opencontacts');
+                this.contacts = openContactRequests.data;
+            } catch (error) {
+                this.$refs.errorDialog.open(`tr:error.${error.response.data.error}`);
+            }
+        },
+        async openRequest(contact) {
+
+        },
+        async finishRequest(contact) {
+
+        }
+    }
+}
+</script>