@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="emission-player-container"
-  >
+  <div class="emission-player-container">
     <router-link
       :to="{
         name: 'emission',
@@ -10,27 +8,19 @@
       }"
       class="d-flex flex-column text-dark"
     >
-      <div
-        v-if="rubriqueName"
-        class="emissionPlayerItem-info"
-      >
+      <div v-if="rubriqueName" class="emissionPlayerItem-info">
         {{ rubriqueName }}
       </div>
-      <div
-        class="img-box rounded-0"
-      >
+      <div class="img-box rounded-0">
         <img
           v-lazy="proxyImageUrl(emission.imageUrl, '330')"
           width="330"
           height="330"
-          :title="$t('Emission name image', {name:emission.name})"
-          :alt="$t('Emission name image', {name:emission.name})"
+          :title="$t('Emission name image', { name: emission.name })"
+          :alt="$t('Emission name image', { name: emission.name })"
           class="img-box rounded-0"
-        >
-        <div
-          v-if="titleInImage"
-          class="titleInImage"
-        >
+        />
+        <div v-if="titleInImage" class="titleInImage">
           {{ emission.name }}
         </div>
       </div>
@@ -82,45 +72,31 @@
               {{ p.title }}
             </div>
             <div
-              :ref="'descriptionPodcastContainer'+ p.podcastId"
+              :ref="'descriptionPodcastContainer' + p.podcastId"
               class="emission-description html-wysiwyg-content"
             >
               <!-- eslint-disable vue/no-v-html -->
               <div
-                :ref="'descriptionPodcast'+ p.podcastId"
+                :ref="'descriptionPodcast' + p.podcastId"
                 v-html="urlify(p.description)"
               />
               <!-- eslint-enable -->
             </div>
           </router-link>
-          <PodcastPlayBar
-            :podcast-id="p.podcastId"
-            :duration="p.duration"
-          />
+          <PodcastPlayBar :podcast-id="p.podcastId" :duration="p.duration" />
         </div>
         <button
           v-if="
             playerPodcast !== p ||
-              (playerPodcast === p &&
-                'PAUSED' === playerStatus)
+            (playerPodcast === p && 'PAUSED' === playerStatus)
           "
           class="play-button-box bg-secondary"
           @click="play(p)"
         >
-          <div
-            class="text-light saooti-play"
-            :title="$t('Play')"
-          />
+          <div class="text-light saooti-play" :title="$t('Play')" />
         </button>
-        <button
-          v-else
-          class="play-button-box bg-secondary"
-          @click="pause(p)"
-        >
-          <div
-            class="text-light saooti-pause"
-            :title="$t('Pause')"
-          />
+        <button v-else class="play-button-box bg-secondary" @click="pause(p)">
+          <div class="text-light saooti-pause" :title="$t('Pause')" />
         </button>
       </div>
     </div>
@@ -136,35 +112,35 @@
         }"
         class="btn"
       >
-        {{ $t('More episodes') }}
+        {{ $t("More episodes") }}
       </router-link>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import { Emission } from '@/stores/class/general/emission';
-import { Podcast } from '@/stores/class/general/podcast';
-import { state } from '../../../stores/ParamSdkStore';
-import PodcastPlayBar from '../podcasts/PodcastPlayBar.vue';
-import imageProxy from '../../mixins/imageProxy';
-import displayMethods from '../../mixins/displayMethods';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue'
+import octopusApi from "@saooti/octopus-api";
+import { Emission } from "@/stores/class/general/emission";
+import { Podcast } from "@/stores/class/general/podcast";
+import { state } from "../../../stores/ParamSdkStore";
+import PodcastPlayBar from "../podcasts/PodcastPlayBar.vue";
+import imageProxy from "../../mixins/imageProxy";
+import displayMethods from "../../mixins/displayMethods";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'EmissionPlayerItem',
+  name: "EmissionPlayerItem",
 
-  components:{
-    PodcastPlayBar
+  components: {
+    PodcastPlayBar,
   },
   mixins: [displayMethods, imageProxy],
   props: {
-    emission: { default: ()=>({}), type: Object as ()=>Emission },
+    emission: { default: () => ({}), type: Object as () => Emission },
     nbPodcasts: { default: undefined, type: Number },
-    rubriqueName: { default: undefined, type: String},
+    rubriqueName: { default: undefined, type: String },
   },
 
   data() {
@@ -173,28 +149,31 @@ export default defineComponent({
       podcasts: [] as Array<Podcast>,
     };
   },
-  
+
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    ...mapState(usePlayerStore, ['playerPodcast', 'playerStatus']),
-    isProgressBar(): boolean{
-      return (state.emissionsPage.progressBar as boolean);
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    ...mapState(usePlayerStore, ["playerPodcast", "playerStatus"]),
+    isProgressBar(): boolean {
+      return state.emissionsPage.progressBar as boolean;
     },
     buttonMore(): boolean {
-      return (state.emissionsPage.buttonMore as boolean);
+      return state.emissionsPage.buttonMore as boolean;
     },
     titleInImage(): boolean {
-      return (state.emissionsPage.titleInImage as boolean);
+      return state.emissionsPage.titleInImage as boolean;
     },
     authenticated(): boolean {
-      return state.generalParameters.authenticated??false;
+      return state.generalParameters.authenticated ?? false;
     },
-    organisationId(): string|undefined {
+    organisationId(): string | undefined {
       return state.generalParameters.organisationId;
     },
     editRight(): boolean {
-      return (true===this.authenticated && this.organisationId === this.emission.orga.id) ||
+      return (
+        (true === this.authenticated &&
+          this.organisationId === this.emission.orga.id) ||
         true === state.generalParameters.isAdmin
+      );
     },
   },
 
@@ -202,17 +181,19 @@ export default defineComponent({
     this.loadPodcasts();
   },
   mounted() {
-    const emissionDesc = (this.$refs.descriptionEmission as HTMLElement);
-    const emissionDescContainer = (this.$refs.descriptionEmissionContainer as HTMLElement);
+    const emissionDesc = this.$refs.descriptionEmission as HTMLElement;
+    const emissionDescContainer = this.$refs
+      .descriptionEmissionContainer as HTMLElement;
     if (
-      null !== emissionDesc && null !== emissionDescContainer &&
+      null !== emissionDesc &&
+      null !== emissionDescContainer &&
       emissionDesc.clientHeight > emissionDescContainer.clientHeight
     ) {
-      emissionDescContainer.classList.add('after-emission-description');
+      emissionDescContainer.classList.add("after-emission-description");
     }
   },
   methods: {
-    ...mapActions(usePlayerStore, ['playerPlay', 'playerChangeStatus']),
+    ...mapActions(usePlayerStore, ["playerPlay", "playerChangeStatus"]),
     play(podcast: Podcast): void {
       if (podcast === this.playerPodcast) {
         this.playerChangeStatus(false);
@@ -225,34 +206,54 @@ export default defineComponent({
     },
     async loadPodcasts(): Promise<void> {
       const nb = this.nbPodcasts ? this.nbPodcasts : 2;
-      const data =  await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
-        emissionId: this.emission.emissionId,
-        size: nb,
-        includeStatus:["READY","PROCESSING"]
-      }, true);
+      const data = await octopusApi.fetchDataWithParams<{
+        count: number;
+        result: Array<Podcast>;
+        sort: string;
+      }>(
+        0,
+        "podcast/search",
+        {
+          emissionId: this.emission.emissionId,
+          size: nb,
+          includeStatus: ["READY", "PROCESSING"],
+        },
+        true,
+      );
       if (0 === data.count) {
         this.activeEmission = false;
       }
       this.podcasts = data.result;
       this.$nextTick(() => {
-      for (let index = 0, len = this.podcasts.length; index < len; index++) {
-        const podcastDesc = (this.$refs['descriptionPodcast'+this.podcasts[index].podcastId] as Array<HTMLElement>)?.[0] ?? null;
-        const podcastDescContainer = (this.$refs['descriptionPodcastContainer'+this.podcasts[index].podcastId] as Array<HTMLElement>)?.[0] ?? null;
-        if (
-          null !== podcastDesc && null !== podcastDescContainer &&
-          podcastDesc.clientHeight > podcastDescContainer.clientHeight
-        ) {
-          podcastDescContainer.classList.add('after-emission-description');
+        for (let index = 0, len = this.podcasts.length; index < len; index++) {
+          const podcastDesc =
+            (
+              this.$refs[
+                "descriptionPodcast" + this.podcasts[index].podcastId
+              ] as Array<HTMLElement>
+            )?.[0] ?? null;
+          const podcastDescContainer =
+            (
+              this.$refs[
+                "descriptionPodcastContainer" + this.podcasts[index].podcastId
+              ] as Array<HTMLElement>
+            )?.[0] ?? null;
+          if (
+            null !== podcastDesc &&
+            null !== podcastDescContainer &&
+            podcastDesc.clientHeight > podcastDescContainer.clientHeight
+          ) {
+            podcastDescContainer.classList.add("after-emission-description");
+          }
         }
-      }
       });
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
+@import "@scss/_variables.scss";
 .emission-player-container {
   list-style: none;
   background: #fff;
@@ -274,7 +275,7 @@ export default defineComponent({
     max-height: 3.5rem;
     position: relative;
     &.after-emission-description:after {
-      content: '...';
+      content: "...";
       position: absolute;
       padding-left: 1rem;
       right: 0;
@@ -298,5 +299,4 @@ export default defineComponent({
     max-width: $octopus-mobile-item-size;
   }
 }
-
-</style>
+</style>

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

@@ -4,35 +4,32 @@
       class="d-flex justify-content-center align-items-center mb-3 text-secondary btn-transparent"
       @click="showFilters = !showFilters"
     >
-      <div>{{ $t('Advanced filters') }}</div>
-      <div 
+      <div>{{ $t("Advanced filters") }}</div>
+      <div
         class="saooti-down mx-1"
         :class="{ 'arrow-transform': showFilters }"
       />
     </button>
-    <div
-      v-show="showFilters"
-      class="advanced-search-container"
-    >
+    <div v-show="showFilters" class="advanced-search-container">
       <div class="d-flex flex-column">
         <div class="text-primary mb-2">
-          {{ $t('Filter') }}
+          {{ $t("Filter") }}
         </div>
         <MonetizableFilter
           v-if="sdkParameters.isMonetizableFilter && !isEducation"
           :is-emission="isEmission"
-          @updateMonetization="updateMonetization"
+          @update-monetization="updateMonetization"
         />
-        <CategorySearchFilter @updateCategory="updateCategory" />
-        <RubriqueFilter 
+        <CategorySearchFilter @update-category="updateCategory" />
+        <RubriqueFilter
           :reset-rubriquage="resetRubriquage"
           :organisation-id="organisationId"
-          @updateRubriquageFilter="updateRubriquageFilter"
+          @update-rubriquage-filter="updateRubriquageFilter"
         />
         <DateFilter
           :is-emission="isEmission"
-          @updateToDate="updateToDate"
-          @updateFromDate="updateFromDate"
+          @update-to-date="updateToDate"
+          @update-from-date="updateFromDate"
         />
         <div
           v-if="organisation && organisationRight && !isPodcastmaker"
@@ -46,10 +43,7 @@
             :is-disabled="isCheckboxNotValidate && isNotValidate"
           />
         </div>
-        <div
-          v-if="isCheckboxNotValidate"
-          class="d-flex flex-column mt-3"
-        >
+        <div v-if="isCheckboxNotValidate" class="d-flex flex-column mt-3">
           <ClassicCheckbox
             v-model:textInit="isNotValidate"
             class="flex-shrink-0"
@@ -60,12 +54,12 @@
       </div>
       <div class="d-flex flex-column">
         <div class="text-primary mb-2">
-          {{ $t('Sort') }}
+          {{ $t("Sort") }}
         </div>
         <SearchOrder
           :is-emission="isEmission"
           :sort-criteria="sortCriteria"
-          @updateSortCriteria="updateSortCriteria"
+          @update-sort-criteria="updateSortCriteria"
         />
       </div>
     </div>
@@ -73,16 +67,18 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../../stores/ParamSdkStore';
-import { orgaComputed } from '../../mixins/orgaComputed';
-import CategorySearchFilter from './CategorySearchFilter.vue';
-import DateFilter from './DateFilter.vue';
-import SearchOrder from './SearchOrder.vue';
-import RubriqueFilter from './RubriqueFilter.vue';
-import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const MonetizableFilter = defineAsyncComponent(() => import('./MonetizableFilter.vue'));
+import { state } from "../../../stores/ParamSdkStore";
+import { orgaComputed } from "../../mixins/orgaComputed";
+import CategorySearchFilter from "./CategorySearchFilter.vue";
+import DateFilter from "./DateFilter.vue";
+import SearchOrder from "./SearchOrder.vue";
+import RubriqueFilter from "./RubriqueFilter.vue";
+import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { defineComponent, defineAsyncComponent } from "vue";
+const MonetizableFilter = defineAsyncComponent(
+  () => import("./MonetizableFilter.vue"),
+);
 export default defineComponent({
   components: {
     MonetizableFilter,
@@ -90,26 +86,28 @@ export default defineComponent({
     RubriqueFilter,
     ClassicCheckbox,
     DateFilter,
-    SearchOrder
+    SearchOrder,
   },
   mixins: [orgaComputed],
   props: {
-    organisationId: { default: undefined, type: String},
-    isEmission: { default: false, type:  Boolean},
-    resetRubriquage: { default: false, type:  Boolean},
-    isEducation: { default: false, type:  Boolean},
-    includeHidden: { default: false, type:  Boolean},
-    sortCriteria: { default: 'DATE', type: String},
+    organisationId: { default: undefined, type: String },
+    isEmission: { default: false, type: Boolean },
+    resetRubriquage: { default: false, type: Boolean },
+    isEducation: { default: false, type: Boolean },
+    includeHidden: { default: false, type: Boolean },
+    sortCriteria: { default: "DATE", type: String },
   },
 
-  emits: ['updateToDate', 
-          'updateFromDate',
-          'updateMonetization',
-          'updateCategory',
-          'updateSortCriteria',
-          'includeHidden',
-          'notValid',
-          'updateRubriquageFilter'],
+  emits: [
+    "updateToDate",
+    "updateFromDate",
+    "updateMonetization",
+    "updateCategory",
+    "updateSortCriteria",
+    "includeHidden",
+    "notValid",
+    "updateRubriquageFilter",
+  ],
   data() {
     return {
       isNotVisible: this.includeHidden,
@@ -120,28 +118,33 @@ export default defineComponent({
 
   computed: {
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
-    sdkParameters(){
+    sdkParameters() {
       return {
-        isMonetizableFilter : (state.podcastsPage.MonetizableFilter as boolean),
-        isProduction : (state.generalParameters.isProduction as boolean),
-        isContribution : (state.generalParameters.isContribution as boolean)
-      }
+        isMonetizableFilter: state.podcastsPage.MonetizableFilter as boolean,
+        isProduction: state.generalParameters.isProduction as boolean,
+        isContribution: state.generalParameters.isContribution as boolean,
+      };
     },
     organisationRight(): boolean {
-      return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
-        true === state.generalParameters.isAdmin;
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.organisationId) ||
+        true === state.generalParameters.isAdmin
+      );
     },
-    organisation(): string|undefined {
-      return this.organisationId??this.filterOrgaId;
+    organisation(): string | undefined {
+      return this.organisationId ?? this.filterOrgaId;
     },
     textNotVisible(): string {
-      return this.isEmission? this.$t('Consider podcasts no visible') : this.$t('See podcasts no visible');
+      return this.isEmission
+        ? this.$t("Consider podcasts no visible")
+        : this.$t("See podcasts no visible");
     },
     isCheckboxNotValidate(): boolean {
       return (
-        undefined!==this.organisation &&
+        undefined !== this.organisation &&
         this.organisationRight &&
         this.sdkParameters.isContribution &&
         !this.isPodcastmaker &&
@@ -150,39 +153,44 @@ export default defineComponent({
       );
     },
     textNotValidate(): string {
-      return this.sdkParameters.isProduction? this.$t('Display all podcasts to validate') : this.$t('Display my podcasts to validate');
+      return this.sdkParameters.isProduction
+        ? this.$t("Display all podcasts to validate")
+        : this.$t("Display my podcasts to validate");
     },
   },
   watch: {
     organisation(): void {
-      this.isNotVisible = undefined!==this.organisation && this.organisationRight && !this.isEmission;
+      this.isNotVisible =
+        undefined !== this.organisation &&
+        this.organisationRight &&
+        !this.isEmission;
     },
-    isNotVisible(): void{
-      this.$emit('includeHidden', this.isNotVisible);
+    isNotVisible(): void {
+      this.$emit("includeHidden", this.isNotVisible);
     },
     isNotValidate(): void {
-      this.$emit('notValid', this.isNotValidate);
+      this.$emit("notValid", this.isNotValidate);
     },
   },
   methods: {
     updateFromDate(value: string): void {
-      this.$emit('updateFromDate', value);
+      this.$emit("updateFromDate", value);
     },
     updateToDate(value: string): void {
-      this.$emit('updateToDate', value);
+      this.$emit("updateToDate", value);
     },
     updateMonetization(value: string): void {
-      this.$emit('updateMonetization', value);
+      this.$emit("updateMonetization", value);
+    },
+    updateCategory(value: number) {
+      this.$emit("updateCategory", 0 !== value ? value : undefined);
     },
-    updateCategory(value: number){
-      this.$emit('updateCategory', 0!==value ? value : undefined);
+    updateRubriquageFilter(value: Array<RubriquageFilter>) {
+      this.$emit("updateRubriquageFilter", value);
     },
-    updateRubriquageFilter(value: Array<RubriquageFilter>){
-      this.$emit('updateRubriquageFilter', value);
+    updateSortCriteria(value: string) {
+      this.$emit("updateSortCriteria", value);
     },
-    updateSortCriteria(value: string){
-      this.$emit('updateSortCriteria', value);
-    }
   },
-})
-</script>
+});
+</script>

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

@@ -15,17 +15,17 @@
 </template>
 
 <script lang="ts">
-import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import CategoryChooser from '../categories/CategoryChooser.vue';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue'
+import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import CategoryChooser from "../categories/CategoryChooser.vue";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     CategoryChooser,
-    ClassicCheckbox
+    ClassicCheckbox,
   },
-  emits: ['updateCategory'],
+  emits: ["updateCategory"],
   data() {
     return {
       isCategory: false as boolean,
@@ -35,52 +35,52 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useFilterStore, ['filterIab']),
+    ...mapState(useFilterStore, ["filterIab"]),
   },
   watch: {
     isCategory(): void {
-      if(this.isInternChanged ||this.isInit){
+      if (this.isInternChanged || this.isInit) {
         return;
       }
       this.isInternChanged = true;
-      this.$emit('updateCategory', this.isCategory?this.iabId:0);
+      this.$emit("updateCategory", this.isCategory ? this.iabId : 0);
       this.resetCategoryFilter();
       this.$nextTick(() => {
         this.isInternChanged = false;
       });
     },
     iabId(): void {
-      if(this.isInternChanged ||this.isInit){
+      if (this.isInternChanged || this.isInit) {
         return;
       }
       this.isInternChanged = true;
       this.resetCategoryFilter();
-      if(this.isCategory){
-        this.$emit('updateCategory', this.iabId);
+      if (this.isCategory) {
+        this.$emit("updateCategory", this.iabId);
       }
       this.$nextTick(() => {
         this.isInternChanged = false;
       });
     },
-    filterIab:{
+    filterIab: {
       deep: true,
-      handler(){
-        if(this.isInternChanged){
+      handler() {
+        if (this.isInternChanged) {
           return;
         }
         this.isInternChanged = true;
         this.iabId = this.filterIab ? this.filterIab.id : 0;
         this.isCategory = this.filterIab ? true : false;
-        this.$emit('updateCategory', this.iabId);
+        this.$emit("updateCategory", this.iabId);
         this.$nextTick(() => {
           this.isInternChanged = false;
         });
-      }
+      },
     },
   },
 
   created() {
-    if(this.filterIab){
+    if (this.filterIab) {
       this.iabId = this.filterIab.id;
       this.isCategory = true;
     }
@@ -89,17 +89,19 @@ export default defineComponent({
     });
   },
   methods: {
-    ...mapActions(useFilterStore, ['filterUpdateIab']),
-    resetCategoryFilter(): void{
-      if(!this.filterIab || this.isInit){
+    ...mapActions(useFilterStore, ["filterUpdateIab"]),
+    resetCategoryFilter(): void {
+      if (!this.filterIab || this.isInit) {
         return;
       }
       const queries = this.$route.query;
       if (queries.iabId) {
-        this.$router.replace({ query: {...queries, ...{iabId: undefined} } });
+        this.$router.replace({
+          query: { ...queries, ...{ iabId: undefined } },
+        });
       }
       this.filterUpdateIab();
-    }
+    },
   },
-})
+});
 </script>