From 616f1ecdf6dd6532adf75cc8f805ffb1fc8b8ade Mon Sep 17 00:00:00 2001
From: saschrad <saschrad@stud.ntnu.no>
Date: Wed, 4 May 2022 10:51:12 +0200
Subject: [PATCH] Added pfp and new url and rent messages
---
.../ChatComponents/ChatComponent.vue | 72 ++++++++++++++---
src/components/ChatComponents/ChatProfile.vue | 4 +-
.../ChatComponents/ChatsComponent.vue | 81 +++++++------------
.../UserListItemCard.vue | 2 +-
src/views/ChatViews/ChatView.vue | 72 ++---------------
5 files changed, 99 insertions(+), 132 deletions(-)
diff --git a/src/components/ChatComponents/ChatComponent.vue b/src/components/ChatComponents/ChatComponent.vue
index 717ce69..a5e36d1 100644
--- a/src/components/ChatComponents/ChatComponent.vue
+++ b/src/components/ChatComponents/ChatComponent.vue
@@ -15,13 +15,23 @@
</div>
<div></div>
</div>
- <div class="conversation">
- <ChatMessage
- v-for="(message, i) in messages"
- v-bind:key="i"
- :message="message"
- ></ChatMessage>
- <rental-message></rental-message>
+ <div v-if="recipient" class="conversation">
+ <div
+ v-for="(message, i) in messages"
+ v-bind:key="i"
+ >
+ <rental-message v-if="message?.createdAt"></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>
<div
class="
@@ -81,10 +91,11 @@ export default {
},
data() {
return {
- messages: [],
canScroll: true,
scrollBehavior: "",
recipient: null,
+ rents: [],
+ msgs: []
};
},
components: {
@@ -93,13 +104,18 @@ export default {
},
computed: {
name() {
- console.log(this.recipient);
return this.recipient
? this.recipient.firstName + " " + this.recipient.lastName
: "N/A";
},
src() {
- return this.recipient?.picture
+ 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;
}
},
methods: {
@@ -111,7 +127,7 @@ export default {
container.scrollTop = container.scrollHeight;
},
async sendMessage() {
- if (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(
@@ -145,7 +161,22 @@ export default {
},
}
);
- this.messages = await response.json();
+ this.msgs = await response.json();
+ },
+ async reloadRents() {
+ const token = this.$store.state.user.token;
+ const response = await fetch(
+ `${process.env.VUE_APP_BASEURL}renting/user/${this.recipientID}/all`,
+ {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ this.rents = await response.json();
+ console.log("rents", this.rents);
},
async getRecipient() {
const token = this.$store.state.user.token;
@@ -164,14 +195,16 @@ export default {
},
},
watch: {
- async recipientID() {
+ async 'recipientID'() {
await this.reloadMessages();
await this.getRecipient();
+ await this.reloadRents();
},
},
async created() {
await this.reloadMessages();
await this.getRecipient();
+ await this.reloadRents();
},
updated() {
if (this.canScroll) this.scroll();
@@ -193,6 +226,19 @@ export default {
width: auto;
}
+.not-found {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+}
+
+.not-found p {
+ font-size: 2rem;
+ font-weight: bold;
+}
.conversation {
height: 100%;
width: 100%;
diff --git a/src/components/ChatComponents/ChatProfile.vue b/src/components/ChatComponents/ChatProfile.vue
index 446ecce..1e98dd1 100644
--- a/src/components/ChatComponents/ChatProfile.vue
+++ b/src/components/ChatComponents/ChatProfile.vue
@@ -5,7 +5,7 @@
>
<img
class="h-10 w-10 rounded-full object-cover"
- :src="src"
+ :src="src || 'S../../assets/defaultUserProfileImage.jpg'"
:alt="{ name }"
/>
<div class="w-full pb-2">
@@ -50,7 +50,7 @@ export default {
return "5 min";
},
src() {
- return this.conversation.recipient.picture || "N/A";
+ return this.conversation.recipient.picture ? this.conversation.recipient.picture : require("@/assets/defaultUserProfileImage.jpg");
}
},
methods: {
diff --git a/src/components/ChatComponents/ChatsComponent.vue b/src/components/ChatComponents/ChatsComponent.vue
index 936b95c..cc979e9 100644
--- a/src/components/ChatComponents/ChatsComponent.vue
+++ b/src/components/ChatComponents/ChatsComponent.vue
@@ -14,8 +14,8 @@
</div>
</div>
<div class="current-chat">
- <ChatComponent @openHamburger="openHamburger" v-if="recipient" :recipientID="recipient"></ChatComponent>
- <div v-else><p>NOTHING HERE :)</p></div>
+ <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>
@@ -23,8 +23,6 @@
<script>
import ChatProfile from './ChatProfile.vue';
import ChatComponent from './ChatComponent.vue';
-//import ChatMessage from "./ChatMessage.vue";
-import axios from "axios";
import { parseCurrentUser } from "@/utils/token-utils";
import ws from "@/services/ws";
import ColoredButton from '../BaseComponents/ColoredButton.vue';
@@ -32,6 +30,12 @@ import ColoredButton from '../BaseComponents/ColoredButton.vue';
export default {
props: {
+ },
+ watch:{
+ '$route' () {
+ const newVal = this.$route.query?.userID || null;
+ this.recipientID = newVal;
+ }
},
data: () => {
return {
@@ -40,9 +44,9 @@ export default {
recipient: null,
hambuger: "none",
conversations: [
-
],
- hambugerDisplay: "none"
+ hambugerDisplay: "none",
+ recipientID: null
};
},
components: { ChatProfile, ChatComponent, ColoredButton},
@@ -50,21 +54,14 @@ export default {
userid() {
return parseCurrentUser().accountId;
},
- recipientID() {
- return this.recipient.userId;
- },
name() {
return this.recipient.firstName + " " + this.recipient.lastName;
},
},
methods: {
selectUser(recipientID) {
- this.hambugerDisplay = "none"
- this.recipient = this.conversations.find(
- (conversation) => conversation.recipient.userId == recipientID
- )?.recipient.userId;
-
- console.log("New recipient", this.recipient)
+ this.hambugerDisplay = "none";
+ this.$router.push({path: 'messages', query: {userID: recipientID}})
},
openHamburger() {
this.hambugerDisplay = "block"
@@ -72,46 +69,9 @@ export default {
calculateSide(from) {
return from == this.userid ? "end" : "start";
},
- async sendMessage() {
- const token = this.$store.state.user.token;
- await axios.post(
- process.env.VUE_APP_BASEURL +
- `chats/users/${this.recipientID}/messages`,
- {
- message: this.message,
- },
- {
- headers: {
- Authorization: `Bearer ${token}`,
- },
- }
- );
- this.message = "";
- ws.sendMessage({
- sender: parseInt(this.userid),
- recipient: this.recipientID,
- });
- this.reloadMessages();
- },
- async reloadMessages() {
- const token = this.$store.state.user.token;
- const response = await fetch(
- `${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`,
- {
- method: "GET",
- headers: {
- "Content-Type": "application/json",
- Authorization: `Bearer ${token}`,
- },
- }
- );
-
- this.messages = await response.json();
- },
},
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",
@@ -125,6 +85,8 @@ export default {
ws.on("NEW_MESSAGE", () => {
this.reloadMessages();
});
+ this.recipientID = (this.$route.query?.userID || null)
+ if(!this.recipientID) this.hambugerDisplay = "block";
},
};
</script>
@@ -136,6 +98,21 @@ export default {
height: min(100vh - 3.5rem);
}
+.nothing-selected {
+ 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;
+}
+
.current-chat {
width: 100%;
height: 100%;
diff --git a/src/components/UserProfileComponents/UserListItemCard.vue b/src/components/UserProfileComponents/UserListItemCard.vue
index b60ef19..8ed95bd 100644
--- a/src/components/UserProfileComponents/UserListItemCard.vue
+++ b/src/components/UserProfileComponents/UserListItemCard.vue
@@ -102,7 +102,7 @@ export default {
openChatWithUser() {
this.$router.push({
name: "messages",
- params: { userId: this.user.userId },
+ query: { userID: this.user.userId },
});
},
kickUserFromCommunity() {
diff --git a/src/views/ChatViews/ChatView.vue b/src/views/ChatViews/ChatView.vue
index b260cfd..2a847f5 100644
--- a/src/views/ChatViews/ChatView.vue
+++ b/src/views/ChatViews/ChatView.vue
@@ -1,77 +1,21 @@
<template>
- <div class="flex flex-col h-full overflow-hidden border-2">
- <div class="flex flex-row h-full border-2 bg-gray-50">
- <div class="basis-1/3">
- <h1 class="text-center text-l">Mine samtaler</h1>
- <ul v-if="conversations" class="border-2">
- <li
- v-for="conversation in conversations"
- :key="conversation.recipient.userId"
- >
- <ChatProfile :conversation="conversation" @recipient="selectUser" />
- </li>
- </ul>
- </div>
- <div class="basis-2/3">
- <CurrentChat v-if="selected" :recipient="selected" />
- </div>
- </div>
- </div>
- <!-- <div class="min-h-full">
- <div class="border rounded grid grid-cols-3 w-full">
- <div class="border-r border-gray-300 col-span-1">
- <ul class="hidden sm:block overflow-auto h-full">
- <h2 class="my-2 mb-2 ml-2 text-lg text-gray-600">Chats</h2>
- <li v-if="conversations">
- </li>
- </ul>
- </div>
- </div>
- </div> -->
+ <chats-component></chats-component>
</template>
<script>
-import ChatProfile from "@/components/ChatComponents/ChatProfile.vue";
-import CurrentChat from "@/components/ChatComponents/CurrentChat.vue";
-import { parseCurrentUser } from "@/utils/token-utils";
-import ChatService from "@/services/chat.service";
-
+import ChatsComponent from '@/components/ChatComponents/ChatsComponent.vue';
export default {
components: {
- ChatProfile,
- CurrentChat,
+ ChatsComponent,
},
data() {
return {
- conversations: null,
- selected: null,
};
},
- computed: {
- key() {
- return this.selected.userId || "ERROR";
- },
- },
- methods: {
- userID() {
- return parseCurrentUser().accountId;
- },
- selectUser(value) {
- const userid = value;
- this.conversations.find((conversation) => {
- return conversation.recipient.userId == userid;
- });
- this.selected = this.conversations.find(
- (conversation) => conversation.recipient.userId == userid
- ).recipient;
- //console.log(this.selected);
- },
- },
- async created() {
- this.conversations = await ChatService.getConversations(this.userID());
- if (this.$route.params.userId !== null) {
- this.selectUser(this.$route.params.userId);
- }
- },
};
+
</script>
+
+<style>
+
+</style>
\ No newline at end of file
--
GitLab