117 lines
3 KiB
Vue
117 lines
3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useSupportStore } from "@/modules/00_support/store/Main";
|
|
import ChatMessage from "@/modules/00_support/components/ChatMessage.vue";
|
|
|
|
const store = useSupportStore();
|
|
const content = ref<string>("");
|
|
const { scrollContainer } = storeToRefs(store);
|
|
|
|
function getOnlineStatus(option: "icon" | "status") {
|
|
const isAdmin = store.userStatus.some((u) => u.role.includes("admin"));
|
|
if (option === "icon") return isAdmin ? "green" : "grey";
|
|
if (option === "status") return isAdmin ? "ออนไลน์" : "ออฟไลน์";
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="row q-py-md q-px-lg justify-between items-center"
|
|
v-if="store.currentTitle && store.currentTitle.length > 0"
|
|
>
|
|
<div class="col row">
|
|
<div style="border-radius: 50%; border: 1px solid teal">
|
|
<q-avatar color="teal-1" text-color="white" size="40px">
|
|
<q-icon :name="store.icon" size="24px" color="teal" />
|
|
</q-avatar>
|
|
</div>
|
|
<div class="col column q-ml-md">
|
|
<span class="col text-weight-bold">
|
|
{{ store.currentTitle }}
|
|
</span>
|
|
<span>
|
|
<q-icon
|
|
name="mdi-circle"
|
|
size="10px"
|
|
:color="getOnlineStatus('icon')"
|
|
/>
|
|
{{ getOnlineStatus("status") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-2 text-right q-gutter-x-md">
|
|
<!-- <q-icon class="col" name="mdi-video-outline" size="24px" color="teal" /> -->
|
|
<q-icon
|
|
class="col"
|
|
name="mdi-information-outline"
|
|
size="24px"
|
|
color="grey"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-separator />
|
|
|
|
<q-scroll-area
|
|
style="background-color: #f5f4f4"
|
|
ref="scrollContainer"
|
|
:style="{
|
|
height: $q.screen.gt.md ? '600px' : '450px',
|
|
}"
|
|
>
|
|
<div class="q-px-xl row col-12 justify-between">
|
|
<chat-message />
|
|
</div>
|
|
</q-scroll-area>
|
|
|
|
<q-separator />
|
|
<div class="row q-py-md q-px-lg justify-between items-center q-gutter-x-lg">
|
|
<!-- <div>
|
|
<q-btn flat disable class="col-1">
|
|
<q-icon
|
|
name="mdi-paperclip"
|
|
size="20px"
|
|
style="transform: rotate(-125deg)"
|
|
color="grey"
|
|
/>
|
|
</q-btn>
|
|
</div> -->
|
|
|
|
<div class="col-grow">
|
|
<q-input
|
|
@keydown.enter.prevent="
|
|
() => {
|
|
if (store.currentIssue) {
|
|
store.sendMessage(content, store.currentIssue);
|
|
content = '';
|
|
}
|
|
}
|
|
"
|
|
outlined
|
|
dense
|
|
placeholder="Aa"
|
|
v-model="content"
|
|
id="message"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
|
|
<div>
|
|
<q-btn
|
|
@click="
|
|
() => {
|
|
if (store.currentIssue) {
|
|
store.sendMessage(content, store.currentIssue);
|
|
content = '';
|
|
}
|
|
}
|
|
"
|
|
flat
|
|
class="col-2"
|
|
style="color: #009789"
|
|
label="ส่งข้อความ"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|