@saooti/octopus-sdk 37.0.5 → 37.0.7

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="isProgressBar"
-    class="d-flex align-items-center podcast-play-bar"
-  >
+  <div v-if="isProgressBar" class="d-flex align-items-center podcast-play-bar">
     <div class="me-2">
       {{ playedTime }}
     </div>
@@ -20,57 +17,73 @@
 </template>
 
 <script lang="ts">
-import ProgressBar from '../../misc/ProgressBar.vue';
-import DurationHelper from '../../../helper/duration';
-import displayMethods from '../../mixins/displayMethods';
-import { state } from '../../../stores/ParamSdkStore';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue'
+import ProgressBar from "../../misc/ProgressBar.vue";
+import DurationHelper from "../../../helper/duration";
+import displayMethods from "../../mixins/displayMethods";
+import { state } from "../../../stores/ParamSdkStore";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'PodcastPlayBar',
-  components:{
-    ProgressBar
+  name: "PodcastPlayBar",
+  components: {
+    ProgressBar,
   },
   mixins: [displayMethods],
   props: {
-    podcastId: { default: undefined, type: Number},
-    duration: { default: 0, type: Number},
+    podcastId: { default: undefined, type: Number },
+    duration: { default: 0, type: Number },
   },
   computed: {
-    ...mapState(usePlayerStore, ['playerPodcast', 'playerElapsed', 'playerTotal']),
-    isProgressBar(): boolean{
-      return (state.emissionsPage.progressBar as boolean);
+    ...mapState(usePlayerStore, [
+      "playerPodcast",
+      "playerElapsed",
+      "playerTotal",
+    ]),
+    isProgressBar(): boolean {
+      return state.emissionsPage.progressBar as boolean;
     },
-    percentProgress(): number{
-      if(this.podcastId !== this.playerPodcast?.podcastId){
+    percentProgress(): number {
+      if (this.podcastId !== this.playerPodcast?.podcastId) {
         return 0;
       }
       return !this.playerElapsed ? 0 : this.playerElapsed * 100;
     },
-    playedTime(): string{
-      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));
+    playedTime(): string {
+      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';
+      return "00:00";
     },
     totalTime(): string {
-      return DurationHelper.formatDuration(Math.round(this.duration/1000));
+      return DurationHelper.formatDuration(Math.round(this.duration / 1000));
     },
   },
   methods: {
-    ...mapActions(usePlayerStore, ['playerUpdateSeekTime']),
+    ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
     seekTo(event: MouseEvent): void {
-      if(!this.playerPodcast || this.podcastId !== this.playerPodcast.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;
       this.playerUpdateSeekTime(this.playerTotal * percentPosition);
-    }
+    },
   },
-})
-</script>
+});
+</script>

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

@@ -10,19 +10,16 @@
     :iab-id="iabId"
     :rubrique-id="rubriqueId"
     :no-rubriquage-id="noRubriquageId"
-    @sortChrono="sortChrono"
-    @sortPopular="sortPopular"
+    @sort-chrono="sortChrono"
+    @sort-popular="sortPopular"
   >
     <template #list-inline>
       <ClassicLoading
         class="loading-size"
-        :loading-text="loading?$t('Loading podcasts ...'):undefined"
+        :loading-text="loading ? $t('Loading podcasts ...') : undefined"
       />
-      <SwiperList
-        v-if="!loading"
-        :list-object="allPodcasts"
-      >
-        <template #octopusSlide="{option}">
+      <SwiperList v-if="!loading" :list-object="allPodcasts">
+        <template #octopusSlide="{ option }">
           <PodcastItem
             class="flex-shrink-0 item-phone-margin"
             :podcast="option"
@@ -34,41 +31,41 @@
 </template>
 
 <script lang="ts">
-import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
-import octopusApi from '@saooti/octopus-api';
-import PodcastItem from './PodcastItem.vue';
-import ClassicLoading from '../../form/ClassicLoading.vue';
-import SwiperList from '../list/SwiperList.vue';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { Podcast } from '@/stores/class/general/podcast';
-import { defineComponent } from 'vue'
+import PodcastInlineListTemplate from "./PodcastInlineListTemplate.vue";
+import octopusApi from "@saooti/octopus-api";
+import PodcastItem from "./PodcastItem.vue";
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import SwiperList from "../list/SwiperList.vue";
+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',
-  
+  name: "PodcastSwiperList",
+
   components: {
     PodcastInlineListTemplate,
     PodcastItem,
     ClassicLoading,
-    SwiperList
+    SwiperList,
   },
 
   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},
+    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 },
   },
-  emits: ['update:isArrow'],
+  emits: ["update:isArrow"],
 
   data() {
     return {
@@ -78,14 +75,14 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     organisation(): Array<string> {
-      if(this.organisationId.length){
+      if (this.organisationId.length) {
         return this.organisationId;
       }
       return this.filterOrgaId ? [this.filterOrgaId] : [];
     },
-    watchVariable():string{
+    watchVariable(): string {
       return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
     },
   },
@@ -95,13 +92,13 @@ 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);
     }
   },
   mounted() {
@@ -109,21 +106,34 @@ export default defineComponent({
   },
   methods: {
     async fetchNext(): Promise<void> {
-      const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
-        first: 0,
-        size: 10,
-        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: 0,
+          size: 10,
+          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.allPodcasts = this.allPodcasts.concat(
-        data.result.filter((pod: Podcast|null) => null !== pod)
+        data.result.filter((pod: Podcast | null) => null !== pod),
       );
       this.loading = false;
     },
@@ -144,5 +154,5 @@ export default defineComponent({
       this.allPodcasts.length = 0;
     },
   },
-})
-</script>
+});
+</script>

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

@@ -1,18 +1,14 @@
 <template>
   <div
-    v-if="undefined !== tagList && 0!==tagList.length"
+    v-if="undefined !== tagList && 0 !== tagList.length"
     class="tag-list-component d-flex align-items-center flex-wrap"
   >
     <div>
-      {{ $t('Podcast tags') + ": " }}
+      {{ $t("Podcast tags") + ": " }}
     </div>
-    <div
-      v-for="(tag, index) in tagList"
-      :key="tag"
-      class="tag-list-element"
-    >
+    <div v-for="(tag, index) in tagList" :key="tag" class="tag-list-element">
       <div
-        :id="'tag-list-from-podcast-page'+index"
+        :id="'tag-list-from-podcast-page' + index"
         role="button"
         class="d-flex align-items-center"
       >
@@ -23,13 +19,13 @@
           class="ouest-france-logo"
           alt="Ouest France Logo"
           src="/img/ouest_france_logo.svg"
-        >
+        />
         {{ formateOfTag(tag) }}
       </div>
-      <Popover
+      <ClassicPopover
         v-if="isOuestFranceTag(tag)"
-        :target="'tag-list-from-podcast-page'+index"
-        :content="tag.substring(4,tag.length)"
+        :target="'tag-list-from-podcast-page' + index"
+        :content="tag.substring(4, tag.length)"
         relative-class="page-element"
         :is-fixed="true"
       />
@@ -38,38 +34,38 @@
 </template>
 
 <script lang="ts">
-import Popover from '../../misc/Popover.vue';
-import tagOfMixins from '../../mixins/tagOfMixins';
-import { defineComponent } from 'vue'
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import tagOfMixins from "../../mixins/tagOfMixins";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'TagList',
+  name: "TagList",
   components: {
-    Popover
+    ClassicPopover,
   },
-  mixins:[tagOfMixins],
+  mixins: [tagOfMixins],
   props: {
-    tagList: { default: () => [], type: Array as ()=>Array<string>},
+    tagList: { default: () => [], type: Array as () => Array<string> },
   },
-})
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.tag-list-component{
-  .ouest-france-logo{
-    width: 20px;
-    height: 20px;
-    margin-right: 5px;
+@import "@scss/_variables.scss";
+.octopus-app {
+  .tag-list-component {
+    .ouest-france-logo {
+      width: 20px;
+      height: 20px;
+      margin-right: 5px;
+    }
+    .tag-list-element {
+      display: flex;
+      align-items: center;
+      margin: 0.4rem;
+      padding: 0.2rem;
+      border: 1px solid #999;
+      border-radius: $octopus-borderradius;
+    }
   }
-  .tag-list-element {
-    display: flex;
-    align-items: center;
-    margin: 0.4rem;
-    padding: 0.2rem;
-    border: 1px solid #999;
-    border-radius: $octopus-borderradius;
-  }
-}
 }
-</style>
+</style>

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

@@ -13,57 +13,69 @@
     :in-modal="inModal"
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
-    @onSearch="onSearchRubrique"
+    @on-search="onSearchRubrique"
     @selected="onRubriqueSelected"
   />
 </template>
 
 <script lang="ts">
-import selenium from '../../mixins/selenium';
-import { Rubrique } from '@/stores/class/rubrique/rubrique';
-import ClassicMultiselect from '../../form/ClassicMultiselect.vue';
-import { defineComponent } from 'vue'
+import selenium from "../../mixins/selenium";
+import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     ClassicMultiselect,
   },
-  mixins:[selenium],
+  mixins: [selenium],
   props: {
-    defaultanswer: { default: '', type: String },
-    width: { default: '100%', type: String },
+    defaultanswer: { default: "", type: String },
+    width: { default: "100%", type: String },
     multiple: { default: false, type: Boolean },
     reset: { default: false, type: Boolean },
-    allRubriques: { default: () => [], type: Array as ()=> Array<Rubrique> },
+    allRubriques: { default: () => [], type: Array as () => Array<Rubrique> },
     rubriqueSelected: { default: undefined, type: Number },
-    rubriqueSelectedArray: { default: undefined, type: Object as ()=>Array<number> },
+    rubriqueSelectedArray: {
+      default: undefined,
+      type: Object as () => Array<number>,
+    },
     rubriquageId: { default: undefined, type: Number },
     withoutRubrique: { default: false, type: Boolean },
     isDisabled: { default: false, type: Boolean },
-    noDeselect: {default: true, type: Boolean},
-    inModal:{default: false, type: Boolean},
+    noDeselect: { default: true, type: Boolean },
+    inModal: { default: false, type: Boolean },
   },
-  emits: ['update:rubriqueSelected', 'update:rubriqueSelectedArray', 'selected'],
+  emits: [
+    "update:rubriqueSelected",
+    "update:rubriqueSelectedArray",
+    "selected",
+  ],
 
   data() {
     return {
       maxElement: 250 as number,
-      rubrique: undefined as Rubrique|undefined,
-      rubriqueForArray: [] as Array<Rubrique>|undefined,
-      withoutItem: { name: this.$t('Without rubric'), rubriqueId: -1 } as {name: string, rubriqueId:number},
+      rubrique: undefined as Rubrique | undefined,
+      rubriqueForArray: [] as Array<Rubrique> | undefined,
+      withoutItem: { name: this.$t("Without rubric"), rubriqueId: -1 } as {
+        name: string;
+        rubriqueId: number;
+      },
     };
   },
   computed: {
     idClassicMultiselect(): string {
-      return this.rubriquageId? 'rubriqueChooser' + this.rubriquageId : 'rubriqueChooser';
+      return this.rubriquageId
+        ? "rubriqueChooser" + this.rubriquageId
+        : "rubriqueChooser";
     },
-    getDefaultRubrique(): Rubrique|undefined{
-      if(''===this.defaultanswer){
+    getDefaultRubrique(): Rubrique | undefined {
+      if ("" === this.defaultanswer) {
         return undefined;
       }
       return { name: this.defaultanswer, rubriqueId: 0 };
     },
-    rubriques(): Array<Rubrique>{
-      let rubriques = this.allRubriques; 
+    rubriques(): Array<Rubrique> {
+      let rubriques = this.allRubriques;
       if (!this.getDefaultRubrique) {
         return rubriques;
       }
@@ -71,37 +83,36 @@ export default defineComponent({
         rubriques.unshift(this.withoutItem);
       }
       rubriques.unshift(this.getDefaultRubrique);
-      
+
       return rubriques;
     },
     model: {
-      get(): Rubrique| Array<Rubrique>|undefined{
-        return !this.multiple ? this.rubrique:this.rubriqueForArray;
+      get(): Rubrique | Array<Rubrique> | undefined {
+        return !this.multiple ? this.rubrique : this.rubriqueForArray;
       },
-      set(value: Rubrique| Array<Rubrique>|undefined): void{
-        if(!this.multiple){
-          this.rubrique = (value as Rubrique|undefined);
+      set(value: Rubrique | Array<Rubrique> | undefined): void {
+        if (!this.multiple) {
+          this.rubrique = value as Rubrique | undefined;
           return;
         }
-        this.rubriqueForArray = (value as Array<Rubrique>);
-      }
-
-    }
+        this.rubriqueForArray = value as Array<Rubrique>;
+      },
+    },
   },
   watch: {
     rubriqueSelected: {
-      immediate:true,
-      handler(){
+      immediate: true,
+      handler() {
         if (this.rubriqueSelected) {
           this.initRubriqueSelected();
-        }else{
+        } else {
           this.rubrique = this.getDefaultRubrique;
         }
-      }
+      },
     },
     reset(): void {
       this.rubrique = this.getDefaultRubrique;
-    }
+    },
   },
   mounted() {
     this.initRubriqueArray();
@@ -109,44 +120,52 @@ export default defineComponent({
   methods: {
     onSearchRubrique(query: string): void {
       let rubriques = this.rubriques;
-      if(query){
+      if (query) {
         rubriques = rubriques.filter((item: Rubrique) => {
           return item.name.toUpperCase().includes(query.toUpperCase());
         });
       }
-      (this.$refs.selectRubrique as InstanceType<typeof ClassicMultiselect>).afterSearch(rubriques,rubriques.length);
+      (
+        this.$refs.selectRubrique as InstanceType<typeof ClassicMultiselect>
+      ).afterSearch(rubriques, rubriques.length);
     },
-    onRubriqueSelected(rubrique: Rubrique| Array<Rubrique>): void {
+    onRubriqueSelected(rubrique: Rubrique | Array<Rubrique>): void {
       if (undefined !== this.rubriqueSelected) {
-        this.$emit('update:rubriqueSelected', (rubrique as Rubrique).rubriqueId);
+        this.$emit(
+          "update:rubriqueSelected",
+          (rubrique as Rubrique).rubriqueId,
+        );
       } else if (undefined !== this.rubriqueSelectedArray) {
         const idsArray: Array<number> = [];
         (rubrique as Array<Rubrique>).forEach((el: Rubrique) => {
-          idsArray.push(el.rubriqueId??0);
+          idsArray.push(el.rubriqueId ?? 0);
         });
-        this.$emit('update:rubriqueSelectedArray', idsArray);
-      }else{
-        this.$emit('selected', rubrique);
+        this.$emit("update:rubriqueSelectedArray", idsArray);
+      } else {
+        this.$emit("selected", rubrique);
       }
     },
     initRubriqueSelected(): void {
-      this.rubrique = this.rubriques.find((el: Rubrique) => {
-        return el.rubriqueId === this.rubriqueSelected;
-      }) ?? this.getDefaultRubrique;
+      this.rubrique =
+        this.rubriques.find((el: Rubrique) => {
+          return el.rubriqueId === this.rubriqueSelected;
+        }) ?? this.getDefaultRubrique;
     },
 
     initRubriqueArray(): void {
-      if(!this.rubriqueForArray || !this.rubriqueSelectedArray){return; }
+      if (!this.rubriqueForArray || !this.rubriqueSelectedArray) {
+        return;
+      }
       this.rubriqueForArray.length = 0;
       this.rubriqueSelectedArray.forEach((element: number) => {
         const item = this.rubriques.find((el: Rubrique) => {
           return el.rubriqueId === element;
         });
-        if(this.rubriqueForArray && item){
+        if (this.rubriqueForArray && item) {
           this.rubriqueForArray.push(item);
         }
       });
     },
   },
-})
-</script>
+});
+</script>