@saooti/octopus-sdk 31.0.34 → 31.0.37

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

@@ -107,7 +107,7 @@ export default defineComponent({
     editRight(): boolean {
       if (
         (state.generalParameters.isPlaylist &&
-          this.organisationId === this.playlist.organisation.id) ||
+          this.organisationId === this.playlist.organisation?.id) ||
         state.generalParameters.isAdmin
       )
         return true;
@@ -117,8 +117,6 @@ export default defineComponent({
       return 0 !== Object.keys(this.playlist.podcasts).length;
     },
   },
-
-
   mounted() {
     const playlistDesc = (this.$refs.descriptionPlaylist as HTMLElement);
     const playlistDescContainer = (this.$refs.descriptionPlaylistContainer as HTMLElement);
@@ -129,6 +127,5 @@ export default defineComponent({
       playlistDescContainer.classList.add('after-emission-description');
     }
   },
-  methods: {},
 })
 </script>

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

@@ -1,46 +1,38 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <ClassicLoading
-      :loading-text="loading?$t('Loading content ...'):undefined"
-    />
-    <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 two-emissions">
-      <PlaylistItem
-        v-for="p in playlists"
-        :key="p.playlistId"
-        :playlist="p"
-      />
-    </ul>
-    <button
-      v-show="!allFetched && loaded"
-      class="btn"
-      :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4':'btn-more'"
-      :disabled="inFetching"
-      :title="$t('See more')"
-      @click="displayMore"
-    >
-      <template v-if="buttonPlus">
-        {{ $t('See more') }}
-      </template>
-      <div
-        :class="buttonPlus?'ms-1':''"
-        class="saooti-more"
-      />
-    </button>
-  </div>
+  <ListPaginate
+    id="playlistListPaginate"
+    v-model:first="dfirst"
+    v-model:rowsPerPage="dsize"
+    v-model:isMobile="isMobile"
+    :text-count="displayCount > 1 ? `${$t('Number playlists', { nb: displayCount })} ${$t('sort by score')}`: undefined"
+    :total-count="totalCount"
+    :loading="loading"
+    :loading-text="loading?$t('Loading content ...'):undefined"
+  >
+    <template #list>
+      <ul
+        class="emission-list two-emissions"
+      >
+        <template
+          v-for="p in displayArray"
+          :key="p.playlistId"
+        >
+          <PlaylistItem
+            v-if="-1!==p.playlistId"
+            :playlist="p"
+          />
+        </template>
+      </ul>
+    </template>
+  </ListPaginate>
 </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 { state } from '../../../store/paramStore';
-import ClassicLoading from '../../form/ClassicLoading.vue';
+import { emptyPlaylistData } from '@/store/typeAppStore';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
 import { AxiosError } from 'axios';
@@ -49,14 +41,14 @@ export default defineComponent({
 
   components: {
     PlaylistItem,
-    ClassicLoading
+    ListPaginate
   },
 
   mixins: [handle403],
 
   props: {
     first: { default: 0, type: Number },
-    size: { default: 12, type: Number },
+    size: { default: 30, type: Number },
     query: { default: undefined, type: String},
     organisationId: { default: undefined, type: String},
   },
@@ -64,57 +56,60 @@ export default defineComponent({
   data() {
     return {
       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,
+      isMobile: false as boolean,
     };
   },
 
   
   computed: {
-    allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus(): boolean {
-      return (state.generalParameters.buttonPlus as boolean);
-    },
+    displayArray(): Array<Playlist>{
+      if(this.isMobile){
+        return this.playlists;
+      }
+      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}`;
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     sort(): string {
       if (!this.query) return 'NAME';
       return 'SCORE';
     },
     organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
+      if (this.$store.state.filter.organisationId) return this.$store.state.filter.organisationId;
       return undefined;
     },
   },
   watch: {
     changed(): void {
-      this.fetchContent(true);
+      this.reloadList();
     },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.playlists[this.dfirst] || -1===this.playlists[this.dfirst].playlistId){
+				this.fetchContent(false);
+			}
+		},
   },
 
   mounted() {
     this.fetchContent(true);
   },
   methods: {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
     async fetchContent(reset: boolean): Promise<void> {
-      this.inFetching = true;
-      if (reset) {
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
-      }
+      this.loading = true;
       const param = {
         first: this.dfirst,
         size: this.dsize,
@@ -132,20 +127,22 @@ export default defineComponent({
     afterFetching(reset: boolean, data: {count: number, result: Array<Playlist>, sort: string}): void {
       if (reset) {
         this.playlists.length = 0;
-        this.dfirst = 0;
       }
-      this.loading = false;
-      this.loaded = true;
+      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());
+        }
+      }
       this.displayCount = data.count;
-      this.playlists = this.playlists.concat(data.result).filter((e: Playlist | null) => {
+      const responsePlaylists = data.result.filter((e: Playlist | null) => {
         if (null === e) {
           this.displayCount--;
         }
         return null !== e;
       });
-      this.dfirst += this.dsize;
+      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.inFetching = false;
+      this.loading = false;
     },
     displayMore(): void {
       this.fetchContent(false);

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

@@ -1,67 +1,53 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <h2
-      class="mt-3 align-self-baseline"
-    >
-      <template v-if="notEmptyPlaylist">
-        {{ $t('Podcasts in the playlist') }}
-      </template>
-      <template v-else>
-        {{ $t('No podcasts in the playlist') }}
-      </template>
+  <div>
+    <h2 class="mt-3 align-self-baseline">
+      {{ titleList }}
     </h2>
-    <ClassicLoading
-      :loading-text="loading?$t('Loading podcasts ...'):undefined"
-      :error-text="loaded && !podcasts.length && notEmptyPlaylist?$t(`No podcast match your query`):undefined"
-    />
-    <div
-      v-if="loaded && podcasts.length > 1"
-      class="text-secondary mb-4"
-    >
-      {{ $t('Number podcasts', { nb: podcasts.length }) +" "+ $t('sort by score') }}
-    </div>
     <ClassicSearch
-      v-if="notEmptyPlaylist"
+      v-if="!loading && notEmptyPlaylist"
       v-model:textInit="searchPattern"
       class="width-600 align-self-baseline"
       id-checkbox="podcast-list-search"
       :label="$t('Search')"
     />
-    <ul
-      v-show="loaded"
-      class="podcast-list"
-    >
-      <PodcastItem
-        v-for="p in podcastsDisplay"
-        :key="p.podcastId"
-        :podcast="p"
-      />
-    </ul>
-    <button
-      v-show="size < podcasts.length && loaded"
-      class="btn"
-      :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4':'btn-more'"
-      :title="$t('See more')"
-      @click="displayMore"
+    <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 #list>
+        <ul
+          class="podcast-list"
+        >
+          <template
+            v-for="p in podcastsDisplay"
+            :key="p.podcastId"
+          >
+            <PodcastItem
+              v-if="-1!==p.podcastId"
+              :podcast="p"
+            />
+          </template>
+        </ul>
       </template>
-      <div
-        :class="buttonPlus?'ms-1':''"
-        class="saooti-more"
-      />
-    </button>
+    </ListPaginate>
   </div>
 </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 '../../../store/paramStore';
 import ClassicSearch from '../../form/ClassicSearch.vue';
-import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Podcast } from '@/store/class/general/podcast';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
@@ -72,10 +58,10 @@ export default defineComponent({
   components: {
     PodcastItem,
     ClassicSearch,
-    ClassicLoading
+    ListPaginate
   },
 
-  mixins: [handle403],
+  mixins: [handle403, orgaComputed],
 
   props: {
     playlist: { default: ()=>({}), type: Object as ()=>Playlist},
@@ -84,37 +70,33 @@ export default defineComponent({
   data() {
     return {
       loading: true as boolean,
-      loaded: true as boolean,
       podcasts: [] as Array<Podcast>,
       podcastsQuery: [] as Array<Podcast>,
-      size: 12 as number,
+      size: 30 as number,
+      first: 0 as number,
       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');
+    },
     notEmptyPlaylist(): boolean {
       return 0 !== Object.keys(this.playlist.podcasts).length;
     },
-    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(): boolean {
-      return (state.generalParameters.buttonPlus as boolean);
-    },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
+    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));
+		},
     editRight(): boolean {
       if (
         (this.authenticated &&
-          this.organisationId === this.playlist.organisation.id) ||
+          this.myOrganisationId === this.playlist.organisation?.id) ||
         state.generalParameters.isAdmin
       )
         return true;
@@ -136,44 +118,35 @@ export default defineComponent({
   },
 
   created() {
-    if (this.notEmptyPlaylist) {
-      this.fetchContent();
-    } else {
-      this.loading = false;
-      this.loaded = true;
-    }
+    this.fetchContent();
   },
   methods: {
     async fetchContent(): Promise<void> {
-      this.podcasts.length = 0;
-      this.loading = true;
-      this.loaded = false;
-      try {
-        const content = await octopusApi.fetchPlaylistContent(
-          this.playlist.playlistId.toString()
-        );
-        for (let index = 0, len = content.length; index < len; index++) {
-          content[index].order = this.playlist.podcasts[content[index].podcastId];
+      if (this.notEmptyPlaylist){
+        this.podcasts.length = 0;
+        this.loading = true;
+        try {
+          const content = await octopusApi.fetchPlaylistContent(
+            this.playlist.playlistId.toString()
+          );
+          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.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;
-      this.loaded = true;
-    },
-    displayMore(event: { preventDefault: () => void }): void {
-      event.preventDefault();
-      this.size += 12;
     },
   },
 })
@@ -182,11 +155,11 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.width-600 {
-  width: 600px;
-  @media (max-width: 600px) {
-    width: 100%;
+  .width-600 {
+    width: 600px;
+    @media (max-width: 600px) {
+      width: 100%;
+    }
   }
 }
-}
 </style>

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

@@ -1,12 +1,9 @@
 <template>
   <div
-    v-if="animators && 0 !== animators.length"
+    v-if="animator"
     class="d-flex align-items-center justify-content-start animators-item"
   >
     <router-link
-      v-for="(animator, index) in animators"
-      v-show="index === visibleIndex"
-      :key="animator.participantId"
       :to="{
         name: 'participant',
         params: { participantId: animator.participantId },
@@ -15,7 +12,7 @@
       :title="$t('Participant')"
     >
       <div class="podcast-item-animator text-dark">
-        {{ getAnimatorName(animator) }}
+        {{ animatorName }}
       </div>
     </router-link>
   </div>
@@ -28,35 +25,27 @@ export default defineComponent({
   name: 'AnimatorsItem',
 
   props: {
-    animators: { default: undefined, type: Object as ()=> Array<Participant>},
-  },
-
-  data() {
-    return {
-      visibleIndex: 0 as number,
-    };
-  },
-   methods: {
-    getAnimatorName(animator: Participant): string {
-      const first = animator.firstName || '';
-      const last = animator.lastName || '';
-      return (first + ' ' + last).trim();
-    },
+    animator: { default: undefined, type: Object as ()=> Participant},
   },
+  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;
+  .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;
-}
+    font-size: 0.55rem;
+    font-weight: 300;
+    text-transform: capitalize;
+    margin: 00.25rem 0.5rem 0;
+  }
 }
 </style>

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

@@ -67,23 +67,15 @@ export default defineComponent({
 
   computed:{
     idPopover(): string{
-      if(this.isGuest){
-        return "popover-guests-help";
-      }
-      return "popover-animators-help";
+      return this.isGuest ? "popover-guests-help" : "popover-animators-help";
     },
     title(): string{
-      if(this.isGuest){
-        return this.$t('Guests').toString();
-      }
-      return this.$t('Animated by').toString();
+      return this.isGuest ? this.$t('Guests') : this.$t('Animated by');
     }
   },
   methods: {
     getName(person: Participant): string {
-      const first = person.firstName || '';
-      const last = person.lastName || '';
-      return (first + ' ' + last).trim();
+      return (`${person.firstName||''} ${person.lastName||''}`).trim();
     },
   },
 })

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

@@ -1,13 +1,6 @@
 <template>
   <div class="p-3">
-    <h2>
-      <template v-if="name">
-        {{ $t('All podcast button', { name: name }) }}
-      </template>
-      <template v-else>
-        {{ $t('All podcast emission button') }}
-      </template>
-    </h2>
+    <h2>{{ titleFilter }}</h2>
     <div class="d-flex align-items-center flex-wrap">
       <div
         class="d-flex align-items-center flex-grow-1 me-3"
@@ -66,16 +59,19 @@ export default defineComponent({
   data() {
     return {
       first: 0 as number,
-      size: 12 as number,
+      size: 30 as number,
       searchPattern: '' as string,
       iabId: undefined as number | undefined,
       reloadList: false as boolean,
     };
   },
+
   computed: {
+    titleFilter():string{
+      return this.name ? this.$t('All podcast button', { name: this.name }) : this.$t('All podcast emission button');
+    },
     query(): string {
-      if (this.searchPattern.length >= 3) return this.searchPattern;
-      return '';
+      return this.searchPattern.length >= 3 ? this.searchPattern : '' ;
     },
   },
   watch: {
@@ -85,11 +81,7 @@ export default defineComponent({
   },
   methods: {
     onCategorySelected(category: Category|undefined): void {
-      if (category && category.id) {
-        this.iabId = category.id;
-        return;
-      }
-      this.iabId = undefined;
+      this.iabId = category && category.id ? category.id : undefined;
     },
     fetch(podcasts: Array<Podcast>): void {
       this.$emit('fetch', podcasts);