Skip to content
Snippets Groups Projects
Commit 6233353d authored by Erik Borgeteien Hansen's avatar Erik Borgeteien Hansen
Browse files

Merge branch 'main' into display-spinner-when-loading

parents 4cd008dd 28d3aff1
No related branches found
No related tags found
1 merge request!112Display spinner when loading
Pipeline #181142 failed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/components/BaseComponents/FooterBar.vue 0 → 100644
+ 25
− 0
View file @ 6233353d
<template>
<footer
class="w-full bg-white dark:bg-gray-800 sm:flex-row border-1 border-t border-b border-gray-600 h-10"
>
<p class="float-left text-xs my-3 ml-4">
© BoCo 2022 - All rights reserved
</p>
<QuestionMarkCircleIcon
class="md:mt-0 mt-1 mr-4 float-right cursor-pointer h-8 md:h-10 text-primary-medium"
alt="Hjelp"
@click="$router.push('/help')"
/>
</footer>
</template>
<script>
import { QuestionMarkCircleIcon } from "@heroicons/vue/outline";
export default {
name: "FooterBar",
components: {
QuestionMarkCircleIcon,
},
};
</script>
src/components/BaseComponents/TripleDotButton.vue 0 → 100644
+ 24
− 0
View file @ 6233353d
<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/UserProfileComponents/UserItems.vue
+ 162
− 4
View file @ 6233353d
<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
+ 11
− 0
View file @ 6233353d
......@@ -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/views/CommunityViews/CommunityView.vue
+ 3
− 0
View file @ 6233353d
......@@ -75,6 +75,7 @@
/>
</div>
</div>
<FooterBar />
</div>
</template>
......@@ -84,6 +85,7 @@ import { UserAddIcon, SearchIcon } from "@heroicons/vue/outline";
import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
import CommunityService from "@/services/community.service";
import LoaderSpinner from "@/components/BaseComponents/LoaderSpinner";
import FooterBar from "@/components/BaseComponents/FooterBar";
export default {
name: "HomeView",
......@@ -112,6 +114,7 @@ export default {
PaginationTemplate,
SearchIcon,
LoaderSpinner,
FooterBar,
},
computed: {
searchPublicCommunities() {
......
src/views/TestView.vue
+ 5
− 2
View file @ 6233353d
<template>
<div></div>
<div>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
components: {},
components: {
},
methods: {
toggleModal() {
this.show = !this.show;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment