useDataUtils

composables/data/useDataUtils.ts

@@ -1,6 +1,6 @@
 import { AnyJson } from '~/types/interfaces'
 import {FORM_STATUS, QUERY_TYPE} from "~/types/enums";
-import {ref, Ref, useContext, useFetch} from '@nuxtjs/composition-api'
+import {ref, Ref, useFetch} from '@nuxtjs/composition-api'
 import DataProvider from "~/services/data/dataProvider";
 import {Model} from "@vuex-orm/core";
 import {repositoryHelper} from "~/services/store/repository";
@@ -8,37 +8,24 @@ import {Store} from "vuex";
 
 /**
  * @category composables/data
- * @class UseDataUtils
- * Use Classe qui va récupérer les Accesses suivant des critères de recherche
+ * @param $dataProvider
+ * Composable Classe qui va récupérer les Accesses suivant des critères de recherche
  */
-export class UseDataUtils {
-  private $dataProvider: DataProvider
-  private route: Ref
-  private store: Store<any>
-
-  constructor() {
-    const { route, $dataProvider, store } = useContext()
-    this.$dataProvider = $dataProvider
-    this.store = store
-    this.route = route
-  }
-
-  public invoke(): AnyJson{
-    return {
-      getItemToEdit: (model: typeof Model) => this.getItemToEdit(model),
-      createItem: () => this.createItem(),
-    }
-  }
+export function useDataUtils($dataProvider: DataProvider){
 
   /**
-   * recherche l'item a éditer
+   * recherche l'item a éditer et alimente le dataprovider
+   * @param route
    * @param model
-   * @private
    */
-  private getItemToEdit(model: typeof Model){
-    const id = parseInt(this.route.value.params.id)
+  function getItemToEdit(route: Ref, model: typeof Model){
+    const id = parseInt(route.value.params.id)
+    if(!id){
+      throw new Error('id must be exist')
+    }
+
     const {fetchState} = useFetch(async () => {
-      await this.$dataProvider.invoke({
+      await $dataProvider.invoke({
         type: QUERY_TYPE.MODEL,
         model,
         id
@@ -52,15 +39,14 @@ export class UseDataUtils {
 
   /**
    * Créer l'Item quand l'utilisateur veux créer un nouvel enregistrement
-   * @param itemToCreate
+   * @param store
    * @param model
-   * @private
    */
-  private createItem(){
-    this.store.commit('form/setFormStatus', FORM_STATUS.CREATE)
+  function createItem(store: Store<any>, model: typeof Model){
+    store.commit('form/setFormStatus', FORM_STATUS.CREATE)
     const loading:Ref<Boolean> = ref(true)
     const item: Ref<any> = ref('')
-    const create = async (itemToCreate: AnyJson, model: typeof Model) =>{
+    const create = async (itemToCreate: AnyJson) =>{
       item.value = await repositoryHelper.persist(model, itemToCreate)
       loading.value = false
     }
@@ -71,4 +57,9 @@ export class UseDataUtils {
       item
     }
   }
+
+  return {
+    getItemToEdit,
+    createItem
+  }
 }

pages/organization/address/_id.vue

@@ -10,15 +10,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
 import { OrganizationAddressPostal } from '~/models/Organization/OrganizationAddressPostal'
-import {UseDataUtils} from "~/composables/data/useDataUtils";
+import {useDataUtils} from "~/composables/data/useDataUtils";
 
 export default defineComponent({
   name: 'EditOrganizationAddressEdit',
   setup () {
-    const {getItemToEdit} = new UseDataUtils().invoke()
-    const {id, fetchState} = getItemToEdit(OrganizationAddressPostal)
+    const {$dataProvider, route} = useContext()
+    const {getItemToEdit} = useDataUtils($dataProvider)
+    const {id, fetchState} = getItemToEdit(route, OrganizationAddressPostal)
     return {
       id,
       fetchState

pages/organization/address/new.vue

@@ -10,20 +10,21 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from '@nuxtjs/composition-api'
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
 import { OrganizationAddressPostal } from '~/models/Organization/OrganizationAddressPostal'
 import {AddressPostal} from "~/models/Core/AddressPostal";
-import {UseDataUtils} from "~/composables/data/useDataUtils";
+import {useDataUtils} from "~/composables/data/useDataUtils";
 
 export default defineComponent({
   name: 'NewOrganizationAddress',
   setup () {
-    const {createItem} = new UseDataUtils().invoke()
-    const {create, loading, item} = createItem()
+    const {$dataProvider, store} = useContext()
+    const {createItem} = useDataUtils($dataProvider)
+    const {create, loading, item} = createItem(store, OrganizationAddressPostal)
 
     if(process.client){
       const itemToCreate: OrganizationAddressPostal = new OrganizationAddressPostal({addressPostal: new AddressPostal()})
-      create(itemToCreate, OrganizationAddressPostal)
+      create(itemToCreate)
     }
 
     return {

pages/organization/bank_account/_id.vue

@@ -11,15 +11,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
-import {UseDataUtils} from "~/composables/data/useDataUtils";
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {useDataUtils} from "~/composables/data/useDataUtils";
 import {BankAccount} from "~/models/Core/BankAccount";
 
 export default defineComponent({
   name: 'EditBankAccount',
   setup () {
-    const {getItemToEdit} = new UseDataUtils().invoke()
-    const {id, fetchState} = getItemToEdit(BankAccount)
+    const {$dataProvider, route} = useContext()
+    const {getItemToEdit} = useDataUtils($dataProvider)
+    const {id, fetchState} = getItemToEdit(route, BankAccount)
 
     return {
       id,

pages/organization/bank_account/new.vue

@@ -11,19 +11,19 @@
 
 <script lang="ts">
 import {defineComponent, useContext} from '@nuxtjs/composition-api'
-import {UseDataUtils} from "~/composables/data/useDataUtils";
+import {useDataUtils} from "~/composables/data/useDataUtils";
 import {BankAccount} from "~/models/Core/BankAccount";
 
 export default defineComponent({
   name: 'NewBankAccount',
   setup (){
-    const {store} = useContext()
-    const {createItem} = new UseDataUtils().invoke()
-    const {create, loading, item} = createItem()
+    const {$dataProvider, store} = useContext()
+    const {createItem} = useDataUtils($dataProvider)
+    const {create, loading, item} = createItem(store, BankAccount)
 
     if(process.client){
       const itemToCreate: BankAccount = new BankAccount({organization:[`/api/organizations/${store.state.profile.organization.id}`]})
-      create(itemToCreate, BankAccount)
+      create(itemToCreate)
     }
 
     return {

pages/organization/contact_points/_id.vue

@@ -11,15 +11,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
 import { ContactPoint } from '~/models/Core/ContactPoint'
-import {UseDataUtils} from "~/composables/data/useDataUtils";
+import {useDataUtils} from "~/composables/data/useDataUtils";
 
 export default defineComponent({
   name: 'EditContactPoint',
   setup () {
-    const {getItemToEdit} = new UseDataUtils().invoke()
-    const {id, fetchState} = getItemToEdit(ContactPoint)
+    const {$dataProvider, route} = useContext()
+    const {getItemToEdit} = useDataUtils($dataProvider)
+    const {id, fetchState} = getItemToEdit(route, ContactPoint)
 
     return {
       id,

pages/organization/contact_points/new.vue

@@ -12,18 +12,18 @@
 <script lang="ts">
 import {defineComponent, useContext} from '@nuxtjs/composition-api'
 import {ContactPoint} from "~/models/Core/ContactPoint";
-import {UseDataUtils} from "~/composables/data/useDataUtils";
+import {useDataUtils} from "~/composables/data/useDataUtils";
 
 export default defineComponent({
   name: 'NewContactPoint',
   setup (){
-    const {store} = useContext()
-    const {createItem} = new UseDataUtils().invoke()
-    const {create, loading, item} = createItem()
+    const {$dataProvider, store} = useContext()
+    const {createItem} = useDataUtils($dataProvider)
+    const {create, loading, item} = createItem(store, ContactPoint)
 
     if(process.client){
       const itemToCreate: ContactPoint = new ContactPoint({organization:[`/api/organizations/${store.state.profile.organization.id}`]})
-      create(itemToCreate, ContactPoint)
+      create(itemToCreate)
     }
 
     return {

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

@@ -0,0 +1,30 @@
+import DataProvider from "~/services/data/dataProvider";
+import {useDataUtils} from "~/composables/data/useDataUtils";
+import {Organization} from "~/models/Organization/Organization";
+import {Ref, ref} from "@nuxtjs/composition-api";
+import {mountComposition} from "~/tests/unit/Helpers";
+
+let useDataUtilsMount:any
+const dataproviderMock = DataProvider as jest.Mocked<typeof DataProvider>
+const dataproviderMockInstance = new dataproviderMock()
+
+
+beforeAll(() => {
+  useDataUtilsMount = useDataUtils(dataproviderMockInstance)
+})
+
+describe('getItemToEdit()', () => {
+  let route:Ref<{}>
+
+  beforeAll(() => {
+    const component = mountComposition(() => {
+      route = ref({})
+    });
+  })
+
+
+  it('should throw an error if route id is empty', () => {
+    route.value = {params: 'foo'}
+    expect(() => useDataUtilsMount.getItemToEdit(route, Organization)).toThrowError('id must be exist')
+  })
+})