@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/display/participant/ParticipantItem.vue

@@ -1,13 +1,13 @@
 <template>
   <li
+    v-if="participant"
     class="participant-item-container"
-    v-if="participant && (activeParticipant || editRight)"
   >
     <router-link
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
       class="mt-3"
       :aria-label="$t('Participant')"
@@ -15,23 +15,23 @@
       <div
         class="img-box-circle"
         :style="{ 'background-image': 'url(\'' + participant.imageUrl + '\')' }"
-      ></div>
+      />
     </router-link>
     <router-link
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
       class="text-dark mt-3"
     >
       <div class="participant-name">
         <img
+          v-if="!activeParticipant && !isPodcastmaker && editRight"
           src="/img/caution.png"
           class="icon-caution"
-          v-if="!activeParticipant && !isPodcastmaker && editRight"
           :title="$t('Participant have not podcasts')"
-        />{{ name }}
+        >{{ name }}
       </div>
       <div
         :id="'description-participant-container-' + participant.participantId"
@@ -40,17 +40,17 @@
         <div
           :id="'description-participant-' + participant.participantId"
           v-html="urlify(description)"
-        ></div>
+        />
       </div>
     </router-link>
     <router-link
+      v-if="!isPodcastmaker"
       :to="{
         name: 'productor',
         params: { productorId: participant.orga.id },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
       class="text-dark participant-producer"
-      v-if="!isPodcastmaker"
     >
       <div class="participant-producer primary-color">
         © {{ participant.orga.name }}
@@ -59,6 +59,88 @@
   </li>
 </template>
 
+<script lang="ts">
+const octopusApi = require('@saooti/octopus-api');
+import { Participant } from '@/store/class/participant';
+import { state } from '../../../store/paramStore';
+import { displayMethods } from '../../mixins/functions';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ParticpantItem',
+  mixins: [displayMethods],
+  props: {
+    participant: { default: ()=>({}), type: Object as ()=> Participant},
+  },
+
+  data() {
+    return {
+      activeParticipant: true as boolean,
+    };
+  },
+  
+  computed: {
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    description(): string {
+      return this.participant.description || '';
+    },
+    name(): string {
+      return (
+        (this.participant.firstName || '') +
+        ' ' +
+        (this.participant.lastName || '')
+      ).trim();
+    },
+    organisationId(): string {
+      return state.generalParameters.organisationId;
+    },
+    authenticated(): boolean {
+      return state.generalParameters.authenticated;
+    },
+    editRight(): boolean {
+      if (
+        (this.authenticated &&
+          this.organisationId === this.participant.orga.id) ||
+        state.generalParameters.isAdmin
+      )
+        return true;
+      return false;
+    },
+  },
+
+  created() {
+    if(!this.editRight)return;
+    this.hasPodcast();
+  },
+  mounted() {
+    const participantDesc = document.getElementById(
+      'description-participant-' + this.participant.participantId
+    );
+    const participantDescContainer = document.getElementById(
+      'description-participant-container-' + this.participant.participantId
+    );
+    if (
+      null !== participantDesc && null !==participantDescContainer && 
+      participantDesc.clientHeight > participantDescContainer.clientHeight
+    ) {
+      participantDescContainer.classList.add('after-participant-description');
+    }
+  },
+  methods: {
+    async hasPodcast(): Promise<void> {
+      const data = await octopusApi.fetchPodcasts({
+        participantId: this.participant.participantId,
+        first: 0,
+        size: 0,
+      });
+      if (0 === data.count) {
+        this.activeParticipant = false;
+      }
+    },
+  },
+})
+</script>
 <style lang="scss">
 .participant-item-container {
   list-style: none;
@@ -109,102 +191,4 @@
     margin: 1rem 0 0;
   }
 }
-</style>
-
-<script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
-import { state } from '../../../store/paramStore';
-import { displayMethods } from '../../mixins/functions';
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'ParticpantItem',
-
-  props: ['participant'],
-  emits: ['participantNotVisible'],
-
-  mixins: [displayMethods],
-
-  created() {
-    this.hasPodcast();
-  },
-  mounted() {
-    let participantDesc = document.getElementById(
-      'description-participant-' + this.participant.participantId
-    );
-    let participantDescContainer:any = document.getElementById(
-      'description-participant-container-' + this.participant.participantId
-    );
-    if (
-      null !== participantDesc &&
-      participantDesc.clientHeight > participantDescContainer.clientHeight
-    ) {
-      participantDescContainer.classList.add('after-participant-description');
-    }
-  },
-
-  data() {
-    return {
-      activeParticipant: true,
-    };
-  },
-
-  computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-
-    description():string {
-      let description;
-      description = this.participant.description || '';
-      if (state.generalParameters.isIE11)
-        return description.substring(0, 50) + '...';
-      return description;
-    },
-
-    name():string {
-      const fullName = (
-        (this.participant.firstName || '') +
-        ' ' +
-        (this.participant.lastName || '')
-      ).trim();
-      if (state.generalParameters.isIE11)
-        return fullName.substring(0, 50) + '...';
-      return fullName;
-    },
-
-    organisationId() {
-      return state.generalParameters.organisationId;
-    },
-
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-
-    editRight() {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.participant.orga.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-  },
-  methods: {
-    async hasPodcast() {
-      const data = await octopusApi.fetchPodcasts({
-        participantId: this.participant.participantId,
-        first: 0,
-        size: 0,
-      });
-      if (0 === data.count) {
-        this.activeParticipant = false;
-      }
-      if (this.participant && (this.editRight || this.activeParticipant)) {
-        return;
-      }
-      this.$emit('participantNotVisible');
-    },
-  },
-});
-</script>
+</style>

package/src/components/display/participant/ParticipantList.vue

@@ -1,8 +1,13 @@
 <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 participants ...') }}</h3>
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading participants ...') }}
+      </h3>
     </div>
     <div
       v-if="showCount && loaded && participants.length > 1"
@@ -12,98 +17,89 @@
         $t('Number participants', { nb: displayCount }) + $t('sort by score')
       }}
     </div>
-    <ul class="participant-list" v-show="loaded">
+    <ul
+      v-show="loaded"
+      class="participant-list"
+    >
       <ParticipantItem
-        v-bind:participant="p"
         v-for="p in participants"
-        v-bind:key="p.participantId"
-        @participantNotVisible="displayCount--"
+        :key="p.participantId"
+        :participant="p"
       />
     </ul>
     <button
-      class="btn btn-more"
-      @click="displayMore"
       v-show="!allFetched && loaded"
+      class="btn btn-more"
       :aria-label="$t('See more')"
       :disabled="inFetching"
+      @click="displayMore"
     >
-      <div class="saooti-plus"></div>
+      <div class="saooti-plus" />
     </button>
   </div>
 </template>
 
-<style lang="scss">
-.participant-list {
-  align-self: stretch;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-  /*For ie11 */
-  display: flex;
-  flex-wrap: wrap;
-  /* end */
-
-  display: grid; /* 1 */
-  grid-template-columns: repeat(auto-fill, 14rem); /* 2 */
-  grid-gap: 2rem; /* 3 */
-  justify-content: space-between; /* 4 */
-}
-/** PHONES*/
-@media (max-width: 655px) {
-  .participant-list {
-    align-self: auto;
-    grid-gap: 0;
-  }
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import ParticipantItem from './ParticipantItem.vue';
 
+import { Participant } from '@/store/class/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ParticipantList',
 
-  props: ['first', 'size', 'query', 'organisationId', 'showCount'],
-
   components: {
     ParticipantItem,
   },
-
-  created() {
-    this.fetchContent(true);
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 12, type: Number },
+    query: { default: undefined, type: String},
+    organisationId: { default: undefined, type: String},
+    showCount: { default: false, type: Boolean },
   },
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      dfirst: this.$props.first,
-      dsize: this.$props.size,
-      totalCount: 0,
-      displayCount: 0,
-      participants: [] 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,
+      participants: [] as Array<Participant>,
+      inFetching: false as boolean,
     };
   },
 
+   
   computed: {
-    allFetched():boolean {
+    allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-    organisation():any {
+    organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
       if (this.filterOrga) return this.filterOrga;
       return undefined;
     },
   },
+  watch: {
+    query(): void {
+      this.fetchContent(true);
+    },
+    organisation(): void {
+      this.fetchContent(true);
+    },
+  },
 
+  created() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
+    async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
         this.participants.length = 0;
@@ -120,7 +116,7 @@ export default defineComponent({
       this.loading = false;
       this.loaded = true;
       this.displayCount = data.count;
-      this.participants = this.participants.concat(data.result).filter((p: null) => {
+      this.participants = this.participants.concat(data.result).filter((p: Participant | null) => {
         if (null === p) {
           this.displayCount--;
         }
@@ -130,24 +126,35 @@ 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: {
-    query: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-    organisation: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+.participant-list {
+  align-self: stretch;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  /*For ie11 */
+  display: flex;
+  flex-wrap: wrap;
+  /* end */
+
+  display: grid; /* 1 */
+  grid-template-columns: repeat(auto-fill, 14rem); /* 2 */
+  grid-gap: 2rem; /* 3 */
+  justify-content: space-between; /* 4 */
+}
+/** PHONES*/
+@media (max-width: 655px) {
+  .participant-list {
+    align-self: auto;
+    grid-gap: 0;
+  }
+}
+</style>

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

@@ -1,13 +1,13 @@
 <template>
   <li
-    class="mt-3 emission-item-container shadow-element"
     v-if="editRight || activePlaylist"
+    class="mt-3 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"
@@ -18,24 +18,24 @@
           '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 },
+          query: { productor: $store.state.filter.organisationId },
         }"
         class="text-dark"
       >
         <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 }}
+          >{{ name }}
         </div>
         <div
           :id="'description-playlist-container-' + playlist.playlistId"
@@ -44,18 +44,18 @@
           <div
             :id="'description-playlist-' + playlist.playlistId"
             v-html="urlify(description)"
-          ></div>
+          />
         </div>
       </router-link>
-      <div class="flex-grow"></div>
+      <div class="flex-grow" />
       <router-link
+        v-if="!isPodcastmaker && playlist.organisation"
         :to="{
           name: 'productor',
           params: { productorId: playlist.organisation.id },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
         class="text-dark"
-        v-if="!isPodcastmaker && playlist.organisation"
       >
         <div class="emission-producer primary-color">
           © {{ playlist.organisation.name }}
@@ -65,74 +65,46 @@
   </li>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
+import { Playlist } from '@/store/class/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() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-
-    organisation():string {
-      return '' + this.playlist.publisher.organisation.name;
+    organisation(): string {
+      if(this.playlist && this.playlist.publisher && this.playlist.publisher.organisation){
+        return '' + this.playlist.publisher.organisation.name;
+      }
+      return '';
     },
-
-    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 {
       return state.generalParameters.organisationId;
     },
-
-    editRight() {
+    editRight(): boolean {
       if (
         (state.generalParameters.isPlaylist &&
           this.organisationId === this.playlist.organisation.id) ||
@@ -141,11 +113,28 @@ export default defineComponent({
         return true;
       return false;
     },
-    activePlaylist():boolean {
+    activePlaylist(): boolean {
       return 0 !== Object.keys(this.playlist.podcasts).length;
     },
   },
 
+
+  mounted() {
+    const playlistDesc = document.getElementById(
+      'description-playlist-' + this.playlist.playlistId
+    );
+    const playlistDescContainer = document.getElementById(
+      'description-playlist-container-' + this.playlist.playlistId
+    );
+    if (
+      null !== playlistDesc && null !== playlistDescContainer &&
+      playlistDesc.clientHeight > playlistDescContainer.clientHeight
+    ) {
+      playlistDescContainer.classList.add('after-emission-description');
+    }
+  },
   methods: {},
-});
+})
 </script>
+
+<style lang="scss"></style>