เเก้ไข type
This commit is contained in:
net
Net
parent
081c1e0589
commit
c6b9236a04
5 changed files with 221 additions and 188 deletions
|
|
@ -1,23 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onUpdated, onMounted, nextTick } from "vue";
|
||||
import { useSupportStore } from "@/modules/00_support/store/Main.ts";
|
||||
import MessageChat from "@/modules/00_support/components/MessageChat.vue";
|
||||
import "moment/dist/locale/th";
|
||||
import moment from "moment";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useSupportStore } from "@/modules/00_support/store/Main";
|
||||
import type { QInfiniteScroll, QInfiniteScrollProps } from "quasar";
|
||||
|
||||
const store = useSupportStore();
|
||||
const content = ref<string>("");
|
||||
const scrollContainerRef = ref();
|
||||
const readStatus = ref<boolean>(true);
|
||||
|
||||
onUpdated(() => {
|
||||
nextTick(() => {
|
||||
store.scrollToEnd();
|
||||
});
|
||||
});
|
||||
const searchInput = ref<string>("");
|
||||
const currentIssuePage = ref<number>(1);
|
||||
const totalPageIssue = ref<number>();
|
||||
const { scrollContainer } = storeToRefs(store);
|
||||
|
||||
onMounted(async () => {
|
||||
store.scrollContainer = scrollContainerRef.value;
|
||||
store.fetchIssue();
|
||||
await store.fetchIssue();
|
||||
totalPageIssue.value = Math.ceil(store.currentTotalIssue || 0 / 6);
|
||||
});
|
||||
|
||||
const onLoad = (async (_: any, done: any) => {
|
||||
const totalPages = Math.ceil(store.currentTotalMessage || 0 / 30);
|
||||
if (store.currentPage && totalPages > store.currentPage) {
|
||||
await store.loadMessage(store.currentPage + 1);
|
||||
done();
|
||||
}
|
||||
}) satisfies QInfiniteScrollProps["onLoad"];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -27,7 +34,13 @@ onMounted(async () => {
|
|||
<div class="i1 bg-white align-center">
|
||||
<q-toolbar>
|
||||
<q-item-section>
|
||||
<q-input dense rounded outlined label="ค้นหาข้อความ...">
|
||||
<q-input
|
||||
dense
|
||||
rounded
|
||||
outlined
|
||||
label="ค้นหาข้อความ..."
|
||||
v-model="searchInput"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
|
|
@ -35,12 +48,12 @@ onMounted(async () => {
|
|||
</q-item-section>
|
||||
</q-toolbar>
|
||||
</div>
|
||||
|
||||
<div class="i2 bg-white align-center">
|
||||
<q-toolbar>
|
||||
<q-avatar>
|
||||
<img src="https://cdn.quasar.dev/img/avatar3.jpg" />
|
||||
</q-avatar>
|
||||
|
||||
<q-item-section class="q-pl-sm">
|
||||
<q-item-label>{{ store.currentTitle }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -48,78 +61,141 @@ onMounted(async () => {
|
|||
<q-btn flat round dense icon="o_info" text-color="grey" />
|
||||
</q-toolbar>
|
||||
</div>
|
||||
|
||||
<div class="i3 bg-white">
|
||||
<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);
|
||||
store.fetchMessageStatus(data.id);
|
||||
<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);
|
||||
store.fetchMessageStatus(data.id);
|
||||
|
||||
if (store.issue) {
|
||||
store.issue.result = store.issue.result.map((v) => {
|
||||
if (v.id === data.id) {
|
||||
v.unreadCount = 0;
|
||||
}
|
||||
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-label class="flex" caption>
|
||||
{{ data.lastMessage }}
|
||||
<q-space />
|
||||
<q-icon
|
||||
v-if="data.lastMessage?.length === 0"
|
||||
color="green"
|
||||
size="18px"
|
||||
name="mdi-send"
|
||||
}
|
||||
"
|
||||
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-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"
|
||||
/>
|
||||
<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 />
|
||||
<q-icon v-else size="18px" name="done_all" />
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset />
|
||||
</div>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<div class="i4 bg-grey-3" v-if="store.currentIssue">
|
||||
<q-scroll-area
|
||||
ref="scrollContainer"
|
||||
style="width: 100%; height: 100%"
|
||||
v-if="store.message?.result.message.length || 0 > 0"
|
||||
>
|
||||
<q-infinite-scroll @load="onLoad" :offset="250" reverse>
|
||||
<div
|
||||
v-for="(item, index) in store.message?.result.message"
|
||||
:key="index"
|
||||
class="caption"
|
||||
>
|
||||
<q-item-section class="q-pr-md">
|
||||
<q-item-label>
|
||||
<q-chat-message
|
||||
:key="index"
|
||||
:id="item.id"
|
||||
avatar="https://cdn.quasar.dev/img/avatar4.jpg"
|
||||
:text="[item.content]"
|
||||
:bg-color="
|
||||
item.fromUserId === store.userId ? 'primary' : 'white'
|
||||
"
|
||||
:text-color="
|
||||
item.fromUserId === store.userId ? 'white' : 'black'
|
||||
"
|
||||
:sent="item.fromUserId === store.userId"
|
||||
:stamp="moment(item.createdAt).fromNow()"
|
||||
/>
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label
|
||||
v-if="item.fromUserId === store.userId"
|
||||
class="flex"
|
||||
caption
|
||||
>
|
||||
<q-space />
|
||||
<div
|
||||
v-if="
|
||||
store.messageStatus?.result.some(
|
||||
(v) =>
|
||||
new Date(v.lastAccessDate).getTime() >=
|
||||
new Date(item.createdAt).getTime() &&
|
||||
index + 1 === store.message?.result.message.length
|
||||
)
|
||||
"
|
||||
>
|
||||
อ่านเเล้ว
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</div>
|
||||
</q-list>
|
||||
<template v-slot:loading>
|
||||
<div class="row justify-center q-my-md">
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template>
|
||||
</q-infinite-scroll>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
|
||||
<div class="i4 bg-grey-3">
|
||||
<q-scroll-area ref="scrollContainerRef" style="height: 400px; width: 1fr">
|
||||
<message-chat v-if="store.currentIssue" class="q-pr-md" />
|
||||
</q-scroll-area>
|
||||
<div class="grid-manage bg-white align-center">
|
||||
<q-pagination
|
||||
v-model="currentIssuePage"
|
||||
:max="totalPageIssue || 1"
|
||||
:max-pages="6"
|
||||
boundary-numbers
|
||||
@update:model-value="
|
||||
(value) => {
|
||||
store.fetchIssue(value);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid-manage bg-white"></div>
|
||||
|
||||
<div class="i5 bg-white container-input align-center">
|
||||
<div class="input-file">
|
||||
<!-- <div class="input-file">
|
||||
<q-btn flat>
|
||||
<q-icon name="attach_file" style="transform: rotate(-125deg)" />
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
<div class="input-chat">
|
||||
<q-input
|
||||
dense
|
||||
|
|
@ -135,7 +211,6 @@ onMounted(async () => {
|
|||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="btn-chat">
|
||||
<q-btn
|
||||
@click="
|
||||
|
|
@ -174,9 +249,11 @@ onMounted(async () => {
|
|||
|
||||
.container-input {
|
||||
display: grid;
|
||||
grid-template-areas: "file input-chat btn";
|
||||
grid-template-areas: "input-chat btn";
|
||||
/* grid-template-areas: "file input-chat btn"; */
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 60px 1fr 100px;
|
||||
/* grid-template-columns: 60px 1fr 100px; */
|
||||
grid-template-columns: 1fr 100px;
|
||||
}
|
||||
|
||||
.input-file {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue