default opening expansion panels

components/Ui/ExpansionPanel.vue

@@ -1,8 +1,8 @@
 <template>
-     <v-expansion-panel>
+     <v-expansion-panel :id="id" >
        <v-expansion-panel-header class="ot_light_grey">
          <v-icon class="ot_white--text ot_green icon">{{icon}}</v-icon>
-         {{title}}
+         {{$t(id)}}
        </v-expansion-panel-header>
        <v-expansion-panel-content>
         <slot></slot>
@@ -13,7 +13,7 @@
 <script lang="ts">
     export default {
       props: {
-        title:{
+        id:{
           type: String,
           required: true
         },

components/Ui/Input/Enum.vue

@@ -52,7 +52,7 @@
         required: false
       }
     },
-    setup(props, {emit}){
+    setup(props){
       const label_field = props.label ?? props.field
 
       const loading = ref(true)

pages/organization/address/_id.vue

@@ -43,7 +43,7 @@
           </template>
 
           <template v-slot:form.button>
-            <NuxtLink :to="{ path: '/organization', query: { accordion: 'postal_address' }}" class="no-decoration">
+            <NuxtLink :to="{ path: '/organization', query: { accordion: 'address_postal' }}" class="no-decoration">
               <v-btn class="mr-4 ot_danger ot_white--text">
                 Retour
               </v-btn>

pages/organization/index.vue

@@ -4,10 +4,10 @@
     <UiForm :model="models.Organization" :id="id" :query="repositories.organizationRepository.query()">
       <template v-slot:form.input="{entry, updateRepository}">
 
-        <v-expansion-panels v-model="panel" focusable accordion>
+        <v-expansion-panels :value="panel" focusable accordion >
 
           <!-- Description -->
-          <UiExpansionPanel :title="$t('description')" icon="fa-info">
+          <UiExpansionPanel id="description" icon="fa-info">
             <v-container fluid class="container">
               <v-row>
                 <v-col cols="12" sm="6">
@@ -57,13 +57,12 @@
                 <v-col cols="12" sm="6">
                   <UiInputText field="otherPractice" :data="entry['otherPractice']"  v-on:update="updateRepository"/>
                 </v-col>
-
               </v-row>
             </v-container>
           </UiExpansionPanel>
 
           <!-- Adresses -->
-          <UiExpansionPanel :title="$t('address_postal')" icon="fa-globe-europe">
+          <UiExpansionPanel id="address_postal" icon="fa-globe-europe">
             <v-container fluid class="container">
               <v-row>
                 <v-col cols="12" sm="12">
@@ -112,7 +111,7 @@
           </UiExpansionPanel>
 
           <!--  Point de Contact-->
-          <UiExpansionPanel :title="$t('contact_point')" icon="fa-phone">
+          <UiExpansionPanel id="contact_point" icon="fa-phone">
             <v-container class="container">
               <v-row>
                 <v-col cols="12" sm="12">
@@ -130,7 +129,7 @@
           </UiExpansionPanel>
 
           <!-- Informations légales -->
-          <UiExpansionPanel :title="$t('legalInformation')" icon="fa-gavel">
+          <UiExpansionPanel id="legalInformation" icon="fa-gavel">
             <v-container fluid class="container">
               <v-row>
                 <v-col cols="12" sm="6">
@@ -167,13 +166,12 @@
                 <v-col cols="12" sm="6" v-if="entry.typeEstablishment === 'MULTIPLE'">
                   <UiInputEnum field="typeEstablishmentDetail" :data="entry['typeEstablishmentDetail']"  enumType="organization_type_establishment_detail" v-on:update="updateRepository"/>
                 </v-col>
-
               </v-row>
             </v-container>
           </UiExpansionPanel>
 
           <!--  Agréments -->
-          <UiExpansionPanel :title="$t('agrements')" icon="fa-certificate">
+          <UiExpansionPanel id="agrements" icon="fa-certificate">
             <v-container class="container">
               <v-row>
                 <v-col cols="12" sm="6">
@@ -187,13 +185,12 @@
                 <v-col cols="12" sm="6">
                   <UiInputText field="otherApproval" :data="entry['otherApproval']"  v-on:update="updateRepository"/>
                 </v-col>
-
               </v-row>
             </v-container>
           </UiExpansionPanel>
 
           <!-- Salariés -->
-          <UiExpansionPanel :title="$t('salary')" icon="fa-users">
+          <UiExpansionPanel id="salary" icon="fa-users">
             <v-container class="container">
               <v-row>
                 <v-col cols="12" sm="6">
@@ -211,13 +208,12 @@
                 <v-col cols="12" sm="6">
                   <UiInputText field="urssafNumber" :data="entry['urssafNumber']"  v-on:update="updateRepository"/>
                 </v-col>
-
               </v-row>
             </v-container>
           </UiExpansionPanel>
 
           <!-- Réseaux -->
-          <UiExpansionPanel v-if="organizationProfile.isInsideNetwork()" :title="$t('network')" icon="fa-share-alt">
+          <UiExpansionPanel v-if="organizationProfile.isInsideNetwork()" id="network" icon="fa-share-alt">
             <v-container class="container">
               <v-row>
                 <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()">
@@ -231,13 +227,12 @@
                 <v-col cols="12" sm="6" v-if="organizationProfile.isFfec()">
                   <UiInputText field="pedagogicBudget" :data="entry['pedagogicBudget']"  v-on:update="updateRepository" type="number"/>
                 </v-col>
-
               </v-row>
             </v-container>
           </UiExpansionPanel>
 
           <!-- Communication -->
-          <UiExpansionPanel :title="$t('communication')" icon="fa-rss">
+          <UiExpansionPanel id="communication" icon="fa-rss">
             <v-container class="container">
               <v-row>
                 <v-col cols="12" sm="6">
@@ -259,13 +254,12 @@
                 <v-col cols="12" sm="6">
                   <UiInputText field="image" :data="entry['image']"  v-on:update="updateRepository"/>
                 </v-col>
-
               </v-row>
             </v-container>
           </UiExpansionPanel>
 
           <!-- IBAN -->
-          <UiExpansionPanel :title="$t('bank_account')" icon="fa-euro-sign">
+          <UiExpansionPanel id="bank_account" icon="fa-euro-sign">
             <v-container class="container">
               <v-row>
                 <v-col cols="12" sm="12">
@@ -296,25 +290,26 @@
   import {ContactPoint} from "~/models/Core/ContactPoint";
   import {BankAccount} from "~/models/Core/BankAccount";
   import {useRepositoryHelper} from "~/use/store/useRepository";
-  import {Utils} from "~/use/form/utils";
+  import {UseChecker} from "~/use/form/useChecker";
+  import {UseNavigationHelpers} from "~/use/form/useNavigationHelpers";
 
   export default defineComponent({
     name: 'organization_parent',
     setup() {
-      const {store, app: {i18n}, route} = useContext()
+      const {store, app: {i18n}} = useContext()
       const organizationProfile = $organizationProfile(store)
       const id = store.state.profile.organization.id;
 
       const repositories = getRepositories()
 
-      const {siretError, siretErrorMessage, checkSiret} = Utils.useHandleSiret()
+      const {siretError, siretErrorMessage, checkSiret} = UseChecker.useHandleSiret()
       const checkSiretHook = async (siret:string, field:string, updateRepository:any) => {
         await checkSiret(siret)
         if(!siretError.value)
           updateRepository(siret, field);
       }
 
-      //onUnmounted( useRepositoryHelper.cleanRepository(repository) )
+      const {panel} = UseNavigationHelpers.expansionPanels()
 
       return {
         repositories,
@@ -326,7 +321,7 @@
         siretError,
         siretErrorMessage,
         checkSiretHook,
-        panel: route.value.query.accordion ? 0 : 0
+        panel
       }
     },
   })

use/form/utils.ts → use/form/useChecker.ts

@@ -1,7 +1,7 @@
 import {ref, useContext} from "@nuxtjs/composition-api";
 import {QUERY_TYPE} from "~/types/enums";
 
-export class Utils{
+export class UseChecker{
   public static useHandleSiret(){
     const {app:{i18n}, $dataProvider} = useContext()
     const siretError = ref(false)

use/form/useNavigationHelpers.ts

@@ -0,0 +1,24 @@
+import {onMounted, ref, useContext} from "@nuxtjs/composition-api";
+import * as _ from "lodash";
+
+export class UseNavigationHelpers{
+  public static expansionPanels(){
+    const {route} = useContext()
+    const panel = ref()
+    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)
+    })
+
+    return {
+      panel
+    }
+  }
+}

use/utils/useSorter.ts

@@ -1,15 +0,0 @@
-import {EnumChoices} from "~/types/interfaces";
-
-class useSorter{
-  public sortEnum(enums:EnumChoices){
-    return enums.sort( (a, b) => {
-      if (a.label > b.label)
-        return 1;
-      if (a.label < b.label)
-        return -1;
-      return 0;
-    });
-  }
-}
-
-export const useSorterHelper = new useSorter()