@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/display/podcasts/PodcastList.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 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>
     <div v-if="loaded && !podcasts.length">
       <p>{{ $t('No podcast match your query') }}</p>
@@ -13,149 +18,136 @@
     >
       {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
     </div>
-    <ul class="podcast-list" v-show="loaded">
+    <ul
+      v-show="loaded"
+      class="podcast-list"
+    >
       <PodcastItem
-        v-bind:podcast="p"
         v-for="p in podcasts"
-        v-bind:key="p.podcastId"
+        :key="p.podcastId"
+        :podcast="p"
       />
     </ul>
     <button
+      v-show="!allFetched && loaded"
       class="btn"
       :class="buttonPlus ? 'btn-linkPlus mt-3' : '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">
-.podcast-list {
-  align-self: stretch;
-  flex-grow: 1;
-  margin: 1em 0 0;
-  padding: 0;
-  /*For ie11 */
-  display: flex;
-  flex-wrap: wrap;
-  /* end */
-  display: grid; /* 1 */
-  grid-template-columns: repeat(auto-fill, 13rem); /* 2 */
-  grid-gap: 1rem; /* 3 */
-  justify-content: space-between; /* 4 */
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .podcast-list {
-    align-self: auto;
-    justify-items: center;
-    display: flex;
-    justify-content: space-around;
-  }
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import podcastApi from '@/api/podcasts';
 import PodcastItem from './PodcastItem.vue';
 import { state } from '../../../store/paramStore';
 
+import { Podcast } from '@/store/class/podcast';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastList',
 
-  props: {
-    first: { default: 0 },
-    size: { default: 5 },
-    organisationId: { default: undefined as any },
-    emissionId: { default: undefined as any },
-    iabId: { default: undefined as any },
-    participantId: { default: undefined as any },
-    query: { default: undefined as any },
-    monetization: { default: undefined as any },
-    popularSort: { default: false },
-    reload: { default: false },
-    rubriqueId: { default: undefined as any },
-    rubriquageId: { default: undefined as any },
-    before: { default: undefined as any },
-    after: { default: undefined as any },
-    includeHidden: { default: false },
-    showCount: { default: false },
-    noRubrique: { default: undefined as any },
-    sortCriteria: { default: undefined as any },
-    notValid: { default: undefined as any },
-  },
-  emits: ['fetch', 'emptyList'],
-
   components: {
     PodcastItem,
   },
 
-  created() {
-    this.fetchContent(true);
+  props: {
+    first: { default: 0, type: Number},
+    size: { default: 12, type: Number},
+    organisationId: { default: undefined, type: String},
+    emissionId: { default: undefined, type: Number},
+    iabId: { default: undefined, type: Number},
+    participantId: { default: undefined, type: Number},
+    query: { default: undefined, type: String},
+    monetization: { default: undefined, type: String},
+    popularSort: { default: false, type: Boolean},
+    reload: { default: false, type: Boolean},
+    before: { default: undefined, type: String},
+    after: { default: undefined, type: String},
+    includeHidden: { default: false, type: Boolean},
+    showCount: { default: false, type: Boolean },
+    sortCriteria: { default: undefined, type: String},
+    notValid: { default: undefined , type: Boolean},
+    rubriqueId: { default: () => [], type: Array as ()=>Array<number> },
+    rubriquageId:{ default: () => [], type: Array as ()=>Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=>Array<number> },
   },
+  emits: ['fetch', 'emptyList'],
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      dfirst: this.$props.first,
-      dsize: this.$props.size,
-      totalCount: 0,
-      podcasts: [] 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,
+      podcasts: [] as Array<Podcast>,
+      inFetching: false as boolean,
     };
   },
-
+  
   computed: {
-    allFetched():boolean {
+    allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
-    buttonPlus() {
+    buttonPlus(): boolean {
       return state.generalParameters.buttonPlus;
     },
-    changed():any {
+    changed(): string {
       return `${this.first}|${this.size}|${this.organisation}|${this.emissionId}|${this.sortCriteria}|${this.sort}
       ${this.iabId}|${this.participantId}|${this.query}|${this.monetization}|${this.popularSort}|
-      ${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.includeHidden}|${this.noRubrique}|${this.notValid}`;
+      ${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.includeHidden}|${this.noRubriquageId}|${this.notValid}`;
     },
-    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;
     },
-    sort():string {
-      if (this.popularSort) return 'POPULARITY';
-      return this.sortCriteria;
+    sort(): string {
+      if (!this.popularSort && this.sortCriteria) return this.sortCriteria;
+      return 'POPULARITY';
     },
-    sortText():string {
+    sortText(): string {
       switch (this.sortCriteria) {
         case 'SCORE':
-          return this.$t('sort by score');
+          return this.$t('sort by score').toString();
         case 'DATE':
-          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();
       }
     },
-    isProduction() {
+    isProduction(): boolean {
       return state.generalParameters.isProduction;
     },
   },
-
+  watch: {
+    changed(): void {
+      this.fetchContent(true);
+    },
+    reload(): void {
+      this.fetchContent(true);
+    },
+  },
+  
+  created() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
+    async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
         this.podcasts.length = 0;
@@ -163,7 +155,7 @@ export default defineComponent({
         this.loading = true;
         this.loaded = false;
       }
-      let param:any = {
+      const param: any = {
         first: this.dfirst,
         size: this.dsize,
         organisationId: this.organisation,
@@ -173,11 +165,11 @@ export default defineComponent({
         query: this.query,
         monetisable: this.monetization,
         sort: this.sort,
-        rubriqueId: this.rubriqueId,
-        rubriquageId: this.rubriquageId,
         before: this.before,
         after: this.after,
-        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 (undefined !== this.notValid) {
         param.validity = !this.notValid;
@@ -187,15 +179,14 @@ export default defineComponent({
       }
       if (this.includeHidden) {
         param.includeHidden = this.includeHidden;
-        const data = await podcastApi.fetchPodcastsAdmin(this.$store, param);
+        const data = await podcastApi.fetchPodcastsAdmin(this.$store.state, param);
         this.afterFetching(reset, data);
       } else {
         const data = await octopusApi.fetchPodcasts(param);
         this.afterFetching(reset, data);
       }
     },
-
-    afterFetching(reset: any, data: any) {
+    afterFetching(reset: boolean, data: any): void {
       if (reset) {
         this.podcasts.length = 0;
         this.dfirst = 0;
@@ -204,7 +195,7 @@ export default defineComponent({
       }
       this.loading = false;
       this.loaded = true;
-      this.podcasts = this.podcasts.concat(data.result).filter((p: null) => {
+      this.podcasts = this.podcasts.concat(data.result).filter((p: Podcast|null) => {
         return null !== p;
       });
       this.$emit('fetch', this.podcasts);
@@ -215,24 +206,12 @@ export default defineComponent({
       }
       this.inFetching = false;
     },
-
-    displayMore(event: { preventDefault: () => void; }) {
+    displayMore(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.fetchContent(false);
     },
   },
-
-  watch: {
-    changed: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-    reload: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>

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

@@ -1,22 +1,41 @@
 <template>
   <div v-if="undefined !== tagList">
     <ul class="d-flex flex-wrap">
-      <li class="tagListElement" v-for="tag in tagList" :key="tag">
+      <li
+        v-for="tag in tagList"
+        :key="tag"
+        class="tagListElement"
+      >
         <router-link
           :to="{
             name: 'search',
             query: {
               query: tag,
-              productor: this.$store.state.filter.organisationId,
+              productor: $store.state.filter.organisationId,
             },
           }"
           class="tagListLink"
-          >{{ tag }}</router-link
         >
+          {{ tag }}
+        </router-link>
       </li>
     </ul>
   </div>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'TagList',
+  components: {},
+  props: {
+    tagList: { default: () => [], type: Array as ()=>Array<string>},
+  },
+
+  methods: {},
+})
+</script>
+
 <style lang="scss">
 .tagListElement {
   display: flex;
@@ -33,16 +52,4 @@
     color: #666;
   }
 }
-</style>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'TagList',
-  components: {},
-
-  props: ['tagList'],
-
-  methods: {},
-});
-</script>
+</style>