@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/pages/{Emission.vue → EmissionPage.vue}

@@ -3,12 +3,9 @@
     <template v-if="loaded && !error">
       <div class="page-element-title-container">
         <div class="page-element-title">
-          <h1>{{ $t('Emission') }}</h1>
+          <h1>{{ $t("Emission") }}</h1>
         </div>
-        <div
-          class="page-element-bg"
-          :style="backgroundDisplay"
-        />
+        <div class="page-element-bg" :style="backgroundDisplay" />
       </div>
       <div class="d-flex flex-column page-element">
         <div class="module-box">
@@ -19,13 +16,10 @@
               height="330"
               :alt="$t('Emission name image', { name: name })"
               class="img-box float-start me-3 mb-3"
-            >
+            />
             <h2>{{ name }}</h2>
             <!-- eslint-disable vue/no-v-html -->
-            <p
-              class="html-wysiwyg-content"
-              v-html="urlify(description)"
-            />
+            <p class="html-wysiwyg-content" v-html="urlify(description)" />
             <!-- eslint-enable -->
           </div>
           <EditBox
@@ -33,7 +27,7 @@
             :emission="emission"
             :rss-emission="rssEmission"
             :ftp-emission="ftpEmission"
-            @isUpdated="getEmissionDetails"
+            @is-updated="getEmissionDetails"
           />
         </div>
         <SharePlayer
@@ -74,30 +68,44 @@
       </div>
     </template>
     <ClassicLoading
-      :loading-text="!loaded?$t('Loading content ...'):undefined"
-      :error-text="error?$t(`Emission doesn't exist`):undefined"
+      :loading-text="!loaded ? $t('Loading content ...') : undefined"
+      :error-text="error ? $t(`Emission doesn't exist`) : undefined"
     />
   </div>
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import { state } from '../../stores/ParamSdkStore';
-import displayMethods from '../mixins/displayMethods';
-import imageProxy from '../mixins/imageProxy';
-import { orgaComputed } from '../mixins/orgaComputed';
-import { handle403 } from '../mixins/handle403';
-import { Emission } from '@/stores/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'));
+import octopusApi from "@saooti/octopus-api";
+import { state } from "../../stores/ParamSdkStore";
+import displayMethods from "../mixins/displayMethods";
+import imageProxy from "../mixins/imageProxy";
+import { orgaComputed } from "../mixins/orgaComputed";
+import { handle403 } from "../mixins/handle403";
+import { Emission } from "@/stores/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,
@@ -107,19 +115,19 @@ export default defineComponent({
     EditBox,
     SubscribeButtons,
     LiveHorizontalList,
-    ClassicLoading
+    ClassicLoading,
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {
-    emissionId: { default: undefined, type: Number},
-    isEducation: { default: false, type: Boolean},
+    emissionId: { default: undefined, type: Number },
+    isEducation: { default: false, type: Boolean },
   },
-  emits: ['emissionTitle'],
+  emits: ["emissionTitle"],
 
   data() {
     return {
       loaded: false as boolean,
-      title: '' as string,
+      title: "" as string,
       emission: undefined as Emission | undefined,
       error: false as boolean,
       rssEmission: false as boolean,
@@ -129,47 +137,61 @@ export default defineComponent({
       fetchLive: true as boolean,
     };
   },
-  
+
   computed: {
-    pageParameters(){
+    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),
+        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 as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
     rssUrl(): string {
       return `${state.generalParameters.ApiUri}rss/emission/${this.emissionId}`;
     },
     name(): string {
-      return this.emission?.name??'';
+      return this.emission?.name ?? "";
     },
     imageUrl(): string {
-      return this.emission? `${this.emission.imageUrl}`:'';
+      return this.emission ? `${this.emission.imageUrl}` : "";
     },
     description(): string {
-      return this.emission?.description??'';
+      return this.emission?.description ?? "";
     },
     editRight(): boolean {
-      return (true===this.authenticated && this.myOrganisationId === this.emission?.orga.id) ||
-        true===state.generalParameters.isAdmin
+      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', 'pocketCasts'];
+      const platformShare = [
+        "amazon",
+        "googlePodcasts",
+        "applePodcast",
+        "deezer",
+        "spotify",
+        "tunein",
+        "radioline",
+        "podcastAddict",
+        "playerFm",
+        "pocketCasts",
+      ];
       let count = 0;
       for (let i = 0, len = platformShare.length; i < len; i++) {
-        if (undefined !== this.emission?.annotations?.[platformShare[i]]) count++;
+        if (undefined !== this.emission?.annotations?.[platformShare[i]])
+          count++;
       }
       return count;
     },
-    backgroundDisplay():string{
-      if(!this.emission){
+    backgroundDisplay(): string {
+      if (!this.emission) {
         return "";
       }
       return `background-image: url('${this.emission.imageUrl}');`;
@@ -184,39 +206,48 @@ export default defineComponent({
     },
   },
   methods: {
-    initError():void{
+    initError(): void {
       this.error = true;
       this.loaded = true;
     },
-    handleAnnotations(){
+    handleAnnotations() {
       if (!this.emission || !this.emission.annotations) return;
-      this.rssEmission = 'RSS'===this.emission.annotations.SOURCE_KIND? true: false;
-      this.ftpEmission = 'FTP'===this.emission.annotations.SOURCE_KIND? true: false;
+      this.rssEmission =
+        "RSS" === this.emission.annotations.SOURCE_KIND ? true : false;
+      this.ftpEmission =
+        "FTP" === this.emission.annotations.SOURCE_KIND ? true : false;
       if (this.emission.annotations.exclusive) {
-        this.exclusive ='true' === this.emission.annotations.exclusive;
-        this.exclusive =this.exclusive && this.myOrganisationId !== this.emission.orga.id;
+        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;
+        this.notExclusive = "true" === this.emission.annotations.notExclusive;
       }
     },
     async getEmissionDetails(): Promise<void> {
       this.loaded = false;
       this.error = false;
       try {
-        this.emission = await octopusApi.fetchData<Emission>(0,'emission/'+this.emissionId);
-        if("PUBLIC"!==this.emission.orga.privacy && this.filterOrgaId!==this.emission.orga.id){
+        this.emission = await octopusApi.fetchData<Emission>(
+          0,
+          "emission/" + this.emissionId,
+        );
+        if (
+          "PUBLIC" !== this.emission.orga.privacy &&
+          this.filterOrgaId !== this.emission.orga.id
+        ) {
           this.initError();
           return;
         }
-        this.$emit('emissionTitle', this.name);
+        this.$emit("emissionTitle", this.name);
         this.loaded = true;
         this.handleAnnotations();
-      } catch(error) {
-        this.handle403((error as AxiosError));
+      } catch (error) {
+        this.handle403(error as AxiosError);
         this.initError();
       }
     },
   },
-})
-</script>
+});
+</script>

package/src/components/pages/{Emissions.vue → EmissionsPage.vue}

@@ -12,13 +12,13 @@
       :sort-criteria="sortEmission"
       :organisation-id="organisationId"
       :include-hidden="includeHidden"
-      @updateCategory="iabId = $event"
-      @updateRubriquageFilter="updateRubriquageFilter"
-      @updateMonetization="monetization = $event"
-      @updateFromDate="fromDate = $event"
-      @updateToDate="toDate = $event"
-      @updateSortCriteria="sortEmission = $event"
-      @includeHidden="includeHidden = $event"
+      @update-category="iabId = $event"
+      @update-rubriquage-filter="updateRubriquageFilter"
+      @update-monetization="monetization = $event"
+      @update-from-date="fromDate = $event"
+      @update-to-date="toDate = $event"
+      @update-sort-criteria="sortEmission = $event"
+      @include-hidden="includeHidden = $event"
     />
     <EmissionList
       :show-count="true"
@@ -40,66 +40,73 @@
 </template>
 
 <script lang="ts">
-import { orgaComputed } from '../mixins/orgaComputed';
-import EmissionList from '../display/emission/EmissionList.vue';
-import AdvancedSearch from '../display/filter/AdvancedSearch.vue';
-import { state } from '../../stores/ParamSdkStore';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const ProductorSearch = defineAsyncComponent(() => import('../display/filter/ProductorSearch.vue'));
+import { orgaComputed } from "../mixins/orgaComputed";
+import EmissionList from "../display/emission/EmissionList.vue";
+import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
+import { state } from "../../stores/ParamSdkStore";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { defineComponent, defineAsyncComponent } from "vue";
+const ProductorSearch = defineAsyncComponent(
+  () => import("../display/filter/ProductorSearch.vue"),
+);
 export default defineComponent({
   components: {
     ProductorSearch,
     EmissionList,
     AdvancedSearch,
   },
-  mixins:[orgaComputed],
+  mixins: [orgaComputed],
   props: {
-    productor: { default: undefined, type: String},
-    isEducation: { default: false, type: Boolean},
+    productor: { default: undefined, type: String },
+    isEducation: { default: false, type: Boolean },
   },
 
   data() {
     return {
       isInit: false as boolean,
-      searchPattern: '' as string,
+      searchPattern: "" as string,
       organisationId: undefined as string | undefined,
-      monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
+      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
+      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: {
-    ...mapState(useFilterStore, ['filterIab', 'filterRubrique']),
+    ...mapState(useFilterStore, ["filterIab", "filterRubrique"]),
     organisationRight(): boolean {
-      return (true===this.authenticated && this.myOrganisationId === this.organisationId) ||
-        true===state.generalParameters.isAdmin
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.organisationId) ||
+        true === state.generalParameters.isAdmin
+      );
     },
-    organisation(): string|undefined {
-      return this.organisationId?this.organisationId:this.filterOrgaId;
+    organisation(): string | undefined {
+      return this.organisationId ? this.organisationId : this.filterOrgaId;
     },
   },
-  watch:{
+  watch: {
     organisationId(): void {
-      if(!this.isInit){return;}
+      if (!this.isInit) {
+        return;
+      }
       this.resetRubriquage = !this.resetRubriquage;
       this.rubriquageId = [];
       this.rubriqueId = [];
       this.noRubriquageId = [];
     },
     searchPattern(value: string): void {
-      this.sortEmission = '' !== value ? 'SCORE' : 'DATE';
+      this.sortEmission = "" !== value ? "SCORE" : "DATE";
     },
   },
 
@@ -107,30 +114,30 @@ export default defineComponent({
     this.initComponent();
   },
   methods: {
-    initComponent(): void{
-      this.iabId =this.filterIab?.id;
-      this.organisationId = this.productor ?this.productor: this.filterOrgaId;
+    initComponent(): void {
+      this.iabId = this.filterIab?.id;
+      this.organisationId = this.productor ? this.productor : this.filterOrgaId;
       if (this.organisation && this.organisationRight) {
         this.includeHidden = true;
       }
-      if(this.filterRubrique.length){
+      if (this.filterRubrique.length) {
         this.updateRubriquageFilter(this.filterRubrique);
       }
       this.$nextTick(() => {
         this.isInit = true;
       });
     },
-    updateRubriquageFilter(value: Array<RubriquageFilter>){
+    updateRubriquageFilter(value: Array<RubriquageFilter>) {
       const length = value.length;
-      const allRubriquageId: Array<number>= [];
-      const noRubriquageId: Array<number>= [];
-      const rubriqueId: Array<number>= [];
+      const allRubriquageId: Array<number> = [];
+      const noRubriquageId: Array<number> = [];
+      const rubriqueId: Array<number> = [];
       for (let index = 0; index < length; index++) {
-        if(-1===value[index].rubriqueId){
+        if (-1 === value[index].rubriqueId) {
           noRubriquageId.push(value[index].rubriquageId);
-        } else if(0===value[index].rubriqueId){
+        } else if (0 === value[index].rubriqueId) {
           allRubriquageId.push(value[index].rubriquageId);
-        }else{
+        } else {
           rubriqueId.push(value[index].rubriqueId);
         }
       }
@@ -139,5 +146,5 @@ export default defineComponent({
       this.noRubriquageId = noRubriquageId;
     },
   },
-})
-</script>
+});
+</script>

package/src/components/pages/Error403Page.vue

@@ -8,8 +8,8 @@
           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>
+        />
+        <h2>{{ $t("You do not have the right to access this page") }}</h2>
       </div>
       <img
         width="600"
@@ -17,31 +17,32 @@
         class="stop-octopus-img"
         src="/img/403.webp"
         :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>
+      :href="authenticated ? '/sso/logout' : '/sso/login'"
+      >{{ authText }}</a
+    >
   </div>
 </template>
 
 <script lang="ts">
-import { state } from '../../stores/ParamSdkStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
+import { state } from "../../stores/ParamSdkStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'Error403Page',
+  name: "Error403Page",
   computed: {
-    ...mapState(useGeneralStore, ['metaTitle']),
+    ...mapState(useGeneralStore, ["metaTitle"]),
     authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+      return state.generalParameters.authenticated as boolean;
+    },
+    authText(): string {
+      return this.authenticated ? this.$t("Logout") : this.$t("Login");
     },
-    authText():string{
-      return this.authenticated ? this.$t('Logout') : this.$t('Login');
-    }
   },
   mounted() {
     document.title = this.metaTitle;
@@ -49,11 +50,11 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.octopus-app .not-auth-content{
+.octopus-app .not-auth-content {
   @media (max-width: 960px) {
     align-items: center;
   }
-  .stop-octopus-img{
+  .stop-octopus-img {
     width: 600px;
     height: auto;
     @media (max-width: 1400px) {
@@ -64,4 +65,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</style>

package/src/components/pages/HomePage.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="page-box">
+    <template v-if="0 === rubriquageFilter.length">
+      <PodcastInlineList
+        v-for="c in categories"
+        :key="c.id"
+        :iab-id="c.id"
+        :title="c.name"
+        :button-text="$t('All podcast button', { name: c.name })"
+      />
+    </template>
+    <template v-else>
+      <PodcastInlineList
+        v-for="r in rubriqueToShow"
+        :key="r.rubriqueId"
+        :rubrique-id="rubriqueId.concat(r.rubriqueId)"
+        :title="r.name"
+        :button-text="$t('All podcast button', { name: r.name })"
+      />
+      <template v-if="rubriqueDisplay && rubriqueDisplay.length > 0">
+        <PodcastInlineList
+          v-if="rubriqueDisplay.length < rubriqueMaxDisplay"
+          :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
+          :rubrique-id="rubriqueId"
+          :title="$t('Without rubric')"
+          :button-text="
+            $t('All podcast button', { name: $t('Without rubric') })
+          "
+        />
+        <router-link
+          v-else
+          :to="{
+            name: 'podcasts',
+            query: {
+              productor: filterOrgaId,
+              iabId: filterIab?.id,
+              rubriquesId: rubriqueQueryParam,
+            },
+          }"
+          class="btn btn-primary align-self-center width-fit-content mt-5 m-auto"
+        >
+          {{ $t("See more") }}
+        </router-link>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
+import { state } from "../../stores/ParamSdkStore";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
+import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+import { Category } from "@/stores/class/general/category";
+export default defineComponent({
+  name: "HomePage",
+  components: {
+    PodcastInlineList,
+  },
+  data() {
+    return {
+      rubriqueId: [] as Array<number>,
+      rubriqueMaxDisplay: 20 as number,
+    };
+  },
+  computed: {
+    ...mapState(useGeneralStore, ["storedCategories"]),
+    ...mapState(useFilterStore, [
+      "filterRubriquage",
+      "filterOrgaId",
+      "filterRubrique",
+      "filterRubriqueDisplay",
+      "filterIab",
+    ]),
+    rubriqueQueryParam(): string | undefined {
+      if (this.filterRubrique?.length) {
+        return this.filterRubrique
+          .map(
+            (value: RubriquageFilter) =>
+              value.rubriquageId + ":" + value.rubriqueId,
+          )
+          .join();
+      }
+      return undefined;
+    },
+    rubriqueDisplay(): Array<Rubrique> {
+      return this.filterRubriqueDisplay.filter(
+        (rubrique: Rubrique) => 0 !== rubrique.podcastCount,
+      );
+    },
+    rubriqueToShow(): Array<Rubrique> {
+      if (
+        !this.rubriqueDisplay ||
+        this.rubriqueDisplay.length < this.rubriqueMaxDisplay
+      ) {
+        return this.rubriqueDisplay ?? [];
+      }
+      return this.rubriqueDisplay.slice(0, this.rubriqueMaxDisplay);
+    },
+    rubriquageFilter(): Array<Rubriquage> {
+      return this.filterOrgaId ? this.filterRubriquage : [];
+    },
+    rubriqueFilter(): Array<RubriquageFilter> {
+      return this.filterRubrique;
+    },
+    categories(): Array<Category> {
+      if (this.filterIab) {
+        return [this.filterIab];
+      }
+      return this.storedCategories.filter((c: Category) => {
+        if (state.generalParameters.podcastmaker)
+          return c.podcastOrganisationCount;
+        return c.podcastCount;
+      });
+    },
+  },
+  watch: {
+    rubriqueFilter: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.updateRubriquageFilter();
+      },
+    },
+  },
+  methods: {
+    updateRubriquageFilter() {
+      const length = this.rubriqueFilter.length;
+      const rubriqueId: Array<number> = [];
+      for (let index = 0; index < length; index++) {
+        if (0 < this.rubriqueFilter[index].rubriqueId) {
+          rubriqueId.push(this.rubriqueFilter[index].rubriqueId);
+        }
+      }
+      this.rubriqueId = rubriqueId;
+    },
+  },
+});
+</script>