@saooti/octopus-sdk 35.1.7 → 35.2.1

package/src/components/pages/Error403Page.vue

@@ -28,11 +28,14 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Error403Page',
   computed: {
+    ...mapState(useGeneralStore, ['metaTitle']),
     authenticated(): boolean {
       return (state.generalParameters.authenticated as boolean);
     },
@@ -41,7 +44,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    document.title = this.$store.state.general.metaTitle;
+    document.title = this.metaTitle;
   },
 });
 </script>

package/src/components/pages/Home.vue

@@ -30,12 +30,15 @@
 
 <script lang="ts">
 import PodcastInlineList from '../display/podcasts/PodcastInlineList.vue';
-import { state } from '../../store/paramStore';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
-import { Rubriquage } from '@/store/class/rubrique/rubriquage';
-import { Rubrique } from '@/store/class/rubrique/rubrique';
-import { defineComponent } from 'vue'
-import { Category } from '@/store/class/general/category';
+import { state } from '../../stores/ParamSdkStore';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { useFilterStore } from '@/stores/FilterStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState } from 'pinia';
+import { defineComponent } from 'vue';
+import { Category } from '@/stores/class/general/category';
 export default defineComponent({
   name: 'Home',
   components: {
@@ -47,20 +50,22 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useGeneralStore, ['storedCategories']),
+    ...mapState(useFilterStore, ['filterRubriquage', 'filterOrgaId', 'filterRubrique', 'filterRubriqueDisplay', 'filterIab']),
     rubriqueDisplay(): Array<Rubrique>{
-      return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
+      return this.filterRubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
     rubriquageFilter(): Array<Rubriquage>{
-      return this.$store.state.filter.organisationId ? this.$store.state.filter.rubriquageArray :[];
+      return this.filterOrgaId? this.filterRubriquage :[];
     },
     rubriqueFilter(): Array<RubriquageFilter>{
-      return this.$store.state.filter.rubriqueFilter;
+      return this.filterRubrique;
     },
     categories(): Array<Category> {
-      if(this.$store.state.filter.iab){
-        return [this.$store.state.filter.iab];
+      if(this.filterIab){
+        return [this.filterIab];
       }
-      return this.$store.state.categories.filter((c: Category) => {
+      return this.storedCategories.filter((c: Category) => {
         if (state.generalParameters.podcastmaker) return c.podcastOrganisationCount;
         return c.podcastCount;
       });

package/src/components/pages/Lives.vue

@@ -4,7 +4,7 @@
       <h1>{{ $t('In live') }}</h1>
       <template v-if="!isPodcastmaker">
         <router-link
-          v-if="liveRight && filterOrga"
+          v-if="liveRight && filterOrgaId"
           to="/main/priv/edit/live"
         >
           <button class="btn btn-primary">
@@ -23,7 +23,7 @@
       </template>
     </div>
     <LiveList
-      v-if="filterOrga || organisationId"
+      v-if="filterOrgaId || organisationId"
       :conference-watched="conferenceWatched"
       :organisation-id="organisationId"
       @initConferenceIds="initConferenceIds"
@@ -32,10 +32,13 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../store/paramStore';
-import { Organisation } from '@/store/class/general/organisation';
+import { state } from '../../stores/ParamSdkStore';
+import { Organisation } from '@/stores/class/general/organisation';
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { Conference } from '@/store/class/conference/conference';
+import { Conference } from '@/stores/class/conference/conference';
+import { useAuthStore } from '@/stores/AuthStore';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
 const LiveList = defineAsyncComponent(() => import('../display/live/LiveList.vue'));
 const OrganisationChooser = defineAsyncComponent(() => import('../display/organisation/OrganisationChooser.vue'));
 export default defineComponent({
@@ -56,12 +59,11 @@ export default defineComponent({
   },
   
   computed: {
+    ...mapState(useFilterStore, ['filterOrgaId']),
+    ...mapState(useAuthStore, ['authOrganisation']),
     liveRight(): boolean {
       return (state.generalParameters.isRoleLive as boolean)&& this.live;
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
@@ -69,10 +71,10 @@ export default defineComponent({
   created() {
     if (this.productor) {
       this.$emit('update:organisationId',this.productor);
-    } else if (this.$store.state.filter.organisationId) {
-      this.$emit('update:organisationId',this.$store.state.filter.organisationId);
+    } else if (this.filterOrgaId) {
+      this.$emit('update:organisationId',this.filterOrgaId);
     }
-    if (!this.$store.state.auth?.organisation?.attributes?.['live.active']) {
+    if (!this.authOrganisation.attributes?.['live.active']) {
       this.live = false;
     }
   },

package/src/components/pages/PageNotFound.vue

@@ -10,8 +10,8 @@
         class="btn btn-primary"
         :to="{
           name: 'home',
-          query: { productor: $store.state.filter.organisationId,
-                   iabId:$store.state.filter.iab?.id,
+          query: { productor: filterOrgaId,
+                   iabId:filterIab?.id,
                    rubriquesId: rubriqueQueryParam},
         }"
       >
@@ -22,14 +22,19 @@
 </template>
 
 <script lang="ts">
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { useFilterStore } from '@/stores/FilterStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'PageNotFound',
   computed:{
+    ...mapState(useGeneralStore, ['metaTitle']),
+    ...mapState(useFilterStore, ['filterRubrique', 'filterIab', 'filterOrgaId']),
     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;
     },
@@ -38,7 +43,7 @@ export default defineComponent({
     },
   },
   mounted() {
-    document.title = this.$store.state.general.metaTitle;
+    document.title = this.metaTitle;
   },
 });
 </script>

package/src/components/pages/Participant.vue

@@ -66,12 +66,12 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import displayMethods from '../mixins/displayMethods';
 import imageProxy from '../mixins/imageProxy';
 import { orgaComputed } from '../mixins/orgaComputed';
 import { handle403 } from '../mixins/handle403';
-import { Participant } from '@/store/class/general/participant';
+import { Participant } from '@/stores/class/general/participant';
 import ClassicLoading from '../form/ClassicLoading.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { AxiosError } from 'axios';
@@ -149,7 +149,7 @@ export default defineComponent({
       this.loaded = false;
       try {
         const data = await octopusApi.fetchData<Participant>(0, 'participant/'+this.participantId);
-        if("PUBLIC"!==data?.orga?.privacy && this.filterOrga!==data?.orga?.id){
+        if("PUBLIC"!==data?.orga?.privacy && this.filterOrgaId!==data?.orga?.id){
           this.initError();
           return;
         }

package/src/components/pages/Participants.vue

@@ -20,7 +20,7 @@
 import { orgaComputed } from '../mixins/orgaComputed';
 import ParticipantList from '../display/participant/ParticipantList.vue';
 import ProductorSearch from '../display/filter/ProductorSearch.vue';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
@@ -45,7 +45,7 @@ export default defineComponent({
     },
   },
   created() {
-    this.organisationId = this.productor ?this.productor: this.filterOrga;
+    this.organisationId = this.productor ?this.productor: this.filterOrgaId;
   },
 })
 </script>

package/src/components/pages/Playlist.vue

@@ -57,11 +57,11 @@ import { orgaComputed } from '../mixins/orgaComputed';
 import ClassicLoading from '../form/ClassicLoading.vue';
 import PodcastList from '../display/playlist/PodcastList.vue';
 import octopusApi from '@saooti/octopus-api';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import displayMethods from '../mixins/displayMethods';
 import imageProxy from '../mixins/imageProxy';
 import { handle403 } from '../mixins/handle403';
-import { Playlist } from '@/store/class/general/playlist';
+import { Playlist } from '@/stores/class/general/playlist';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { AxiosError } from 'axios';
 const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
@@ -132,7 +132,7 @@ export default defineComponent({
         this.loaded = false;
         this.error = false;
         this.playlist = await octopusApi.fetchData<Playlist>(0, 'playlist/'+this.playlistId);
-        if("PUBLIC"!==this.playlist.organisation?.privacy && this.filterOrga!==this.playlist.organisation?.id){
+        if("PUBLIC"!==this.playlist.organisation?.privacy && this.filterOrgaId!==this.playlist.organisation?.id){
           this.initError();
           return;
         }

package/src/components/pages/Playlists.vue

@@ -29,7 +29,7 @@
 <script lang="ts">
 import { orgaComputed } from '../mixins/orgaComputed';
 import PlaylistList from '../display/playlist/PlaylistList.vue';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ProductorSearch = defineAsyncComponent(() => import('../display/filter/ProductorSearch.vue'));
 export default defineComponent({
@@ -64,7 +64,7 @@ export default defineComponent({
   },
 
   created() {
-    this.organisationId = this.productor ?this.productor: this.filterOrga;
+    this.organisationId = this.productor ?this.productor: this.filterOrgaId;
   },
 })
 </script>

package/src/components/pages/Podcast.vue

@@ -98,15 +98,17 @@ import PodcastModuleBox from '../display/podcasts/PodcastModuleBox.vue';
 import ClassicLoading from '../form/ClassicLoading.vue';
 import octopusApi from '@saooti/octopus-api';
 import crudApi from '@/api/classicCrud';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import dayjs from 'dayjs';
-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 { handle403 } from '../mixins/handle403';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import CommentSectionVue from '../display/comments/CommentSection.vue';
-import { CommentPodcast } from '@/store/class/general/comment';
-import { Category } from '@/store/class/general/category';
+import { CommentPodcast } from '@/stores/class/general/comment';
+import { Category } from '@/stores/class/general/category';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState } from 'pinia';
 import { AxiosError } from 'axios';
 const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
 const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
@@ -153,6 +155,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useGeneralStore, ['storedCategories']),
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
@@ -174,7 +177,7 @@ export default defineComponent({
     },
     categories(): Array<Category> {
       if ('undefined' === typeof this.podcast) return [];
-      return this.$store.state.categories
+      return this.storedCategories
         .filter((item: Category) => {
           return ( this.podcast?.emission.iabIds &&
             -1 !== this.podcast.emission.iabIds.indexOf(item.id)
@@ -249,7 +252,7 @@ export default defineComponent({
     async initConference(){
       if (!this.podcast || !this.isLiveReadyToRecord) return;
       if (this.isOctopusAndAnimator && undefined!==this.podcast.conferenceId) {
-        const data = await crudApi.fetchData<Conference>(this.$store.state,9,'conference/'+this.podcast.conferenceId);
+        const data = await crudApi.fetchData<Conference>(9,'conference/'+this.podcast.conferenceId);
         this.fetchConference = data ? data : {conferenceId:-1, title:''};
       } else if(undefined!==this.podcast.conferenceId){
         const data = await octopusApi.fetchData<string>(9, 'conference/realstatus/'+this.podcast.conferenceId);
@@ -292,7 +295,7 @@ export default defineComponent({
       this.error = false;
       try {
         const data : Podcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+this.podcastId); 
-        if("PUBLIC"!==data.organisation.privacy && this.filterOrga!==data.organisation.id){
+        if("PUBLIC"!==data.organisation.privacy && this.filterOrgaId!==data.organisation.id){
           this.initError();
           return;
         }

package/src/components/pages/Podcasts.vue

@@ -63,12 +63,13 @@
 <script lang="ts">
 import { orgaComputed } from '../mixins/orgaComputed';
 import PodcastList from '../display/podcasts/PodcastList.vue';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import ProductorSearch from '../display/filter/ProductorSearch.vue';
 import AdvancedSearch from '../display/filter/AdvancedSearch.vue';
-import { Emission } from '@/store/class/general/emission';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
-
+import { Emission } from '@/stores/class/general/emission';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const EmissionChooser = defineAsyncComponent(() => import('../display/emission/EmissionChooser.vue'));
 export default defineComponent({
@@ -106,6 +107,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useFilterStore, ['filterRubrique', 'filterIab']),
     titleDisplay(): string{
       return state.podcastsPage.titlePage ?? this.$t('All podcasts');
     },
@@ -114,7 +116,7 @@ export default defineComponent({
         true===state.generalParameters.isAdmin;
     },
     organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.filterOrga;
+      return this.organisationId ?this.organisationId: this.filterOrgaId;
     },
     pageParameters(){
       return {
@@ -141,11 +143,11 @@ export default defineComponent({
   methods: {
     initPodcastsPage(){
       this.searchPattern = this.searchInit ?? '';
-      this.organisationId = this.productor ?this.productor: this.filterOrga;
+      this.organisationId = this.productor ?this.productor: this.filterOrgaId;
       this.includeHidden = this.organisation && this.organisationRight ? true : false;
-      this.iabId =this.$store.state.filter.iab?.id;
-      if(this.$store.state.filter.rubriqueFilter.length){
-        this.updateRubriquageFilter(this.$store.state.filter.rubriqueFilter);
+      this.iabId =this.filterIab?.id;
+      if(this.filterRubrique.length){
+        this.updateRubriquageFilter(this.filterRubrique);
       }
       this.$nextTick(() => {
         this.isInit = true;

package/src/components/pages/Rubrique.vue

@@ -13,7 +13,7 @@
 import octopusApi from '@saooti/octopus-api';
 import PodcastList from '../display/podcasts/PodcastList.vue';
 import { defineComponent } from 'vue'
-import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
 export default defineComponent({
   name:"Rubrique",
   components: {

package/src/components/pages/Search.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import ClassicSearch from '../form/ClassicSearch.vue';
 import PodcastList from '../display/podcasts/PodcastList.vue';
 import { defineComponent } from 'vue';

package/src/main.ts

@@ -3,8 +3,8 @@ import VueLazyLoad from 'vue3-lazyload';
 import App from './App.vue';
 import {setupI18n} from './i18n';
 import router from '@/router/router';
-import store from '@/store/AppStore';
-import paramStore from '@/store/paramStore';
+import { createPinia } from 'pinia';
+import paramStore from '@/stores/ParamSdkStore';
 
 const nameEQ = 'octopus-language=';
 const ca = document.cookie.split(';');
@@ -33,7 +33,7 @@ if(0===language.length){
   }
 }
 
-const i18n = setupI18n({locale: language}, store.state.general.education);
+const i18n = setupI18n({locale: language}, false);
 
 paramStore.initialize({
   generalParameters: {},
@@ -50,10 +50,12 @@ paramStore.initialize({
   octopusApi: {}
 });
 
+const pinia = createPinia();
+
 // Initialisation store
 createApp(App)
 .use(i18n)
-.use(store)
+.use(pinia)
 .use(router)
 .use(VueLazyLoad)
 .mount('#app');

package/src/stores/ApiStore.ts

@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia';
+interface ApiState {
+	apiUrl: string,
+	commentUrl: string,
+	frontendUrl: string,
+	ftpUrl: string,
+	hlsUrl: string,
+	imageUrl: string,
+	keycloakUrl: string,
+	mediaUrl: string,
+	miniplayerUrl:string,
+	processorUrl: string,
+	radioUrl: string,
+	recoUrl:string,
+	rssUrl: string,
+	rtmpUrl: string,
+	speechToTextUrl: string,
+	studioUrl: string,
+	videoMakerUrl: string,
+	storageUrl: string,
+}
+export const useApiStore = defineStore('ApiStore', {
+  state: (): ApiState => ({
+    apiUrl: "",
+    commentUrl: "",
+    frontendUrl: "",
+    ftpUrl: "",
+    hlsUrl: "",
+    imageUrl: "",
+    keycloakUrl: "",
+    mediaUrl: "",
+    miniplayerUrl: "",
+    processorUrl: "",
+    radioUrl: "",
+    recoUrl: "",
+    rssUrl: "",
+    rtmpUrl: "",
+    speechToTextUrl: "",
+    studioUrl: "",
+    videoMakerUrl: "",
+    storageUrl: "",
+  }),
+  actions: {
+    initApis(initParam: ApiState) {
+      this.apiUrl = initParam.apiUrl;
+			this.commentUrl = initParam.commentUrl;
+			this.frontendUrl = initParam.frontendUrl;
+			this.ftpUrl = initParam.ftpUrl;
+			this.hlsUrl = initParam.hlsUrl;
+			this.imageUrl = initParam.imageUrl;
+			this.keycloakUrl = initParam.keycloakUrl;
+			this.mediaUrl = initParam.mediaUrl;
+			this.miniplayerUrl = initParam.miniplayerUrl;
+			this.processorUrl = initParam.processorUrl;
+			this.radioUrl = initParam.radioUrl;
+			this.recoUrl = initParam.recoUrl;
+			this.rssUrl = initParam.rssUrl;
+			this.rtmpUrl = initParam.rtmpUrl;
+			this.speechToTextUrl = initParam.speechToTextUrl;
+			this.studioUrl = initParam.studioUrl;
+			this.videoMakerUrl = initParam.videoMakerUrl;
+			this.storageUrl = initParam.storageUrl;
+    },
+  }
+})

package/src/stores/AuthStore.ts

@@ -0,0 +1,43 @@
+import { Organisation } from '@/stores/class/general/organisation';
+import { Profile } from '@/stores/class/user/profile';
+import { defineStore } from 'pinia';
+
+interface AuthState{
+	authName: string;
+  authOrgaId?: string;
+  authOrgaName?: string;
+  authRole: Array<string>;
+  authParam: {
+    accessToken?: string;
+    refreshToken?: string;
+    expiration?: Date;
+  };
+  authProfile: Profile;
+  authOrganisation: Organisation;
+}
+export const useAuthStore = defineStore('AuthStore', {
+  state: (): AuthState => ({
+    authName: '',
+    authRole: [''],
+    authParam: {
+      accessToken: undefined,
+      refreshToken: undefined,
+      expiration: undefined,
+    },
+    authProfile: {
+      userId: '',
+    },
+    authOrganisation: {
+      id: '',
+      name: '',
+      imageUrl: '',
+      description: undefined,
+      monetisable: undefined,
+      location: undefined,
+      comments: undefined,
+      attributes: {
+        RSS_CONTACT: undefined,
+      },
+    },
+  }),
+})

package/src/stores/CommentStore.ts

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+import { CommentPodcast } from './class/general/comment';
+interface CommentState {
+	commentInitialized: boolean;
+  commentWebsocketengine: undefined;
+  commentPodcastId?: number;
+  commentOrgaId?: string;
+  commentEventToHandle: Array<{
+    comment: CommentPodcast
+    type: string;
+  }>;
+  commentKnownIdentity: string | null;
+  commentActualPodcastId?: number;
+  commentLoaded: Array<CommentPodcast>;
+  commentTotalCount: number;
+}
+export const useCommentStore = defineStore('CommentStore', {
+  state: (): CommentState => ({
+    commentInitialized: false,
+    commentWebsocketengine: undefined,
+    commentPodcastId: undefined,
+    commentOrgaId: undefined,
+    commentEventToHandle: [],
+    commentKnownIdentity: null,
+    commentActualPodcastId: 0,
+    commentLoaded: [],
+    commentTotalCount: 0,
+  }),
+  getters:{
+  },
+  actions: {
+    setCommentIdentity(identity:string|null) {
+      this.commentKnownIdentity = identity;
+    },
+    setCommentLoaded(data: {podcastId?: number, comments:Array<CommentPodcast>}) {
+      this.commentActualPodcastId = data.podcastId;
+      this.commentLoaded = data.comments;
+    },
+  }
+})

package/src/stores/FilterStore.ts

@@ -0,0 +1,63 @@
+import { Category } from '@/stores/class/general/category';
+import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { defineStore } from 'pinia';
+
+interface FilterState{
+	filterOrgaId?: string;
+  filterImgUrl?: string;
+  filterName?: string;
+  filterRubriquage: Array<Rubriquage>;
+  filterRubrique: Array<RubriquageFilter>;
+  filterRubriqueDisplay: Array<Rubrique>;
+  filterTypeMedia?: string;
+  filterSortOrder?: string;
+  filterSortField?: string;
+  filterLive?: boolean;
+  filterIab?: Category;
+}
+export const useFilterStore = defineStore('FilterStore', {
+  state: (): FilterState => ({
+    filterRubriquage: [],
+    filterRubrique: [],
+    filterRubriqueDisplay: [],
+    filterLive: false,
+  }),
+  actions : {
+    filterUpdateOrga(filter: {orgaId?:string,imgUrl?:string,name?:string,rubriquageArray?:Array<Rubriquage>, isLive?:boolean }) {
+      this.filterOrgaId = filter.orgaId;
+      if (filter.imgUrl || !filter.orgaId) {
+        this.filterImgUrl = filter.imgUrl;
+      }
+      if (filter.name || !filter.orgaId) {
+        this.filterName = filter.name;
+      }
+      if(filter.rubriquageArray){
+        this.filterRubriquage = filter.rubriquageArray;
+      }
+      this.filterLive = filter.isLive;
+      this.filterIab = undefined;
+    },
+    filterUpdateIab(iab?:Category) {
+      this.filterIab = iab;
+    },
+    filterUpdateRubrique(rubriqueFilter: Array<RubriquageFilter>) {
+      this.filterRubrique = rubriqueFilter;
+    },
+    filterUpdateRubriqueDisplay(rubriques: Array<Rubrique>) {
+      this.filterRubriqueDisplay = rubriques;
+    },
+    filterUpdateMedia(filter: {type?:string, order?:string, field?:string}) {
+      if (filter.type) {
+        this.filterTypeMedia = filter.type;
+      }
+      if (filter.order) {
+        this.filterSortOrder = filter.order;
+      }
+      if (filter.field) {
+        this.filterSortField = filter.field;
+      }
+    },
+  }
+})