@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,151 +1,114 @@
 <template>
   <li
-    class="mt-3 emission-item-container shadow-element"
     v-if="editRight || activePlaylist"
+    class="emission-item-container shadow-element"
   >
     <router-link
       :to="{
         name: 'playlist',
         params: { playlistId: playlist.playlistId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
-      :aria-label="$t('Playlist')"
-      class="text-dark"
+      :title="$t('Playlist')"
+      class="d-flex flex-grow-1 text-dark"
     >
-      <div
+      <img
+        v-lazy="playlist.imageUrl"
+        :title="$t('Playlist name image', {name:name})"
+        :alt="$t('Playlist name image', {name:name})"
         class="img-box"
-        :style="{
-          'background-image':
-            'url(\'' + playlist.imageUrl + '?dummy=' + dummyParam + '\')',
-        }"
-      ></div>
-    </router-link>
-    <div class="emission-item-text">
-      <router-link
-        :to="{
-          name: 'playlist',
-          params: { playlistId: playlist.playlistId },
-          query: { productor: this.$store.state.filter.organisationId },
-        }"
-        class="text-dark"
       >
+      <div class="emission-item-text">
         <div class="emission-name">
           <img
+            v-if="!activePlaylist && !isPodcastmaker"
             class="icon-caution"
             src="/img/caution.png"
-            v-if="!activePlaylist && !isPodcastmaker"
             :title="$t('Playlist have not podcasts')"
-          />{{ name }}
+            :alt="$t('Playlist have not podcasts')"
+          >{{ name }}
         </div>
         <div
-          :id="'description-playlist-container-' + playlist.playlistId"
+          ref="descriptionPlaylistContainer"
           class="emission-description html-wysiwyg-content"
         >
+          <!-- eslint-disable vue/no-v-html -->
           <div
-            :id="'description-playlist-' + playlist.playlistId"
+            ref="descriptionPlaylist"
             v-html="urlify(description)"
-          ></div>
+          />
+          <!-- eslint-enable -->
         </div>
-      </router-link>
-      <div class="flex-grow"></div>
-      <router-link
-        :to="{
-          name: 'productor',
-          params: { productorId: playlist.organisation.id },
-          query: { productor: this.$store.state.filter.organisationId },
-        }"
-        class="text-dark"
-        v-if="!isPodcastmaker && playlist.organisation"
-      >
-        <div class="emission-producer primary-color">
-          © {{ playlist.organisation.name }}
-        </div>
-      </router-link>
-    </div>
+        <div class="flex-grow-1" />
+        <router-link
+          v-if="!isPodcastmaker && playlist.organisation"
+          :to="{
+            name: 'productor',
+            params: { productorId: playlist.organisation.id },
+            query: { productor: $store.state.filter.organisationId },
+          }"
+          class="text-dark"
+        >
+          <div class="emission-producer primary-darker">
+            © {{ playlist.organisation.name }}
+          </div>
+        </router-link>
+      </div>
+    </router-link>
   </li>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
+import { Playlist } from '@/store/class/general/playlist';
 import { state } from '../../../store/paramStore';
 import { displayMethods } from '../../mixins/functions';
-/* import octopusApi from "@saooti/octopus-api"; */
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PlaylistItem',
 
-  props: ['playlist'],
-  emits: ['playlistNotVisible'],
-
   mixins: [displayMethods],
 
-  mounted() {
-    let playlistDesc = document.getElementById(
-      'description-playlist-' + this.playlist.playlistId
-    );
-    let playlistDescContainer:any = document.getElementById(
-      'description-playlist-container-' + this.playlist.playlistId
-    );
-    if (
-      null !== playlistDesc &&
-      playlistDesc.clientHeight > playlistDescContainer.clientHeight
-    ) {
-      playlistDescContainer.classList.add('after-emission-description');
-    }
-    if (this.editRight || this.activePlaylist) {
-      return;
-    }
-    this.$emit('playlistNotVisible');
+  props: {
+    playlist: { default: ()=>({}), type: Object as ()=>Playlist},
   },
 
   data() {
     return {
-      dummyParam: new Date().getTime().toString(),
+      dummyParam: new Date().getTime().toString() as string,
     };
   },
-
+  
   computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-
-    organisation():string {
-      return '' + this.playlist.publisher.organisation.name;
+    organisation(): string {
+      return this.playlist?.publisher?.organisation?.name ??'';
     },
-
-    description():string {
-      let description;
-      description = this.playlist.description || '';
-      if (state.generalParameters.isIE11)
-        return description.substring(0, 50) + '...';
-      return description;
+    description(): string {
+      return this.playlist.description ?? '';
     },
-
-    name():string {
-      if (state.generalParameters.isIE11)
-        return this.playlist.title.substring(0, 50) + '...';
+    name(): string {
       return this.playlist.title;
     },
-
-    organisationId() {
+    organisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
-
-    editRight() {
-      if (
-        (state.generalParameters.isPlaylist &&
-          this.organisationId === this.playlist.organisation.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+    editRight(): boolean {
+      return (true===state.generalParameters.isPlaylist &&
+        this.organisationId === this.playlist.organisation?.id) ||
+        true == state.generalParameters.isAdmin;
     },
-    activePlaylist():boolean {
+    activePlaylist(): boolean {
       return 0 !== Object.keys(this.playlist.podcasts).length;
     },
   },
-
-  methods: {},
-});
-</script>
+  mounted() {
+    const playlistDesc = (this.$refs.descriptionPlaylist as HTMLElement);
+    const playlistDescContainer = (this.$refs.descriptionPlaylistContainer as HTMLElement);
+    if (playlistDesc?.clientHeight > playlistDescContainer?.clientHeight) {
+      playlistDescContainer.classList.add('after-emission-description');
+    }
+  },
+})
+</script>

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

@@ -1,142 +1,149 @@
 <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>
-    <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--"
-      />
-    </ul>
-    <button
-      class="btn"
-      :class="buttonPlus ? 'btn-linkPlus' : 'btn-more'"
-      @click="displayMore"
-      v-show="!allFetched && loaded"
-      :disabled="inFetching"
-      :aria-label="$t('See more')"
-    >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
-    </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="0!==p.playlistId"
+            :playlist="p"
+          />
+        </template>
+      </ul>
+    </template>
+  </ListPaginate>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
+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 { emptyPlaylistData } from '@/store/typeAppStore';
+import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'PlaylistList',
 
-  props: ['first', 'size', 'query', 'organisationId'],
-
   components: {
     PlaylistItem,
+    ListPaginate
   },
 
-  mounted() {
-    this.fetchContent(true);
+  mixins: [handle403],
+
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 30, 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,
+      dfirst: this.first as number,
+      dsize: this.size as number,
+      totalCount: 0 as number,
+      displayCount: 0 as number,
+      playlists: [] as Array<Playlist>,
+      isMobile: false as boolean,
     };
   },
 
+  
   computed: {
-    allFetched():boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus() {
-      return state.generalParameters.buttonPlus;
-    },
-    changed():any {
+    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():any {
-      return this.$store.state.filter.organisationId;
+    sort(): string {
+      return !this.query ?'NAME': 'SCORE';
     },
-    sort() {
-      if (!this.query) return 'NAME';
-      return 'SCORE';
+    organisation(): string|undefined {
+      return this.organisationId ?? this.$store.state.filter.organisationId;
     },
-    organisation():any {
-      if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
-      return undefined;
+  },
+  watch: {
+    changed(): void {
+      this.reloadList();
     },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.playlists[this.dfirst] || 0===this.playlists[this.dfirst].playlistId){
+				this.fetchContent(false);
+			}
+		},
   },
 
+  mounted() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
-      this.inFetching = true;
-      if (reset) {
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
-      }
-      let param = {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
+    async fetchContent(reset: boolean): Promise<void> {
+      this.loading = true;
+      const param = {
         first: this.dfirst,
         size: this.dsize,
         query: this.query,
         organisationId: this.organisation,
         sort: this.sort,
       };
-      const data = await octopusApi.fetchPlaylists(param);
-      this.afterFetching(reset, data);
+      try {
+        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));
+      }
     },
-
-    afterFetching(reset: any, data:any) {
+    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: 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(event: { preventDefault: () => void; }) {
-      event.preventDefault();
+    displayMore(): void {
       this.fetchContent(false);
     },
   },
-
-  watch: {
-    changed: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-  },
-});
-</script>
+})
+</script>