Added movability of dialogs

2024-08-19 12:34:08 +02:00
parent 4b6ad3aefe
commit 16a59daf39
40 changed files with 1625 additions and 204 deletions
--- a/frontend/src/components/AppFooter.vue
+++ b/frontend/src/components/AppFooter.vue
@@ -10,11 +10,13 @@
      </button>
    </div>
    <div class="static-block">
-      <a href="#" @click.prevent="openImprintDialog">Impressum</a>
-      <a href="#" @click.prevent="openDataPrivacyDialog">Datenschutzerklärung</a>
+      <a href="#" @click.prevent="openImprintDialog">{{ $t('imprint.button') }}</a>
+      <a href="#" @click.prevent="openDataPrivacyDialog">{{ $t('dataPrivacy.button') }}</a>
+      <a href="#" @click.prevent="openContactDialog">{{ $t('contact.button') }}</a>
    </div>
    <ImprintDialog ref="imprintDialog" name="imprintDialog" />
    <DataPrivacyDialog ref="dataPrivacyDialog" name="dataPrivacyDialog" />
+    <ContactDialog ref="contactDialog" name="contactDialog" />
  </footer>
 </template>

@@ -22,12 +24,14 @@
 import { mapGetters } from 'vuex';
 import ImprintDialog from '../dialogues/standard/ImprintDialog.vue';
 import DataPrivacyDialog from '../dialogues/standard/DataPrivacyDialog.vue';
+import ContactDialog from '../dialogues/standard/ContactDialog.vue';

 export default {
  name: 'AppFooter',
  components: {
    ImprintDialog,
    DataPrivacyDialog,
+    ContactDialog,
  },
  computed: {
    ...mapGetters('dialogs', ['openDialogs'])
@@ -39,6 +43,9 @@ export default {
    openDataPrivacyDialog() {
      this.$refs.dataPrivacyDialog.open();
    },
+    openContactDialog() {
+      this.$refs.contactDialog.open();
+    },
    toggleDialogMinimize(dialogName) {
      this.$store.dispatch('dialogs/toggleDialogMinimize', dialogName);
    }
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -16,7 +16,7 @@ header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
-  background-color: #f8f9fa;
+  background-color: #f8a22b;
 }
 .logo, .title, .advertisement {
  text-align: center;
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -59,6 +59,7 @@ nav>ul {
  padding: 0;
  flex-direction: row;
  margin: 0;
+  cursor: pointer;
 }

 ul {
--- a/frontend/src/components/DialogWidget.vue
+++ b/frontend/src/components/DialogWidget.vue
@@ -1,8 +1,9 @@
 <template>
  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal }]" @click.self="handleOverlayClick">
-    <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }"
-      v-if="!minimized">
-      <div class="dialog-header">
+    <div class="dialog" :class="{ minimized: minimized }"
+      :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
+      v-if="!minimized" ref="dialog">
+      <div class="dialog-header" @mousedown="startDragging">
        <span v-if="icon" class="dialog-icon">
          <img :src="icon" alt="Icon" />
        </span>
@@ -66,12 +67,19 @@ export default {
  data() {
    return {
      visible: false,
-      minimized: false
+      minimized: false,
+      dialogTop: '50%',
+      dialogLeft: '50%',
+      isDragging: false,
+      dragOffsetX: 0,
+      dragOffsetY: 0,
    };
  },
  computed: {
    dialogWidth() {
-      return this.width || '70%';
+      const val = this.width || '70%';
+      console.log(val);
+      return val;
    },
    dialogHeight() {
      return this.height || '60%';
@@ -80,7 +88,7 @@ export default {
  watch: {
    visible(newValue) {
      if (!newValue) {
-        this.minimized = false;  // Reset minimized state when dialog is closed
+        this.minimized = false;
      }
    }
  },
@@ -101,7 +109,7 @@ export default {
    buttonClick(action) {
      this.$emit(action);
      if (action === 'close') {
-        this.close(); // Close dialog after button click if action is close
+        this.close();
      }
    },
    handleOverlayClick() {
@@ -115,7 +123,26 @@ export default {
    toggleMinimize() {
      this.minimized = !this.minimized;
      this.$store.dispatch('dialogs/toggleDialogMinimize', this.name);
-    }
+    },
+    startDragging(event) {
+      this.isDragging = true;
+      const dialog = this.$refs.dialog;
+      this.dragOffsetX = event.clientX - dialog.offsetLeft;
+      this.dragOffsetY = event.clientY - dialog.offsetTop;
+      document.addEventListener('mousemove', this.onDrag);
+      document.addEventListener('mouseup', this.stopDragging);
+      console.log('dragging started');
+    },
+    onDrag(event) {
+      if (!this.isDragging) return;
+      this.dialogLeft = `${event.clientX - this.dragOffsetX}px`;
+      this.dialogTop = `${event.clientY - this.dragOffsetY}px`;
+    },
+    stopDragging() {
+      this.isDragging = false;
+      document.removeEventListener('mousemove', this.onDrag);
+      document.removeEventListener('mouseup', this.stopDragging);
+    },
  },
  mounted() {
    this.$store.subscribe((mutation) => {
@@ -153,6 +180,8 @@ export default {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  pointer-events: all;
+  position: absolute;
+  transform: translate(-50%, -50%);
 }

 .dialog.minimized {
@@ -167,6 +196,7 @@ export default {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  background-color: #F9A22C;
+  cursor: move;
 }

 .dialog-icon {
--- a/frontend/src/components/MessageboxWidget.vue
+++ b/frontend/src/components/MessageboxWidget.vue
@@ -0,0 +1,183 @@
+<template>
+    <div v-if="visible" :class="['dialog-overlay', { 'non-modal': false }]">
+        <div class="dialog" :class="{ minimized: minimized }" :style="{ width: dialogWidth, height: dialogHeight }">
+            <div class="dialog-header">
+                <span class="dialog-title">{{ getHeadLine() }}</span>
+                <span class="dialog-close" @click="close">✖</span>
+            </div>
+            <div class="dialog-body">
+                {{ message }}
+            </div>
+            <div class="dialog-footer">
+                <button @click="close()" class="dialog-button">Ok</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'MessageboxWidget',
+    props: {
+        type: {
+            type: String,
+            required: true
+        },
+        width: {
+            type: String,
+            default: '300px'
+        },
+        height: {
+            type: String,
+            default: '200px'
+        },
+        message: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            visible: false,
+            minimized: false
+        };
+    },
+    computed: {
+        dialogWidth() {
+            return this.width || '70%';
+        },
+        dialogHeight() {
+            return this.height || '60%';
+        }
+    },
+    watch: {
+        visible(newValue) {
+            if (!newValue) {
+                this.minimized = false;  // Reset minimized state when dialog is closed
+            }
+        }
+    },
+    methods: {
+        open() {
+            this.visible = true;
+            if (this.modal === false) {
+                this.$store.dispatch('dialogs/addOpenDialog', {
+                    status: 'open',
+                    dialog: this
+                });
+            }
+        },
+        close() {
+            this.visible = false;
+            this.$store.dispatch('dialogs/removeOpenDialog', this.name);
+        },
+        getHeadLine() {
+            switch (this.type) {
+                case 'error':
+                    return this.$t('error-title');
+                case 'warning':
+                    return this.$t('warning-title');
+                case 'info':
+                    return this.$t('info-title');
+                default:
+                    return this.$t('info-title');
+            }
+        }
+    },
+    mounted() {
+        this.$store.subscribe((mutation) => {
+            if (mutation.type === 'dialogs/toggleDialogMinimize' && mutation.payload === this.name) {
+                this.minimized = !this.minimized;
+            }
+        });
+    }
+};
+</script>
+
+<style scoped>
+.dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.dialog-overlay.non-modal {
+    background: transparent;
+    pointer-events: none;
+}
+
+.dialog {
+    background: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    pointer-events: all;
+}
+
+.dialog.minimized {
+    height: auto;
+    overflow: hidden;
+}
+
+.dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    border-bottom: 1px solid #ddd;
+    background-color: #F9A22C;
+}
+
+.dialog-icon {
+    margin-right: 10px;
+}
+
+.dialog-title {
+    flex-grow: 1;
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.dialog-close,
+.dialog-minimize {
+    cursor: pointer;
+    font-size: 1.5em;
+    margin-left: 10px;
+}
+
+.dialog-body {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 20px;
+    border-top: 1px solid #ddd;
+}
+
+.dialog-button {
+    margin-left: 10px;
+    padding: 10px 20px;
+    cursor: pointer;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    transition: background 0.3s;
+}
+
+.dialog-button:hover {
+    background: #0056b3;
+}
+</style>
--- a/frontend/src/dialogues/standard/ContactDialog.vue
+++ b/frontend/src/dialogues/standard/ContactDialog.vue
@@ -0,0 +1,92 @@
+<template>
+    <DialogWidget ref="dialog" title="contact.title" :isTitleTranslated="true" icon="contact24.png" :show-close="true"
+        :buttons="[{ text: 'Ok', action: 'save' }, { text: 'Cancel', action: 'close' }]" :modal="false" @save="save"
+        :width="'50em'">
+        <table>
+            <tr>
+                <td>{{ $t("dialog.contact.email") }}</td>
+                <td><input type="email" v-model="email" /></td>
+            </tr>
+            <tr>
+                <td>{{ $t("dialog.contact.name") }}</td>
+                <td><input type="text" v-model="name" /></td>
+            </tr>
+        </table>
+        <p>{{ $t("dialog.contact.message") }}</p>
+        <textarea v-model="message" rows="15" cols="80"></textarea>
+        <p>{{ $t("dialog.contact.accept") }}</p>
+        <label><input type="checkbox" v-model="acceptDataSave" />{{ $t("dialog.contact.acceptdatasave") }}</label>
+        <p>{{ $t("dialog.contact.accept2") }}</p>
+        <p v-if="error" class="error">{{ $t("dialog.contact.error." + error) }}</p>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '../../components/DialogWidget.vue';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'ContactDialog',
+    components: {
+        DialogWidget
+    },
+    data() {
+        return {
+            email: "",
+            name: "",
+            message: "",
+            acceptDataSave: false,
+            error: ""
+        };
+    },
+    methods: {
+        open() {
+            this.email = "";
+            this.name = "";
+            this.message = "";
+            this.acceptDataSave = false;
+            this.error = "";
+            this.$refs.dialog.open();
+        },
+        async save() {
+            try {
+                const response = await apiClient.post('/api/contact', {
+                    email: this.email,
+                    name: this.name,
+                    message: this.message,
+                    acceptDataSave: this.acceptDataSave
+                });
+                this.$refs.dialog.close();
+            } catch (error) {
+                this.error = error;
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+p {
+    margin: 0px;
+}
+
+a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+table,
+tr,
+td {
+    margin: 0;
+    padding: 0;
+}
+
+.error {
+    color: red;
+}
+</style>
--- a/frontend/src/dialogues/standard/DataPrivacyDialog.vue
+++ b/frontend/src/dialogues/standard/DataPrivacyDialog.vue
@@ -5,7 +5,7 @@
        :isTitleTranslated=true
        icon="privacy24.png"
        :show-close=true
-        :buttons="[{ text: 'Ok' }]"
+        :buttons="[{ text: 'Ok', action: 'close' }]"
        :modal=false
        @close="closeDialog"
        @ok="handleOk"
--- a/frontend/src/dialogues/standard/ImprintDialog.vue
+++ b/frontend/src/dialogues/standard/ImprintDialog.vue
@@ -5,7 +5,7 @@
        :isTitleTranslated=true
        icon="imprint24.png"
        :show-close="true"
-        :buttons="[{ text: 'Ok' }]"
+        :buttons="[{ text: 'Ok', action: 'close' }]"
        :modal=false
        @close="closeDialog"
        @ok="handleOk"
--- a/frontend/src/i18n/index.js
+++ b/frontend/src/i18n/index.js
@@ -10,6 +10,7 @@ import enRegister from './locales/en/register.json';
 import enError from './locales/en/error.json';
 import enActivate from './locales/en/activate.json';
 import enSettings from './locales/en/settings.json';
+import enAdmin from './locales/en/admin.json';

 import deGeneral from './locales/de/general.json';
 import deHeader from './locales/de/header.json';
@@ -20,6 +21,7 @@ import deRegister from './locales/de/register.json';
 import deError from './locales/de/error.json';
 import deActivate from './locales/de/activate.json';
 import deSettings from './locales/de/settings.json';
+import deAdmin from './locales/de/admin.json';

 const messages = {
  en: {
@@ -32,6 +34,7 @@ const messages = {
    ...enError,
    ...enActivate,
    ...enSettings,
+    ...enAdmin,
  },
  de: {
    ...deGeneral,
@@ -43,6 +46,7 @@ const messages = {
    ...deError,
    ...deActivate,
    ...deSettings,
+    ...deAdmin,
  }
 };

--- a/frontend/src/i18n/locales/de/admin.json
+++ b/frontend/src/i18n/locales/de/admin.json
@@ -0,0 +1,16 @@
+{
+    "admin": {
+        "interests": {
+            "title": "[Admin] - Interessen verwalten",
+            "newinterests": {
+                "name": "Name des Interesses",
+                "status": "Freigegeben",
+                "adultonly": "Nur für Erwachsene",
+                "translations": "Übersetzungen",
+                "isactive": "Aktiviert",
+                "isadult": "Nur für Erwachsene",
+                "delete": "Löschen"
+            }
+        }
+    }
+}
--- a/frontend/src/i18n/locales/de/general.json
+++ b/frontend/src/i18n/locales/de/general.json
@@ -1,9 +1,28 @@
 {
    "welcome": "Willkommen bei YourPart",
    "imprint": {
-        "title": "Impressum"
+        "title": "Impressum",
+        "button": "Impressum"
    },
    "dataPrivacy": {
-        "title": "Datenschutzerklärung"
+        "title": "Datenschutzerklärung",
+        "button": "Datenschutzerklärung"
+    },
+    "contact": {
+        "title": "Kontakt",
+        "button": "Kontakt"
+    },
+    "error-title": "Fehler",
+    "warning-title": "Warnung",
+    "info-title": "Information",
+    "dialog": {
+        "contact": {
+            "email": "Email-Adresse",
+            "name": "Name",
+            "message": "Deine Nachricht an uns",
+            "accept": "Deine Email-Adresse wird vorübergehend in unserem System gespeichert. Nachdem Deine Anfrage bearbeitet wurde, wird die Email-Adresse wieder aus dem System gelöscht.",
+            "acceptdatasave": "Ich stimme der vorübergehenden Speicherung meiner Email-Adresse zu.",
+            "accept2": "Ohne diese Zustimmung können wir Dir leider nicht antworten."
+        }
    }
-}
+}
--- a/frontend/src/i18n/locales/de/navigation.json
+++ b/frontend/src/i18n/locales/de/navigation.json
@@ -27,7 +27,7 @@
            "account": "Account",
            "personal": "Persönliches",
            "view": "Aussehen",
-            "interrests": "Interessen",
+            "interests": "Interessen",
            "notifications": "Benachrichtigungen",
            "sexuality": "Sexualität"
        },
@@ -36,7 +36,7 @@
            "useradministration": "Benutzerverwaltung",
            "forum": "Forum",
            "userrights": "Benutzerrechte",
-            "interrests": "Interessen",
+            "interests": "Interessen",
            "falukant": "Falukant"
        },
        "m-friends": {
--- a/frontend/src/i18n/locales/de/settings.json
+++ b/frontend/src/i18n/locales/de/settings.json
@@ -126,7 +126,16 @@
            "deleteAccount": "Account löschen",
            "language": "Sprache",
            "showinsearch": "In Usersuchen anzeigen",
-            "changeaction": "Benutzerdaten ändern"
+            "changeaction": "Benutzerdaten ändern",
+            "oldpassword": "Altes Paßwort (benötigt)"
+        },
+        "interests": {
+            "title": "Interessen",
+            "new": "Neues Interesse",
+            "add": "Hinzufügen",
+            "added": "Das neue Interesse wurde hinzugefügt und wird bearbeitet. Bis zum Abschluss ist es nicht in der Liste der Interessen sichtbar.",
+            "adderror": "Beim hinzufügen des Interesses ist ein Fehler aufgetreten.",
+            "errorsetinterest": "Das Interest konnte für Dich nicht gebucht werden."
        }
    }
 }
--- a/frontend/src/i18n/locales/en/admin.json
+++ b/frontend/src/i18n/locales/en/admin.json
@@ -0,0 +1,3 @@
+{
+    
+}
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -6,6 +6,8 @@ import PeronalSettingsView from '../views/settings/PersonalView.vue';
 import ViewSettingsView from '../views/settings/ViewView.vue';
 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';

 const routes = [
  {
@@ -41,6 +43,18 @@ const routes = [
    name: 'Account settings',
    component: AccountSettingsView,
    meta: { requiresAuth: true }
+  },
+  {
+    path: '/settings/interests',
+    name: 'Interests',
+    component: InterestsView,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/admin/interests',
+    name: 'AdminInterests',
+    component: AdminInterestsView,
+    meta: { requiresAuth: true }
  }
 ];

--- a/frontend/src/utils/axios.js
+++ b/frontend/src/utils/axios.js
@@ -9,11 +9,8 @@ const apiClient = axios.create({
 });

 apiClient.interceptors.request.use(config => {
-    console.log('loading user');
    const user = store.getters.user;
-    console.log(user);
    if (user && user.authCode) {
-        console.log('set auth');
        config.headers['userId'] = user.id;
        config.headers['authCode'] = user.authCode;
    }
--- a/frontend/src/views/admin/InterestsView.vue
+++ b/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>
--- a/frontend/src/views/settings/InterestsView.vue
+++ b/frontend/src/views/settings/InterestsView.vue
@@ -0,0 +1,169 @@
+<template>
+    <div>
+        <h2>{{ $t('settings.interests.title') }}</h2>
+        <div><span v-for="interest, key in this.userInterests" class="interest">{{ key > 0 ? ', ' : '' }}{{
+                getInterestTranslation(interest.user_interest_type) }}<span class="link remove" @click="removeInterest(interest)">-</span></span></div>
+    </div>
+    <div class="new-interest">
+        {{ $t('settings.interests.new') }} <input type="text" v-model="newInterest" @keyup="newInterestKeyupHandler" />
+        <button @click="addInterestByText">{{ $t('settings.interests.add') }}</button>
+        <div class="new-interest-proposals" v-if="filteredInterests.length > 0">
+            <ul>
+                <li v-for="interest in filteredInterests" @click="addInterest(interest)" class="link">{{
+                    getInterestTranslation(interest) }}</li>
+            </ul>
+        </div>
+    </div>
+    <MessageboxWidget :type="messageboxType" :message="messageboxMessage" ref="messageboxWidget"></MessageboxWidget> 
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+import { mapGetters } from 'vuex';
+import MessageboxWidget from '../../components/MessageboxWidget.vue';
+
+export default {
+    name: "InterestsView",
+    components: {
+        MessageboxWidget,
+    },
+    computed: {
+        ...mapGetters(['user', 'language']),
+    },
+    async mounted() {
+        await this.loadUserInterests();
+    },
+    data() {
+        return {
+            possibleInterests: [],
+            userInterests: [],
+            filteredInterests: [],
+            newInterest: '',
+            messageboxType: 'info',
+            messageboxMessage: '',
+        }
+    },
+    methods: {
+        async loadUserInterests() {
+            const resultPossibleInterests = await apiClient.get('/api/settings/getpossibleinterests');
+            this.possibleInterests = resultPossibleInterests.data;
+            const resultUserInterests = await apiClient.get('/api/settings/getuserinterests');
+            this.userInterests = resultUserInterests.data;
+        },
+        newInterestKeyupHandler() {
+            const searchTerm = this.newInterest.toLowerCase();
+            this.filteredInterests = [];
+            if (searchTerm.length < 2) {
+                return;
+            }
+            this.filteredInterests = this.possibleInterests.filter(interest => {
+                if (interest.name.toLowerCase().includes(searchTerm)) {
+                    return true;
+                }
+                if (interest.interest_translations && interest.interest_translations.length > 0) {
+                    return interest.interest_translations.some(translation => {
+                        return translation.translation.toLowerCase().includes(searchTerm);
+                    });
+                }
+                return false;
+            });
+        },
+        getInterestTranslation(interest) {
+            if (interest.interest_translations && interest.interest_translations.length > 0) {
+                let translation = interest.interest_translations.filter(translation => {
+                    return translation.user_param_value.value === this.language;
+                });
+                if (translation.length === 0) {
+                    translation = interest.interest_translations.filter(translation => {
+                        return translation.user_param_value.value === 'en';
+                    });
+                    if (translation.length === 0) {
+                        translation = interest.interest_translations.filter(translation => {
+                            return translation.user_param_value.value === 'de';
+                        });
+                    }
+                }
+                return translation.length > 0 ? translation[0].translation : interest.name;
+            }
+            return interest.name; 
+        },
+        async addInterest(interest) {
+            if (!this.userInterests.includes(interest)) {
+                try {
+                    await apiClient.post('/api/settings/setinterest', { interestid: interest.id });
+                    await this.loadUserInterests();
+                    this.newInterest = '';
+                    this.filteredInterests = [];
+                } catch (error) {
+                    this.messageboxType = 'error';
+                    this.messageboxMessage = $t('settings.interests.errorsetinterest')
+                    this.$refs.messageboxWidget.open();
+                }
+            }
+        },
+        async addInterestByText() {
+            if (this.newInterest.length > 0) {
+                const newInterest = this.possibleInterests.filter(interest => this.getInterestTranslation(interest) === this.newInterest);
+                if (newInterest.length === 1) {
+                    this.addInterest(newInterest[0]);
+                    return;
+                }
+                try  {
+                    await apiClient.post('/api/settings/addinterest', {
+                        name: this.newInterest
+                    });
+                    this.messageboxType = 'info';
+                    this.messageboxMessage = this.$t('settings.interests.added');
+                } catch (error) {
+                    this.messageboxType = 'error';
+                    this.messageboxMessage = this.$t('settings.interests.adderror');
+                }
+                this.$refs.messageboxWidget.open();
+            }
+        },
+        async removeInterest(interest) {
+            await apiClient.get('/api/settings/removeinterest/' + interest.id);
+            await this.loadUserInterests();
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-interest {
+    position: relative;
+}
+.new-interest-proposals {
+    position: absolute;
+    top: 1.5em;
+    left: 0;
+    border: 1px solid #000000;
+    padding: 3px;
+    background-color: #ffffff;
+}
+.new-interest-proposals > ul {
+    margin: 0;
+    list-style: none;
+    padding: 0;
+    
+}
+.interest {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+.remove {
+    background-color: #ff0000;
+    border: 1px solid #000000;
+    font-size: 8pt;
+    border-radius: 3px;
+    color: #ffffff;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    padding: 0;
+    line-height: 8px;
+    text-align: center;
+    margin-left: 3px;
+}
+</style>