@saooti/octopus-sdk 40.0.3 → 40.1.0

package/src/components/pages/EmissionsPage.vue

@@ -37,33 +37,41 @@
   </section>
 </template>
 
-<script lang="ts">
-import { advancedParamInit } from "../mixins/routeParam/advancedParamInit";
+<script setup lang="ts">
 import EmissionList from "../display/emission/EmissionList.vue";
 import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
-import { defineComponent, defineAsyncComponent } from "vue";
+import {useAdvancedParamInit} from "../composable/route/useAdvancedParamInit";
+import { defineAsyncComponent } from "vue";
 const ProductorSearch = defineAsyncComponent(
   () => import("../display/filter/ProductorSearch.vue"),
 );
-export default defineComponent({
-  components: {
-    ProductorSearch,
-    EmissionList,
-    AdvancedSearch,
-  },
-  mixins: [advancedParamInit],
-  props: {
-    pr: { default: 0, type: Number },
-    ps: { default: 30, type: Number },
-    routeQuery: { default: "", type: String },
-    routeMonetisable: { default: "UNDEFINED", type: String },
-    routeIab: { default: undefined, type: Number },
-    routeSort: { default: "LAST_PODCAST_DESC", type: String },
-    routeIncludeHidden: { default: "", type: String },
-    routeFrom: { default: undefined, type: String },
-    routeTo: { default: undefined, type: String },
-    routeOrga: { default: undefined, type: String },
-    routeRubriques: { default: "", type: String },
-  },
+
+const props = defineProps({
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeQuery: { default: "", type: String },
+  routeMonetisable: { default: "UNDEFINED", type: String },
+  routeIab: { default: undefined, type: Number },
+  routeSort: { default: "LAST_PODCAST_DESC", type: String },
+  routeIncludeHidden: { default: "", type: String },
+  routeFrom: { default: undefined, type: String },
+  routeTo: { default: undefined, type: String },
+  routeOrga: { default: undefined, type: String },
+  routeRubriques: { default: "", type: String },
 });
+
+const {
+  organisationId,
+  searchPattern,
+  monetisable,
+  iabId,
+  sort,
+  includeHidden,
+  fromDate,
+  toDate,
+  rubriqueFilter,
+  searchMinSize,
+  paginateFirst,
+  rubriquesFilterArrayIds
+} = useAdvancedParamInit(props, true);
 </script>

package/src/components/pages/HomePage.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts">
-import { rubriquesFilterComputed } from "../mixins/routeParam/rubriquesFilterComputed";
+import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
 import ClassicLazy from "../misc/ClassicLazy.vue";
 import { state } from "../../stores/ParamSdkStore";
@@ -82,12 +82,15 @@ export default defineComponent({
     PodcastInlineList,
     ClassicLazy,
   },
-  mixins: [rubriquesFilterComputed],
   props: {
     displayWithoutRubriques: { default: true, type: Boolean },
     rubriqueMorePath: { default: undefined, type: String },
   },
   emits: ["categoriesLength"],
+  setup(){
+    const { rubriqueQueryParam } = useRubriquesFilterComputed();
+    return { rubriqueQueryParam }
+  },
   data() {
     return {
       rubriqueId: [] as Array<number>,

package/src/components/pages/PageLogout.vue

@@ -10,13 +10,11 @@
 </template>
 
 <script lang="ts">
-import { rubriquesFilterComputed } from "../mixins/routeParam/rubriquesFilterComputed";
 import { useFilterStore } from "../../stores/FilterStore";
 import { mapState } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PageNotFound",
-  mixins: [rubriquesFilterComputed],
   computed: {
     ...mapState(useFilterStore, ["filterIab"]),
   },

package/src/components/pages/PageNotFound.vue

@@ -11,7 +11,7 @@
         :to="{
           name: 'home',
           query: {
-            iabId: filterIab?.id,
+            iabId: filterStore.filterIab?.id,
             rubriquesId: rubriqueQueryParam,
           },
         }"
@@ -22,21 +22,17 @@
   </section>
 </template>
 
-<script lang="ts">
-import { rubriquesFilterComputed } from "../mixins/routeParam/rubriquesFilterComputed";
+<script setup lang="ts">
+import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import { useFilterStore } from "../../stores/FilterStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PageNotFound",
-  mixins: [rubriquesFilterComputed],
-  computed: {
-    ...mapState(useFilterStore, ["filterIab"]),
-    backgroundStyle(): string {
-      return "background-image: url('/img/404.svg');";
-    },
-  },
-});
+import { computed } from "vue";
+
+const { rubriqueQueryParam } = useRubriquesFilterComputed();
+
+const filterStore = useFilterStore();
+
+const backgroundStyle = computed(() => "background-image: url('/img/404.svg');");
+
 </script>
 <style lang="scss">
 .octopus-app .page-not-found {

package/src/components/pages/ParticipantPage.vue

@@ -6,7 +6,7 @@
       </h1>
       <section class="d-flex flex-column align-items-center mb-3">
         <img
-          v-lazy="proxyImageUrl(participant.imageUrl, '200')"
+          v-lazy="useProxyImageUrl(participant.imageUrl, '200')"
           width="200"
           height="200"
           role="presentation"
@@ -57,11 +57,12 @@
 import classicApi from "../../api/classicApi";
 import { state } from "../../stores/ParamSdkStore";
 import { useApiStore } from "../../stores/ApiStore";
-import displayMethods from "../mixins/displayMethods";
-import { seoTitleUrl } from "../mixins/seoTitleUrl";
-import imageProxy from "../mixins/imageProxy";
-import { orgaComputed } from "../mixins/orgaComputed";
-import { handle403 } from "../mixins/handle403";
+import { useFilterStore } from "../../stores/FilterStore";
+import displayHelper from "../../helper/displayHelper";
+import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
+import {useImageProxy} from "../composable/useImageProxy";
+import {useOrgaComputed} from "../composable/useOrgaComputed";
+import {useErrorHandler} from "../composable/useErrorHandler";
 import { Participant } from "@/stores/class/general/participant";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import { defineComponent, defineAsyncComponent } from "vue";
@@ -83,10 +84,16 @@ export default defineComponent({
     EditBox,
     ClassicLoading,
   },
-  mixins: [displayMethods, handle403, orgaComputed, imageProxy, seoTitleUrl],
   props: {
     participantId: { default: undefined, type: Number },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    const {  isEditRights } = useOrgaComputed();
+    const { updatePathParams } = useSeoTitleUrl();
+    const {handle403} = useErrorHandler();
+    return { useProxyImageUrl, isEditRights, updatePathParams, handle403 }
+  },
   data() {
     return {
       loaded: false as boolean,
@@ -96,6 +103,7 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     ...mapState(useApiStore, ["apiUrl"]),
     pageParameters() {
       return {
@@ -133,6 +141,9 @@ export default defineComponent({
     },
   },
   methods: {
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
     initError(): void {
       this.error = true;
       this.loaded = true;

package/src/components/pages/ParticipantsPage.vue

@@ -15,28 +15,23 @@
   </section>
 </template>
 
-<script lang="ts">
-import { paginateParamInit } from "../mixins/routeParam/paginateParamInit";
+<script setup lang="ts">
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 import ParticipantList from "../display/participant/ParticipantList.vue";
 import ProductorSearch from "../display/filter/ProductorSearch.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    ProductorSearch,
-    ParticipantList,
-  },
-  mixins: [paginateParamInit],
-  props: {
-    pr: { default: 0, type: Number },
-    ps: { default: 30, type: Number },
-    routeOrga: { default: undefined, type: String },
-    routeQuery: { default: "", type: String },
-  },
-  data() {
-    return {
-      searchPattern: "" as string,
-      organisationId: undefined as string | undefined,
-    };
-  },
+
+const props = defineProps({
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeOrga: { default: undefined, type: String },
+  routeQuery: { default: "", type: String },
 });
+
+const {
+  searchPattern,
+  organisationId,
+  searchMinSize,
+  paginateFirst,
+} = useSimplePageParam(props);
+
 </script>

package/src/components/pages/PlaylistPage.vue

@@ -13,7 +13,7 @@
         <section class="module-box">
           <div class="mb-5 mt-3 description-text">
             <img
-              v-lazy="proxyImageUrl(playlist.imageUrl, '250')"
+              v-lazy="useProxyImageUrl(playlist.imageUrl, '250')"
               width="250"
               height="250"
               role="presentation"
@@ -54,15 +54,16 @@
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useAuthStore } from "../../stores/AuthStore";
 import { mapActions, mapState } from "pinia";
-import { orgaComputed } from "../mixins/orgaComputed";
-import { seoTitleUrl } from "../mixins/seoTitleUrl";
+import {useOrgaComputed} from "../composable/useOrgaComputed";
+import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import PodcastList from "../display/playlist/PodcastList.vue";
 import classicApi from "../../api/classicApi";
+import { useFilterStore } from "../../stores/FilterStore";
 import { state } from "../../stores/ParamSdkStore";
-import displayMethods from "../mixins/displayMethods";
-import imageProxy from "../mixins/imageProxy";
-import { handle403 } from "../mixins/handle403";
+import displayHelper from "../../helper/displayHelper";
+import {useImageProxy} from "../composable/useImageProxy";
+import {useErrorHandler} from "../composable/useErrorHandler";
 import { Playlist } from "@/stores/class/general/playlist";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { AxiosError } from "axios";
@@ -87,11 +88,17 @@ export default defineComponent({
     ClassicLoading,
     PodcastmakerHeader,
   },
-  mixins: [displayMethods, handle403, orgaComputed, imageProxy, seoTitleUrl],
 
   props: {
     playlistId: { default: undefined, type: Number },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
+    const { updatePathParams } = useSeoTitleUrl();
+    const {handle403} = useErrorHandler();
+    return { useProxyImageUrl, isPodcastmaker, isEditRights, authOrgaId, updatePathParams, handle403 }
+  },
   data() {
     return {
       loaded: false as boolean,
@@ -100,6 +107,7 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     ...mapState(useAuthStore, ["isRolePlaylists"]),
     pageParameters() {
       return {
@@ -144,6 +152,9 @@ export default defineComponent({
 
   methods: {
     ...mapActions(useGeneralStore, ["contentToDisplayUpdate"]),
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
     initError(): void {
       this.error = true;
       this.loaded = true;

package/src/components/pages/PlaylistsPage.vue

@@ -24,41 +24,32 @@
   </section>
 </template>
 
-<script lang="ts">
-import { paginateParamInit } from "../mixins/routeParam/paginateParamInit";
+<script setup lang="ts">
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 import PlaylistList from "../display/playlist/PlaylistList.vue";
 import { useAuthStore } from "../../stores/AuthStore";
 import { state } from "../../stores/ParamSdkStore";
-import { defineComponent, defineAsyncComponent } from "vue";
-import { mapState } from "pinia";
+import {  computed, defineAsyncComponent } from "vue";
 const ProductorSearch = defineAsyncComponent(
   () => import("../display/filter/ProductorSearch.vue"),
 );
-export default defineComponent({
-  components: {
-    ProductorSearch,
-    PlaylistList,
-  },
-  mixins: [paginateParamInit],
-  props: {
-    pr: { default: 0, type: Number },
-    ps: { default: 30, type: Number },
-    routeOrga: { default: undefined, type: String },
-    routeQuery: { default: "", type: String },
-  },
+const props = defineProps({
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeOrga: { default: undefined, type: String },
+  routeQuery: { default: "", type: String },
+});
 
-  data() {
-    return {
-      searchPattern: "" as string,
-      organisationId: undefined as string | undefined,
-    };
-  },
+const {
+  searchPattern,
+  organisationId,
+  searchMinSize,
+  paginateFirst,
+} = useSimplePageParam(props);
+
+const authStore = useAuthStore();
+
+const isPodcastmaker = computed(() =>state.generalParameters.podcastmaker as boolean);
+const isRolePlaylists = computed(() =>authStore.isRolePlaylists);
 
-  computed: {
-    ...mapState(useAuthStore, ["isRolePlaylists"]),
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
-    },
-  },
-});
 </script>

package/src/components/pages/PodcastPage.vue

@@ -74,21 +74,21 @@
 </template>
 
 <script lang="ts">
-import imageProxy from "../mixins/imageProxy";
-import { orgaComputed } from "../mixins/orgaComputed";
+import {useOrgaComputed} from "../composable/useOrgaComputed";
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
 import PodcastModuleBox from "../display/podcasts/PodcastModuleBox.vue";
 import ClassicLazy from "../misc/ClassicLazy.vue";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import classicApi from "../../api/classicApi";
 import { state } from "../../stores/ParamSdkStore";
+import { useFilterStore } from "../../stores/FilterStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import {
   Conference,
   ConferencePublicInfo,
 } from "@/stores/class/conference/conference";
-import { handle403 } from "../mixins/handle403";
-import { seoTitleUrl } from "../mixins/seoTitleUrl";
+import {useErrorHandler} from "../composable/useErrorHandler";
+import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { Category } from "@/stores/class/general/category";
 import { useAuthStore } from "../../stores/AuthStore";
@@ -121,14 +121,19 @@ export default defineComponent({
     PodcastmakerHeader,
   },
 
-  mixins: [handle403, orgaComputed, imageProxy, seoTitleUrl],
-
   props: {
     updateStatus: { default: undefined, type: String },
     playingPodcast: { default: undefined, type: Object as () => Podcast },
     podcastId: { default: 0, type: Number },
   },
 
+  setup(){
+    const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
+    const { updatePathParams } = useSeoTitleUrl();
+    const {handle403} = useErrorHandler();
+    return { isPodcastmaker, isEditRights, authOrgaId, updatePathParams, handle403 }
+  },
+
   data() {
     return {
       loaded: false as boolean,
@@ -142,6 +147,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     ...mapState(useAuthStore, ["isRoleLive"]),
     ...mapState(useGeneralStore, ["storedCategories"]),
     hideSuggestions(): boolean {

package/src/components/pages/PodcastsPage.vue

@@ -38,56 +38,54 @@
     />
   </section>
 </template>
-
-<script lang="ts">
-import { advancedParamInit } from "../mixins/routeParam/advancedParamInit";
+<script setup lang="ts">
 import PodcastList from "../display/podcasts/PodcastList.vue";
 import ProductorSearch from "../display/filter/ProductorSearch.vue";
 import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PodcastsPage",
-  components: {
-    PodcastList,
-    ProductorSearch,
-    AdvancedSearch,
-  },
-  mixins: [advancedParamInit],
-  props: {
-    pr: { default: 0, type: Number },
-    ps: { default: 30, type: Number },
-    routeQuery: { default: "", type: String },
-    routeMonetisable: { default: "UNDEFINED", type: String },
-    routeIab: { default: undefined, type: Number },
-    routeSort: { default: "DATE", type: String },
-    routeIncludeHidden: { default: "", type: String },
-    routeFrom: { default: undefined, type: String },
-    routeTo: { default: undefined, type: String },
-    routeValidity: { default: "", type: String },
-    routeOnlyVideo: { default: "", type: String },
-    routeOrga: { default: undefined, type: String },
-    routeRubriques: { default: "", type: String },
-  },
-  data() {
-    return {
-      onlyVideo: false as boolean,
-    };
-  },
-  computed: {
-    orgaArray(): Array<string> {
-      return this.organisationId ? [this.organisationId] : [];
-    },
-    withVideo(): boolean | undefined {
-      return false === this.onlyVideo ? undefined : true;
-    },
-  },
-  watch: {
-    routeOnlyVideo: {
-      immediate: true,
-      handler() {
-        this.onlyVideo = "true" === this.routeOnlyVideo;
-      },
-    },
-  },
+import {useAdvancedParamInit} from "../composable/route/useAdvancedParamInit";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps({
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeQuery: { default: "", type: String },
+  routeMonetisable: { default: "UNDEFINED", type: String },
+  routeIab: { default: undefined, type: Number },
+  routeSort: { default: "DATE", type: String },
+  routeIncludeHidden: { default: "", type: String },
+  routeFrom: { default: undefined, type: String },
+  routeTo: { default: undefined, type: String },
+  routeValidity: { default: "", type: String },
+  routeOnlyVideo: { default: "", type: String },
+  routeOrga: { default: undefined, type: String },
+  routeRubriques: { default: "", type: String },
 });
+
+const {
+  organisationId,
+  searchPattern,
+  monetisable,
+  iabId,
+  sort,
+  includeHidden,
+  fromDate,
+  toDate,
+  rubriqueFilter,
+  searchMinSize,
+  paginateFirst,
+  validity,
+  rubriquesFilterArrayIds
+} = useAdvancedParamInit(props, false);
+
+const onlyVideo = ref(false);
+
+
+const orgaArray = computed(() => organisationId.value ? [organisationId.value] : []);
+const withVideo = computed(() => false === onlyVideo.value ? undefined : true);
+
+
+watch(() => props.routeOnlyVideo, () =>{
+  onlyVideo.value = "true" === props.routeOnlyVideo;
+}, {immediate: true});
+
 </script>

package/src/components/pages/RadioPage.vue

@@ -42,11 +42,9 @@
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { mapActions, mapState } from "pinia";
 import classicApi from "../../api/classicApi";
-import displayMethods from "../mixins/displayMethods";
-import { seoTitleUrl } from "../mixins/seoTitleUrl";
-import imageProxy from "../mixins/imageProxy";
-import { orgaComputed } from "../mixins/orgaComputed";
-import { handle403 } from "../mixins/handle403";
+import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
+import {useOrgaComputed} from "../composable/useOrgaComputed";
+import {useErrorHandler} from "../composable/useErrorHandler";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { AxiosError } from "axios";
@@ -84,10 +82,15 @@ export default defineComponent({
     RadioPlanning,
     PodcastmakerHeader,
   },
-  mixins: [displayMethods, handle403, orgaComputed, imageProxy, seoTitleUrl],
   props: {
     canalId: { default: undefined, type: Number },
   },
+  setup(){
+    const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
+    const { updatePathParams } = useSeoTitleUrl();
+    const {handle403} = useErrorHandler();
+    return { isPodcastmaker, isEditRights, authOrgaId, updatePathParams, handle403}
+  },
   data() {
     return {
       loaded: false as boolean,