@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,256 +1,221 @@
 <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>
-    <div
-      v-if="showCount && loaded && emissions.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{ $t('Number emissions', { nb: displayCount }) + sortText }}
-    </div>
-    <ul
-      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--"
-      />
-    </ul>
-    <ul
-      class="d-flex flex-wrap justify-content-around"
-      v-show="
-        (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
-      "
-      v-else
-    >
-      <EmissionPlayerItem
-        v-bind:emission="e"
-        v-for="e in emissions"
-        v-bind:key="e.emissionId"
-        class="m-3 flex-shrink"
-        :class="mainRubriquage(e)"
-        :rubriqueName="rubriquesId(e)"
-        @emissionNotVisible="displayCount--"
-      />
-    </ul>
-    <button
-      class="btn"
-      :class="buttonPlus ? 'btn-linkPlus' : 'btn-more'"
-      @click="displayMore"
-      :disabled="inFetching"
-      v-show="!allFetched && loaded"
-      :aria-label="$t('See more')"
-    >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
-    </button>
-  </div>
+  <ListPaginate
+    id="emissionListPaginate"
+    v-model:first="dfirst"
+    v-model:rowsPerPage="dsize"
+    v-model:isMobile="isMobile"
+    :text-count="showCount && emissions.length > 1 ? $t('Number emissions', { nb: displayCount }) + sortText : undefined"
+    :total-count="totalCount"
+    :loading="loading"
+    :loading-text="loading?$t('Loading emissions ...'):undefined"
+  >
+    <template #list>
+      <ul
+        v-if="!itemPlayer"
+        class="emission-list"
+        :class="smallItems ? 'three-emissions' : 'two-emissions'"
+      >
+        <template
+          v-for="e in displayArray"
+          :key="e.emissionId"
+        >
+          <EmissionItem
+            v-if="0!==e.emissionId"
+            :emission="e"
+          />
+        </template>
+      </ul>
+      <div
+        v-else
+        v-show="(displayRubriquage && rubriques)||!displayRubriquage"
+        class="d-flex flex-wrap justify-content-around"
+      >
+        <template
+          v-for="e in displayArray"
+          :key="e.emissionId"
+        >
+          <EmissionPlayerItem
+            v-if="0!==e.emissionId"
+            :emission="e"
+            class="m-3 flex-shrink-0"
+            :class="mainRubriquage(e)"
+            :rubrique-name="rubriquesId(e)"
+            @emissionNotVisible="displayCount--"
+          />
+        </template>
+      </div>
+    </template>
+  </ListPaginate>
 </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 ListPaginate from '../list/ListPaginate.vue';
+import octopusApi from '@saooti/octopus-api';
+import { handle403 } from '../../mixins/handle403';
 import { state } from '../../../store/paramStore';
-
-import { defineComponent } from 'vue'
+import { Emission } from '@/store/class/general/emission';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { FetchParam } from '@/store/class/general/fetchParam';
+import { AxiosError } from 'axios';
+import { emptyEmissionData } from '@/store/typeAppStore';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+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,
+    ListPaginate
   },
 
-  mounted() {
-    this.fetchContent(true);
-    if (this.displayRubriquage) {
-      this.fetchRubriques();
-    }
+  mixins: [handle403],
+
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 30, 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,
+      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,
+      isMobile: false as boolean,
     };
   },
 
   computed: {
-    allFetched():boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus() {
-      return state.generalParameters.buttonPlus;
-    },
-    smallItems() {
-      return state.emissionsPage.smallItems;
+    displayArray(): Array<Emission>{
+      if(this.isMobile){
+        return this.emissions;
+      }
+      return this.emissions.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
+		},
+    smallItems(): boolean {
+      return (state.emissionsPage.smallItems as boolean);
     },
-    itemPlayer() {
-      return state.emissionsPage.itemPlayer;
+    itemPlayer(): boolean {
+      return (state.emissionsPage.itemPlayer as boolean);
     },
-    displayRubriquage() {
+    displayRubriquage(): number|undefined {
       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');
         case 'LAST_PODCAST_DESC':
-          return this.$t('sort by date');
+          return " "+this.$t('sort by date');
         case 'NAME':
-          return this.$t('sort by alphabetical');
+          return " "+this.$t('sort by alphabetical');
         default:
-          return this.$t('sort by date');
+          return " "+this.$t('sort by date');
       }
     },
-    filterOrga():any {
-      return this.$store.state.filter.organisationId;
-    },
-    organisation():any {
-      if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
-      return undefined;
+    organisation(): string|undefined {
+      return this.organisationId ?? this.$store.state.filter.organisationId;
     },
   },
+  watch: {
+    changed(): void {
+      this.reloadList();
+    },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.emissions[this.dfirst] || 0===this.emissions[this.dfirst].emissionId){
+				this.fetchContent(false);
+			}
+		},
+  },
 
+  mounted() {
+    this.fetchContent(true);
+    if (this.displayRubriquage) {
+      this.fetchRubriques();
+    }
+  },
   methods: {
-    async fetchContent(reset: boolean) {
-      this.inFetching = true;
-      if (reset) {
-        this.emissions.length = 0;
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
-      }
-      let param:any = {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
+    async fetchContent(reset: boolean): Promise<void> {
+      this.loading = true;
+      const param: FetchParam = {
         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,
+        includeHidden:this.includeHidden,
       };
-      if (this.includeHidden) {
-        param.includeHidden = this.includeHidden;
-        const data = await emissionApi.fetchEmissionsAdmin(this.$store, param);
-        this.afterFetching(reset, data);
-      } else {
-        const data = await octopusApi.fetchEmissions(param);
+      try {
+        const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Emission>;sort: string;}>(0, 'emission/search',param, true);
         this.afterFetching(reset, data);
+      } catch (error) {
+        this.handle403((error as AxiosError));
       }
     },
-
-    afterFetching(reset: any, data: any) {
+    afterFetching(reset: boolean, data: {count: number, result: Array<Emission>, sort: string}): void {
       if (reset) {
         this.emissions.length = 0;
-        this.dfirst = 0;
       }
-      this.loading = false;
-      this.loaded = true;
+      if(this.dfirst > this.emissions.length){
+        for (let i = this.emissions.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+          this.emissions.push(emptyEmissionData());
+        }
+      }
       this.displayCount = data.count;
-      this.emissions = this.emissions.concat(data.result).filter((e:any) => {
+      const responseEmissions = data.result.filter((e: Emission|null) => {
         if (null === e) {
           this.displayCount--;
         }
         return null !== e;
       });
-      this.dfirst += this.dsize;
+      this.emissions = this.emissions.slice(0, this.dfirst).concat(responseEmissions).concat(this.emissions.slice(this.dfirst+this.dsize, this.emissions.length));
       this.totalCount = data.count;
-      this.inFetching = false;
-    },
-
-    displayMore(event: { preventDefault: () => void; }) {
-      event.preventDefault();
-      this.fetchContent(false);
+      this.loading = false;
     },
-    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;
     },
-    mainRubriquage(emission: { rubriqueIds: any[]; }) {
-      if (
-        emission.rubriqueIds &&
-        emission.rubriqueIds[0] === state.emissionsPage.mainRubrique
-      )
-        return 'partenaireRubrique';
-      return '';
+    mainRubriquage(emission: Emission): string {
+      return emission.rubriqueIds?.[0] === state.emissionsPage.mainRubrique? 'partenaireRubrique': '';
     },
-    rubriquesId(emission: { rubriqueIds: string|any[]; }) {
+    rubriquesId(emission: Emission): string|undefined {
       if (
         !this.displayRubriquage ||
         !emission.rubriqueIds ||
@@ -259,19 +224,12 @@ 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>
+})
+</script>