@saooti/octopus-sdk 40.0.3 → 40.1.0

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -13,7 +13,7 @@
       </div>
       <div class="img-box">
         <img
-          v-lazy="proxyImageUrl(emission.imageUrl, '330')"
+          v-lazy="useProxyImageUrl(emission.imageUrl, '330')"
           width="330"
           height="330"
           role="presentation"
@@ -102,9 +102,8 @@ import classicApi from "../../../api/classicApi";
 import { Emission } from "@/stores/class/general/emission";
 import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
-import imageProxy from "../../mixins/imageProxy";
-import { orgaComputed } from "../../mixins/orgaComputed";
-import displayMethods from "../../mixins/displayMethods";
+import {useImageProxy} from "../../composable/useImageProxy";
+import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
@@ -120,12 +119,16 @@ export default defineComponent({
     PlayIcon,
     PauseIcon,
   },
-  mixins: [displayMethods, imageProxy, orgaComputed],
   props: {
     emission: { default: () => ({}), type: Object as () => Emission },
     nbPodcasts: { default: undefined, type: Number },
     rubriqueName: { default: undefined, type: String },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    const { isEditRights } = useOrgaComputed();
+    return { useProxyImageUrl, isEditRights }
+  },
 
   data() {
     return {

package/src/components/display/emission/EmissionPresentationItem.vue

@@ -13,7 +13,7 @@
       :class="isVertical ? 'flex-column' : ''"
     >
       <img
-        v-lazy="proxyImageUrl(emission.imageUrl, isVertical ? '400' : '250')"
+        v-lazy="useProxyImageUrl(emission.imageUrl, isVertical ? '400' : '250')"
         :width="isVertical ? '400' : '250'"
         :height="isVertical ? '400' : '250'"
         :class="isVertical ? 'img-box-bigger' : ''"
@@ -45,25 +45,29 @@
 
 <script lang="ts">
 import { useFilterStore } from "../../../stores/FilterStore";
-import resizePhone from "../../mixins/resizePhone";
+import {useResizePhone} from "../../composable/useResizePhone";
 import { Emission } from "@/stores/class/general/emission";
-import imageProxy from "../../mixins/imageProxy";
-import displayMethods from "../../mixins/displayMethods";
+import {useImageProxy} from "../../composable/useImageProxy";
+import displayHelper from "../../../helper/displayHelper";
 import { defineComponent } from "vue";
 import { mapState } from "pinia";
 export default defineComponent({
   name: "EmissionItem",
 
-  mixins: [displayMethods, imageProxy, resizePhone],
-
   props: {
     emission: { default: () => ({}), type: Object as () => Emission },
     isVertical: { default: false, type: Boolean },
     isDescription: { default: false, type: Boolean },
   },
+  setup(){
+    const { isPhone } = useResizePhone();
+    const { useProxyImageUrl } = useImageProxy();
+    return { isPhone, useProxyImageUrl }
+  },
+
+
   data() {
     return {
-      isPhone: false as boolean,
     };
   },
   computed: {
@@ -91,6 +95,11 @@ export default defineComponent({
       },
     },
   },
+  methods:{
+    urlify(text:string|undefined){
+      return displayHelper.urlify(text);
+    },
+  }
 });
 </script>
 <style lang="scss">

package/src/components/display/emission/EmissionPresentationList.vue

@@ -17,6 +17,7 @@
         <div
           v-if="allEmissions.length > 1"
           class="emission-column emission-column-margin d-flex-row flex-nowrap"
+          :class="allEmissions.length <= 3 ? 'flex-grow-1' : ''"
         >
           <EmissionItemPresentation
             v-if="allEmissions[1]"
@@ -58,13 +59,12 @@
 
 <script lang="ts">
 import classicApi from "../../../api/classicApi";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { Emission } from "@/stores/class/general/emission";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { AxiosError } from "axios";
-import imageProxy from "../../mixins/imageProxy";
-import resizePhone from "../../mixins/resizePhone";
+import {useResizePhone} from "../../composable/useResizePhone";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 const EmissionItemPresentation = defineAsyncComponent(
   () => import("./EmissionPresentationItem.vue"),
@@ -76,8 +76,6 @@ export default defineComponent({
     EmissionItemPresentation,
   },
 
-  mixins: [handle403, imageProxy, resizePhone],
-
   props: {
     organisationId: { default: undefined, type: String },
     title: { default: "", type: String },
@@ -86,13 +84,18 @@ export default defineComponent({
     isDescription: { default: false, type: Boolean },
     rubriquesId: { default: [], type: Array<number> },
   },
+
+  setup(){
+    const { isPhone } = useResizePhone();
+    const {handle403} = useErrorHandler();
+    return { isPhone, handle403 }
+  },
+
   data() {
     return {
       loading: true as boolean,
       error: false as boolean,
       allEmissions: [] as Array<Emission>,
-      isPhone: false as boolean,
-      windowWidth: 0 as number,
     };
   },
 

package/src/components/display/filter/AdvancedSearch.vue

@@ -81,10 +81,10 @@
 
 <script lang="ts">
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
-import { orgaComputed } from "../../mixins/orgaComputed";
+import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterParam";
+import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { mapState } from "pinia";
@@ -117,7 +117,6 @@ export default defineComponent({
     ChevronDownIcon,
     ClassicSelect
   },
-  mixins: [orgaComputed, rubriquesFilterParam],
   props: {
     organisationId: { default: undefined, type: String },
     isEmission: { default: false, type: Boolean },
@@ -147,6 +146,11 @@ export default defineComponent({
     "update:rubriqueFilter",
     "update:onlyVideo",
   ],
+  setup(){
+    const { isPodcastmaker, isEditRights } = useOrgaComputed();
+    const { stringifyRubriquesFilter,updateRouteParamAdvanced } = useRubriquesFilterParam();
+    return { isPodcastmaker, isEditRights, stringifyRubriquesFilter,updateRouteParamAdvanced  }
+  },
   data() {
     return {
       showFilters: false as boolean,
@@ -156,11 +160,10 @@ export default defineComponent({
 
   computed: {
     ...mapState(useGeneralStore, ["platformEducation"]),
-    ...mapState(useFilterStore, ["filterIab", "filterRubrique"]),
+    ...mapState(useFilterStore, ["filterOrgaId","filterIab", "filterRubrique"]),
     ...mapState(useAuthStore, [
       "isRoleProduction",
-      "isRoleContribution",
-      "isRoleAdmin",
+      "isRoleContribution"
     ]),
     organisationRight(): boolean {
       return this.isEditRights(this.organisationId);

package/src/components/display/filter/CategorySearchFilter.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script lang="ts">
-import { routeParams } from "../../mixins/routeParam/routeParams";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import CategoryChooser from "../categories/CategoryChooser.vue";
 import { defineComponent } from "vue";
@@ -25,7 +24,6 @@ export default defineComponent({
     CategoryChooser,
     ClassicCheckbox,
   },
-  mixins: [routeParams],
   props: {
     iabId: { default: undefined, type: Number },
   },

package/src/components/display/filter/ProductorSearch.vue

@@ -42,10 +42,10 @@
 </template>
 
 <script lang="ts">
-import { routeParams } from "../../mixins/routeParam/routeParams";
+import { useRouteUpdateParams } from "../../composable/route/useRouteUpdateParams";
 import ClassicSearch from "../../form/ClassicSearch.vue";
 import { state } from "../../../stores/ParamSdkStore";
-import orgaFilter from "../../mixins/organisationFilter";
+import { useOrganisationFilter } from "../../composable/useOrganisationFilter";
 import { Organisation } from "@/stores/class/general/organisation";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState, mapActions } from "pinia";
@@ -62,7 +62,6 @@ export default defineComponent({
     ClassicSearch,
     ClassicCheckbox,
   },
-  mixins: [orgaFilter, routeParams],
 
   props: {
     organisationId: { default: undefined, type: String },
@@ -71,6 +70,12 @@ export default defineComponent({
   },
   emits: ["update:organisationId", "update:searchPattern"],
 
+  setup(){
+    const { updateRouteParam } = useRouteUpdateParams();
+    const {selectOrganisation, removeSelectedOrga} = useOrganisationFilter();
+    return {updateRouteParam , selectOrganisation, removeSelectedOrga}
+  },
+
   data() {
     return {
       keepOrganisation: false as boolean,

package/src/components/display/filter/RubriqueFilter.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterParam";
+import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import classicApi from "../../../api/classicApi";
 import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
@@ -50,7 +50,6 @@ export default defineComponent({
     RubriqueChoice,
     ClassicCheckbox,
   },
-  mixins: [rubriquesFilterParam],
   props: {
     organisationId: { default: undefined, type: String },
     rubriqueFilter: {
@@ -60,6 +59,11 @@ export default defineComponent({
   },
   emits: ["update:rubriqueFilter", "warning"],
 
+  setup(){
+    const { stringifyRubriquesFilter } = useRubriquesFilterParam();
+    return { stringifyRubriquesFilter }
+  },
+
   data() {
     return {
       isRubriquage: false as boolean,

package/src/components/display/list/ListPaginate.vue

@@ -47,13 +47,13 @@
 
 <script lang="ts">
 import PlusIcon from "vue-material-design-icons/Plus.vue";
-import domHelper from "../../../helper/dom";
+import domHelper from "../../../helper/domHelper";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import PaginateParams from "./PaginateParams.vue";
 import PaginateSection from "./PaginateSection.vue";
-import resizePhone from "../../mixins/resizePhone";
-import { routeParams } from "../../mixins/routeParam/routeParams";
+import {useResizePhone} from "../../composable/useResizePhone";
+import { useRouteUpdateParams } from "../../composable/route/useRouteUpdateParams";
 import { defineComponent } from "vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState } from "pinia";
@@ -65,7 +65,6 @@ export default defineComponent({
     ClassicLoading,
     PlusIcon,
   },
-  mixins: [resizePhone, routeParams],
   props: {
     first: { default: 0, type: Number },
     rowsPerPage: { default: 30, type: Number },
@@ -81,10 +80,14 @@ export default defineComponent({
   },
 
   emits: ["update:first", "update:rowsPerPage", "update:isMobile"],
+
+  setup(){
+    const { isPhone, windowWidth } = useResizePhone();
+    const { updateRouteParam, updatePaginateSize } = useRouteUpdateParams();
+    return { isPhone, windowWidth, updateRouteParam, updatePaginateSize }
+  },
   data() {
     return {
-      isPhone: false as boolean,
-      windowWidth: 0 as number,
       internSizeChange: false as boolean,
     };
   },

package/src/components/display/list/SwiperList.vue

@@ -27,13 +27,13 @@
 </template>
 
 <script lang="ts">
-import domHelper from "../../../helper/dom";
+import domHelper from "../../../helper/domHelper";
 import { state } from "../../../stores/ParamSdkStore";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
-import resizePhone from "../../mixins/resizePhone";
+import {useResizePhone} from "../../composable/useResizePhone";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "SwiperList",
@@ -42,20 +42,21 @@ export default defineComponent({
     Swiper,
     SwiperSlide,
   },
-  mixins: [resizePhone],
 
   props: {
     listObject: { default: () => [], type: Array as () => Array<unknown> },
     sizeItemOverload: { default: undefined, type: Number },
   },
+  setup(){
+    const { isPhone, windowWidth } = useResizePhone();
+    return { isPhone, windowWidth }
+  },
 
   data() {
     return {
       manualReload: 0 as number,
       modules: [Navigation],
       numberItem: 5 as number,
-      isPhone: false as boolean,
-      windowWidth: 0 as number,
       offsetSwiper: 40 as number,
       widthSwiperUsable: 0 as number,
       itemSizeWithoutRecalculed: 0 as number,

package/src/components/display/live/CountDown.vue

@@ -3,12 +3,7 @@
     <div>{{ $t("This live will start") }}</div>
     <div v-if="countdownTimer">
       {{
-        $t("In days hours minutes seconds", {
-          days: pad(days),
-          hours: pad(hours),
-          minutes: pad(minutes),
-          seconds: pad(remainingSeconds),
-        })
+        $t("In days hours minutes seconds",countdownValues)
       }}
     </div>
     <div v-else>
@@ -17,13 +12,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import countdown from "../../mixins/podcast/countdown";
-import { defineComponent } from "vue";
-export default defineComponent({
-  mixins: [countdown],
-  props: {
-    timeRemaining: { default: undefined, type: Number },
-  },
-});
+<script lang="ts" setup>
+  import {useCountdown} from "../../composable/podcasts/useCountdown";
+  const props = defineProps({
+    timeRemaining:{ default: undefined, type: Number },
+  })
+  const { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);
 </script>

package/src/components/display/live/CountdownOctopus.vue

@@ -8,17 +8,12 @@
       <div class="mouth" />
     </div>
     <div class="thought">
-      <template v-if="!overrideText">
+      <template v-if="!props.overrideText">
         {{ $t("This live will start") }}
         <span class="text-lowercase">
           <template v-if="countdownTimer">
             {{
-              $t("In days hours minutes seconds", {
-                days: pad(days),
-                hours: pad(hours),
-                minutes: pad(minutes),
-                seconds: pad(remainingSeconds),
-              })
+              $t("In days hours minutes seconds", countdownValues)
             }}
           </template>
           <template v-else>
@@ -27,35 +22,20 @@
         </span>
       </template>
       <template v-else>
-        {{ overrideText }}
+        {{ props.overrideText }}
       </template>
     </div>
   </div>
 </template>
-
-<script lang="ts">
-import countdown from "../../mixins/podcast/countdown";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "CountdownOctopus",
-  mixins: [countdown],
-  props: {
-    timeRemaining: { default: undefined, type: Number },
+<script lang="ts" setup>
+  import {useCountdown} from "../../composable/podcasts/useCountdown";
+  const props = defineProps({
+    timeRemaining:{ default: undefined, type: Number },
     overrideText: { default: undefined, type: String },
-  },
-  data() {
-    return {
-      seconds: 0 as number,
-      countdownTimer: undefined as ReturnType<typeof setTimeout> | undefined,
-      days: 0 as number,
-      hours: 0 as number,
-      minutes: 0 as number,
-      remainingSeconds: 0 as number,
-    };
-  },
-});
+  })
+  const { countdownValues, countdownTimer } = useCountdown(props.timeRemaining);
 </script>
+
 <style lang="scss">
 
 .octopus-app .cute-octopus {

package/src/components/display/live/LiveItem.vue

@@ -9,7 +9,6 @@
 <script lang="ts">
 import classicApi from "../../../api/classicApi";
 import PodcastItem from "../podcasts/PodcastItem.vue";
-import displayMethods from "../../mixins/displayMethods";
 import { Podcast } from "@/stores/class/general/podcast";
 import { defineComponent } from "vue";
 import {
@@ -22,7 +21,6 @@ export default defineComponent({
   components: {
     PodcastItem,
   },
-  mixins: [displayMethods],
   props: {
     fetchConference: { default: undefined, type: Object as () => Conference },
   },

package/src/components/display/live/LiveList.vue

@@ -47,10 +47,11 @@ import ClassicLoading from "../../form/ClassicLoading.vue";
 import LiveItem from "./LiveItem.vue";
 import ClassicSelect from "../../form/ClassicSelect.vue";
 import SwiperList from "../list/SwiperList.vue";
-import { handle403 } from "../../mixins/handle403";
-import { orgaComputed } from "../../mixins/orgaComputed";
+import {useErrorHandler} from "../../composable/useErrorHandler";
+import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import classicApi from "../../../api/classicApi";
 import { useAuthStore } from "../../../stores/AuthStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { mapActions, mapState } from "pinia";
 import { Conference } from "@/stores/class/conference/conference";
 import { defineComponent } from "vue";
@@ -65,12 +66,15 @@ export default defineComponent({
     ClassicSelect,
   },
 
-  mixins: [handle403, orgaComputed],
-
   props: {
     organisationId: { default: undefined, type: String },
     hideIfEmpty: { default: false, type: Boolean },
   },
+  setup(){
+    const { isPodcastmaker, isEditRights } = useOrgaComputed();
+    const {handle403} = useErrorHandler();
+    return { isPodcastmaker, isEditRights, handle403 }
+  },
   data() {
     return {
       loading: true as boolean,
@@ -85,6 +89,7 @@ export default defineComponent({
 
   computed: {
     ...mapState(useAuthStore, ["authOrganisation", "isRoleLive"]),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     displayLiveList(): boolean {
       return (
         (undefined !== this.filterOrgaId ||

package/src/components/display/live/RadioCurrently.vue

@@ -16,7 +16,7 @@
       :title="$t('Episode name page', { name: podcastRadio.title })"
     >
       <img
-        v-lazy="proxyImageUrl(podcastRadio.imageUrl, '80')"
+        v-lazy="useProxyImageUrl(podcastRadio.imageUrl, '80')"
         width="80"
         height="80"
         class="small-img-box"
@@ -33,10 +33,10 @@
 </template>
 
 <script lang="ts">
+import {useFetchRadio} from "../../composable/radio/usefetchRadioData";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapState } from "pinia";
-import imageProxy from "../../mixins/imageProxy";
-import { fetchRadioData } from "../../mixins/radio/fetchRadioData";
+import {useImageProxy} from "../../composable/useImageProxy";
 import { defineComponent } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
 import { MediaRadio } from "@/stores/class/general/player";
@@ -46,11 +46,15 @@ export default defineComponent({
 
   components: {},
 
-  mixins: [imageProxy, fetchRadioData],
-
   props: {
     radio: { default: undefined, type: Object as () => Canal },
   },
+  setup(){
+    const { fetchRadioMetadata, displayTitle } = useFetchRadio();
+    const { useProxyImageUrl } = useImageProxy();
+    return { fetchRadioMetadata, displayTitle, useProxyImageUrl };
+  },
+
 
   data() {
     return {

package/src/components/display/live/RadioImage.vue

@@ -5,7 +5,7 @@
     <img
       v-lazy="
         radio.imageUrl
-          ? proxyImageUrl(radio.imageUrl, '270')
+          ? useProxyImageUrl(radio.imageUrl, '270')
           : '/img/emptyradio.webp'
       "
       width="270"
@@ -30,7 +30,7 @@ import PlayIcon from "vue-material-design-icons/Play.vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState, mapActions } from "pinia";
-import imageProxy from "../../mixins/imageProxy";
+import {useImageProxy} from "../../composable/useImageProxy";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
 const PodcastIsPlaying = defineAsyncComponent(() => import("../podcasts/PodcastIsPlaying.vue"));
@@ -42,11 +42,13 @@ export default defineComponent({
     PodcastIsPlaying
   },
 
-  mixins: [imageProxy],
-
   props: {
     radio: { default: undefined, type: Object as () => Canal },
   },
+  setup(){
+    const { useProxyImageUrl } = useImageProxy();
+    return { useProxyImageUrl }
+  },
 
   computed: {
     ...mapState(usePlayerStore, ["playerRadio", "playerStatus"]),

package/src/components/display/live/RadioItem.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import imageProxy from "../../mixins/imageProxy";
+
 import RadioImage from "./RadioImage.vue";
 import RadioCurrently from "./RadioCurrently.vue";
 import { defineComponent } from "vue";
@@ -33,7 +33,6 @@ export default defineComponent({
     RadioCurrently,
     RadioImage,
   },
-  mixins: [imageProxy],
 
   props: {
     radio: { default: undefined, type: Object as () => Canal },

package/src/components/display/live/RadioList.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import RadioItem from "./RadioItem.vue";
-import { handle403 } from "../../mixins/handle403";
+import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { mapState } from "pinia";
@@ -31,11 +31,13 @@ export default defineComponent({
     RadioItem,
   },
 
-  mixins: [handle403],
-
   props: {
     organisationId: { default: undefined, type: String },
   },
+  setup(){
+    const {handle403} = useErrorHandler();
+    return { handle403 }
+  },
   data() {
     return {
       radio: [] as Array<Canal>,