feat: signature dialog

src/layouts/MainLayout.vue

@@ -13,7 +13,9 @@ import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
+import CanvasComponent from 'components/CanvasComponent.vue';
 import useUserStore from 'src/stores/user';
+import FormDialog from 'src/components/FormDialog.vue';
 import { Option } from 'src/stores/user/types';
 import { dialog } from 'src/stores/utils';
 
@@ -37,12 +39,13 @@ const { visible } = storeToRefs(loaderStore);
 const { locale } = useI18n({ useScope: 'global' });
 const userStore = useUserStore();
 
+const canvasModal = ref(false);
 const leftDrawerOpen = ref(false);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
 const filterRole = ref<string[]>();
 const userImage = ref<string>();
-
+const canvasRef = ref();
 const currentLanguage = ref<string>('ไทย');
 const language: {
   value: string;
@@ -89,10 +92,16 @@ const notification = ref<Notification[]>([
 const options = ref([
   {
     icon: 'mdi-lock-outline',
-    label: 'เปลี่ยนรหัสผ่าน',
+    label: 'changePassword',
     value: 'op1',
     color: 'primary',
   },
+  {
+    icon: 'mdi-signature-freehand',
+    label: 'signature',
+    value: 'signature',
+    color: 'primary',
+  },
 ]);
 
 function setActive(button: NotificationButton) {
@@ -343,12 +352,21 @@ onMounted(async () => {
                 <q-separator />
                 <div class="column justify-center">
                   <q-list dense v-for="op in options" :key="op.label">
-                    <q-item clickable>
+                    <q-item
+                      clickable
+                      @click="
+                        () => {
+                          if (op.value === 'signature') {
+                            canvasModal = true;
+                          }
+                        }
+                      "
+                    >
                       <q-item-section avatar>
                         <q-icon :name="op.icon" :color="op.color" size="20px" />
                       </q-item-section>
                       <q-item-section class="q-py-sm">
-                        {{ op.label }}
+                        {{ $t(op.label) }}
                       </q-item-section>
                     </q-item>
                   </q-list>
@@ -376,7 +394,7 @@ onMounted(async () => {
             style="color: var(--gray-6)"
             @click="$q.dark.toggle()"
           />
-          <!-- เปลี่นรภาษา -->
+          <!-- เปลี่นนภาษา -->
           <q-btn
             flat
             color="grey"
@@ -417,6 +435,23 @@ onMounted(async () => {
 
     <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
 
+    <FormDialog
+      v-model:modal="canvasModal"
+      :title="$t('addSignature')"
+      no-app-box
+      :max-width="80"
+    >
+      <CanvasComponent ref="canvasRef" v-model:modal="canvasModal" />
+      <template #footer>
+        <q-btn
+          flat
+          dense
+          :label="$t('clear')"
+          @click="canvasRef.clearCanvas()"
+        />
+      </template>
+    </FormDialog>
+
     <global-loading :visibility="visible" />
   </q-layout>
 </template>