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/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>