@saooti/octopus-sdk 0.28.16 → 1.1.1

package/src/components/pages/Emission.vue

@@ -1,110 +1,117 @@
 <template>
-  <div>
-    <div class="page-box" v-if="loaded && !error">
-      <h1 v-if="!isOuestFrance">{{ $t('Emission') }}</h1>
+  <div class="page-box">
+    <div
+      v-if="loaded && !error"
+    >
+      <h1>{{ $t('Emission') }}</h1>
       <div class="d-flex">
-        <div class="d-flex flex-column flex-grow">
+        <div class="d-flex flex-column flex-grow-1">
           <EditBox
+            v-if="editRight && pageParameters.isEditBox"
             :emission="emission"
-            :rssEmission="rssEmission"
-            :ftpEmission="ftpEmission"
-            :isReady="isReady"
-            v-if="editRight && isEditBox"
-          ></EditBox>
+            :rss-emission="rssEmission"
+            :ftp-emission="ftpEmission"
+            @isUpdated="getEmissionDetails"
+          />
           <div class="module-box">
-            <h2 v-if="!isOuestFrance">{{ name }}</h2>
-            <h1 v-else>{{ name }}</h1>
+            <h2>
+              {{ name }}
+            </h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
-                :src="imageUrl"
+                v-lazy="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"
+              >
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="html-wysiwyg-content"
+                v-html="urlify(description)"
               />
-              <p class="html-wysiwyg-content" v-html="urlify(description)"></p>
+              <!-- eslint-enable -->
             </div>
-            <ShareButtons
-              :emission="emission"
-              :bigRound="true"
-              v-if="isRssButton"
-            ></ShareButtons>
           </div>
           <SubscribeButtons
+            v-if="pageParameters.isShareButtons && countLink >= 1"
             :emission="emission"
-            v-if="isShareButtons && countLink >= 1"
-          ></SubscribeButtons>
+          />
         </div>
-        <div class="d-flex flex-column share-container">
+        <div class="d-flex flex-column flex-grow-mobile">
           <SharePlayer
+            v-if="pageParameters.isSharePlayer && (authenticated || notExclusive)"
             :emission="emission"
             :exclusive="exclusive"
-            :notExclusive="notExclusive"
-            :organisationId="organisationId"
-            :isEducation="isEducation"
-            v-if="isSharePlayer && (authenticated || notExclusive)"
-          ></SharePlayer>
+            :not-exclusive="notExclusive"
+            :organisation-id="myOrganisationId"
+            :is-education="isEducation"
+          />
           <ShareButtons
+            v-if="pageParameters.isShareButtons"
             :emission="emission"
-            :notExclusive="notExclusive"
-            v-if="isShareButtons"
-          ></ShareButtons>
+            :not-exclusive="notExclusive"
+          />
         </div>
       </div>
       <div v-if="editRight">
         <ShareDistribution
-          :emissionId="emissionId"
-          v-if="isShareDistribution"
-        ></ShareDistribution>
+          v-if="pageParameters.isShareDistribution"
+          :emission-id="emissionId"
+        />
       </div>
-      <LiveHorizontalList :emissionId="emissionId" v-if="!isPodcastmaker" />
-      <PodcastFilterList
-        :emissionId="emissionId"
-        :categoryFilter="false"
-        :editRight="editRight"
-        :productorId="emission.orga.id"
-        v-if="!isOuestFrance"
-        @fetch="fetch"
-      />
-      <PodcastList
-        :first="0"
-        :size="15"
-        :emissionId="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>
-    <div class="text-center" v-if="error">
-      <h3>{{ $t("Emission doesn't exist") }}</h3>
+      <template v-if="pageParameters.isDisplayPodcasts">
+        <LiveHorizontalList
+          v-if="!isPodcastmaker"
+          :emission-id="emissionId"
+        />
+        <PodcastFilterList
+          :emission-id="emissionId"
+          :category-filter="false"
+          :edit-right="editRight"
+          :productor-id="emission.orga.id"
+        />
+      </template>
     </div>
+    <ClassicLoading
+      :loading-text="!loaded?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Emission doesn't exist`):undefined"
+    />
   </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 { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
-import { Emission } from '@/store/class/emission';
-
-export default displayMethods.extend({
+import { orgaComputed } from '../mixins/orgaComputed';
+import { handle403 } from '../mixins/handle403';
+import { Emission } from '@/store/class/general/emission';
+import ClassicLoading from '../form/ClassicLoading.vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { AxiosError } from 'axios';
+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 SubscribeButtons = defineAsyncComponent(() => import('../display/sharing/SubscribeButtons.vue'));
+const LiveHorizontalList = defineAsyncComponent(() => import('../display/live/LiveHorizontalList.vue'));
+export default defineComponent({
   components: {
-    PodcastFilterList: () => import('../display/podcasts/PodcastFilterList.vue'),
-    SharePlayer: () => import('../display/sharing/SharePlayer.vue'),
-    ShareButtons: () => import('../display/sharing/ShareButtons.vue'),
-    ShareDistribution: () => import('../display/sharing/ShareDistribution.vue'),
-    EditBox: () => import('@/components/display/edit/EditBox.vue'),
-    PodcastList: () => import('../display/podcasts/PodcastList.vue'),
-    SubscribeButtons: () => import('../display/sharing/SubscribeButtons.vue'),
-    LiveHorizontalList: () => import('../display/live/LiveHorizontalList.vue'),
+    PodcastFilterList,
+    SharePlayer,
+    ShareButtons,
+    ShareDistribution,
+    EditBox,
+    SubscribeButtons,
+    LiveHorizontalList,
+    ClassicLoading
   },
+  mixins: [displayMethods, handle403, orgaComputed],
   props: {
-    emissionId: { default: undefined as number|undefined},
-    isEducation: { default: false as boolean},
+    emissionId: { default: undefined, type: Number},
+    isEducation: { default: false, type: Boolean},
   },
+  emits: ['emissionTitle'],
 
   data() {
     return {
@@ -116,125 +123,92 @@ export default displayMethods.extend({
       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,
     };
   },
-
-  mounted() {
-    this.getEmissionDetails();
-  },
   
   computed: {
-    organisationId(): string {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return state.generalParameters.authenticated;
-    },
-    isEditBox(): boolean {
-      return state.podcastPage.EditBox;
-    },
-    isShareButtons(): boolean {
-      return state.podcastPage.ShareButtons;
-    },
-    isSharePlayer(): boolean {
-      return state.podcastPage.SharePlayer;
-    },
-    isShareDistribution(): boolean {
-      return state.podcastPage.ShareDistribution;
-    },
-    isOuestFrance(): boolean {
-      return state.emissionPage.ouestFranceStyle;
-    },
-    isRssButton(): boolean {
-      return state.emissionPage.rssButton;
+    pageParameters(){
+      return {
+        isEditBox : (state.podcastPage.EditBox as boolean),
+        isShareButtons: (state.podcastPage.ShareButtons as boolean),
+        isSharePlayer: (state.podcastPage.SharePlayer as boolean),
+        isShareDistribution:(state.podcastPage.ShareDistribution as boolean),
+        isDisplayPodcasts:(state.emissionPage.isDisplayPodcasts as boolean),
+      };
     },
     isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
+      return (state.generalParameters.podcastmaker as boolean);
     },
     rssUrl(): string {
-      return state.generalParameters.ApiUri + 'rss/emission/' + this.emissionId;
+      return `${state.generalParameters.ApiUri}rss/emission/${this.emissionId}`;
     },
     name(): string {
-      return this.emission ? this.emission.name : '';
+      return this.emission?.name??'';
     },
     imageUrl(): string {
-      return this.emission
-        ? this.emission.imageUrl + '?dummy=' + this.dummyParam
-        : '';
+      return this.emission? `${this.emission.imageUrl}?dummy=${this.dummyParam}`:'';
     },
     description(): string {
-      return this.emission ? this.emission.description : '';
+      return this.emission?.description??'';
     },
     editRight(): boolean {
-      if (
-        (this.authenticated && this.organisationId === this.emission!.orga.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+      return (true===this.authenticated && this.myOrganisationId === this.emission?.orga.id) ||
+        true===state.generalParameters.isAdmin
     },
     countLink(): number {
+      const platformShare = ['amazon','googlePodcasts','applePodcast', 'deezer', 'spotify', 'tunein',
+       'radioline', 'podcastAddict', 'playerFm', 'stitcher', 'pocketCasts'];
       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.radioline) count++;
-        if (undefined !== this.emission.annotations.podcastAddict) count++;
-        if (undefined !== this.emission.annotations.playerFm) count++;
-        if (undefined !== this.emission.annotations.stitcher) count++;
+      for (let i = 0, len = platformShare.length; i < len; i++) {
+        if (undefined !== this.emission?.annotations?.[platformShare[i]]) count++;
       }
       return count;
     },
   },
+  watch: {
+    emissionId: {
+      immediate: true,
+      handler() {
+        this.getEmissionDetails();
+      },
+    },
+  },
   methods: {
+    initError():void{
+      this.error = true;
+      this.loaded = true;
+    },
+    handleAnnotations(){
+      if (!this.emission || !this.emission.annotations) return;
+      this.rssEmission = this.emission.annotations.RSS? true: false;
+      this.ftpEmission = this.emission.annotations.FTP? true: false;
+      if (this.emission.annotations.exclusive) {
+        this.exclusive ='true' === this.emission.annotations.exclusive;
+        this.exclusive =this.exclusive && this.myOrganisationId !== this.emission.orga.id;
+      }
+      if (this.emission.annotations.notExclusive) {
+        this.notExclusive ='true' === this.emission.annotations.notExclusive;
+      }
+    },
     async getEmissionDetails(): Promise<void> {
+      this.loaded = false;
+      this.error = false;
       try {
-        const data = await octopusApi.fetchEmission(this.emissionId);
-        this.emission = data;
-        this.$emit('emissionTitle', this.name);
-        this.loaded = true;
-        if (!this.emission!.annotations) return;
-        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;
-          this.exclusive =
-            this.exclusive && this.organisationId !== this.emission!.orga.id;
+        this.emission = await octopusApi.fetchData<Emission>(0,'emission/'+this.emissionId);
+        if("PUBLIC"!==this.emission.orga.privacy && this.filterOrga!==this.emission.orga.id){
+          this.initError();
+          return;
         }
-        if (this.emission!.annotations.notExclusive) {
-          this.notExclusive =
-            'true' === this.emission!.annotations.notExclusive ? true : false;
-        }
-      } catch {
-        this.error = true;
+        this.$emit('emissionTitle', this.name);
         this.loaded = true;
+        this.handleAnnotations();
+      } catch(error) {
+        this.handle403((error as AxiosError));
+        this.initError();
       }
     },
-    fetch(/* podcasts */) {
-      // Interdire supression si podcast en process
-      /* let found = podcasts.find(element => element.processingStatus === 'PLANNED' ||element.processingStatus === 'PROCESSING');
-      if(found){
-        this.isReady = false;
-      } */
-    },
-  },
-  watch: {
-    emissionId(): void {
-      this.loaded = false;
-      this.error = false;
-      this.getEmissionDetails();
-    },
   },
-});
-</script>
+})
+</script>

package/src/components/pages/Emissions.vue

@@ -1,76 +1,73 @@
 <template>
   <div class="page-box">
-    <h1 v-if="undefined === titlePage">{{ $t('All emissions') }}</h1>
-    <h1 v-else>{{ titlePage }}</h1>
+    <h1>{{ titleDisplay }}</h1>
     <ProductorSearch
-      :organisationId.sync="organisationId"
-      :searchPattern="searchPattern"
+      v-if="isProductorSearch"
+      v-model:organisationId="organisationId"
+      :search-pattern="searchPattern"
       type="emission"
       @updateOrganisationId="updateOrganisationId"
       @updateSearchPattern="updateSearchPattern"
-      v-if="isProductorSearch"
     />
     <AdvancedSearch
-      :isEducation="isEducation"
-      :resetRubriquage="resetRubriquage"
-      :isEmission="true"
-      :isSearchBar="isProductorSearch"
-      :sortCriteria="sortEmission"
-      @updateCategory="updateCategory"
+      :is-education="isEducation"
+      :reset-rubriquage="resetRubriquage"
+      :is-emission="true"
+      :is-search-bar="isProductorSearch"
+      :sort-criteria="sortEmission"
+      :organisation-id="organisationId"
+      :include-hidden="includeHidden"
+      @updateCategory="iabId = $event"
       @updateRubriquageFilter="updateRubriquageFilter"
-      @updateMonetization="updateMonetization"
-      @updateFromDate="updateFromDate"
-      @updateToDate="updateToDate"
-      @updateSortCriteria="updateSortEmission"
-      @includeHidden="updateHidden"
-      :organisationId="organisationId"
+      @updateMonetization="monetization = $event"
+      @updateFromDate="fromDate = $event"
+      @updateToDate="toDate = $event"
+      @updateSortCriteria="sortEmission = $event"
+      @includeHidden="includeHidden = $event"
     />
     <EmissionList
-      :showCount="true"
+      :show-count="true"
       :first="first"
       :size="size"
       :query="searchPattern"
-      :organisationId="organisationId"
+      :organisation-id="organisationId"
       :monetization="monetization"
       :before="toDate"
       :after="fromDate"
       :sort="sortEmission"
-      :includeHidden="includeHidden"
-      :iabId="iabId"
-
-      :rubriqueId="rubriqueId"
-      :rubriquageId="rubriquageId"
-      :noRubriquageId="noRubriquageId"
+      :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 { orgaComputed } from '../mixins/orgaComputed';
 import EmissionList from '../display/emission/EmissionList.vue';
 import AdvancedSearch from '../display/filter/AdvancedSearch.vue';
 import { state } from '../../store/paramStore';
-
-import Vue from 'vue';
-import { Category } from '@/store/class/category';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
-export default Vue.extend({
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ProductorSearch = defineAsyncComponent(() => import('../display/filter/ProductorSearch.vue'));
+export default defineComponent({
   components: {
-    ProductorSearch: () => import('../display/filter/ProductorSearch.vue'),
+    ProductorSearch,
     EmissionList,
     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},
   },
 
   data() {
     return {
       first: 0 as number,
-      size: 12 as number,
+      size: 30 as number,
       searchPattern: '' as string,
       organisationId: undefined as string | undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -86,59 +83,36 @@ export default Vue.extend({
       rubriqueId: [] as Array<number>,
     };
   },
-
-  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);
-    }
-  },
   
   computed: {
-    rubriqueFilter(): Array<RubriquageFilter>{
-      return this.$store.state.filter.rubriqueFilter;
+    titleDisplay(): string{
+      return state.emissionsPage.titlePage??this.$t('All emissions');
     },
-    categoryFilter(): Category|undefined{
-      return this.$store.state.filter.iab;
+    isProductorSearch(): boolean{
+      return (state.podcastsPage.ProductorSearch as boolean);
     },
-    isProductorSearch(): boolean {
-      return state.podcastsPage.ProductorSearch;
+    organisationRight(): boolean {
+      return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
+        true===state.generalParameters.isAdmin
     },
-    isMonetizableFilter(): boolean {
-      return state.podcastsPage.MonetizableFilter;
-    },
-    titlePage(): string|undefined {
-      return state.emissionsPage.titlePage;
+    organisation(): string|undefined {
+      return this.organisationId??this.filterOrga;
     },
   },
+
+  created() {
+    this.initComponent();
+  },
   methods: {
-    updateHidden(value: boolean): void {
-      this.includeHidden = value;
-    },
-    updateSortEmission(value: string): void {
-      this.sortEmission = value;
-    },
-    updateToDate(value: string): void {
-      this.toDate = value;
-    },
-    updateFromDate(value: string): void {
-      this.fromDate = value;
-    },
-    updateCategory(value: number|undefined){
-      this.iabId = value;
+    initComponent(): void{
+      this.iabId =this.$store.state.filter.iab?.id;
+      this.organisationId = this.productor?? this.filterOrga;
+      if (this.organisation && this.organisationRight) {
+        this.includeHidden = true;
+      }
+      if(this.$store.state.filter.rubriqueFilter.length){
+        this.updateRubriquageFilter(this.$store.state.filter.rubriqueFilter);
+      }
     },
     updateRubriquageFilter(value: Array<RubriquageFilter>){
       const length = value.length;
@@ -166,16 +140,9 @@ export default Vue.extend({
       this.organisationId = value;
     },
     updateSearchPattern(value: string): void {
-      if ('' !== value) {
-        this.sortEmission = 'SCORE';
-      } else {
-        this.sortEmission = 'LAST_PODCAST_DESC';
-      }
+      this.sortEmission = '' !== value ? 'SCORE' : 'LAST_PODCAST_DESC';
       this.searchPattern = value;
     },
-    updateMonetization(value: string): void {
-      this.monetization = value;
-    },
   },
-});
-</script>
+})
+</script>

package/src/components/pages/Error403Page.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="page-box page-box-absolute bg-white justify-content-evenly">
+    <div class="not-auth-content d-flex-column justify-content-between">
+      <div class="d-flex flex-column justify-content-around">
+        <img
+          class="logo-octopus"
+          src="/img/logo_octopus_final.svg"
+          :alt="$t('Logo of main page')"
+        >
+        <h2>{{ $t('You do not have the right to access this page' ) }}</h2>
+      </div>
+      <img
+        class="stop-octopus-img"
+        src="/img/403.jpeg"
+        :alt="$t('You do not have the right to access this page')"
+      >
+    </div>
+    
+    <a
+      class="btn btn-primary"
+      :href="authenticated ?'/sso/logout':'/sso/login'"
+    >{{ authText }}</a>
+  </div>
+</template>
+
+<script lang="ts">
+import { state } from '../../store/paramStore';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'Error403Page',
+  computed: {
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+    authText():string{
+      return this.authenticated ? this.$t('Logout') : this.$t('Login');
+    }
+  },
+  mounted() {
+    document.title = this.$store.state.general.metaTitle;
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app .not-auth-content{
+  @media (max-width: 960px) {
+    align-items: center;
+  }
+  .stop-octopus-img{
+    width: 600px;
+    height: auto;
+    @media (max-width: 1400px) {
+      width: 400px;
+    }
+    @media (max-width: 450px) {
+      width: 80%;
+    }
+  }
+}
+</style>