diff --git a/spec.json b/spec.json
index ad608d501e4712ac0170288ec46ff2533b93dfbc..95468154a5d3f5a038d1aaa8cd3767ebca3055e4 100644
--- a/spec.json
+++ b/spec.json
@@ -43,6 +43,16 @@
}
],
"responses": {
+ "404": {
+ "description": "Friend request not found",
+ "content": {
+ "*/*": {
+ "schema": {
+ "type": "object"
+ }
+ }
+ }
+ },
"200": {
"description": "Friend request successfully accepted",
"content": {
@@ -54,6 +64,47 @@
}
}
}
+ },
+ "delete": {
+ "tags": [
+ "Friend"
+ ],
+ "summary": "Delete a friend or cancel a friend request",
+ "description": "Deletes an existing friend from your friend list or cancels a received friend request.",
+ "operationId": "deleteFriendOrFriendRequest",
+ "parameters": [
+ {
+ "name": "friendId",
+ "in": "path",
+ "required": true,
+ "schema": {
+ "type": "integer",
+ "format": "int64"
+ }
+ }
+ ],
+ "responses": {
+ "404": {
+ "description": "Friend or friend request not found",
+ "content": {
+ "*/*": {
+ "schema": {
+ "type": "object"
+ }
+ }
+ }
+ },
+ "200": {
+ "description": "Friend successfully deleted or friend request cancelled",
+ "content": {
+ "*/*": {
+ "schema": {
+ "type": "object"
+ }
+ }
+ }
+ }
+ }
}
},
"/bank/v1/transaction/norwegian-domestic-payment-to-self": {
@@ -475,7 +526,7 @@
"content": {
"application/json": {
"schema": {
- "$ref": "#/components/schemas/Budget"
+ "type": "object"
}
}
}
@@ -598,8 +649,8 @@
}
}
},
- "404": {
- "description": "User not found",
+ "401": {
+ "description": "Invalid credentials",
"content": {
"application/json": {
"schema": {
@@ -608,8 +659,8 @@
}
}
},
- "401": {
- "description": "Invalid credentials",
+ "404": {
+ "description": "User not found",
"content": {
"application/json": {
"schema": {
@@ -1585,256 +1636,6 @@
}
}
},
- "Badge": {
- "type": "object",
- "properties": {
- "id": {
- "type": "integer",
- "format": "int64"
- },
- "badgeName": {
- "type": "string"
- },
- "criteria": {
- "type": "string"
- },
- "badgeUserList": {
- "type": "array",
- "items": {
- "$ref": "#/components/schemas/BadgeUser"
- }
- }
- }
- },
- "BadgeUser": {
- "type": "object",
- "properties": {
- "badgeUserId": {
- "$ref": "#/components/schemas/BadgeUserId"
- },
- "earnedAt": {
- "type": "string",
- "format": "date-time"
- }
- }
- },
- "BadgeUserId": {
- "type": "object",
- "properties": {
- "badge": {
- "$ref": "#/components/schemas/Badge"
- },
- "user": {
- "$ref": "#/components/schemas/User"
- }
- }
- },
- "Budget": {
- "type": "object",
- "properties": {
- "id": {
- "type": "integer",
- "format": "int64"
- },
- "user": {
- "$ref": "#/components/schemas/User"
- },
- "createdAt": {
- "type": "string",
- "format": "date-time"
- },
- "budgetName": {
- "type": "string"
- },
- "budgetAmount": {
- "type": "number"
- },
- "expenseAmount": {
- "type": "number"
- }
- }
- },
- "Configuration": {
- "type": "object",
- "properties": {
- "id": {
- "type": "integer",
- "format": "int64"
- },
- "commitment": {
- "type": "string",
- "enum": [
- "LITTLE",
- "SOME",
- "MUCH"
- ]
- },
- "experience": {
- "type": "string",
- "enum": [
- "NONE",
- "SOME",
- "EXPERT"
- ]
- },
- "challengeTypes": {
- "type": "array",
- "items": {
- "type": "string",
- "enum": [
- "NO_COFFEE",
- "NO_CAR",
- "SHORTER_SHOWER",
- "SPEND_LESS_ON_FOOD",
- "BUY_USED_CLOTHES",
- "LESS_SHOPPING",
- "DROP_SUBSCRIPTION",
- "SELL_SOMETHING",
- "BUY_USED",
- "EAT_PACKED_LUNCH",
- "STOP_SHOPPING",
- "ZERO_SPENDING",
- "RENT_YOUR_STUFF",
- "MEATLESS",
- "SCREEN_TIME_LIMIT",
- "UNPLUGGED_ENTERTAINMENT"
- ]
- }
- }
- }
- },
- "GrantedAuthority": {
- "type": "object",
- "properties": {
- "authority": {
- "type": "string"
- }
- }
- },
- "Point": {
- "type": "object",
- "properties": {
- "id": {
- "type": "integer",
- "format": "int64"
- },
- "currentPoints": {
- "type": "integer",
- "format": "int32"
- },
- "totalEarnedPoints": {
- "type": "integer",
- "format": "int32"
- }
- }
- },
- "Streak": {
- "type": "object",
- "properties": {
- "id": {
- "type": "integer",
- "format": "int64"
- },
- "currentStreak": {
- "type": "integer",
- "format": "int32"
- },
- "currentStreakCreatedAt": {
- "type": "string",
- "format": "date-time"
- },
- "currentStreakUpdatedAt": {
- "type": "string",
- "format": "date-time"
- },
- "highestStreak": {
- "type": "integer",
- "format": "int32"
- },
- "highestStreakCreatedAt": {
- "type": "string",
- "format": "date-time"
- },
- "highestStreakEndedAt": {
- "type": "string",
- "format": "date-time"
- }
- }
- },
- "User": {
- "type": "object",
- "properties": {
- "id": {
- "type": "integer",
- "format": "int64"
- },
- "firstName": {
- "type": "string"
- },
- "lastName": {
- "type": "string"
- },
- "email": {
- "type": "string"
- },
- "checkingAccount": {
- "$ref": "#/components/schemas/Account"
- },
- "savingsAccount": {
- "$ref": "#/components/schemas/Account"
- },
- "password": {
- "type": "string"
- },
- "createdAt": {
- "type": "string",
- "format": "date-time"
- },
- "role": {
- "type": "string",
- "enum": [
- "USER",
- "ADMIN"
- ]
- },
- "badges": {
- "type": "array",
- "items": {
- "$ref": "#/components/schemas/Badge"
- }
- },
- "point": {
- "$ref": "#/components/schemas/Point"
- },
- "streak": {
- "$ref": "#/components/schemas/Streak"
- },
- "configuration": {
- "$ref": "#/components/schemas/Configuration"
- },
- "enabled": {
- "type": "boolean"
- },
- "username": {
- "type": "string"
- },
- "authorities": {
- "type": "array",
- "items": {
- "$ref": "#/components/schemas/GrantedAuthority"
- }
- },
- "accountNonLocked": {
- "type": "boolean"
- },
- "credentialsNonExpired": {
- "type": "boolean"
- },
- "accountNonExpired": {
- "type": "boolean"
- }
- }
- },
"ExceptionResponse": {
"type": "object",
"properties": {
diff --git a/src/api/index.ts b/src/api/index.ts
index 384ad7693642773834ae4b5fdbd8a2654b9e378e..d86adbf0fe3bd391b7cd8c97b974dfdb9f74f97f 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -11,18 +11,13 @@ export type { Account } from './models/Account';
export type { AccountRequestDTO } from './models/AccountRequestDTO';
export type { AccountResponseDTO } from './models/AccountResponseDTO';
export type { AuthenticationResponse } from './models/AuthenticationResponse';
-export type { Badge } from './models/Badge';
-export type { BadgeUser } from './models/BadgeUser';
-export type { BadgeUserId } from './models/BadgeUserId';
export type { BankAccountDTO } from './models/BankAccountDTO';
export type { BankProfile } from './models/BankProfile';
export type { BankProfileDTO } from './models/BankProfileDTO';
export type { BankProfileResponseDTO } from './models/BankProfileResponseDTO';
-export type { Budget } from './models/Budget';
export type { BudgetRequestDTO } from './models/BudgetRequestDTO';
export type { BudgetResponseDTO } from './models/BudgetResponseDTO';
export type { ChallengeDTO } from './models/ChallengeDTO';
-export { Configuration } from './models/Configuration';
export type { ConfigurationDTO } from './models/ConfigurationDTO';
export type { CreateGoalDTO } from './models/CreateGoalDTO';
export type { DailyChallengeProgressDTO } from './models/DailyChallengeProgressDTO';
@@ -30,7 +25,6 @@ export type { ExceptionResponse } from './models/ExceptionResponse';
export type { ExpenseRequestDTO } from './models/ExpenseRequestDTO';
export type { ExpenseResponseDTO } from './models/ExpenseResponseDTO';
export type { GoalDTO } from './models/GoalDTO';
-export type { GrantedAuthority } from './models/GrantedAuthority';
export type { LeaderboardDTO } from './models/LeaderboardDTO';
export type { LeaderboardEntryDTO } from './models/LeaderboardEntryDTO';
export type { LoginRequest } from './models/LoginRequest';
@@ -38,12 +32,9 @@ export { ParticipantDTO } from './models/ParticipantDTO';
export type { ParticipantUserDTO } from './models/ParticipantUserDTO';
export type { PasswordResetDTO } from './models/PasswordResetDTO';
export type { PasswordUpdateDTO } from './models/PasswordUpdateDTO';
-export type { Point } from './models/Point';
export type { ProfileDTO } from './models/ProfileDTO';
export type { SignUpRequest } from './models/SignUpRequest';
-export type { Streak } from './models/Streak';
export type { TransactionDTO } from './models/TransactionDTO';
-export { User } from './models/User';
export type { UserDTO } from './models/UserDTO';
export type { UserUpdateDTO } from './models/UserUpdateDTO';
diff --git a/src/api/models/Badge.ts b/src/api/models/Badge.ts
deleted file mode 100644
index 50014a6bafe26372c8a1de0590202b0d0fdd9a13..0000000000000000000000000000000000000000
--- a/src/api/models/Badge.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { BadgeUser } from './BadgeUser';
-export type Badge = {
- id?: number;
- badgeName?: string;
- criteria?: string;
- badgeUserList?: Array<BadgeUser>;
-};
-
diff --git a/src/api/models/BadgeUser.ts b/src/api/models/BadgeUser.ts
deleted file mode 100644
index 46d6ec47b928849f1765ef5e0a15cca35567cfbb..0000000000000000000000000000000000000000
--- a/src/api/models/BadgeUser.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { BadgeUserId } from './BadgeUserId';
-export type BadgeUser = {
- badgeUserId?: BadgeUserId;
- earnedAt?: string;
-};
-
diff --git a/src/api/models/BadgeUserId.ts b/src/api/models/BadgeUserId.ts
deleted file mode 100644
index d89476aa54dcae9fad5ba96e9e7a6e2be2eb1c71..0000000000000000000000000000000000000000
--- a/src/api/models/BadgeUserId.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { Badge } from './Badge';
-import type { User } from './User';
-export type BadgeUserId = {
- badge?: Badge;
- user?: User;
-};
-
diff --git a/src/api/models/Budget.ts b/src/api/models/Budget.ts
deleted file mode 100644
index 6103ac46760fb282236f05a0ba77eb3a5031cf2f..0000000000000000000000000000000000000000
--- a/src/api/models/Budget.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { User } from './User';
-export type Budget = {
- id?: number;
- user?: User;
- createdAt?: string;
- budgetName?: string;
- budgetAmount?: number;
- expenseAmount?: number;
-};
-
diff --git a/src/api/models/Configuration.ts b/src/api/models/Configuration.ts
deleted file mode 100644
index b932eb0ee7940f855a894f6b0117751b4d3e0156..0000000000000000000000000000000000000000
--- a/src/api/models/Configuration.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type Configuration = {
- id?: number;
- commitment?: Configuration.commitment;
- experience?: Configuration.experience;
- challengeTypes?: Array<'NO_COFFEE' | 'NO_CAR' | 'SHORTER_SHOWER' | 'SPEND_LESS_ON_FOOD' | 'BUY_USED_CLOTHES' | 'LESS_SHOPPING' | 'DROP_SUBSCRIPTION' | 'SELL_SOMETHING' | 'BUY_USED' | 'EAT_PACKED_LUNCH' | 'STOP_SHOPPING' | 'ZERO_SPENDING' | 'RENT_YOUR_STUFF' | 'MEATLESS' | 'SCREEN_TIME_LIMIT' | 'UNPLUGGED_ENTERTAINMENT'>;
-};
-export namespace Configuration {
- export enum commitment {
- LITTLE = 'LITTLE',
- SOME = 'SOME',
- MUCH = 'MUCH',
- }
- export enum experience {
- NONE = 'NONE',
- SOME = 'SOME',
- EXPERT = 'EXPERT',
- }
-}
-
diff --git a/src/api/models/GrantedAuthority.ts b/src/api/models/GrantedAuthority.ts
deleted file mode 100644
index 5fa268a0a717b478a8b6abcf5ccf8ccd2ecf5ae8..0000000000000000000000000000000000000000
--- a/src/api/models/GrantedAuthority.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type GrantedAuthority = {
- authority?: string;
-};
-
diff --git a/src/api/models/Point.ts b/src/api/models/Point.ts
deleted file mode 100644
index 971f5ff1cf23bbe7dff322dc589cafc38706497d..0000000000000000000000000000000000000000
--- a/src/api/models/Point.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type Point = {
- id?: number;
- currentPoints?: number;
- totalEarnedPoints?: number;
-};
-
diff --git a/src/api/models/Streak.ts b/src/api/models/Streak.ts
deleted file mode 100644
index d228c48e7a51d763f5ddcbd86d2143144c36b60a..0000000000000000000000000000000000000000
--- a/src/api/models/Streak.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type Streak = {
- id?: number;
- currentStreak?: number;
- currentStreakCreatedAt?: string;
- currentStreakUpdatedAt?: string;
- highestStreak?: number;
- highestStreakCreatedAt?: string;
- highestStreakEndedAt?: string;
-};
-
diff --git a/src/api/models/User.ts b/src/api/models/User.ts
deleted file mode 100644
index 7f5c5051e6dfc83847a43a8e3cf8f3424e7020d6..0000000000000000000000000000000000000000
--- a/src/api/models/User.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { Account } from './Account';
-import type { Badge } from './Badge';
-import type { Configuration } from './Configuration';
-import type { GrantedAuthority } from './GrantedAuthority';
-import type { Point } from './Point';
-import type { Streak } from './Streak';
-export type User = {
- id?: number;
- firstName?: string;
- lastName?: string;
- email?: string;
- profileImage?: number;
- checkingAccount?: Account;
- savingsAccount?: Account;
- password?: string;
- createdAt?: string;
- role?: User.role;
- badges?: Array<Badge>;
- point?: Point;
- streak?: Streak;
- configuration?: Configuration;
- enabled?: boolean;
- username?: string;
- authorities?: Array<GrantedAuthority>;
- accountNonLocked?: boolean;
- credentialsNonExpired?: boolean;
- accountNonExpired?: boolean;
-};
-export namespace User {
- export enum role {
- USER = 'USER',
- ADMIN = 'ADMIN',
- }
-}
-
diff --git a/src/api/services/FriendService.ts b/src/api/services/FriendService.ts
index 6754fc894ccd0732dc1c827a6ae2f6f5277dd310..027c6a7e55949b0ab3663cea767d451121593f3d 100644
--- a/src/api/services/FriendService.ts
+++ b/src/api/services/FriendService.ts
@@ -24,6 +24,31 @@ export class FriendService {
path: {
'friendId': friendId,
},
+ errors: {
+ 404: `Friend request not found`,
+ },
+ });
+ }
+ /**
+ * Delete a friend or cancel a friend request
+ * Deletes an existing friend from your friend list or cancels a received friend request.
+ * @returns any Friend successfully deleted or friend request cancelled
+ * @throws ApiError
+ */
+ public static deleteFriendOrFriendRequest({
+ friendId,
+ }: {
+ friendId: number,
+ }): CancelablePromise<Record<string, any>> {
+ return __request(OpenAPI, {
+ method: 'DELETE',
+ url: '/api/friends/{friendId}',
+ path: {
+ 'friendId': friendId,
+ },
+ errors: {
+ 404: `Friend or friend request not found`,
+ },
});
}
/**
diff --git a/src/api/services/UserService.ts b/src/api/services/UserService.ts
index 1b05abf91ec94a332c863d9f963260f55feccbe0..e7b80041bff94cbc4a17e041ead118b85b9db970 100644
--- a/src/api/services/UserService.ts
+++ b/src/api/services/UserService.ts
@@ -4,7 +4,6 @@
/* eslint-disable */
import type { Account } from '../models/Account';
import type { BankAccountDTO } from '../models/BankAccountDTO';
-import type { Budget } from '../models/Budget';
import type { BudgetRequestDTO } from '../models/BudgetRequestDTO';
import type { BudgetResponseDTO } from '../models/BudgetResponseDTO';
import type { ExpenseRequestDTO } from '../models/ExpenseRequestDTO';
@@ -112,14 +111,14 @@ export class UserService {
/**
* Create a new budget
* Create a new budget with based on the budget request
- * @returns Budget Successfully created new budget
+ * @returns any Successfully created new budget
* @throws ApiError
*/
public static createBudget({
requestBody,
}: {
requestBody: BudgetRequestDTO,
- }): CancelablePromise<Budget> {
+ }): CancelablePromise<Record<string, any>> {
return __request(OpenAPI, {
method: 'POST',
url: '/api/budget/create',
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index f37dfe4b237c2f8d9f20cc87c29973874f2ea33b..ae17297ad9dbe29a6a9ad36e72cda666db433fcd 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -1,376 +1,84 @@
<template>
- <!-- Refactor with a for-loop -->
<div class="container">
<h1>Your Friends</h1>
<button class="btn btn-primary pull-right my-3" @click="addFriend">+ Add Friend</button>
<div class="row">
- <div class="col-lg-3">
+ <div class="col-lg-3" v-for="friend in friends" :key="friend.id">
<div class="card card-one">
<div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
+ <div v-if="friend.profileImage" class="avatar">
+ <img :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="">
</div>
- </div>
- <h3>Amillie Price</h3>
- <a href="#" @click="navigateToFriend(46)" class="btn stretched-link"></a>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
- </div>
- </div>
- <h3>Victoria Fox</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
- </div>
- </div>
- <h3>Coray Shoe</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
- </div>
- </div>
- <h3>Christiano Mooray</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="row">
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="">
- </div>
- </div>
- <h3>Lynda West</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
- </div>
- </div>
- <h3>Jayden G</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
+ <div v-else class="avatar">
+ <img :src="'../src/assets/userprofile.png'" alt="">
</div>
</div>
- <h3>Julia Ann</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
- </div>
- </div>
- <h3>Ava Ray</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="">
- </div>
- </div>
- <h3>Maria Shwenstiger</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
- </div>
- </div>
- <h3>Kate Perry</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
+ <h3><a href="#" class="btn stretched-link" id="profileName" @click="navigateToFriend(friend.id)">{{ friend.firstName }}</a></h3>
+ <div class="desc">{{ friend.firstName }} {{ friend.lastName }}</div>
<div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
+ <a class="text removeFriend" data-bs-toggle="collapse"
+ :href="'#collapseExample' + friend.id" role="button" aria-expanded="false" :aria-controls="'collapseExample' + friend.id">
See more
</a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="">
- </div>
- </div>
- <h3>Robart Gibbs</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
+ <div class="collapse" :id="'collapseExample' + friend.id">
+ <button class="btn btn-danger" @click="removeFriend(friend.id)">
+ <h5><img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
- <div class="col-lg-3">
- <div class="card card-one">
- <div class="header">
- <div class="avatar">
- <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="">
- </div>
- </div>
- <h3>Anna Winslet</h3>
- <div class="desc">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
- </div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
- aria-expanded="false" aria-controls="collapseExample">
- See more
- </a>
-
- <div class="collapse" id="collapseExample">
- <button class="btn btn-danger">
-
- <h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
- </div>
- </div>
- </div>
-
- </div>
- <nav aria-label="Page navigation example">
- <ul class="pagination">
- <li class="page-item"><a class="page-link" href="#">Previous</a></li>
- <li class="page-item"><a class="page-link" href="#">1</a></li>
- <li class="page-item"><a class="page-link" href="#">2</a></li>
- <li class="page-item"><a class="page-link" href="#">3</a></li>
- <li class="page-item"><a class="page-link" href="#">Next</a></li>
- </ul>
- </nav>
</div>
</div>
</template>
-<script setup lang="ts">
-import { useRouter, useRoute } from 'vue-router';
-import { ref, onMounted, computed } from "vue";
-import { useUserInfoStore } from '@/stores/UserStore';
-
-const userStore = useUserInfoStore();
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { FriendService } from '@/api';
+import type { UserDTO } from '@/api';
-const createdQuizzes = ref(1);
-const createdQuizzesIsEmpty = ref(null);
-const coAuthorQuizzes = ref(null);
-const coAuthorQuizzesIsEmpty = ref(null);
const router = useRouter();
-
-let userid = ref("");
-
-async function fetchUserData() {
-
-}
+const friends = ref();
function addFriend() {
router.push('/add-friend');
}
-// Define the navigateToQuiz method
-const navigateToFriend = (friendID :number) => {
-router.push('/profile/' + friendID)
+const navigateToFriend = (friendID: number) => {
+ router.push('/profile/' + friendID);
+};
+
+const removeFriend = async (friendID: number) => {
+ try {
+ // Attempt to delete the friend from the backend.
+ await FriendService.deleteFriendOrFriendRequest({ friendId: friendID });
+ // Update the friends list by filtering out the removed friend.
+ friends.value = friends.value.filter((friend: UserDTO) => friend.id !== friendID);
+ } catch (error) {
+ console.error('Failed to remove friend', error);
+ }
};
-const removeFriend = (friendID: number) => {
+const setupFriends = async () => {
+ try {
+ const response = await FriendService.getFriends();
+ friends.value = response;
+ console.log(response);
+ } catch (error) {
+ console.error('Failed to fetch friends', error);
+ }
};
-onMounted(fetchUserData);
+onMounted(() => {
+ setupFriends();
+});
</script>
+
<style scoped>
body {
background-color: #f0f6ff;
@@ -660,4 +368,10 @@ ul.friend-list .right p {
align-items: center;
flex-direction: column;
}
+
+#profileName {
+ font-size: 1.5rem;
+ font-weight: 600;
+ width: 100%;
+}
</style>
\ No newline at end of file