@saooti/octopus-sdk 36.0.4 → 36.0.6

package/src/components/form/ClassicMultiselect.vue

@@ -0,0 +1,155 @@
+<template>
+  <div 
+    class="default-multiselect-width"
+    :class="{'multiselect-in-modal' : inModal,
+             'multiselect-no-deselect': noDeselect}"
+    :style="{ width: width }"
+  >
+    <label
+      :for="id"
+      :title="label"
+    />
+    <vSelect
+      :id="id"
+      v-model="optionSelected"
+      :label="optionLabel"
+      :append-to-body="inModal"
+      :multiple="multiple"
+      :options="options"
+      :disabled="isDisabled"
+      :loading="isLoading"
+      :placeholder="placeholder"
+      @open="onSearch"
+      @search="onSearch"
+      @option:selected="onOptionSelected"
+    >
+      <template
+        v-if="optionCustomTemplating"
+        #option="option"
+      >
+        <slot
+          name="optionTemplating"
+          :option="option"
+        />
+      </template>
+      <template
+        v-if="optionCustomTemplating"
+        #selected-option="option"
+      >
+        <slot
+          name="optionTemplating"
+          :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>
+    </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: false, type: Boolean},
+      optionCustomTemplating:{default: false, type: Boolean},
+    },
+
+    emits: ['onSearch','selected'],
+
+    data() {
+      return {
+        optionSelected: undefined as unknown|undefined,
+        options: [] as Array<unknown>,
+        remainingElements: 0 as number,
+        isLoading: false as boolean,
+      };
+    },
+
+    watch: {
+      optionChosen: {
+        deep: true,
+        immediate:true,
+        handler(){
+          this.optionSelected = this.optionChosen;
+        }
+      }
+    },
+    
+    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);
+      }
+    }
+  }
+</script>
+<style lang="scss">
+@import "vue-select/dist/vue-select.css";
+.octopus-app{
+  --vs-border-radius: 0.2rem;
+  --vs-dropdown-option--active-bg: #ddd;
+  --vs-dropdown-option--active-color: black;
+  .default-multiselect-width {
+    width: 100%;
+    font-size: 1rem;
+  }
+  .vs__dropdown-option{
+    white-space: initial;
+  }
+  .vs__search:focus{
+    min-width: 150px;
+  }
+  .multiselect-in-modal .vs__dropdown-menu{
+    z-index: 9999;
+  }
+  .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 btn-transparent p-3">
-        <div class="link-hover">{{$t('More')}}</div>
-        <div class="hide-phone 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/stores/ParamSdkStore.ts

@@ -5,7 +5,7 @@ const state:ParamStore = {
   generalParameters: {
     organisationId:'ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c',
     authenticated: true,
-    isAdmin: false,
+    isAdmin: true,
     isRoleLive: false,
     isCommments: false,
     isOrganisation: false,
@@ -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
+  }
 }