useNavigationHelpers

composables/form/useNavigationHelpers.ts

@@ -1,29 +1,26 @@
-import { onMounted, ref, useContext, Ref } from '@nuxtjs/composition-api'
+import { onMounted, ref, Ref } from '@nuxtjs/composition-api'
 import * as _ from 'lodash'
 
 /**
  * @category composables/form
- * @class UseNavigationHelpers
- * Use Classe pour gérer les expansions des accordions
+ * Composable pour gérer les expansions des accordions
  */
-export class UseNavigationHelpers {
-  public static expansionPanels () {
-    const { route } = useContext()
-    const panel: Ref<number> = ref(0)
-    const activeAccordionId = route.value.query.accordion
-    onMounted(() => {
-      setTimeout(function () {
-        _.each(document.getElementsByClassName('v-expansion-panel'), (element, index) => {
-          if (element.id == activeAccordionId) {
-            panel.value = index
-          }
-        })
-        if (!panel.value) { panel.value = 0 }
-      }, 0)
-    })
+export function useNavigationHelpers(route: Ref){
+  const panel: Ref<number> = ref(0)
+  const activeAccordionId = route.value.query.accordion
 
-    return {
-      panel
-    }
+  onMounted(() => {
+    setTimeout(function () {
+      _.each(document.getElementsByClassName('v-expansion-panel'), (element, index) => {
+        if (element.id == activeAccordionId) {
+          panel.value = index
+        }
+      })
+      if (!panel.value) { panel.value = 0 }
+    }, 0)
+  })
+
+  return {
+    panel
   }
 }

pages/organization/index.vue

@@ -455,7 +455,7 @@ import { ContactPoint } from '~/models/Core/ContactPoint'
 import { BankAccount } from '~/models/Core/BankAccount'
 import { repositoryHelper } from '~/services/store/repository'
 import UseValidator from '~/composables/form/useValidator'
-import { UseNavigationHelpers } from '~/composables/form/useNavigationHelpers'
+import {useNavigationHelpers} from '~/composables/form/useNavigationHelpers'
 import I18N from '~/services/utils/i18n'
 import {Country} from "~/models/Core/Country";
 import {useTypeOfPracticeProvider} from "~/composables/data/useTypeOfPracticeProvider";
@@ -466,8 +466,9 @@ import {OrganizationArticle} from "~/models/Organization/OrganizationArticle";
 export default defineComponent({
   name: 'OrganizationParent',
   setup () {
-    const { store, app: { i18n }, $dataProvider } = useContext()
+    const { store, app: { i18n }, $dataProvider, route } = useContext()
     const {typeOfPractices, fetchState:typeOfPracticesFetchingState} = useTypeOfPracticeProvider($dataProvider)
+    const { panel } = useNavigationHelpers(route)
 
     const organizationProfile = reactive($organizationProfile(store))
     const id: number = store.state.profile.organization.id
@@ -479,8 +480,6 @@ export default defineComponent({
       if (!siretError.value) { updateRepository(siret, field) }
     }
 
-    const { panel } = UseNavigationHelpers.expansionPanels()
-
     const formatPhoneNumber = (number: string): string => {
       return I18N.formatPhoneNumber(number)
     }