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

แก้ toolbar

Browse source
This commit is contained in:
Warunee Tamkoo 2023-12-22 15:56:31 +07:00
parent 950d185ebb
commit 92e9cb58d0
1 changed files with 114 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/views/HomeView.vue
View file

@ -1,4 +1,3 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
@ -327,7 +326,118 @@ onMounted(async () => {
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-12">
<q-card flat class="row col-12 cardNone">
<div :class="getClass(stetusCheckin)">
<!-- <q-header elevated class="bg-purple"> -->
<q-toolbar :class="getClass(stetusCheckin)">
<q-btn
icon="history"
unelevated
rounded
dense
flat
color="white"
:label="$q.screen.gt.xs ? 'ประวัติการลงเวลา' : ''"
:class="$q.screen.gt.xs ? 'q-px-md' : ''"
@click="router.push('/history')"
/>
<q-space />
<strong v-if="stetusCheckin" style="font-size: 1rem;">
ลงเวลาเข้างาน
</strong>
<strong v-else style="font-size: 1rem;">ลงเวลาออกงาน</strong>
<q-space />
<q-btn
round
dense
flat
size="13px"
class="q-mx-md"
:disable="notiList.length === 0"
>
<q-icon name="notifications" size="24px" color="white" />
<q-badge
rounded
v-show="notiList.length > 0"
color="negative"
text-color="white"
floating
>{{ notiList.length }}</q-badge
>
<q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
<div class="q-px-md q-py-sm row col-12 items-center">
<div class="text-subtitle1 text-weight-medium">
การแจ้งเตือน
</div>
</div>
<q-list
style="min-width: 300px"
v-for="n in notiList"
:key="n.id"
>
<q-item v-ripple class="mytry q-py-xs" dense>
<q-item-section avatar top style="min-width: 40px">
<q-avatar color="primary" size="22px" text-color="white">
<span class="text-weight-medium text-uppercase">{{
n.sender
}}</span>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label caption class="text-black">{{
n.body
}}</q-item-label>
<q-item-label
caption
class="row items-center text-grey-7"
>{{ date2Thai(n.timereceive) }}</q-item-label
>
</q-item-section>
<q-btn
size="sm"
unelevated
dense
icon="mdi-close"
class="mybtn q-mx-xs"
@click="onClickDelete(n.id)"
></q-btn>
</q-item>
<q-separator color="grey-2" />
</q-list>
</q-menu>
</q-btn>
<q-btn round dense flat icon="account_circle" style="font-size: 16px">
<q-menu>
<div class="q-pa-md" style="max-width: 500px">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon color="primary" name="account_circle" />
</q-item-section>
<q-item-section>{{ fullName }}</q-item-section>
</q-item>
<q-item class="text-center">
<q-item-section>
<q-item-label>
<q-btn
color="primary"
label="ออกจากระบบ"
push
size="sm"
@click="onClickLogout"
/></q-item-label>
</q-item-section>
</q-item>
</q-list>
</div> </q-menu
></q-btn>
</q-toolbar>
<!-- </q-header> -->
<!-- <div :class="getClass(stetusCheckin)">
<div class="col-2">
<q-btn
icon="history"
@ -441,7 +551,7 @@ onMounted(async () => {
</div> </q-menu
></q-btn>
</div>
</div>
</div> -->
<div class="col-12 q-pa-md text-grey-9">
<div class="col-12 row justify-center">
<div class="col-12 row q-py-sm justify-center">
@ -723,4 +833,4 @@ onMounted(async () => {
width: 100%;
height: 100%;
}
</style>
</style>