@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,166 +1,108 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <h2 class="mt-3 align-self-baseline" v-if="notEmptyPlaylist">
-      {{ $t('Podcasts in the playlist') }}
+  <div>
+    <h2 class="mt-3 align-self-baseline">
+      {{ titleList }}
     </h2>
-    <h2 class="mt-3 align-self-baseline" v-else>
-      {{ $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>
-    <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">
-      {{ $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"
-    >
-      <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
-      <input
-        :placeholder="$t('Search')"
-        v-model="searchPattern"
-        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">
-      <PodcastItem
-        :podcast="p"
-        v-for="p in podcastsDisplay"
-        :key="p.podcastId"
-      />
-    </ul>
-    <button
-      class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
-      @click="displayMore"
-      v-show="size < podcasts.length && loaded"
-      :aria-label="$t('See more')"
+    <ClassicSearch
+      v-if="!loading && notEmptyPlaylist"
+      v-model:textInit="searchPattern"
+      class="width-600 align-self-baseline mb-2"
+      id-checkbox="podcast-list-search"
+      :label="$t('Search')"
+    />
+    <ListPaginate
+      id="podcastPlaylistListPaginate"
+      v-model:first="first"
+      v-model:rowsPerPage="size"
+      v-model:isMobile="isMobile"
+      :text-count="podcasts.length > 1 ? `${$t('Number podcasts', { nb: podcasts.length })} ${$t('sort by score')}` : 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"
     >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
-    </button>
+      <template #list>
+        <ul
+          class="podcast-list"
+        >
+          <template
+            v-for="p in podcastsDisplay"
+            :key="p.podcastId"
+          >
+            <PodcastItem
+              v-if="0!==p.podcastId"
+              :podcast="p"
+            />
+          </template>
+        </ul>
+      </template>
+    </ListPaginate>
   </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 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 '../../../store/paramStore';
-
+import ClassicSearch from '../../form/ClassicSearch.vue';
+import { Podcast } from '@/store/class/general/podcast';
+import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'PodcastList',
 
-  props: ['playlist'],
-
   components: {
     PodcastItem,
+    ClassicSearch,
+    ListPaginate
   },
 
-  created() {
-    if (this.notEmptyPlaylist) {
-      this.fetchContent();
-    } else {
-      this.loading = false;
-      this.loaded = true;
-    }
+  mixins: [handle403, orgaComputed],
+
+  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,
+      podcasts: [] as Array<Podcast>,
+      podcastsQuery: [] as Array<Podcast>,
+      size: 30 as number,
+      first: 0 as number,
+      searchPattern: '' as string,
+      isMobile: false as boolean,
     };
   },
 
+  
   computed: {
-    notEmptyPlaylist():boolean {
-      return 0 !== Object.keys(this.playlist.podcasts).length;
-    },
-    podcastsDisplay():any {
-      if (this.size < this.podcastsQuery.length)
-        return this.podcastsQuery.slice(0, this.size);
-      return this.podcastsQuery.slice(0, this.podcasts.length);
+    titleList(): string{
+      return this.notEmptyPlaylist ? this.$t('Podcasts in the playlist') : this.$t('No podcasts in the playlist');
     },
-    buttonPlus() {
-      return state.generalParameters.buttonPlus;
-    },
-    organisationId() {
-      return state.generalParameters.organisationId;
-    },
-
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-
-    editRight() {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.playlist.organisation.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+    notEmptyPlaylist(): boolean {
+      return 0 !== Object.keys(this.playlist.podcasts).length;
     },
-  },
-
-  methods: {
-    async fetchContent() {
-      this.podcasts.length = 0;
-      this.loading = true;
-      this.loaded = false;
-      let content = await octopusApi.fetchPlaylistContent(
-        this.playlist.playlistId
-      );
-      for (let index = 0, len = content.length; index < len; index++) {
-        content[index].order = this.playlist.podcasts[content[index].podcastId];
-      }
-      this.podcasts = content;
-      if (!this.editRight) {
-        this.podcasts = this.podcasts.filter((p:any) => {
-          return (
-            null !== p &&
-            (!p.availability || true === p.availability.visibility)
-          );
-        });
+    podcastsDisplay(): Array<Podcast>{
+      if(this.isMobile){
+        return this.podcastsQuery.slice(0, Math.min(this.first + this.size,this.podcasts.length));
       }
-
-      this.podcastsQuery = this.podcasts;
-      this.loading = false;
-      this.loaded = true;
-    },
-
-    displayMore(event: { preventDefault: () => void; }) {
-      event.preventDefault();
-      this.size += 12;
+      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
     },
   },
   watch: {
-    searchPattern() {
+    searchPattern(): void {
       if ('' !== this.searchPattern) {
-        this.podcastsQuery = this.podcasts.filter((el:any) => {
+        this.podcastsQuery = this.podcasts.filter((el: Podcast) => {
           return el.title
             .toLowerCase()
             .includes(this.searchPattern.toLowerCase());
@@ -170,5 +112,48 @@ export default defineComponent({
       }
     },
   },
-});
+
+  created() {
+    this.fetchContent();
+  },
+  methods: {
+    async fetchContent(): Promise<void> {
+      if (this.notEmptyPlaylist){
+        this.podcasts.length = 0;
+        this.loading = true;
+        try {
+          const content = await octopusApi.fetchData<Array<Podcast>>(0, 'playlist/'+this.playlist.playlistId+'/content');
+          for (let index = 0, len = content.length; index < len; index++) {
+            content[index].order = this.playlist.podcasts[content[index].podcastId];
+          }
+          this.podcasts = content;
+          if (!this.editRight) {
+            this.podcasts = this.podcasts.filter((p: Podcast|null) => {
+              return (
+                null !== p &&
+                (!p.availability || true === p.availability.visibility)
+              );
+            });
+          }
+          this.podcastsQuery = this.podcasts;
+        } catch (error) {
+          this.handle403((error as AxiosError));
+        }
+      }
+      this.loading = false;
+    },
+  },
+})
 </script>
+
+
+<style lang="scss">
+.octopus-app{
+  .width-600 {
+    width: 600px;
+    @media (max-width: 600px) {
+      width: 100%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,191 @@
+<template>
+  <div
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    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"
+    >
+      <button
+        class="btn admin-button m-1 saooti-left"
+        :class="{ disabled: !previousAvailable }"
+        :title="$t('Display previous')"
+        @click="displayPrevious()"
+      />
+      <button
+        class="btn admin-button m-1 saooti-right"
+        :class="{ disabled: !nextAvailable }"
+        :title="$t('Display next')"
+        @click="displayNext()"
+      />
+    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+    />
+    <transition-group
+      :name="transitionName"
+      class="element-list-inline"
+      tag="ul"
+      :class="[
+        alignLeft ? 'justify-content-start' : '',
+        overflowScroll ? 'overflowScroll' : '',
+      ]"
+      :css="isInlineAnimation"
+    >
+      <PodcastItem
+        v-for="p in podcasts"
+        :key="p.podcastId"
+        class="flex-shrink-0 item-phone-margin"
+        :podcast="p"
+        :class="[alignLeft ? 'me-3' : '']"
+      />
+    </transition-group>
+    <router-link
+      class="btn btn-primary align-self-center width-fit-content m-4"
+      :to="{
+        name: 'playlist',
+        params: { playlistId: playlistId.toString() },
+      }"
+    >
+      {{ $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';
+const PHONE_WIDTH = 960;
+import { state } from '../../../store/paramStore';
+import { Podcast } from '@/store/class/general/podcast';
+import { Playlist } from '@/store/class/general/playlist';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastPlaylistInlineList',
+  
+  components: {
+    PodcastItem,
+    ClassicLoading
+  },
+
+  props: {
+    playlistId: { default: undefined, type: Number},
+  },
+
+  data() {
+    return {
+      loading: true as boolean,
+      index: 0 as number,
+      first: 0 as number,
+      size: 5 as number,
+      totalCount: 0 as number,
+      playlist: undefined as Playlist|undefined,
+      allPodcasts: [] as Array<Podcast>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
+    };
+  },
+  computed: {
+    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 as number): 13;
+    },
+    overflowScroll(): boolean {
+      return (state.emissionPage.overflowScroll as boolean);
+    },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
+    previousAvailable(): boolean {
+      return this.index > 0;
+    },
+    nextAvailable(): boolean {
+      return this.index + this.size < this.totalCount;
+    },
+    transitionName(): string {
+      return this.direction > 0 ? 'out-left' : 'out-right';
+    },
+  },
+  watch: {
+    playlistId(): void {
+      this.reset();
+      this.fetchContent();
+    },
+  },
+  
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchContent();
+  },
+  methods: {
+    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) => {
+          return (
+            null !== p &&
+            (!p.availability || true === p.availability.visibility)
+          );
+        });
+      }
+      this.alignLeft = this.allPodcasts.length <= 3;
+      this.loading = false;
+    },
+    displayPrevious(): void {
+      this.direction = -1;
+      if (this.previousAvailable) {
+        this.index -= 1;
+      }
+    },
+    displayNext(): void {
+      this.direction = 1;
+      if (!this.nextAvailable) return;
+      this.index += 1;
+    },
+    handleResize(): void {
+      if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.7);
+      this.size = Math.floor(width / sixteen);
+    },
+    reset(): void {
+      this.index = 0;
+      this.first = 0;
+      this.totalCount = 0;
+      this.allPodcasts.length = 0;
+    },
+  },
+})
+</script>

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

@@ -1,59 +1,51 @@
 <template>
   <div
-    class="d-flex align-items-center justify-content-start"
-    v-if="animators && 0 !== animators.length"
+    v-if="animator"
+    class="d-flex align-items-center justify-content-start animators-item"
   >
     <router-link
       :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')"
+      :title="$t('Participant')"
     >
       <div class="podcast-item-animator text-dark">
-        {{ getAnimatorName(animator) }}
+        {{ animatorName }}
       </div>
     </router-link>
   </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/general/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'AnimatorsItem',
 
-  props: ['animators'],
-
-  data() {
-    return {
-      visibleIndex: 0,
-    };
+  props: {
+    animator: { default: undefined, type: Object as ()=> Participant},
   },
-
-  methods: {
-    getAnimatorName(animator:any) {
-      const first = animator.firstName || '';
-      const last = animator.lastName || '';
-      return (first + ' ' + last).trim();
-    },
-  },
-});
+  computed:{
+    animatorName(): string{
+      return (`${this.animator?.firstName??''} ${this.animator?.lastName??''}`).trim();
+    }
+  }
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+  .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,82 @@
+<template>
+  <div
+    v-if="participants.length"
+    class="comma"
+  >
+    {{ title }}
+    <span
+      :id="idPopover"
+      role="button"
+      tabindex="0"
+      class="saooti-help m-0"
+      :title="title"
+    />
+    <span class="mx-1">:</span>
+    <Popover
+      :target="idPopover"
+    >
+      <div 
+        v-for="participant in participants"
+        :key="'desc-'+participant.participantId"
+        class="d-flex flex-column align-items-center"
+      >
+        <b><i>{{ getName(participant) }}</i></b>
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          v-if="participant.description"
+          class="h6 participant-desc html-wysiwyg-content"
+          v-html="participant.description"
+        />
+        <!-- eslint-enable -->
+        <hr>
+      </div>
+    </Popover>
+    <router-link
+      v-for="participant in participants"
+      :key="participant.participantId"
+      :title="$t('Participant')"
+      class="fw-bold"
+      :to="{
+        name: 'participant',
+        params: { participantId: participant.participantId },
+        query: {
+          productor: $store.state.filter.organisationId,
+        },
+      }"
+    >
+      {{ getName(participant) }}
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import Popover from '../../misc/Popover.vue';
+import { Participant } from '@/store/class/general/participant';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ParticipantDescription',
+
+  components:{
+    Popover
+  },
+
+  props: {
+    participants: { default: () => [], type: Array as ()=> Array<Participant>},
+    isGuest: { default: false, type:  Boolean},
+  },
+
+  computed:{
+    idPopover(): string{
+      return this.isGuest ? "popover-guests-help" : "popover-animators-help";
+    },
+    title(): string{
+      return this.isGuest ? this.$t('Guests') : this.$t('Animated by');
+    }
+  },
+  methods: {
+    getName(person: Participant): string {
+      return (`${person.firstName??''} ${person.lastName??''}`).trim();
+    },
+  },
+})
+</script>