useImageProvider

components/Ui/Image.vue

@@ -41,8 +41,8 @@
 
 
 <script lang="ts">
-import {defineComponent, onUnmounted, ref, Ref, watch} from '@nuxtjs/composition-api'
-import {UseImage} from "~/composables/data/useImage";
+import {defineComponent, onUnmounted, ref, Ref, useContext, watch} from '@nuxtjs/composition-api'
+import {useImageProvider} from "~/composables/data/useImageProvider";
 import {WatchStopHandle} from "@vue/composition-api";
 
 export default defineComponent({
@@ -82,12 +82,12 @@ export default defineComponent({
   setup(props) {
     const openUpload: Ref<Boolean> = ref(false)
     const imgSrcReload: Ref<any> = ref(null)
+    const {$dataProvider, $config} = useContext()
+    const {getOne, provideImg} = useImageProvider($dataProvider, $config)
 
-    const useImg = new UseImage()
-
-    const { imageLoaded, fetch } = useImg.getOne(props.id, props.imageByDefault, props.height, props.width)
+    const { imageLoaded, fetch } = getOne(props.id, props.imageByDefault, props.height, props.width)
     const unwatch: WatchStopHandle = watch(() => props.id, async (newValue, oldValue) => {
-      imgSrcReload.value = await useImg.provideImg(newValue as number, props.height, props.width)
+      imgSrcReload.value = await provideImg(newValue as number, props.height, props.width)
     })
 
     /**

components/Ui/Input/Image.vue

@@ -62,7 +62,7 @@ import {defineComponent, onUnmounted, Ref, ref, useContext, useFetch, watch} fro
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css';
 import {AnyJson, ApiResponse} from "~/types/interfaces";
-import {UseImage} from "~/composables/data/useImage";
+import {useImageProvider} from "~/composables/data/useImageProvider";
 import {WatchStopHandle} from "@vue/composition-api";
 import {QUERY_TYPE} from "~/types/enums";
 import {File} from "~/models/Core/File";
@@ -88,6 +88,9 @@ export default defineComponent({
   },
   fetchOnServer: false,
   setup (props, {emit}) {
+    const {$dataProvider, $config, $dataPersister} = useContext()
+    const {getOne} = useImageProvider($dataProvider, $config)
+
     const fileToSave = new File()
     const cropper:Ref<any> = ref(null)
     const image: Ref<AnyJson> = ref({
@@ -103,7 +106,7 @@ export default defineComponent({
         height: (visibleArea || imageSize).height,
       };
     }
-    const {$dataProvider, $config, $dataPersister} = useContext()
+
 
     //Si l'id est renseigné, il faut récupérer l'Item File afin d'avoir les informations de config, le nom, etc.
     if(props.existingImageId){
@@ -125,7 +128,7 @@ export default defineComponent({
     }
 
     //On récupère l'image...
-    const { fetchState, imageLoaded } = new UseImage().getOne(props.existingImageId)
+    const { fetchState, imageLoaded } = getOne(props.existingImageId)
     const unwatch: WatchStopHandle = watch(imageLoaded, (newValue, oldValue) => {
       if (newValue === oldValue || typeof newValue === 'undefined') { return }
       image.value.src = newValue

composables/data/useImage.ts

@@ -1,64 +0,0 @@
-import {AnyJson, ApiResponse} from '~/types/interfaces'
-import {QUERY_TYPE} from "~/types/enums";
-import {useContext, useFetch, Ref, ref} from '@nuxtjs/composition-api'
-import DataProvider from "~/services/data/dataProvider";
-
-/**
- * @category composables/data
- * @class UseImage
- * Use Classe qui va récupérer les Images
- */
-export class UseImage {
-  private $dataProvider!: DataProvider
-  private $config!: AnyJson
-
-  constructor() {
-    const {$dataProvider, $config} = useContext()
-    this.$dataProvider = $dataProvider
-    this.$config = $config
-  }
-
-  /**
-   * Récupération d'une image via l'ancienne API
-   */
-  public getOne(id: number|undefined, imageByDefault: string = '', height: number|undefined = 0, width: number|undefined = 0): AnyJson{
-    const imageLoaded: Ref<String> = ref('')
-
-    const {fetchState, fetch} = useFetch(async () => {
-        try{
-          if(id){
-            imageLoaded.value = await this.provideImg(id, height, width)
-          }else
-            throw new Error('id is null')
-        }catch (e){
-          if(imageByDefault)
-            imageLoaded.value = require(`assets/images/byDefault/${imageByDefault}`)
-        }
-      }
-    )
-
-    return {
-      fetch,
-      fetchState,
-      imageLoaded
-    }
-  }
-
-  /**
-   * retourne l'image demandée
-   * @param id
-   * @param height
-   * @param width
-   */
-  public async provideImg(id: number, height: number = 0, width: number = 0){
-    return await this.$dataProvider.invoke({
-      type: QUERY_TYPE.IMAGE,
-      baseUrl: this.$config.baseURL_Legacy,
-      imgArgs: {
-        id: id,
-        height: height,
-        width: width
-      }
-    })
-  }
-}

composables/data/useImageProvider.ts

@@ -0,0 +1,61 @@
+import {AnyJson} from '~/types/interfaces'
+import {QUERY_TYPE} from "~/types/enums";
+import {useFetch, Ref, ref} from '@nuxtjs/composition-api'
+import DataProvider from "~/services/data/dataProvider";
+
+/**
+ * @category composables/data
+ * @class UseImage
+ * Use Classe qui va récupérer les Images
+ */
+export function useImageProvider($dataProvider: DataProvider, $config: AnyJson) {
+
+  /**
+   * Récupération d'une image via l'ancienne API
+   */
+  function getOne(id: number | undefined, imageByDefault: string = '', height: number | undefined = 0, width: number | undefined = 0): AnyJson {
+    const imageLoaded: Ref<String> = ref('')
+
+    const {fetchState, fetch} = useFetch(async () => {
+        try {
+          if (id) {
+            imageLoaded.value = await provideImg(id, height, width)
+          } else
+            throw new Error('id is null')
+        } catch (e) {
+          if (imageByDefault)
+            imageLoaded.value = require(`assets/images/byDefault/${imageByDefault}`)
+        }
+      }
+    )
+
+    return {
+      fetch,
+      fetchState,
+      imageLoaded
+    }
+  }
+
+  /**
+   * retourne l'image demandée
+   * @param id
+   * @param height
+   * @param width
+   */
+  async function provideImg(id: number, height: number = 0, width: number = 0) {
+    return await $dataProvider.invoke({
+      type: QUERY_TYPE.IMAGE,
+      baseUrl: $config.baseURL_Legacy,
+      imgArgs: {
+        id: id,
+        height: height,
+        width: width
+      }
+    })
+  }
+
+  return {
+    getOne,
+    provideImg
+  }
+}