Merge branch 'dev/phatt' into develop

src/components/GlobalDialog.vue

@@ -13,38 +13,65 @@ defineProps<{
 </script>
 <template>
   <q-dialog ref="dialogRef" :persistent="persistent || false">
-    <q-card class="q-pa-sm" style="min-width: 300px; max-width: 80%">
+    <q-card
-      <q-card-section class="row q-pa-sm">
+      class="q-pt-sm"
-        <div
+      style="overflow: visible; min-width: 300px; max-width: 80%"
-          class="q-pr-md"
+    >
-          v-if="icon"
+      <div
-          style="display: flex; align-items: center"
+        class="box-icon q-pa-sm"
+        v-if="icon"
+        style="display: flex; align-items: center"
+      >
+        <q-avatar
+          size="60px"
+          font-size="25px"
+          style="background-color: var(--surface-1)"
+          :text-color="color || 'primary'"
         >
-          <q-avatar
+          <q-icon
-            :icon="icon"
+            style="padding: 12px; border: 2px solid; border-radius: 50%"
-            size="xl"
+            :name="icon"
-            font-size="25px"
-            color="grey-2"
-            :text-color="color || 'primary'"
           />
-        </div>
+        </q-avatar>
-        <div class="col text-dark">
+      </div>
+
+      <div class="text-right q-px-sm">
+        <q-btn
+          flat
+          size="sm"
+          padding="none"
+          color="grey"
+          icon="mdi-close"
+          v-close-popup
+        />
+      </div>
+
+      <q-card-section class="column items-center q-pa-sm">
+        <div class="column q-mt-md items-center">
           <span class="text-bold block">{{ title }}</span>
           <span class="block">{{ message }}</span>
         </div>
       </q-card-section>
-      <q-card-actions align="right" v-if="action || cancel">
+
+      <q-card-actions
+        :class="{ 'no-padding': !action || !cancel }"
+        align="right"
+        v-if="action || cancel"
+      >
         <q-btn
           id="btn-cancel-dialog"
           v-if="cancel"
+          :class="{ 'full-width': !action }"
           @click="cancel"
           :label="cancelText || $t('cancel')"
           :color="color || 'primary'"
           v-close-popup
           flat
         />
+
         <q-btn
           id="btn-ok-dialog"
+          :class="{ 'full-width': !cancel }"
           v-if="action"
           @click="action"
           :label="actionText || $t('ok')"
@@ -56,4 +83,15 @@ defineProps<{
   </q-dialog>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.box-icon {
+  position: absolute;
+  top: -40px;
+  right: 37.5%;
+  z-index: 999;
+}
+
+.full-width {
+  width: 100%;
+}
+</style>

src/css/quasar.variables.scss

@@ -39,6 +39,11 @@ $separator-dark-color: var(--border-color);
   }
 }
 
-.q-menu {
+.q-menu,
+.q-card {
   box-shadow: var(--shadow-2) !important;
 }
+
+.q-dialog__backdrop {
+  background-color: hsla(0 0 60% / 0.4) !important;
+}

src/layouts/MainLayout.vue

@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
+import GlobalDialog from 'components/GlobalDialog.vue';
 
 interface NotificationButton {
   item: string;
@@ -27,6 +28,7 @@ const loaderStore = useLoader();
 const { visible } = storeToRefs(loaderStore);
 const { locale } = useI18n({ useScope: 'global' });
 
+const logoutModal = ref(false);
 const leftDrawerOpen = ref($q.screen.gt.sm);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
@@ -56,8 +58,8 @@ const notiMenu = ref<NotificationButton[]>([
 const notification = ref<Notification[]>([
   {
     id: '1',
-    title: 'test',
+    title: 'Unread',
-    content: 'test',
+    content: 'Unread',
     read: false,
   },
   {
@@ -66,6 +68,12 @@ const notification = ref<Notification[]>([
     content: 'test',
     read: false,
   },
+  {
+    id: '3',
+    title: 'Read',
+    content: 'Already read',
+    read: true,
+  },
 ]);
 
 function setActive(button: NotificationButton) {
@@ -83,8 +91,12 @@ function setActive(button: NotificationButton) {
   }
 }
 
-function doLogout() {
+function doLogout(confirm?: boolean = false) {
-  logout();
+  logoutModal.value = true;
+  if (confirm) {
+    logoutModal.value = false;
+    logout();
+  }
 }
 </script>
 
@@ -112,6 +124,7 @@ function doLogout() {
             class="noti-circle"
             :class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
             style="color: var(--surface-1)"
+            @click="notiOpen = !notiOpen"
           >
             <q-icon name="mdi-bell" size="20px" />
             <q-badge v-if="unread !== 0" rounded floating color="negative">
@@ -150,7 +163,9 @@ function doLogout() {
                     clickable
                     class="q-py-sm"
                     v-ripple
-                    v-for="item in notification"
+                    v-for="item in !filterUnread
+                      ? notification
+                      : notification.filter((v) => !v.read)"
                     :key="item.id"
                   >
                     <q-avatar
@@ -200,6 +215,7 @@ function doLogout() {
             dense
             flat
             no-caps
+            :menu-offset="[0, 10]"
             color="dark"
             class="q-pa-none account-menu-down dropdown-menu"
           >
@@ -213,14 +229,14 @@ function doLogout() {
                   <q-avatar class="bg-primary" />
                 </q-item-section>
                 <q-item-section
-                  class="text-left text-dark q-pa-none q-px-md"
+                  class="text-left q-pa-none q-px-md"
                   v-if="$q.screen.gt.xs"
                 >
                   <q-item-label class="text-caption column">
                     <span class="text-weight-bold q-pb-xs text-primary">
                       {{ getName() }}
                     </span>
-                    <div style="font-size: 11px; color: var(--foreground)">
+                    <div style="font-size: 11px; color: var(--surface)">
                       {{ getRole()?.includes('admin') ? 'Admin' : 'User' }}
                     </div>
                   </q-item-label>
@@ -309,6 +325,14 @@ function doLogout() {
 
     <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
 
+    <GlobalDialog
+      v-model="logoutModal"
+      title="ยืนยันการออกจากระบบ"
+      message="คุณต้องการออกจากระบบ ใช่หรือไม่"
+      icon="mdi-logout-variant"
+      :persistent="true"
+      :action="() => doLogout(true)"
+    />
     <global-loading :visibility="visible" />
   </q-layout>
 </template>
@@ -329,10 +353,9 @@ function doLogout() {
 }
 
 .noti-switch-on {
-  --_bg-color: var(--blue-0);
+  --_color: var(--blue-6-hsl);
-  --_color: var(--blue-6);
+  background-color: hsla(var(--_color) / 0.1) !important;
-  background-color: var(--_bg-color);
+  color: hsl(var(--_color));
-  color: var(--_color);
 }
 
 .noti-switch-off {