Merge branch 'deleteListing' into 'main'

Delete listing

See merge request !110

src/components/BaseComponents/TripleDotButton.vue

+<template>
+  <button
+    id="dropdownDefault"
+    data-dropdown-toggle="dropdown"
+    class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
+    type="button"
+  >
+    <svg
+      class="w-6 h-6"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+      ></path>
+    </svg>
+  </button>
+</template>
+<script>
+export default {
+  name: "TripleDotButton",
+};
+</script>

src/components/CommunityComponents/NewCommunityForm.vue

 <template>
   <div
-    class="
-      md:ring-1
-      ring-gray-300
-      rounded-xl
-      overflow-hidden
-      mx-auto
-      mb-auto
-      max-w-md
-      w-full
-      p-4
-    "
+    class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
     <!-- Component heading -->
     <div
-      class="
-        text-xl
-        md:text-2xl
-        font-medium
-        text-center text-gray-600
-        dark:text-gray-200
-        mt-4
-        mb-10
-      "
+      class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
     >
       Opprett ny gruppe
     </div>
@@ -36,25 +18,7 @@
       >
       <div class="form-check">
         <input
-          class="
-            form-check-input
-            appearance-none
-            rounded-full
-            h-4
-            w-4
-            border border-gray-300
-            bg-white
-            checked:bg-primary-medium checked:border-primary-medium
-            focus:outline-none
-            transition
-            duration-200
-            mt-1
-            align-top
-            bg-no-repeat bg-center bg-contain
-            float-left
-            mr-2
-            cursor-pointer
-          "
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
           type="radio"
           name="flexRadioDefault"
           id="flexRadioOpen"
@@ -72,25 +36,7 @@
       </div>
       <div class="form-check">
         <input
-          class="
-            form-check-input
-            appearance-none
-            rounded-full
-            h-4
-            w-4
-            border border-gray-300
-            bg-white
-            checked:bg-primary-medium checked:border-primary-medium
-            focus:outline-none
-            transition
-            duration-200
-            mt-1
-            align-top
-            bg-no-repeat bg-center bg-contain
-            float-left
-            mr-2
-            cursor-pointer
-          "
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
           type="radio"
           name="flexRadioDefault"
           id="flexRadioPrivate"
@@ -117,25 +63,7 @@
       <input
         type="text"
         id="title"
-        class="
-          block
-          w-full
-          px-4
-          py-2
-          mt-2
-          text-gray-700
-          placeholder-gray-500
-          bg-white
-          border
-          rounded-md
-          dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400
-          focus:border-primary-light
-          dark:focus:border-primary-light
-          focus:ring-opacity-40
-          focus:outline-none
-          focus:ring
-          focus:ring-primary-light
-        "
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.group.name.$model"
         required
       />
@@ -161,25 +89,7 @@
       >
       <input
         type="text"
-        class="
-          block
-          w-full
-          px-4
-          py-2
-          mt-2
-          text-gray-700
-          placeholder-gray-500
-          bg-white
-          border
-          rounded-md
-          dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400
-          focus:border-primary-light
-          dark:focus:border-primary-light
-          focus:ring-opacity-40
-          focus:outline-none
-          focus:ring
-          focus:ring-primary-light
-        "
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.group.place.$model"
         required
       />
@@ -207,25 +117,7 @@
         id="description"
         rows="4"
         v-model="v$.group.description.$model"
-        class="
-          block
-          w-full
-          px-4
-          py-2
-          mt-2
-          text-gray-700
-          placeholder-gray-500
-          bg-white
-          border
-          rounded-md
-          dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400
-          focus:border-primary-light
-          dark:focus:border-primary-light
-          focus:ring-opacity-40
-          focus:outline-none
-          focus:ring
-          focus:ring-primary-light
-        "
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       ></textarea>
 
@@ -264,21 +156,7 @@
         <!--<div class="text-error uppercase text-center">Midlertidig fjernet</div> -->
         <button
           @click="$refs.file.click()"
-          class="
-            text-black
-            bg-gray-200
-            hover:bg-grey-800
-            focus:ring-4 focus:outline-none focus:ring-grey-300
-            font-medium
-            rounded-lg
-            text-sm
-            sm:w-auto
-            px-5
-            py-2.5
-            text-center
-            dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800
-            disabled:opacity-50
-          "
+          class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
           :disabled="imageAdded"
         >
           Velg bilde
@@ -432,7 +310,6 @@ export default {
         console.log(id);
         console.log(API_URL + "images/" + id);
         that.group.image = API_URL + "images/" + id;
-
       };
       fileReader.readAsArrayBuffer(image);
       this.imageThere = true;

src/components/UserProfileComponents/UserItems.vue

 <template>
   <div id="headline" class="text-xl md:text-2xl text-primary-light font-medium">
-    Dine gjenstander
+    Mine gjenstander
   </div>
   <!-- Search field -->
   <div class="relative" id="searchComponent">
@@ -25,7 +25,6 @@
       @change="searchWritten"
     />
   </div>
-
   <div class="absolute inset-x-0 px-5 py-3">
     <!-- ItemCards -->
     <div class="flex items-center justify-center w-screen">
@@ -34,7 +33,63 @@
         class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
         v-if="showItems"
       >
-        <ItemCard v-for="item in visibleItems" :key="item" :item="item" />
+        <div class="cardContainer" id="item" v-for="item in visibleItems" :key="item">
+          <ItemCard class="ItemCard w-fit h-fit" :item="item" />
+
+          <TripleDotButton class="DotButton" @click="openDotMenu(item)">
+          </TripleDotButton>
+
+          <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"
+          >
+            <ul
+              class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
+              aria-labelledby="dropdownDefault"
+            >
+              <li>
+                <button
+                  to="/user/userItems"
+                  class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Rediger gjenstand
+                </button>
+              </li>
+              <li>
+                <button
+                  @click="goToDeleteItem(item.listingID)"
+                  class="block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Slett gjenstand
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <CustomFooterModal
+          @close="this.readyToDelete = false"
+          :visible="readyToDelete"
+          :title="'Sikker på at du vil slette annonsen?'"
+          :message="''"
+        >
+          <div class="flex justify-center p-2">
+            <ColoredButton
+              id="#cancelDeleteButton"
+              :text="'Avbryt'"
+              @click="cancelDelete"
+              class="bg-gray-500 m-2"
+            ></ColoredButton>
+
+            <ColoredButton
+              id="confirmDeleteButton"
+              @click="deleteItem"
+              :text="'Slett'"
+              class="m-2 bg-error-medium"
+            >
+            </ColoredButton>
+          </div>
+        </CustomFooterModal>
       </div>
 
       <!-- Shows items based on search field input -->
@@ -42,7 +97,60 @@
         class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
         v-if="showSearchedItems"
       >
-        <ItemCard v-for="item in searchedItems" :key="item" :item="item" />
+      <div class="cardContainer" v-for="item in searchedItems" :key="item">
+        <ItemCard class="ItemCard" :item="item" />
+        <TripleDotButton class="DotButton" @click="openDotMenu(item)"> </TripleDotButton>
+
+        <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"
+        >
+          <ul
+            class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
+            aria-labelledby="dropdownDefault"
+          >
+            <li>
+              <button
+                to="/user/userItems"
+                class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              >
+                Rediger gjenstand
+              </button>
+            </li>
+            <li>
+              <button
+                @click="goToDeleteItem(item.listingID)"
+                class="block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              >
+                Slett gjenstand
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+        <CustomFooterModal
+          @close="this.readyToDelete = false"
+          :visible="readyToDelete"
+          :title="'Sikker på at du vil slette annonsen?'"
+          :message="''"
+        >
+          <div class="flex justify-center p-2">
+            <ColoredButton
+              id="#cancelDeleteButton"
+              :text="'Avbryt'"
+              @click="cancelDelete"
+              class="bg-gray-500 m-2"
+            ></ColoredButton>
+
+            <ColoredButton
+              id="confirmDeleteButton"
+              @click="deleteItem"
+              :text="'Slett'"
+              class="m-2 bg-error-medium"
+            >
+            </ColoredButton>
+          </div>
+        </CustomFooterModal>
       </div>
     </div>
     <!-- pagination -->
@@ -58,15 +166,23 @@
   </div>
 </template>
 <script>
+import TripleDotButton from "@/components/BaseComponents/TripleDotButton.vue";
 import { GetUserListings, getItemPictures } from "@/utils/apiutil";
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
+
+import UserService from "@/services/user.service";
 import ItemCard from "@/components/ItemComponents/ItemCard.vue";
 import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
 
 export default {
   name: "UserItems",
   components: {
     ItemCard,
+    TripleDotButton,
     PaginationTemplate,
+    CustomFooterModal,
+    ColoredButton,
   },
   data() {
     return {
@@ -77,10 +193,14 @@ export default {
         address: "",
         title: "",
         pricePerDay: 0,
+        toggle: false,
       },
+      chosenItem: null,
       showItems: true,
       showSearchedItems: false,
       search: "",
+      readyToDelete: false,
+      dropdown: false,
       //Variables connected to pagination
       currentPage: 0,
       pageSize: 12,
@@ -102,15 +222,30 @@ export default {
     },
   },
   methods: {
+    openDotMenu(item){
+      if(item.toggle == false){ 
+        for(var i = 0; i<this.visibleItems.length; i++){
+          this.visibleItems[i].toggle = false;
+      }
+        item.toggle = true;
+      }
+      else{
+        item.toggle = false;
+      }
+    },
     getUserListingsFromAPI: async function () {
       this.items = await GetUserListings();
       for (var i = 0; i < this.items.length; i++) {
+        this.items[i].toggle = false;
         let images = await getItemPictures(this.items[i].listingID);
         if (images.length > 0) {
           this.items[i].img = images[0].picture;
         }
       }
     },
+    cancelDelete() {
+      this.readyToDelete = false;
+    },
     //Pagination
     updatePage(pageNumber) {
       this.currentPage = pageNumber;
@@ -127,6 +262,16 @@ export default {
         this.updatePage(this.currentPage - 1);
       }
     },
+    goToDeleteItem(item) {
+      console.log("Halllllo: " + item)
+      this.chosenItem = item;
+      this.readyToDelete = true;
+    },
+    async deleteItem() {
+      console.log("HEI " + this.chosenItem);
+      await UserService.setListingToDeleted(this.chosenItem);
+      this.$router.go(0);
+    },
     searchWritten: function () {
       //This method triggers when search input field is changed
       if (this.search.length > 0) {
@@ -150,5 +295,18 @@ export default {
   display: block;
   margin-top: 10px;
   margin-bottom: 10px;
+  margin-left: 20px;
+}
+.cardContainer{
+  position: relative;
+}
+.DotButton{
+  position: absolute;
+  right: 40px;
+  bottom: 10px
 }
+.options{
+  position: absolute;
+}
+
 </style>

src/services/user.service.js

@@ -27,6 +27,17 @@ class UserService {
       .catch((err) => console.error(err));
   }
 
+  async setListingToDeleted(listingId) {
+    return await axios
+      .put(API_URL + "listing/" + listingId, {
+        headers: tokenHeader(),
+      })
+      .then((res) => {
+        return res.data;
+      })
+      .catch((err) => console.error(err));
+  }
+
   async getRenterHistory() {
     return await axios
       .get(API_URL + "user/profile/rent/history", {

src/utils/apiutil.js

@@ -328,15 +328,15 @@ export function postNewRating(ratingInfo) {
 
 export function postNewImageCommunity(image) {
   return axios
-      .post(API_URL + "images", image, {
-        headers: {...tokenHeader(), "Content-Type": "image/png"},
-      })
-      .then((response) => {
-        console.log(response.data);
-        return response.data;
-      })
-      .catch((error) => {
-        console.log(error);
-        return error;
-      });
+    .post(API_URL + "images", image, {
+      headers: { ...tokenHeader(), "Content-Type": "image/png" },
+    })
+    .then((response) => {
+      console.log(response.data);
+      return response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+      return error;
+    });
 }

src/views/HelpView.vue

@@ -114,13 +114,14 @@ export default {
         {
           question: "Hvordan kan jeg bli med i en gruppe?",
           answer:
-              "På hovedsiden vil alle offentlige og lukkede grupper vises. Når du trykker på ønsket gruppe vil du få muligheten til å bli med/sende medlemsforespørsel.",
+            "På hovedsiden vil alle offentlige og lukkede grupper vises. Når du trykker på ønsket gruppe vil du få muligheten til å bli med/sende medlemsforespørsel.",
           toggle: false,
         },
         {
-          question: "Hva vil jeg ha tilgang til ved å logge inn/opprette en bruker?",
+          question:
+            "Hva vil jeg ha tilgang til ved å logge inn/opprette en bruker?",
           answer:
-              "Uten å være logget inn vil du kunne se alle grupper, og også se gjenstander som ligger ute til lån i offentlige grupper. For å kunne låne en gjenstand må du være med i gruppen gjenstanden ligger i, og for dette må du være innlogget. Du må også være innlogget for å sende medlemsforespørsel i lukkede grupper.",
+            "Uten å være logget inn vil du kunne se alle grupper, og også se gjenstander som ligger ute til lån i offentlige grupper. For å kunne låne en gjenstand må du være med i gruppen gjenstanden ligger i, og for dette må du være innlogget. Du må også være innlogget for å sende medlemsforespørsel i lukkede grupper.",
           toggle: false,
         },
       ],