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

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;