@saooti/octopus-sdk 31.0.35 → 31.0.36

package/src/components/display/filter/AdvancedSearch.vue

@@ -19,12 +19,11 @@
           {{ $t('Filter') }}
         </div>
         <MonetizableFilter
-          v-if="isMonetizableFilter && !isEducation"
+          v-if="sdkParameters.isMonetizableFilter && !isEducation"
           :is-emission="isEmission"
           @updateMonetization="updateMonetization"
         />
         <CategoryFilter @updateCategory="updateCategory" />
-        
         <RubriqueFilter 
           :reset-rubriquage="resetRubriquage"
           :organisation-id="organisationId"
@@ -130,6 +129,7 @@
 
 <script lang="ts">
 import { state } from '../../../store/paramStore';
+import { orgaComputed } from '../../mixins/orgaComputed';
 import moment from 'moment';
 import CategoryFilter from './CategoryFilter.vue';
 import RubriqueFilter from './RubriqueFilter.vue';
@@ -148,6 +148,7 @@ export default defineComponent({
     ClassicCheckbox,
     ClassicRadio
   },
+  mixins: [orgaComputed],
   props: {
     organisationId: { default: undefined, type: String},
     isEmission: { default: false, type:  Boolean},
@@ -180,20 +181,15 @@ export default defineComponent({
   },
 
   computed: {
-    isMonetizableFilter(): boolean {
-      return (state.podcastsPage.MonetizableFilter as boolean);
-    },
-    myOrganisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
-    isProduction(): boolean {
-      return (state.generalParameters.isProduction as boolean);
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-    isContribution(): boolean {
-      return (state.generalParameters.isContribution as boolean);
+    sdkParameters(){
+      return {
+        isMonetizableFilter : (state.podcastsPage.MonetizableFilter as boolean),
+        isProduction : (state.generalParameters.isProduction as boolean),
+        isContribution : (state.generalParameters.isContribution as boolean)
+      }
     },
     organisationRight(): boolean {
       if (
@@ -203,57 +199,39 @@ export default defineComponent({
         return true;
       return false;
     },
-    isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
-    },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
       if (this.filterOrga) return this.filterOrga;
       return undefined;
     },
     textNotVisible(): string {
-      if (this.isEmission) return this.$t('Consider podcasts no visible').toString();
-      return this.$t('See podcasts no visible').toString();
+      if (this.isEmission) return this.$t('Consider podcasts no visible');
+      return this.$t('See podcasts no visible');
     },
     isCheckboxNotValidate(): boolean {
       return (
         undefined!==this.organisation &&
         this.organisationRight &&
-        this.isContribution &&
+        this.sdkParameters.isContribution &&
         !this.isPodcastmaker &&
         !this.isEmission &&
         this.isNotVisible
       );
     },
     textNotValidate(): string {
-      if (this.isProduction) return this.$t('Display all podcasts to validate').toString();
+      if (this.sdkParameters.isProduction) return this.$t('Display all podcasts to validate').toString();
       return this.$t('Display my podcasts to validate').toString();
     },
   },
   watch: {
     organisation(): void {
-      if (this.organisation && this.organisationRight && !this.isEmission) {
-        this.isNotVisible = true;
-      } else {
-        this.isNotVisible = false;
-      }
+      this.isNotVisible = undefined!==this.organisation && this.organisationRight && !this.isEmission;
     },
     isFrom(): void {
-      if (this.isFrom) {
-        this.$emit('updateFromDate', moment(this.fromDate).toISOString(true));
-      } else {
-        this.$emit('updateFromDate', undefined);
-      }
+      this.$emit('updateFromDate', this.isFrom ? moment(this.fromDate).toISOString(true) : undefined);
     },
     isTo(): void {
-      if (this.isTo) {
-        this.$emit('updateToDate', moment(this.toDate).toISOString(true));
-      } else {
-        this.$emit('updateToDate', undefined);
-      }
+      this.$emit('updateToDate', this.isTo ? moment(this.toDate).toISOString(true) : undefined);
     },
     sort(): void {
       this.$emit('updateSortCriteria', this.sort);
@@ -306,11 +284,7 @@ export default defineComponent({
       this.$emit('updateMonetization', value);
     },
     updateCategory(value: number){
-      if(0!==value){
-        this.$emit('updateCategory', value);
-      }else{
-        this.$emit('updateCategory', undefined);
-      }
+      this.$emit('updateCategory', 0!==value ? value : undefined);
     },
     updateRubriquageFilter(value: Array<RubriquageFilter>){
       this.$emit('updateRubriquageFilter', value);

package/src/components/display/filter/CategoryFilter.vue

@@ -44,11 +44,7 @@ export default defineComponent({
         return;
       }
       this.isInternChanged = true;
-      if (this.isCategory) {
-        this.$emit('updateCategory', this.iabId);
-      } else {
-        this.$emit('updateCategory', 0); 
-      }
+      this.$emit('updateCategory', this.isCategory?this.iabId:0);
       this.resetCategoryFilter();
       this.$nextTick(() => {
         this.isInternChanged = false;
@@ -70,21 +66,16 @@ export default defineComponent({
     categoryFilter:{
       deep: true,
       handler(){
-      if(this.isInternChanged){
-        return;
-      }
-      this.isInternChanged = true;
-      if(this.categoryFilter){
-        this.iabId = this.categoryFilter.id;
-        this.isCategory = true;
-      }else{
-        this.iabId = 0;
-        this.isCategory = false;
-      }
-      this.$emit('updateCategory', this.iabId);
-      this.$nextTick(() => {
-        this.isInternChanged = false;
-      });
+        if(this.isInternChanged){
+          return;
+        }
+        this.isInternChanged = true;
+        this.iabId = this.categoryFilter ? this.categoryFilter.id : 0;
+        this.isCategory = this.categoryFilter ? true : false;
+        this.$emit('updateCategory', this.iabId);
+        this.$nextTick(() => {
+          this.isInternChanged = false;
+        });
       }
     },
   },

package/src/components/display/filter/MonetizableFilter.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="d-flex align-items-center"
-  >
+  <div class="d-flex align-items-center">
     <div>{{ $t('Advertising') + ' :' }}</div>
     <label class="position-relative">
       <select
@@ -10,16 +8,7 @@
         class="ms-2 mb-0 pe-4 c-hand"
         @change="onChange"
       >
-        <option
-          v-if="isEmission"
-          value="UNDEFINED"
-        >{{
-          $t('All emissions')
-        }}</option>
-        <option
-          v-else
-          value="UNDEFINED"
-        >{{ $t('All podcasts') }}</option>
+        <option value="UNDEFINED">{{ allString }}</option>
         <option value="YES">{{ $t('Authorized advertising') }}</option>
         <option value="NO">{{ $t('Prohibited advertising') }}</option>
       </select>
@@ -41,7 +30,11 @@ export default defineComponent({
       monetization: 'UNDEFINED' as string,
     };
   },
-
+  computed:{
+    allString(): string{
+      return this.isEmission? this.$t('All emissions') : this.$t('All podcasts');
+    }
+  },
   methods: {
     onChange(): void {
       this.$emit('updateMonetization', this.monetization);

package/src/components/display/filter/ProductorSearch.vue

@@ -66,7 +66,6 @@ export default defineComponent({
     return {
       keepOrganisation: false as boolean,
       showBubble: false as boolean,
-      imgUrl: '' as string,
       queryIntern: '' as string,
     };
   },
@@ -76,11 +75,10 @@ export default defineComponent({
       return (state.generalParameters.podcastmaker as boolean);
     },
     searchText(): string {
-      if ('emission' === this.type) return this.$t('Look for emission name').toString();
-      if ('participant' === this.type)
-        return this.$t('Look for participant name').toString();
-      if ('playlist' === this.type) return this.$t('Look for playlist name').toString();
-      return this.$t('Look for podcast name').toString();
+      if ('emission' === this.type) return this.$t('Look for emission name');
+      if ('participant' === this.type)return this.$t('Look for participant name');
+      if ('playlist' === this.type) return this.$t('Look for playlist name');
+      return this.$t('Look for podcast name');
     },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
@@ -88,15 +86,14 @@ export default defineComponent({
   },
   watch: {
     queryIntern(): void {
-      if(this.queryIntern !== this.searchPattern)
-      this.$emit('updateSearchPattern', this.queryIntern);
+      if(this.queryIntern !== this.searchPattern){
+        this.$emit('updateSearchPattern', this.queryIntern);
+      }
     },
-    filterOrga(): void {
+    filterOrga():void{
+      this.keepOrganisation = undefined!==this.filterOrga;
       if (this.filterOrga) {
-        this.keepOrganisation = true;
         this.$emit('updateOrganisationId', this.filterOrga);
-      } else {
-        this.keepOrganisation = false;
       }
     },
   },
@@ -114,10 +111,7 @@ export default defineComponent({
       if (this.$route.query.productor) {
         this.$router.push({ query: { productor: undefined } });
       }
-      this.imgUrl = organisation.imageUrl;
-      this.$store.commit('filterOrga', {
-        orgaId: undefined,
-      });
+      this.$store.commit('filterOrga', {orgaId: undefined});
       this.keepOrganisation = false;
       if (organisation && organisation.id) {
         this.$emit('updateOrganisationId', organisation.id);
@@ -141,10 +135,7 @@ export default defineComponent({
         await this.selectOrganisation(this.organisationId);
         return;
       }
-      if (this.$route.query.productor) {
-        this.$router.push({ query: { productor: undefined } });
-      }
-      this.$store.commit('filterOrga', { orgaId: undefined });
+      this.removeSelectedOrga();
     },
   },
 })
@@ -153,69 +144,69 @@ export default defineComponent({
 <style lang="scss">
 @import '../../../sass/_variables.scss';
 .octopus-app{
-.filter-speech-bubble {
-  position: absolute;
-  background: $octopus-primary-dark;
-  border-radius: 0.4em;
-  width: 10rem;
-  right: 4rem;
-  padding: 5px;
-  -webkit-animation: fadein 1s;
-  -moz-animation: fadein 1s;
-  animation: fadein 1s;
-  color: white;
-}
-
-.filter-speech-bubble:after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  width: 0;
-  height: 0;
-  border: 18px solid transparent;
-  border-left-color: $octopus-primary-dark;
-  border-right: 0;
-  border-bottom: 0;
-  margin-top: -9px;
-  margin-right: -18px;
-  -webkit-animation: fadein 1s;
-  -moz-animation: fadein 1s;
-  animation: fadein 1s;
-}
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+  .filter-speech-bubble {
+    position: absolute;
+    background: $octopus-primary-dark;
+    border-radius: 0.4em;
+    width: 10rem;
+    right: 4rem;
+    padding: 5px;
+    -webkit-animation: fadein 1s;
+    -moz-animation: fadein 1s;
+    animation: fadein 1s;
+    color: white;
   }
-}
-@-moz-keyframes fadein {
-  from {
-    opacity: 0;
+
+  .filter-speech-bubble:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 0;
+    height: 0;
+    border: 18px solid transparent;
+    border-left-color: $octopus-primary-dark;
+    border-right: 0;
+    border-bottom: 0;
+    margin-top: -9px;
+    margin-right: -18px;
+    -webkit-animation: fadein 1s;
+    -moz-animation: fadein 1s;
+    animation: fadein 1s;
   }
-  to {
-    opacity: 1;
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-}
-@-webkit-keyframes fadein {
-  from {
-    opacity: 0;
+  @-moz-keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-  to {
-    opacity: 1;
+  @-webkit-keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-}
-.filter-organisation-chooser {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  margin-right: 10%;
-  position: relative;
-  @media (max-width: 500px) {
-    margin-right: 0;
+  .filter-organisation-chooser {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    margin-right: 10%;
+    position: relative;
+    @media (max-width: 500px) {
+      margin-right: 0;
+    }
   }
 }
-}
 </style>

package/src/components/display/filter/RubriqueChoice.vue

@@ -80,10 +80,7 @@ export default defineComponent({
       const topicIndex = this.rubriquageDisplay.findIndex(
         ( element: Rubriquage) => element.rubriquageId === rubriquageId
       );
-      if(-1 !== topicIndex){
-        return this.rubriquageDisplay[topicIndex].rubriques;
-      }
-      return [];
+      return -1 !== topicIndex ? this.rubriquageDisplay[topicIndex].rubriques : [];
     },
     onRubriqueSelected(rubrique: Rubrique): void {
       if (rubrique.rubriqueId === this.rubriqueId) return;

package/src/components/display/filter/RubriqueFilter.vue

@@ -151,11 +151,7 @@ export default defineComponent({
           this.arrayFilter = [{rubriquageId: this.rubriquageData[0].rubriquageId, rubriqueId: 0, nameRubriquage:this.rubriquageData[0].title, nameRubrique:""}];
           this.isRubriquage = false;
         }
-        if(this.isRubriquage){
-          this.$emit('updateRubriquageFilter', this.arrayFilter);
-        }else{
-          this.$emit('updateRubriquageFilter', []);
-        }
+        this.$emit('updateRubriquageFilter',this.isRubriquage? this.arrayFilter : []);
         this.$nextTick(() => {
           this.isInternChanged = false;
         });

package/src/components/display/list/ListPaginate.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    :id="id"
+    class="d-flex flex-column align-items-center"
+  >
+    <ClassicLoading
+      :loading-text="loadingText"
+      :error-text="errorText"
+    />
+    <template v-if="!loading">
+      <div class="paginate-section page-box">
+        <div class="text-secondary">
+          <template v-if="textCount && (windowWidth > 1300 || windowWidth<=960)">
+            {{ textCount }}
+          </template>
+        </div>
+        <Paginate 
+          v-if="!isPhone"
+          :first="first"
+          :rows-per-page="rowsPerPage"
+          :total-count="totalCount"
+          :range-size="rangeSize"
+          @update:first="changeFirst"
+          @update:rowsPerPage="changeSize"
+        />
+      </div>
+    </template>
+    <slot name="list" />
+    <button
+      v-show="((first+rowsPerPage) < totalCount) && isPhone"
+      :disabled="loading"
+      class="btn"
+      :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4' : 'btn-more'"
+      :title="$t('See more')"
+      @click="fetchMore"
+    >
+      <template v-if="buttonPlus">
+        {{ $t('See more') }}
+      </template>
+      <div
+        :class="buttonPlus?'ms-1':''"
+        class="saooti-more"
+      />
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import domHelper from '../../../helper/dom';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { state } from '../../../store/paramStore';
+import Paginate from './Paginate.vue';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ListPaginate',
+  components: {
+    Paginate,
+    ClassicLoading
+  },
+  props: {
+    first: { default: 0, type: Number},
+    rowsPerPage: { default: 30, type: Number},
+    totalCount: { default: 0, type: Number},
+    textCount: { default: undefined, type: String},
+    id: {default: '', type: String},
+    loadingText:{ default: undefined, type: String},
+    errorText:{ default: undefined, type: String},
+    loading: { default: false, type:Boolean},
+    isMobile: { default: false, type: Boolean}
+  },
+
+  emits: ['update:first', 'update:rowsPerPage', 'update:isMobile'],
+  data() {
+    return {
+      windowWidth: window.innerWidth as number,
+		};
+  },
+  computed:{
+    buttonPlus(): boolean {
+      return (state.generalParameters.buttonPlus as boolean);
+    },
+    isPhone(){
+      return 960 >= this.windowWidth;
+    },
+    rangeSize(){
+      if(this.windowWidth > 1600){
+        return 3;
+      }else if(this.windowWidth > 1530){
+        return 2;
+      }
+      return 1;
+    },
+  },
+  watch:{
+    isPhone:{
+      immediate:true,
+      handler(){
+        this.$emit('update:isMobile', this.isPhone);
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+  },
+  beforeUnmount() { 
+    window.removeEventListener('resize', this.onResize); 
+  },
+  methods:{
+    onResize() {
+      this.windowWidth = window.innerWidth;
+    },
+    fetchMore(){
+      this.$emit('update:first', this.first + this.rowsPerPage);
+    },
+    changeFirst(firstValue: number){
+      this.scrollToTop();
+      this.$emit('update:first', firstValue);
+    },
+    changeSize(sizeValue: number){
+      this.scrollToTop();
+      this.$emit('update:rowsPerPage', sizeValue)
+    },
+    scrollToTop(){
+      const element = document.getElementById(this.id);
+      if(!element || element.getBoundingClientRect().top > 0){return;}
+      const y = element.getBoundingClientRect().top + window.pageYOffset - domHelper.convertRemToPixels(3.5);
+      window.scrollTo({top: y, behavior: 'smooth'});
+    }
+	}
+})
+</script>
+<style lang="scss">
+.octopus-app .page-box.paginate-section{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 99vw;
+  position: sticky;
+  top: 3.5rem;
+  z-index: 9;
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+  @media (max-width: 960px) {
+    position: initial;
+    justify-content:center;
+  }
+}
+</style>