From 5d86c71938fc89c75cc4e6cc38bead193e8000d2 Mon Sep 17 00:00:00 2001
From: Zara Mudassar <zara.1310@hotmail.com>
Date: Fri, 6 May 2022 15:23:55 +0200
Subject: [PATCH] added doc and cleaned code
---
.../RatingComponents/Rating.vue | 8 +--
.../UserProfileComponents/UserItems.vue | 51 ++++++++++++++-----
.../UserListItemCard.vue | 19 ++++++-
.../UserProfileComponents/UserProfile.vue | 15 ++++++
.../UserProfileViews/MyCommunitiesView.vue | 1 +
src/views/UserProfileViews/ProfileView.vue | 1 +
.../UserProfileViews/RentHistoryView.vue | 4 +-
src/views/UserProfileViews/UserItemsView.vue | 3 +-
.../__snapshots__/rating.spec.js.snap | 41 ++++++++-------
.../__snapshots__/user-items.spec.js.snap | 4 ++
10 files changed, 106 insertions(+), 41 deletions(-)
diff --git a/src/components/UserProfileComponents/RatingComponents/Rating.vue b/src/components/UserProfileComponents/RatingComponents/Rating.vue
index 6efa3b0..6b35e95 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/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index ac1736b..5ae1e75 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 a39ae00..c94d796 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 c2d2a05..b0f0448 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 e474528..18a7009 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 />
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index a490eb0..cbd3a82 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 45e7859..6046627 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 8ac137d..6cf4fc4 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 f22076e..5d0cf24 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 a5812dd..6a73973 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-->
--
GitLab