@saooti/octopus-sdk 35.1.7 → 35.2.1

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -63,7 +63,7 @@
                 name: 'emission',
                 params: { emissionId: podcast.emission.emissionId },
                 query: {
-                  productor: filterOrga,
+                  productor: filterOrgaId,
                 },
               }"
             >
@@ -78,7 +78,7 @@
                 name: 'productor',
                 params: { productorId: podcast.organisation.id },
                 query: {
-                  productor: filterOrga,
+                  productor: filterOrgaId,
                 },
               }"
             >
@@ -134,14 +134,14 @@ import PodcastPlayBar from './PodcastPlayBar.vue';
 import PodcastImage from './PodcastImage.vue';
 import ParticipantDescription from './ParticipantDescription.vue';
 import TagList from './TagList.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import dayjs from 'dayjs';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
 import displayMethods from '../../mixins/displayMethods';
 import { orgaComputed } from '../../mixins/orgaComputed';
-import { Podcast } from '@/store/class/general/podcast';
-import { Conference } from '@/store/class/conference/conference';
+import { Podcast } from '@/stores/class/general/podcast';
+import { Conference } from '@/stores/class/conference/conference';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ErrorMessage = defineAsyncComponent(() => import('../../misc/ErrorMessage.vue'));

package/src/components/display/podcasts/PodcastPlayBar.vue

@@ -23,7 +23,9 @@
 import ProgressBar from '../../misc/ProgressBar.vue';
 import DurationHelper from '../../../helper/duration';
 import displayMethods from '../../mixins/displayMethods';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState, mapActions } from 'pinia';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastPlayBar',
@@ -36,21 +38,20 @@ export default defineComponent({
     duration: { default: 0, type: Number},
   },
   computed: {
+    ...mapState(usePlayerStore, ['playerPodcast', 'playerElapsed', 'playerTotal']),
     isProgressBar(): boolean{
       return (state.emissionsPage.progressBar as boolean);
     },
     percentProgress(): number{
-      if(this.podcastId !== this.$store.state.player.podcast?.podcastId){
+      if(this.podcastId !== this.playerPodcast?.podcastId){
         return 0;
       }
-      return !this.$store.state.player.elapsed ? 0 : this.$store.state.player.elapsed * 100;
+      return !this.playerElapsed ? 0 : this.playerElapsed * 100;
     },
     playedTime(): string{
-      if(this.podcastId === this.$store.state.player.podcast?.podcastId){
-        if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
-          return DurationHelper.formatDuration(
-            Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
-          );
+      if(this.podcastId === this.playerPodcast?.podcastId){
+        if (this.playerElapsed && this.playerElapsed > 0 && this.playerTotal && this.playerTotal > 0) {
+          return DurationHelper.formatDuration(Math.round(this.playerElapsed * this.playerTotal));
         }
       }
       return '00:00';
@@ -60,15 +61,15 @@ export default defineComponent({
     },
   },
   methods: {
+    ...mapActions(usePlayerStore, ['playerUpdateSeekTime']),
     seekTo(event: MouseEvent): void {
-      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){return;}
+      if(!this.playerPodcast || this.podcastId !== this.playerPodcast.podcastId){return;}
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;
       const percentPosition = x / barWidth;
       if (percentPosition * 100 >= this.percentLiveProgress) return;
-      const seekTime = this.$store.state.player.total * percentPosition;
-      this.$store.commit("playerSeekTime", seekTime);
+      this.playerUpdateSeekTime(this.playerTotal * percentPosition);
     }
   },
 })

package/src/components/display/podcasts/PodcastSwiperList.vue

@@ -46,13 +46,15 @@ import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
 import octopusApi from '@saooti/octopus-api';
 import domHelper from '../../../helper/dom';
 import PodcastItem from './PodcastItem.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation } from "swiper";
 import "swiper/css";
 import "swiper/css/navigation";
-import { Podcast } from '@/store/class/general/podcast';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import { Podcast } from '@/stores/class/general/podcast';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastSwiperList',
@@ -92,14 +94,12 @@ export default defineComponent({
     };
   },
   computed: {
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
+    ...mapState(useFilterStore, ['filterOrgaId']),
     organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.filterOrga;
+      return this.organisationId ?this.organisationId: this.filterOrgaId;
     },
     watchVariable():string{
-      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
     },
     sizeItem(): number {
       return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13;

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -70,7 +70,7 @@
 import selenium from '../../mixins/selenium';
 //@ts-ignore
 import VueMultiselect from 'vue-multiselect';
-import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
 const getDefaultRubrique = (defaultName: string) => {
   if ('' === defaultName){
     return undefined;

package/src/components/display/rubriques/RubriqueList.vue

@@ -58,10 +58,12 @@
 
 <script lang="ts">
 import Popover from '../../misc/Popover.vue';
-import { Rubrique } from '@/store/class/rubrique/rubrique';
-import { Rubriquage } from '@/store/class/rubrique/rubriquage';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
-import { defineComponent } from 'vue'
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState, mapActions } from 'pinia';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'RubriqueList',
 
@@ -83,17 +85,12 @@ export default defineComponent({
   },
 
   computed: {
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
-    rubriqueFilter(): Array<RubriquageFilter>{
-      return this.$store.state.filter.rubriqueFilter;
-    },
+    ...mapState(useFilterStore, ['filterRubrique', 'filterRubriqueDisplay']),
     rubriqueDisplay(): Array<Rubrique>{
-      return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
+      return this.filterRubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
     rubriquageDisplay(): Array<Rubriquage>{
-      const elementToNotShow = Array.from(this.rubriqueFilter);
+      const elementToNotShow = Array.from(this.filterRubrique);
       if(elementToNotShow.length){
         const rubriquageIdToNotShow = elementToNotShow.map(a => a.rubriquageId);
         return this.rubriquages.filter((element)=>{
@@ -105,7 +102,7 @@ export default defineComponent({
     },
   },
   watch:{
-    rubriqueFilter:{
+    filterRubrique:{
       deep: true,
       handler(){
         this.selectNewRubriquage();
@@ -120,9 +117,10 @@ export default defineComponent({
     window.removeEventListener('resize', this.resizeWindow);
   },
   methods: {
+    ...mapActions(useFilterStore, ['filterUpdateRubrique', 'filterUpdateRubriqueDisplay']),
     initRubriques(): void{
       if(!this.rubriquage){ return ;}
-      this.$store.commit('filterRubriqueDisplay', this.rubriquage.rubriques);
+      this.filterUpdateRubriqueDisplay(this.rubriquage.rubriques);
       window.addEventListener('resize', this.resizeWindow);
       this.$nextTick(() => {
         this.resizeWindow();
@@ -136,9 +134,9 @@ export default defineComponent({
         nameRubriquage: this.rubriquage.title,
         nameRubrique: rubrique.name
       };
-      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
+      const newFilter: Array<RubriquageFilter> = Array.from(this.filterRubrique);
       newFilter.push(filterToAdd);
-      this.$store.commit('filterRubrique', newFilter);
+      this.filterUpdateRubrique(newFilter);
       const queries = this.$route.query;
       const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
       this.$router.replace({ query: { ...queries, ...{ rubriquesId: queryString }} });
@@ -146,11 +144,11 @@ export default defineComponent({
     },
     selectNewRubriquage(){
       const rubriquageLength = this.rubriquages.length;
-      if(rubriquageLength === this.rubriqueFilter.length){
+      if(rubriquageLength === this.filterRubrique.length){
         return;
       }
       let index = 0;
-      const rubriquageAlreadyFilter = this.rubriqueFilter.map(a => a.rubriquageId);
+      const rubriquageAlreadyFilter = this.filterRubrique.map(a => a.rubriquageId);
       for (index; index < rubriquageLength; index++) {
         const rubriquageIdIndex = this.rubriquages[index].rubriquageId;
         if(rubriquageIdIndex && !rubriquageAlreadyFilter.includes(rubriquageIdIndex)){

package/src/components/display/sharing/QrCode.vue

@@ -30,10 +30,12 @@
 
 <script lang="ts">
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
 import Snackbar from '../../misc/Snackbar.vue';
-import QrcodeVue from 'qrcode.vue'
+import QrcodeVue from 'qrcode.vue';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'QrCode',
@@ -46,7 +48,6 @@ export default defineComponent({
   props: {
     url: { default: '', type: String},
   },
-
   data() {
     return {
       size: 200 as number,
@@ -55,6 +56,9 @@ export default defineComponent({
       isNotBlack: false as boolean,
     };
   },
+  computed:{
+    ...mapState(useAuthStore, ['authOrganisation']),
+  },
   watch:{
     isNotBlack(){
       this.color = this.isNotBlack ? this.otherColor : "#000000";
@@ -81,13 +85,13 @@ export default defineComponent({
       }
       if (!state.generalParameters.authenticated) return;
       let data;
-      if(this.$store.state.auth?.organisation?.attributes && Object.keys(this.$store.state.auth?.organisation.attributes).length > 1){
-        data = this.$store.state.auth?.organisation.attributes;
+      if(""!==this.authOrganisation.id && this.authOrganisation.attributes && Object.keys(this.authOrganisation.attributes).length > 1){
+        data = this.authOrganisation.attributes;
       }else{
         data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
       }
       if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
-        this.otherColor = data.COLOR;
+        this.otherColor = (data.COLOR as string);
       }
     },
   }

package/src/components/display/sharing/ShareButtons.vue

@@ -47,14 +47,14 @@
 </template>
 
 <script lang="ts">
-import { Emission } from '@/store/class/general/emission';
-import { Podcast } from '@/store/class/general/podcast';
-import { state } from '../../../store/paramStore';
+import { Emission } from '@/stores/class/general/emission';
+import { Podcast } from '@/stores/class/general/podcast';
+import { state } from '../../../stores/ParamSdkStore';
 import displayMethods from '../../mixins/displayMethods';
 import Popover from '../../misc/Popover.vue';
 import ShareButtonsIntern from './ShareButtonsIntern.vue';
 import { defineComponent } from 'vue';
-import { Playlist } from '@/store/class/general/playlist';
+import { Playlist } from '@/stores/class/general/playlist';
 export default defineComponent({
   components: {
     ShareButtonsIntern,

package/src/components/display/sharing/ShareButtonsIntern.vue

@@ -85,13 +85,13 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
-import { Emission } from '@/store/class/general/emission';
-import { Podcast } from '@/store/class/general/podcast';
-import { state } from '../../../store/paramStore';
+import { Emission } from '@/stores/class/general/emission';
+import { Podcast } from '@/stores/class/general/podcast';
+import { state } from '../../../stores/ParamSdkStore';
 import Snackbar from '../../misc/Snackbar.vue';
 import displayMethods from '../../mixins/displayMethods';
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { Playlist } from '@/store/class/general/playlist';
+import { Playlist } from '@/stores/class/general/playlist';
 const ClipboardModal = defineAsyncComponent(() => import('../../misc/modal/ClipboardModal.vue'));
 const NewsletterModal = defineAsyncComponent(() => import('../../misc/modal/NewsletterModal.vue'));
 const QrCodeModal = defineAsyncComponent(() => import('../../misc/modal/QrCodeModal.vue'));

package/src/components/display/sharing/ShareDistribution.vue

@@ -36,11 +36,11 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
 import Snackbar from '../../misc/Snackbar.vue';
 import displayMethods from '../../mixins/displayMethods';
-import { Emission } from '@/store/class/general/emission';
+import { Emission } from '@/stores/class/general/emission';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));

package/src/components/display/sharing/SharePlayer.vue

@@ -80,11 +80,13 @@
 
 <script lang="ts">
 import { orgaComputed } from '../../mixins/orgaComputed';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
-import { Podcast } from '@/store/class/general/podcast';
-import { Emission } from '@/store/class/general/emission';
-import { Playlist } from '@/store/class/general/playlist';
+import { Podcast } from '@/stores/class/general/podcast';
+import { Emission } from '@/stores/class/general/emission';
+import { Playlist } from '@/stores/class/general/playlist';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
 const PlayerParameters = defineAsyncComponent(() => import('./PlayerParameters.vue'));
@@ -128,6 +130,7 @@ export default defineComponent({
   },
   
   computed: {
+    ...mapState(useAuthStore, ['authOrganisation']),
     displayArticleParam():boolean{
       return undefined!==this.podcast && undefined!==this.podcast.article && 0 !== this.podcast.article.length;
     },
@@ -299,8 +302,8 @@ export default defineComponent({
       return url;
     },
     async fetchOrgaAttributes(): Promise<void>{
-      if(this.$store.state.auth?.organisation?.attributes && Object.keys(this.$store.state.auth?.organisation.attributes).length > 1){
-        this.orgaAttributes = this.$store.state.auth?.organisation.attributes;
+      if(""!==this.authOrganisation.id && this.authOrganisation.attributes && Object.keys(this.authOrganisation.attributes).length > 1){
+        this.orgaAttributes = this.authOrganisation.attributes;
       }else{
         this.orgaAttributes= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+this.myOrganisationId);
       }

package/src/components/display/sharing/SharePlayerTypes.vue

@@ -33,14 +33,14 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
-import { Podcast } from '@/store/class/general/podcast';
-import { CustomPlayer } from '@/store/class/general/customPlayer';
+import { Podcast } from '@/stores/class/general/podcast';
+import { CustomPlayer } from '@/stores/class/general/customPlayer';
 import { defineComponent } from 'vue';
-import { Emission } from '@/store/class/general/emission';
-import { Playlist } from '@/store/class/general/playlist';
-import { InterfacePageable } from '@/store/class/general/interfacePageable';
+import { Emission } from '@/stores/class/general/emission';
+import { Playlist } from '@/stores/class/general/playlist';
+import { InterfacePageable } from '@/stores/class/general/interfacePageable';
 export default defineComponent({
   props: {
     podcast: { default: undefined, type: Object as ()=> Podcast},

package/src/components/display/sharing/SubscribeButtons.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { Emission } from '@/store/class/general/emission';
+import { Emission } from '@/stores/class/general/emission';
 import { defineComponent } from 'vue';
 export default defineComponent({
   props: {

package/src/components/misc/Footer.vue

@@ -62,11 +62,14 @@
 <script lang="ts">
 import cookies from '../mixins/cookies';
 import ClassicSelect from '../form/ClassicSelect.vue';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import {loadLocaleMessages} from '@/i18n';
 import octopusApi from '@saooti/octopus-api';
-import { Category } from '@/store/class/general/category';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { useFilterStore } from '@/stores/FilterStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState, mapActions } from 'pinia';
+import { Category } from '@/stores/class/general/category';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Footer',
@@ -81,6 +84,8 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useGeneralStore, ['storedCategories', 'platformEducation']),
+    ...mapState(useFilterStore, ['filterRubrique', 'filterOrgaId', 'filterIab']),
     routerLinkSecondArray(){
       return [
         {title : this.$t('Contact'), routeName: '/main/pub/contact'},
@@ -94,8 +99,8 @@ export default defineComponent({
       return state.footer.contactLink;
     },
     rubriqueQueryParam(): string|undefined{
-      if(this.$store.state.filter?.rubriqueFilter?.length){
-        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      if(this.filterRubrique?.length){
+        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
       }
       return undefined;
     },
@@ -106,25 +111,27 @@ export default defineComponent({
     }
   },
   methods: {
+    ...mapActions(useGeneralStore, ['storedUpdateCategories']),
+    ...mapActions(useFilterStore, ['filterUpdateIab']),
     getQueriesRouter(routeName: string){
       if('podcasts' !== routeName && 'emissions' !== routeName && 'home' !== routeName){
-        return { productor: this.$store.state.filter.organisationId};
+        return { productor: this.filterOrgaId};
       }
-      return { productor: this.$store.state.filter.organisationId,
-                   iabId: this.$store.state.filter.iab?.id,
+      return { productor: this.filterOrgaId,
+                   iabId: this.filterIab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
     changeLanguage(): void{
       this.setCookie('octopus-language', this.language);
-      loadLocaleMessages(this.$i18n, this.language, this.$store.state.general.isEducation);
+      loadLocaleMessages(this.$i18n, this.language, this.platformEducation);
       octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list${state.octopusApi.organisationId? '/'+state.octopusApi.organisationId : ''}`, { lang: this.$i18n.locale }).then((data: Array<Category>) => {
-        this.$store.commit('categoriesSet', data);
-        if(this.$store.state.filter.iab){
-          const category = this.$store.state.categories.filter((c: Category) => {
-            return c.id === this.$store.state.filter.iab.id;
+        this.storedUpdateCategories(data);
+        if(this.filterIab){
+          const category = this.storedCategories.filter((c: Category) => {
+            return c.id === this.filterIab?.id;
           });
           if(category.length){
-            this.$store.commit('filterIab', category[0]);
+            this.filterUpdateIab(category[0]);
           }
         }
       });

package/src/components/misc/HomeDropdown.vue

@@ -86,10 +86,12 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import Popover from '../misc/Popover.vue';
-import { defineComponent } from 'vue'
-import { Organisation } from '@/store/class/general/organisation';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
+import { defineComponent } from 'vue';
+import { Organisation } from '@/stores/class/general/organisation';
 export default defineComponent({
   name: 'HomeDropdown',
   components:{
@@ -99,8 +101,9 @@ export default defineComponent({
     isEducation: { default: false, type: Boolean},
   },
   computed: {
+    ...mapState(useAuthStore, ['authProfile']),
     organisationsAvailable(): Array<Organisation>{
-      return this.$store.state.auth?.profile.organisations?? [];
+      return this.authProfile.organisations?? [];
     },
     helpLinks(){
       return [

package/src/components/misc/LeftMenu.vue

@@ -36,7 +36,7 @@
       :to="{
         name: 'category',
         params: { iabId: category.id },
-        query: { productor: $store.state.filter.organisationId },
+        query: { productor: filterOrgaId },
       }"
       @click="onMenuClick"
     >
@@ -46,12 +46,15 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import orgaFilter from '../mixins/organisationFilter';
-import { Category } from '@/store/class/general/category';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { Category } from '@/stores/class/general/category';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { Organisation } from '@/store/class/general/organisation';
+import { useFilterStore } from '@/stores/FilterStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState } from 'pinia';
+import { Organisation } from '@/stores/class/general/organisation';
 const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
 export default defineComponent({
   name: 'LeftMenu',
@@ -70,18 +73,20 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useGeneralStore, ['storedCategories']),
+    ...mapState(useFilterStore, ['filterLive', 'filterOrgaId', 'filterIab', 'filterRubrique']),
     routerLinkArray(){
       return [
         {title : this.$t('Home'), routeName: 'home', condition : true},
-        {title : this.$t('Live'), routeName: 'lives', condition : state.generalParameters.isLiveTab &&((this.filterOrga && this.filterOrgaLive) || !this.filterOrga)},
+        {title : this.$t('Live'), routeName: 'lives', condition : state.generalParameters.isLiveTab &&((this.filterOrgaId && this.filterLive) || !this.filterOrgaId)},
         {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
         {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
-        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrga || this.isEducation)},
+        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrgaId || this.isEducation)},
         {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
         {title : this.$t('Speakers'), routeName: 'participants', condition : true},]
     },
     categories(): Array<Category> {
-      return this.$store.state.categories.filter((c: Category) => {
+      return this.storedCategories.filter((c: Category) => {
         if (this.isPodcastmaker) return c.podcastOrganisationCount;
         return c.podcastCount;
       });
@@ -89,25 +94,19 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
-    filterOrgaLive(): string {
-      return this.$store.state.filter.live;
-    },
     rubriqueQueryParam(): string|undefined{
-      if(this.$store.state.filter?.rubriqueFilter?.length){
-        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      if(this.filterRubrique?.length){
+        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
       }
       return undefined;
     },
   },
   watch: {
-    filterOrga: {
+    filterOrgaId: {
       immediate: true,
       handler() {
-        if (this.filterOrga) {
-          this.organisationId = this.filterOrga;
+        if (this.filterOrgaId) {
+          this.organisationId = this.filterOrgaId;
         } else {
           this.reset = !this.reset;
         }
@@ -118,10 +117,10 @@ export default defineComponent({
   methods: {
     getQueriesRouter(routeName: string){
       if('podcasts' !== routeName && 'emissions' !== routeName && 'home' !== routeName){
-        return { productor: this.$store.state.filter.organisationId};
+        return { productor: this.filterOrgaId};
       }
-      return { productor: this.$store.state.filter.organisationId,
-                   iabId: this.$store.state.filter.iab?.id,
+      return { productor: this.filterOrgaId,
+                   iabId: this.filterIab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
     onMenuClick() {