Feat/126/user page

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-view></router-view>
+  <router-view :key="$route.fullPath"></router-view>
 </template>
 
 <script>

src/components/friend/list/FriendListVue.vue

@@ -4,13 +4,14 @@
     <div v-if="friends.length > 0">
       <div v-for="friend in friends" v-bind:key="friend.uuid">
         <FriendListCard
+            :readonly="readonly"
             v-bind:friend="friend"
             v-on:delete-friend="deleteFriend($event)"
         />
       </div>
     </div>
     <div v-else>
-      <p class="text-center">You don't have any friends yet :/</p>
+      <p class="text-center">{{emptyList}}</p>
     </div>
   </div>
 </template>
@@ -28,24 +29,50 @@ import countryList from "@/utils/countries.json";
   components: {
     FriendListCard,
     FriendListTitle,
-  }
+  },
+  props: {
+    readonly: {
+      type: Boolean,
+      required: true,
+      default: true
+    },
+  },
 })
 export default class FriendListVue extends Vue {
+  private readonly!: boolean;
   private friends: Array<Friend> = [];
   private countries = countryList;
+  private emptyList = "You don't have any friend yet";
 
   mounted() {
+    // Cas où l'utilisateur connecté n'a pas le droit de modifier les éléments de la page
+    if(this.readonly) {
+      this.emptyList = "";
+      FriendshipController
+        .getUserFriends(this.$route.params['uuid'] as string)
+        .then(friends => {
+          this.friends = friends;
+          this.friends.forEach((friend) => {
+            friend.country = this.countries
+                .find((country) => country.name === friend.country)
+                ?.image ?? "";
+          });
+        });
+
+      return;
+    }
     FriendshipController.getMyFriends()
-      .then((friends) => {
-        this.friends = friends;
-        this.friends.forEach((friend) => {
-          friend.country = this.countries.find((country) => country.name === friend.country)?.image ?? "";
+        .then((friends) => {
+          this.friends = friends;
+          this.friends.forEach((friend) => {
+            friend.country = this.countries.find((country) => country.name === friend.country)?.image ?? "";
+          });
+        })
+        .catch((reason) => {
+          //TODO afficher un message d'erreur;
+          // console.error(reason);
         });
-      })
-      .catch((reason) => {
-        //TODO afficher un message d'erreur;
-        // console.error(reason);
-      });
+
   }
 
   deleteFriend(friendUuid: string){

src/components/friend/list/atoms/FriendListName.vue

@@ -1,6 +1,9 @@
 <template>
-  <div>
-    <a v-on:click="visitFriend(uuid)" class="link">
+  <div class="mt-auto mb-auto">
+    <a
+        v-on:click="visitFriend(uuid)"
+        class="link position-relative "
+    >
       <p>{{username}}</p>
       <img :src="flagUrl">
     </a>

src/components/friend/list/atoms/FriendListRemove.vue

@@ -1,5 +1,8 @@
 <template>
-  <a v-on:click="unfriend(friendUuid)" class="btn-close btn-rounded btn-sm btn"></a>
+  <a
+      v-on:click="unfriend(friendUuid)"
+      class="btn-close btn-rounded btn-sm btn position-relative"
+  ></a>
 </template>
 
 <script lang="ts">

src/components/friend/list/molecules/FriendListCard.vue

@@ -7,6 +7,7 @@
         :flag-url="friend.country"
     />
     <FriendListRemove
+        v-if="!readonly"
         v-on:delete-friend="$emit('delete-friend', $event)"
         v-bind:friend-uuid="friend.uuid"
     />
@@ -24,7 +25,8 @@ import {Friend} from "@/object/Friend";
   name:"FriendListCard",
   components: {FriendListRemove, FriendListName, FriendListPicture},
   props: {
-    friend: Friend
+    friend: Friend,
+    readonly: Boolean
   }
 })
 export default class FriendListCard extends Vue {

src/components/group/list/FindGroupsVue.vue

@@ -1,6 +1,8 @@
 <template>
   <HeaderVue/>
-  <GroupListVue/>
+  <GroupListVue
+      :readonly="false"
+  />
 </template>
 
 <script>

src/components/group/list/GroupListVue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main-vue group-list">
     <GroupListTitle class="m-0" :title="groupsTitle"/>
-    <div class="d-flex justify-content-center">
+    <div v-if="!readonly" class="d-flex justify-content-center">
       <router-link to="/group/creation">
         <button
             class="btn btn-sm btn-success">
@@ -13,6 +13,7 @@
     <div v-if="groups.length > 0">
       <div v-for="group in groups" v-bind:key="group.uuid">
         <GroupListCard
+            :readonly="readonly"
             v-bind:group="group"
             v-bind:is-public="false"
             v-on:leave-group="quitGroup($event)"
@@ -21,7 +22,7 @@
       </div>
     </div>
     <div v-else>
-      <p class="text-center mt-3">You're not part of a group yet :/</p>
+      <p class="text-center mt-3">{{emptyList}}</p>
     </div>
   </div>
   <div v-if="publicGroups.length > 0" class="main-vue group-list">
@@ -49,16 +50,33 @@ import {UserProfileGroup} from "@/object/UserProfileGroup";
     GroupListCard,
     GroupListTitle,
     MDBInput
+  },
+  props: {
+    readonly: {
+      type: Boolean,
+      default: true
+    }
   }
 })
 export default class GroupListVue extends Vue {
+  private readonly!: boolean;
+  private emptyList = "You're not part of a group yet :/";
   private groupsTitle: string = 'Group list';
   private groups: Array<UserProfileGroup> = [];
   private publicGroupsTitle: string = 'Public groups';
   private publicGroups: Array<UserProfileGroup> = [];
 
   mounted() {
     const routePath = this.$route.path;
+    if(this.readonly){
+      const userUuid = this.$route.params['uuid'] as string;
+      this.emptyList = ""
+      GroupController.getUserGroups(userUuid)
+          .then(groups => {
+            this.groups = groups;
+          });
+      return;
+    }
 
     GroupController
       .getUserGroups()

src/components/group/list/molecules/GroupListCard.vue

@@ -6,17 +6,19 @@
         :group-name="group.name"
         :group-uuid="group.uuid"
     />
-    <div v-if="group.userIsGroupCreator" class="group-delete">
-      <GroupListRemove
-          v-on:remove-group="$emit('remove-group',$event)"
-          v-bind:group-uuid="group.uuid"/>
+    <div v-if="!readonly">
+      <div v-if="group.userIsGroupCreator" class="group-delete">
+        <GroupListRemove
+            v-on:remove-group="$emit('remove-group',$event)"
+            v-bind:group-uuid="group.uuid"/>
+      </div>
+      <div v-else-if="!isPublic" class="group-leave">
+        <GroupListLeave
+            v-on:remove-group="$emit('leave-group',$event)"
+            v-bind:group-uuid="group.uuid"/>
+      </div>
+      <div v-else class="group-delimiter" />
     </div>
-    <div v-else-if="!isPublic" class="group-leave">
-      <GroupListLeave
-          v-on:remove-group="$emit('leave-group',$event)"
-          v-bind:group-uuid="group.uuid"/>
-    </div>
-    <div v-else class="group-delimiter" />
   </div>
 </template>
 
@@ -42,6 +44,10 @@ import {UserProfileGroup} from "@/object/UserProfileGroup";
       type: Boolean,
       required: true,
       default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: true
     }
   }
 })

src/components/user/profile/UserProfileHomeVue.vue

@@ -25,11 +25,12 @@
           class="mt-3 me-2"
       />
       <FriendListVue
+          :readonly="readonly"
           :key="reload"
           class="mt-3 me-2"
       />
     </div>
-    <GroupListVue class="mt-3 ms-2"/>
+    <GroupListVue :readonly="readonly" class="mt-3 ms-2"/>
   </div>
   </div>
 
@@ -76,6 +77,7 @@ export default class UserProfileHomeVue extends Vue {
   private reload = false;
   private userAge = "";
   private userSex = "";
+  private readonly = false;
 
   mounted() {
     if(!this.user) {

src/components/user/user/UserHomeVue.vue

@@ -16,6 +16,16 @@
         />
       </MDBCardBody>
     </MDBCard>
+    <div class="d-flex justify-content-center">
+      <div class="flex-column">
+        <FriendListVue
+            :readonly="readonly"
+            class="mt-3 me-2"/>
+      </div>
+      <GroupListVue
+          :readonly="readonly"
+          class="mt-3 ms-2"/>
+    </div>
   </div>
 </template>
 
@@ -33,6 +43,8 @@ import {
 } from 'mdb-vue-ui-kit';
 import {inject} from "vue";
 import {FriendshipController} from "@/controller/FriendshipController";
+import GroupListVue from "@/components/group/list/GroupListVue.vue";
+import FriendListVue from "@/components/friend/list/FriendListVue.vue";
 
 @Options({
   name: "UserHomeVue",
@@ -42,7 +54,9 @@ import {FriendshipController} from "@/controller/FriendshipController";
     HeaderVue,
     MDBCard,
     MDBCardHeader,
-    MDBCardBody
+    MDBCardBody,
+    GroupListVue,
+    FriendListVue,
   }
 })
 export default class UserHomeVue extends Vue {
@@ -52,7 +66,9 @@ export default class UserHomeVue extends Vue {
   private userAge = "";
   private userSex = "";
   private friendShipStatus: string|null = null;
-  private requestId: string|null = null
+  private requestId: string|null = null;
+  private readonly = true;
+
 
   mounted() {
     this.userUuid = this.$route.params['uuid'] as string;

src/controller/APIController.ts

@@ -164,7 +164,7 @@ class APIController {
                         item.username,
                         item.country,
                         picture,
-                        item.userUuid
+                        item.uuid
                     );
                     friends.push(friend);
                 })

src/controller/FriendshipController.ts

@@ -37,7 +37,7 @@ export class FriendshipController {
         })
             .then(response => {
                 if(response.status !== 200) {
-                    throw new Error("Error while trying to fetch posts");
+                    throw new Error("Error while trying to fetch friends");
                 }
 
                 return response.json();
@@ -60,6 +60,33 @@ export class FriendshipController {
             })
     }
 
+    static getUserFriends(userUuid: string): Promise<Array<Friend>> {
+        const token = sessionStorage.getItem('access_token');
+        const friends: Array<Friend> = [];
+
+        return fetch(`${process.env.VUE_APP_AUTH_API_URL}/users/${userUuid}/friends`, {
+            headers: { Authorization: "Bearer " + token }
+        })
+            .then(response => {
+                if(response.status !== 200) {
+                    throw new Error("Error while trying to fetch friends");
+                }
+                return response.json();
+            })
+            .then(json => {
+                json.forEach((item: any) => {
+                    const friend = new Friend(
+                        item.username,
+                        item.country,
+                        item.picture,
+                        item.uuid
+                    );
+                    friends.push(friend);
+                })
+                return friends
+            })
+    }
+
     static getFriendRequests(): Promise<Array<FriendRequest>> {
         const token = sessionStorage.getItem('access_token');
         const requests: Array<FriendRequest> = [];