feat: signature (#194)

* refactor: enable profile signature option in ProfileMenu

* feat: add signature api function

* refactor: add new translation keys for 'Draw' and 'New Upload' in English and Thai

* refactor: update image URL variable and improve translation keys in CanvasComponent and MainLayout

* refactor: get function

* feat: add delete signature function

* feat: add canvas manipulation functions and integrate signature submission in MainLayout (unfinished)

* chore(deps): update

---------

Co-authored-by: puriphatt <puriphat@frappet.com>
Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>

src/layouts/MainLayout.vue

@@ -50,7 +50,6 @@ const leftDrawerMini = ref(false);
 const unread = computed<number>(
   () => notificationData.value.filter((v) => !v.read).length || 0,
 );
-// const filterRole = ref<string[]>();
 const userImage = ref<string>();
 const userGender = ref('');
 const canvasRef = ref();
@@ -124,6 +123,17 @@ function readNoti(id: string) {
   }
 }
 
+function signatureSubmit() {
+  const signature = canvasRef.value.setCanvas();
+  userStore.setSignature(signature);
+  canvasModal.value = false;
+}
+
+async function signatureFetch() {
+  const ret = await userStore.getSignature();
+  if (ret) canvasRef.value.getCanvas(ret);
+}
+
 onMounted(async () => {
   initTheme();
   initLang();
@@ -502,13 +512,15 @@ onMounted(async () => {
       no-app-box
       :title="$t('menu.profile.addSignature')"
       :close="() => (canvasModal = false)"
+      :submit="signatureSubmit"
+      :show="signatureFetch"
     >
       <CanvasComponent ref="canvasRef" v-model:modal="canvasModal" />
       <template #footer>
         <q-btn
           flat
           dense
-          :label="$t('clear')"
+          :label="$t('general.clear')"
           @click="
             () => {
               canvasRef.clearCanvas(), canvasRef.clearUpload();