152 lines
4 KiB
Vue
152 lines
4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useSupportStore } from "@/modules/00_support/store/Main";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import ChatMessage from "@/modules/00_support/components/ChatMessage.vue";
|
|
|
|
const store = useSupportStore();
|
|
const content = ref<string>("");
|
|
const { date2Thai } = useCounterMixin();
|
|
const { scrollContainer } = storeToRefs(store);
|
|
|
|
function getOnlineStatus(option: "icon" | "status") {
|
|
const isAdmin = store.userStatus.some((u: any) => u.role.includes("admin"));
|
|
if (option === "icon") return isAdmin ? "green" : "grey";
|
|
if (option === "status") return isAdmin ? "ออนไลน์" : "ออฟไลน์";
|
|
}
|
|
|
|
const thaiOptions: Intl.DateTimeFormatOptions = {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="row q-py-md q-px-lg justify-between items-center"
|
|
v-if="store.currentTitle && store.currentTitle.length > 0"
|
|
style="flex-wrap: nowrap"
|
|
>
|
|
<div class="row items-center" style="flex-wrap: nowrap">
|
|
<q-btn
|
|
flat
|
|
padding="none"
|
|
class="q-mr-md"
|
|
icon="mdi-chevron-left"
|
|
@click="store.openChat = false"
|
|
v-if="!$q.screen.gt.xs"
|
|
/>
|
|
<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="column q-ml-md">
|
|
<span class="text-weight-bold ellipsis-2-lines">
|
|
{{ 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"
|
|
>
|
|
<q-tooltip class="column">
|
|
<span>{{ store.currentTitle }}</span>
|
|
<span>
|
|
{{ date2Thai(store.currentIssueDate) }}
|
|
{{
|
|
new Date(store.currentIssueDate).toLocaleTimeString(
|
|
"th-TH",
|
|
thaiOptions
|
|
)
|
|
}}
|
|
น. <q-space />
|
|
</span>
|
|
</q-tooltip>
|
|
</q-icon>
|
|
</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"
|
|
style="flex-wrap: nowrap"
|
|
>
|
|
<!-- <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"
|
|
>
|
|
<span v-if="$q.screen.gt.xs">ส่งข้อความ</span>
|
|
<q-icon v-else name="mdi-send" size="xs" color="primary" />
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|