Merge branch 'ASTRA-46' into 'master'

Resolve ASTRA-46

See merge request andrusyakka/urban-couscous!334

src/components/base/BaseUploadPhoto.vue

@@ -8,10 +8,12 @@
         type="file",
         id="image-upload",
         accept="image/.jpg,.jpeg,.png, .jpg",
+        class="image-field",
         @change="(e)=>previewImage(e)",
+        @click="compressed"
       )
       .avatar.flex.absolute.items-center.gap-x-6
-        img.avatar.object-cover(for="image-upload", :src="image")
+        img.avatar.object-cover(for="image-upload", :src="image" )
         q-btn(
           round,
           color="primary",
@@ -31,6 +33,7 @@ export default {
   data() {
     return {
       image: addImageIcon,
+      imageFile: null,
     };
   },
   mixins: [v_model],
@@ -41,6 +44,44 @@ export default {
     },
   },
   methods: {
+    compressed() {
+      const compressImage = async (file, { quality = 1, type = file.type }) => {
+        const imageBitmap = await createImageBitmap(file);
+        const canvas = document.createElement("canvas");
+        canvas.width = imageBitmap.width;
+        canvas.height = imageBitmap.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(imageBitmap, 0, 0);
+
+        const blob = await new Promise((resolve) =>
+          canvas.toBlob(resolve, type, quality)
+        );
+
+        return new File([blob], file.name, {
+          type: blob.type,
+        });
+      };
+
+      const inputFile = document.querySelector(".image-field");
+      inputFile.addEventListener("change", async (e) => {
+        const { files } = e.target;
+        if (!files.length) return;
+        const dataTransfer = new DataTransfer();
+
+        for (const file of files) {
+          if (!file.type.startsWith("image")) {
+            dataTransfer.items.add(file);
+            continue;
+          }
+          const compressedFile = await compressImage(file, {
+            quality: 0.5,
+            type: "image/jpeg",
+          });
+          dataTransfer.items.add(compressedFile);
+        }
+        this.imageData = [...dataTransfer.files];
+      });
+    },
     previewImage(event) {
       let picture = event.target.files;
       let reader = new FileReader();

src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue

@@ -17,7 +17,7 @@
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .photo-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
             q-avatar(
-              square,
+              rounded,
               size="40px",
               v-if="docData[data.dataKey][field.key]?.photo"
             )

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -19,7 +19,7 @@
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.flex.gap-3.items-center.h-10.w-10(v-if="field.type === 'avatar'")
             .flex.w-10.h-10.relative(v-if="basic[insurance.insuranceKey][field.key]?.photo")
-              img.avatar.object-cover(
+              img.rounded.avatar.object-cover(
                 :src="basic[insurance.insuranceKey][field.key].photo",
                 alt="AV"
               )