GUI chat
This commit is contained in:
net
Net
parent
f25a439804
commit
0a98d96d38
9 changed files with 6862 additions and 9 deletions
184
src/modules/00_support/components/FormChat.vue
Normal file
184
src/modules/00_support/components/FormChat.vue
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useSupportStore } from "@/modules/00_support/store/Main.ts";
|
||||
import MessageChat from "@/modules/00_support/components/MessageChat.vue";
|
||||
|
||||
const store = useSupportStore();
|
||||
const currentIssue = ref<string>("");
|
||||
const content = ref<string>("");
|
||||
|
||||
onMounted(async () => {
|
||||
store.fetchIssue();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p class="text-h6 text-weight-medium">ถาม - ตอบ</p>
|
||||
|
||||
<div class="container">
|
||||
<div class="i1 bg-white align-center">
|
||||
<q-toolbar>
|
||||
<q-item-section>
|
||||
<q-input dense rounded outlined label="ค้นหาข้อความ...">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</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>สุวิมล คงสวัสดิ์</q-item-label>
|
||||
<q-item-label caption>
|
||||
<q-icon name="noise_control_off" color="positive" />
|
||||
ออนไลน์
|
||||
</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="
|
||||
() => {
|
||||
currentIssue = data.id;
|
||||
store.fetchMessage(data.id);
|
||||
}
|
||||
"
|
||||
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 caption>
|
||||
{{ data.lastMessage }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset />
|
||||
</div>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="i4 bg-grey-3 q-pa-sm" style="overflow-y: auto">
|
||||
<!-- <div class="i4 bg-grey-3 q-pa-sm"> -->
|
||||
<message-chat v-if="currentIssue" />
|
||||
</div>
|
||||
<div class="i5 bg-white container-input align-center">
|
||||
<div class="input-file">
|
||||
<q-btn flat>
|
||||
<q-icon name="attach_file" style="transform: rotate(-125deg)" />
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="input-chat">
|
||||
<q-input
|
||||
dense
|
||||
class="q-pa-xs"
|
||||
standout="bg-teal text-white"
|
||||
label="Aa"
|
||||
v-model="content"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="btn-chat">
|
||||
<q-btn
|
||||
@click="
|
||||
() => {
|
||||
store.sendMessage(content, currentIssue);
|
||||
}
|
||||
"
|
||||
flat
|
||||
color="primary"
|
||||
label="ส่งข้อความ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"search toolbar"
|
||||
"menu chat"
|
||||
"menu input";
|
||||
grid-template-rows: 60px 400px 60px;
|
||||
grid-template-columns: 400px 1fr;
|
||||
}
|
||||
|
||||
.container-input {
|
||||
display: grid;
|
||||
grid-template-areas: "file input-chat btn";
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 60px 1fr 100px;
|
||||
}
|
||||
|
||||
.input-file {
|
||||
grid-area: file;
|
||||
}
|
||||
|
||||
.input-chat {
|
||||
grid-area: input-chat;
|
||||
}
|
||||
|
||||
.btn-chat {
|
||||
grid-area: btn;
|
||||
}
|
||||
|
||||
.i1 {
|
||||
grid-area: search;
|
||||
}
|
||||
.i2 {
|
||||
grid-area: toolbar;
|
||||
}
|
||||
.i3 {
|
||||
grid-area: menu;
|
||||
}
|
||||
.i4 {
|
||||
grid-area: chat;
|
||||
}
|
||||
.i5 {
|
||||
grid-area: input;
|
||||
}
|
||||
.container-1 {
|
||||
display: grid;
|
||||
/* grid-template-columns: 1fr 2fr; */
|
||||
grid: 50px 450px / 1fr 2fr;
|
||||
}
|
||||
|
||||
.container-2 {
|
||||
display: grid;
|
||||
/* grid-template-columns: 1fr 2fr; */
|
||||
grid: 50px 450px / 1fr 2fr;
|
||||
}
|
||||
</style>
|
||||
29
src/modules/00_support/components/MessageChat.vue
Normal file
29
src/modules/00_support/components/MessageChat.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import "moment/dist/locale/th";
|
||||
import moment from "moment";
|
||||
import { useSupportStore } from "@/modules/00_support/store/Main";
|
||||
import { ref, onMounted } from "vue";
|
||||
const store = useSupportStore();
|
||||
moment.locale("th");
|
||||
console.log(moment.locale());
|
||||
</script>
|
||||
<template>
|
||||
<q-infinite-scroll reverse>
|
||||
<div class="bg-grey-3 q-pb-sm">
|
||||
<q-chat-message label="Sunday, 19th" />
|
||||
<q-chat-message
|
||||
v-if="store.message"
|
||||
v-for="data in store.message?.result.message.reverse()"
|
||||
: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()"
|
||||
/>
|
||||
</div>
|
||||
</q-infinite-scroll>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue