hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

แก้การแสดงผลระบบ support (user)

Browse source
This commit is contained in:
puri-ph4tt 2024-02-14 13:55:36 +07:00
parent 4103b78774
commit 85171810f3
3 changed files with 132 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/modules/00_support/components/ChatMessage.vue
View file

@ -37,11 +37,14 @@ function dateChat(timestamp: string) {
<span> {{ dateChat(item.createdAt) }} </span>
</template>
<template v-slot:avatar>
<img
<q-img
v-if="item.fromUserId === store.userId"
class="q-message-avatar q-message-avatar--sent"
src="https://cdn.quasar.dev/img/avatar4.jpg"
src="@/assets/avatar_user.jpg"
class="q-ml-sm"
spinner-color="white"
style="height: 42px; max-width: 42px; border-radius: 50%"
/>
<div
v-else
class="q-mr-sm"

168
src/modules/00_support/components/NewIssue.vue
View file

@ -1,16 +1,27 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useSupportStore } from "@/modules/00_support/store/Main";
import DialogHeader from "@/components/DialogHeader.vue";
const store = useSupportStore();
const isOpen = ref<boolean>(false);
const title = ref<string>("");
const titleRef = ref();
const categoryId = ref<string>("");
const categoryRef = ref();
const options = ref<{ label: string; value: string }[]>([]);
const props = defineProps({
modal: {
type: Boolean,
default: false,
},
clickClose: {
type: Function,
default: () => {},
},
});
onMounted(async () => {
await store.fetchIssueCategory();
if (store.issueCategory) {
@ -25,109 +36,76 @@ async function onSubmit() {
titleRef.value.validate();
categoryRef.value.validate();
if (titleRef.value.hasError || categoryRef.value.hasError) return "";
await store.newIssue(title.value, categoryId.value);
isOpen.value = false;
await store.newIssue(title.value, categoryId.value).then(() => {
props.clickClose();
title.value = "";
categoryId.value = "";
});
}
</script>
<template>
<div
@click="isOpen = true"
class="col-10 row items-center q-py-sm q-px-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>
<form @submit.prevent.stop="onSubmit">
<q-card-section class="q-gutter-x-md row">
<q-select
ref="categoryRef"
class="col-3"
outlined
dense
emit-value
map-options
v-model="categoryId"
:options="options"
option-value="value"
option-label="label"
label="หมวดหมู่"
lazy-rules
:rules="[
(val) => (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
]"
/>
<q-input
ref="titleRef"
class="col-grow"
outlined
dense
v-model="title"
label="ชื่อเรื่อง"
lazy-rules
:rules="[
(val) => (val && val.length > 0) || 'กรุณาเพิ่มชื่อเรื่อง',
]"
/>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 40vw; max-width: 40vw">
<q-form ref="myForm" @submit.prevent.stop="onSubmit">
<DialogHeader tittle="แจ้งปัญหา" :close="clickClose" />
<q-separator />
<q-card-section class="q-pa-sm bg-grey-1">
<div class="row col-12 q-col-gutter-sm">
<div class="col-xs-12">
<div class="col-12 row q-py-sm items-center q-col-gutter-sm">
<q-select
outlined
dense
hide-bottom-space
emit-value
map-options
lazy-rules
ref="categoryRef"
class="full-width inputgreen cursor-pointer"
option-value="value"
option-label="label"
label="หมวดหมู่"
v-model="categoryId"
:options="options"
:rules="[
(val) =>
(val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
]"
/>
<q-input
ref="titleRef"
outlined
dense
hide-bottom-space
lazy-rules
class="full-width inputgreen cursor-pointer"
label="ชื่อเรื่อง"
v-model="title"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกชื่อเรื่อง',
]"
/>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
<q-btn
dense
unelevated
label="แจ้งปัญหา"
color="public"
type="submit"
label="บันทึก"
color="primary"
text-color="white"
/>
class="q-px-md"
v-close-popup
>
<!-- icon="mdi-content-save-outline" -->
<q-tooltip>แจ้งปัญหา</q-tooltip>
</q-btn>
</q-card-actions>
</form>
</q-form>
</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>

65
src/modules/00_support/views/MainPage.vue
View file

@ -7,6 +7,7 @@ import moment from "moment";
const store = useSupportStore();
const searchData = ref<string>("");
const newIssueModal = ref<boolean>(false);
function dateIssue(timestamp: string): string {
const parsedTimestamp = moment(timestamp);
@ -44,14 +45,16 @@ watch(searchData, () => {
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">ถาม - ตอบ</div>
<div class="toptitle text-white col-12 row items-center">
แจ้งปัญหาการใช้งาน
</div>
<div class="col-12">
<q-card bordered>
<div class="row">
<!-- Left -->
<div v-if="!store.isOpen" class="col-xs-12 col-sm-4 col-md-3">
<!-- New -->
<div class="q-pt-md bg-white">
<div class="q-pt-md">
<div class="q-px-md q-pb-md">
<q-input
rounded
@ -63,14 +66,27 @@ watch(searchData, () => {
id="inputSearch"
@keydown.enter.prevent="store.searchIssue(searchData)"
>
<template v-slot:prepend
><q-icon name="mdi-magnify" class="pointer" />
<template v-slot:prepend>
<q-icon name="mdi-magnify" class="pointer" />
</template>
</q-input>
</div>
<q-separator inset />
<div>
<new-issue />
<div
@click="newIssueModal = true"
class="col-10 row items-center q-py-sm q-px-md new"
>
<div class="no-active-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>
</div>
<q-separator inset />
<!-- No Issue -->
@ -78,7 +94,7 @@ watch(searchData, () => {
v-if="store.issue?.result.length === 0"
class="col-10 row items-center q-pa-md new"
>
<div class="noactive-avatar">
<div class="no-active-avatar">
<q-avatar
color="transparent"
text-color="white"
@ -123,10 +139,10 @@ watch(searchData, () => {
}
"
:class="{ active: store.currentIssue === item.id }"
class="noactive row q-py-md justify-between items-center q-px-md"
class="no-active row q-py-md justify-between items-center q-px-md"
>
<div class="col-9 row items-center">
<div class="noactive-avatar">
<div class="no-active-avatar">
<q-avatar color="grey-2" text-color="white" size="40px">
<q-icon
:name="store.icon"
@ -194,11 +210,15 @@ watch(searchData, () => {
</q-card>
</div>
</div>
<new-issue
:modal="newIssueModal"
:click-close="() => (newIssueModal = false)"
/>
</div>
</template>
<style scoped lang="scss">
.noactive {
.no-active {
transition: 0.1s ease all;
opacity: 1;
cursor: pointer;
@ -207,7 +227,7 @@ watch(searchData, () => {
&:hover {
background: #ebf9f7;
.noactive-avatar {
.no-active-avatar {
transition: 0.1s ease all;
border-radius: 50%;
border: 1px solid $primary;
@ -215,7 +235,7 @@ watch(searchData, () => {
}
}
.noactive-avatar {
.no-active-avatar {
border-radius: 50%;
border: 1px solid #f5f4f4;
}
@ -224,13 +244,34 @@ watch(searchData, () => {
background: #ebf9f7;
border-left: 5px solid $primary;
& {
.noactive-avatar {
.no-active-avatar {
border-radius: 50%;
border: 1px solid $primary;
}
}
}
.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;
}
.line-ellipsis {
display: block;
white-space: nowrap;