feat: employee history dialog & table

src/components/CanvasComponent.vue

@@ -1,19 +1,22 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
-import SignaturePad from 'signature_pad';
 import { useQuasar } from 'quasar';
+import SignaturePad from 'signature_pad';
+import Cropper from 'cropperjs';
 
 defineExpose({ clearCanvas, clearUpload });
 
 const $q = useQuasar();
+const isDarkActive = computed(() => $q.dark.isActive);
 
 const canvasRef = ref<HTMLCanvasElement>();
 const signaturePad = ref();
 const currentColor = ref('blue');
+
+const imageRef = ref<HTMLImageElement>();
+const cropper = ref();
+
 const tab = ref('draw');
-
-const isDarkActive = computed(() => $q.dark.isActive);
-
 const uploadFile = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
 const inputFile = (() => {
@@ -36,7 +39,7 @@ const inputFile = (() => {
   return element;
 })();
 
-function initializeSignaturePad(canva?: HTMLCanvasElement) {
+async function initializeSignaturePad(canva?: HTMLCanvasElement) {
   if (canva) {
     signaturePad.value = new SignaturePad(canva, {
       backgroundColor: isDarkActive.value
@@ -49,6 +52,26 @@ function initializeSignaturePad(canva?: HTMLCanvasElement) {
   }
 }
 
+async function initializeCropper(image?: HTMLImageElement) {
+  console.log(image);
+  if (image) {
+    cropper.value = new Cropper(image, {
+      aspectRatio: 16 / 9,
+      crop(event) {
+        console.log(event.detail.x);
+        console.log(event.detail.y);
+        console.log(event.detail.width);
+        console.log(event.detail.height);
+        console.log(event.detail.rotate);
+        console.log(event.detail.scaleX);
+        console.log(event.detail.scaleY);
+      },
+    });
+  } else {
+    console.warn('Canvas reference not found. Cropper not initialized.');
+  }
+}
+
 function changeColor(color: string) {
   signaturePad.value.penColor = color;
   currentColor.value = color;
@@ -65,12 +88,14 @@ function clearUpload() {
 watch(
   () => tab.value,
   async () => {
-    initializeSignaturePad(canvasRef.value);
+    await initializeSignaturePad(canvasRef.value);
+    await initializeCropper(imageRef.value);
   },
 );
 
-onMounted(() => {
-  initializeSignaturePad(canvasRef.value);
+onMounted(async () => {
+  await initializeSignaturePad(canvasRef.value);
+  await initializeCropper(imageRef.value);
 });
 </script>
 <template>
@@ -161,17 +186,18 @@ onMounted(() => {
       </div>
     </div>
 
-    <div v-if="tab === 'upload'" class="q-pa-md">
+    <div v-show="tab === 'upload'" class="q-pa-md">
       <div
         class="bordered upload-border rounded column items-center justify-center"
         style="height: 312px"
       >
         <q-img
-          v-if="profileUrl"
-          :src="profileUrl"
+          v-show="profileUrl"
+          ref="imageRef"
+          :src="profileUrl ?? ''"
           style="object-fit: cover; width: 100%; height: 100%"
         />
-        <div v-else>
+        <div v-if="!profileUrl">
           <q-icon
             name="mdi-cloud-upload"
             size="10rem"