Issue 78 make friends components (#107)

* Adding view to test friends * adding in slots * adding icons to friend bar * adding in more slots * button * add new file for temp friend view * fix buttons * fixing button colours and placement * run prettier * fix eslint error * change pathing to have /friends direct to FriendView * remove redundant slots * change v-col into div (and make friends visible without auth for testing) * editing div component * change friend view to require auth * changing div colour * fix styling of leaderboard and friend row * run prettier
codersforcauses · Jan 14, 2025 · ef55806 · ef55806
1 parent b940e28
commit ef55806
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 4 deletions.
diff --git a/client/src/components/FriendComponent.vue b/client/src/components/FriendComponent.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  avatarIndex: number
+  name: string
+  variant?: 'default' | 'acceptReject' | 'dismiss' | 'delete' | 'addFriend' | 'accept'
+}>()
+
+const showDialog = ref(false)
+
+const emit = defineEmits(['accept', 'reject', 'dismiss', 'delete', 'addFriend'])
+</script>
+
+<template>
+  <div class="friend-row">
+    <v-img
+      class="rounded-circle"
+      max-height="32"
+      max-width="32"
+      min-width="32"
+      cover
+      src="https://t4.ftcdn.net/jpg/00/64/67/63/360_F_64676383_LdbmhiNM6Ypzb3FM4PPuFP9rHe7ri8Ju.jpg"
+    ></v-img>
+    <v-text class="me-auto font-weight-bold truncate-name">{{ name }}</v-text>
+
+    <!-- Accept/Reject variant -->
+    <div v-if="variant === 'acceptReject'" class="acceptreject">
+      <v-icon icon="mdi-check" @click="emit('accept')" class="cursor-pointer" />
+      <v-icon icon="mdi-close" @click="emit('reject')" class="cursor-pointer" />
+    </div>
+
+    <!-- Dismiss variant -->
+    <div v-if="variant === 'dismiss'" class="dismiss-action">
+      <v-btn color="primaryBlue" variant="flat" @click="emit('dismiss')" class="dismiss-btn">
+        Dismiss
+      </v-btn>
+    </div>
+
+    <!-- Delete variant -->
+    <div v-if="variant === 'delete'" class="delete-action">
+      <v-btn color="primaryPink" variant="flat" @click="showDialog = true"> Delete </v-btn>
+
+      <!-- Delete confirmation dialog -->
+      <v-dialog v-model="showDialog" max-width="400">
+        <v-card>
+          <strong>Confirm Deletion</strong>
+          <p>Are you sure you want to delete this friend?</p>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primaryBlue" variant="flat" @click="showDialog = false"> Cancel </v-btn>
+            <v-btn color="primaryPink" variant="flat" @click="emit('delete'), (showDialog = false)">
+              Confirm
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+
+    <!-- Add Friend variant -->
+    <div v-if="variant === 'addFriend'" class="add-friend-action">
+      <v-btn color="primaryPink" variant="flat" @click="emit('addFriend')"> Add Friend </v-btn>
+    </div>
+
+    <!-- Accept variant -->
+    <div v-if="variant === 'accept'" class="accept-action">
+      <v-btn color="primaryPink" variant="flat" @click="emit('accept')"> Accept </v-btn>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+strong {
+  font-weight: bold;
+  font-family: poppins;
+  font-size: 24px;
+  color: rgb(var(--v-theme-primaryGrey));
+  padding: 10px;
+}
+
+p {
+  font-weight: bold;
+  font-family: poppins;
+  color: rgb(var(--v-theme-primaryGrey));
+  padding: 10px;
+}
+
+.friend-row {
+  display: flex;
+  gap: 16px;
+  min-height: 50px;
+  padding-left: 20px;
+  padding-right: 20px;
+  border: 1px solid;
+  align-items: center;
+  border-radius: 8px;
+  background-color: rgb(var(--v-theme-creamWhite));
+  border-color: rgb(var(--v-theme-primaryBlue));
+  color: rgb(var(--v-theme-primaryGrey));
+}
+
+.truncate-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.acceptreject {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 8px;
+}
+
+.dismiss-action,
+.delete-action,
+.add-friend-action,
+.accept-action {
+  margin-left: 8px;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
diff --git a/client/src/components/LeaderboardRow.vue b/client/src/components/LeaderboardRow.vue
@@ -9,9 +9,9 @@ defineProps<{
 </script>
 
 <template>
-  <v-col
+  <div
     :class="[isHighlighted ? 'bg-primaryPink' : 'bg-creamWhite text-primaryGrey']"
-    class="rounded-lg d-flex ga-3 px-5 align-center"
+    class="leaderboard-row"
   >
     <v-text class="font-weight-bold">{{ rank }}</v-text>
     <v-img
@@ -26,10 +26,21 @@ defineProps<{
     <v-text :class="[isHighlighted ? 'font-weight-bold' : '']" class="text-right points"
       >{{ points }} pts</v-text
     >
-  </v-col>
+  </div>
 </template>
 
 <style scoped>
+.leaderboard-row {
+  display: flex;
+  gap: 16px;
+  min-height: 50px;
+  padding-left: 20px;
+  padding-right: 20px;
+  align-items: center;
+  border-radius: 8px;
+  color: rgb(var(--v-theme-primaryGrey));
+}
+
 .truncate-name {
   white-space: nowrap;
   overflow: hidden;

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
@@ -5,6 +5,7 @@ import { useModalStore } from '@/stores/modal'
 import PlaceholderView from '../views/PlaceHolderview.vue'
 import LandingView from '@/views/LandingView.vue'
 import LeaderboardView from '@/views/LeaderboardView.vue'
+import FriendView from '@/views/FriendView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,7 +18,7 @@ const router = createRouter({
     {
       path: '/friends',
       name: 'friends',
-      component: PlaceholderView,
+      component: FriendView,
       meta: { requiresAuth: true },
     },
     {

diff --git a/client/src/views/FriendView.vue b/client/src/views/FriendView.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import FriendComponent from '@/components/FriendComponent.vue'
+import { ref } from 'vue'
+
+interface FriendEntry {
+  avatarIndex: number
+  name: string
+}
+
+const pendingFriends = ref<FriendEntry[]>([
+  { avatarIndex: 1, name: 'Marsha Fisher' },
+  { avatarIndex: 2, name: 'Juanita Cormier' },
+])
+
+const currentFriends = ref<FriendEntry[]>([
+  { avatarIndex: 3, name: 'John Smith' },
+  { avatarIndex: 4, name: 'Sarah Johnson' },
+])
+</script>
+
+<template>
+  <v-container>
+    <h2 class="friend-text text-primaryPink mb-4 mb-sm-3 mb-md-4">Friends</h2>
+
+    <h3 class="section-title2 text-primaryBlue">Friend Requests</h3>
+    <v-row class="friend-scroll">
+      <v-col v-for="(friend, index) in pendingFriends" :key="index" cols="12">
+        <FriendComponent
+          :avatar-index="friend.avatarIndex"
+          :name="friend.name"
+          variant="acceptReject"
+        />
+      </v-col>
+    </v-row>
+
+    <h3 class="section-title2 text-primaryBlue mt-6">Friends List</h3>
+    <v-row class="friend-scroll">
+      <v-col v-for="(friend, index) in currentFriends" :key="index" cols="12">
+        <FriendComponent :avatar-index="friend.avatarIndex" :name="friend.name" variant="default" />
+      </v-col>
+      <v-col v-for="(friend, index) in currentFriends" :key="index" cols="12">
+        <FriendComponent :avatar-index="friend.avatarIndex" :name="friend.name" variant="dismiss" />
+      </v-col>
+      <v-col v-for="(friend, index) in currentFriends" :key="index" cols="12">
+        <FriendComponent :avatar-index="friend.avatarIndex" :name="friend.name" variant="delete" />
+      </v-col>
+      <v-col v-for="(friend, index) in currentFriends" :key="index" cols="12">
+        <FriendComponent
+          :avatar-index="friend.avatarIndex"
+          :name="friend.name"
+          variant="addFriend"
+        />
+      </v-col>
+      <v-col v-for="(friend, index) in currentFriends" :key="index" cols="12">
+        <FriendComponent :avatar-index="friend.avatarIndex" :name="friend.name" variant="accept" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped></style>