useAddressPostalUtils

components/Form/Organization/Address.vue

@@ -114,10 +114,10 @@ import { queryHelper } from '~/services/store/query'
 import { AddressPostal } from '~/models/Core/AddressPostal'
 import {UseCountry} from "~/composables/data/useCountry";
 import ModelsUtils from "~/services/utils/modelsUtils";
-import {UseAddressPostal} from "~/composables/data/useAddresspostal";
 import {AnyJson} from "~/types/interfaces";
 import DataProvider from "~/services/data/dataProvider";
 import {useAccessesProvider} from "~/composables/data/useAccessesProvider";
+import {useAddressPostalUtils} from "~/composables/data/useAddressPostalUtils";
 
 export default defineComponent({
   props: {
@@ -129,6 +129,7 @@ export default defineComponent({
   setup (props) {
     const { $dataProvider } = useContext()
     const {getPhysicalByFullName: accessSearch} = useAccessesProvider($dataProvider)
+    const {searchFunction: addressSearch, updateCpAddress} = useAddressPostalUtils($dataProvider)
 
     const repository: VuexRepository<Model> = repositoryHelper.getRepository(OrganizationAddressPostal)
     const query: Query = repository.with('addressPostal')
@@ -153,8 +154,6 @@ export default defineComponent({
 
     const {countries, fetchState: countriesFetchingState} = new UseCountry().getAll()
 
-    const {searchFunction: addressSearch, updateCpAddress} = new UseAddressPostal().invoke()
-
     const {updateAccessAddress} = accessOwnerResearch($dataProvider, organizationAddressPostalItem, addressPostalItem)
 
     const getIdFromUri = (uri: string) => {

composables/data/useAddressPostalUtils.ts

@@ -0,0 +1,61 @@
+import {AnyJson} from '~/types/interfaces'
+import {QUERY_TYPE} from "~/types/enums";
+import DataProvider from "~/services/data/dataProvider";
+
+export function useAddressPostalUtils($dataProvider: DataProvider) {
+
+  /**
+   * Fonction de recherche qui utilise l'API gouvernematal pour autocompléter les CP et villes.
+   * @param research
+   * @param field
+   * @private
+   */
+  async function searchFunction(research: string, field: string): Promise<Array<AnyJson>> {
+    if (research) {
+      const response = await $dataProvider.invoke({
+        type: QUERY_TYPE.DEFAULT,
+        url: `https://api-adresse.data.gouv.fr/search/?q=${research}&type=municipality&autocomplete=1&limit=20`,
+        params: {
+          noXaccessId: true
+        }
+      })
+      const apiResponse = response.data.features.map((data: AnyJson) => data.properties)
+
+      // Par défaut on insère les valeurs que l'utilisateur a écrit, car un nom de ville ou de CP peut être absent de l'API
+      const defaultResponse = []
+      if (field === 'addressPostal.addressCity') {
+        defaultResponse.push({id: 0, postcode: null, city: research})
+      } else {
+        defaultResponse.push({id: 0, postcode: research, city: null})
+      }
+
+      return defaultResponse.concat(apiResponse)
+    }
+    return []
+  }
+
+  /**
+   * Fonction permettant de mettre à jour le repo par rapport à la réponse (objet) de l'autocomplete
+   * @param value
+   * @param updateRepository
+   * @private
+   */
+  function updateCpAddress(value: AnyJson, updateRepository: Function): void {
+    //Si une valeur est présente
+    if (value) {
+      if (value.city)
+        updateRepository(value.city, 'addressPostal.addressCity')
+      if (value.postcode)
+        updateRepository(value.postcode, 'addressPostal.postalCode')
+    } else {
+      //Cas où on efface les valeurs des champs
+      updateRepository(null, 'addressPostal.addressCity')
+      updateRepository(null, 'addressPostal.postalCode')
+    }
+  }
+
+  return {
+    searchFunction,
+    updateCpAddress
+  }
+}

composables/data/useAddresspostal.ts

@@ -1,75 +0,0 @@
-import { AnyJson } from '~/types/interfaces'
-import {QUERY_TYPE} from "~/types/enums";
-import { useContext } from '@nuxtjs/composition-api'
-import DataProvider from "~/services/data/dataProvider";
-
-/**
- * @category composables/data
- * @class UseAddressPostal
- * Use Classe pour gérer les deux champs postal code et adresseCity
- */
-export class UseAddressPostal {
-  private $dataProvider!: DataProvider
-
-  constructor() {
-    const {$dataProvider} = useContext()
-    this.$dataProvider = $dataProvider
-  }
-
-  public invoke(): AnyJson{
-    return {
-      searchFunction: (research: string, field: string) => this.searchFunction(research, field),
-      updateCpAddress: (value:AnyJson, updateRepository: Function) => this.updateCpAddress(value, updateRepository),
-    }
-  }
-
-  /**
-   * Fonction de recherche qui utilise l'API gouvernematal pour autocompléter les CP et villes.
-   * @param research
-   * @param field
-   * @private
-   */
-  private async searchFunction (research: string, field: string): Promise<Array<AnyJson>>{
-    if(research){
-      const response = await this.$dataProvider.invoke({
-        type: QUERY_TYPE.DEFAULT,
-        url: `https://api-adresse.data.gouv.fr/search/?q=${research}&type=municipality&autocomplete=1&limit=20`,
-        params: {
-          noXaccessId: true
-        }
-      })
-      const apiResponse = response.data.features.map((data:AnyJson)=>data.properties)
-
-      // Par défaut on insère les valeurs que l'utilisateur a écrit, car un nom de ville ou de CP peut être absent de l'API
-      const defaultResponse = []
-      if(field === 'addressPostal.addressCity'){
-        defaultResponse.push({id:0, postcode: null, city: research})
-      }else{
-        defaultResponse.push({id:0, postcode: research, city: null})
-      }
-
-      return defaultResponse.concat(apiResponse)
-    }
-    return []
-  }
-
-  /**
-   * Fonction permettant de mettre à jour le repo par rapport à la réponse (objet) de l'autocomplete
-   * @param value
-   * @param updateRepository
-   * @private
-   */
-  private updateCpAddress(value:AnyJson, updateRepository: Function): void{
-    //Si une valeur est présente
-    if(value){
-      if(value.city)
-        updateRepository(value.city, 'addressPostal.addressCity')
-      if(value.postcode)
-        updateRepository(value.postcode, 'addressPostal.postalCode')
-    }else{
-      //Cas où on efface les valeurs des champs
-      updateRepository(null, 'addressPostal.addressCity')
-      updateRepository(null, 'addressPostal.postalCode')
-    }
-  }
-}

plugins/directives.js

@@ -22,7 +22,8 @@ Vue.directive("click-outside", {
   bind: function (el, binding, vnode) {
     el.clickOutsideEvent = (event) => {
       if (!(el === event.target || el.contains(event.target))) {
-        vnode.context[binding.expression](event)
+        if(vnode.context[binding.expression])
+          vnode.context[binding.expression](event)
       }
     };
     document.body.addEventListener("click", el.clickOutsideEvent);

tests/unit/composables/data/useAccessesProvider.spec.ts

@@ -1,5 +1,6 @@
 import DataProvider from "~/services/data/dataProvider";
 import {useAccessesProvider} from "~/composables/data/useAccessesProvider";
+
 let useMyAccessesProviderMount:any
 const dataproviderMock = DataProvider as jest.Mocked<typeof DataProvider>
 const dataproviderMockInstance = new dataproviderMock()
@@ -14,7 +15,7 @@ describe('getPhysicalByFullName()', () => {
     expect(result).toHaveLength(0)
   })
 
-  it('should call $dataProvider.invoke if there is research param', async () => {
+  it('should return an array of results if there is research param', async () => {
     dataproviderMockInstance.invoke = jest.fn().mockReturnValue({data:['foo bar']})
     const result = await useMyAccessesProviderMount.getPhysicalByFullName('foo bar')
     expect(result).toStrictEqual(['foo bar'])

tests/unit/composables/data/useAddressPostalUtils.spec.ts

@@ -0,0 +1,55 @@
+import DataProvider from "~/services/data/dataProvider";
+import {useAddressPostalUtils} from "~/composables/data/useAddressPostalUtils";
+
+let useAddressPostalUtilsMount:any
+const dataproviderMock = DataProvider as jest.Mocked<typeof DataProvider>
+const dataproviderMockInstance = new dataproviderMock()
+
+
+beforeAll(() => {
+  useAddressPostalUtilsMount = useAddressPostalUtils(dataproviderMockInstance)
+})
+
+describe('searchFunction()', () => {
+  const apiResponse = {
+    data:{
+      features: [
+        {
+          properties: {
+            id: 1, postcode: '00001', city: 'foo'
+          }
+        },
+        {
+          properties: {
+            id: 2, postcode: '00002', city: 'bar'
+          }
+        }
+      ]
+    }
+  }
+
+  it('should return [] if no research params', async () => {
+    const result = await useAddressPostalUtilsMount.searchFunction(null, 'field')
+    expect(result).toHaveLength(0)
+  })
+
+  it('should return response with default postcode value', async () => {
+    dataproviderMockInstance.invoke = jest.fn().mockReturnValue(apiResponse)
+    const result = await useAddressPostalUtilsMount.searchFunction('foo', 'postalCode')
+    expect(result).toStrictEqual([
+      {id: 0, postcode: 'foo', city: null},
+      {id: 1, postcode: '00001', city: 'foo'},
+      {id: 2, postcode: '00002', city: 'bar'}
+    ])
+  })
+
+  it('should return response with default city value', async () => {
+    dataproviderMockInstance.invoke = jest.fn().mockReturnValue(apiResponse)
+    const resultCity = await useAddressPostalUtilsMount.searchFunction('foo', 'addressPostal.addressCity')
+    expect(resultCity).toStrictEqual([
+      {id: 0, postcode: null, city: 'foo'},
+      {id: 1, postcode: '00001', city: 'foo'},
+      {id: 2, postcode: '00002', city: 'bar'}
+    ])
+  })
+})