Friendship management added

2024-10-27 13:14:05 +01:00
parent f74a16e58e
commit 7f8709516d
13 changed files with 406 additions and 31 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,13 +8,15 @@
    <RandomChatDialog ref="randomChatDialog" />
    <CreateFolderDialog ref="createFolderDialog" />
    <EditImageDialog ref="editImageDialog" />
-    <UserProfileDialog ref="userProfileDialog" :userId="'0'"/>
+    <UserProfileDialog ref="userProfileDialog" :userId="'0'" />
    <ChooseDialog ref="chooseDialog" />
    <ContactDialog ref="contactDialog" />
    <DataPrivacyDialog ref="dataPrivacyDialog" />
    <ErrorDialog ref="errorDialog" />
    <ImprintDialog ref="imprintDialog" />
-    <ShowImageDialog ref="showImageDialog" /></div>
+    <ShowImageDialog ref="showImageDialog" />
+    <MessageDialog ref="messageDialog" />
+  </div>
 </template>

 <script>
@@ -34,6 +36,7 @@ import DataPrivacyDialog from './dialogues/standard/DataPrivacyDialog.vue';
 import ErrorDialog from './dialogues/standard/ErrorDialog.vue';
 import ImprintDialog from './dialogues/standard/ImprintDialog.vue';
 import ShowImageDialog from './dialogues/socialnetwork/ShowImageDialog.vue';
+import MessageDialog from './dialogues/standard/MessageDialog.vue';

 export default {
  name: 'App',
@@ -59,6 +62,7 @@ export default {
    ErrorDialog,
    ImprintDialog,
    ShowImageDialog,
+    MessageDialog,
  },
  created() {
    this.$store.dispatch('loadLoginState');
--- a/frontend/src/components/DialogWidget.vue
+++ b/frontend/src/components/DialogWidget.vue
@@ -1,5 +1,6 @@
 <template>
-  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]" @click.self="handleOverlayClick">
+  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]"
+    @click.self="handleOverlayClick">
    <div class="dialog" :class="{ minimized: minimized }"
      :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
      v-if="!minimized" ref="dialog">
@@ -11,7 +12,7 @@
        <span v-if="!modal" class="dialog-minimize" @click="minimize">_</span>
        <span v-if="showClose" class="dialog-close" @click="close">✖</span>
      </div>
-      <div class="dialog-body">
+      <div class="dialog-body" :style="{ '--dialog-display': display }">
        <slot></slot>
      </div>
      <div class="dialog-footer">
@@ -62,6 +63,10 @@ export default {
    isTitleTranslated: {
      type: Boolean,
      default: false
+    },
+    display: {
+      type: String,
+      default: 'block'
    }
  },
  data() {
@@ -170,7 +175,7 @@ export default {
 };
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .dialog-overlay {
  position: fixed;
  top: 0;
@@ -236,9 +241,13 @@ export default {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
+  display: var(--dialog-display);
+  &[style*="--dialog-display: flex"] {
+    flex-direction: column;
+  }
 }

-.dialog-footer {
+dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
@@ -261,6 +270,7 @@ export default {
  color: #7E471B;
  border: 1px solid #7E471B;
 }
+
 .is-active {
  z-index: 990;
 }
--- a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
+++ b/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>
--- a/frontend/src/dialogues/standard/MessageDialog.vue
+++ b/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>
--- a/frontend/src/i18n/locales/de/socialnetwork.json
+++ b/frontend/src/i18n/locales/de/socialnetwork.json
@@ -231,6 +231,23 @@
                "page": "Seite <<page>> von <<of>>"
            },
            "createNewMesssage": "Antwort senden"
+        },
+        "friendship": {
+            "error": {
+                "alreadyexists": "Die Freundschaftsanfrage existiert bereits"
+            },
+            "state": {
+                "none": "Nicht befreundet",
+                "waiting": "Freundschaftsanfrage gesendet, aber nicht beantwortet",
+                "open": "Freundschaft wurde angefragt",
+                "denied": "Freundschaftsanfrage abgelehnt",
+                "withdrawn": "Freundschaftsanfrage zurückgezogen",
+                "accepted": "Befreundet"
+            },
+            "added": "Du hast eine Freundschaftsanfrage gestellt.",
+            "withdrawn": "Du hast Deine Freundschaftsanfrage zurückgezogen.",
+            "denied": "Du hast die Freundschaftsanfrage abgelehnt.",
+            "accepted": "Die Freundschaft wurde geschlossen."
        }
    }
 }