From 062588d0bd75e396926113324d8d633e486bc093 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 12 Dec 2023 11:52:57 +0700
Subject: [PATCH] toolbar

---
 src/views/HomeView.vue | 121 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 115 insertions(+), 6 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e489c83..45ea197 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -324,7 +324,7 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-12">
       <q-card flat class="row col-12 cardNone">
         <div :class="getClass(stetusCheckin)">
-          <div class="col-2">
+          <q-toolbar class="text-primary">
             <q-btn
               icon="history"
               unelevated
@@ -336,12 +336,121 @@ onMounted(async () => {
               :class="$q.screen.gt.xs ? 'q-px-md' : ''"
               @click="router.push('/history')"
             />
-          </div>
-          <span class="text-body1 text-weight-bold col-8 text-center">
+            <q-toolbar-title>
+              <span class="text-white text-body1 text-weight-bold text-center">
+                <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
+                <span v-else>ลงเวลาออกงาน</span>
+              </span>
+            </q-toolbar-title>
+            <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 size="13px" class="q-mx-md">
+              <q-icon name="account_circle" size="24px" color="white" />
+              <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>
+          <!-- <div class="col-2">
+            <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')"
+            />
+          </div> -->
+          <!-- <span class="text-body1 text-weight-bold col-6 text-center">
             <span v-if="stetusCheckin">ลงเวลาเข้างาน</span>
             <span v-else>ลงเวลาออกงาน</span>
-          </span>
-          <div class="col-2 text-right">
+          </span> -->
+          <!-- <div class="col-4 text-right">
             <q-btn
               round
               dense
@@ -436,7 +545,7 @@ onMounted(async () => {
                   </q-list>
                 </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">