update หน้า support user (แยก component)
This commit is contained in:
puri-ph4tt
parent
666fb8e4d9
commit
a17625c13c
4 changed files with 437 additions and 124 deletions
47
src/modules/00_support/components/ChatMessage.vue
Normal file
47
src/modules/00_support/components/ChatMessage.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
import "moment/dist/locale/th";
|
||||
import moment from "moment";
|
||||
import { useSupportStore } from "@/modules/00_support/store/Main";
|
||||
|
||||
const store = useSupportStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-grow q-pt-md q-pb-sm">
|
||||
<div v-for="(data, index) in store.message?.result.message">
|
||||
<q-item-label>
|
||||
<q-chat-message
|
||||
ref="myElement"
|
||||
:key="index"
|
||||
:id="data.id"
|
||||
avatar="https://cdn.quasar.dev/img/avatar4.jpg"
|
||||
:text="[data.content]"
|
||||
:bg-color="data.fromUserId === store.userId ? 'teal' : '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 />
|
||||
<div
|
||||
v-if="
|
||||
store.messageStatus?.result.some(
|
||||
(v) =>
|
||||
new Date(v.lastAccessDate).getTime() >=
|
||||
new Date(data.createdAt).getTime() &&
|
||||
index + 1 === store.message?.result.message.length
|
||||
)
|
||||
"
|
||||
>
|
||||
อ่านเเล้ว
|
||||
</div>
|
||||
</q-item-label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
117
src/modules/00_support/components/FormChat.vue
Normal file
117
src/modules/00_support/components/FormChat.vue
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useSupportStore } from "@/modules/00_support/store/Main";
|
||||
import ChatMessage from "@/modules/00_support/components/ChatMessage.vue";
|
||||
|
||||
const store = useSupportStore();
|
||||
const content = ref<string>("");
|
||||
|
||||
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 ? "ออนไลน์" : "ออฟไลน์";
|
||||
}
|
||||
defineProps({
|
||||
icon: String,
|
||||
});
|
||||
</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="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"
|
||||
: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 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>
|
||||
114
src/modules/00_support/components/NewIssue.vue
Normal file
114
src/modules/00_support/components/NewIssue.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useSupportStore } from "@/modules/00_support/store/Main";
|
||||
|
||||
const store = useSupportStore();
|
||||
|
||||
const isOpen = ref<boolean>(false);
|
||||
const title = ref<string>("");
|
||||
const categoryId = ref<string>("");
|
||||
|
||||
const options = ref<{ label: string; value: string }[]>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
await store.fetchIssueCategory();
|
||||
if (store.issueCategory) {
|
||||
options.value = store.issueCategory?.result.map((v) => ({
|
||||
label: v.name,
|
||||
value: v.id,
|
||||
}));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div @click="isOpen = true" class="col-10 row items-center q-pa-md new">
|
||||
<div class="noactive-avatar">
|
||||
<div class="new-avatar">
|
||||
<q-icon name="mdi-plus" size="24px" color="primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col column q-ml-md">
|
||||
<span class="col text-grey"> เพิ่มเรื่องปรึกษาใหม่ </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog -->
|
||||
<q-dialog v-model="isOpen">
|
||||
<q-card class="q-pa-md" style="width: 100%">
|
||||
<q-card-section class="row items-center">
|
||||
<div class="text-h6">เพิ่มเรื่องปรึกษาใหม่</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-gutter-x-md row">
|
||||
<q-select
|
||||
class="col-3"
|
||||
outlined
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
v-model="categoryId"
|
||||
:options="options"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
label="หมวดหมู่"
|
||||
/>
|
||||
<q-input
|
||||
class="col-grow"
|
||||
outlined
|
||||
dense
|
||||
v-model="title"
|
||||
label="ชื่อเรื่อง"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
|
||||
<q-btn
|
||||
@click="
|
||||
async () => {
|
||||
await store.newIssue(title, categoryId);
|
||||
isOpen = false;
|
||||
}
|
||||
"
|
||||
label="บันทึก"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.new {
|
||||
transition: 0.1s ease all;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
border-left: 5px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: #ebf9f7;
|
||||
}
|
||||
}
|
||||
|
||||
.new-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px dashed #9e9e9e;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue