@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/pages/Podcasts.vue

@@ -3,220 +3,176 @@
     <div
       class="d-flex"
       :class="
-        isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
+        pageParameters.isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
       "
     >
-      <h1 v-if="undefined === titlePage" class="flex-shrink">
-        {{ $t('All podcasts') }}
+      <h1 class="flex-shrink-0">
+        {{ titleDisplay }}
       </h1>
-      <h1 v-else class="flex-shrink">{{ titlePage }}</h1>
       <EmissionChooser
-        @selected="emissionSelected"
-        v-if="isEmissionChooser"
+        v-if="pageParameters.isEmissionChooser"
         :defaultanswer="$t('No emission filter')"
         width="auto"
-        class="ml-3"
+        class="ms-3"
+        @selected="emissionSelected"
       />
     </div>
     <ProductorSearch
-      :organisationId="organisationId"
-      :searchPattern="searchPattern"
+      v-if="pageParameters.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"
-      @updateMonetization="updateMonetization"
-      @updateFromDate="updateFromDate"
-      @updateToDate="updateToDate"
-      @updateSortCriteria="updateSortCriteria"
-      @includeHidden="updateHidden"
-      @notValid="updateNotValid"
-      :organisationId="organisationId"
+      :is-education="isEducation"
+      :is-emission="false"
+      :reset-rubriquage="resetRubriquage"
+      :is-search-bar="pageParameters.isProductorSearch"
+      :sort-criteria="sortCriteria"
+      :include-hidden="includeHidden"
+      :organisation-id="organisationId"
+      @updateCategory="iabId=$event"
+      @updateRubriquageFilter="updateRubriquageFilter"
+      @updateMonetization="monetization = $event"
+      @updateFromDate="fromDate = $event"
+      @updateToDate="toDate = $event"
+      @updateSortCriteria="sortCriteria=$event"
+      @includeHidden="includeHidden = $event"
+      @notValid="notValid = $event"
     />
     <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 { orgaComputed } from '../mixins/orgaComputed';
 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/general/emission';
+import { RubriquageFilter } from '@/store/class/rubrique/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,
     EmissionChooser,
     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;
-    }
+  mixins:[orgaComputed],
+  props: {
+    productor: { default: undefined, type: String},
+    isEducation: { default: false, type: Boolean},
+    searchInit: { default: "", type: String}
   },
-
   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: 30 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 {
-      return state.generalParameters.authenticated;
-    },
-    myOrganisationId() {
-      return state.generalParameters.organisationId;
-    },
-    organisationRight() {
-      if (
-        (this.authenticated && this.myOrganisationId === this.organisationId) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-    filterOrga():any {
-      return this.$store.state.filter.organisationId;
+    titleDisplay(): string{
+      return state.podcastsPage.titlePage ?? this.$t('All podcasts');
     },
-    organisation():any {
-      if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
-      return undefined;
+    organisationRight(): boolean {
+      return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
+        true===state.generalParameters.isAdmin;
     },
-    isProductorSearch() {
-      return state.podcastsPage.ProductorSearch;
-    },
-    titlePage() {
-      return state.podcastsPage.titlePage;
-    },
-    isEmissionChooser() {
-      return state.podcastsPage.emissionChooser;
+    organisation(): string|undefined {
+      return this.organisationId ?? this.filterOrga;
     },
+    pageParameters(){
+      return {
+        isProductorSearch: state.podcastsPage.ProductorSearch,
+        isEmissionChooser: state.podcastsPage.emissionChooser
+      }
+    }
   },
 
+  created() {
+    this.initPodcastsPage();
+  },
+  
   methods: {
-    updateSortCriteria(value: string) {
-      this.sortCriteria = value;
-    },
-    updateHidden(value: boolean) {
-      this.includeHidden = value;
-    },
-    updateToDate(value: any) {
-      this.toDate = value;
-    },
-    updateFromDate(value: any) {
-      this.fromDate = value;
-    },
-    updateRubriquage(value: number) {
-      if (-1 !== value) {
-        this.rubriquageId = value;
-      } else {
-        this.rubriquageId = undefined;
+    initPodcastsPage(){
+      this.searchPattern = this.searchInit ?? '';
+      this.organisationId = this.productor ?? this.filterOrga;
+      this.includeHidden = this.organisation && this.organisationRight ? true : false;
+      this.iabId =this.$store.state.filter.iab?.id;
+      if(this.$store.state.filter.rubriqueFilter.length){
+        this.updateRubriquageFilter(this.$store.state.filter.rubriqueFilter);
       }
-      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) {
-      if ('' !== value) {
-        this.sortCriteria = 'SCORE';
-      } else {
-        this.sortCriteria = 'DATE';
-      }
+    updateSearchPattern(value: string): void {
+      this.sortCriteria = '' !== value ? 'SCORE' : 'DATE';
       this.searchPattern = value;
     },
-    updateMonetization(value: any) {
-      this.monetization = value;
-    },
-    updateNotValid(value: boolean) {
-      this.notValid = value;
-    },
-    emissionSelected(emission: { emissionId: any; }) {
-      if (emission && emission.emissionId) {
-        this.emissionId = emission.emissionId;
-      } else {
-        this.emissionId = undefined;
-      }
+    emissionSelected(emission: Emission): void {
+      this.emissionId = emission && emission.emissionId ? emission.emissionId : undefined;
     },
   },
-});
-</script>
+})
+</script>

package/src/components/pages/Rubrique.vue

@@ -1,48 +1,42 @@
 <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 octopusApi from '@saooti/octopus-api';
 import PodcastList from '../display/podcasts/PodcastList.vue';
-
 import { defineComponent } from 'vue'
+import { Rubrique } from '@/store/class/rubrique/rubrique';
 export default defineComponent({
+  name:"Rubrique",
   components: {
     PodcastList,
   },
-
-  props: ['first', 'size', 'rubriqueId'],
-
-  mounted() {
-    this.extractTitle();
+  props: {
+    firstRoute: { default: 0, type: Number},
+    sizeRoute: { default: 30, type: Number},
+    rubriqueId: { default: undefined, type:  [ Number ]},
   },
-
   data() {
     return {
-      title: '',
+      title: '' as string,
     };
   },
-
-  computed: {},
-
-  methods: {
-    async extractTitle() {
-      const data = await octopusApi.fetchRubric(this.rubriqueId);
-      this.title = data.name;
-    },
-  },
-
   watch: {
-    rubriqueId() {
-      this.extractTitle();
+    rubriqueId: {
+      immediate: true,
+      async handler() {
+        const data = await octopusApi.fetchData<Rubrique>(0, 'rubrique/'+this.rubriqueId); 
+        this.title = data.name;
+      },
     },
   },
-});
-</script>
+})
+</script>

package/src/components/pages/Search.vue

@@ -1,127 +1,70 @@
 <template>
   <div class="page-box">
-    <h1 v-if="!hideBar">{{ $t('Podcast search') }}</h1>
-    <h1 v-else-if="!noResult">
-      {{ $t('Search results', { query: this.rawQuery }) }}
-    </h1>
-    <h1 v-else>{{ $t('Search - no results', { query: this.rawQuery }) }}</h1>
-    <div class="position-relative champs-searchPage w-75" v-if="!hideBar">
-      <input
-        id="search"
-        type="text"
-        ref="search"
-        v-model="rawQuery"
-        class="search-input border-primary w-100 p-2 input-no-outline"
-        :placeholder="$t('Please type at least three characters')"
-        @change="onSearchBegin"
-        autofocus
-      />
-      <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
-      <div
-        class="saooti-search-bounty search-icon-container"
-        v-if="!rawQuery"
-      ></div>
-      <div
-        class="saooti-cross search-icon-container c-hand"
-        @click="rawQuery = ''"
-        v-else
-      ></div>
-    </div>
+    <h1>{{ titlePage }}</h1>
+    <ClassicSearch
+      v-if="!hideBar"
+      v-model:textInit="rawQuery"
+      :autofocus="true"
+      id-checkbox="search-page-input"
+      :label="$t('Please type at least three characters')"
+    />
     <PodcastList
+      v-if="!!query"
       :query="query"
       :first="0"
       :size="20"
-      @emptyList="onListEmpty"
-      v-if="!!query"
+      @emptyList="noResult = true"
     />
   </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 ClassicSearch from '../form/ClassicSearch.vue';
 import PodcastList from '../display/podcasts/PodcastList.vue';
-
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue';
 export default defineComponent({
+  name: "Search",
   components: {
     PodcastList,
+    ClassicSearch
   },
-  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 {
-      if (this.rawQuery && this.rawQuery.length >= 3) return this.rawQuery;
-      return '';
+    titlePage():string{
+      if(!this.hideBar){
+        return this.$t('Podcast search');
+      }
+      const locale = !this.noResult ? 'Search results' : 'Search - no results';
+      return this.$t(locale, { query: this.rawQuery });
     },
-    hideBar() {
-      return state.searchPage.hideBar;
+    query(): string {
+      return this.rawQuery && this.rawQuery.length >= 3 ? this.rawQuery : '';
     },
-  },
-
-  methods: {
-    onListEmpty() {
-      if (this.hideBar) {
-        this.noResult = true;
-      }
+    hideBar(): boolean {
+      return (state.searchPage.hideBar as boolean);
     },
-    onSearchBegin() {
+  },
+  watch: {
+    rawQuery(): void{
       if (this.hideBar) {
         this.noResult = false;
       }
     },
-  },
-
-  watch: {
-    '$route.query.query': {
-      handler(search) {
-        this.rawQuery = search;
-      },
-      deep: true,
+    queryRoute: {
       immediate: true,
+      handler() {
+       this.rawQuery = this.queryRoute;
+      },
     },
   },
-});
-</script>
+})
+</script>

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 + "'";
     }
   },
-};
+};

package/src/helper/useEventListener.ts

@@ -0,0 +1,18 @@
+
+import {onBeforeUnmount, onMounted, Ref} from 'vue'
+
+function useEventListener(
+  element: Ref<HTMLElement | undefined>,
+  event: string,
+  callback: EventListener
+): void {
+  onMounted(() => {
+    element?.value?.addEventListener(event, callback)
+  })
+
+  onBeforeUnmount(() => {
+    element?.value?.removeEventListener(event, callback)
+  })
+}
+
+export default useEventListener