logouut

src/views/HomeView.vue

@@ -20,7 +20,14 @@ import MapCheck from '@/components/MapCheckin.vue'
 import { useCounterMixin } from '@/stores/mixin'
 
 const mixin = useCounterMixin()
-const { date2Thai, showLoader, hideLoader, messageError, dialogRemove } = mixin
+const {
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogRemove,
+  success,
+} = mixin
 const router = useRouter()
 const $q = useQuasar()
 

src/views/MapView.vue

@@ -2,6 +2,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
+import keycloak from '@/plugins/keycloak'
 import moment from 'moment'
 import Camera from 'simple-vue-camera'
 import http from '@/plugins/http'
@@ -287,6 +288,18 @@ async function onClickConfirm() {
   dialogTime.value = false
 }
 
+function onClickLogout() {
+  $q.dialog({
+    title: 'ยืนยันการออกจากระบบ',
+    message: `ต้องการออกจากระบบใช้หรือไม่?`,
+    cancel: 'ยกเลิก',
+    ok: 'ยืนยัน',
+    persistent: true,
+  }).onOk(() => {
+    keycloak.logout()
+  })
+}
+
 // class
 const getClass = (val: boolean) => {
   return {
@@ -294,10 +307,15 @@ const getClass = (val: boolean) => {
     'bg-red-9 text-white col-12 row items-center q-px-md q-py-sm': !val,
   }
 }
+
+const fullName = ref<string>('')
 /** Hook*/
 onMounted(async () => {
   await fetchCheckTime()
   await fetchNotifications()
+  if (keycloak.tokenParsed != null) {
+    fullName.value = keycloak.tokenParsed.name
+  }
 
   updateClock()
 })
@@ -387,6 +405,39 @@ onMounted(async () => {
                 </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>
           </div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">