@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/pages/Emission.vue

@@ -1,102 +1,126 @@
 <template>
   <div>
-    <div class="page-box" v-if="loaded && !error">
-      <h1 v-if="!isOuestFrance">{{ $t('Emission') }}</h1>
+    <div
+      v-if="loaded && !error"
+      class="page-box"
+    >
+      <h1 v-if="!isOuestFrance">
+        {{ $t('Emission') }}
+      </h1>
       <div class="d-flex">
         <div class="d-flex flex-column flex-grow">
           <EditBox
-            :emission="emission"
-            :rssEmission="rssEmission"
-            :isReady="isReady"
             v-if="editRight && isEditBox"
-          ></EditBox>
+            :emission="emission"
+            :rss-emission="rssEmission"
+            :ftp-emission="ftpEmission"
+            :is-ready="isReady"
+          />
           <div class="module-box">
-            <h2 v-if="!isOuestFrance">{{ name }}</h2>
-            <h1 v-else>{{ name }}</h1>
+            <h2 v-if="!isOuestFrance">
+              {{ name }}
+            </h2>
+            <h1 v-else>
+              {{ name }}
+            </h1>
             <div class="mb-5 mt-3 descriptionText">
               <img
+                v-if="!isOuestFrance"
                 :src="imageUrl"
                 :alt="$t('Emission name image', { name: name })"
-                class="img-box shadow-element float-left mr-3 mb-3"
-                v-if="!isOuestFrance"
+                class="img-box shadow-element float-start me-3 mb-3"
+              >
+              <p
+                class="html-wysiwyg-content"
+                v-html="urlify(description)"
               />
-              <p class="html-wysiwyg-content" v-html="urlify(description)"></p>
             </div>
             <ShareButtons
-              :emission="emission"
-              :bigRound="true"
               v-if="isRssButton"
-            ></ShareButtons>
+              :emission="emission"
+              :big-round="true"
+            />
           </div>
           <SubscribeButtons
-            :emission="emission"
             v-if="isShareButtons && countLink >= 1"
-          ></SubscribeButtons>
+            :emission="emission"
+          />
         </div>
         <div class="d-flex flex-column share-container">
           <SharePlayer
+            v-if="isSharePlayer && (authenticated || notExclusive)"
             :emission="emission"
             :exclusive="exclusive"
-            :notExclusive="notExclusive"
-            :organisationId="organisationId"
-            :isEducation="isEducation"
-            v-if="isSharePlayer && (authenticated || notExclusive)"
-          ></SharePlayer>
+            :not-exclusive="notExclusive"
+            :organisation-id="organisationId"
+            :is-education="isEducation"
+          />
           <ShareButtons
-            :emission="emission"
-            :notExclusive="notExclusive"
             v-if="isShareButtons"
-          ></ShareButtons>
+            :emission="emission"
+            :not-exclusive="notExclusive"
+          />
         </div>
       </div>
       <div v-if="editRight">
         <ShareDistribution
-          :emissionId="emissionId"
           v-if="isShareDistribution"
-        ></ShareDistribution>
+          :emission-id="emissionId"
+        />
       </div>
-      <LiveHorizontalList :emissionId="emissionId" v-if="!isPodcastmaker" />
+      <LiveHorizontalList
+        v-if="!isPodcastmaker"
+        :emission-id="emissionId"
+      />
       <PodcastFilterList
-        :emissionId="emissionId"
-        :categoryFilter="false"
-        :editRight="editRight"
-        :productorId="emission.orga.id"
         v-if="!isOuestFrance"
+        :emission-id="emissionId"
+        :category-filter="false"
+        :edit-right="editRight"
+        :productor-id="emission.orga.id"
         @fetch="fetch"
       />
       <PodcastList
+        v-else
         :first="0"
         :size="15"
-        :emissionId="emissionId"
+        :emission-id="emissionId"
         @fetch="fetch"
-        v-else
       />
     </div>
-    <div class="d-flex justify-content-center" v-if="!loaded">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading content ...') }}</h3>
+    <div
+      v-if="!loaded"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading content ...') }}
+      </h3>
     </div>
-    <div class="text-center" v-if="error">
+    <div
+      v-if="error"
+      class="text-center"
+    >
       <h3>{{ $t("Emission doesn't exist") }}</h3>
     </div>
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
-// @ is an alias to /src
-import EditBox from '@/components/display/edit/EditBox.vue';
-import SharePlayer from '../display/sharing/SharePlayer.vue';
-import ShareButtons from '../display/sharing/ShareButtons.vue';
-import SubscribeButtons from '../display/sharing/SubscribeButtons.vue';
-import ShareDistribution from '../display/sharing/ShareDistribution.vue';
-import PodcastFilterList from '../display/podcasts/PodcastFilterList.vue';
-import PodcastList from '../display/podcasts/PodcastList.vue';
-import LiveHorizontalList from '../display/live/LiveHorizontalList.vue';
 const octopusApi = require('@saooti/octopus-api');
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
+import { Emission } from '@/store/class/emission';
 
-import { defineComponent } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const PodcastFilterList = defineAsyncComponent(() => import('../display/podcasts/PodcastFilterList.vue'));
+const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
+const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
+const ShareDistribution = defineAsyncComponent(() => import('../display/sharing/ShareDistribution.vue'));
+const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
+const PodcastList = defineAsyncComponent(() => import('../display/podcasts/PodcastList.vue'));
+const SubscribeButtons = defineAsyncComponent(() => import('../display/sharing/SubscribeButtons.vue'));
+const LiveHorizontalList = defineAsyncComponent(() => import('../display/live/LiveHorizontalList.vue'));
 export default defineComponent({
   components: {
     PodcastFilterList,
@@ -108,111 +132,110 @@ export default defineComponent({
     SubscribeButtons,
     LiveHorizontalList,
   },
-
   mixins: [displayMethods],
-
-  mounted() {
-    this.getEmissionDetails(this.emissionId);
+  props: {
+    emissionId: { default: undefined, type: Number},
+    isEducation: { default: false, type: Boolean},
   },
-
-  props: ['emissionId', 'isEducation'],
   emits: ['emissionTitle'],
 
   data() {
     return {
-      loaded: false,
-      title: '',
-      emission: undefined as any,
-      error: false,
-      rssEmission: false,
-      exclusive: false,
-      notExclusive: false,
-      isReady: true,
-      dummyParam: new Date().getTime().toString(),
-      fetchLive: true,
+      loaded: false as boolean,
+      title: '' as string,
+      emission: undefined as Emission | undefined,
+      error: false as boolean,
+      rssEmission: false as boolean,
+      ftpEmission: false as boolean,
+      exclusive: false as boolean,
+      notExclusive: false as boolean,
+      isReady: true as boolean,
+      dummyParam: new Date().getTime().toString() as string,
+      fetchLive: true as boolean,
     };
   },
-
+  
   computed: {
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-
-    isEditBox() {
+    isEditBox(): boolean {
       return state.podcastPage.EditBox;
     },
-    isShareButtons() {
+    isShareButtons(): boolean {
       return state.podcastPage.ShareButtons;
     },
-    isSharePlayer() {
+    isSharePlayer(): boolean {
       return state.podcastPage.SharePlayer;
     },
-    isShareDistribution() {
+    isShareDistribution(): boolean {
       return state.podcastPage.ShareDistribution;
     },
-    isOuestFrance() {
+    isOuestFrance(): boolean {
       return state.emissionPage.ouestFranceStyle;
     },
-    isRssButton() {
+    isRssButton(): boolean {
       return state.emissionPage.rssButton;
     },
-    isPodcastmaker() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-    rssUrl():string {
+    rssUrl(): string {
       return state.generalParameters.ApiUri + 'rss/emission/' + this.emissionId;
     },
-    name():string {
+    name(): string {
       return this.emission ? this.emission.name : '';
     },
-
-    imageUrl():string {
+    imageUrl(): string {
       return this.emission
         ? this.emission.imageUrl + '?dummy=' + this.dummyParam
         : '';
     },
-
-    description():string {
+    description(): string {
       return this.emission ? this.emission.description : '';
     },
-
-    editRight() {
+    editRight(): boolean {
       if (
-        (this.authenticated && this.organisationId === this.emission.orga.id) ||
+        (this.authenticated && this.emission && this.organisationId === this.emission.orga.id) ||
         state.generalParameters.isAdmin
       )
         return true;
       return false;
     },
-    countLink() {
+    countLink(): number {
       let count = 0;
       if (this.emission && this.emission.annotations) {
+        if (undefined !== this.emission.annotations.amazon) count++;
         if (undefined !== this.emission.annotations.applePodcast) count++;
         if (undefined !== this.emission.annotations.deezer) count++;
         if (undefined !== this.emission.annotations.spotify) count++;
         if (undefined !== this.emission.annotations.tunein) count++;
-        if (undefined !== this.emission.annotations.tootak) count++;
         if (undefined !== this.emission.annotations.radioline) count++;
+        if (undefined !== this.emission.annotations.podcastAddict) count++;
+        if (undefined !== this.emission.annotations.playerFm) count++;
+        if (undefined !== this.emission.annotations.stitcher) count++;
       }
       return count;
     },
   },
-
   watch: {
-    emissionId(val) {
+    emissionId(): void {
       this.loaded = false;
       this.error = false;
-      this.getEmissionDetails(val);
+      this.getEmissionDetails();
     },
   },
 
+  mounted() {
+    this.getEmissionDetails();
+  },
   methods: {
-    async getEmissionDetails(emissionId:number) {
+    async getEmissionDetails(): Promise<void> {
       try {
-        const data = await octopusApi.fetchEmission(emissionId);
+        const data: Emission = await octopusApi.fetchEmission(this.emissionId);
         this.emission = data;
         this.$emit('emissionTitle', this.name);
         this.loaded = true;
@@ -220,6 +243,9 @@ export default defineComponent({
         if (this.emission.annotations.RSS) {
           this.rssEmission = true;
         }
+        if (this.emission.annotations.FTP) {
+          this.ftpEmission = true;
+        }
         if (this.emission.annotations.exclusive) {
           this.exclusive =
             'true' === this.emission.annotations.exclusive ? true : false;
@@ -243,5 +269,7 @@ export default defineComponent({
       } */
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/pages/Emissions.vue

@@ -1,154 +1,175 @@
 <template>
   <div class="page-box">
-    <h1 v-if="undefined === titlePage">{{ $t('All emissions') }}</h1>
-    <h1 v-else>{{ titlePage }}</h1>
+    <h1 v-if="undefined === titlePage">
+      {{ $t('All emissions') }}
+    </h1>
+    <h1 v-else>
+      {{ titlePage }}
+    </h1>
     <ProductorSearch
+      v-if="isProductorSearch"
       v-model:organisationId="organisationId"
-      :searchPattern="searchPattern"
+      :search-pattern="searchPattern"
       type="emission"
       @updateOrganisationId="updateOrganisationId"
       @updateSearchPattern="updateSearchPattern"
-      v-if="isProductorSearch"
     />
     <AdvancedSearch
-      :isEducation="isEducation"
-      :resetRubriquage="resetRubriquage"
-      :isEmission="true"
-      :isSearchBar="isProductorSearch"
-      :sortCriteria="sortEmission"
-      @updateRubriquage="updateRubriquage"
-      @updateRubrique="updateRubrique"
+      :is-education="isEducation"
+      :reset-rubriquage="resetRubriquage"
+      :is-emission="true"
+      :is-search-bar="isProductorSearch"
+      :sort-criteria="sortEmission"
+      :organisation-id="organisationId"
+      @updateCategory="updateCategory"
+      @updateRubriquageFilter="updateRubriquageFilter"
       @updateMonetization="updateMonetization"
       @updateFromDate="updateFromDate"
       @updateToDate="updateToDate"
       @updateSortCriteria="updateSortEmission"
       @includeHidden="updateHidden"
-      :organisationId="organisationId"
     />
     <EmissionList
-      :showCount="true"
+      :show-count="true"
       :first="first"
       :size="size"
       :query="searchPattern"
-      :organisationId="organisationId"
+      :organisation-id="organisationId"
       :monetization="monetization"
-      :rubriqueId="rubriqueId"
-      :rubriquageId="rubriquageId"
       :before="toDate"
       :after="fromDate"
       :sort="sortEmission"
-      :noRubrique="noRubrique"
-      :includeHidden="includeHidden"
+      :include-hidden="includeHidden"
+      :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 EmissionList from '../display/emission/EmissionList.vue';
-import ProductorSearch from '../display/filter/ProductorSearch.vue';
 import AdvancedSearch from '../display/filter/AdvancedSearch.vue';
 import { state } from '../../store/paramStore';
 
-import { defineComponent } from 'vue'
+import { Category } from '@/store/class/category';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ProductorSearch = defineAsyncComponent(() => import('../display/filter/ProductorSearch.vue'));
 export default defineComponent({
   components: {
     ProductorSearch,
     EmissionList,
     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 = 12;
-    }
-    if (this.$route.query.productor) {
-      this.organisationId = this.$route.query.productor;
-    }
+  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,
-      sortEmission: 'LAST_PODCAST_DESC',
-      noRubrique: undefined as any,
+      first: 0 as number,
+      size: 12 as number,
+      searchPattern: '' as string,
+      organisationId: undefined as string | undefined,
+      monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
+      emissionId: undefined as number | undefined,
+      iabId: undefined as number | undefined,
+      fromDate: undefined as string | undefined,
+      toDate: undefined as string | undefined,
+      resetRubriquage: false as boolean,
+      includeHidden: false as boolean,
+      sortEmission: 'LAST_PODCAST_DESC' as string, //  SCORE, DATE, POPULARITY, NAME, LAST_PODCAST_DESC
+      noRubriquageId: [] as Array<number>,
+      rubriquageId: [] as Array<number>,
+      rubriqueId: [] as Array<number>,
     };
   },
-
+  
   computed: {
-    isProductorSearch() {
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    categoryFilter(): Category|undefined{
+      return this.$store.state.filter.iab;
+    },
+    isProductorSearch(): boolean {
       return state.podcastsPage.ProductorSearch;
     },
-    isMonetizableFilter() {
+    isMonetizableFilter(): boolean {
       return state.podcastsPage.MonetizableFilter;
     },
-    titlePage() {
+    titlePage(): string|undefined {
       return state.emissionsPage.titlePage;
     },
   },
 
+  created() {
+    if (this.firstRoute) {
+      this.first = this.firstRoute;
+    }
+    if (this.sizeRoute) {
+      this.size = this.sizeRoute;
+    }
+    if(this.categoryFilter){
+      this.iabId = this.categoryFilter.id;
+    }
+    if (this.productor) {
+      this.organisationId = this.productor;
+    } else if (this.$store.state.filter.organisationId) {
+      this.organisationId = this.$store.state.filter.organisationId;
+    }
+    if(this.rubriqueFilter.length){
+      this.updateRubriquageFilter(this.rubriqueFilter);
+    }
+  },
   methods: {
-    updateHidden(value: boolean) {
+    updateHidden(value: boolean): void {
       this.includeHidden = value;
     },
-    updateSortEmission(value: string) {
+    updateSortEmission(value: string): void {
       this.sortEmission = 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;
+    updateCategory(value: number|undefined){
+      this.iabId = value;
     },
-    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 | undefined): 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.sortEmission = 'SCORE';
       } else {
@@ -156,9 +177,11 @@ export default defineComponent({
       }
       this.searchPattern = value;
     },
-    updateMonetization(value: any) {
+    updateMonetization(value: string): void {
       this.monetization = value;
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>