@saooti/octopus-sdk 0.28.16 → 1.1.1

package/src/components/pages/Podcasts.vue

@@ -3,94 +3,94 @@
     <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"
-      @updateCategory="updateCategory"
+      :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="updateMonetization"
-      @updateFromDate="updateFromDate"
-      @updateToDate="updateToDate"
-      @updateSortCriteria="updateSortCriteria"
-      @includeHidden="updateHidden"
-      @notValid="updateNotValid"
-      :organisationId="organisationId"
+      @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"
+      :emission-id="emissionId"
       :before="toDate"
       :after="fromDate"
-      :sortCriteria="sortCriteria"
-      :includeHidden="includeHidden"
-      :notValid="notValid"
-      :iabId="iabId"
-      :rubriqueId="rubriqueId"
-      :rubriquageId="rubriquageId"
-      :noRubriquageId="noRubriquageId"
+      :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 { Emission } from '@/store/class/general/emission';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 
-import Vue from 'vue';
-import { Emission } from '@/store/class/emission';
-import { Category } from '@/store/class/category';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
-export default Vue.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';
+const EmissionChooser = defineAsyncComponent(() => import('../display/emission/EmissionChooser.vue'));
+export default defineComponent({
+  name:"Podcasts",
   components: {
     PodcastList,
     ProductorSearch,
-    EmissionChooser: () => import('../display/emission/EmissionChooser.vue'),
+    EmissionChooser,
     AdvancedSearch,
   },
+  mixins:[orgaComputed],
   props: {
-    firstRoute: { default: 0 as number},
-    sizeRoute: { default: 12 as number},
-    productor: { default: undefined as string|undefined},
-    isEducation: { default: false as boolean},
+    productor: { default: undefined, type: String},
+    isEducation: { default: false, type: Boolean},
+    searchInit: { default: "", type: String}
   },
-
   data() {
     return {
       first: 0 as number,
-      size: 49 as number,
+      size: 30 as number,
       searchPattern: '' as string,
       organisationId: undefined as string|undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -108,83 +108,38 @@ export default Vue.extend({
     };
   },
 
-  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);
-    }
-  },
-  
   computed: {
-    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(): string {
-      return state.generalParameters.organisationId;
+    titleDisplay(): string{
+      return state.podcastsPage.titlePage ?? this.$t('All podcasts');
     },
     organisationRight(): boolean {
-      if (
-        (this.authenticated && this.myOrganisationId === this.organisationId) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-    filterOrga(): string|undefined {
-      return this.$store.state.filter.organisationId;
+      return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
+        true===state.generalParameters.isAdmin;
     },
     organisation(): string|undefined {
-      if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
-      return undefined;
-    },
-    isProductorSearch(): boolean {
-      return state.podcastsPage.ProductorSearch;
-    },
-    titlePage(): string|undefined {
-      return state.podcastsPage.titlePage;
-    },
-    isEmissionChooser(): boolean {
-      return state.podcastsPage.emissionChooser;
+      return this.organisationId ?? this.filterOrga;
     },
+    pageParameters(){
+      return {
+        isProductorSearch: state.podcastsPage.ProductorSearch,
+        isEmissionChooser: state.podcastsPage.emissionChooser
+      }
+    }
   },
+
+  created() {
+    this.initPodcastsPage();
+  },
+  
   methods: {
-    updateCategory(value: number|undefined){
-      this.iabId = value;
-    },
-    updateSortCriteria(value: string): void {
-      this.sortCriteria = value;
-    },
-    updateHidden(value: boolean): void {
-      this.includeHidden = value;
-    },
-    updateToDate(value: string): void {
-      this.toDate = value;
-    },
-    updateFromDate(value: string): void {
-      this.fromDate = value;
+    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);
+      }
     },
     updateRubriquageFilter(value: Array<RubriquageFilter>){
       const length = value.length;
@@ -212,26 +167,12 @@ export default Vue.extend({
       this.organisationId = value;
     },
     updateSearchPattern(value: string): void {
-      if ('' !== value) {
-        this.sortCriteria = 'SCORE';
-      } else {
-        this.sortCriteria = 'DATE';
-      }
+      this.sortCriteria = '' !== value ? 'SCORE' : 'DATE';
       this.searchPattern = value;
     },
-    updateMonetization(value: string): void {
-      this.monetization = value;
-    },
-    updateNotValid(value: boolean): void {
-      this.notValid = value;
-    },
     emissionSelected(emission: Emission): void {
-      if (emission && emission.emissionId) {
-        this.emissionId = emission.emissionId;
-      } else {
-        this.emissionId = undefined;
-      }
+      this.emissionId = emission && emission.emissionId ? emission.emissionId : undefined;
     },
   },
-});
-</script>
+})
+</script>

package/src/components/pages/Rubrique.vue

@@ -1,50 +1,42 @@
 <template>
   <div class="page-box">
     <h1>{{ title }}</h1>
-    <PodcastList :first="firstRoute" :size="sizeRoute" :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 Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue'
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+export default defineComponent({
+  name:"Rubrique",
   components: {
     PodcastList,
   },
   props: {
-    firstRoute: { default: 0 as number},
-    sizeRoute: { default: 12 as number},
-    rubriqueId: { default: undefined as number|undefined},
+    firstRoute: { default: 0, type: Number},
+    sizeRoute: { default: 30, type: Number},
+    rubriqueId: { default: undefined, type:  [ Number ]},
   },
-
   data() {
     return {
       title: '' as string,
     };
   },
-
-  mounted() {
-    this.extractTitle();
-  },
-
-  
-  computed: {},
-  methods: {
-    async extractTitle(): Promise<void> {
-      const data = await octopusApi.fetchRubric(this.rubriqueId);
-      this.title = data.name;
-    },
-  },
   watch: {
-    rubriqueId(): void {
-      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,116 +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">
-.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 Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "Search",
   components: {
     PodcastList,
+    ClassicSearch
   },
   props: {
-    queryRoute: { default: '' as string },
+    queryRoute: { default: '', type: String },
   },
-  
   data() {
     return {
       rawQuery: '' as string,
       noResult: false as boolean,
     };
   },
-
-  mounted() {
-    if (this.queryRoute) {
-      this.rawQuery = this.queryRoute;
-    }
-    if (this.$refs.search) {
-      (this.$refs.search as HTMLElement).focus();
-    }
-  },
-  
   computed: {
+    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 });
+    },
     query(): string {
-      if (this.rawQuery && this.rawQuery.length >= 3) return this.rawQuery;
-      return '';
+      return this.rawQuery && this.rawQuery.length >= 3 ? this.rawQuery : '';
     },
     hideBar(): boolean {
-      return state.searchPage.hideBar;
+      return (state.searchPage.hideBar as boolean);
     },
   },
-  methods: {
-    onListEmpty(): void {
-      if (this.hideBar) {
-        this.noResult = true;
-      }
-    },
-    onSearchBegin(): void {
+  watch: {
+    rawQuery(): void{
       if (this.hideBar) {
         this.noResult = false;
       }
     },
-  },
-  watch: {
-    query: {
-        handler(search: any): void {
-          this.rawQuery = search;
-        },
-      deep: true,
+    queryRoute: {
       immediate: true,
+      handler() {
+       this.rawQuery = this.queryRoute;
+      },
     },
-    queryRoute(): void{
-      this.rawQuery = this.queryRoute;
-    }
   },
-});
-</script>
+})
+</script>

package/src/helper/dom.ts

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

package/src/helper/duration.ts

@@ -1,5 +1,5 @@
 export default {
-  formatDuration(totalSeconds: number) {
+  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;

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

package/src/i18n.ts

@@ -0,0 +1,36 @@
+
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n';
+
+
+export function setupI18n(options = { locale: 'en' }, isEducation: boolean) {
+  const i18n = createI18n(options)
+  loadLocaleMessages(i18n.global, options.locale, isEducation);
+  return i18n;
+}
+
+export function setI18nLanguage(i18n: any, locale: string) {
+  i18n.locale = locale;
+  const html= document.querySelector('html');
+  if(html){
+    html.setAttribute('lang', locale);
+  }
+}
+
+export async function loadLocaleMessages(i18n: any, locale:string, isEducation: boolean) {
+	if(!i18n.messages[locale] || 0===Object.keys(i18n.messages[locale]).length){
+		let messages = await import(
+			`./locale/${locale}.ts`
+		)
+		messages = messages.default;
+		if(isEducation && ('fr'===locale || 'en'===locale)){
+			const messagesEdu = await import(
+				`./locale/education${locale}.ts`
+			);
+			messages ={...messages, ...messagesEdu.default};
+		}
+		i18n.setLocaleMessage(locale, messages);
+	}
+  setI18nLanguage(i18n, locale)
+  return nextTick();
+}