change imageProvider to get images from liip

components/Ui/Image.vue

@@ -95,7 +95,10 @@ const {
   refresh: refreshImage,
 } = (await fetch(fileId, defaultImagePath, props.height, props.width)) as any
 
-console.log(imageSrc.value)
+// watch(imageSrc, (value) => {
+//   console.log('img', imageSrc.value)
+// })
+
 
 const refresh = () => {
   refreshImage()

composables/data/useImageFetch.ts

@@ -2,6 +2,7 @@ import type { AsyncData } from '#app'
 import { v4 as uuid4 } from 'uuid'
 import type { Ref } from 'vue'
 import { useImageManager } from '~/composables/data/useImageManager'
+import { IMAGE_SIZE } from '~/types/enum/enums'
 
 interface useImageFetchReturnType {
   fetch: (
@@ -21,12 +22,11 @@ export const useImageFetch = (): useImageFetchReturnType => {
   const fetch = (
     id: Ref<number | null>, // If id is null, fetch shall return the default image url
     defaultImage: string | null = null,
-    height: number = 0,
-    width: number = 0,
+    size: IMAGE_SIZE = IMAGE_SIZE.MD
   ) =>
     useAsyncData(
       'img' + (id ?? defaultImage ?? 0) + '_' + uuid4(),
-      () => imageManager.get(id.value, defaultImage, height, width),
+      () => imageManager.get(id.value, defaultImage, size),
       { lazy: true, server: false }, // Always fetch images client-side
     )
 

pages/parameters/general_parameters.vue

@@ -76,7 +76,7 @@
                 v-model="parameters.qrCode"
                 field="qrCode"
                 :width="120"
-                :cropping-enabled="false"
+                :cropping-enabled="true"
               />
             </div>
           </v-col>

services/data/imageManager.ts

@@ -1,6 +1,6 @@
 import ApiRequestService from './apiRequestService'
 import FileUtils from '~/services/utils/fileUtils'
-import { FILE_TYPE, FILE_VISIBILITY } from '~/types/enum/enums'
+import { FILE_TYPE, FILE_VISIBILITY, IMAGE_SIZE } from '~/types/enum/enums'
 
 /**
  * Permet le requêtage, l'upload et la manipulation des images via l'API Opentalent
@@ -22,45 +22,34 @@ class ImageManager {
    *
    * @param id  The id of the image; if null, the url to the default image is returned
    * @param defaultImage The path of an image in the 'public' folder, default: '/images/default/picture.jpeg'
-   * @param height  Height of the image (does not apply to default image)
-   * @param width   Width of the image (does not apply to default image)
+   * @param size
    */
   public async get(
     id: number | null,
     defaultImage: string | null = null,
-    height: number = 0,
-    width: number = 0,
-  ): Promise<string | ArrayBuffer> {
+    size: IMAGE_SIZE = IMAGE_SIZE.MD
+  ): Promise<string> {
     const defaultUrl = defaultImage ?? ImageManager.defaultImage
 
     if (id === null) {
       return defaultUrl
     }
 
-    const imageUrl = `api/file/download/${id}`
-
-    // Set requested size if needed
-    if (height > 0 || width > 0) {
-      // @see https://thumbor.readthedocs.io/en/latest/crop_and_resize_algorithms.html
-      // TODO: ajouter le support de ces options dans ap2i
-      // url = UrlUtils.join(url, `${height}x${width}`)
-    }
+    const imageUrl = `api/image/download/${id}/${size}`
 
     // Une image doit toujours avoir le time en options pour éviter les problèmes de cache
     const query = [this.getCacheKey()]
 
-    const blobPart = await this.apiRequestService.get(imageUrl, query);
-    if (!blobPart) {
-      console.error('Error: image ' + id + ' not found');
-      return defaultUrl;
-    }
+    const response = await this.apiRequestService.get(imageUrl, query);
+
+    const cachedImageUrl = response.toString()
 
-    if (!(blobPart instanceof Blob) || blobPart.size === 0) {
-      console.error('Error: image ' + id + ' is invalid');
+    if (!cachedImageUrl) {
+      console.error('Error: image ' + id + ' not found');
       return defaultUrl;
     }
 
-    return await this.toBase64(blobPart)
+    return cachedImageUrl
   }
 
   public async upload(

types/enum/enums.ts

@@ -111,3 +111,9 @@ export const enum TABLE_ACTION {
   DELETE = 'delete',
   ADD = 'add',
 }
+
+export const enum IMAGE_SIZE {
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+}