Added movability of dialogs

frontend/src/views/admin/InterestsView.vue

@@ -0,0 +1,133 @@
+<template>
+    <div>
+        <h2>{{ $t("admin.interests.title") }}</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>{{ $t("admin.interests.newinterests.name") }}</th>
+                    <th>{{ $t("admin.interests.newinterests.status") }}</th>
+                    <th>{{ $t("admin.interests.newinterests.adultonly") }}</th>
+                    <th>{{ $t("admin.interests.newinterests.translations") }}</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="openInterest in openInterests" :key="openInterest.id">
+                    <td>{{ openInterest.name }}</td>
+                    <td>
+                        <label>
+                            <input type="checkbox" v-model="openInterest.allowed" @change="changeItem(openInterest)" />
+                            {{ $t("admin.interests.newinterests.isactive") }}
+                        </label>
+                    </td>
+                    <td>
+                        <label>
+                            <input type="checkbox" v-model="openInterest.adultOnly"
+                                @change="changeItem(openInterest)" />
+                            {{ $t("admin.interests.newinterests.isadult") }}
+                        </label>
+                    </td>
+                    <td>
+                        <div v-for="language in languages" :key="language.id">
+                            <label>{{ $t(language.captionTr) }}
+                                <input type="text" :value="getTranslationValue(openInterest, language)"
+                                    @change="changeTranslation(openInterest, language, $event.target.value)" />
+                            </label>
+                        </div>
+                    </td>
+                    <td>
+                        <button @click="deleteInterest(openInterest.id)">{{ $t("admin.interests.newinterests.delete")
+                            }}</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+import { mapGetters } from 'vuex';
+import MessageboxWidget from '../../components/MessageboxWidget.vue';
+
+export default {
+    name: "AdminInterestsView",
+    data() {
+        return {
+            openInterests: [],
+            languages: [],
+        }
+    },
+    components: {
+        MessageboxWidget,
+    },
+    computed: {
+        ...mapGetters(['user', 'language']),
+    },
+    async mounted() {
+        await this.loadOpenInterests();
+        await this.getLanguages();
+    },
+    methods: {
+        async loadOpenInterests() {
+            try {
+                const response = await apiClient.get('/api/admin/interests/open');
+                this.openInterests = response.data;
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        async changeItem(interest) {
+            try {
+                const payload = {
+                    id: interest.id,
+                    active: interest.allowed || false,
+                    adult: interest.adultOnly || false,
+                };
+                await apiClient.post('/api/admin/interest', payload);
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        async changeTranslation(interest, language, value) {
+            try {
+                if (!interest.translations) {
+                    interest.translations = {}; // Direkte Zuweisung, um Reaktivität sicherzustellen
+                }
+                interest.translations[language.value] = value; // Direkte Zuweisung
+
+                const payload = {
+                    id: interest.id,
+                    translations: {
+                        [language.value]: value,
+                    }
+                };
+                await apiClient.post('/api/admin/interest/translation', payload);
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        async deleteInterest(id) {
+            try {
+                await apiClient.delete(`/api/admin/interest/${id}`);
+                this.openInterests = this.openInterests.filter(interest => interest.id !== id);
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        async getLanguages() {
+            try {
+                const response = await apiClient.post('/api/settings/getparamvalues', {
+                    type: 'language'
+                });
+                this.languages = response.data.map(item => { return { value: item.id, captionTr: `settings.personal.language.${item.name}` } });
+            } catch (err) {
+                console.error('Error loading languages:', err);
+            }
+        },
+        getTranslationValue(interest, language) {
+            return interest.translations ? interest.translations[language.value] || '' : '';
+        },
+    }
+}
+</script>