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/stores/user/index.ts

@@ -15,6 +15,7 @@ import {
 import axios from 'axios';
 import useBranchStore from '../branch';
 import { Branch } from '../branch/types';
+import { getSignature, setSignature } from './signature';
 
 const branchStore = useBranchStore();
 
@@ -327,6 +328,9 @@ const useUserStore = defineStore('api-user', () => {
     addAttachment,
     deleteAttachment,
 
+    getSignature,
+    setSignature,
+
     typeStats,
   };
 });

src/stores/user/signature.ts

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import { api } from 'src/boot/axios';
+import { getUserId } from 'src/services/keycloak';
+
+export async function getSignature() {
+  const userId = getUserId();
+
+  if (!userId) return;
+
+  const responseSignature = await api.get<string>(
+    '/user/' + userId + '/signature',
+  );
+
+  if (!responseSignature.data) return '';
+
+  const responseBlob = await axios.get<Blob>(responseSignature.data, {
+    responseType: 'blob',
+  });
+
+  if (responseBlob.status < 400) {
+    return await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.addEventListener('error', reject);
+      reader.addEventListener('load', () => resolve(reader.result as string));
+      reader.readAsDataURL(responseBlob.data);
+    });
+  } else {
+    return '';
+  }
+}
+
+export async function setSignature(image: string) {
+  const userId = getUserId();
+
+  if (!userId) return;
+
+  if (image === '') {
+    return await deleteSignature();
+  } else {
+    return await api.put('/user/' + userId + '/signature', { data: image });
+  }
+}
+
+export async function deleteSignature() {
+  const userId = getUserId();
+
+  if (!userId) return;
+
+  return await api.delete('/user/' + userId + '/signature');
+}