@saooti/octopus-sdk 36.0.5 → 36.0.7

package/src/components/form/ClassicMultiselect.vue

@@ -0,0 +1,192 @@
+<template>
+  <div 
+    :class="{'multiselect-in-modal' : inModal,
+             'multiselect-no-deselect': noDeselect}"
+    :style="{ width: width }"
+  >
+    <label
+      :class="displayLabel? '':'d-none'"
+      :for="id"
+      class="form-label"
+    >{{ label }}</label>
+    <vSelect
+      :id="id"
+      v-model="optionSelected"
+      :label="optionLabel"
+      :append-to-body="inModal"
+      :multiple="multiple"
+      :options="options"
+      :disabled="isDisabled"
+      :loading="isLoading"
+      :placeholder="placeholder"
+      :selectable="()=>!maxOptionsSelected"
+      @open="onSearch"
+      @search="onSearch"
+      @option:selected="onOptionSelected"
+      @option:deselected="onOptionDeselect"
+    >
+      <template
+        v-if="optionCustomTemplating.length"
+        #option="option"
+      >
+        <slot
+          :name="optionCustomTemplating"
+          :option="option"
+        />
+      </template>
+      <template
+        v-if="optionSelectedCustomTemplating.length"
+        #selected-option="option"
+      >
+        <slot
+          :name="optionSelectedCustomTemplating"
+          :option="option"
+        />
+      </template>
+      <template #no-options="{ searching }">
+        <span v-if="searching">{{ $t('No elements found. Consider changing the search query.') }}</span>
+        <span v-else>{{ $t('List is empty') }}</span>
+      </template>
+      <template #list-footer>
+        <li
+          v-if="remainingElements"
+          class="vs__dropdown-option"
+        >
+          {{
+            $t('Count more elements matched your query, please make a more specific search.',{ count: remainingElements })
+          }}
+        </li>
+      </template>
+      <template #list-header>
+        <li
+          v-if="maxOptionsSelected"
+          class="vs__dropdown-option"
+        >
+          {{
+            $t('Multiselect max options', {max:maxOptions})
+          }}
+        </li>
+      </template>
+    </vSelect>
+  </div>
+</template>
+
+<script lang="ts">
+import vSelect from "vue-select";
+  export default {
+    components: {
+      vSelect,
+    },
+    props: {
+      id:{default: '', type: String},
+      label:{default: '', type: String},
+      placeholder:{default: '', type: String},
+      optionLabel:{default: '', type: String},
+      inModal:{default: false, type: Boolean},
+      multiple:{default: false, type: Boolean},
+      isDisabled:{default: false, type: Boolean},
+      width: { default: '100%', type: String },
+      maxElement: { default: 50, type: Number },
+      minSearchLength: { default: 3, type: Number },
+      optionChosen: { default: undefined, type: Object as ()=>unknown},
+      noDeselect:{default: true, type: Boolean},
+      optionCustomTemplating:{default: "", type: String},
+      optionSelectedCustomTemplating:{default: "", type: String},
+      displayLabel:{default: false, type: Boolean},
+      maxOptions: { default: null, type: Number },
+      allowEmpty: { default: true, type: Boolean },
+    },
+
+    emits: ['onSearch','selected'],
+
+    data() {
+      return {
+        optionSelected: undefined as unknown|undefined,
+        options: [] as Array<unknown>,
+        remainingElements: 0 as number,
+        isLoading: false as boolean,
+        nbOptionsSelected: 0 as number,
+      };
+    },
+    computed:{
+      maxOptionsSelected(): boolean{
+        if(this.maxOptions !== null && this.multiple){
+          return (this.optionSelected as Array<unknown>).length >= this.maxOptions;
+        }
+        return false;
+      }
+    },
+
+    watch: {
+      optionChosen: {
+        deep: true,
+        immediate:true,
+        handler(){
+          this.optionSelected = this.optionChosen;
+        }
+      },
+      optionSelected: {
+        deep: true,
+        handler(){
+          if(this.noDeselect || null!==this.optionSelected){ return; }
+          this.$emit('selected', undefined);
+        }
+      }
+    },
+    
+    methods:{
+      onSearch(search: string): void{
+        if(search && search.length < this.minSearchLength){return;}
+        this.isLoading = true;
+        this.$emit('onSearch', search);
+      },
+      afterSearch(optionsFetched: Array<unknown>, count: number):void{
+        this.options = optionsFetched;
+        this.remainingElements = Math.max(0, count - this.maxElement);
+        this.isLoading = false;
+      },
+      onOptionSelected(optionSelected: unknown):void{
+        this.$emit('selected', optionSelected);
+      },
+      onOptionDeselect(event: unknown):void{
+        if(!this.multiple){ return; }
+        if(!this.allowEmpty && 1>=(this.optionSelected as Array<unknown>).length){
+          (this.optionSelected as Array<unknown>).push(event);
+          return;
+        }
+        this.$emit('selected', this.optionSelected);
+      }
+    }
+  }
+</script>
+<style lang="scss">
+@import "vue-select/dist/vue-select.css";
+:root{
+  --vs-dropdown-z-index:1060;
+}
+.octopus-app{
+  --vs-border-radius: 0.2rem;
+  --vs-dropdown-option--active-bg: #ddd;
+  --vs-dropdown-option--active-color: black;
+  --vs-font-size:0.8rem;
+  .vs__dropdown-option{
+    white-space: initial;
+  }
+  .vs__search:focus{
+    min-width: 150px;
+  }
+  .multiselect-no-deselect .vs__clear{
+    display: none;
+  }
+  .multiselect-transparent{
+    --vs-border-color: transparent;
+  }
+  .multiselect-white{
+    --vs-selected-color: white;
+    --vs-dropdown-bg: black;
+    .vs__actions path{
+      fill: white;
+    }
+  }
+}
+</style>

package/src/components/misc/TopBar.vue

@@ -45,9 +45,14 @@
           {{ link.title }}
         </router-link>
       </template>
-      <button id="more-dropdown" class="d-flex align-items-center hide-phone btn-transparent p-3">
-        <div class="link-hover">{{$t('More')}}</div>
-        <div class="ms-1 saooti-down"></div>
+      <button
+        id="more-dropdown"
+        class="d-flex align-items-center hide-phone btn-transparent p-3"
+      >
+        <div class="link-hover">
+          {{ $t('More') }}
+        </div>
+        <div class="ms-1 saooti-down" />
       </button>
       <Popover
         target="more-dropdown"
@@ -80,7 +85,6 @@
       @click="onDisplayMenu(false)"
     />
     <div class="d-flex flex-column">
-      
       <div class="d-flex justify-content-end flex-nowrap">
         <HomeDropdown :is-education="isEducation" />
         <router-link

package/src/components/misc/modal/NewsletterModal.vue

@@ -8,7 +8,7 @@
     <template #body>
       <div class="d-flex justify-content-between">
         <!-- eslint-disable vue/no-v-html -->
-        <div v-html="newsletterHtml"/>
+        <div v-html="newsletterHtml" />
         <!-- eslint-enable -->
         <div class="d-flex flex-column flex-grow-1 ms-4">
           <h4 class="mb-3">

package/src/components/pages/Emission.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="page-box">
-    <template v-if="loaded && !error" >
+    <template v-if="loaded && !error">
       <div class="page-element-title-container">
         <div class="page-element-title">
           <h1>{{ $t('Emission') }}</h1>
         </div>
-        <div class="page-element-bg" :style="backgroundDisplay"></div>
+        <div
+          class="page-element-bg"
+          :style="backgroundDisplay"
+        />
       </div>
       <div class="d-flex flex-column page-element">
         <div class="module-box">

package/src/components/pages/Home.vue

@@ -30,9 +30,9 @@
           :to="{
             name: 'podcasts',
             query: { productor: filterOrgaId, 
-                    iabId: filterIab?.id,
-                    rubriquesId: this.rubriqueQueryParam },
-            }"
+                     iabId: filterIab?.id,
+                     rubriquesId: rubriqueQueryParam },
+          }"
           class="btn btn-primary align-self-center width-fit-content mt-5 m-auto"
         >
           {{

package/src/components/pages/Playlist.vue

@@ -7,7 +7,10 @@
         <div class="page-element-title">
           <h1>{{ $t('Playlist') }}</h1>
         </div>
-        <div class="page-element-bg" :style="backgroundDisplay"></div>
+        <div
+          class="page-element-bg"
+          :style="backgroundDisplay"
+        />
       </div>
       <div class="d-flex flex-column page-element">
         <div class="module-box">

package/src/components/pages/Podcast.vue

@@ -9,7 +9,10 @@
             :time-remaining="timeRemaining"
           />
         </div>
-        <div class="page-element-bg" :style="backgroundDisplay"></div>
+        <div
+          class="page-element-bg"
+          :style="backgroundDisplay"
+        />
       </div>
       <div class="d-flex flex-column page-element">
         <PodcastModuleBox

package/src/locale/de.ts

@@ -316,4 +316,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"QR-Code",
   "Rss feed": "RSS-Feed",
+  "Multiselect max options":"Maximal {max} gleichzeitige Optionen. Bitte entfernen Sie zuerst eine Option, um eine neue auswählen zu können",
 }

package/src/locale/en.ts

@@ -323,4 +323,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"QR Code",
   "Rss feed": "Rss feed",
+  "Multiselect max options":"Maximum of {max} concurrent options. Please first remove an option to be able to select a new one",
 };

package/src/locale/es.ts

@@ -316,4 +316,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"Código QR",
   "Rss feed": "RSS Feed",
+  "Multiselect max options":"Máximo de {max} opciones simultáneas. Primero elimine una opción para poder seleccionar una nueva",
 }

package/src/locale/fr.ts

@@ -323,4 +323,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"QR Code",
   "Rss feed": "Flux RSS",
+  "Multiselect max options":"Maximum de {max} options simultanées. Veuillez dans un premier temps retirer une option pour pouvoir en sélectionner une nouvelle",
 };

package/src/locale/it.ts

@@ -313,4 +313,5 @@ export default{
     "Newsletter":"Newsletter",
     "QR Code":"QR Code",
     "Rss feed": "RSS Feed",
+    "Multiselect max options":"Massimo di {max} opzioni simultanee. Per prima cosa rimuovi un'opzione per poterne selezionare una nuova",
   };

package/src/locale/sl.ts

@@ -316,4 +316,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"koda QR",
   "Rss feed": "Rss vir",
+  "Multiselect max options":"Največ {max} sočasnih možnosti. Najprej odstranite možnost, da boste lahko izbrali novo",
 }

package/src/stores/ParamSdkStore.ts

@@ -5,14 +5,14 @@ const state:ParamStore = {
   generalParameters: {
     organisationId:'ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c',
     authenticated: true,
-    isAdmin: false,
+    isAdmin: true,
     isRoleLive: false,
     isCommments: false,
     isOrganisation: false,
     isPlaylist: false,
     isProduction: false,
     isContribution: true,
-    ApiUri: 'https://api.dev2.saooti.org/',
+    ApiUri: 'https://api.staging.saooti.org/',
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -26,8 +26,8 @@ const state:ParamStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: 'https://playerbeta.dev2.saooti.org/',
-    hlsUri: 'https://hls.dev2.saooti.org/',
+    MiniplayerUri: 'https://playerbeta.staging.saooti.org/',
+    hlsUri: 'https://hls.staging.saooti.org/',
     mainRubrique: 0,
     resourceUrl: undefined,
     podcastItemShowEmission: false,
@@ -79,13 +79,13 @@ const state:ParamStore = {
     userName: '',
   },
   octopusApi: {
-    url: 'https://api.dev2.saooti.org/',
-    commentsUrl: 'https://comments.dev2.saooti.org/',
-    imageUrl:'https://imageproxy.dev2.saooti.org/',
-    studioUrl: 'https://studio.dev2.saooti.org/',
-    playerUrl: 'https://playerbeta.dev2.saooti.org/',
-    speechToTextUrl:'https://speech2text.dev2.saooti.org/',
-    recoUrl: 'https://reco.dev2.saooti.org/',
+    url: 'https://api.staging.saooti.org/',
+    commentsUrl: 'https://comments.staging.saooti.org/',
+    imageUrl:'https://imageproxy.staging.saooti.org/',
+    studioUrl: 'https://studio.staging.saooti.org/',
+    playerUrl: 'https://playerbeta.staging.saooti.org/',
+    speechToTextUrl:'https://speech2text.staging.saooti.org/',
+    recoUrl: 'https://reco.staging.saooti.org/',
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },
@@ -164,8 +164,8 @@ export interface Footer{
 }
 export interface Organisation{
   imageUrl?: string,
-    name?: string,
-    userName?: string,
+  name?: string,
+  userName?: string,
 }
 export interface OctopusApi{
   url?: string,

package/src/stores/class/general/organisation.ts

@@ -17,4 +17,12 @@ export interface Organisation{
   score?: number;
   soundcastId?: string;
   privacy?:string;
+}
+
+export function emptyOrgaData(defaultName: string): Organisation{
+  return {
+    imageUrl: "/img/emptypodcast.webp",
+    id: "",
+    name: defaultName
+  }
 }