เพิ่ม Socket mark-read , notify-message
This commit is contained in:
net
Net
parent
5b081878c4
commit
081c1e0589
6 changed files with 191 additions and 78 deletions
|
|
@ -4,10 +4,9 @@ import { useSupportStore } from "@/modules/00_support/store/Main.ts";
|
|||
import MessageChat from "@/modules/00_support/components/MessageChat.vue";
|
||||
|
||||
const store = useSupportStore();
|
||||
|
||||
const content = ref<string>("");
|
||||
const scrollContainerRef = ref();
|
||||
const readStatus = ref<boolean>(false);
|
||||
const readStatus = ref<boolean>(true);
|
||||
|
||||
onUpdated(() => {
|
||||
nextTick(() => {
|
||||
|
|
@ -43,75 +42,77 @@ onMounted(async () => {
|
|||
</q-avatar>
|
||||
|
||||
<q-item-section class="q-pl-sm">
|
||||
<q-item-label>{{ currentTitle }}</q-item-label>
|
||||
<!-- <q-item-label caption>
|
||||
<q-icon name="noise_control_off" color="positive" />
|
||||
ออนไลน์
|
||||
</q-item-label> -->
|
||||
<q-item-label>{{ store.currentTitle }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-space />
|
||||
|
||||
<!-- <q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="o_videocam"
|
||||
class="q-mr-xs"
|
||||
text-color="primary"
|
||||
/> -->
|
||||
<q-btn flat round dense icon="o_info" text-color="grey" />
|
||||
</q-toolbar>
|
||||
</div>
|
||||
<div class="i3 bg-white">
|
||||
<q-list class="text-primary">
|
||||
<div v-for="data in store.issue?.result">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="currentIssue === data.id"
|
||||
@click="
|
||||
() => {
|
||||
<q-scroll-area ref="scrollContainerRef" style="height: 400px; width: 1fr">
|
||||
<q-list class="text-primary">
|
||||
<div v-for="data in store.issue?.result">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="store.currentIssue === data.id"
|
||||
@click="
|
||||
store.currentIssue = data.id;
|
||||
store.currentTitle = data.title;
|
||||
store.fetchMessage(data.id);
|
||||
}
|
||||
"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-avatar>
|
||||
<img src="https://cdn.quasar.dev/img/avatar1.jpg" />
|
||||
</q-avatar>
|
||||
store.fetchMessageStatus(data.id);
|
||||
store.issue.result = store.issue.result.map((v) => {
|
||||
if (v.id === data.id) {
|
||||
v.unreadCount = 0;
|
||||
}
|
||||
return v;
|
||||
});
|
||||
"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-avatar>
|
||||
<img src="https://cdn.quasar.dev/img/avatar1.jpg" />
|
||||
</q-avatar>
|
||||
|
||||
<q-item-section class="q-pl-sm">
|
||||
<q-item-label>{{ data.title }}</q-item-label>
|
||||
<q-item-section class="q-pl-sm">
|
||||
<q-item-label>{{ data.title }}</q-item-label>
|
||||
|
||||
<q-item-label class="flex" caption>
|
||||
{{ data.lastMessage }}
|
||||
|
||||
<q-space />
|
||||
<q-toggle v-model="readStatus" label="test" />
|
||||
<q-badge
|
||||
v-if="readStatus"
|
||||
class=""
|
||||
rounded
|
||||
color="red"
|
||||
label="1"
|
||||
/>
|
||||
<q-icon v-else size="18px" name="done_all" />
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset />
|
||||
</div>
|
||||
</q-list>
|
||||
<q-item-label class="flex" caption>
|
||||
{{ data.lastMessage }}
|
||||
<q-space />
|
||||
<q-icon
|
||||
v-if="data.lastMessage?.length === 0"
|
||||
color="green"
|
||||
size="18px"
|
||||
name="mdi-send"
|
||||
/>
|
||||
<div v-else>
|
||||
<q-badge
|
||||
v-if="data.unreadCount > 0"
|
||||
class=""
|
||||
rounded
|
||||
color="red"
|
||||
:label="data.unreadCount"
|
||||
/>
|
||||
<q-icon v-else size="18px" name="done_all" />
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset />
|
||||
</div>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
|
||||
<div class="i4 bg-grey-3">
|
||||
<!-- <div class="i4 bg-grey-3 q-pa-sm"> -->
|
||||
<q-scroll-area ref="scrollContainerRef" style="height: 400px; width: 1fr">
|
||||
<message-chat class="q-pr-md" />
|
||||
<message-chat v-if="store.currentIssue" class="q-pr-md" />
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
|
||||
<div class="grid-manage bg-white"></div>
|
||||
|
||||
<div class="i5 bg-white container-input align-center">
|
||||
<div class="input-file">
|
||||
<q-btn flat>
|
||||
|
|
@ -166,7 +167,7 @@ onMounted(async () => {
|
|||
grid-template-areas:
|
||||
"search toolbar"
|
||||
"menu chat"
|
||||
"menu input";
|
||||
"manage input";
|
||||
grid-template-rows: 60px 400px 60px;
|
||||
grid-template-columns: 400px 1fr;
|
||||
}
|
||||
|
|
@ -206,6 +207,10 @@ onMounted(async () => {
|
|||
.i5 {
|
||||
grid-area: input;
|
||||
}
|
||||
|
||||
.grid-manage {
|
||||
grid-area: manage;
|
||||
}
|
||||
.container-1 {
|
||||
display: grid;
|
||||
/* grid-template-columns: 1fr 2fr; */
|
||||
|
|
|
|||
|
|
@ -7,21 +7,59 @@ import { useSupportStore } from "@/modules/00_support/store/Main";
|
|||
const store = useSupportStore();
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
function onLoad() {
|
||||
console.log("ทำงานเเล้ว");
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-grey-3 q-pb-sm">
|
||||
<q-chat-message label="Sunday, 19th" />
|
||||
<q-chat-message
|
||||
v-for="(data, index) in store.message?.result.message"
|
||||
:key="index"
|
||||
:id="data.id"
|
||||
avatar="https://cdn.quasar.dev/img/avatar4.jpg"
|
||||
:text="[data.content]"
|
||||
:bg-color="data.fromUserId === store.userId ? 'primary' : 'white'"
|
||||
:text-color="data.fromUserId === store.userId ? 'white' : 'black'"
|
||||
:sent="data.fromUserId === store.userId"
|
||||
:stamp="moment(data.createdAt).fromNow()"
|
||||
/>
|
||||
<q-infinite-scroll @load="onLoad" reverse>
|
||||
<template v-slot:loading>
|
||||
<div class="row justify-center q-my-md">
|
||||
<q-spinner color="primary" name="dots" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
<q-chat-message label="Sunday, 19th" />
|
||||
<div v-for="(data, index) in store.message?.result.message">
|
||||
<q-item-section class="q-pl-sm">
|
||||
<q-item-label>
|
||||
<q-chat-message
|
||||
:key="index"
|
||||
:id="data.id"
|
||||
avatar="https://cdn.quasar.dev/img/avatar4.jpg"
|
||||
:text="[data.content]"
|
||||
:bg-color="data.fromUserId === store.userId ? 'primary' : 'white'"
|
||||
:text-color="data.fromUserId === store.userId ? 'white' : 'black'"
|
||||
:sent="data.fromUserId === store.userId"
|
||||
:stamp="moment(data.createdAt).fromNow()"
|
||||
/>
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label
|
||||
v-if="data.fromUserId === store.userId"
|
||||
class="flex"
|
||||
caption
|
||||
>
|
||||
<!-- <q-space v-if="data.fromUserId === store.userId" /> -->
|
||||
<q-space />
|
||||
<div
|
||||
v-if="
|
||||
store.messageStatus.result.some(
|
||||
(v) =>
|
||||
new Date(v.lastAccessDate).getTime() >=
|
||||
new Date(data.createdAt).getTime() &&
|
||||
index === store.message?.result.message.length - 1
|
||||
)
|
||||
"
|
||||
>
|
||||
อ่านเเล้ว
|
||||
</div>
|
||||
<!-- <q-toggle v-model="readStatus" label="test" /> -->
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</div>
|
||||
</q-infinite-scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue