@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/display/playlist/PlaylistList.vue

@@ -4,23 +4,19 @@
     v-model:first="dfirst"
     v-model:rowsPerPage="dsize"
     v-model:isMobile="isMobile"
-    :text-count="displayCount > 1 ? `${$t('Number playlists', { nb: displayCount })}`: undefined"
+    :text-count="
+      displayCount > 1
+        ? `${$t('Number playlists', { nb: displayCount })}`
+        : undefined
+    "
     :total-count="totalCount"
     :loading="loading"
-    :loading-text="loading?$t('Loading content ...'):undefined"
+    :loading-text="loading ? $t('Loading content ...') : undefined"
   >
     <template #list>
-      <div
-        class="emission-list two-emissions"
-      >
-        <template
-          v-for="p in displayArray"
-          :key="p.playlistId"
-        >
-          <PlaylistItem
-            v-if="0!==p.playlistId"
-            :playlist="p"
-          />
+      <div class="emission-list two-emissions">
+        <template v-for="p in displayArray" :key="p.playlistId">
+          <PlaylistItem v-if="0 !== p.playlistId" :playlist="p" />
         </template>
       </div>
     </template>
@@ -28,21 +24,21 @@
 </template>
 
 <script lang="ts">
-import ListPaginate from '../list/ListPaginate.vue';
-import { handle403 } from '../../mixins/handle403';
-import octopusApi from '@saooti/octopus-api';
-import PlaylistItem from './PlaylistItem.vue';
-import { Playlist, emptyPlaylistData } from '@/stores/class/general/playlist';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-import { AxiosError } from 'axios';
+import ListPaginate from "../list/ListPaginate.vue";
+import { handle403 } from "../../mixins/handle403";
+import octopusApi from "@saooti/octopus-api";
+import PlaylistItem from "./PlaylistItem.vue";
+import { Playlist, emptyPlaylistData } from "@/stores/class/general/playlist";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+import { AxiosError } from "axios";
 export default defineComponent({
-  name: 'PlaylistList',
+  name: "PlaylistList",
 
   components: {
     PlaylistItem,
-    ListPaginate
+    ListPaginate,
   },
 
   mixins: [handle403],
@@ -50,8 +46,8 @@ export default defineComponent({
   props: {
     first: { default: 0, type: Number },
     size: { default: 30, type: Number },
-    query: { default: undefined, type: String},
-    organisationId: { default: undefined, type: String},
+    query: { default: undefined, type: String },
+    organisationId: { default: undefined, type: String },
   },
 
   data() {
@@ -65,44 +61,50 @@ export default defineComponent({
       isMobile: false as boolean,
     };
   },
-  
+
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    displayArray(): Array<Playlist>{
-      if(this.isMobile){
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    displayArray(): Array<Playlist> {
+      if (this.isMobile) {
         return this.playlists;
       }
-      return this.playlists.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
-		},
+      return this.playlists.slice(
+        this.dfirst,
+        Math.min(this.dfirst + this.dsize, this.totalCount),
+      );
+    },
     changed(): string {
       return `${this.first}|${this.size}|${this.organisationId}|${this.query}`;
     },
     sort(): string {
-      return !this.query ?'NAME': 'SCORE';
+      return !this.query ? "NAME" : "SCORE";
     },
-    organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.filterOrgaId;
+    organisation(): string | undefined {
+      return this.organisationId ? this.organisationId : this.filterOrgaId;
     },
   },
   watch: {
     changed(): void {
       this.reloadList();
     },
-    dsize():void{
+    dsize(): void {
       this.reloadList();
-		},
-		dfirst(): void{
-			if(!this.playlists[this.dfirst] || 0===this.playlists[this.dfirst].playlistId){
-				this.fetchContent(false);
-			}
-		},
+    },
+    dfirst(): void {
+      if (
+        !this.playlists[this.dfirst] ||
+        0 === this.playlists[this.dfirst].playlistId
+      ) {
+        this.fetchContent(false);
+      }
+    },
   },
 
   mounted() {
     this.fetchContent(true);
   },
   methods: {
-    reloadList(){
+    reloadList() {
       this.dfirst = 0;
       this.fetchContent(true);
     },
@@ -113,22 +115,33 @@ export default defineComponent({
         size: this.dsize,
         query: this.query,
         organisationId: this.organisation,
-        type:"NONE",
+        type: "NONE",
         sort: this.sort,
       };
       try {
-        const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Playlist>;sort: string;}>(0, 'playlist/search',param, true);
+        const data = await octopusApi.fetchDataWithParams<{
+          count: number;
+          result: Array<Playlist>;
+          sort: string;
+        }>(0, "playlist/search", param, true);
         this.afterFetching(reset, data);
       } catch (error) {
-        this.handle403((error as AxiosError));
+        this.handle403(error as AxiosError);
       }
     },
-    afterFetching(reset: boolean, data: {count: number, result: Array<Playlist>, sort: string}): void {
+    afterFetching(
+      reset: boolean,
+      data: { count: number; result: Array<Playlist>; sort: string },
+    ): void {
       if (reset) {
         this.playlists.length = 0;
       }
-      if(this.dfirst > this.playlists.length){
-        for (let i = this.playlists.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+      if (this.dfirst > this.playlists.length) {
+        for (
+          let i = this.playlists.length - 1, len = this.dfirst + this.dsize;
+          i < len;
+          i++
+        ) {
           this.playlists.push(emptyPlaylistData());
         }
       }
@@ -139,7 +152,12 @@ export default defineComponent({
         }
         return null !== e;
       });
-      this.playlists = this.playlists.slice(0, this.dfirst).concat(responsePlaylists).concat(this.playlists.slice(this.dfirst+this.dsize, this.playlists.length));
+      this.playlists = this.playlists
+        .slice(0, this.dfirst)
+        .concat(responsePlaylists)
+        .concat(
+          this.playlists.slice(this.dfirst + this.dsize, this.playlists.length),
+        );
       this.totalCount = data.count;
       this.loading = false;
     },
@@ -147,5 +165,5 @@ export default defineComponent({
       this.fetchContent(false);
     },
   },
-})
-</script>
+});
+</script>

package/src/components/display/playlist/PodcastList.vue

@@ -15,24 +15,24 @@
       v-model:first="first"
       v-model:rowsPerPage="size"
       v-model:isMobile="isMobile"
-      :text-count="podcasts.length > 1 ? `${$t('Number podcasts', { nb: podcasts.length })}` : undefined"
+      :text-count="
+        podcasts.length > 1
+          ? `${$t('Number podcasts', { nb: podcasts.length })}`
+          : undefined
+      "
       :total-count="podcasts.length"
       :loading="loading"
-      :loading-text="loading?$t('Loading podcasts ...'):undefined"
-      :error-text="!loading && !podcasts.length && notEmptyPlaylist?$t(`No podcast match your query`):undefined"
+      :loading-text="loading ? $t('Loading podcasts ...') : undefined"
+      :error-text="
+        !loading && !podcasts.length && notEmptyPlaylist
+          ? $t(`No podcast match your query`)
+          : undefined
+      "
     >
       <template #list>
-        <div
-          class="podcast-list"
-        >
-          <template
-            v-for="p in podcastsDisplay"
-            :key="p.podcastId"
-          >
-            <PodcastItem
-              v-if="0!==p.podcastId"
-              :podcast="p"
-            />
+        <div class="podcast-list">
+          <template v-for="p in podcastsDisplay" :key="p.podcastId">
+            <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
           </template>
         </div>
       </template>
@@ -41,30 +41,30 @@
 </template>
 
 <script lang="ts">
-import ListPaginate from '../list/ListPaginate.vue';
-import { handle403 } from '../../mixins/handle403';
-import { orgaComputed } from '../../mixins/orgaComputed';
-import octopusApi from '@saooti/octopus-api';
-import PodcastItem from '../podcasts/PodcastItem.vue';
-import { state } from '../../../stores/ParamSdkStore';
-import ClassicSearch from '../../form/ClassicSearch.vue';
-import { Podcast } from '@/stores/class/general/podcast';
-import { Playlist } from '@/stores/class/general/playlist';
-import { defineComponent } from 'vue'
-import { AxiosError } from 'axios';
+import ListPaginate from "../list/ListPaginate.vue";
+import { handle403 } from "../../mixins/handle403";
+import { orgaComputed } from "../../mixins/orgaComputed";
+import octopusApi from "@saooti/octopus-api";
+import PodcastItem from "../podcasts/PodcastItem.vue";
+import { state } from "../../../stores/ParamSdkStore";
+import ClassicSearch from "../../form/ClassicSearch.vue";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Playlist } from "@/stores/class/general/playlist";
+import { defineComponent } from "vue";
+import { AxiosError } from "axios";
 export default defineComponent({
-  name: 'PodcastList',
+  name: "PodcastList",
 
   components: {
     PodcastItem,
     ClassicSearch,
-    ListPaginate
+    ListPaginate,
   },
 
   mixins: [handle403, orgaComputed],
 
   props: {
-    playlist: { default: ()=>({}), type: Object as ()=>Playlist},
+    playlist: { default: () => ({}), type: Object as () => Playlist },
   },
 
   data() {
@@ -74,34 +74,43 @@ export default defineComponent({
       podcastsQuery: [] as Array<Podcast>,
       size: 30 as number,
       first: 0 as number,
-      searchPattern: '' as string,
+      searchPattern: "" as string,
       isMobile: false as boolean,
     };
   },
 
-  
   computed: {
-    titleList(): string{
-      return this.notEmptyPlaylist ? this.$t('Podcasts in the playlist') : this.$t('No podcasts in the playlist');
+    titleList(): string {
+      return this.notEmptyPlaylist
+        ? this.$t("Podcasts in the playlist")
+        : this.$t("No podcasts in the playlist");
     },
     notEmptyPlaylist(): boolean {
-      return 0 !== Object.keys(this.playlist.samplingViews??[]).length;
+      return 0 !== Object.keys(this.playlist.samplingViews ?? []).length;
     },
-    podcastsDisplay(): Array<Podcast>{
-      if(this.isMobile){
-        return this.podcastsQuery.slice(0, Math.min(this.first + this.size,this.podcasts.length));
+    podcastsDisplay(): Array<Podcast> {
+      if (this.isMobile) {
+        return this.podcastsQuery.slice(
+          0,
+          Math.min(this.first + this.size, this.podcasts.length),
+        );
       }
-      return this.podcastsQuery.slice(this.first, Math.min(this.first + this.size,this.podcasts.length));
-		},
+      return this.podcastsQuery.slice(
+        this.first,
+        Math.min(this.first + this.size, this.podcasts.length),
+      );
+    },
     editRight(): boolean {
-      return (true===this.authenticated &&
-        this.myOrganisationId === this.playlist.organisation?.id) ||
-        true ===state.generalParameters.isAdmin
+      return (
+        (true === this.authenticated &&
+          this.myOrganisationId === this.playlist.organisation?.id) ||
+        true === state.generalParameters.isAdmin
+      );
     },
   },
   watch: {
     searchPattern(): void {
-      if ('' !== this.searchPattern) {
+      if ("" !== this.searchPattern) {
         this.podcastsQuery = this.podcasts.filter((el: Podcast) => {
           return el.title
             .toLowerCase()
@@ -118,13 +127,16 @@ export default defineComponent({
   },
   methods: {
     async fetchContent(): Promise<void> {
-      if (this.notEmptyPlaylist){
+      if (this.notEmptyPlaylist) {
         this.podcasts.length = 0;
         this.loading = true;
         try {
-          this.podcasts = await octopusApi.fetchData<Array<Podcast>>(0, 'playlist/'+this.playlist.playlistId+'/content');
+          this.podcasts = await octopusApi.fetchData<Array<Podcast>>(
+            0,
+            "playlist/" + this.playlist.playlistId + "/content",
+          );
           if (!this.editRight) {
-            this.podcasts = this.podcasts.filter((p: Podcast|null) => {
+            this.podcasts = this.podcasts.filter((p: Podcast | null) => {
               return (
                 null !== p &&
                 (!p.availability || true === p.availability.visibility)
@@ -133,18 +145,17 @@ export default defineComponent({
           }
           this.podcastsQuery = this.podcasts;
         } catch (error) {
-          this.handle403((error as AxiosError));
+          this.handle403(error as AxiosError);
         }
       }
       this.loading = false;
     },
   },
-})
+});
 </script>
 
-
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .width-600 {
     width: 600px;
     @media (max-width: 600px) {
@@ -152,4 +163,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</style>

package/src/components/display/playlist/PodcastPlaylistInlineList.vue

@@ -4,10 +4,7 @@
     class="d-flex flex-column p-3 playlist-inline-podcast"
   >
     <h2>{{ title }}</h2>
-    <div
-      v-if="!overflowScroll"
-      class="d-flex justify-content-end hide-phone"
-    >
+    <div v-if="!overflowScroll" class="d-flex justify-content-end hide-phone">
       <button
         class="btn admin-button m-1 saooti-left"
         :class="{ disabled: !previousAvailable }"
@@ -22,7 +19,7 @@
       />
     </div>
     <ClassicLoading
-      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+      :loading-text="loading ? $t('Loading podcasts ...') : undefined"
     />
     <transition-group
       :name="transitionName"
@@ -49,34 +46,32 @@
         params: { playlistId: playlistId.toString() },
       }"
     >
-      {{ $t('See more') }}
-      <div
-        class="ms-1 saooti-more"
-      />
+      {{ $t("See more") }}
+      <div class="ms-1 saooti-more" />
     </router-link>
   </div>
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import domHelper from '../../../helper/dom';
-import PodcastItem from '../podcasts/PodcastItem.vue';
-import ClassicLoading from '../../form/ClassicLoading.vue';
+import octopusApi from "@saooti/octopus-api";
+import domHelper from "../../../helper/dom";
+import PodcastItem from "../podcasts/PodcastItem.vue";
+import ClassicLoading from "../../form/ClassicLoading.vue";
 const PHONE_WIDTH = 960;
-import { state } from '../../../stores/ParamSdkStore';
-import { Podcast } from '@/stores/class/general/podcast';
-import { Playlist } from '@/stores/class/general/playlist';
-import { defineComponent } from 'vue'
+import { state } from "../../../stores/ParamSdkStore";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Playlist } from "@/stores/class/general/playlist";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'PodcastPlaylistInlineList',
-  
+  name: "PodcastPlaylistInlineList",
+
   components: {
     PodcastItem,
-    ClassicLoading
+    ClassicLoading,
   },
 
   props: {
-    playlistId: { default: undefined, type: Number},
+    playlistId: { default: undefined, type: Number },
   },
 
   data() {
@@ -86,27 +81,29 @@ export default defineComponent({
       first: 0 as number,
       size: 5 as number,
       totalCount: 0 as number,
-      playlist: undefined as Playlist|undefined,
+      playlist: undefined as Playlist | undefined,
       allPodcasts: [] as Array<Podcast>,
       direction: 1 as number,
       alignLeft: false as boolean,
     };
   },
   computed: {
-    title(): string{
-      return this.playlist?.title??"";
+    title(): string {
+      return this.playlist?.title ?? "";
     },
     podcasts(): Array<Podcast> {
       return this.allPodcasts.slice(this.index, this.index + this.size);
     },
     sizeItem(): number {
-      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13;
+      return state.generalParameters.podcastItem
+        ? state.generalParameters.podcastItem
+        : 13;
     },
     overflowScroll(): boolean {
-      return (state.emissionPage.overflowScroll as boolean);
+      return state.emissionPage.overflowScroll as boolean;
     },
     isInlineAnimation(): boolean {
-      return (state.generalParameters.isInlineAnimation as boolean);
+      return state.generalParameters.isInlineAnimation as boolean;
     },
     previousAvailable(): boolean {
       return this.index > 0;
@@ -115,7 +112,7 @@ export default defineComponent({
       return this.index + this.size < this.totalCount;
     },
     transitionName(): string {
-      return this.direction > 0 ? 'out-left' : 'out-right';
+      return this.direction > 0 ? "out-left" : "out-right";
     },
   },
   watch: {
@@ -124,13 +121,13 @@ export default defineComponent({
       this.fetchContent();
     },
   },
-  
+
   created() {
-    window.addEventListener('resize', this.handleResize);
+    window.addEventListener("resize", this.handleResize);
   },
 
   unmounted() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener("resize", this.handleResize);
   },
 
   mounted() {
@@ -141,11 +138,23 @@ export default defineComponent({
     async fetchContent(): Promise<void> {
       this.allPodcasts.length = 0;
       this.loading = true;
-      this.playlist = await octopusApi.fetchData<Playlist>(0, 'playlist/'+this.playlistId);
-      this.allPodcasts = await octopusApi.fetchData<Array<Podcast>>(0, 'playlist/'+this.playlistId+'/content');
-      if (!((state.generalParameters.authenticated && state.generalParameters.organisationId === this.playlist?.organisation?.id) ||
-        state.generalParameters.isAdmin)) {
-        this.allPodcasts = this.allPodcasts.filter((p: Podcast|null) => {
+      this.playlist = await octopusApi.fetchData<Playlist>(
+        0,
+        "playlist/" + this.playlistId,
+      );
+      this.allPodcasts = await octopusApi.fetchData<Array<Podcast>>(
+        0,
+        "playlist/" + this.playlistId + "/content",
+      );
+      if (
+        !(
+          (state.generalParameters.authenticated &&
+            state.generalParameters.organisationId ===
+              this.playlist?.organisation?.id) ||
+          state.generalParameters.isAdmin
+        )
+      ) {
+        this.allPodcasts = this.allPodcasts.filter((p: Podcast | null) => {
           return (
             null !== p &&
             (!p.availability || true === p.availability.visibility)
@@ -187,5 +196,5 @@ export default defineComponent({
       this.allPodcasts.length = 0;
     },
   },
-})
-</script>
+});
+</script>

package/src/components/display/podcasts/AnimatorsItem.vue

@@ -18,31 +18,33 @@
 </template>
 
 <script lang="ts">
-import { Participant } from '@/stores/class/general/participant';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
+import { Participant } from "@/stores/class/general/participant";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'AnimatorsItem',
+  name: "AnimatorsItem",
 
   props: {
-    animator: { default: undefined, type: Object as ()=> Participant},
+    animator: { default: undefined, type: Object as () => Participant },
   },
-  computed:{
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    animatorName(): string{
-      return (`${this.animator?.firstName??''} ${this.animator?.lastName??''}`).trim();
-    }
-  }
-})
+  computed: {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    animatorName(): string {
+      return `${this.animator?.firstName ?? ""} ${
+        this.animator?.lastName ?? ""
+      }`.trim();
+    },
+  },
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .podcast-item-animator {
     font-size: 0.55rem;
     font-weight: 300;
     text-transform: capitalize;
   }
 }
-</style>
+</style>

package/src/components/display/podcasts/ParticipantDescription.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="participants.length"
-    class="comma"
-  >
+  <div v-if="participants.length" class="comma">
     {{ title }}
     <span class="mx-1">:</span>
     <router-link
@@ -23,34 +20,36 @@
 </template>
 
 <script lang="ts">
-import { Participant } from '@/stores/class/general/participant';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
+import { Participant } from "@/stores/class/general/participant";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ParticipantDescription',
+  name: "ParticipantDescription",
 
-  components:{
-  },
+  components: {},
 
   props: {
-    participants: { default: () => [], type: Array as ()=> Array<Participant>},
-    isGuest: { default: false, type:  Boolean},
+    participants: {
+      default: () => [],
+      type: Array as () => Array<Participant>,
+    },
+    isGuest: { default: false, type: Boolean },
   },
 
-  computed:{
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    idPopover(): string{
+  computed: {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    idPopover(): string {
       return this.isGuest ? "popover-guests-help" : "popover-animators-help";
     },
-    title(): string{
-      return this.isGuest ? this.$t('Guests') : this.$t('Animated by');
-    }
+    title(): string {
+      return this.isGuest ? this.$t("Guests") : this.$t("Animated by");
+    },
   },
   methods: {
     getName(person: Participant): string {
-      return (`${person.firstName??''} ${person.lastName??''}`).trim();
+      return `${person.firstName ?? ""} ${person.lastName ?? ""}`.trim();
     },
   },
-})
-</script>
+});
+</script>