From 9d16afa4744a484b0f24c2c18f910188c1a37134 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 25 Jun 2024 07:13:13 +0000
Subject: [PATCH] feat: change theme

---
 src/components/ProfileMenu.vue | 141 +++++++++++++++++++++++++++------
 src/i18n/en-US/index.ts        |   5 ++
 src/i18n/th-th/index.ts        |   5 ++
 src/layouts/MainLayout.vue     |  10 ++-
 4 files changed, 134 insertions(+), 27 deletions(-)

diff --git a/src/components/ProfileMenu.vue b/src/components/ProfileMenu.vue
index 42beff82..bcfd1ab9 100644
--- a/src/components/ProfileMenu.vue
+++ b/src/components/ProfileMenu.vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
 // import useOption from 'src/stores/option';
 
 // const optionStore = useOption();
 import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
 
+const $q = useQuasar();
+
+const themeRef = ref();
 const userImage = ref<string>('');
 const filterRole = ref<string[]>();
 const inputFile = document.createElement('input');
@@ -24,8 +28,33 @@ const options = ref([
     value: 'op2',
     color: 'grey',
   },
+  {
+    icon: 'mdi-brightness-6',
+    label: 'mode',
+    value: 'op3',
+    color: 'grey',
+  },
 ]);
 
+const themeMode = ref([
+  {
+    label: 'light',
+    value: 'light',
+    isActive: false,
+  },
+  {
+    label: 'dark',
+    value: 'dark',
+    isActive: false,
+  },
+  {
+    label: 'baseOnDevice',
+    value: 'baseOnDevice',
+    isActive: false,
+  },
+]);
+
+const isDarkActive = computed(() => $q.dark.isActive);
 // inputFile.addEventListener('change', async (e) => {
 //   profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
 //   if (profileFile.value) {
@@ -33,11 +62,26 @@ const options = ref([
 //   }
 //   userImage.value = (await storageStore.getProfile()) ?? '';
 // });
+watch(
+  () => isDarkActive.value,
+  () => {
+    if ($q.dark.isActive) {
+      themeMode.value[1].isActive = true;
+      themeMode.value[0].isActive = false;
+    } else {
+      themeMode.value[0].isActive = true;
+      themeMode.value[1].isActive = false;
+    }
+  },
+);
 
 onMounted(async () => {
   //   if (isLoggedIn()) {
   //     userImage.value = (await storageStore.getProfile()) ?? '';
   //   }
+  isDarkActive.value
+    ? (themeMode.value[1].isActive = true)
+    : (themeMode.value[0].isActive = true);
 
   const userRoles = getRole();
   if (userRoles) {
@@ -152,33 +196,84 @@ onMounted(async () => {
 
         <div class="column col-12">
           <q-separator />
-          <div class="column justify-center q-mb-md">
-            <div v-for="op in options" :key="op.label">
-              <q-list :dense="true">
-                <q-separator v-if="op.label === 'option'" />
-                <q-item
-                  clickable
-                  :id="`btn-${op.label}`"
-                  @click="$emit(op.label)"
-                >
-                  <q-item-section avatar>
-                    <q-icon :name="op.icon" :color="op.color" size="20px" />
-                  </q-item-section>
-                  <q-item-section class="q-py-sm">
-                    {{ $t(op.label) }}
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </div>
-          </div>
+          <div class="column justify-center">
+            <q-list :dense="true" v-for="op in options" :key="op.label">
+              <q-item
+                v-if="op.label !== 'mode'"
+                clickable
+                :id="`btn-${op.label}`"
+                @click="$emit(op.label)"
+              >
+                <q-item-section avatar>
+                  <q-icon :name="op.icon" :color="op.color" size="20px" />
+                </q-item-section>
+                <q-item-section class="q-py-sm">
+                  {{ $t(op.label) }}
+                </q-item-section>
+              </q-item>
 
+              <q-separator v-if="op.label === 'mode'" />
+              <q-item
+                v-if="op.label === 'mode'"
+                clickable
+                :id="`btn-${op.label}`"
+                @click="$emit(op.label)"
+              >
+                <q-item-section avatar>
+                  <q-icon :name="op.icon" :color="op.color" size="20px" />
+                </q-item-section>
+                <q-item-section class="q-py-sm">
+                  <div class="row justify-between">
+                    <span>
+                      {{ $t(op.label) }}
+                    </span>
+                    <span class="app-text-muted-2">
+                      {{ isDarkActive ? $t('dark') : $t('light') }}
+                      <q-icon name="mdi-chevron-right" />
+                    </span>
+                  </div>
+                </q-item-section>
+
+                <q-menu
+                  ref="themeRef"
+                  class="bordered rounded"
+                  anchor="top right"
+                  self="top left"
+                  max-width="200"
+                  :offset="[10, 0]"
+                  style="width: 160px"
+                >
+                  <div v-for="(mode, index) in themeMode" :key="index">
+                    <q-item
+                      clickable
+                      @click="
+                        () => {
+                          mode.isActive ? '' : $q.dark.toggle();
+                        }
+                      "
+                    >
+                      <q-item-section>
+                        <div class="row justify-between">
+                          <span>
+                            {{ $t(mode.label) }}
+                          </span>
+                          <q-icon v-if="mode.isActive" name="mdi-check" />
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </div>
+                </q-menu>
+              </q-item>
+            </q-list>
+          </div>
+          <q-separator />
           <q-btn
             v-if="isLoggedIn()"
             no-caps
             dense
             color="negative"
             unelevated
-            class="q-ma-sm app-text-negative"
+            class="q-ma-md app-text-negative"
             :class="{ dark: $q.dark.isActive }"
             :label="$t('logout')"
             @click="$emit('logout')"
@@ -191,7 +286,7 @@ onMounted(async () => {
             dense
             color="primary"
             unelevated
-            class="q-ma-sm app-text-negative"
+            class="q-ma-md app-text-negative"
             :label="$t('login')"
             @click="$emit('login')"
             id="btn-login"
@@ -202,7 +297,7 @@ onMounted(async () => {
     </q-btn-dropdown>
   </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
 .account-menu-down {
   & ::before {
     color: var(--foreground);
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 9d9bbbf5..81a3b0fb 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -49,6 +49,11 @@ export default {
   logout: 'Logout',
   list: 'Item',
   manage: 'Manage',
+  mode: 'Mode',
+  theme: 'Theme',
+  light: 'Light',
+  dark: 'Dark',
+  baseOnDevice: 'Base on Device',
   ...status,
   ...main,
   ...address,
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index e36f38db..aa3857d6 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -49,6 +49,11 @@ export default {
   logout: 'ออกจากระบบ',
   list: 'รายการ',
   manage: 'จัดการ',
+  mode: 'โหมด',
+  theme: 'ธีม',
+  light: 'สว่าง',
+  dark: 'มืด',
+  baseOnDevice: 'สีตามอุปกรณ์',
   ...status,
   ...main,
   ...address,
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index fb42d07a..66adc8eb 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -338,7 +338,7 @@ onMounted(async () => {
           />
 
           <!-- theme -->
-          <q-btn
+          <!-- <q-btn
             round
             unelevated
             id="drawer-toggler"
@@ -347,7 +347,7 @@ onMounted(async () => {
             class="surface-2"
             style="color: var(--gray-6)"
             @click="$q.dark.toggle()"
-          />
+          /> -->
         </div>
       </div>
     </q-header>
@@ -361,10 +361,12 @@ onMounted(async () => {
     <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
 
     <FormDialog
+      width="800px"
+      height="550px"
       v-model:modal="canvasModal"
-      :title="$t('addSignature')"
       no-app-box
-      max-width="80%"
+      :title="$t('addSignature')"
+      :close="() => (canvasModal = false)"
     >
       <CanvasComponent ref="canvasRef" v-model:modal="canvasModal" />
       <template #footer>