@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -13,15 +13,15 @@
     :next-available="nextAvailable"
     :no-rubriquage-id="noRubriquageId"
     :podcast-id="podcastId"
-    @sortChrono="sortChrono"
-    @sortPopular="sortPopular"
-    @displayPrevious="displayPrevious"
-    @displayNext="displayNext"
+    @sort-chrono="sortChrono"
+    @sort-popular="sortPopular"
+    @display-previous="displayPrevious"
+    @display-next="displayNext"
   >
     <template #list-inline>
       <ClassicLoading
         class="loading-size"
-        :loading-text="loading?$t('Loading podcasts ...'):undefined"
+        :loading-text="loading ? $t('Loading podcasts ...') : undefined"
       />
       <transition-group
         v-show="!loading"
@@ -47,44 +47,44 @@
 </template>
 
 <script lang="ts">
-import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
-import octopusApi from '@saooti/octopus-api';
-import domHelper from '../../../helper/dom';
-import PodcastItem from './PodcastItem.vue';
-import ClassicLoading from '../../form/ClassicLoading.vue';
+import PodcastInlineListTemplate from "./PodcastInlineListTemplate.vue";
+import octopusApi from "@saooti/octopus-api";
+import domHelper from "../../../helper/dom";
+import PodcastItem from "./PodcastItem.vue";
+import ClassicLoading from "../../form/ClassicLoading.vue";
 const PHONE_WIDTH = 960;
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { state } from '../../../stores/ParamSdkStore';
-import { Podcast } from '@/stores/class/general/podcast';
-import imageProxy from '../../mixins/imageProxy';
-import { defineComponent } from 'vue'
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { state } from "../../../stores/ParamSdkStore";
+import { Podcast } from "@/stores/class/general/podcast";
+import imageProxy from "../../mixins/imageProxy";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'PodcastInlineListClassic',
-  
+  name: "PodcastInlineListClassic",
+
   components: {
     PodcastItem,
     ClassicLoading,
-    PodcastInlineListTemplate
+    PodcastInlineListTemplate,
   },
-  mixins:[imageProxy],
+  mixins: [imageProxy],
   props: {
-    organisationId: { default:  () => [], type: Array as ()=> Array<string>},
-    emissionId: { default: undefined, type: Number},
-    iabId: { default: undefined, type: Number},
-    title: { default: '', type: String},
-    href: { default: undefined, type: String},
-    buttonText: { default: undefined, type: String},
-    isArrow: { default: false, type: Boolean},
-    requirePopularSort: { default:undefined, type: Boolean},
-    buttonPlus: { default:false, type: Boolean},
-    rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
-    rubriquageId:{ default: () => [], type: Array as ()=> Array<number> },
-    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
-    query: { default: undefined, type: String},
-    podcastId: { default: undefined, type: Number},
+    organisationId: { default: () => [], type: Array as () => Array<string> },
+    emissionId: { default: undefined, type: Number },
+    iabId: { default: undefined, type: Number },
+    title: { default: "", type: String },
+    href: { default: undefined, type: String },
+    buttonText: { default: undefined, type: String },
+    isArrow: { default: false, type: Boolean },
+    requirePopularSort: { default: undefined, type: Boolean },
+    buttonPlus: { default: false, type: Boolean },
+    rubriqueId: { default: () => [], type: Array as () => Array<number> },
+    rubriquageId: { default: () => [], type: Array as () => Array<number> },
+    noRubriquageId: { default: () => [], type: Array as () => Array<number> },
+    query: { default: undefined, type: String },
+    podcastId: { default: undefined, type: Number },
   },
-  emits: ['update:isArrow'],
+  emits: ["update:isArrow"],
 
   data() {
     return {
@@ -100,21 +100,23 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     podcasts(): Array<Podcast> {
       return this.allPodcasts.slice(this.index, this.index + this.size);
     },
     sizeItem(): number {
-      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13;
+      return state.generalParameters.podcastItem
+        ? state.generalParameters.podcastItem
+        : 13;
     },
     overflowScroll(): boolean {
-      return (state.emissionPage.overflowScroll as boolean);
+      return state.emissionPage.overflowScroll as boolean;
     },
     isInlineAnimation(): boolean {
-      return (state.generalParameters.isInlineAnimation as boolean);
+      return state.generalParameters.isInlineAnimation as boolean;
     },
     organisation(): Array<string> {
-      if(this.organisationId){
+      if (this.organisationId) {
         return this.organisationId;
       }
       return this.filterOrgaId ? [this.filterOrgaId] : [];
@@ -126,11 +128,11 @@ export default defineComponent({
       return this.index + this.size < this.totalCount;
     },
     transitionName(): string {
-      return this.direction > 0 ? 'out-left' : 'out-right';
+      return this.direction > 0 ? "out-left" : "out-right";
     },
-    watchVariable():string{
+    watchVariable(): string {
       return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
-    }
+    },
   },
   watch: {
     watchVariable(): void {
@@ -138,19 +140,19 @@ export default defineComponent({
       this.fetchNext();
     },
   },
-  
+
   created() {
     if (undefined !== this.requirePopularSort) {
       this.popularSort = this.requirePopularSort;
     }
     if (undefined !== this.isArrow) {
-      this.$emit('update:isArrow', true);
+      this.$emit("update:isArrow", true);
     }
-    window.addEventListener('resize', this.handleResize);
+    window.addEventListener("resize", this.handleResize);
   },
 
   unmounted() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener("resize", this.handleResize);
   },
 
   mounted() {
@@ -158,15 +160,20 @@ export default defineComponent({
     this.fetchNext();
   },
   methods: {
-    async fetchRecommendations(): Promise<void>{
+    async fetchRecommendations(): Promise<void> {
       try {
-        const podcastIdsArray = await octopusApi.fetchDataPublicWithParams<Array<number>>(13, 'get_predicts',{
+        const podcastIdsArray = await octopusApi.fetchDataPublicWithParams<
+          Array<number>
+        >(13, "get_predicts", {
           reco: this.podcastId,
           n_neightbors: 5,
-        }); 
+        });
         for (let podcastIdReco of podcastIdsArray) {
           try {
-            const entirePodcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+podcastIdReco); 
+            const entirePodcast = await octopusApi.fetchData<Podcast>(
+              0,
+              "podcast/" + podcastIdReco,
+            );
             this.allPodcasts.push(entirePodcast);
           } catch {
             //If doesn't exist, do nothing
@@ -175,38 +182,51 @@ export default defineComponent({
         this.totalCount = podcastIdsArray.length;
         this.loading = false;
       } catch {
-        this.allPodcasts=[];
+        this.allPodcasts = [];
         this.totalCount = 0;
       }
       this.loading = false;
     },
     async fetchNext(): Promise<void> {
-      if(this.podcastId){
+      if (this.podcastId) {
         return this.fetchRecommendations();
       }
-      const data =  await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
-         first: this.first,
-        size: this.size + 1,
-        organisationId: this.organisation,
-        emissionId: this.emissionId,
-        iabId: this.iabId,
-        rubriqueId: this.rubriqueId.length ?this.rubriqueId:undefined,
-        rubriquageId: this.rubriquageId.length ?this.rubriquageId : undefined,
-        noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
-        sort: this.popularSort ? 'POPULARITY' : 'DATE',
-        query: this.query,
-        includeStatus:["READY","PROCESSING"]
-      }, true);
+      const data = await octopusApi.fetchDataWithParams<{
+        count: number;
+        result: Array<Podcast>;
+        sort: string;
+      }>(
+        0,
+        "podcast/search",
+        {
+          first: this.first,
+          size: this.size + 1,
+          organisationId: this.organisation,
+          emissionId: this.emissionId,
+          iabId: this.iabId,
+          rubriqueId: this.rubriqueId.length ? this.rubriqueId : undefined,
+          rubriquageId: this.rubriquageId.length
+            ? this.rubriquageId
+            : undefined,
+          noRubriquageId: this.noRubriquageId.length
+            ? this.noRubriquageId
+            : undefined,
+          sort: this.popularSort ? "POPULARITY" : "DATE",
+          query: this.query,
+          includeStatus: ["READY", "PROCESSING"],
+        },
+        true,
+      );
       this.loading = false;
       this.totalCount = data.count;
       if (this.allPodcasts.length + data.result.length < this.totalCount) {
         const nexEl = data.result.pop() as Podcast;
-        if(nexEl){
-          this.preloadImage(nexEl.imageUrl?nexEl.imageUrl:'');
+        if (nexEl) {
+          this.preloadImage(nexEl.imageUrl ? nexEl.imageUrl : "");
         }
       }
       this.allPodcasts = this.allPodcasts.concat(
-        data.result.filter((pod: Podcast|null) => null !== pod)
+        data.result.filter((pod: Podcast | null) => null !== pod),
       );
       this.alignLeft = this.allPodcasts.length <= 3;
       this.first += this.size;
@@ -263,8 +283,8 @@ export default defineComponent({
     },
     preloadImage(url: string): void {
       const img = new Image();
-      img.src = this.proxyImageUrl(url,'330');
+      img.src = this.proxyImageUrl(url, "330");
     },
   },
-})
+});
 </script>

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

@@ -1,39 +1,28 @@
 <template>
-  <div
-    class="podcast-inline-container"
-  >
-    <div 
-      class="d-flex align-items-center"
-      :class="podcastId?'mb-4':'mb-2'"
-    >
+  <div class="podcast-inline-container">
+    <div class="d-flex align-items-center" :class="podcastId ? 'mb-4' : 'mb-2'">
       <h2 class="mb-0 big-h2">
         {{ title }}
       </h2>
     </div>
-    <div
-      v-if="!podcastId"
-      class="d-flex justify-content-between"
-    >
+    <div v-if="!podcastId" class="d-flex justify-content-between">
       <div class="d-flex">
         <button
           class="btn btn-underline"
           :class="{ active: !popularSort }"
           @click="sortChrono()"
         >
-          {{ $t('Last added') }}
+          {{ $t("Last added") }}
         </button>
         <button
           class="btn btn-underline"
           :class="{ active: popularSort }"
           @click="sortPopular()"
         >
-          {{ $t('Most popular') }}
+          {{ $t("Most popular") }}
         </button>
       </div>
-      <div
-        v-if="displayArrow"
-        class="hide-phone"
-      >
+      <div v-if="displayArrow" class="hide-phone">
         <button
           class="btn admin-button m-1 saooti-left"
           :class="{ disabled: !previousAvailable }"
@@ -56,122 +45,142 @@
       @click="handleSeeMoreButton"
     >
       {{ buttonText }}
-      <div
-        v-if="buttonPlus"
-        class="ms-1 saooti-more"
-      />
+      <div v-if="buttonPlus" class="ms-1 saooti-more" />
     </router-link>
   </div>
 </template>
 
 <script lang="ts">
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { defineComponent } from 'vue'
-import { RouteLocationRaw } from 'vue-router';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState, mapActions } from 'pinia';
-import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { defineComponent } from "vue";
+import { RouteLocationRaw } from "vue-router";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState, mapActions } from "pinia";
+import { Rubrique } from "@/stores/class/rubrique/rubrique";
 export default defineComponent({
-  name: 'PodcastInlineListTemplate',
-  
-  components: {
-  },
+  name: "PodcastInlineListTemplate",
+
+  components: {},
 
   props: {
-    displayArrow: { default: true, type: Boolean},
-    previousAvailable: { default: false, type: Boolean},
-    nextAvailable: { default: false, type: Boolean},
-    popularSort: { default: false, type: Boolean},
-    buttonText: { default: undefined, type: String},
-    buttonPlus: { default:false, type: Boolean},
-    title: { default: '', type: String},
-    href: { default: undefined, type: String},
-    iabId: { default: undefined, type: Number},
-    rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
-    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
-    podcastId: { default: undefined, type: Number},
+    displayArrow: { default: true, type: Boolean },
+    previousAvailable: { default: false, type: Boolean },
+    nextAvailable: { default: false, type: Boolean },
+    popularSort: { default: false, type: Boolean },
+    buttonText: { default: undefined, type: String },
+    buttonPlus: { default: false, type: Boolean },
+    title: { default: "", type: String },
+    href: { default: undefined, type: String },
+    iabId: { default: undefined, type: Number },
+    rubriqueId: { default: () => [], type: Array as () => Array<number> },
+    noRubriquageId: { default: () => [], type: Array as () => Array<number> },
+    podcastId: { default: undefined, type: Number },
   },
-  emits:['sortChrono','sortPopular', 'displayPrevious', 'displayNext'],
+  emits: ["sortChrono", "sortPopular", "displayPrevious", "displayNext"],
   data() {
-    return {
-    };
+    return {};
   },
 
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId', 'filterRubrique', 'filterIab', 'filterRubriquage']),
-    rubriqueQueryParam(): string|undefined{
-      if(this.filterRubrique?.length){
-        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+    ...mapState(useFilterStore, [
+      "filterOrgaId",
+      "filterRubrique",
+      "filterIab",
+      "filterRubriquage",
+    ]),
+    rubriqueQueryParam(): string | undefined {
+      if (this.filterRubrique?.length) {
+        return this.filterRubrique
+          .map(
+            (value: RubriquageFilter) =>
+              value.rubriquageId + ":" + value.rubriqueId,
+          )
+          .join();
       }
       return undefined;
     },
     refTo(): string | RouteLocationRaw {
       if (this.href) return this.href;
-      if(this.iabId){
+      if (this.iabId) {
         return {
-          name: 'category',
-          params:{ 'iabId': this.iabId },
+          name: "category",
+          params: { iabId: this.iabId },
           query: { productor: this.filterOrgaId },
         };
       }
       return {
-          name: 'podcasts',
-          query: { productor: this.filterOrgaId, 
-                  iabId:this.filterIab?.id,
-                  rubriquesId: this.rubriqueQueryParam },
-        };
+        name: "podcasts",
+        query: {
+          productor: this.filterOrgaId,
+          iabId: this.filterIab?.id,
+          rubriquesId: this.rubriqueQueryParam,
+        },
+      };
     },
   },
 
   methods: {
-    ...mapActions(useFilterStore, ['filterUpdateRubrique']),
-    sortChrono():void{
-      this.$emit('sortChrono');
+    ...mapActions(useFilterStore, ["filterUpdateRubrique"]),
+    sortChrono(): void {
+      this.$emit("sortChrono");
     },
-    sortPopular():void{
-      this.$emit('sortPopular');
+    sortPopular(): void {
+      this.$emit("sortPopular");
     },
-    displayPrevious():void{
-      this.$emit('displayPrevious');
+    displayPrevious(): void {
+      this.$emit("displayPrevious");
     },
-    displayNext():void{
-      this.$emit('displayNext');
+    displayNext(): void {
+      this.$emit("displayNext");
     },
-    handleSeeMoreButton(event: { preventDefault: () => void; }){
-      if(!this.rubriqueId || 0===this.rubriqueId.length || this.noRubriquageId.length){
+    handleSeeMoreButton(event: { preventDefault: () => void }) {
+      if (
+        !this.rubriqueId ||
+        0 === this.rubriqueId.length ||
+        this.noRubriquageId.length
+      ) {
         return;
       }
       event.preventDefault();
       const rubriqueChosenId = this.rubriqueId[this.rubriqueId.length - 1];
       let filterToAdd: RubriquageFilter = {
-        rubriquageId: 0, 
-        rubriqueId: rubriqueChosenId, 
-        nameRubriquage:  '',
-        nameRubrique: ''
+        rubriquageId: 0,
+        rubriqueId: rubriqueChosenId,
+        nameRubriquage: "",
+        nameRubrique: "",
       };
-      if(this.filterRubriquage.length){
+      if (this.filterRubriquage.length) {
         for (let i = 0, len = this.filterRubriquage.length; i < len; i++) {
-          const rubriqueChosen =  this.filterRubriquage[i].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
-          if(rubriqueChosen){
+          const rubriqueChosen = this.filterRubriquage[i].rubriques.find(
+            (element: Rubrique) => element.rubriqueId === rubriqueChosenId,
+          );
+          if (rubriqueChosen) {
             filterToAdd = {
-              rubriquageId: this.filterRubriquage[i].rubriquageId??0, 
-              rubriqueId: rubriqueChosenId, 
-              nameRubriquage:  this.filterRubriquage[i].title,
-              nameRubrique: rubriqueChosen.name
+              rubriquageId: this.filterRubriquage[i].rubriquageId ?? 0,
+              rubriqueId: rubriqueChosenId,
+              nameRubriquage: this.filterRubriquage[i].title,
+              nameRubrique: rubriqueChosen.name,
             };
             break;
           }
         }
       }
-      const newFilter: Array<RubriquageFilter> = Array.from(this.filterRubrique);
+      const newFilter: Array<RubriquageFilter> = Array.from(
+        this.filterRubrique,
+      );
       newFilter.push(filterToAdd);
       this.filterUpdateRubrique(newFilter);
       const queries = this.$route.query;
-      const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
-      this.$router.push({ name: 'podcasts',query: { ...queries, ...{ rubriquesId: queryString }} });
+      const queryString = newFilter
+        .map((value) => value.rubriquageId + ":" + value.rubriqueId)
+        .join();
+      this.$router.push({
+        name: "podcasts",
+        query: { ...queries, ...{ rubriquesId: queryString } },
+      });
     },
   },
-})
+});
 </script>
 <style lang="scss">
 .octopus-app .podcast-inline-container {
@@ -182,4 +191,4 @@ export default defineComponent({
     padding: 1rem 0;
   }
 }
-</style>
+</style>