diff --git a/src/components/UserProfileComponents/RatingComponents/Rating.vue b/src/components/UserProfileComponents/RatingComponents/Rating.vue
index 6efa3b014f4c175b7af950ddb36119a7029f60f9..6b35e957e56a88604530d108196e954c57a7df8e 100644
--- a/src/components/UserProfileComponents/RatingComponents/Rating.vue
+++ b/src/components/UserProfileComponents/RatingComponents/Rating.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- Shows rating, if no rating found, tells the user that no rating is registered -->
<ul v-if="isNaN(rating)" class="flex justify-center">
<li>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
@@ -29,12 +30,6 @@
></path>
</svg>
</li>
- <li>
- <!-- Trenger vi å vise i tekst når vi har stjerner? -->
- <!-- <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
- {{ rating }} out of 5
- </p> -->
- </li>
</ul>
</template>
@@ -46,6 +41,7 @@ export default {
ratingType: String,
},
methods: {
+ //Fills the rating stars
getFill(i) {
if (i <= this.rating) {
return "w-5 h-5 text-warn-medium";
diff --git a/src/components/UserProfileComponents/RatingComponents/RatingModal.vue b/src/components/UserProfileComponents/RatingComponents/RatingModal.vue
index 419d4f9e4d6ec8cdb2545efc701f4f602ae26bf3..1fa16c24680a9564da49013a5d9c42738a19c974 100644
--- a/src/components/UserProfileComponents/RatingComponents/RatingModal.vue
+++ b/src/components/UserProfileComponents/RatingComponents/RatingModal.vue
@@ -1,5 +1,5 @@
<template>
- <!-- Main modal -->
+ <!-- Main modal for rating -->
<div
v-if="visible"
class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
@@ -58,6 +58,7 @@
/>
</div>
+ <!-- 5 rating stars -->
<div class="flex items-center justify-center mb-8">
<svg
class="w-10 h-10 text-warn cursor-pointer"
@@ -121,13 +122,13 @@
</svg>
</div>
+ <!-- Button for submitting the rating -->
<div class="flex justify-center mb-4">
<Button :text="'Send en vurdering'" @click="sendRating"></Button>
</div>
<!-- Modal footer -->
<div class="rounded-b border-t border-gray-200 dark:border-gray-600">
- <!-- Slot: Add any html you want here -->
<slot />
</div>
</div>
@@ -166,6 +167,7 @@ export default {
Button,
},
methods: {
+ //A method for setting the rating
setRating(ratingNumber) {
this.score = ratingNumber;
for (let i = 0; i < 5; i++) {
@@ -179,6 +181,10 @@ export default {
close() {
this.$emit("close");
},
+ /**
+ * A method for sending the rating when button is clicked.
+ * It posts the rating to the db.
+ */
async sendRating() {
const ratingInfo = {
score: this.score,
diff --git a/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue b/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
index c05823dcee3cd9a5bdcaf4661ec727d755346432..c3745f5821a630462d7f553456931eca1e3ba742 100644
--- a/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
+++ b/src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue
@@ -1,16 +1,24 @@
<template>
+ <!-- A card for a rent history containing the item's title,
+ name of the person who rented it, dates/renting period, and a button
+ to rate if not already rated it. -->
<div
class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50"
>
+ <!-- Title -->
<p class="font-bold mx-4" id="title">
{{ historyItem.listing.title }}
</p>
+
+ <!-- Name of the user who rented -->
<div class="flex flex-row items-center">
<div class="flex flex-col px-4 flex-1">
<router-link :to="{ path: '/profile/' + user.userId }">
Leid til: {{ user.firstName }} {{ user.lastName }}
</router-link>
</div>
+
+ <!-- Period it was rented for -->
<div class="flex flex-col flex-1">
<div>
Fra:
@@ -20,6 +28,8 @@
Til: {{ this.getDateString(historyItem.toTime, isMultipleDays) }}
</div>
</div>
+
+ <!-- Button to rate -->
<colored-button
v-if="!isRated"
:text="'Vurder'"
@@ -74,12 +84,16 @@ export default {
currentUser() {
return parseCurrentUser();
},
+ //Checks if the rent period was multiple days or not
isMultipleDays() {
if (this.historyItem.toTime - this.historyItem.fromTime < 86400000) {
return false;
}
return true;
},
+ /**
+ * computed the total price based on how long the renting period was.
+ */
price() {
if (this.isMultipleDays) {
let numDays = Math.round(
@@ -89,11 +103,17 @@ export default {
}
return this.historyItem.listing.pricePerDay;
},
+ /**
+ * Checks if the user rented its own item
+ */
currentUserIsRenter() {
return this.isCurrentUser(this.historyItem.renterId);
},
},
methods: {
+ /**
+ * returns a date as a string
+ */
getDateString(milliseconds) {
let today = new Date();
let date = new Date(milliseconds);
@@ -111,6 +131,9 @@ export default {
return id == this.currentUser.accountId;
},
},
+ /**
+ * Gets the user and checks if a rating is saved, before mounting the page.
+ */
async beforeCreate() {
if (this.currentUserIsRenter) {
this.user = await userService.getUserFromId(
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index ac1736b5e713e14625729087f0493c4b859e55bf..5ae1e7558efea5cbb62b872074e110c0840e9f34 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -1,4 +1,6 @@
<template>
+ <!-- Shows all the items a user has posted with search and pagination.
+ Includes a dropdown menu for editing or deleting an item. -->
<div id="headline" class="text-xl md:text-2xl text-primary-light font-medium">
Mine gjenstander
</div>
@@ -40,13 +42,15 @@
:key="item"
>
<div class="w-full">
- <ItemCard
- id="ItemCardPage"
- class="ItemCard w-full h-full"
- :item="item"
- />
- </div>
- <TripleDotButton class="DotButton" @click="openDotMenu(item)" />
+ <ItemCard
+ id="ItemCardPage"
+ class="ItemCard w-full h-full"
+ :item="item"
+ />
+ </div>
+
+ <!-- Dropdown menu with options for editing an item and deleting an item -->
+ <TripleDotButton class="DotButton" @click="openDotMenu(item)"/>
<div
v-show="item.toggle"
@@ -78,6 +82,8 @@
</div>
</div>
+ <!-- A waring asking the user if it is sure it wants to delete the item
+ with options to go ahead with the deleting or to cancel the delete. -->
<CustomFooterModal
@close="this.readyToDelete = false"
:visible="readyToDelete"
@@ -86,14 +92,14 @@
>
<div class="flex justify-center p-2">
<ColoredButton
- id="#cancelDeleteButton"
+ id="#cancelDeleteButton1"
:text="'Avbryt'"
@click="cancelDelete"
class="bg-gray-500 m-2"
></ColoredButton>
<ColoredButton
- id="confirmDeleteButton"
+ id="confirmDeleteButton1"
@click="deleteItem"
:text="'Slett'"
class="m-2 bg-error-medium"
@@ -116,8 +122,9 @@
:item="item"
/>
</div>
- <TripleDotButton class="DotButton" @click="openDotMenu(item)" />
+ <!-- Dropdown menu with options for editing an item and deleting an item -->
+ <TripleDotButton class="DotButton" @click="openDotMenu(item)"/>
<div
v-show="item.toggle"
class="options z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
@@ -147,6 +154,9 @@
</ul>
</div>
</div>
+
+ <!-- A waring asking the user if it is sure it wants to delete the item
+ with options to go ahead with the deleting or to cancel the delete. -->
<CustomFooterModal
@close="this.readyToDelete = false"
:visible="readyToDelete"
@@ -172,6 +182,7 @@
</CustomFooterModal>
</div>
</div>
+
<!-- pagination -->
<div class="flex justify-center" v-if="showItems">
<PaginationTemplate
@@ -220,6 +231,7 @@ export default {
search: "",
readyToDelete: false,
dropdown: false,
+
//Variables connected to pagination
currentPage: 0,
pageSize: 12,
@@ -227,6 +239,9 @@ export default {
};
},
computed: {
+ /**
+ * Searchs items based on their title, address and price per day.
+ */
searchedItems() {
let filteredItems = [];
@@ -264,7 +279,10 @@ export default {
cancelDelete() {
this.readyToDelete = false;
},
- //Pagination
+ /**
+ * 2 methods related to pagination. Updates page and updates
+ * visible items on page.
+ */
updatePage(pageNumber) {
this.currentPage = pageNumber;
this.updateVisibleTodos();
@@ -280,6 +298,7 @@ export default {
this.updatePage(this.currentPage - 1);
}
},
+
goToDeleteItem(item) {
this.chosenItem = item;
this.readyToDelete = true;
@@ -288,8 +307,11 @@ export default {
await UserService.setListingToDeleted(this.chosenItem);
this.$router.go(0);
},
+
+ /**
+ * This method triggers when search input field is changed
+ */
searchWritten: function () {
- //This method triggers when search input field is changed
if (this.search.length > 0) {
this.showItems = false;
this.showSearchedItems = true;
@@ -299,6 +321,11 @@ export default {
}
},
},
+
+ /**
+ * Gets userlistings and prepares the pagination by
+ * updating the items to be visible.
+ */
async beforeMount() {
await this.getUserListingsFromAPI();
this.updateVisibleTodos();
diff --git a/src/components/UserProfileComponents/UserListItemCard.vue b/src/components/UserProfileComponents/UserListItemCard.vue
index a39ae002e6b52a5547a9c0c198b57481d64faf72..c94d796903940d7db729648f465677f385cc8464 100644
--- a/src/components/UserProfileComponents/UserListItemCard.vue
+++ b/src/components/UserProfileComponents/UserListItemCard.vue
@@ -1,4 +1,7 @@
<template>
+ <!-- A card for displaying a user in a list.
+ Displays a user's profile picture, name, rating and some
+ buttons based on where the list is being shown. -->
<div
class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
>
@@ -96,6 +99,10 @@ export default {
buttons: Array,
},
computed: {
+ /**
+ * returns the user's profile picture. If the user does not have any
+ * profile picture the default profile picture is returned.
+ */
getProfilePicture() {
if (this.user.picture !== "" && this.user.picture != null) {
return this.user.picture;
@@ -104,18 +111,25 @@ export default {
},
},
methods: {
+ /**
+ * If chat button clicked, the user's gets redirected to chat page.
+ */
openChatWithUser() {
this.$router.push({
name: "messages",
query: { userID: this.user.userId },
});
},
+
+ /**
+ * Admin related methods for kicking a user from a community,
+ * accepting and rejecting a user's join community request
+ */
kickUserFromCommunity() {
CommunityAdminService.removeUserFromCommunity(
this.communityID,
this.user.userId
);
- //Find a better way to do this
window.location.reload();
},
acceptMemberRequest() {
@@ -131,6 +145,9 @@ export default {
);
},
},
+ /**
+ * Gets the user's rating before mounting the page
+ */
async beforeMount() {
const maybeRating = await UserService.getUserRatingAverage(
this.user.userId
diff --git a/src/components/UserProfileComponents/UserProfile.vue b/src/components/UserProfileComponents/UserProfile.vue
index c2d2a05e395e40893ab49a5693e028dbec97e1e1..b0f04486a49fb92fb80e17c6bd64dd7cc5728bab 100644
--- a/src/components/UserProfileComponents/UserProfile.vue
+++ b/src/components/UserProfileComponents/UserProfile.vue
@@ -1,12 +1,17 @@
<template>
+ <!-- User profile with the logged in user's info and a dropdown menu-->
<div
class="w-full max-w-xl m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
+ <!-- A warning when deleting a user account to ask the user
+ if it is sure -->
<DeleteUserModal
:visible="show"
@close="this.show = false"
@deleteUser="deleteUser"
/>
+
+ <!-- dropdown icon button to toggle(open/close) the dropdown menu -->
<div v-show="isCurrentUser" class="float-right px-4 pt-4">
<button
id="dropdownDefault"
@@ -27,6 +32,8 @@
</svg>
</button>
+ <!-- Dropdown menu containing options for seeing user's items, user's communities,
+ renting history, logging out, changing password and deleting account -->
<div
id="dropdown"
v-show="dropdown"
@@ -84,6 +91,7 @@
</div>
</div>
+ <!-- User info (name, rating and profile picture) -->
<div class="flex flex-col items-center pb-10 mt-16 z-5">
<img
class="mb-3 w-24 h-24 rounded-full shadow-lg"
@@ -153,6 +161,9 @@ export default {
},
},
methods: {
+ /**
+ * Gets the user and it's ratings
+ */
async getUser() {
this.currentUser = await parseCurrentUser();
this.id = await this.$router.currentRoute.value.params.id;
@@ -174,6 +185,10 @@ export default {
this.renterRating = ratingAsRenter;
}
},
+
+ /**
+ * Logs out the user and sets token in state to be null.
+ */
logout() {
this.$store.commit("logout");
this.$router.push("/");
diff --git a/src/views/UserProfileViews/MyCommunitiesView.vue b/src/views/UserProfileViews/MyCommunitiesView.vue
index e474528640a45dc3254256ee8ef9afef3871f7ea..1c3d2f354fd54572a1a0ea2d327a3c275818f566 100644
--- a/src/views/UserProfileViews/MyCommunitiesView.vue
+++ b/src/views/UserProfileViews/MyCommunitiesView.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A view for showing all the communities a user is part of -->
<div>
<div v-if="loading" class="flex place-content-center p-8">
<LoaderSpinner />
@@ -24,6 +25,7 @@
import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
import CommunityService from "@/services/community.service";
import { UserAddIcon } from "@heroicons/vue/outline";
+import LoaderSpinner from "@/components/BaseComponents/LoaderSpinner"
export default {
data() {
@@ -35,6 +37,7 @@ export default {
components: {
CommunityList,
UserAddIcon,
+ LoaderSpinner,
},
async beforeCreate() {
this.loading = true;
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index a490eb09dfd233803ffd624b428fa206ec767f63..cbd3a8294c0fb345ddebd3f24fbfc9c87c8fe77a 100644
--- a/src/views/UserProfileViews/ProfileView.vue
+++ b/src/views/UserProfileViews/ProfileView.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A view for the user profile card -->
<div>
<LargeProfileCard :isCurrentUser="true" class="md:mt-8" />
</div>
diff --git a/src/views/UserProfileViews/RentHistoryView.vue b/src/views/UserProfileViews/RentHistoryView.vue
index 45e7859306a8e3ede90ca30d039cb1f7840bb777..6046627d069e7410e2c23a64d5181a5bc74399b5 100644
--- a/src/views/UserProfileViews/RentHistoryView.vue
+++ b/src/views/UserProfileViews/RentHistoryView.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A view for showing rating and rent history -->
<rating-modal
:visible="modal.show"
:name="modal.name"
@@ -58,9 +59,6 @@ export default {
fullHistory.sort(compareHistoryItems);
return fullHistory;
},
- hasNoHistory() {
- return this.renterHistory.length == 0 && this.ownerHistory.length == 0;
- },
},
methods: {
openModal(modal) {
diff --git a/src/views/UserProfileViews/UserItemsView.vue b/src/views/UserProfileViews/UserItemsView.vue
index 8ac137d470d2dd6ed213d18d9c778c1da872996b..6cf4fc43868be784e6e3cccf9cb02b2059d793d4 100644
--- a/src/views/UserProfileViews/UserItemsView.vue
+++ b/src/views/UserProfileViews/UserItemsView.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- A view for showing all the items the user has posted/added -->
<user-items> </user-items>
</template>
@@ -11,5 +12,3 @@ export default {
},
};
</script>
-
-<style></style>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap
index f22076edecd3620957e0bbf9141873adfd3a6322..5d0cf24e39eb3292cb0d2eda697982c9c214fbda 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap
@@ -1,22 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Rating component renders correctly 1`] = `
-<ul
- class="flex justify-center"
+<div
+ data-v-app=""
>
- <li>
- <p
- class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
- >
- :Â
- </p>
- </li>
- <li>
- <p
- class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
- >
- Ingen vurderinger
- </p>
- </li>
-</ul>
+
+ <!-- Shows rating, if no rating found, tells the user that no rating is registered -->
+ <ul
+ class="flex justify-center"
+ >
+ <li>
+ <p
+ class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+ >
+ :Â
+ </p>
+ </li>
+ <li>
+ <p
+ class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+ >
+ Ingen vurderinger
+ </p>
+ </li>
+ </ul>
+
+</div>
`;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
index a5812dd15944a413f9281e682a1b364681eb63c9..6a73973168534f9f4153a75d0448d4e301d0ba97 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
@@ -5,6 +5,8 @@ exports[`UserItems component renders correctly 1`] = `
data-v-app=""
>
+ <!-- Shows all the items a user has posted with search and pagination.
+ Includes a dropdown menu for editing or deleting an item. -->
<div
class="text-xl md:text-2xl text-primary-light font-medium"
id="headline"
@@ -53,6 +55,8 @@ exports[`UserItems component renders correctly 1`] = `
>
+ <!-- A waring asking the user if it is sure it wants to delete the item
+ with options to go ahead with the deleting or to cancel the delete. -->
<!-- Main modal -->
<!--v-if-->