@saooti/octopus-sdk 30.0.8 → 30.0.12

package/src/components/display/organisation/OrganisationChooser.vue

@@ -3,7 +3,6 @@
     v-if="!value || init"
     class="default-multiselect-width"
     :style="{ width: width }"
-    :class="{ 'multiselect-hide-arrow': !displayArrow }"
   >
     <label
       for="organisationChooser"
@@ -29,7 +28,7 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      :class="{ 'light-multiselect': stats }"
+      :class="{ 'multiselect-transparent': light }"
       @search-change="onSearchOrganisation"
       @open="onOpen"
       @close="onClose"
@@ -45,14 +44,13 @@
       <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
           <img
-            v-if="!light &&!stats"
+            v-if="!light"
             class="option__image"
             :src="option.imageUrl"
             :alt="option.name"
           >
           <span
             class="option__title"
-            :class="{ descriptionText: light }"
           >
             {{ option.name }}
           </span>
@@ -66,14 +64,13 @@
           "
         >
           <img
-            v-if="!light &&!stats"
+            v-if="!light"
             class="option__image"
             :src="option.imageUrl"
             :alt="option.name"
           >
           <span
             class="option__title"
-            :class="{ descriptionText: light }"
           >
             {{ option.name }}
           </span>
@@ -100,12 +97,10 @@
       </template>
       <template #caret="">
         <div
-          v-if="!light"
           class="position-relative"
         >
           <span
-            class="saooti-arrow_down octopus-arrow-down-2"
-            :class="{ 'octopus-arrow-down-top': stats }"
+            class="saooti-arrow_down octopus-arrow-down"
           />
         </div>
       </template>
@@ -145,12 +140,9 @@ export default defineComponent({
   props: {
     width: { default: '100%', type: String },
     defaultanswer: { default: '', type: String},
-    stats: { default: false, type:  Boolean},
-    displayArrow: { default: true, type: Boolean},
     value: { default: undefined, type: String},
     light: { default: false, type:  Boolean},
     reset: { default: false, type:  Boolean},
-    all: { default: false, type:  Boolean},
   },
   emits: ['selected'],
   data() {
@@ -235,20 +227,7 @@ export default defineComponent({
         first: 0,
         size: ELEMENTS_COUNT,
       });
-      let orga = response.result;
-      if (this.all && !query) {
-        while (
-          (response.count < 200 && orga.length < response.count) ||
-          (response.count > 200 && orga.length < 200)
-        ) {
-          const other = await octopusApi.fetchOrganisations({
-            query: query,
-            first: orga.length,
-            size: ELEMENTS_COUNT,
-          });
-          orga = orga.concat(other.result);
-        }
-      }
+      const orga = response.result;
       const notNull = orga.filter((o: Organisation|null) => {
         return null !== o;
       });

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

@@ -9,22 +9,13 @@
         params: { participantId: participant.participantId },
         query: { productor: $store.state.filter.organisationId },
       }"
-      class="mt-3"
+      class="mt-3 text-dark"
       :aria-label="$t('Participant')"
     >
       <div
         class="img-box-circle"
         :style="{ 'background-image': 'url(\'' + participant.imageUrl + '\')' }"
       />
-    </router-link>
-    <router-link
-      :to="{
-        name: 'participant',
-        params: { participantId: participant.participantId },
-        query: { productor: $store.state.filter.organisationId },
-      }"
-      class="text-dark mt-3"
-    >
       <div class="participant-name">
         <img
           v-if="!activeParticipant && !isPodcastmaker && editRight"
@@ -40,7 +31,7 @@
         <!-- eslint-disable vue/no-v-html -->
         <div
           :id="'description-participant-' + participant.participantId"
-          v-html="urlify(description)"
+          v-html="urlify(participant.description|| '')"
         />
         <!-- eslint-enable -->
       </div>
@@ -52,11 +43,9 @@
         params: { productorId: participant.orga.id },
         query: { productor: $store.state.filter.organisationId },
       }"
-      class="text-dark participant-producer"
+      class="participant-producer"
     >
-      <div class="participant-producer primary-color">
-        © {{ participant.orga.name }}
-      </div>
+      © {{ participant.orga.name }}
     </router-link>
   </li>
 </template>
@@ -84,9 +73,6 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    description(): string {
-      return this.participant.description || '';
-    },
     name(): string {
       return (
         (this.participant.firstName || '') +
@@ -108,8 +94,9 @@ export default defineComponent({
         (this.authenticated &&
           this.organisationId === this.participant.orga.id) ||
         state.generalParameters.isAdmin
-      )
+      ){
         return true;
+      }
       return false;
     },
   },
@@ -156,6 +143,7 @@ export default defineComponent({
   align-items: center;
 
   .participant-name {
+    margin-top: 1rem;
     font-size: 0.9rem;
     font-weight: 600;
     text-align: center;

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

@@ -1,48 +1,41 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <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"
-      class="text-secondary mb-2"
-    >
-      {{
-        $t('Number participants', { nb: displayCount }) + $t('sort by score')
-      }}
-    </div>
-    <ul
-      v-show="loaded"
-      class="participant-list"
-    >
-      <ParticipantItem
-        v-for="p in participants"
-        :key="p.participantId"
-        :participant="p"
+    <ClassicLoading
+      :loading-text="loading?$t('Loading participants ...'):undefined"
+    />
+    <template v-if="isLoadingMoreOrFinished">
+      <div
+        v-if="showCount"
+        class="text-secondary mb-2"
+      >
+        {{
+          $t('Number participants', { nb: displayCount }) + $t('sort by score')
+        }}
+      </div>
+      <ul
+        class="participant-list"
+      >
+        <ParticipantItem
+          v-for="p in participants"
+          :key="p.participantId"
+          :participant="p"
+        />
+      </ul>
+      <button
+        v-show="!allFetched"
+        class="btn btn-more saooti-plus"
+        :aria-label="$t('See more')"
+        :disabled="loading"
+        @click="fetchContent(false)"
       />
-    </ul>
-    <button
-      v-show="!allFetched && loaded"
-      class="btn btn-more"
-      :aria-label="$t('See more')"
-      :disabled="inFetching"
-      @click="displayMore"
-    >
-      <div class="saooti-plus" />
-    </button>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
 import ParticipantItem from './ParticipantItem.vue';
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Participant } from '@/store/class/general/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -50,6 +43,7 @@ export default defineComponent({
 
   components: {
     ParticipantItem,
+    ClassicLoading
   },
   props: {
     first: { default: 0, type: Number },
@@ -62,18 +56,19 @@ 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,
       participants: [] as Array<Participant>,
-      inFetching: false as boolean,
     };
   },
 
    
   computed: {
+    isLoadingMoreOrFinished():boolean{
+      return !this.loading || this.participants.length > 1;
+    },
     allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
@@ -100,21 +95,17 @@ export default defineComponent({
   },
   methods: {
     async fetchContent(reset: boolean): Promise<void> {
-      this.inFetching = true;
-      if (reset) {
-        this.participants.length = 0;
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
-      }
+      this.loading = true;
       const data = await octopusApi.fetchParticipants({
         first: this.dfirst,
         size: this.dsize,
         query: this.query,
         organisationId: this.organisation,
       });
-      this.loading = false;
-      this.loaded = true;
+      if (reset) {
+        this.participants.length = 0;
+        this.dfirst = 0;
+      }
       this.displayCount = data.count;
       this.participants = this.participants.concat(data.result).filter((p: Participant | null) => {
         if (null === p) {
@@ -124,11 +115,7 @@ export default defineComponent({
       });
       this.dfirst += this.dsize;
       this.totalCount = data.count;
-      this.inFetching = false;
-    },
-    displayMore(event: { preventDefault: () => void }): void {
-      event.preventDefault();
-      this.fetchContent(false);
+      this.loading = false;
     },
   },
 })

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

@@ -1,7 +1,7 @@
 <template>
   <li
     v-if="editRight || activePlaylist"
-    class="mt-3 emission-item-container shadow-element"
+    class="emission-item-container shadow-element"
   >
     <router-link
       :to="{

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

@@ -1,21 +1,15 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <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>
+    <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 twoEmissions">
+    <ul class="emission-list two-emissions">
       <PlaylistItem
         v-for="p in playlists"
         :key="p.playlistId"
@@ -25,7 +19,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-linkPlus' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
       :disabled="inFetching"
       :aria-label="$t('See more')"
       @click="displayMore"
@@ -42,7 +36,7 @@
 import octopusApi from '@saooti/octopus-api';
 import PlaylistItem from './PlaylistItem.vue';
 import { state } from '../../../store/paramStore';
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -50,6 +44,7 @@ export default defineComponent({
 
   components: {
     PlaylistItem,
+    ClassicLoading
   },
   props: {
     first: { default: 0, type: Number },
@@ -140,8 +135,7 @@ export default defineComponent({
       this.totalCount = data.count;
       this.inFetching = false;
     },
-    displayMore(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    displayMore(): void {
       this.fetchContent(false);
     },
   },

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

@@ -1,29 +1,19 @@
 <template>
   <div class="d-flex flex-column align-items-center">
     <h2
-      v-if="notEmptyPlaylist"
-      class="mt-3 align-self-baseline"
-    >
-      {{ $t('Podcasts in the playlist') }}
-    </h2>
-    <h2
-      v-else
       class="mt-3 align-self-baseline"
     >
-      {{ $t('No podcasts in the playlist') }}
+      <template v-if="notEmptyPlaylist">
+        {{ $t('Podcasts in the playlist') }}
+      </template>
+      <template v-else>
+        {{ $t('No podcasts in the playlist') }}
+      </template>
     </h2>
-    <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>
+    <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"
@@ -50,7 +40,7 @@
     <button
       v-show="size < podcasts.length && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
       :aria-label="$t('See more')"
       @click="displayMore"
     >
@@ -67,6 +57,7 @@ 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'
@@ -75,7 +66,8 @@ export default defineComponent({
 
   components: {
     PodcastItem,
-    ClassicSearch
+    ClassicSearch,
+    ClassicLoading
   },
 
   props: {

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

@@ -12,7 +12,6 @@
         params: { participantId: animator.participantId },
         query: { productor: $store.state.filter.organisationId },
       }"
-      class="animator-item"
       :aria-label="$t('Participant')"
     >
       <div class="podcast-item-animator text-dark">

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

@@ -13,12 +13,11 @@
     <span class="mx-1">:</span>
     <Popover
       :target="idPopover"
-      custom-class="participant-help"
     >
       <div class="text-center font-weight-bold">
         {{ title }}
       </div>
-      <div class="horizontal-separator my-1" />
+      <hr>
       <div 
         v-for="participant in participants"
         :key="'desc-'+participant.participantId"
@@ -32,14 +31,14 @@
           v-html="participant.description"
         />
         <!-- eslint-enable -->
-        <div class="horizontal-separator my-1" />
+        <hr>
       </div>
     </Popover>
     <router-link
       v-for="participant in participants"
       :key="participant.participantId"
       :aria-label="$t('Participant')"
-      class="link-info"
+      class="fw-bold"
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
@@ -69,10 +68,6 @@ export default defineComponent({
     isGuest: { default: false, type:  Boolean},
   },
 
-  data() {
-    return {
-    };
-  },
   computed:{
     idPopover(): string{
       if(this.isGuest){
@@ -97,11 +92,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.participant-help{
-  .horizontal-separator {
-    border-top: 1px solid #cccccc;
-    width: 100%;
-  }
-} 
-</style>
+<style lang="scss"></style>

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

@@ -1,15 +1,16 @@
 <template>
-  <div class="p-3 list-episodes">
-    <h2 v-if="name">
-      {{ $t('All podcast button', { name: name }) }}
-    </h2>
-    <h2 v-else>
-      {{ $t('All podcast emission button') }}
+  <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>
     <div class="d-flex align-items-center flex-wrap">
       <div
-        v-if="categoryFilter"
-        class="d-flex align-items-center flex-grow-1 categories-filter"
+        class="d-flex align-items-center flex-grow-1 me-3"
       >
         <CategoryChooser
           :defaultanswer="$t('No category filter')"
@@ -18,7 +19,7 @@
       </div>
       <ClassicSearch
         v-model:textInit="searchPattern"
-        class="small-flex-grow"
+        class="flex-small-grow"
         id-checkbox="podcast-filter-search"
         :label="$t('Search')"
       />
@@ -82,21 +83,13 @@ export default defineComponent({
       this.reloadList = !this.reloadList;
     },
   },
-  created() {
-    if (this.$route.query.first && 'string' === typeof this.$route.query.first) {
-      this.first = parseInt(this.$route.query.first);
-    }
-    if (this.$route.query.size && 'string' === typeof this.$route.query.size) {
-      this.size = parseInt(this.$route.query.size);
-    }
-  },
   methods: {
     onCategorySelected(category: Category|undefined): void {
       if (category && category.id) {
         this.iabId = category.id;
-      } else {
-        this.iabId = undefined;
+        return;
       }
+      this.iabId = undefined;
     },
     fetch(podcasts: Array<Podcast>): void {
       this.$emit('fetch', podcasts);
@@ -105,31 +98,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.categories-filter {
-  .multiselect {
-    width: 75%;
-    @media (max-width: 600px) {
-      width: 100%;
-    }
-  }
-}
-.list-episodes {
-  padding: 2rem 0.5rem 1rem !important;
-  margin: 0 0.5rem;
-
-  @media (max-width: 450px) {
-    padding: 0.5rem 0rem 1rem !important;
-  }
-  h2 {
-    margin-bottom: 0.5rem;
-  }
-}
-.filter-list-search-icon {
-  right: 1.6rem !important;
-  font-weight: bold;
-}
-.small-flex-grow {
-  flex-grow: 0.3;
-}
-</style>
+<style lang="scss"></style>