@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/pages/Podcasts.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div class="page-box">
     <div
@@ -6,71 +7,84 @@
         isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
       "
     >
-      <h1 v-if="undefined === titlePage" class="flex-shrink">
+      <h1
+        v-if="undefined === titlePage"
+        class="flex-shrink"
+      >
         {{ $t('All podcasts') }}
       </h1>
-      <h1 v-else class="flex-shrink">{{ titlePage }}</h1>
+      <h1
+        v-else
+        class="flex-shrink"
+      >
+        {{ titlePage }}
+      </h1>
       <EmissionChooser
-        @selected="emissionSelected"
         v-if="isEmissionChooser"
         :defaultanswer="$t('No emission filter')"
         width="auto"
-        class="ml-3"
+        class="ms-3"
+        @selected="emissionSelected"
       />
     </div>
     <ProductorSearch
-      :organisationId="organisationId"
-      :searchPattern="searchPattern"
+      v-if="isProductorSearch"
+      :organisation-id="organisationId"
+      :search-pattern="searchPattern"
       @updateOrganisationId="updateOrganisationId"
       @updateSearchPattern="updateSearchPattern"
-      v-if="isProductorSearch"
     />
     <AdvancedSearch
-      :isEducation="isEducation"
-      :isEmission="false"
-      :resetRubriquage="resetRubriquage"
-      :isSearchBar="isProductorSearch"
-      :sortCriteria="sortCriteria"
-      @updateRubriquage="updateRubriquage"
-      @updateRubrique="updateRubrique"
+      :is-education="isEducation"
+      :is-emission="false"
+      :reset-rubriquage="resetRubriquage"
+      :is-search-bar="isProductorSearch"
+      :sort-criteria="sortCriteria"
+      :organisation-id="organisationId"
+      @updateCategory="updateCategory"
+      @updateRubriquageFilter="updateRubriquageFilter"
       @updateMonetization="updateMonetization"
       @updateFromDate="updateFromDate"
       @updateToDate="updateToDate"
       @updateSortCriteria="updateSortCriteria"
       @includeHidden="updateHidden"
       @notValid="updateNotValid"
-      :organisationId="organisationId"
     />
     <PodcastList
-      :showCount="true"
+      :show-count="true"
       :first="first"
       :size="size"
-      :organisationId="organisationId"
+      :organisation-id="organisationId"
       :query="searchPattern"
       :monetization="monetization"
-      :emissionId="emissionId"
-      :rubriqueId="rubriqueId"
-      :rubriquageId="rubriquageId"
+      :emission-id="emissionId"
       :before="toDate"
       :after="fromDate"
-      :sortCriteria="sortCriteria"
-      :includeHidden="includeHidden"
-      :noRubrique="noRubrique"
-      :notValid="notValid"
+      :sort-criteria="sortCriteria"
+      :include-hidden="includeHidden"
+      :not-valid="notValid"
+      :iab-id="iabId"
+      :rubrique-id="rubriqueId"
+      :rubriquage-id="rubriquageId"
+      :no-rubriquage-id="noRubriquageId"
     />
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
-// @ is an alias to /src
 import PodcastList from '../display/podcasts/PodcastList.vue';
 import { state } from '../../store/paramStore';
 import ProductorSearch from '../display/filter/ProductorSearch.vue';
 import AdvancedSearch from '../display/filter/AdvancedSearch.vue';
-import EmissionChooser from '../display/emission/EmissionChooser.vue';
+import { Emission } from '@/store/class/emission';
+import { Category } from '@/store/class/category';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
 
-import { defineComponent } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const EmissionChooser = defineAsyncComponent(() => import('../display/emission/EmissionChooser.vue'));
 export default defineComponent({
+  name:"Podcasts",
+
   components: {
     PodcastList,
     ProductorSearch,
@@ -78,57 +92,48 @@ export default defineComponent({
     AdvancedSearch,
   },
 
-  props: ['isEducation'],
-
-  created() {
-    if (this.$route.query.first) {
-      this.first = this.$route.query.first;
-    } else {
-      this.first = 0;
-    }
-    if (this.$route.query.size) {
-      this.size = this.$route.query.size;
-    } else {
-      this.size = 49;
-    }
-    if (this.$route.query.productor) {
-      this.organisationId = this.$route.query.productor;
-    } else if (this.$store.state.filter.organisationId) {
-      this.organisationId = this.$store.state.filter.organisationId;
-    }
-    if (this.organisation && this.organisationRight) {
-      this.includeHidden = true;
-    }
+  props: {
+    firstRoute: { default: 0, type: Number},
+    sizeRoute: { default: 12, type: Number},
+    productor: { default: undefined, type: String},
+    isEducation: { default: false, type: Boolean},
   },
 
   data() {
     return {
-      first: undefined as any,
-      size: undefined as any,
-      searchPattern: '',
-      organisationId: undefined as any,
-      monetization: undefined as any,
-      rubriquageId: undefined as any,
-      rubriqueId: undefined as any,
-      emissionId: undefined as any,
-      fromDate: undefined as any,
-      toDate: undefined as any,
-      resetRubriquage: false,
-      includeHidden: false,
-      noRubrique: undefined as any,
-      sortCriteria: 'DATE',
-      notValid: false,
+      first: 0 as number,
+      size: 49 as number,
+      searchPattern: '' as string,
+      organisationId: undefined as string|undefined,
+      monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
+      emissionId: undefined as number|undefined,
+      fromDate: undefined as string|undefined,
+      toDate: undefined as string|undefined,
+      resetRubriquage: false as boolean,
+      includeHidden: false as boolean,
+      sortCriteria: 'DATE' as string, // SCORE, DATE, POPULARITY, NAME, LAST_PODCAST_DESC
+      notValid: false as boolean,
+      iabId: undefined as number | undefined,
+      noRubriquageId: [] as Array<number>,
+      rubriquageId: [] as Array<number>,
+      rubriqueId: [] as Array<number>,
     };
   },
 
   computed: {
-    authenticated():boolean {
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    categoryFilter(): Category|undefined{
+      return this.$store.state.filter.iab;
+    },
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-    myOrganisationId() {
+    myOrganisationId(): string {
       return state.generalParameters.organisationId;
     },
-    organisationRight() {
+    organisationRight(): boolean {
       if (
         (this.authenticated && this.myOrganisationId === this.organisationId) ||
         state.generalParameters.isAdmin
@@ -136,67 +141,91 @@ export default defineComponent({
         return true;
       return false;
     },
-    filterOrga():any {
+    filterOrga(): string|undefined {
       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;
     },
-    isProductorSearch() {
+    isProductorSearch(): boolean {
       return state.podcastsPage.ProductorSearch;
     },
-    titlePage() {
+    titlePage(): string|undefined {
       return state.podcastsPage.titlePage;
     },
-    isEmissionChooser() {
+    isEmissionChooser(): boolean {
       return state.podcastsPage.emissionChooser;
     },
   },
 
+  created() {
+    if (this.firstRoute) {
+      this.first = this.firstRoute;
+    }
+    if (this.sizeRoute) {
+      this.size = this.sizeRoute;
+    }
+    if (this.productor) {
+      this.organisationId = this.productor;
+    } else if (this.$store.state.filter.organisationId) {
+      this.organisationId = this.$store.state.filter.organisationId;
+    }
+    if (this.organisation && this.organisationRight) {
+      this.includeHidden = true;
+    }
+    if(this.categoryFilter){
+      this.iabId = this.categoryFilter.id;
+    }
+    if(this.rubriqueFilter.length){
+      this.updateRubriquageFilter(this.rubriqueFilter);
+    }
+  },
+  
+  
   methods: {
-    updateSortCriteria(value: string) {
+    updateCategory(value: number|undefined){
+      this.iabId = value;
+    },
+    updateSortCriteria(value: string): void {
       this.sortCriteria = value;
     },
-    updateHidden(value: boolean) {
+    updateHidden(value: boolean): void {
       this.includeHidden = value;
     },
-    updateToDate(value: any) {
+    updateToDate(value: string): void {
       this.toDate = value;
     },
-    updateFromDate(value: any) {
+    updateFromDate(value: string): void {
       this.fromDate = value;
     },
-    updateRubriquage(value: number) {
-      if (-1 !== value) {
-        this.rubriquageId = value;
-      } else {
-        this.rubriquageId = undefined;
-      }
-      this.noRubrique = undefined;
-      this.rubriqueId = undefined;
-    },
-    updateRubrique(value: number) {
-      if (-1 === value) {
-        this.noRubrique = true;
-        this.rubriqueId = undefined;
-      } else if (0 === value) {
-        this.rubriqueId = undefined;
-        this.noRubrique = undefined;
-      } else {
-        this.rubriqueId = value;
-        this.noRubrique = undefined;
+    updateRubriquageFilter(value: Array<RubriquageFilter>){
+      const length = value.length;
+      const allRubriquageId: Array<number>= [];
+      const noRubriquageId: Array<number>= [];
+      const rubriqueId: Array<number>= [];
+      for (let index = 0; index < length; index++) {
+        if(-1===value[index].rubriqueId){
+          noRubriquageId.push(value[index].rubriquageId);
+        } else if(0===value[index].rubriqueId){
+          allRubriquageId.push(value[index].rubriquageId);
+        }else{
+          rubriqueId.push(value[index].rubriqueId);
+        }
       }
+      this.rubriquageId = allRubriquageId;
+      this.rubriqueId = rubriqueId;
+      this.noRubriquageId = noRubriquageId;
     },
-    updateOrganisationId(value: any) {
+    updateOrganisationId(value: string): void {
       this.resetRubriquage = !this.resetRubriquage;
-      this.rubriquageId = undefined;
-      this.rubriqueId = undefined;
-      this.noRubrique = undefined;
+      this.rubriquageId = [];
+      this.rubriqueId = [];
+      this.noRubriquageId = [];
       this.organisationId = value;
     },
-    updateSearchPattern(value: string) {
+    updateSearchPattern(value: string): void {
       if ('' !== value) {
         this.sortCriteria = 'SCORE';
       } else {
@@ -204,13 +233,13 @@ export default defineComponent({
       }
       this.searchPattern = value;
     },
-    updateMonetization(value: any) {
+    updateMonetization(value: string): void {
       this.monetization = value;
     },
-    updateNotValid(value: boolean) {
+    updateNotValid(value: boolean): void {
       this.notValid = value;
     },
-    emissionSelected(emission: { emissionId: any; }) {
+    emissionSelected(emission: Emission): void {
       if (emission && emission.emissionId) {
         this.emissionId = emission.emissionId;
       } else {
@@ -218,5 +247,7 @@ export default defineComponent({
       }
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/pages/Rubrique.vue

@@ -1,48 +1,54 @@
 <template>
   <div class="page-box">
     <h1>{{ title }}</h1>
-    <PodcastList :first="first" :size="size" :rubriqueId="rubriqueId" />
+    <PodcastList
+      :first="firstRoute"
+      :size="sizeRoute"
+      :rubrique-id="rubriqueId"
+    />
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
-// @ is an alias to /src
 const octopusApi = require('@saooti/octopus-api');
 import PodcastList from '../display/podcasts/PodcastList.vue';
-
 import { defineComponent } from 'vue'
 export default defineComponent({
+  name:"Rubrique",
+
   components: {
     PodcastList,
   },
 
-  props: ['first', 'size', 'rubriqueId'],
-
-  mounted() {
-    this.extractTitle();
+  props: {
+    firstRoute: { default: 0, type: Number},
+    sizeRoute: { default: 12, type: Number},
+    rubriqueId: { default: undefined, type:  [ Number ]},
   },
 
   data() {
     return {
-      title: '',
+      title: '' as string,
     };
   },
 
-  computed: {},
+  watch: {
+    rubriqueId(): void {
+      this.extractTitle();
+    },
+  },
+
+  mounted() {
+    this.extractTitle();
+  },
 
   methods: {
-    async extractTitle() {
+    async extractTitle(): Promise<void> {
       const data = await octopusApi.fetchRubric(this.rubriqueId);
       this.title = data.name;
     },
   },
-
-  watch: {
-    rubriqueId() {
-      this.extractTitle();
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/pages/Search.vue

@@ -1,127 +1,131 @@
 <template>
   <div class="page-box">
-    <h1 v-if="!hideBar">{{ $t('Podcast search') }}</h1>
+    <h1 v-if="!hideBar">
+      {{ $t('Podcast search') }}
+    </h1>
     <h1 v-else-if="!noResult">
-      {{ $t('Search results', { query: this.rawQuery }) }}
+      {{ $t('Search results', { query: rawQuery }) }}
+    </h1>
+    <h1 v-else>
+      {{ $t('Search - no results', { query: rawQuery }) }}
     </h1>
-    <h1 v-else>{{ $t('Search - no results', { query: this.rawQuery }) }}</h1>
-    <div class="position-relative champs-searchPage w-75" v-if="!hideBar">
+    <div
+      v-if="!hideBar"
+      class="position-relative champs-searchPage w-75"
+    >
       <input
         id="search"
-        type="text"
         ref="search"
         v-model="rawQuery"
+        type="text"
         class="search-input border-primary w-100 p-2 input-no-outline"
         :placeholder="$t('Please type at least three characters')"
-        @change="onSearchBegin"
         autofocus
+        @change="onSearchBegin"
+      >
+      <label
+        for="search"
+        class="d-inline"
+        :aria-label="$t('Search')"
       />
-      <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
       <div
-        class="saooti-search-bounty search-icon-container"
         v-if="!rawQuery"
-      ></div>
+        class="saooti-search-bounty search-icon-container"
+      />
       <div
+        v-else
         class="saooti-cross search-icon-container c-hand"
         @click="rawQuery = ''"
-        v-else
-      ></div>
+      />
     </div>
     <PodcastList
+      v-if="!!query"
       :query="query"
       :first="0"
       :size="20"
       @emptyList="onListEmpty"
-      v-if="!!query"
     />
   </div>
 </template>
 
-<style lang="scss">
-.search-icon-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-}
-.champs-searchPage {
-  margin: 0 auto;
-  input {
-    margin: 1rem 0 !important;
-    padding-right: 40px !important;
-  }
-  .search-icon-container {
-    margin: 0 1em 0 0;
-  }
-}
-</style>
-
 <script lang="ts">
-// @ is an alias to /src
 import { state } from '../../store/paramStore';
 import PodcastList from '../display/podcasts/PodcastList.vue';
-
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue';
 export default defineComponent({
+  name: "Search",
+
   components: {
     PodcastList,
   },
-  setup() {
-    const search:any =ref(null);
-    return {
-      search,
-    };
-  },
 
-  mounted() {
-    if (this.$route.query.query) {
-      this.rawQuery = this.$route.query.query;
-    }
-    if (this.search) {
-      this.search.focus();
-    }
+  props: {
+    queryRoute: { default: '', type: String },
   },
-
+  
   data() {
     return {
-      rawQuery: '' as any,
-      noResult: false,
+      rawQuery: '' as string,
+      noResult: false as boolean,
     };
   },
 
   computed: {
-    query():string {
+    query(): string {
       if (this.rawQuery && this.rawQuery.length >= 3) return this.rawQuery;
       return '';
     },
-    hideBar() {
+    hideBar(): boolean {
       return state.searchPage.hideBar;
     },
   },
 
+  watch: {
+    query: {
+        handler(search: any): void {
+          this.rawQuery = search;
+        },
+      deep: true,
+      immediate: true,
+    },
+    queryRoute(): void{
+      this.rawQuery = this.queryRoute;
+    }
+  },
+
+  mounted() {
+    if (this.queryRoute) {
+      this.rawQuery = this.queryRoute;
+    }
+    if (this.$refs.search) {
+      (this.$refs.search as HTMLElement).focus();
+    }
+  },
+  
   methods: {
-    onListEmpty() {
+    onListEmpty(): void {
       if (this.hideBar) {
         this.noResult = true;
       }
     },
-    onSearchBegin() {
+    onSearchBegin(): void {
       if (this.hideBar) {
         this.noResult = false;
       }
     },
   },
-
-  watch: {
-    '$route.query.query': {
-      handler(search) {
-        this.rawQuery = search;
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+.champs-searchPage {
+  margin: 0 auto;
+  input {
+    margin: 1rem 0 !important;
+    padding-right: 40px !important;
+  }
+  .search-icon-container {
+    margin: 0 1em 0 0;
+  }
+}
+</style>

package/src/helper/dom.ts

@@ -1,7 +1,7 @@
 export default {
-  convertRemToPixels(rem: number) {
+  convertRemToPixels(rem: number): number {
     return (
       rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
     );
   },
-};
+};

package/src/helper/duration.ts

@@ -1,33 +1,43 @@
 export default {
-  formatDuration(totalSeconds: number) {
-    var hours = Math.floor(totalSeconds / 3600);
-    var minutes = Math.floor((totalSeconds - hours * 3600) / 60);
-    var seconds = totalSeconds - hours * 3600 - minutes * 60;
-    var hoursString = "";
-    var minutesString = "";
-    var secondsString = "";
+  formatDuration(totalSeconds: number): string {
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds - hours * 3600) / 60);
+    const seconds = totalSeconds - hours * 3600 - minutes * 60;
+    let hoursString = "";
+    let minutesString = "";
+    let secondsString = "";
 
     if (hours > 0) {
       if (hours < 10) {
         hoursString = '0' + hours;
+      }else{
+        hoursString = hours.toString();
       }
       if (minutes < 10) {
         minutesString = '0' + minutes;
+      }else{
+        minutesString = minutes.toString();
       }
       if (seconds < 10) {
         secondsString = '0' + seconds;
+      }else{
+        secondsString = seconds.toString();
       }
 
       return hoursString + "'" + minutesString + "'" + secondsString + "'";
     } else {
       if (minutes < 10) {
         minutesString = '0' + minutes;
+      }else{
+        minutesString = minutes.toString();
       }
       if (seconds < 10) {
         secondsString = '0' + seconds;
+      }else{
+        secondsString = seconds.toString();
       }
 
       return minutesString + "'" + secondsString + "'";
     }
   },
-};
+};