add small Add additional add friend button

BeatBuzzer · Dec 13, 2024 · e24bae8 · e24bae8
1 parent 68da8d6
commit e24bae8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/components/UsersView.vue b/components/UsersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {type GetFriendsResponse, FriendshipStatus} from "@/types/api/user.friends";
+import {FriendshipStatus, type GetFriendsResponse} from "@/types/api/user.friends";
 import {UserViewType} from "@/types/components/users.view";
 import type {GetUserResponse} from "@/types/api/users";
 
@@ -12,6 +12,14 @@ const props = defineProps({
   users: {
     type: Array as PropType<GetFriendsResponse[] | GetUserResponse[]>,
     required: true,
+  },
+  onAction: {
+    type: Function as PropType<() => void>,
+    required: false
+  },
+  actionLabel: {
+    type: String,
+    required: false
   }
 });
 
@@ -48,7 +56,7 @@ function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is
 
 // Map users conditionally depending on their type
 const mappedUsers: Array<GetUserResponse> = computed(() => {
-  if(!props.users || props.users.length < 1) return [];
+  if (!props.users || props.users.length < 1) return [];
 
   return props.users.map(user => {
     if (isGetFriendsResponse(user)) {
@@ -69,7 +77,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
                 ]"
   >
     <!-- Fixed Conditional Header -->
-    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2 flex justify-between">
       <p v-if="viewType === UserViewType.USERTURN">
         Your Turn
       </p>
@@ -85,6 +93,10 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-else-if="viewType === UserViewType.SENTREQUESTS">
         Sent Friend Requests
       </p>
+      <button v-if="props.onAction && props.actionLabel" class="flex items-center text-gray-700" @click="props.onAction()">
+        <Icon name="mdi:plus"/>
+        {{ props.actionLabel }}
+      </button>
     </div>
 
     <!-- Scrollable User Boxes -->

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
@@ -26,7 +26,7 @@ const addFriend = async () => {
 </script>
 
 <template>
-    <div class="modal-overlay">
+    <div class="modal-overlay z-50">
         <div class="modal">
             <p class="text-3xl font-bold">New friend</p>
             <p class="mb-3">Enter your friends name:</p>

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
@@ -31,14 +31,14 @@ async function getFriendships() {
   <div class="flex flex-col">
     <!-- Buttons Section -->
     <div class="flex justify-center mb-3">
-      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
+      <button v-if="friends.length < 1" class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
       <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
     </div>
 
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
       <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
-        @refresh="getFriendships" />
+        action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
       <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
         @refresh="getFriendships" />
       <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"