@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,8 +1,13 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <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
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading emissions ...') }}
+      </h3>
     </div>
     <div
       v-if="showCount && loaded && emissions.length > 1"
@@ -11,180 +16,155 @@
       {{ $t('Number emissions', { nb: displayCount }) + sortText }}
     </div>
     <ul
+      v-if="!itemPlayer"
       class="emission-list"
       :class="smallItems ? 'threeEmissions' : 'twoEmissions'"
-      v-if="!itemPlayer"
     >
       <EmissionItem
-        v-bind:emission="e"
         v-for="e in emissions"
-        v-bind:key="e.emissionId"
-        @emissionNotVisible="displayCount--"
+        :key="e.emissionId"
+        :emission="e"
       />
     </ul>
     <ul
-      class="d-flex flex-wrap justify-content-around"
       v-show="
         (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
       "
       v-else
+      class="d-flex flex-wrap justify-content-around"
     >
       <EmissionPlayerItem
-        v-bind:emission="e"
         v-for="e in emissions"
-        v-bind:key="e.emissionId"
+        :key="e.emissionId"
+        :emission="e"
         class="m-3 flex-shrink"
         :class="mainRubriquage(e)"
-        :rubriqueName="rubriquesId(e)"
+        :rubrique-name="rubriquesId(e)"
         @emissionNotVisible="displayCount--"
       />
     </ul>
     <button
+      v-show="!allFetched && loaded"
       class="btn"
       :class="buttonPlus ? 'btn-linkPlus' : 'btn-more'"
-      @click="displayMore"
       :disabled="inFetching"
-      v-show="!allFetched && loaded"
       :aria-label="$t('See more')"
+      @click="displayMore"
     >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
+      <template v-if="buttonPlus">
+        {{ $t('See more') }}
+      </template>
+      <div class="saooti-plus" />
     </button>
   </div>
 </template>
 
-<style lang="scss">
-.loading-title {
-  margin: 0.4rem 0 0;
-}
-.emission-list {
-  align-self: stretch;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-  /*For ie11 */
-  display: flex;
-  flex-wrap: wrap;
-  /* end */
-
-  display: grid; /* 1 */
-  grid-gap: 1rem; /* 3 */
-  justify-content: space-between; /* 4 */
-}
-.twoEmissions {
-  grid-template-columns: repeat(auto-fill, 49%); /* 2 */
-}
-
-.threeEmissions {
-  grid-template-columns: repeat(auto-fill, 32%); /* 2 */
-}
-
-/** PHONES*/
-@media (max-width: 1200px) {
-  .emission-list {
-    grid-template-columns: auto;
-  }
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import emissionApi from '@/api/emissions';
-import EmissionItem from './EmissionItem.vue';
-import EmissionPlayerItem from './EmissionPlayerItem.vue';
-
 import { state } from '../../../store/paramStore';
 
-import { defineComponent } from 'vue'
+import { Emission } from '@/store/class/emission';
+import { Rubrique } from '@/store/class/rubrique';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const EmissionItem = defineAsyncComponent(() => import('./EmissionItem.vue'));
+const EmissionPlayerItem = defineAsyncComponent(() => import('./EmissionPlayerItem.vue'));
 export default defineComponent({
   name: 'EmissionList',
 
-  props: [
-    'first',
-    'size',
-    'query',
-    'organisationId',
-    'monetization',
-    'rubriqueId',
-    'rubriquageId',
-    'before',
-    'after',
-    'sort',
-    'showCount',
-    'noRubrique',
-    'includeHidden',
-  ],
-
   components: {
     EmissionItem,
     EmissionPlayerItem,
   },
 
-  mounted() {
-    this.fetchContent(true);
-    if (this.displayRubriquage) {
-      this.fetchRubriques();
-    }
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 12, type: Number },
+    query: { default: undefined, type: String},
+    iabId: { default: undefined, type: Number },
+    organisationId: { default: undefined, type: String},
+    monetization: { default: 'UNDEFINED', type: String},
+    before: { default: undefined, type: String},
+    after: { default: undefined, type: String},
+    sort: { default: 'DATE', type: String},
+    showCount: { default: false, type: Boolean },
+    includeHidden: { 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> },
   },
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      dfirst: this.$props.first,
-      dsize: this.$props.size,
-      totalCount: 0,
-      displayCount: 0,
-      emissions: [] as any,
-      rubriques: undefined as any,
-      inFetching: false,
+      loading: true as boolean,
+      loaded: false as boolean,
+      dfirst: this.first as number,
+      dsize: this.size as number,
+      totalCount: 0 as number,
+      displayCount: 0 as number,
+      emissions: [] as Array<Emission>,
+      rubriques: undefined as Array<Rubrique>|undefined,
+      inFetching: false as boolean,
     };
   },
 
   computed: {
-    allFetched():boolean {
+    allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
-    buttonPlus() {
+    buttonPlus(): boolean {
       return state.generalParameters.buttonPlus;
     },
-    smallItems() {
+    smallItems(): boolean {
       return state.emissionsPage.smallItems;
     },
-    itemPlayer() {
+    itemPlayer(): boolean {
       return state.emissionsPage.itemPlayer;
     },
-    displayRubriquage() {
+    displayRubriquage(): boolean {
       return state.emissionsPage.rubriquage;
     },
-    changed():any {
+    changed(): string {
       return `${this.first}|${this.size}|${this.organisationId}|${this.query}|${this.monetization}|${this.includeHidden}
-      ${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.sort}|${this.noRubrique}`;
+      ${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.sort}|${this.noRubriquageId}`;
     },
-    sortText():string {
+    sortText(): string {
       switch (this.sort) {
         case 'SCORE':
-          return this.$t('sort by score');
+          return this.$t('sort by score').toString();
         case 'LAST_PODCAST_DESC':
-          return this.$t('sort by date');
+          return this.$t('sort by date').toString();
         case 'NAME':
-          return this.$t('sort by alphabetical');
+          return this.$t('sort by alphabetical').toString();
         default:
-          return this.$t('sort by date');
+          return this.$t('sort by date').toString();
       }
     },
-    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;
     },
   },
+  watch: {
+    changed(): void {
+      this.fetchContent(true);
+    },
+  },
 
+  
+
+  mounted() {
+    this.fetchContent(true);
+    if (this.displayRubriquage) {
+      this.fetchRubriques();
+    }
+  },
   methods: {
-    async fetchContent(reset: boolean) {
+    async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
         this.emissions.length = 0;
@@ -192,30 +172,30 @@ export default defineComponent({
         this.loading = true;
         this.loaded = false;
       }
-      let param:any = {
+      const param: any = {
         first: this.dfirst,
         size: this.dsize,
         query: this.query,
         organisationId: this.organisation,
         monetisable: this.monetization,
-        rubriqueId: this.rubriqueId,
-        rubriquageId: this.rubriquageId,
+        iabId: this.iabId,
         before: this.before,
         after: this.after,
         sort: this.sort,
-        noRubrique: this.noRubrique,
+        noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
+        rubriqueId: this.rubriqueId.length ? this.rubriqueId : undefined,
+        rubriquageId: this.rubriquageId.length ? this.rubriquageId : undefined,
       };
       if (this.includeHidden) {
         param.includeHidden = this.includeHidden;
-        const data = await emissionApi.fetchEmissionsAdmin(this.$store, param);
+        const data = await emissionApi.fetchEmissionsAdmin(this.$store.state, param);
         this.afterFetching(reset, data);
       } else {
         const data = await octopusApi.fetchEmissions(param);
         this.afterFetching(reset, data);
       }
     },
-
-    afterFetching(reset: any, data: any) {
+    afterFetching(reset: boolean, data: any): void {
       if (reset) {
         this.emissions.length = 0;
         this.dfirst = 0;
@@ -223,7 +203,7 @@ export default defineComponent({
       this.loading = false;
       this.loaded = true;
       this.displayCount = data.count;
-      this.emissions = this.emissions.concat(data.result).filter((e:any) => {
+      this.emissions = this.emissions.concat(data.result).filter((e: Emission|null) => {
         if (null === e) {
           this.displayCount--;
         }
@@ -233,16 +213,15 @@ export default defineComponent({
       this.totalCount = data.count;
       this.inFetching = false;
     },
-
-    displayMore(event: { preventDefault: () => void; }) {
+    displayMore(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.fetchContent(false);
     },
-    async fetchRubriques() {
+    async fetchRubriques(): Promise<void> {
       const data = await octopusApi.fetchTopic(this.displayRubriquage);
       this.rubriques = data.rubriques;
     },
-    mainRubriquage(emission: { rubriqueIds: any[]; }) {
+    mainRubriquage(emission: Emission): string {
       if (
         emission.rubriqueIds &&
         emission.rubriqueIds[0] === state.emissionsPage.mainRubrique
@@ -250,7 +229,7 @@ export default defineComponent({
         return 'partenaireRubrique';
       return '';
     },
-    rubriquesId(emission: { rubriqueIds: string|any[]; }) {
+    rubriquesId(emission: Emission): string|undefined {
       if (
         !this.displayRubriquage ||
         !emission.rubriqueIds ||
@@ -259,19 +238,14 @@ 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[0]
       );
+      if(!rubrique){ return undefined; }
       return rubrique.name;
     },
   },
-
-  watch: {
-    changed: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>