Friendship management added

frontend/src/dialogues/socialnetwork/UserProfileDialog.vue

@@ -1,8 +1,15 @@
 <template>
     <DialogWidget ref="dialog" :title="$t('socialnetwork.profile.pretitle')" :isTitleTranslated="isTitleTranslated"
         :show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog" height="75%"
-        name="UserProfileDialog">
-        <div class="dialog-body">
+        name="UserProfileDialog" display="flex">
+        <div class="activities">
+            <span>{{ $t(`socialnetwork.friendship.state.${friendshipState}`) }}</span>
+            <img v-if="['none', 'denied', 'withdrawn'].includes(friendshipState)" src="/images/icons/request-friendship.png"
+                @click="handleFriendship()" />
+            <img v-else-if="['accepted', 'open']" src="/images/icons/cancel-friendship.png"
+                @click="handleFriendship()" />
+        </div>
+        <div class="profile-content">
             <div>
                 <ul class="tab-list">
                     <li v-for="tab in tabs" :key="tab.name" :class="{ active: activeTab === tab.name }"
@@ -137,6 +144,8 @@ export default {
                 menubar: 'edit format table',
                 promotion: false,
             },
+            hasSendFriendshipRequest: false,
+            friendshipState: 'none',
         };
     },
     methods: {
@@ -148,6 +157,7 @@ export default {
             try {
                 const response = await apiClient.get(`/api/socialnetwork/profile/main/${this.userId}`);
                 this.userProfile = response.data;
+                this.setFriendshipStatus(response.data.friendship);
                 const newTitle = this.$t('socialnetwork.profile.title').replace('<username>', this.userProfile.username);
                 this.$refs.dialog.updateTitle(newTitle, false);
                 if (this.activeTab === 'images') {
@@ -300,7 +310,6 @@ export default {
         },
         async fetchGuestbookImage(guestbookOwnerName, entry) {
             try {
-                console.log(entry, guestbookOwnerName);
                 const response = await apiClient.get(`/api/socialnetwork/guestbook/image/${guestbookOwnerName}/${entry.id}`, {
                     responseType: 'blob',
                 });
@@ -309,11 +318,75 @@ export default {
                 console.error('Error fetching image:', error);
             }
         },
+        async handleFriendship() {
+            console.log(this.friendshipState);
+            if (this.friendshipState === 'none') {
+                this.requestFriendship();
+            } else if (this.friendshipState === 'waiting') {
+                this.cancelFriendship();
+            } else if (this.friendshipState === 'accepted') {
+                this.cancelFriendship();
+            } else if (this.friendshipState === 'denied') {
+                this.acceptFriendship();
+            }
+        },
+        async requestFriendship() {
+            try {
+                const response = await apiClient.post('/api/socialnetwork/friend', {
+                    friendUserid: this.userId,
+                });
+                this.setFriendshipStatus(response.data);
+                this.$root.$refs.messageDialog.open('tr:socialnetwork.friendship.added');
+            } catch(error) {
+                this.$root.$refs.errorDialog.open(`tr:socialnetwork.friendship.error.${error.response.data.error}`);
+            }
+        },
+        async cancelFriendship() {
+            try {
+                await apiClient.delete(`/api/socialnetwork/friend/${this.userId}`);
+                this.setFriendshipStatus(null);
+                const type = this.friendshipState === 'waiting' ? 'withdrawn' : 'denied'
+                this.$root.$refs.messageDialog.open(`tr:socialnetwork.friendship.${type}`);
+            } catch(error) {
+                this.$root.$refs.errorDialog.open(`tr:socialnetwork.friendship.error.${error.response.data.error}`);
+            }
+        },
+        async acceptFriendship() {
+            try {
+                await apiClient.put(`/api/socialnetwork/friend/${this.userId}`);
+                this.setFriendshipStatus(null);
+                this.$root.$refs.messageDialog.open('Freundschaftsanfrage akzeptiert');
+            } catch(error) {
+                this.$root.$refs.errorDialog.open(`tr:socialnetwork.friendship.error.${error.response.data.error}`);
+            }
+        },
+        setFriendshipStatus(friendshipStates) {
+            if (!friendshipStates) {
+                this.friendshipState = 'none';
+                return;
+            }
+            this.hasSendFriendshipRequest = friendshipStates.isSender;
+            if (friendshipStates.accepted) {
+                this.friendshipState = 'accepted'
+            } else if (friendshipStates.denied) {
+                this.friendshipState = 'denied';
+            } else if (friendshipStates.withdrawn) {
+                this.friendshipState = 'withdrawn';
+            } else if (!friendshipStates.isSender) {
+                this.friendshipState = 'open';
+            } else {
+                this.friendshipState = 'waiting';
+            }
+        }
     }
 };
 </script>
 
 <style scoped>
+.dialog-body > div:first-child {
+    display: block;
+}
+
 .tab-list {
     list-style-type: none;
     padding: 0;
@@ -431,4 +504,30 @@ export default {
 .pagination button {
     margin: 0 10px;
 }
+
+.activities {
+    background-color: #F9A22C;
+    margin: -20px -20px 0 -20px;
+    height: 26px !important;
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.activities > span:first-child {
+    flex: 1;
+}
+
+.activities > img {
+    cursor: pointer;
+}
+
+.userprofile-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-content {
+    flex: 1;
+    overflow: auto;
+}
 </style>

frontend/src/dialogues/standard/MessageDialog.vue

@@ -0,0 +1,52 @@
+<template>
+    <DialogWidget ref="dialog" title="message.title" :show-close="true" :buttons="buttons" :modal="true" width="25em"
+        height="15em" name="MessageDialog" :isTitleTranslated=true>
+        <div class="message-content">
+            <p>{{ translatedMessage }}</p>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: 'MessageDialog',
+    components: {
+        DialogWidget,
+    },
+    data() {
+        return {
+            message: '',
+            buttons: [
+                { text: 'message.close', action: 'close' }
+            ]
+        };
+    },
+    computed: {
+        translatedMessage() {
+            if (this.message.startsWith('tr:')) {
+                return this.$t(this.message.substring(3));
+            }
+            return this.message;
+        }
+    },
+    methods: {
+        open(message) {
+            this.message = message;
+            this.$refs.dialog.open();
+        },
+        close() {
+            this.$refs.dialog.close();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.message-content {
+    padding: 1em;
+    color: #000000;
+    text-align: center;
+}
+</style>