Merge branch 'doc-userProfile-components-views' into 'main'

Doc user profile components views

See merge request !158

src/components/UserProfileComponents/RatingComponents/Rating.vue

 <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";

src/components/UserProfileComponents/RatingComponents/RatingModal.vue

 <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,

src/components/UserProfileComponents/RentHistoryComponents/RentHistoryItem.vue

 <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(

src/components/UserProfileComponents/UserItems.vue

 <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();

src/components/UserProfileComponents/UserListItemCard.vue

 <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

src/components/UserProfileComponents/UserProfile.vue

 <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("/");

src/views/UserProfileViews/MyCommunitiesView.vue

 <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;

src/views/UserProfileViews/ProfileView.vue

 <template>
+  <!-- A view for the user profile card -->
   <div>
     <LargeProfileCard :isCurrentUser="true" class="md:mt-8" />
   </div>

src/views/UserProfileViews/RentHistoryView.vue

 <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) {

src/views/UserProfileViews/UserItemsView.vue

 <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>

tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap

 // 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>
 `;

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-->