@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,143 +1,86 @@
 <template>
   <div
-    class="d-flex flex-column p-3 list-episode"
     v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    class="d-flex flex-column p-3 list-episode"
   >
     <h2>{{ title }}</h2>
     <div class="d-flex justify-content-between">
-      <div class="d-flex" v-if="undefined === requirePopularSort">
+      <div class="d-flex">
         <button
           class="btn btn-underline"
-          @click="sortPopular()"
           :class="{ active: popularSort }"
+          @click="sortPopular()"
         >
           {{ $t('Most popular') }}
         </button>
         <button
           class="btn btn-underline"
-          @click="sortChrono()"
           :class="{ active: !popularSort }"
+          @click="sortChrono()"
         >
           {{ $t('Last added') }}
         </button>
       </div>
-      <div v-else></div>
-      <div class="hide-phone" v-if="!isArrow">
+      <div
+        v-if="!isArrow"
+        class="hide-phone"
+      >
         <button
           class="btn btn-arrow"
-          @click="displayPrevious()"
           :class="{ disabled: !previousAvailable }"
           :aria-label="$t('Display previous')"
+          @click="displayPrevious()"
         >
-          <div class="saooti-arrow-left2"></div>
+          <div class="saooti-arrow-left2" />
         </button>
         <button
           class="btn btn-arrow"
-          @click="displayNext()"
           :class="{ disabled: !nextAvailable }"
           :aria-label="$t('Display next')"
+          @click="displayNext()"
         >
-          <div class="saooti-arrow-right2"></div>
+          <div class="saooti-arrow-right2" />
         </button>
       </div>
     </div>
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading podcasts ...') }}</h3>
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading podcasts ...') }}
+      </h3>
     </div>
     <transition-group
+      v-show="loaded"
       :name="transitionName"
       class="podcast-list-inline"
       tag="ul"
-      v-show="loaded"
       :class="[alignLeft ? 'justify-content-start' : '']"
     >
       <PodcastItem
-        class="flex-shrink item-phone-margin"
-        v-bind:podcast="p"
         v-for="p in podcasts"
-        v-bind:key="p.podcastId"
-        :class="[alignLeft ? 'mr-3' : '']"
+        :key="p.podcastId"
+        class="flex-shrink item-phone-margin"
+        :podcast="p"
+        :class="[alignLeft ? 'me-3' : '']"
       />
     </transition-group>
     <router-link
       class="btn btn-link"
       :class="buttonPlus ? 'btn-linkPlus' : ''"
       :to="refTo"
-      >{{ buttonText }}
-      <div class="saooti-plus" v-if="buttonPlus"></div
-    ></router-link>
+    >
+      {{ buttonText }}
+      <div
+        v-if="buttonPlus"
+        class="saooti-plus"
+      />
+    </router-link>
   </div>
 </template>
 
-<style lang="scss">
-.list-episode {
-  padding: 2rem 0rem 1rem !important;
-  @media (max-width: 450px) {
-    padding: 0.5rem 0rem 1rem !important;
-  }
-  h2 {
-    margin-bottom: 1rem;
-  }
-}
-
-.podcast-list-inline {
-  align-self: stretch;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 1rem;
-  grid-row: 1;
-}
-.out-left-enter-active,
-.out-left-leave-active,
-.out-right-enter-active,
-.out-right-leave-active {
-  transition: all 0.3s ease;
-}
-
-.out-left-leave-to,
-.out-right-enter {
-  transform: translateX(-110%);
-  opacity: 0;
-}
-
-.out-left-enter,
-.out-right-leave-to {
-  transform: translateX(110%);
-  opacity: 0;
-}
-
-.out-left-leave-to,
-.out-right-leave-to {
-  position: absolute;
-}
-.out-right-leave-to {
-  right: 5rem;
-  z-index: -1;
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .podcast-list-inline {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    padding-bottom: 1rem;
-    width: 100%;
-    .item-phone-margin {
-      margin: 0 0.5rem !important;
-    }
-  }
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import domHelper from '../../../helper/dom';
@@ -145,95 +88,136 @@ import PodcastItem from './PodcastItem.vue';
 
 const PHONE_WIDTH = 960;
 
+import { Podcast } from '@/store/class/podcast';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastInlineList',
-
-  props: [
-    'organisationId',
-    'emissionId',
-    'iabId',
-    'title',
-    'href',
-    'buttonText',
-    'requirePopularSort',
-    'isArrow',
-    'buttonPlus',
-    'rubriqueId',
-    'rubriquageId',
-  ],
-  emits: ['update:isArrow'],
-
+  
   components: {
-    PodcastItem,
+    PodcastItem
   },
 
-  created() {
-    if (undefined !== this.requirePopularSort) {
-      this.popularSort = this.requirePopularSort;
-    }
-    if (undefined !== this.isArrow) {
-      this.$emit('update:isArrow', true)
-    }
-    window.addEventListener('resize', this.handleResize);
-  },
-
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-
-  mounted() {
-    this.handleResize();
-    this.fetchNext();
+  props: {
+    organisationId: { default: undefined, type: 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> },
   },
+  emits: ['update:isArrow'],
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      index: 0,
-      first: 0,
-      size: 5,
-      totalCount: 0,
-      popularSort: true,
-      allPodcasts: [] as any,
-      direction: 1,
-      alignLeft: false,
+      loading: true as boolean,
+      loaded: true as boolean,
+      index: 0 as number,
+      first: 0 as number,
+      size: 5 as number,
+      totalCount: 0 as number,
+      popularSort: true as boolean,
+      allPodcasts: [] as Array<Podcast>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
     };
   },
-
   computed: {
-    podcasts():any {
+    podcasts(): Array<Podcast> {
       return this.allPodcasts.slice(this.index, this.index + this.size);
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-    organisation():any {
+    organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
       if (this.filterOrga) return this.filterOrga;
       return undefined;
     },
-    refTo():any {
+    rubriqueQueryParam(): string|undefined{
+      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
+        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
+    },
+    refTo(): any {
       if (this.href) return this.href;
+      if(this.iabId){
+        return {
+          name: 'category',
+          params: { iabId: this.iabId },
+          query: { productor: this.$store.state.filter.organisationId },
+        };
+      }
       return {
-        name: 'category',
-        params: { iabId: this.iabId },
-        query: { productor: this.$store.state.filter.organisationId },
-      };
+          name: 'podcasts',
+          query: { productor: this.$store.state.filter.organisationId, 
+                  iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
+                  rubriquesId: this.rubriqueQueryParam},
+        };
     },
-    previousAvailable():boolean {
+    previousAvailable(): boolean {
       return this.index > 0;
     },
-    nextAvailable():boolean {
+    nextAvailable(): boolean {
       return this.index + this.size < this.totalCount;
     },
-    transitionName: ({ direction }:any) =>
-      direction > 0 ? 'out-left' : 'out-right',
+    transitionName(): string {
+      return this.direction > 0 ? 'out-left' : 'out-right';
+    }
+  },
+  watch: {
+    emissionId(): void {
+      this.reset();
+      this.fetchNext();
+    },
+    organisationId(): void {
+      this.reset();
+      this.fetchNext();
+    },
+    filterOrga(): void {
+      this.reset();
+      this.fetchNext();
+    },
+    iabId(): void {
+      this.reset();
+      this.fetchNext();
+    },
+    rubriqueId(): void {
+      this.reset();
+      this.fetchNext();
+    },
+    rubriquageId(): void {
+      this.reset();
+      this.fetchNext();
+    },
+  },
+  
+  created() {
+    if (undefined !== this.requirePopularSort) {
+      this.popularSort = this.requirePopularSort;
+    }
+    if (undefined !== this.isArrow) {
+      this.$emit('update:isArrow', true);
+    }
+    window.addEventListener('resize', this.handleResize);
   },
 
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchNext();
+  },
   methods: {
-    async fetchNext() {
+    async fetchNext(): Promise<void> {
       const data = await octopusApi.fetchPodcasts({
         first: this.first,
         size: this.size + 1,
@@ -248,11 +232,11 @@ export default defineComponent({
       this.loaded = true;
       this.totalCount = data.count;
       if (this.allPodcasts.length + data.result.length < this.totalCount) {
-        let nexEl = data.result.pop();
+        const nexEl = data.result.pop();
         this.preloadImage(nexEl.imageUrl);
       }
       this.allPodcasts = this.allPodcasts.concat(
-        data.result.filter((pod:any) => null !== pod)
+        data.result.filter((pod: Podcast|null) => null !== pod)
       );
       if (this.allPodcasts.length <= 3) {
         this.alignLeft = true;
@@ -261,15 +245,13 @@ export default defineComponent({
       }
       this.first += this.size;
     },
-
-    displayPrevious() {
+    displayPrevious(): void {
       this.direction = -1;
       if (this.previousAvailable) {
         this.index -= 1;
       }
     },
-
-    displayNext() {
+    displayNext(): void {
       this.direction = 1;
       if (!this.nextAvailable) return;
       if (
@@ -280,35 +262,29 @@ export default defineComponent({
       }
       this.index += 1;
     },
-
-    handleResize() {
+    handleResize(): void {
       if (!this.$el) return;
       if (window.innerWidth <= PHONE_WIDTH) {
         this.size = 10;
         return;
       }
-      const width = this.$el.offsetWidth;
+      const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(13.7);
       this.size = Math.floor(width / sixteen);
     },
-
-    sortPopular() {
+    sortPopular(): void {
       if (this.popularSort) return;
-
       this.popularSort = true;
       this.reset();
       this.fetchNext();
     },
-
-    sortChrono() {
+    sortChrono(): void {
       if (!this.popularSort) return;
-
       this.popularSort = false;
       this.reset();
       this.fetchNext();
     },
-
-    reset() {
+    reset(): void {
       this.loading = true;
       this.loaded = true;
       this.index = 0;
@@ -316,50 +292,12 @@ export default defineComponent({
       this.totalCount = 0;
       this.allPodcasts.length = 0;
     },
-
-    preloadImage(url:string) {
-      let img = new Image();
+    preloadImage(url: string): void {
+      const img = new Image();
       img.src = url;
     },
   },
-
-  watch: {
-    emissionId: {
-      handler() {
-        this.reset();
-        this.fetchNext();
-      },
-    },
-    organisationId: {
-      handler() {
-        this.reset();
-        this.fetchNext();
-      },
-    },
-    filterOrga: {
-      handler() {
-        this.reset();
-        this.fetchNext();
-      },
-    },
-    iabId: {
-      handler() {
-        this.reset();
-        this.fetchNext();
-      },
-    },
-    rubriqueId: {
-      handler() {
-        this.reset();
-        this.fetchNext();
-      },
-    },
-    rubriquageId: {
-      handler() {
-        this.reset();
-        this.fetchNext();
-      },
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>