@saooti/octopus-sdk 33.2.11 → 33.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.2.11",
+  "version": "33.2.13",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/assets/form.scss

@@ -11,6 +11,11 @@
 		height: 2rem;
 		padding-right: 40px;
 	}
+	input[type="checkbox"] {
+		accent-color: $octopus-primary-color;
+		cursor: pointer;
+		margin-right: 5px;
+	}
 	.form-input {
 		appearance: none;
 		background: #fff;

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

@@ -30,11 +30,12 @@
       </div>
     </div>
     <ClassicSearch
-      v-model:textInit="queryIntern"
+      :text-init="searchPattern"
       class="d-flex align-items-center flex-grow-1"
       :autofocus="true"
       id-checkbox="productor-search-input"
       :label="searchText"
+      @update:textInit="$emit('update:searchPattern', $event)"
     />
   </div>
 </template>
@@ -60,16 +61,14 @@ export default defineComponent({
     searchPattern: { default: '', type: String },
     type: { default: 'podcast', type: String },
   },
-  emits: ['updateOrganisationId', 'updateSearchPattern'],
+  emits: ['update:organisationId', 'update:searchPattern'],
 
   data() {
     return {
       keepOrganisation: false as boolean,
       showBubble: false as boolean,
-      queryIntern: '' as string,
     };
   },
- 
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -85,22 +84,14 @@ export default defineComponent({
     },
   },
   watch: {
-    queryIntern(): void {
-      if(this.queryIntern !== this.searchPattern){
-        this.$emit('updateSearchPattern', this.queryIntern);
-      }
-    },
     filterOrga():void{
       this.keepOrganisation = undefined!==this.filterOrga;
       if (this.filterOrga) {
-        this.$emit('updateOrganisationId', this.filterOrga);
+        this.$emit('update:organisationId', this.filterOrga);
       }
     },
   },
   async created() {
-    if(this.searchPattern){
-      this.queryIntern=this.searchPattern;
-    }
     if (!this.organisationId) return;
     if(this.$store.state.filter.organisationId === this.organisationId){
       this.keepOrganisation = true;
@@ -114,7 +105,7 @@ export default defineComponent({
       this.$store.commit('filterOrga', {orgaId: undefined});
       this.keepOrganisation = false;
       if (organisation && organisation.id) {
-        this.$emit('updateOrganisationId', organisation.id);
+        this.$emit('update:organisationId', organisation.id);
         if("PUBLIC"!==organisation.privacy){
           this.$nextTick(() => {
             this.onKeepOrganisation();
@@ -126,7 +117,7 @@ export default defineComponent({
           }, 6000);
         }
       } else {
-        this.$emit('updateOrganisationId', undefined);
+        this.$emit('update:organisationId', undefined);
       }
     },
     async onKeepOrganisation(): Promise<void> {

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

@@ -7,8 +7,9 @@
       <label for="rows-per-page-select">{{ $t('Items per page :') }}</label>
       <select
         id="rows-per-page-select"
-        v-model="rowsPerPageIntern"
+        :value="rowsPerPage"
         class="c-hand p-1 mx-2"
+        @input="$emit('update:rowsPerPage',$event.target.value)"
       >
         <option
           v-for="option in optionsRowsPerPage"
@@ -57,7 +58,7 @@
             v-else
             class="btn"
             :class="{ 'active': page === (pageNumber-1) }"
-            @click="changeFirst((pageNumber-1)*rowsPerPageIntern)"
+            @click="changeFirst((pageNumber-1)*rowsPerPage)"
           >
             {{ pageNumber }}
           </button>
@@ -87,26 +88,26 @@
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: "Paginate",
-  components: {
-  },
+
 	props: {
     totalCount: { default: 0, type: Number },
     first: { default: 0, type: Number },
 		rowsPerPage:{ default:0, type:Number},
     rangeSize:{default:1, type: Number}
   },
+
 	emits:['update:first', 'update:rowsPerPage'],
+
   data() {
     return {
-			rowsPerPageIntern: 30 as number,
 			optionsRowsPerPage: [5, 10, 15, 20, 25 , 30, 50] as Array<number>,
 		};
   },
+  
 	computed:{
     buttonsLeft(){
       return [{
@@ -144,18 +145,6 @@ export default defineComponent({
 			return (this.totalPage-1)*this.rowsPerPage;
 		}
 	},
-	watch: {
-    rowsPerPageIntern(){
-			if(this.rowsPerPage !== this.rowsPerPageIntern){
-				this.$emit('update:rowsPerPage', this.rowsPerPageIntern);
-			}
-		},
-		rowsPerPage(){
-			if(this.rowsPerPage !== this.rowsPerPageIntern){
-				this.rowsPerPageIntern =this.rowsPerPage;
-			}
-		}
-  },
 	created(){
 		this.initRowsPerPage();
 	},
@@ -189,11 +178,11 @@ export default defineComponent({
       return res;
     },
     initRowsPerPage(){
-      if(!this.optionsRowsPerPage.includes(this.rowsPerPage)){
-        this.optionsRowsPerPage.push(this.rowsPerPage);
-        this.optionsRowsPerPage.sort((a,b)=>a-b);
+      if(this.optionsRowsPerPage.includes(this.rowsPerPage)){
+        return;
       }
-      this.rowsPerPageIntern = this.rowsPerPage;
+      this.optionsRowsPerPage.push(this.rowsPerPage);
+      this.optionsRowsPerPage.sort((a,b)=>a-b);
     },
 		changeFirst(newFirst: number){
 			this.$emit('update:first', newFirst);

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

@@ -80,10 +80,10 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.organisation-chooser-light select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
+  .organisation-chooser-light select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
 }
 </style>

package/src/components/display/sharing/SharePlayerColors.vue

@@ -3,23 +3,25 @@
     <div class="d-flex flex-column align-items-center flex-shrink-0 me-3">
       <div>{{ $t('Choose color') }}</div>
       <VSwatches
-        v-model="internColor"
+        :model-value="color"
         class="c-hand "
         show-fallback
         colors="text-advanced"
         popover-to="right"
-        :data-color="internColor"
+        :data-color="color"
+        @update:modelValue="$emit('update:color',$event)"
       />
     </div>
     <div class="d-flex flex-column align-items-center">
       <div>{{ $t('Choose theme') }}</div>
       <VSwatches
-        v-model="internTheme"
+        :model-value="theme"
         class="c-hand "
         show-fallback
         colors="text-advanced"
         popover-to="right"
-        :data-color="internTheme"
+        :data-color="theme"
+        @update:modelValue="$emit('update:theme',$event)"
       />
     </div>
   </div>
@@ -39,40 +41,5 @@ export default defineComponent({
     theme: { default: '#000000', type: String},
   },
   emits:['update:color', 'update:theme'],
-
-  data() {
-    return {
-      internColor:'#40a372' as string,
-      internTheme:'#000000' as string,
-    };
-  },
-  watch:{
-    internColor(){
-      if(this.color !== this.internColor){
-        this.$emit('update:color', this.internColor);
-      }
-    },
-    internTheme(){
-      if(this.theme !== this.internTheme ){
-        this.$emit('update:theme', this.internTheme);
-      }
-    },
-    theme: {
-      immediate: true,
-      handler() {
-        if(this.theme !== this.internTheme){
-          this.internTheme = this.theme;
-        }
-      },
-    },
-    color: {
-      immediate: true,
-      handler() {
-        if(this.color !== this.internColor){
-          this.internColor = this.color;
-        }
-      },
-    },
-  },
 })
 </script>

package/src/components/form/ClassicCheckbox.vue

@@ -5,17 +5,18 @@
     >
       <input
         :id="idCheckbox"
-        v-model="textValue"
+        :value="textInit"
         type="checkbox"
         :disabled="isDisabled"
         :title="displayLabel?'':label"
         :data-selenium="selenium"
+        @input="$emit('update:textInit',!textInit)"
         @click="emitClickAction"
       >
       <span
         v-if="isSwitch"
         class="slider"
-        @click="textValue=!textValue;emitClickAction"
+        @click="$emit('update:textInit',!textInit);emitClickAction"
       />
     </div>
     <label
@@ -41,27 +42,6 @@ export default defineComponent({
     selenium: { default: '', type: String },
   },
   emits: ['update:textInit', 'clickAction'],
-
-  data() {
-    return {
-      textValue: false as boolean,
-    };
-  },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-					this.textValue =this.textInit;
-					}
-      },
-    },
-  },
   methods:{
     emitClickAction():void{
       this.$emit('clickAction');
@@ -73,11 +53,6 @@ export default defineComponent({
 <style lang="scss">
 @import '@scss/_variables.scss';
 .octopus-app{
-  input[type="checkbox"] {
-    accent-color: $octopus-primary-color;
-    cursor: pointer;
-    margin-right: 5px;
-  }
   .octopus-form-switch{
     position: relative;
     display: inline-block;

package/src/components/form/ClassicRadio.vue

@@ -11,11 +11,12 @@
     >
       <input
         :id="idRadio + option.value"
-        v-model="textValue"
+        :checked="textInit===option.value"
         type="radio"
         :name="idRadio"
         :value="option.value"
         :disabled="isDisabled"
+        @input="$emit('update:textInit',$event.target.value)"
       >
       <label
         class="c-hand"
@@ -40,27 +41,6 @@ export default defineComponent({
     isColumn: {default:true, type:Boolean}
   },
   emits: ['update:textInit'],
-
-  data() {
-    return {
-      textValue: undefined as string|undefined,
-    };
-  },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-          this.textValue =this.textInit;
-          }
-      },
-    },
-  }
 });
 </script>
 <style lang="scss">

package/src/components/form/ClassicSearch.vue

@@ -3,24 +3,25 @@
     <input
       :id="idSearch"
       ref="search"
-      v-model="textValue"
+      :value="textInit"
       type="text"
       class="search-input w-100 p-2 "
       :placeholder="label"
       :autofocus="autofocus"
+      @input="$emit('update:textInit',$event.target.value)"
     >
     <label
       :for="idSearch"
       :title="label"
     />
     <div
-      v-if="!textValue"
+      v-if="!textInit"
       class="saooti-search search-icon-container"
     />
     <div
       v-else
       class="saooti-remove search-icon-container c-hand"
-      @click="textValue = ''"
+      @click="$emit('update:textInit','')"
     />
   </div>
 </template>
@@ -37,27 +38,6 @@ export default defineComponent({
   },
 
   emits: ['update:textInit'],
-
-  data() {
-    return {
-      textValue: '' as string,
-    };
-  },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-          this.textValue =this.textInit;
-          }
-      },
-    },
-  }
 });
 </script>
 <style lang="scss">

package/src/components/form/ClassicSelect.vue

@@ -7,11 +7,12 @@
     >{{ label }}</label>
     <select
       :id="idSelect"
-      v-model="textValue"
+      :value="textInit"
       :disabled="isDisabled"
       class="c-hand w-100"
       :class="transparent?'transparent':''"
       :style="getFontFamily"
+      @input="$emit('update:textInit',$event.target.value)"
     >
       <option
         v-for="option in options"
@@ -38,15 +39,10 @@ export default defineComponent({
     textInit: { default: undefined, type: String },
   },
   emits: ['update:textInit'],
-  data() {
-    return {
-      textValue: undefined as string|undefined,
-    };
-  },
   computed:{
     getFontFamily(): string{
       const item = this.options.find((x) => {
-        return this.textValue === x.value;
+        return this.textInit === x.value;
       });
       if(item && item.fontFamily){
         return 'font-family:'+item.fontFamily;
@@ -54,21 +50,6 @@ export default defineComponent({
       return "";
     }
   },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-          this.textValue =this.textInit;
-        }
-      },
-    },
-  },
 });
 </script>
 <style lang="scss">

package/src/components/pages/Emissions.vue

@@ -4,7 +4,7 @@
     <ProductorSearch
       v-if="isProductorSearch"
       v-model:organisationId="organisationId"
-      :search-pattern="searchPattern"
+      v-model:search-pattern="searchPattern"
       type="emission"
       @updateOrganisationId="updateOrganisationId"
       @updateSearchPattern="updateSearchPattern"
@@ -27,8 +27,8 @@
     />
     <EmissionList
       :show-count="true"
-      :first="first"
-      :size="size"
+      :first="0"
+      :size="30"
       :query="searchPattern"
       :organisation-id="organisationId"
       :monetization="monetization"
@@ -66,8 +66,7 @@ export default defineComponent({
 
   data() {
     return {
-      first: 0 as number,
-      size: 30 as number,
+      isInit: false as boolean,
       searchPattern: '' as string,
       organisationId: undefined as string | undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -99,6 +98,18 @@ export default defineComponent({
       return this.organisationId?this.organisationId:this.filterOrga;
     },
   },
+  watch:{
+    organisationId(): void {
+      if(!this.isInit){return;}
+      this.resetRubriquage = !this.resetRubriquage;
+      this.rubriquageId = [];
+      this.rubriqueId = [];
+      this.noRubriquageId = [];
+    },
+    searchPattern(value: string): void {
+      this.sortEmission = '' !== value ? 'SCORE' : 'DATE';
+    },
+  },
 
   created() {
     this.initComponent();
@@ -132,17 +143,6 @@ export default defineComponent({
       this.rubriqueId = rubriqueId;
       this.noRubriquageId = noRubriquageId;
     },
-    updateOrganisationId(value: string | undefined): void {
-      this.resetRubriquage = !this.resetRubriquage;
-      this.rubriquageId = [];
-      this.rubriqueId = [];
-      this.noRubriquageId = [];
-      this.organisationId = value;
-    },
-    updateSearchPattern(value: string): void {
-      this.sortEmission = '' !== value ? 'SCORE' : 'LAST_PODCAST_DESC';
-      this.searchPattern = value;
-    },
   },
 })
 </script>

package/src/components/pages/Participants.vue

@@ -2,11 +2,9 @@
   <div class="page-box">
     <h1>{{ titleDisplay }}</h1>
     <ProductorSearch
-      :organisation-id="organisationId"
-      :search-pattern="searchPattern"
+      v-model:organisation-id="organisationId"
+      v-model:search-pattern="searchPattern"
       type="participant"
-      @updateOrganisationId="organisationId = $event"
-      @updateSearchPattern="searchPattern = $event"
     />
     <ParticipantList
       :show-count="true"

package/src/components/pages/Playlists.vue

@@ -13,10 +13,8 @@
     <ProductorSearch
       v-if="isProductorSearch"
       v-model:organisationId="organisationId"
-      :search-pattern="searchPattern"
+      v-model:search-pattern="searchPattern"
       type="playlist"
-      @updateOrganisationId="organisationId = $event"
-      @updateSearchPattern="searchPattern = $event"
     />
     <PlaylistList
       :show-count="true"

package/src/components/pages/Podcasts.vue

@@ -19,10 +19,8 @@
     </div>
     <ProductorSearch
       v-if="pageParameters.isProductorSearch"
-      :organisation-id="organisationId"
-      :search-pattern="searchPattern"
-      @updateOrganisationId="updateOrganisationId"
-      @updateSearchPattern="updateSearchPattern"
+      v-model:organisation-id="organisationId"
+      v-model:search-pattern="searchPattern"
     />
     <AdvancedSearch
       :is-education="isEducation"
@@ -43,8 +41,8 @@
     />
     <PodcastList
       :show-count="true"
-      :first="first"
-      :size="size"
+      :first="0"
+      :size="30"
       :organisation-id="organisationId"
       :query="searchPattern"
       :monetization="monetization"
@@ -89,8 +87,7 @@ export default defineComponent({
   },
   data() {
     return {
-      first: 0 as number,
-      size: 30 as number,
+      isInit: false as boolean,
       searchPattern: '' as string,
       organisationId: undefined as string|undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -126,11 +123,21 @@ export default defineComponent({
       }
     }
   },
-
+  watch:{
+    organisationId(): void {
+      if(!this.isInit){return;}
+      this.resetRubriquage = !this.resetRubriquage;
+      this.rubriquageId = [];
+      this.rubriqueId = [];
+      this.noRubriquageId = [];
+    },
+    searchPattern(value: string): void {
+      this.sortCriteria = '' !== value ? 'SCORE' : 'DATE';
+    },
+  },
   created() {
     this.initPodcastsPage();
   },
-  
   methods: {
     initPodcastsPage(){
       this.searchPattern = this.searchInit ?? '';
@@ -140,6 +147,7 @@ export default defineComponent({
       if(this.$store.state.filter.rubriqueFilter.length){
         this.updateRubriquageFilter(this.$store.state.filter.rubriqueFilter);
       }
+      this.isInit=true;
     },
     updateRubriquageFilter(value: Array<RubriquageFilter>){
       const length = value.length;
@@ -159,17 +167,6 @@ export default defineComponent({
       this.rubriqueId = rubriqueId;
       this.noRubriquageId = noRubriquageId;
     },
-    updateOrganisationId(value: string): void {
-      this.resetRubriquage = !this.resetRubriquage;
-      this.rubriquageId = [];
-      this.rubriqueId = [];
-      this.noRubriquageId = [];
-      this.organisationId = value;
-    },
-    updateSearchPattern(value: string): void {
-      this.sortCriteria = '' !== value ? 'SCORE' : 'DATE';
-      this.searchPattern = value;
-    },
     emissionSelected(emission: Emission): void {
       this.emissionId = emission && emission.emissionId ? emission.emissionId : undefined;
     },