@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/pages/LivesPage.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="page-box">
+    <template v-if="!filterOrgaId && !organisationId && !isPodcastmaker">
+      <div class="align-self-start fw-bold mb-2">
+        {{ $t("Please chose a productor") }}
+      </div>
+      <OrganisationChooser
+        :defaultanswer="$t('Please chose a productor')"
+        @selected="onOrganisationSelected"
+      />
+    </template>
+    <template v-if="filterOrgaId || organisationId">
+      <LiveList :organisation-id="organisationId" />
+      <RadioList :organisation-id="organisationId" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { state } from "../../stores/ParamSdkStore";
+import { Organisation } from "@/stores/class/general/organisation";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+const LiveList = defineAsyncComponent(
+  () => import("../display/live/LiveList.vue"),
+);
+const RadioList = defineAsyncComponent(
+  () => import("../display/live/RadioList.vue"),
+);
+const OrganisationChooser = defineAsyncComponent(
+  () => import("../display/organisation/OrganisationChooser.vue"),
+);
+export default defineComponent({
+  components: {
+    LiveList,
+    RadioList,
+    OrganisationChooser,
+  },
+  props: {
+    organisationId: { default: undefined, type: String },
+    productor: { default: undefined, type: String },
+  },
+  emits: ["update:organisationId"],
+
+  computed: {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
+  },
+  created() {
+    if (this.productor) {
+      this.$emit("update:organisationId", this.productor);
+    } else if (this.filterOrgaId) {
+      this.$emit("update:organisationId", this.filterOrgaId);
+    }
+  },
+  methods: {
+    onOrganisationSelected(organisation: Organisation | undefined): void {
+      this.$emit("update:organisationId", organisation?.id);
+    },
+  },
+});
+</script>

package/src/components/pages/PageNotFound.vue

@@ -4,41 +4,52 @@
     :style="backgroundStyle"
   >
     <div class="position-absolute module-box">
-      <h1>{{ $t('Oops') }}</h1>
-      <h2>{{ $t('The page you are looking for cannot be found') }}</h2>
+      <h1>{{ $t("Oops") }}</h1>
+      <h2>{{ $t("The page you are looking for cannot be found") }}</h2>
       <router-link
         class="btn btn-primary"
         :to="{
           name: 'home',
-          query: { productor: filterOrgaId,
-                   iabId:filterIab?.id,
-                   rubriquesId: rubriqueQueryParam},
+          query: {
+            productor: filterOrgaId,
+            iabId: filterIab?.id,
+            rubriquesId: rubriqueQueryParam,
+          },
         }"
       >
-        {{ $t('Back to home') }}
+        {{ $t("Back to home") }}
       </router-link>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { useFilterStore } from '@/stores/FilterStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'PageNotFound',
-  computed:{
-    ...mapState(useGeneralStore, ['metaTitle']),
-    ...mapState(useFilterStore, ['filterRubrique', 'filterIab', 'filterOrgaId']),
-    rubriqueQueryParam(): string|undefined{
-      if(this.filterRubrique?.length){
-        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+  name: "PageNotFound",
+  computed: {
+    ...mapState(useGeneralStore, ["metaTitle"]),
+    ...mapState(useFilterStore, [
+      "filterRubrique",
+      "filterIab",
+      "filterOrgaId",
+    ]),
+    rubriqueQueryParam(): string | undefined {
+      if (this.filterRubrique?.length) {
+        return this.filterRubrique
+          .map(
+            (value: RubriquageFilter) =>
+              value.rubriquageId + ":" + value.rubriqueId,
+          )
+          .join();
       }
       return undefined;
     },
-    backgroundStyle():string{
+    backgroundStyle(): string {
       return "background-image: url('/img/404.svg');";
     },
   },
@@ -48,13 +59,13 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.octopus-app .page-not-found{
+.octopus-app .page-not-found {
   background-size: cover;
   background-position: center;
-  background-color: #ebebeb; 
+  background-color: #ebebeb;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0;
 }
-</style>
+</style>

package/src/components/pages/{Participant.vue → ParticipantPage.vue}

@@ -1,14 +1,10 @@
 <template>
   <div class="page-box">
-    <div
-      v-if="loaded && !error"
-    >
+    <div v-if="loaded && !error">
       <h1 v-if="!pageParameters.lightStyle">
         {{ titleDisplay }}
       </h1>
-      <div
-        class="d-flex flex-column align-items-center mb-3"
-      >
+      <div class="d-flex flex-column align-items-center mb-3">
         <img
           v-lazy="proxyImageUrl(participant.imageUrl, '200')"
           width="200"
@@ -16,7 +12,7 @@
           :title="$t('Animator image')"
           :alt="$t('Animator image')"
           class="img-box mb-3"
-        >
+        />
         <h2 class="text-capitalize">
           {{ name }}
         </h2>
@@ -30,7 +26,7 @@
           v-if="editRight && pageParameters.isEditBox"
           :participant="participant"
           class="w-100"
-          @participantUpdate="updateParticipant"
+          @participant-update="updateParticipant"
         />
         <ShareButtons
           v-if="pageParameters.isShareButtons"
@@ -56,80 +52,92 @@
       />
     </div>
     <ClassicLoading
-      :loading-text="!loaded?$t('Loading content ...'):undefined"
-      :error-text="error?$t(`Animator doesn't exist`):undefined"
+      :loading-text="!loaded ? $t('Loading content ...') : undefined"
+      :error-text="error ? $t(`Animator 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 { Participant } from '@/stores/class/general/participant';
-import ClassicLoading from '../form/ClassicLoading.vue';
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { AxiosError } from 'axios';
-const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
-const PodcastFilterList = defineAsyncComponent(() => import('../display/podcasts/PodcastFilterList.vue'));
-const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
-const PodcastList = defineAsyncComponent(() => import('../display/podcasts/PodcastList.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 { Participant } from "@/stores/class/general/participant";
+import ClassicLoading from "../form/ClassicLoading.vue";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { AxiosError } from "axios";
+const ShareButtons = defineAsyncComponent(
+  () => import("../display/sharing/ShareButtons.vue"),
+);
+const PodcastFilterList = defineAsyncComponent(
+  () => import("../display/podcasts/PodcastFilterList.vue"),
+);
+const EditBox = defineAsyncComponent(
+  () => import("@/components/display/edit/EditBox.vue"),
+);
+const PodcastList = defineAsyncComponent(
+  () => import("../display/podcasts/PodcastList.vue"),
+);
 export default defineComponent({
   components: {
     ShareButtons,
     PodcastFilterList,
     EditBox,
     PodcastList,
-    ClassicLoading
+    ClassicLoading,
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {
-    participantId: { default: undefined, type: Number},
+    participantId: { default: undefined, type: Number },
   },
-  emits: ['participantTitle'],
+  emits: ["participantTitle"],
   data() {
     return {
       loaded: false as boolean,
-      participant: undefined as Participant|undefined,
+      participant: undefined as Participant | undefined,
       error: false as boolean,
       reload: false as boolean,
     };
   },
   computed: {
-    titleDisplay(): string{
-      return state.intervenantPage.titlePage??this.$t('Animator');
+    titleDisplay(): string {
+      return state.intervenantPage.titlePage ?? this.$t("Animator");
     },
-    pageParameters(){
+    pageParameters() {
       return {
-        isEditBox : (state.podcastPage.EditBox as boolean),
-        isShareButtons: (state.podcastPage.ShareButtons as boolean),
-        lightStyle:(state.intervenantPage.lightStyle as boolean),
+        isEditBox: state.podcastPage.EditBox as boolean,
+        isShareButtons: state.podcastPage.ShareButtons as boolean,
+        lightStyle: state.intervenantPage.lightStyle as boolean,
       };
     },
     rssUrl(): string {
       return `${state.generalParameters.ApiUri}rss/participant/${this.participantId}`;
     },
     description(): string {
-      return this.participant?.description ?? '';
+      return this.participant?.description ?? "";
     },
     name(): string {
-      return (`${this.participant?.firstName??''} ${this.participant?.lastName??''}`).trim();
+      return `${this.participant?.firstName ?? ""} ${
+        this.participant?.lastName ?? ""
+      }`.trim();
     },
     editRight(): boolean {
-      return (true===this.authenticated &&
+      return (
+        (true === this.authenticated &&
           this.myOrganisationId === this.participant?.orga?.id) ||
-        true===state.generalParameters.isAdmin
+        true === state.generalParameters.isAdmin
+      );
     },
   },
   watch: {
     participant: {
       deep: true,
-      handler(){
-      this.reload = !this.reload;
-      }
+      handler() {
+        this.reload = !this.reload;
+      },
     },
     participantId: {
       immediate: true,
@@ -139,35 +147,41 @@ export default defineComponent({
     },
   },
   methods: {
-    initError():void{
+    initError(): void {
       this.error = true;
       this.loaded = true;
     },
     async getParticipantDetails(): Promise<void> {
       this.loaded = false;
       try {
-        const data = await octopusApi.fetchData<Participant>(0, 'participant/'+this.participantId);
-        if("PUBLIC"!==data?.orga?.privacy && this.filterOrgaId!==data?.orga?.id){
+        const data = await octopusApi.fetchData<Participant>(
+          0,
+          "participant/" + this.participantId,
+        );
+        if (
+          "PUBLIC" !== data?.orga?.privacy &&
+          this.filterOrgaId !== data?.orga?.id
+        ) {
           this.initError();
           return;
         }
         this.updateParticipant(data);
         this.loaded = true;
-      } catch(error) {
-        this.handle403((error as AxiosError));
+      } catch (error) {
+        this.handle403(error as AxiosError);
         this.initError();
       }
     },
     updateParticipant(participant: Participant): void {
       this.participant = participant;
-      this.$emit('participantTitle', this.name);
+      this.$emit("participantTitle", this.name);
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   @media (min-width: 950px) {
     .participant-desc {
       max-width: 50%;

package/src/components/pages/{Participants.vue → ParticipantsPage.vue}

@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts">
-import { orgaComputed } from '../mixins/orgaComputed';
-import ParticipantList from '../display/participant/ParticipantList.vue';
-import ProductorSearch from '../display/filter/ProductorSearch.vue';
-import { defineComponent } from 'vue'
+import { orgaComputed } from "../mixins/orgaComputed";
+import ParticipantList from "../display/participant/ParticipantList.vue";
+import ProductorSearch from "../display/filter/ProductorSearch.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     ProductorSearch,
@@ -27,18 +27,18 @@ export default defineComponent({
   },
   mixins: [orgaComputed],
   props: {
-    productor: { default: undefined, type: String},
+    productor: { default: undefined, type: String },
   },
   data() {
     return {
       first: 0 as number,
       size: 30 as number,
-      searchPattern: '' as string,
+      searchPattern: "" as string,
       organisationId: undefined as string | undefined,
     };
   },
   created() {
-    this.organisationId = this.productor ?this.productor: this.filterOrgaId;
+    this.organisationId = this.productor ? this.productor : this.filterOrgaId;
   },
-})
-</script>
+});
+</script>

package/src/components/pages/PlaylistPage.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="page-box">
+    <template v-if="loaded && !error">
+      <div class="page-element-title-container">
+        <div class="page-element-title">
+          <h1>{{ pageTitle }}</h1>
+        </div>
+        <div class="page-element-bg" :style="backgroundDisplay" />
+      </div>
+      <div class="d-flex flex-column page-element">
+        <div class="module-box">
+          <div class="mb-5 mt-3 descriptionText">
+            <img
+              v-lazy="proxyImageUrl(imageUrl, '330')"
+              width="330"
+              height="330"
+              :alt="$t('Playlist 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)" />
+            <!-- eslint-enable -->
+          </div>
+          <EditBox
+            v-if="editRight && pageParameters.isEditBox"
+            :playlist="playlist"
+          />
+        </div>
+        <SharePlayer
+          v-if="pageParameters.isSharePlayer && authenticated"
+          :playlist="playlist"
+          :organisation-id="myOrganisationId"
+          :is-education="isEducation"
+        />
+        <ShareButtons
+          v-if="pageParameters.isShareButtons"
+          :playlist="playlist"
+        />
+        <PodcastList :playlist="playlist" />
+      </div>
+    </template>
+    <ClassicLoading
+      :loading-text="!loaded ? $t('Loading content ...') : undefined"
+      :error-text="error ? $t(`Playlist doesn't exist`) : undefined"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { orgaComputed } from "../mixins/orgaComputed";
+import ClassicLoading from "../form/ClassicLoading.vue";
+import PodcastList from "../display/playlist/PodcastList.vue";
+import octopusApi from "@saooti/octopus-api";
+import { state } from "../../stores/ParamSdkStore";
+import displayMethods from "../mixins/displayMethods";
+import imageProxy from "../mixins/imageProxy";
+import { handle403 } from "../mixins/handle403";
+import { Playlist } from "@/stores/class/general/playlist";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { AxiosError } from "axios";
+const ShareButtons = defineAsyncComponent(
+  () => import("../display/sharing/ShareButtons.vue"),
+);
+const EditBox = defineAsyncComponent(
+  () => import("@/components/display/edit/EditBox.vue"),
+);
+const SharePlayer = defineAsyncComponent(
+  () => import("../display/sharing/SharePlayer.vue"),
+);
+export default defineComponent({
+  components: {
+    ShareButtons,
+    EditBox,
+    PodcastList,
+    SharePlayer,
+    ClassicLoading,
+  },
+  mixins: [displayMethods, handle403, orgaComputed, imageProxy],
+
+  props: {
+    playlistId: { default: undefined, type: Number },
+    isEducation: { default: false, type: Boolean },
+  },
+
+  emits: ["playlistTitle"],
+  data() {
+    return {
+      loaded: false as boolean,
+      playlist: undefined as Playlist | undefined,
+      error: false as boolean,
+    };
+  },
+  computed: {
+    pageParameters() {
+      return {
+        isEditBox: state.podcastPage.EditBox as boolean,
+        isShareButtons: state.podcastPage.ShareButtons as boolean,
+        isSharePlayer: state.podcastPage.SharePlayer as boolean,
+      };
+    },
+    pageTitle(): string {
+      return this.playlistRadio
+        ? this.$t("Mix of episodes")
+        : this.$t("Playlist");
+    },
+    playlistRadio(): boolean {
+      return (
+        "AMBIANCE" === this.playlist?.ambianceType ||
+        "AMBIANCE_PROGRAMMED" === this.playlist?.ambianceType
+      );
+    },
+    name(): string {
+      return this.playlist?.title ?? "";
+    },
+    imageUrl(): string {
+      return this.playlist?.imageUrl ?? "";
+    },
+    description(): string {
+      return this.playlist?.description ?? "";
+    },
+    editRight(): boolean {
+      return (
+        (true === state.generalParameters.isPlaylist &&
+          this.myOrganisationId === this.playlist?.organisation?.id) ||
+        true === state.generalParameters.isAdmin
+      );
+    },
+    backgroundDisplay(): string {
+      if (!this.playlist) {
+        return "";
+      }
+      return `background-image: url('${this.playlist.imageUrl}');`;
+    },
+  },
+  watch: {
+    playlistId: {
+      immediate: true,
+      handler() {
+        this.getPlaylistDetails();
+      },
+    },
+  },
+
+  methods: {
+    initError(): void {
+      this.error = true;
+      this.loaded = true;
+    },
+    async getPlaylistDetails(): Promise<void> {
+      try {
+        this.loaded = false;
+        this.error = false;
+        this.playlist = await octopusApi.fetchData<Playlist>(
+          0,
+          "playlist/" + this.playlistId,
+        );
+        if (
+          (!this.editRight && this.playlistRadio) ||
+          ("PUBLIC" !== this.playlist.organisation?.privacy &&
+            this.filterOrgaId !== this.playlist.organisation?.id)
+        ) {
+          this.initError();
+          return;
+        }
+        this.$emit("playlistTitle", this.playlist.title);
+      } catch (error) {
+        this.handle403(error as AxiosError);
+        this.initError();
+      }
+      this.loaded = true;
+    },
+  },
+});
+</script>

package/src/components/pages/{Playlists.vue → PlaylistsPage.vue}

@@ -6,7 +6,7 @@
       class="d-flex justify-content-center my-3"
     >
       <div class="btn btn-primary">
-        {{ $t('Create playlist') }}
+        {{ $t("Create playlist") }}
       </div>
     </router-link>
     <ProductorSearch
@@ -25,33 +25,35 @@
 </template>
 
 <script lang="ts">
-import { orgaComputed } from '../mixins/orgaComputed';
-import PlaylistList from '../display/playlist/PlaylistList.vue';
-import { state } from '../../stores/ParamSdkStore';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const ProductorSearch = defineAsyncComponent(() => import('../display/filter/ProductorSearch.vue'));
+import { orgaComputed } from "../mixins/orgaComputed";
+import PlaylistList from "../display/playlist/PlaylistList.vue";
+import { state } from "../../stores/ParamSdkStore";
+import { defineComponent, defineAsyncComponent } from "vue";
+const ProductorSearch = defineAsyncComponent(
+  () => import("../display/filter/ProductorSearch.vue"),
+);
 export default defineComponent({
   components: {
     ProductorSearch,
     PlaylistList,
   },
-  mixins:[orgaComputed],
+  mixins: [orgaComputed],
   props: {
-    productor: { default: undefined, type: String},
+    productor: { default: undefined, type: String },
   },
 
   data() {
     return {
       first: 0 as number,
       size: 30 as number,
-      searchPattern: '' as string,
+      searchPattern: "" as string,
       organisationId: undefined as string | undefined,
     };
   },
-  
+
   computed: {
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
     editRight(): boolean {
       return state.generalParameters.isPlaylist ? true : false;
@@ -59,7 +61,7 @@ export default defineComponent({
   },
 
   created() {
-    this.organisationId = this.productor ?this.productor: this.filterOrgaId;
+    this.organisationId = this.productor ? this.productor : this.filterOrgaId;
   },
-})
-</script>
+});
+</script>