@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,101 +1,118 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading content ...') }}</h3>
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading content ...') }}
+      </h3>
     </div>
-    <div v-if="loaded && playlists.length > 1" class="text-secondary mb-2">
+    <div
+      v-if="loaded && playlists.length > 1"
+      class="text-secondary mb-2"
+    >
       {{ $t('Number playlists', { nb: displayCount }) + $t('sort by score') }}
     </div>
     <ul class="emission-list twoEmissions">
       <PlaylistItem
-        v-bind:playlist="p"
         v-for="p in playlists"
-        v-bind:key="p.playlistId"
-        @playlistNotVisible="displayCount--"
+        :key="p.playlistId"
+        :playlist="p"
       />
     </ul>
     <button
+      v-show="!allFetched && loaded"
       class="btn"
       :class="buttonPlus ? 'btn-linkPlus' : 'btn-more'"
-      @click="displayMore"
-      v-show="!allFetched && loaded"
       :disabled="inFetching"
       :aria-label="$t('See more')"
+      @click="displayMore"
     >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
+      <template v-if="buttonPlus">
+        {{ $t('See more') }}
+      </template>
+      <div class="saooti-plus" />
     </button>
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import PlaylistItem from './PlaylistItem.vue';
 import { state } from '../../../store/paramStore';
 
+import { Playlist } from '@/store/class/playlist';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PlaylistList',
 
-  props: ['first', 'size', 'query', 'organisationId'],
-
   components: {
     PlaylistItem,
   },
-
-  mounted() {
-    this.fetchContent(true);
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 12, type: Number },
+    query: { default: undefined, type: String},
+    organisationId: { default: undefined, type: String},
   },
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      dfirst: this.$props.first,
-      dsize: this.$props.size,
-      totalCount: 0,
-      displayCount: 0,
-      playlists: [] as any,
-      inFetching: false,
+      loading: true as boolean,
+      loaded: true as boolean,
+      dfirst: this.first as number,
+      dsize: this.size as number,
+      totalCount: 0 as number,
+      displayCount: 0 as number,
+      playlists: [] as Array<Playlist>,
+      inFetching: false as boolean,
     };
   },
 
+  
   computed: {
-    allFetched():boolean {
+    allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
-    buttonPlus() {
+    buttonPlus(): boolean {
       return state.generalParameters.buttonPlus;
     },
-    changed():any {
+    changed(): string {
       return `${this.first}|${this.size}|${this.organisationId}|${this.query}`;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-    sort() {
+    sort(): string {
       if (!this.query) return 'NAME';
       return 'SCORE';
     },
-    organisation():any {
+    organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
       if (this.filterOrga) return this.filterOrga;
       return undefined;
     },
   },
+  watch: {
+    changed(): void {
+      this.fetchContent(true);
+    },
+  },
 
+  mounted() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
+    async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
         this.dfirst = 0;
         this.loading = true;
         this.loaded = false;
       }
-      let param = {
+      const param = {
         first: this.dfirst,
         size: this.dsize,
         query: this.query,
@@ -105,8 +122,7 @@ export default defineComponent({
       const data = await octopusApi.fetchPlaylists(param);
       this.afterFetching(reset, data);
     },
-
-    afterFetching(reset: any, data:any) {
+    afterFetching(reset: boolean, data: any): void {
       if (reset) {
         this.playlists.length = 0;
         this.dfirst = 0;
@@ -114,7 +130,7 @@ export default defineComponent({
       this.loading = false;
       this.loaded = true;
       this.displayCount = data.count;
-      this.playlists = this.playlists.concat(data.result).filter((e: null) => {
+      this.playlists = this.playlists.concat(data.result).filter((e: Playlist | null) => {
         if (null === e) {
           this.displayCount--;
         }
@@ -124,19 +140,12 @@ export default defineComponent({
       this.totalCount = data.count;
       this.inFetching = false;
     },
-
-    displayMore(event: { preventDefault: () => void; }) {
+    displayMore(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.fetchContent(false);
     },
   },
-
-  watch: {
-    changed: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>

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

@@ -1,121 +1,129 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <h2 class="mt-3 align-self-baseline" v-if="notEmptyPlaylist">
+    <h2
+      v-if="notEmptyPlaylist"
+      class="mt-3 align-self-baseline"
+    >
       {{ $t('Podcasts in the playlist') }}
     </h2>
-    <h2 class="mt-3 align-self-baseline" v-else>
+    <h2
+      v-else
+      class="mt-3 align-self-baseline"
+    >
       {{ $t('No podcasts in the playlist') }}
     </h2>
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading podcasts ...') }}</h3>
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading podcasts ...') }}
+      </h3>
     </div>
     <div v-if="loaded && !podcasts.length && notEmptyPlaylist">
       <p>{{ $t('No podcast match your query') }}</p>
     </div>
-    <div v-if="loaded && podcasts.length > 1" class="text-secondary mb-4">
+    <div
+      v-if="loaded && podcasts.length > 1"
+      class="text-secondary mb-4"
+    >
       {{ $t('Number podcasts', { nb: podcasts.length }) + $t('sort by score') }}
     </div>
     <div
-      class="d-flex position-relative width-600 align-self-baseline"
       v-if="notEmptyPlaylist"
+      class="d-flex position-relative width-600 align-self-baseline"
     >
-      <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
+      <label
+        for="search"
+        class="d-inline"
+        :aria-label="$t('Search')"
+      />
       <input
-        :placeholder="$t('Search')"
+        id="search"
         v-model="searchPattern"
+        :placeholder="$t('Search')"
         class="filter-search-input input-no-outline flex-grow"
-        id="search"
-      />
+      >
       <div
         class="saooti-search-bounty filter-list-search-icon search-icon-container"
-      ></div>
+      />
     </div>
-    <ul class="podcast-list" v-show="loaded">
+    <ul
+      v-show="loaded"
+      class="podcast-list"
+    >
       <PodcastItem
-        :podcast="p"
         v-for="p in podcastsDisplay"
         :key="p.podcastId"
+        :podcast="p"
       />
     </ul>
     <button
+      v-show="size < podcasts.length && loaded"
       class="btn"
       :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
-      @click="displayMore"
-      v-show="size < podcasts.length && loaded"
       :aria-label="$t('See more')"
+      @click="displayMore"
     >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
+      <template v-if="buttonPlus">
+        {{ $t('See more') }}
+      </template>
+      <div class="saooti-plus" />
     </button>
   </div>
 </template>
 
-<style lang="scss">
-.width-600 {
-  width: 600px;
-  @media (max-width: 600px) {
-    width: 100%;
-  }
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import { state } from '../../../store/paramStore';
 
+import { Podcast } from '@/store/class/podcast';
+import { Playlist } from '@/store/class/playlist';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastList',
 
-  props: ['playlist'],
-
   components: {
     PodcastItem,
   },
 
-  created() {
-    if (this.notEmptyPlaylist) {
-      this.fetchContent();
-    } else {
-      this.loading = false;
-      this.loaded = true;
-    }
+  props: {
+    playlist: { default: ()=>({}), type: Object as ()=>Playlist},
   },
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      podcasts: [] as any,
-      podcastsQuery: [] as any,
-      size: 12,
-      searchPattern: '',
+      loading: true as boolean,
+      loaded: true as boolean,
+      podcasts: [] as Array<Podcast>,
+      podcastsQuery: [] as Array<Podcast>,
+      size: 12 as number,
+      searchPattern: '' as string,
     };
   },
 
+  
   computed: {
-    notEmptyPlaylist():boolean {
+    notEmptyPlaylist(): boolean {
       return 0 !== Object.keys(this.playlist.podcasts).length;
     },
-    podcastsDisplay():any {
+    podcastsDisplay(): Array<Podcast> {
       if (this.size < this.podcastsQuery.length)
         return this.podcastsQuery.slice(0, this.size);
       return this.podcastsQuery.slice(0, this.podcasts.length);
     },
-    buttonPlus() {
+    buttonPlus(): boolean {
       return state.generalParameters.buttonPlus;
     },
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-
-    editRight() {
+    editRight(): boolean {
       if (
         (this.authenticated &&
           this.organisationId === this.playlist.organisation.id) ||
@@ -125,13 +133,34 @@ export default defineComponent({
       return false;
     },
   },
+  watch: {
+    searchPattern(): void {
+      if ('' !== this.searchPattern) {
+        this.podcastsQuery = this.podcasts.filter((el: Podcast) => {
+          return el.title
+            .toLowerCase()
+            .includes(this.searchPattern.toLowerCase());
+        });
+      } else {
+        this.podcastsQuery = this.podcasts;
+      }
+    },
+  },
 
+  created() {
+    if (this.notEmptyPlaylist) {
+      this.fetchContent();
+    } else {
+      this.loading = false;
+      this.loaded = true;
+    }
+  },
   methods: {
-    async fetchContent() {
+    async fetchContent(): Promise<void> {
       this.podcasts.length = 0;
       this.loading = true;
       this.loaded = false;
-      let content = await octopusApi.fetchPlaylistContent(
+      const content = await octopusApi.fetchPlaylistContent(
         this.playlist.playlistId
       );
       for (let index = 0, len = content.length; index < len; index++) {
@@ -139,36 +168,31 @@ export default defineComponent({
       }
       this.podcasts = content;
       if (!this.editRight) {
-        this.podcasts = this.podcasts.filter((p:any) => {
+        this.podcasts = this.podcasts.filter((p: Podcast|null) => {
           return (
             null !== p &&
             (!p.availability || true === p.availability.visibility)
           );
         });
       }
-
       this.podcastsQuery = this.podcasts;
       this.loading = false;
       this.loaded = true;
     },
-
-    displayMore(event: { preventDefault: () => void; }) {
+    displayMore(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.size += 12;
     },
   },
-  watch: {
-    searchPattern() {
-      if ('' !== this.searchPattern) {
-        this.podcastsQuery = this.podcasts.filter((el:any) => {
-          return el.title
-            .toLowerCase()
-            .includes(this.searchPattern.toLowerCase());
-        });
-      } else {
-        this.podcastsQuery = this.podcasts;
-      }
-    },
-  },
-});
+})
 </script>
+
+
+<style lang="scss">
+.width-600 {
+  width: 600px;
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+}
+</style>

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

@@ -1,18 +1,18 @@
 <template>
   <div
-    class="d-flex align-items-center justify-content-start"
     v-if="animators && 0 !== animators.length"
+    class="d-flex align-items-center justify-content-start"
   >
     <router-link
+      v-for="(animator, index) in animators"
+      v-show="index === visibleIndex"
+      :key="animator.participantId"
       :to="{
         name: 'participant',
         params: { participantId: animator.participantId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
       class="animator-item"
-      v-for="(animator, index) in animators"
-      v-bind:key="animator.participantId"
-      v-show="index === visibleIndex"
       :aria-label="$t('Participant')"
     >
       <div class="podcast-item-animator text-dark">
@@ -22,38 +22,41 @@
   </div>
 </template>
 
-<style lang="scss">
-.podcast-item-animator {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-
-  font-size: 0.55rem;
-  font-weight: 300;
-  text-transform: capitalize;
-  margin: 00.25rem 0.5rem 0;
-}
-</style>
-
 <script lang="ts">
+import { Participant } from '@/store/class/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'AnimatorsItem',
 
-  props: ['animators'],
+  props: {
+    animators: { default: undefined, type: Object as ()=> Array<Participant>},
+  },
 
   data() {
     return {
-      visibleIndex: 0,
+      visibleIndex: 0 as number,
     };
   },
 
-  methods: {
-    getAnimatorName(animator:any) {
+   methods: {
+    getAnimatorName(animator: Participant): string {
       const first = animator.firstName || '';
       const last = animator.lastName || '';
       return (first + ' ' + last).trim();
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.podcast-item-animator {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+
+  font-size: 0.55rem;
+  font-weight: 300;
+  text-transform: capitalize;
+  margin: 00.25rem 0.5rem 0;
+}
+</style>

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

@@ -0,0 +1,115 @@
+<template>
+  <div
+    v-if="participants.length"
+    class="comma"
+  >
+    {{ title }}
+    <span
+      :id="idPopover"
+      class="saooti-help m-0 c-hand"
+      data-bs-toggle="popover"
+      data-bs-trigger="hover focus"
+      :aria-label="$t('Help')"
+      data-bs-custom-class="participant-help"
+    />
+    <span class="mx-1">:</span>
+    <div
+      :id="idPopover+'content'"
+      class="d-none"
+    >
+      <div class="text-center fw-bold">
+        {{ title }}
+      </div>
+      <div class="horizontal-separator my-1" />
+      <div 
+        v-for="participant in participants"
+        :key="'desc-'+participant.participantId"
+        class="d-flex flex-column align-items-center"
+      >
+        <b><i>{{ getName(participant) }}</i></b>
+        <div
+          v-if="participant.description"
+          class="h6 participant-desc html-wysiwyg-content"
+          v-html="participant.description"
+        />
+        <div class="horizontal-separator my-1" />
+      </div>
+    </div>
+    <router-link
+      v-for="participant in participants"
+      :key="participant.participantId"
+      :aria-label="$t('Participant')"
+      class="link-info"
+      :to="{
+        name: 'participant',
+        params: { participantId: participant.participantId },
+        query: {
+          productor: $store.state.filter.organisationId,
+        },
+      }"
+    >
+      {{ getName(participant) }}
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+const bootstrap = require('bootstrap/dist/js/bootstrap.esm.min.js');
+import { Participant } from '@/store/class/participant';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ParticipantDescription',
+
+  props: {
+    participants: { default: () => [], type: Array as ()=> Array<Participant>},
+    isGuest: { default: false, type:  Boolean},
+  },
+
+  data() {
+    return {
+    };
+  },
+  computed:{
+    idPopover(): string{
+      if(this.isGuest){
+        return "popover-guests-help";
+      }
+      return "popover-animators-help";
+    },
+    title(): string{
+      if(this.isGuest){
+        return this.$t('Guests').toString();
+      }
+      return this.$t('Animated by').toString();
+    }
+  },
+  mounted(){
+    const contentPopover = document.querySelector('#'+this.idPopover+'content');
+    if(contentPopover){
+      new bootstrap.Popover(document.querySelector('#'+this.idPopover),{
+        trigger: 'hover focus',
+        html: true,
+        content: (contentPopover as HTMLElement).innerHTML
+      });
+    }
+    
+  },
+
+  methods: {
+    getName(person: any): string {
+      const first = person.firstName || '';
+      const last = person.lastName || '';
+      return (first + ' ' + last).trim();
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.participant-help{
+  .horizontal-separator {
+    border-top: 1px solid #cccccc;
+    width: 100%;
+  }
+} 
+</style>