@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,197 +1,191 @@
 <template>
   <div class="d-flex flex-column p-3 list-episode">
-    <div class="d-flex justify-content-end" v-if="!overflowScroll">
+    <div
+      v-if="!overflowScroll"
+      class="d-flex justify-content-end"
+    >
       <div class="hide-phone">
         <button
-          class="btn btn-arrow"
-          @click="displayPrevious()"
+          class="btn admin-button m-1 saooti-left"
           :class="{ disabled: !previousAvailable }"
-          :aria-label="$t('Display previous')"
-        >
-          <div class="saooti-arrow-left2"></div>
-        </button>
+          :title="$t('Display previous')"
+          @click="displayPrevious()"
+        />
         <button
-          class="btn btn-arrow"
-          @click="displayNext()"
+          class="btn admin-button m-1 saooti-right"
           :class="{ disabled: !nextAvailable }"
-          :aria-label="$t('Display next')"
-        >
-          <div class="saooti-arrow-right2"></div>
-        </button>
+          :title="$t('Display next')"
+          @click="displayNext()"
+        />
       </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 emissions ...') }}</h3>
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading emissions ...'):undefined"
+    />
     <transition-group
-      :name="transitionName"
-      class="podcast-list-inline"
-      tag="ul"
       v-show="
         (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
       "
+      :name="transitionName"
+      class="element-list-inline"
+      tag="ul"
       :class="[
         alignLeft ? 'justify-content-start' : '',
         overflowScroll ? 'overflowScroll' : '',
       ]"
+      :css="isInlineAnimation"
     >
       <EmissionPlayerItem
-        class="flex-shrink item-phone-margin"
-        :emission="e"
         v-for="e in emissions"
-        v-bind:key="e.emissionId"
-        :class="[alignLeft ? 'mr-3' : '', mainRubriquage(e)]"
-        :nbPodcasts="nbPodcasts"
-        :rubriqueName="rubriquesId(e)"
+        :key="e.emissionId"
+        class="flex-shrink-0 item-phone-margin"
+        :emission="e"
+        :class="[alignLeft ? 'me-3' : '', mainRubriquage(e)]"
+        :nb-podcasts="nbPodcasts"
+        :rubrique-name="rubriquesId(e)"
       />
     </transition-group>
-    <router-link v-bind:to="href" class="btn btn-link" v-if="!overflowScroll">{{
-      buttonText
-    }}</router-link>
+    <router-link
+      :to="href"
+      class="btn btn-primary align-self-center width-fit-content m-4"
+    >
+      {{
+        buttonText
+      }}
+    </router-link>
   </div>
 </template>
 
-<style lang="scss">
-.podcast-list-inline.overflowScroll {
-  display: flex;
-  flex-wrap: wrap;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-  padding-bottom: 1rem;
-  width: 100%;
-  height: 80vh;
-  overflow-y: auto;
-  @media (max-width: 960px) {
-    overflow-x: hidden;
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-  .item-phone-margin {
-    margin: 1rem 0.5rem !important;
-  }
-}
-</style>
-
 <script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
+import octopusApi from '@saooti/octopus-api';
 import domHelper from '../../../helper/dom';
 import EmissionPlayerItem from './EmissionPlayerItem.vue';
 import { state } from '../../../store/paramStore';
-
+import { handle403 } from '../../mixins/handle403';
 const PHONE_WIDTH = 960;
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { Emission } from '@/store/class/general/emission';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
 export default defineComponent({
   name: 'EmissionInlineList',
 
-  props: [
-    'organisationId',
-    'href',
-    'buttonText',
-    'rubriqueId',
-    'rubriquageId',
-    'nbPodcasts',
-    'itemSize',
-  ],
-
   components: {
     EmissionPlayerItem,
+    ClassicLoading
   },
 
-  created() {
-    window.addEventListener('resize', this.handleResize);
-  },
+  mixins: [handle403],
 
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-
-  mounted() {
-    this.handleResize();
-    this.fetchNext();
-    if (this.displayRubriquage) {
-      this.fetchRubriques();
-    }
+  props: {
+    organisationId: { default: undefined, type: String},
+    href: { default: undefined, type: String},
+    buttonText: { default: undefined, type: String},
+    rubriqueId: { default: undefined, type: Number },
+    rubriquageId: { default: undefined, type: Number },
+    nbPodcasts: { default: undefined, type: Number },
+    itemSize: { default: 13, type: Number },
   },
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      index: 0,
-      first: 0,
-      size: 5,
-      totalCount: 0,
-      popularSort: true,
-      allEmissions: [] as any,
-      direction: 1,
-      alignLeft: false,
-      rubriques: undefined as any,
+      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,
+      allEmissions: [] as Array<Emission>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
+      rubriques: undefined as Array<Rubrique>|undefined,
     };
   },
 
+
   computed: {
-    emissions():any {
+    emissions(): Array<Emission> {
       return this.allEmissions.slice(this.index, this.index + this.size);
     },
-    overflowScroll() {
-      return state.emissionsPage.overflowScroll;
+    overflowScroll(): boolean {
+      return (state.emissionsPage.overflowScroll as boolean);
     },
-    previousAvailable():boolean {
+    previousAvailable(): boolean {
       return this.index > 0;
     },
-    nextAvailable():boolean {
+    nextAvailable(): boolean {
       return this.index + this.size < this.totalCount;
     },
-    displayRubriquage() {
+    displayRubriquage(): number|undefined {
       return state.emissionsPage.rubriquage;
     },
-    transitionName: ({ direction }:any) =>
-      direction > 0 ? 'out-left' : 'out-right',
+    transitionName(): string {
+      return this.direction > 0 ? 'out-left' : 'out-right';
+    },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
   },
 
+  watch: {
+    sizeItem(){
+      this.handleResize();
+    }
+  },
+  
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchNext();
+    if (this.displayRubriquage) {
+      this.fetchRubriques();
+    }
+  },
   methods: {
-    async fetchNext() {
-      const data = await octopusApi.fetchEmissions({
-        first: this.first,
-        size: this.size + 1,
-        organisationId: this.organisationId,
-        rubriqueId: this.rubriqueId,
-        rubriquageId: this.rubriquageId,
-        sort: 'LAST_PODCAST_DESC',
-      });
-      this.loading = false;
-      this.loaded = true;
-      this.totalCount = data.count;
-      /* if(this.first === 0 && this.displayRubriquage && state.emissionsPage.mainRubrique){
-        data.result.sort((a, b)=>{
-          if (a.rubriqueIds[0] === state.emissionsPage.mainRubrique)
-            return 1;
-          if (b.rubriqueIds[0] === state.emissionsPage.mainRubrique)
-            return -1;
-          return 0;
-        });
-      } */
-      if (this.allEmissions.length + data.result.length < this.totalCount) {
-        let nexEl = data.result.pop();
-        this.preloadImage(nexEl.imageUrl);
-      }
-      this.allEmissions = this.allEmissions.concat(data.result);
-      if (this.allEmissions.length <= 3) {
-        this.alignLeft = true;
+    async fetchNext(): Promise<void> {
+      try {
+        const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Emission>;sort: string;}>(0, 'emission/search',{
+          first: this.first,
+          size: this.size + 1,
+          organisationId: this.organisationId,
+          rubriqueId: this.rubriqueId ?  [this.rubriqueId] : [],
+          rubriquageId: this.rubriquageId ? [this.rubriquageId] : [],
+          sort: 'LAST_PODCAST_DESC',
+        }, true);
+        
+        this.loading = false;
+        this.loaded = true;
+        this.totalCount = data.count;
+        if (this.allEmissions.length + data.result.length < this.totalCount) {
+          const nexEl = data.result.pop() as Emission;
+          this.preloadImage(nexEl.imageUrl ? nexEl.imageUrl : "");
+        }
+        this.allEmissions = this.allEmissions.concat(data.result);
+        if (this.allEmissions.length <= 3) {
+          this.alignLeft = true;
+        }
+        this.first += this.size;
+      } catch (error) {
+        this.handle403((error as AxiosError));
       }
-      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 (
@@ -202,26 +196,21 @@ export default defineComponent({
       }
       this.index += 1;
     },
-
-    handleResize() {
+    handleResize(): void {
       if (!this.$el) return;
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
       if (this.overflowScroll) {
         this.size = 20;
         return;
       }
-      const width = this.$el.offsetWidth;
-      let sixteen = domHelper.convertRemToPixels(13.7);
-      if (this.itemSize) {
-        sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
       }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
       this.size = Math.floor(width / sixteen);
     },
-
-    reset() {
+    reset(): void {
       this.loading = true;
       this.loaded = true;
       this.index = 0;
@@ -229,16 +218,15 @@ export default defineComponent({
       this.totalCount = 0;
       this.allEmissions.length = 0;
     },
-
-    preloadImage(url: string) {
-      let img = new Image();
+    preloadImage(url: string): void {
+      const img = new Image();
       img.src = url;
     },
-    async fetchRubriques() {
-      const data = await octopusApi.fetchTopic(this.displayRubriquage);
+    async fetchRubriques(): Promise<void> {
+      const data = await octopusApi.fetchData<Rubriquage>(0, 'rubriquage/'+this.displayRubriquage);
       this.rubriques = data.rubriques;
     },
-    rubriquesId(emission:any) {
+    rubriquesId(emission: Emission): string|undefined {
       if (
         !this.displayRubriquage ||
         !emission.rubriqueIds ||
@@ -247,19 +235,30 @@ export default defineComponent({
         !this.rubriques.length
       )
         return undefined;
-      let rubrique = this.rubriques.find(
-        (        element: { rubriqueId: any; }) => element.rubriqueId === emission.rubriqueIds[0]
+      const rubrique = this.rubriques.find(
+        (element: Rubrique) => element.rubriqueId && emission.rubriqueIds.includes(element.rubriqueId) && element.rubriquageId === this.displayRubriquage
       );
-      return rubrique.name;
+      if(rubrique){
+        return rubrique.name;
+      }
     },
-    mainRubriquage(emission: { rubriqueIds: any[]; }) {
-      if (
-        emission.rubriqueIds &&
-        emission.rubriqueIds[0] === state.emissionsPage.mainRubrique
-      )
-        return 'partenaireRubrique';
-      return '';
+    mainRubriquage(emission: Emission): string {
+      return state.emissionsPage.mainRubrique && emission.rubriqueIds?.includes(state.emissionsPage.mainRubrique) ? 'partenaireRubrique' : '';
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+  .list-episode {
+      padding: 2rem 0rem 1rem !important;
+      @media (max-width: 450px) {
+          padding: 0.5rem 0rem 1rem !important;
+      }
+      h2 {
+          margin-bottom: 1rem;
+      }
+  }
+}
+</style>