diff --git a/src/components/BaseComponents/RatingModal.vue b/src/components/BaseComponents/RatingModal.vue
index 7710716f0ad69f69663b859c165a5455153cb8d7..370a997b86685b2474854ea94c983e8549a113dc 100644
--- a/src/components/BaseComponents/RatingModal.vue
+++ b/src/components/BaseComponents/RatingModal.vue
@@ -1,89 +1,130 @@
<template>
<!-- Main modal -->
<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"
+ 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"
>
<div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
- <div
- class="flex p-4 border-b rounded-t dark:border-gray-600"
- >
+ <div class="flex p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{ name }}
</h3>
<button
- @click="close()"
- class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+ @click="close()"
+ class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
>
<svg
- class="w-5 h-5"
- fill="currentColor"
- viewBox="0 0 20 20"
- xmlns="http://www.w3.org/2000/svg"
+ class="w-5 h-5"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
>
<path
- fill-rule="evenodd"
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
- clip-rule="evenodd"
+ fill-rule="evenodd"
+ d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+ clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
- <p class="text-lg text-base leading-relaxed text-gray-500 dark:text-gray-400">
+ <p
+ class="text-lg text-base leading-relaxed text-gray-500 dark:text-gray-400"
+ >
{{ title }}
</p>
</div>
<div class="ml-6 mt-4">
- <p class=" text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="renterIsReceiverOfRating">
+ <p
+ class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+ v-show="renterIsReceiverOfRating"
+ >
Gi en vurdering til utleieren
</p>
- <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400" v-show="!renterIsReceiverOfRating">
+ <p
+ class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+ v-show="!renterIsReceiverOfRating"
+ >
Gi en vurdering til leietakeren
</p>
</div>
- <div class= "flex justify-center px-4">
- <textarea class="w-full h-40 bg-gray-200 mb-4 ring-1 ring-gray-400 rounded-xl"/>
+ <div class="flex justify-center px-4">
+ <textarea
+ class="w-full h-40 bg-gray-200 mb-4 ring-1 ring-gray-400 rounded-xl"
+ />
</div>
<div class="flex items-center justify-center mb-8">
- <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[0]" @click="setRating(1)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ class="w-10 h-10 text-warn cursor-pointer"
+ :class="rating[0]"
+ @click="setRating(1)"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
- </path>
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+ ></path>
</svg>
- <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[1]" @click="setRating(2)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ class="w-10 h-10 text-warn cursor-pointer"
+ :class="rating[1]"
+ @click="setRating(2)"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
- </path>
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+ ></path>
</svg>
- <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[2]" @click="setRating(3)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ class="w-10 h-10 text-warn cursor-pointer"
+ :class="rating[2]"
+ @click="setRating(3)"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
- </path>
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+ ></path>
</svg>
- <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[3]" @click="setRating(4)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ class="w-10 h-10 text-warn cursor-pointer"
+ :class="rating[3]"
+ @click="setRating(4)"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
- </path>
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+ ></path>
</svg>
- <svg class="w-10 h-10 text-warn cursor-pointer" :class="rating[4]" @click="setRating(5)" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ class="w-10 h-10 text-warn cursor-pointer"
+ :class="rating[4]"
+ @click="setRating(5)"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
- d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
- </path>
+ d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+ ></path>
</svg>
</div>
<div class="flex justify-center mb-4">
- <Button
- :text="'Send en vurdering'"
- @click="sendRating"></Button>
+ <Button :text="'Send en vurdering'" @click="sendRating"></Button>
</div>
<!-- Modal footer -->
@@ -98,15 +139,21 @@
<script>
import Button from "@/components/BaseComponents/ColoredButton";
-import { postNewRating} from "@/utils/apiutil";
+import { postNewRating } from "@/utils/apiutil";
export default {
name: "RatingModal",
- data(){
- return{
+ data() {
+ return {
score: 3,
comment: "",
- rating:["text-warn", "text-warn", "text-warn", "text-gray-300", "text-gray-300"],
+ rating: [
+ "text-warn",
+ "text-warn",
+ "text-warn",
+ "text-gray-300",
+ "text-gray-300",
+ ],
};
},
props: {
@@ -115,42 +162,38 @@ export default {
title: String,
rentID: Number,
renterIsReceiverOfRating: Boolean,
-
},
components: {
Button,
},
methods: {
- setRating(ratingNumber){
+ setRating(ratingNumber) {
this.score = ratingNumber;
- for(let i = 0; i < 5; i++ ){
- if(i < ratingNumber) {
- this.rating[i] = "text-warn"
- }
- else {
- this.rating[i] = "text-gray-300"
+ for (let i = 0; i < 5; i++) {
+ if (i < ratingNumber) {
+ this.rating[i] = "text-warn";
+ } else {
+ this.rating[i] = "text-gray-300";
}
}
},
close() {
this.$emit("close");
},
- async sendRating(){
-
+ async sendRating() {
const ratingInfo = {
score: this.score,
comment: this.comment,
renterIsReceiverOfRating: this.renterIsReceiverOfRating,
- rentID: this.rentID
- }
+ rentID: this.rentID,
+ };
const postResponse = await postNewRating(ratingInfo);
console.log("posted: " + postResponse);
this.$router.push("/");
-
},
},
};
diff --git a/src/components/ChatComponents/ChatComponent.vue b/src/components/ChatComponents/ChatComponent.vue
index 56aa69895176e1f41d4543b10ad59e90e801bce3..8f9ea97ee7d6d4679f29cbb7d341844394a7c13d 100644
--- a/src/components/ChatComponents/ChatComponent.vue
+++ b/src/components/ChatComponents/ChatComponent.vue
@@ -16,48 +16,27 @@
<div></div>
</div>
<div v-if="recipient" class="conversation">
- <div
- v-for="(message, i) in messages"
- v-bind:key="i"
- >
- <rental-message v-if="message?.createdAt" :rent="message"></rental-message>
- <ChatMessage
- v-else
- :message="message"
- ></ChatMessage>
-
- </div>
+ <div v-for="(message, i) in messages" v-bind:key="i">
+ <rental-message
+ v-if="message?.createdAt"
+ :rent="message"
+ ></rental-message>
+ <ChatMessage v-else :message="message"></ChatMessage>
+ </div>
</div>
<div v-else class="conversation">
- <div class="not-found">
- <p>USER NOT FOUND</p>
- </div>
+ <div class="not-found">
+ <p>USER NOT FOUND</p>
+ </div>
</div>
<div
- class="
- flex
- items-center
- justify-between
- w-full
- p-3
- border-t border-gray-300
- "
+ class="flex items-center justify-between w-full p-3 border-t border-gray-300"
>
<input
v-on:keyup.enter="sendMessage"
type="text"
placeholder="Message"
- class="
- block
- w-full
- py-2
- pl-4
- mx-3
- bg-gray-100
- rounded-full
- outline-none
- focus:text-gray-700
- "
+ class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
name="message"
v-model="message"
/>
@@ -95,12 +74,12 @@ export default {
scrollBehavior: "",
recipient: null,
rents: [],
- msgs: []
+ msgs: [],
};
},
components: {
ChatMessage,
- RentalMessage
+ RentalMessage,
},
computed: {
name() {
@@ -109,14 +88,17 @@ export default {
: "N/A";
},
src() {
- return this.recipient?.picture || require("@/assets/defaultUserProfileImage.jpg");
+ return (
+ this.recipient?.picture ||
+ require("@/assets/defaultUserProfileImage.jpg")
+ );
+ },
+ messages() {
+ let arr = [...this.msgs, ...this.rents].sort((a, b) => {
+ return (a?.createdAt || a.timestamp) - (b?.createdAt || b.timestamp);
+ });
+ return arr;
},
- messages () {
- let arr = [...this.msgs, ...this.rents].sort((a, b) => {
- return (a?.createdAt || a.timestamp) - (b?.createdAt || b.timestamp);
- });
- return arr;
- }
},
methods: {
openHamburgerMethod() {
@@ -127,7 +109,7 @@ export default {
container.scrollTop = container.scrollHeight;
},
async sendMessage() {
- if (!this.recipient ||this.message == null || this.message == "") return;
+ if (!this.recipient || this.message == null || this.message == "") return;
this.canScroll = true;
const token = this.$store.state.user.token;
await axios.post(
@@ -164,7 +146,7 @@ export default {
this.msgs = await response.json();
},
async reloadRents() {
- const token = this.$store.state.user.token;
+ const token = this.$store.state.user.token;
const response = await fetch(
`${process.env.VUE_APP_BASEURL}renting/user/${this.recipientID}/all`,
{
@@ -194,9 +176,9 @@ export default {
},
},
watch: {
- async 'recipientID'() {
- this.rents = [];
- this.msgs = [];
+ async recipientID() {
+ this.rents = [];
+ this.msgs = [];
await this.reloadMessages();
await this.getRecipient();
await this.reloadRents();
@@ -228,17 +210,17 @@ export default {
}
.not-found {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
- width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
}
.not-found p {
- font-size: 2rem;
- font-weight: bold;
+ font-size: 2rem;
+ font-weight: bold;
}
.conversation {
height: 100%;
@@ -278,4 +260,4 @@ export default {
display: block;
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue
index 555460a1290deaa41476582c15e71af3dd0f7642..f2766566f1390958c04535055308c2c8e6bc7a22 100644
--- a/src/components/ChatComponents/ChatMessage.vue
+++ b/src/components/ChatComponents/ChatMessage.vue
@@ -1,36 +1,30 @@
<template>
<div v-bind:class="'blob-container ' + this.side()">
- <div
- v-bind:class="
- this.color() + ' message-container ' +this.textColor()
- "
- >
- <span class="message"
- >{{ this.message.content }}</span
- >
+ <div v-bind:class="this.color() + ' message-container ' + this.textColor()">
+ <span class="message">{{ this.message.content }}</span>
<span class="">{{ this.calculateTime() }}</span>
</div>
</div>
</template>
<style scoped>
- .blob-container {
- display: flex;
- max-width: 100%;
- }
+.blob-container {
+ display: flex;
+ max-width: 100%;
+}
- .message {
- word-break: break-word;
- display: block;
- }
+.message {
+ word-break: break-word;
+ display: block;
+}
- .message-container {
- border-radius: 10px;
- max-width: 70%;
- padding: 0.75rem;
- margin-top: 0.25rem;
- margin-bottom: 0.25rem;
- }
+.message-container {
+ border-radius: 10px;
+ max-width: 70%;
+ padding: 0.75rem;
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+}
</style>
<script>
import { parseCurrentUser } from "@/utils/token-utils";
diff --git a/src/components/ChatComponents/ChatProfile.vue b/src/components/ChatComponents/ChatProfile.vue
index 9e1caa0a2d87881bf1035af9c7bb05bf49ccdece..2b2ae7744729dcd01116111274b3d4e83eaf7afe 100644
--- a/src/components/ChatComponents/ChatProfile.vue
+++ b/src/components/ChatComponents/ChatProfile.vue
@@ -73,8 +73,10 @@ export default {
}
},
src() {
- return this.conversation.recipient.picture ? this.conversation.recipient.picture : require("@/assets/defaultUserProfileImage.jpg");
- }
+ return this.conversation.recipient.picture
+ ? this.conversation.recipient.picture
+ : require("@/assets/defaultUserProfileImage.jpg");
+ },
},
methods: {
selectUser() {
@@ -83,6 +85,6 @@ export default {
},
created() {
console.log("convesation", this.conversation);
- }
+ },
};
</script>
diff --git a/src/components/ChatComponents/ChatsComponent.vue b/src/components/ChatComponents/ChatsComponent.vue
index c6d1b2e797b50ed1982cb9422c4134d1b0ec2130..9bca728ec85f36abc75e766e6ad27e06affd872c 100644
--- a/src/components/ChatComponents/ChatsComponent.vue
+++ b/src/components/ChatComponents/ChatsComponent.vue
@@ -1,41 +1,45 @@
<template>
- <div class="chat">
- <div class="conversations">
- <h1 >Samtaler:</h1>
- <hr/>
- <ChatProfile
- v-for="(conversation, i) in conversations"
- :conversation="conversation"
- :key="i"
- @recipient="selectUser"
- ></ChatProfile>
- <!-- If no conversatiosn show no conversations found -->
- <div v-if="conversations.length === 0" class="no-conversations">
- <p>Ingen samtaler</p>
- </div>
+ <div class="chat">
+ <div class="conversations">
+ <h1>Samtaler:</h1>
+ <hr />
+ <ChatProfile
+ v-for="(conversation, i) in conversations"
+ :conversation="conversation"
+ :key="i"
+ @recipient="selectUser"
+ ></ChatProfile>
+ <!-- If no conversatiosn show no conversations found -->
+ <div v-if="conversations.length === 0" class="no-conversations">
+ <p>Ingen samtaler</p>
</div>
- <div class="current-chat">
- <ChatComponent @openHamburger="openHamburger" v-if="recipientID" :recipientID="recipientID"></ChatComponent>
- <div v-else class="nothing-selected"><p>Select a user to start a chat</p></div>
+ </div>
+ <div class="current-chat">
+ <ChatComponent
+ @openHamburger="openHamburger"
+ v-if="recipientID"
+ :recipientID="recipientID"
+ ></ChatComponent>
+ <div v-else class="nothing-selected">
+ <p>Select a user to start a chat</p>
</div>
</div>
+ </div>
</template>
<script>
-import ChatProfile from './ChatProfile.vue';
-import ChatComponent from './ChatComponent.vue';
+import ChatProfile from "./ChatProfile.vue";
+import ChatComponent from "./ChatComponent.vue";
import { parseCurrentUser } from "@/utils/token-utils";
import ws from "@/services/ws";
export default {
- props: {
-
- },
- watch:{
- '$route' () {
- const newVal = this.$route.query?.userID || null;
+ props: {},
+ watch: {
+ $route() {
+ const newVal = this.$route.query?.userID || null;
this.recipientID = newVal;
- }
+ },
},
data: () => {
return {
@@ -43,13 +47,12 @@ export default {
message: "",
recipient: null,
hambuger: "none",
- conversations: [
- ],
+ conversations: [],
hambugerDisplay: "none",
- recipientID: null
+ recipientID: null,
};
},
- components: { ChatProfile, ChatComponent},
+ components: { ChatProfile, ChatComponent },
computed: {
userid() {
return parseCurrentUser().accountId;
@@ -61,10 +64,10 @@ export default {
methods: {
selectUser(recipientID) {
this.hambugerDisplay = "none";
- this.$router.push({path: 'messages', query: {userID: recipientID}})
+ this.$router.push({ path: "messages", query: { userID: recipientID } });
},
openHamburger() {
- this.hambugerDisplay = "block"
+ this.hambugerDisplay = "block";
},
calculateSide(from) {
return from == this.userid ? "end" : "start";
@@ -73,15 +76,18 @@ export default {
async created() {
const token = this.$store.state.user.token;
// Get all conversations from api with /chats/users
- const conResponse = await fetch(`${process.env.VUE_APP_BASEURL}chats/users`, {
- method: "GET",
- headers: {
- "Content-Type": "application/json",
- Authorization: `Bearer ${token}`,
- },
- }); // add error handling
+ const conResponse = await fetch(
+ `${process.env.VUE_APP_BASEURL}chats/users`,
+ {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ ); // add error handling
this.conversations = await conResponse.json();
-
+
ws.on("NEW_MESSAGE", () => {
this.reloadMessages();
}, "chats");
@@ -94,52 +100,52 @@ export default {
};
</script>
<style scoped>
- .chat {
- display: flex;
- flex-direction: row;
- width: 100%;
- height: min(100vh - 3.5rem);
- }
+.chat {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ height: min(100vh - 3.5rem);
+}
.nothing-selected {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
- width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
}
- .no-conversations {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100%;
- width: 100%;
- }
+.no-conversations {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+}
.nothing-selected p {
- font-size: 2rem;
- font-weight: bold;
- text-align: center;
+ font-size: 2rem;
+ font-weight: bold;
+ text-align: center;
}
- .current-chat {
- width: 100%;
- height: 100%;
- }
+.current-chat {
+ width: 100%;
+ height: 100%;
+}
- .conversations {
- min-width: 300px;
- border-right-width: 1px;
- border-color: black;
- height: 100%;
- }
+.conversations {
+ min-width: 300px;
+ border-right-width: 1px;
+ border-color: black;
+ height: 100%;
+}
- .conversations h1 {
- padding: 0.5rem;
- padding-left: 0;
+.conversations h1 {
+ padding: 0.5rem;
+ padding-left: 0;
align-self: center;
margin-left: 10px;
color: #4b5563;
@@ -147,24 +153,23 @@ export default {
font-size: large;
}
- @media screen and (max-width: 600px) {
- .conversations {
- display: v-bind(hambugerDisplay);
- z-index: 99;
- width: 100%;
- position: absolute;
- background-color: white;
- }
-
- .conversations h1 {
- text-align: center;
- }
-
+@media screen and (max-width: 600px) {
+ .conversations {
+ display: v-bind(hambugerDisplay);
+ z-index: 99;
+ width: 100%;
+ position: absolute;
+ background-color: white;
}
- .button {
- display: flex;
- justify-content: center;
- padding: 0.75rem;
+ .conversations h1 {
+ text-align: center;
}
-</style>
\ No newline at end of file
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+ padding: 0.75rem;
+}
+</style>
diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue
index 23b3a73eb1d04fc9bc401340b9859debc27643bc..a734e35fd58d77f8e8b322f0081e45017312010c 100644
--- a/src/components/ChatComponents/RentalMessage.vue
+++ b/src/components/ChatComponents/RentalMessage.vue
@@ -1,168 +1,187 @@
<template>
<div class="message" style="max-width: 70%">
- <div class="info">
- <div class="text">
- <h2 class="header">Ny utleie forespørsel</h2>
- <p>Dato: {{from}} - {{to}}</p>
- <p>Pris: {{price}}kr</p>
- </div>
- <div class="img-container">
- <img class="img" :src="img" alt="Produkt Bilde">
- </div>
- </div>
- <div>
- <p class="more-header">Melding fra leier:</p>
- <div class="more">
- <p>
- {{extra}}
- </p>
- </div>
- </div>
- <div class="buttons">
- <button class="button green">Godta</button>
- <button class="button red">Avslå</button>
- </div>
+ <div class="info">
+ <div class="text">
+ <h2 class="header">Ny utleie forespørsel</h2>
+ <p>Dato: {{ from }} - {{ to }}</p>
+ <p>Pris: {{ price }}kr</p>
+ </div>
+ <div class="img-container">
+ <img class="img" :src="img" alt="Produkt Bilde" />
+ </div>
</div>
+ <div>
+ <p class="more-header">Melding fra leier:</p>
+ <div class="more">
+ <p>
+ {{ extra }}
+ </p>
+ </div>
+ </div>
+ <div class="buttons">
+ <button class="button green" @click="accept">Godta</button>
+ <button class="button red" @click="reject">Avslå</button>
+ </div>
+ </div>
</template>
<script>
+import axios from "axios";
+import { tokenHeader } from "@/utils/token-utils";
export default {
- props: {
- rent: {
- type: Object,
- default () {
- return {
- createdAd: 0,
- fromTime: 0,
- isAccepted: false,
- listingId: 0,
- message: "",
- rentId: 0,
- renterId: 0,
- toTime: 0
- }
- }
- },
- },
- data() {
+ props: {
+ rent: {
+ type: Object,
+ default() {
return {
-
- }
+ createdAd: 0,
+ fromTime: 0,
+ isAccepted: false,
+ listingId: 0,
+ message: "",
+ rentId: 0,
+ renterId: 0,
+ toTime: 0,
+ };
+ },
},
- computed: {
- img() {
- return 'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80'//this.rent.listing.imageUrl;
- },
- from() {
- // take ms and turn into date and return date
- return new Date(this.rent.fromTime).toLocaleDateString();
- },
- to() {
- return new Date(this.rent.toTime).toLocaleDateString();
- },
- price() {
- // Calculate price from price * days
- return this.rent.listing.pricePerDay * Math.ceil((this.rent.toTime - this.rent.fromTime) / (1000 * 60 * 60 * 24));
- },
- extra() {
- return this.rent.message || "Ingen Melding";
- }
+ },
+ computed: {
+ img() {
+ return "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80"; //this.rent.listing.imageUrl;
},
-
-}
+ from() {
+ // take ms and turn into date and return date
+ return new Date(this.rent.fromTime).toLocaleDateString();
+ },
+ to() {
+ return new Date(this.rent.toTime).toLocaleDateString();
+ },
+ price() {
+ // Calculate price from price * days
+ return (
+ this.rent.listing.pricePerDay *
+ Math.ceil(
+ (this.rent.toTime - this.rent.fromTime) / (1000 * 60 * 60 * 24)
+ )
+ );
+ },
+ extra() {
+ return this.rent.message || "Ingen Melding";
+ },
+ },
+ methods: {
+ async accept() {
+ await axios.post(
+ process.env.VUE_APP_BASEURL +
+ `renting/${this.rent.rentId}/accept` ,
+ null,
+ { headers: tokenHeader() }
+ );
+ },
+ async reject() {
+ await axios.delete(
+ process.env.VUE_APP_BASEURL +
+ `renting/${this.rent.rentId}/delete`,
+ null,
+ { headers: tokenHeader() }
+ );
+
+ },
+ },
+};
</script>
<style scoped>
- .message {
- display: flex;
- flex-direction: column;
- width: 100%;
- background: #D1D5DB;
- border-radius: 10px;
- padding: 10px;
- }
-
- .info {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- }
- .img {
- width: 100%;
- height: auto;
- border-radius: 10px;
- max-height: 200px;
- }
+.message {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ background: #d1d5db;
+ border-radius: 10px;
+ padding: 10px;
+}
- .text h1 {
- text-decoration: underline;
- }
+.info {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+}
+.img {
+ width: 100%;
+ height: auto;
+ border-radius: 10px;
+ max-height: 200px;
+}
- @media (max-width: 1200px) {
- .img-container {
- max-width: 30%;
- }
- .text {
- min-width: 70%;
- }
- }
+.text h1 {
+ text-decoration: underline;
+}
- .img-container {
- display: flex;
- align-content: center;
- justify-items: center;
- max-height: 20%;
- }
- .header {
- font-weight: bold;
- text-align: center;
- text-decoration: underline;
- }
- .more-header {
- font-weight: bold;
- }
+@media (max-width: 1200px) {
+ .img-container {
+ max-width: 30%;
+ }
+ .text {
+ min-width: 70%;
+ }
+}
- .more {
- border: 1px solid black;
- border-radius: 10px;
- }
+.img-container {
+ display: flex;
+ align-content: center;
+ justify-items: center;
+ max-height: 20%;
+}
+.header {
+ font-weight: bold;
+ text-align: center;
+ text-decoration: underline;
+}
+.more-header {
+ font-weight: bold;
+}
- .more p {
- margin-left: 5px;
- }
+.more {
+ border: 1px solid black;
+ border-radius: 10px;
+}
+.more p {
+ margin-left: 5px;
+}
- .buttons {
- margin-top: 10px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-items: center;
- justify-content: space-around;
- }
+.buttons {
+ margin-top: 10px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-items: center;
+ justify-content: space-around;
+}
- .button {
- border-radius: 0.25rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- padding-left: 1rem;
- padding-right: 1rem;
- font-weight: 700;
- color: white;
- }
+.button {
+ border-radius: 0.25rem;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ font-weight: 700;
+ color: white;
+}
- .red {
- background-color: #ff1f1f;
- }
+.red {
+ background-color: #ff1f1f;
+}
- .red:hover {
- box-shadow: 0 0 0 0.2rem rgba(255, 31, 31, 0.5);
- }
+.red:hover {
+ box-shadow: 0 0 0 0.2rem rgba(255, 31, 31, 0.5);
+}
- .green {
- background-color: #0bb610;
- }
- .green:hover {
- box-shadow: 0 0 0 0.2rem rgba(11, 182, 16, 0.5);
- }
-</style>
\ No newline at end of file
+.green {
+ background-color: #0bb610;
+}
+.green:hover {
+ box-shadow: 0 0 0 0.2rem rgba(11, 182, 16, 0.5);
+}
+</style>
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 0f0790dadcd232f9d7a90a0fe4451fdeec4fc7e1..53fb6047e7def08264fdf5e66d51bed172a93dee 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -116,7 +116,7 @@ export default {
title: "",
pricePerDay: 0,
},
-
+
communityID: -1,
community: {},
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index f260d3b475014d6c247a12b73543f8364a9801ba..1dc94f4e3421de11b7367b51ad8c12eae11a242b 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -8,20 +8,19 @@
<div class="flex justify-center p-2">
<!-- If a user is not a member in the community, this button will show -->
<ColoredButton
- v-if="!member && community.visibility!==0"
+ v-if="!member && community.visibility !== 0"
:text="'Bli med'"
@click="goToJoin(community.communityId)"
class="m-2"
/>
- <ColoredButton
- v-if="!member && community.visibility===0"
+ <ColoredButton
+ v-if="!member && community.visibility === 0"
:text="'Spør om å bli med'"
@click="goToRequest(community.communityId)"
class="m-2"
- />
+ />
-
<!-- If a user is member this button will show -->
<ColoredButton
v-if="member"
@@ -104,8 +103,8 @@ export default {
this.$router.push("/community/" + id);
}
},
- goToRequest(id){
- this.$router.push("/community/" + id + "/private/join")
+ goToRequest(id) {
+ this.$router.push("/community/" + id + "/private/join");
},
toggleDialog() {
this.dialogOpen = !this.dialogOpen;
diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue
index d0b58ae3aab0a895f1444060ba7b0d36653ce313..51a2e418c064f125ea349ae9141ba96f4c12b025 100644
--- a/src/components/CommunityComponents/CommunityRequestForm.vue
+++ b/src/components/CommunityComponents/CommunityRequestForm.vue
@@ -6,17 +6,17 @@
<div
class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
>
- Bli med i: {{community.name}}
+ Bli med i: {{ community.name }}
</div>
-
<!-- message -->
<div class="mt-6" :class="{ error: v$.message.$errors.length }">
<label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
id="messageLabel"
- > Melding til administrator av gruppa: </label
>
+ Melding til administrator av gruppa:
+ </label>
<textarea
id="message"
rows="4"
@@ -49,8 +49,8 @@ import axios from "axios";
import useVuelidate from "@vuelidate/core";
import { required, helpers, maxLength } from "@vuelidate/validators";
import Button from "@/components/BaseComponents/ColoredButton";
-import {tokenHeader} from "@/utils/token-utils";
-import {GetCommunity} from "@/utils/apiutil";
+import { tokenHeader } from "@/utils/token-utils";
+import { GetCommunity } from "@/utils/apiutil";
export default {
name: "CommunityRequestForm.vue",
@@ -64,45 +64,48 @@ export default {
validations() {
return {
- message: {
- required: helpers.withMessage(
- () => "Meldingen kan ikke være tom",
- required
- ),
- max: helpers.withMessage(
- () => `Meldingen kan inneholde max 200 tegn`,
- maxLength(200)
- ),
- },
-
+ message: {
+ required: helpers.withMessage(
+ () => "Meldingen kan ikke være tom",
+ required
+ ),
+ max: helpers.withMessage(
+ () => `Meldingen kan inneholde max 200 tegn`,
+ maxLength(200)
+ ),
+ },
};
},
data() {
return {
- message: "",
- communityId: null,
- community: {},
+ message: "",
+ communityId: null,
+ community: {},
};
},
- computed: {
- },
+ computed: {},
methods: {
//TODO fix so that community id is set (not null)
async saveClicked() {
- this.communityID = await this.$router.currentRoute.value.params
+ this.communityID = await this.$router.currentRoute.value.params
.communityID;
- await axios.post(process.env.VUE_APP_BASEURL+ `communities/${this.communityID}/private/join`, {message: this.message, }, {headers: tokenHeader()} );
+ await axios.post(
+ process.env.VUE_APP_BASEURL +
+ `communities/${this.communityID}/private/join`,
+ { message: this.message },
+ { headers: tokenHeader() }
+ );
},
- getCommunityFromAPI: async function () {
+ getCommunityFromAPI: async function () {
this.communityID = await this.$router.currentRoute.value.params
.communityID;
- console.log("Dette er community id =" + this.communityID)
+ console.log("Dette er community id =" + this.communityID);
this.community = await GetCommunity(this.communityID);
- console.log(this.community)
- }
+ console.log(this.community);
+ },
},
- async created() {
+ async created() {
await this.getCommunityFromAPI(); //To get the id of the community before mounting the view
},
};
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index bf2d75aeb736678ba47b4ba1106107e7aa44e899..336481461284383d1e4c90bcb0408b28b1a8c468 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -10,7 +10,7 @@
<script>
import UserListItemCard from "@/components/UserProfileComponents/UserListItemCard.vue";
import CommunityService from "@/services/community.service";
-import {GetMemberRequestsOfCommunity} from "@/utils/apiutil";
+import { GetMemberRequestsOfCommunity } from "@/utils/apiutil";
export default {
name: "MemberList",
@@ -32,14 +32,15 @@ export default {
},
async created() {
this.loading = true;
- if(this.requests){
- this.members = await GetMemberRequestsOfCommunity(
- this.$route.params.communityID
- );
+ if (this.requests) {
+ this.members = await GetMemberRequestsOfCommunity(
+ this.$route.params.communityID
+ );
} else {
- this.members = await CommunityService.getCommunityMembers(
- this.$route.params.communityID
- );}
+ this.members = await CommunityService.getCommunityMembers(
+ this.$route.params.communityID
+ );
+ }
this.loading = false;
},
};
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index 73ae23b432b772e2718ce69230478a99c23a027f..7b9a503d06a4b5d68f2b7b0af9dfca711d5edd8a 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -1,69 +1,64 @@
<template>
- <div id = "headline" class = "text-xl md:text-2xl text-gray-600 font-medium w-full">
- Dine gjenstander
+ <div
+ id="headline"
+ class="text-xl md:text-2xl text-gray-600 font-medium w-full"
+ >
+ Dine gjenstander
</div>
<!-- Search field -->
- <div class="relative" id="searchComponent">
- <span class="absolute inset-y-0 left-0 flex items-center pl-3">
- <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
- <path
- d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- ></path>
- </svg>
- </span>
+ <div class="relative" id="searchComponent">
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+ <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+ <path
+ d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ ></path>
+ </svg>
+ </span>
- <input
- type="text"
- id="searchInput"
- class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
- placeholder="Search"
- v-model="search"
- @change="searchWritten"
- />
- </div>
-
- <div class="absolute inset-x-0 px-5 py-3">
- <!-- ItemCards -->
- <div class="flex items-center justify-center w-screen">
- <!-- Shows items based on pagination -->
- <div
- 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>
+ <input
+ type="text"
+ id="searchInput"
+ class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
+ placeholder="Search"
+ v-model="search"
+ @change="searchWritten"
+ />
+ </div>
- <!-- Shows items based on search field input -->
- <div
- 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>
+ <div class="absolute inset-x-0 px-5 py-3">
+ <!-- ItemCards -->
+ <div class="flex items-center justify-center w-screen">
+ <!-- Shows items based on pagination -->
+ <div
+ 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>
- <!-- pagination -->
- <div class="flex justify-center" v-if="showItems">
- <PaginationTemplate
- v-bind:items="items"
- v-on:page:update="updatePage"
- v-bind:currentPage="currentPage"
- v-bind:pageSize="pageSize"
- class="mt-10"
- />
+
+ <!-- Shows items based on search field input -->
+ <div
+ 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>
</div>
+ <!-- pagination -->
+ <div class="flex justify-center" v-if="showItems">
+ <PaginationTemplate
+ v-bind:items="items"
+ v-on:page:update="updatePage"
+ v-bind:currentPage="currentPage"
+ v-bind:pageSize="pageSize"
+ class="mt-10"
+ />
+ </div>
+ </div>
</template>
<script>
import { GetUserListings, getItemPictures } from "@/utils/apiutil";
@@ -74,7 +69,7 @@ export default {
name: "UserItems",
components: {
ItemCard,
- PaginationTemplate
+ PaginationTemplate,
},
data() {
return {
@@ -88,7 +83,7 @@ export default {
},
showItems: true,
showSearchedItems: false,
- search: "",
+ search: "",
//Variables connected to pagination
currentPage: 0,
pageSize: 12,
@@ -119,7 +114,7 @@ export default {
}
}
},
- //Pagination
+ //Pagination
updatePage(pageNumber) {
this.currentPage = pageNumber;
this.updateVisibleTodos();
@@ -149,7 +144,6 @@ export default {
async beforeMount() {
await this.getUserListingsFromAPI();
this.updateVisibleTodos();
-
},
};
</script>
@@ -158,7 +152,6 @@ export default {
#headline {
display: block;
margin-top: 10px;
- margin-bottom: 10px;
-
+ margin-bottom: 10px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/UserProfileComponents/UserProfile.vue b/src/components/UserProfileComponents/UserProfile.vue
index aa280f2bd99842d2e6ddd4fcf9ad0f3d2e3fddf7..ff50ea7b5954b5bb66d5a1ac228bef17fefa7a5e 100644
--- a/src/components/UserProfileComponents/UserProfile.vue
+++ b/src/components/UserProfileComponents/UserProfile.vue
@@ -33,7 +33,6 @@
>
<li>
<router-link
-
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"
>Mine gjenstander</router-link
diff --git a/src/router/index.js b/src/router/index.js
index 1f12a1c3eff8df8f9df225df171f3af8f226fa57..348a23804a588b34073f754d15a3fad2a348c1fb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -121,7 +121,7 @@ const routes = [
path: "/user/userItems",
name: "UserItems",
component: () => import("../views/UserProfileViews/UserItemsView.vue"),
- }
+ },
];
const router = createRouter({
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 4a3becfcd9e287a3c7873d0ddd35c36daaf5a4e6..a037c9f793629d0c6be3bc06f9a11450f2fbe7b6 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -222,8 +222,6 @@ export async function GetListingsInCommunity(communityID) {
});
}
-
-
export async function GetMembersOfCommunity(communityID) {
return axios
.get(API_URL + "community/" + communityID + "/members", {
@@ -315,15 +313,15 @@ export async function GetUserListings() {
export function postNewRating(ratingInfo) {
return axios
- .post(API_URL + "rating/save", ratingInfo, {
- headers: tokenHeader(),
- })
- .then((response) => {
- console.log("poster: " + response.data);
- return response;
- })
- .catch((error) => {
- console.log(error.response);
- return error;
- });
+ .post(API_URL + "rating/save", ratingInfo, {
+ headers: tokenHeader(),
+ })
+ .then((response) => {
+ console.log("poster: " + response.data);
+ return response;
+ })
+ .catch((error) => {
+ console.log(error.response);
+ return error;
+ });
}
diff --git a/src/views/ChatViews/ChatView.vue b/src/views/ChatViews/ChatView.vue
index 2a847f5c0efe17527471aabcdfece65b8b9b9e6f..98283b536f2b892499768a7351948c5f3a91299d 100644
--- a/src/views/ChatViews/ChatView.vue
+++ b/src/views/ChatViews/ChatView.vue
@@ -3,19 +3,15 @@
</template>
<script>
-import ChatsComponent from '@/components/ChatComponents/ChatsComponent.vue';
+import ChatsComponent from "@/components/ChatComponents/ChatsComponent.vue";
export default {
components: {
ChatsComponent,
},
data() {
- return {
- };
+ return {};
},
};
-
</script>
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
diff --git a/src/views/CommunityViews/AdminView.vue b/src/views/CommunityViews/AdminView.vue
index 4c7fa00a00973f9b2818ad15dc6a7e7256dad19b..7912ea2b5fb332dfe0274f0531312b9c6f71ae84 100644
--- a/src/views/CommunityViews/AdminView.vue
+++ b/src/views/CommunityViews/AdminView.vue
@@ -13,8 +13,16 @@
{{ tab }}
</button>
</div>
- <MemberList :requests ='false' :buttons="['chat', 'kick']" v-if="currentTab === 0" />
- <MemberList :requests ='true' :buttons="['accept', 'reject']" v-if="currentTab === 1" />
+ <MemberList
+ :requests="false"
+ :buttons="['chat', 'kick']"
+ v-if="currentTab === 0"
+ />
+ <MemberList
+ :requests="true"
+ :buttons="['accept', 'reject']"
+ v-if="currentTab === 1"
+ />
<CommunitySettings v-if="currentTab === 2" />
</template>
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 32c28fcf4341712f117a4ed330b6a4886cf4603a..3fb952a9e6d885911eb851bdf8ffeb2868b14e1e 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -16,11 +16,11 @@
<!-- pagination my communities -->
<div class="flex justify-center">
<PaginationTemplate
- v-bind:items="myCommunities"
- v-on:page:update="updatePageMyCommunities"
- v-bind:currentPage="currentPageMyCommunities"
- v-bind:pageSize="pageSizeMyCommunities"
- class="mt-10 mb-5"
+ v-bind:items="myCommunities"
+ v-on:page:update="updatePageMyCommunities"
+ v-bind:currentPage="currentPageMyCommunities"
+ v-bind:pageSize="pageSizeMyCommunities"
+ class="mt-10 mb-5"
/>
</div>
</div>
@@ -31,25 +31,25 @@
</p>
<!-- Search field -->
<div class="relative mt-1 mx-2" id="searchComponent">
- <span class="absolute inset-y-0 left-0 flex items-center pl-3">
- <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
- <path
- d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- ></path>
- </svg>
- </span>
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+ <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+ <path
+ d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ ></path>
+ </svg>
+ </span>
<input
- type="text"
- id="searchInput"
- class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
- placeholder="Search"
- v-model="search"
- @change="searchWritten"
+ type="text"
+ id="searchInput"
+ class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
+ placeholder="Search"
+ v-model="search"
+ @change="searchWritten"
/>
</div>
@@ -63,11 +63,11 @@
<!-- pagination Public communities -->
<div class="flex justify-center">
<PaginationTemplate
- v-bind:items="publicCommunities"
- v-on:page:update="updatePagePublicCommunities"
- v-bind:currentPage="currentPagePublicCommunities"
- v-bind:pageSize="pageSizePublicCommunities"
- class="mt-10 mb-5"
+ v-bind:items="publicCommunities"
+ v-on:page:update="updatePagePublicCommunities"
+ v-bind:currentPage="currentPagePublicCommunities"
+ v-bind:pageSize="pageSizePublicCommunities"
+ class="mt-10 mb-5"
/>
</div>
</template>
@@ -85,7 +85,7 @@ export default {
loggedIn: false,
myCommunities: [],
publicCommunities: [],
- search: '',
+ search: "",
showSearched: false,
showPaginated: true,
@@ -108,15 +108,15 @@ export default {
let filteredItems = [];
filteredItems = this.publicCommunities.filter(
- (p) =>
- p.name.toLowerCase().includes(this.search.toLowerCase()) ||
- p.location.toLowerCase().includes(this.search.toLowerCase())
+ (p) =>
+ p.name.toLowerCase().includes(this.search.toLowerCase()) ||
+ p.location.toLowerCase().includes(this.search.toLowerCase())
);
return filteredItems;
},
},
- methods:{
+ methods: {
//Pagination
updatePagePublicCommunities(pageNumber) {
this.currentPagePublicCommunities = pageNumber;
@@ -127,25 +127,38 @@ export default {
this.updateVisibleCommunities();
},
updateVisibleCommunities() {
- this.visiblePublicCommunities = this.publicCommunities.slice(this.currentPagePublicCommunities * this.pageSizePublicCommunities, (this.currentPagePublicCommunities * this.pageSizePublicCommunities) + this.pageSizePublicCommunities);
- this.visibleMyCommunities = this.myCommunities.slice(this.currentPageMyCommunities * this.pageSizeMyCommunities, (this.currentPageMyCommunities * this.pageSizeMyCommunities) + this.pageSizeMyCommunities);
+ this.visiblePublicCommunities = this.publicCommunities.slice(
+ this.currentPagePublicCommunities * this.pageSizePublicCommunities,
+ this.currentPagePublicCommunities * this.pageSizePublicCommunities +
+ this.pageSizePublicCommunities
+ );
+ this.visibleMyCommunities = this.myCommunities.slice(
+ this.currentPageMyCommunities * this.pageSizeMyCommunities,
+ this.currentPageMyCommunities * this.pageSizeMyCommunities +
+ this.pageSizeMyCommunities
+ );
// if we have 0 visible communities, go back a page
- if (this.visiblePublicCommunities.length === 0 && this.currentPagePublicCommunities > 0) {
- this.updatePagePublicCommunities(this.currentPagePublicCommunities -1);
+ if (
+ this.visiblePublicCommunities.length === 0 &&
+ this.currentPagePublicCommunities > 0
+ ) {
+ this.updatePagePublicCommunities(this.currentPagePublicCommunities - 1);
}
- if (this.visibleMyCommunities.length === 0 && this.currentPageMyCommunities > 0) {
- this.updatePageMyCommunities(this.currentPageMyCommunities -1);
+ if (
+ this.visibleMyCommunities.length === 0 &&
+ this.currentPageMyCommunities > 0
+ ) {
+ this.updatePageMyCommunities(this.currentPageMyCommunities - 1);
}
},
//Triggers when search field input is changed
- searchWritten: function (){
+ searchWritten: function () {
//This method triggers when search input field is changed
- if(this.search.length > 0){
+ if (this.search.length > 0) {
this.showPaginated = false;
this.showSearched = true;
- }
- else{
+ } else {
this.showPaginated = true;
this.showSearched = false;
}
@@ -162,8 +175,8 @@ export default {
for (var i = 0; i < this.publicCommunities.length; i++) {
for (var j = 0; j < this.myCommunities.length; j++) {
if (
- this.publicCommunities[i].communityId ===
- this.myCommunities[j].communityId
+ this.publicCommunities[i].communityId ===
+ this.myCommunities[j].communityId
) {
this.publicCommunities.splice(i, 1);
}
@@ -171,6 +184,6 @@ export default {
}
this.updateVisibleCommunities();
- }
+ },
};
</script>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 60d0d1ca6241e98448f98ce5735387f7a579d6ae..b3a3ac1be4c5e41d3c9e49311443720fcedf895d 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -3,7 +3,7 @@
</template>
<script>
-import ChatsComponent from '@/components/ChatComponents/ChatsComponent.vue';
+import ChatsComponent from "@/components/ChatComponents/ChatsComponent.vue";
export default {
components: {
ChatsComponent,
diff --git a/src/views/UserProfileViews/UserItemsView.vue b/src/views/UserProfileViews/UserItemsView.vue
index 68183febcadb884441a48db2a600e4e305bd4878..8ac137d470d2dd6ed213d18d9c778c1da872996b 100644
--- a/src/views/UserProfileViews/UserItemsView.vue
+++ b/src/views/UserProfileViews/UserItemsView.vue
@@ -3,16 +3,13 @@
</template>
<script>
-import UserItems from "@/components/UserProfileComponents/UserItems.vue"
+import UserItems from "@/components/UserProfileComponents/UserItems.vue";
export default {
- name: "UserItemsView",
- components:{
- UserItems
- }
-
-}
+ name: "UserItemsView",
+ components: {
+ UserItems,
+ },
+};
</script>
-<style>
-
-</style>
+<style></style>
diff --git a/tests/unit/component-tests/base-component-tests/pagination-template.spec.js b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
index c074ce41f5251ffb9c78f8fa491b86053931efb8..91a7495f64107bf31184e1dee68e250a959e06de 100644
--- a/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
+++ b/tests/unit/component-tests/base-component-tests/pagination-template.spec.js
@@ -1,21 +1,21 @@
-import {mount} from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
import Pagination from "@/components/BaseComponents/PaginationTemplate.vue";
describe("PaginationTemplate", () => {
- let wrapper;
+ let wrapper;
- beforeEach(() => {
- wrapper = mount(Pagination, {
- //passing prop to component
- props: {
- items: [],
- currentPage: 0,
- pageSize: 4,
- },
- });
+ beforeEach(() => {
+ wrapper = mount(Pagination, {
+ //passing prop to component
+ props: {
+ items: [],
+ currentPage: 0,
+ pageSize: 4,
+ },
});
+ });
- it("is instantiated", () => {
- expect(wrapper.exists()).toBeTruthy();
- });
+ it("is instantiated", () => {
+ expect(wrapper.exists()).toBeTruthy();
+ });
});