@saooti/octopus-sdk 41.5.5 → 41.5.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGELOG
 
+## 41.5.7 (20/02/2026)
+
+**Fix**
+
+- Correction affichage composants utilisant `swiper`
+
+## 41.5.6 (20/02/2026)
+
+**Misc**
+
+- Ajout d'un props pour ajouter une entrée permettant de sélectionner toutes les
+  entrées dans `ClassicMultiselect`
+
 ## 41.5.5 (16/02/2026)
 
 **Fix**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.5.5",
+  "version": "41.5.7",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -48,7 +48,7 @@
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-gamut": "^1.3.4",
-    "swiper": "^11.2.10",
+    "swiper": "^12.1.2",
     "typescript-eslint": "^8.47.0",
     "video.js": "^8.23.6",
     "videojs-quality-selector-hls": "^1.1.1",

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

@@ -10,15 +10,17 @@
         :slides-offset-after="offsetSwiper"
         :allow-slide-next="loop"
         :allow-slide-prev="loop"
-        :navigation="true"
+        :navigation="navigationOptions"
         :modules="modules"
         @slides-updated="slidesUpdated"
         @slide-change="slideChange"
       >
-        <swiper-slide v-for="(obj, index) in listObject" :key="obj">
+        <swiper-slide v-for="(obj, index) in listObject" :key="index">
           <slot v-if="composableInit" name="octopusSlide" :option="obj" :index="index" />
         </swiper-slide>
       </swiper>
+      <div :id="prevElId" class="swiper-button-prev" />
+      <div :id="nextElId" class="swiper-button-next" />
     </template>
     <div v-else-if="composableInit" class="element-list-inline">
       <div v-for="(obj, index) in listObject" :key="obj" class="element-list-item">
@@ -36,7 +38,7 @@ import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 import {useResizePhone} from "../../composable/useResizePhone";
-import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
+import { computed, getCurrentInstance, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
 
 //Props 
 const props = defineProps({
@@ -48,7 +50,7 @@ const props = defineProps({
 //Data 
 const manualReload = ref(0);
 const numberItem = ref(5);
-const offsetSwiper = ref(40);
+const offsetSwiper = ref(0);
 const widthSwiperUsable = ref(0);
 const itemSizeWithoutRecalculed = ref(0);
 const composableInit = ref(false);
@@ -86,6 +88,17 @@ const modules = computed(() => {
   }
 });
 
+const uid = computed((): number => {
+  const instance = getCurrentInstance();
+  return instance.uid;
+});
+const prevElId = computed((): string => 'swiper-button-prev-' + uid.value);
+const nextElId = computed((): string => 'swiper-button-next-' + uid.value);
+const navigationOptions = computed(() => ({
+  prevEl: '#' + prevElId.value,
+  nextEl: '#' + nextElId.value
+}));
+
 //Watch
 watch(windowWidth, () => onWindowResize());
 watch(()=>props.listObject, () => {
@@ -143,12 +156,11 @@ function slideChange() {
     (nbTransformItems * itemRecalculizedSize.value + offsetSwiper.value) +
     "px, 0px, 0px)";
 }
-
 </script>
-<style lang="scss">
 
+<style lang="scss">
 :root {
-  --swiper-navigation-sides-offset: 0;
+  --swiper-navigation-sides-offset: -50px;
 }
 
 .swiper {
@@ -159,11 +171,11 @@ function slideChange() {
 .swiper-button-next,
 .swiper-button-prev {
   color: var(--octopus-primary) !important;
-  height: 100%;
+  //height: 100%;
   inset-block:0;
   margin: 0;
   width: 40px;
-  background: var(--octopus-background);
+  //background: var(--octopus-background);
 }
 
 .swiper-button-lock {

package/src/components/form/ClassicMultiselect.vue

@@ -56,21 +56,33 @@
       @option:selected="onOptionSelected"
       @option:deselected="onOptionDeselect"
     >
+      
       <template v-if="optionCustomTemplating.length" #option="option">
         <slot :name="optionCustomTemplating" :option="option" />
       </template>
+      <template v-else-if="withSelectAll" #option="option">
+        <strong v-if="option.id === selectAll.id">
+          {{ option[optionLabel] }}
+        </strong>
+        <span v-else>
+          {{ option[optionLabel] }}
+        </span>
+      </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>
         <div v-if="remainingElements" class="vs__dropdown-option">
           {{
@@ -81,11 +93,13 @@
           }}
         </div>
       </template>
+
       <template #list-header>
         <div v-if="maxOptionsSelected" class="vs__dropdown-option">
           {{ t("Multiselect max options", { max: maxOptions }) }}
         </div>
       </template>
+
       <template #open-indicator="{ attributes }">
         <ChevronDownIcon v-bind="attributes" />
       </template>
@@ -112,12 +126,14 @@ const {
   inModal = false, multiple = false, isDisabled = false, width = "100%",
   maxElement = 50, minSearchLength = 3, noDeselect = true, displayLabel = false,
   allowEmpty = true, optionChosen, maxOptions = null,
-  optionCustomTemplating = '', optionSelectedCustomTemplating = ''
+  optionCustomTemplating = '', optionSelectedCustomTemplating = '',
+  optionLabel,
+  withSelectAll = false
 } = defineProps<{
   id?: string;
   label?: string;
   placeholder?: string;
-  optionLabel?: string;
+  optionLabel?: keyof T;
   inModal?: boolean;
   multiple?: boolean;
   isDisabled?: boolean;
@@ -137,10 +153,24 @@ const {
   displayRequired?: boolean;
   popover?: string;
   popoverRelativeClass?: string;
+  /**
+   * Add an option to select everything at once
+   * If set to a truthy string, the added option will have this value as its
+   * label. If set to true, use a generic label.
+   */
+  withSelectAll?: boolean|string;
 }>();
 
 //Emits
-const emit = defineEmits(["onSearch", "selected", "onClose"]);
+const emit = defineEmits<{
+  (e: "onSearch", query: string): void;
+  (e: "selected", data: Array<T>|T): void;
+  (e: "onClose", data: string): void;
+}>();
+
+//Composables
+const { t } = useI18n();
+
 
 //Data 
 const optionSelected : Ref<T|T[]>= ref(undefined);
@@ -148,10 +178,10 @@ const options : Ref<Array<T>>= ref([]);
 const remainingElements = ref(0);
 const isLoading = ref(false);
 const searchInput = ref("");
-
-//Composables
-const { t } = useI18n();
-
+const selectAll = {
+  id: 'SELECT_ALL',
+  [optionLabel]: withSelectAll && typeof withSelectAll === 'string' ? withSelectAll : t('All')
+} as unknown as T;
 
 //Computed
 const maxOptionsSelected = computed(() => {
@@ -178,6 +208,7 @@ watch(optionSelected, () => {
 function fakeSearch(): Array<unknown> {
   return options.value;
 }
+
 function onSearch(search?: string): void {
   if (search && search.length < minSearchLength) {
     return;
@@ -187,30 +218,44 @@ function onSearch(search?: string): void {
   isLoading.value = true;
   emit("onSearch", search);
 }
+
 function onClose() {
   emit("onClose", searchInput.value);
   searchInput.value = "";
 }
+
 function afterSearch(optionsFetched: Array<T>, count: number): void {
-  options.value = optionsFetched;
+  if (withSelectAll) {
+    options.value = [selectAll, ...optionsFetched];
+    count += 1;
+  } else {
+    options.value = optionsFetched;
+  }
   remainingElements.value = Math.max(0, count - maxElement);
   isLoading.value = false;
 }
-function onOptionSelected(optionSelected: unknown): void {
-  emit("selected", optionSelected);
+
+function onOptionSelected(newValue: Array<T>|T): void {
+  // Check if selectAll is included
+  if (withSelectAll && Array.isArray(newValue) && newValue.find(o => o.id === selectAll.id)) {
+    emit("selected", options.value.slice(1, -1));
+  } else {
+    emit("selected", newValue);
+  }
 }
-function onOptionDeselect(event: unknown): void {
+
+function onOptionDeselect(event: T): void {
   if (!multiple) {
     return;
   }
   if (
     !allowEmpty &&
-    0 === (optionSelected.value as Array<unknown>).length
+    0 === (optionSelected.value as Array<T>).length
   ) {
-    (optionSelected.value as Array<unknown>).push(event);
+    (optionSelected.value as Array<T>).push(event);
     return;
   }
-  emit("selected", optionSelected.value);
+  emit("selected", (optionSelected.value as Array<T>));
 }
 
 //Expose

package/src/locale/de.json

@@ -415,5 +415,6 @@
   "Miniplayer - Parameters - Auto height": "Automatische Höhe",
   "Edit": "Bearbeiten",
   "Podcast": "Folge",
-  "Player - Transcription - AI Warning": "Die Transkription basiert auf KI und kann Fehler enthalten, bitte teilen Sie uns dies mit."
+  "Player - Transcription - AI Warning": "Die Transkription basiert auf KI und kann Fehler enthalten, bitte teilen Sie uns dies mit.",
+  "All organisations": "Alle Organisationen"
 }

package/src/locale/en.json

@@ -415,5 +415,6 @@
   "Miniplayer - Parameters - Auto height": "Auto Height",
   "Edit": "Edit",
   "Podcast": "Episode",
-  "Player - Transcription - AI Warning": "The transcription is based on AI and may contain errors, please let us know."
+  "Player - Transcription - AI Warning": "The transcription is based on AI and may contain errors, please let us know.",
+  "All organisations": "All organizations"
 }

package/src/locale/es.json

@@ -415,5 +415,6 @@
   "Miniplayer - Parameters - Auto height": "Altura automática",
   "Edit": "Editar",
   "Podcast": "Episodio",
-  "Player - Transcription - AI Warning": "La transcripción se basa en IA y puede contener errores, háganoslo saber."
+  "Player - Transcription - AI Warning": "La transcripción se basa en IA y puede contener errores, háganoslo saber.",
+  "All organisations": "Todas las organizaciones"
 }

package/src/locale/fr.json

@@ -24,6 +24,7 @@
   "Producted by : ": "Produit par : ",
   "Loading podcasts ...": "Chargement des épisodes…",
   "All podcasts": "Tous les épisodes",
+  "All organisations": "Toutes les organisations",
   "Error": "Erreur",
   "Upload": "Téléverser",
   "Count more elements matched your query, please make a more specific search.":

package/src/locale/it.json

@@ -416,5 +416,6 @@
     "Miniplayer - Parameters - Auto height": "Altezza automatica",
     "Edit": "Modificare",
     "Podcast": "Episodio",
-    "Player - Transcription - AI Warning": "La trascrizione si basa sull'intelligenza artificiale e potrebbe contenere errori, faccelo sapere."
+    "Player - Transcription - AI Warning": "La trascrizione si basa sull'intelligenza artificiale e potrebbe contenere errori, faccelo sapere.",
+    "All organisations": "Tutte le organizzazioni"
 }

package/src/locale/sl.json

@@ -414,5 +414,6 @@
   "Miniplayer - Parameters - Auto height": "Samodejna višina",
   "Edit": "Uredi",
   "Podcast": "Epizoda",
-  "Player - Transcription - AI Warning": "Transkripcija temelji na umetni inteligenci in lahko vsebuje napake, zato nas obvestite."
+  "Player - Transcription - AI Warning": "Transkripcija temelji na umetni inteligenci in lahko vsebuje napake, zato nas obvestite.",
+  "All organisations": "Vse organizacije"
 }

package/tests/components/display/filter/AdvancedSearch.spec.ts

@@ -0,0 +1,186 @@
+import '@tests/mocks/useRouter';
+import '@tests/mocks/useAdvancedParamInit';
+import '@tests/mocks/i18n';
+
+import AdvancedSearch from '@/components/display/filter/AdvancedSearch.vue';
+import { mount } from '@tests/utils';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { useAuthStore } from '@/stores/AuthStore';
+import { state } from '@/stores/ParamSdkStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+
+// Mock the useOrgaComputed composable
+vi.mock('@/components/composable/useOrgaComputed', () => ({
+    useOrgaComputed: () => {
+        const { computed } = require('vue');
+        return {
+            isPodcastmaker: computed(() => state.generalParameters.podcastmaker as boolean),
+            isEditRights: (orgaId?: string) => {
+                const authStore = useAuthStore();
+                return authStore.authOrgaId === orgaId || authStore.isRoleAdmin;
+            }
+        };
+    }
+}));
+
+// Mock the groups API
+vi.mock('@/api/groupsApi', () => {
+    return {
+        groupsApi: {
+            count: vi.fn().mockResolvedValue(0)
+        }
+    };
+});
+
+describe('AdvancedSearch - isSelectValidity computed (fix for isPodcastmaker.value)', () => {
+    beforeEach(() => {
+        // Reset the podcastmaker state before each test
+        state.generalParameters.podcastmaker = false;
+    });
+
+    it('should correctly evaluate isSelectValidity when isPodcastmaker is false', async () => {
+        const wrapper = await mount(AdvancedSearch, {
+            props: {
+                organisationId: 'test-org-id',
+                isEmission: false,
+                includeHidden: true
+            },
+            beforeMount: async () => {
+                const authStore = useAuthStore();
+                authStore.$patch({
+                    authOrgaId: 'test-org-id',
+                    authRole: ['PODCAST_CRUD'],
+                    authOrganisation: {
+                        id: 'test-org-id',
+                        name: 'Test Organisation',
+                        imageUrl: '',
+                        attributes: {}
+                    }
+                });
+
+                const generalStore = useGeneralStore();
+                generalStore.$patch({
+                    platformEducation: false
+                });
+
+                // Ensure isPodcastmaker is false
+                state.generalParameters.podcastmaker = false;
+            }
+        });
+
+        // Access the component's computed property
+        const vm = wrapper.vm as any;
+
+        // When isPodcastmaker is false and other conditions are met,
+        // isSelectValidity should be true
+        expect(vm.isSelectValidity).toBe(true);
+    });
+
+    it('should correctly evaluate isSelectValidity when isPodcastmaker is true', async () => {
+        const wrapper = await mount(AdvancedSearch, {
+            props: {
+                organisationId: 'test-org-id',
+                isEmission: false,
+                includeHidden: true
+            },
+            beforeMount: async () => {
+                const authStore = useAuthStore();
+                authStore.$patch({
+                    authOrgaId: 'test-org-id',
+                    authRole: ['PODCAST_CRUD'],
+                    authOrganisation: {
+                        id: 'test-org-id',
+                        name: 'Test Organisation',
+                        imageUrl: '',
+                        attributes: {}
+                    }
+                });
+
+                const generalStore = useGeneralStore();
+                generalStore.$patch({
+                    platformEducation: false
+                });
+
+                // Set isPodcastmaker to true
+                state.generalParameters.podcastmaker = true;
+            }
+        });
+
+        // Access the component's computed property
+        const vm = wrapper.vm as any;
+
+        // When isPodcastmaker is true, isSelectValidity should be false
+        // (because the condition includes !isPodcastmaker.value)
+        expect(vm.isSelectValidity).toBe(false);
+    });
+
+    it('should correctly evaluate isSelectValidity when isEmission is true', async () => {
+        const wrapper = await mount(AdvancedSearch, {
+            props: {
+                organisationId: 'test-org-id',
+                isEmission: true, // This should make isSelectValidity false
+                includeHidden: true
+            },
+            beforeMount: async () => {
+                const authStore = useAuthStore();
+                authStore.$patch({
+                    authOrgaId: 'test-org-id',
+                    authRole: ['PODCAST_CRUD'],
+                    authOrganisation: {
+                        id: 'test-org-id',
+                        name: 'Test Organisation',
+                        imageUrl: '',
+                        attributes: {}
+                    }
+                });
+
+                const generalStore = useGeneralStore();
+                generalStore.$patch({
+                    platformEducation: false
+                });
+
+                state.generalParameters.podcastmaker = false;
+            }
+        });
+
+        const vm = wrapper.vm as any;
+
+        // When isEmission is true, isSelectValidity should be false
+        expect(vm.isSelectValidity).toBe(false);
+    });
+
+    it('should correctly evaluate isSelectValidity when includeHidden is false', async () => {
+        const wrapper = await mount(AdvancedSearch, {
+            props: {
+                organisationId: 'test-org-id',
+                isEmission: false,
+                includeHidden: false // This should make isSelectValidity false
+            },
+            beforeMount: async () => {
+                const authStore = useAuthStore();
+                authStore.$patch({
+                    authOrgaId: 'test-org-id',
+                    authRole: ['PODCAST_CRUD'],
+                    authOrganisation: {
+                        id: 'test-org-id',
+                        name: 'Test Organisation',
+                        imageUrl: '',
+                        attributes: {}
+                    }
+                });
+
+                const generalStore = useGeneralStore();
+                generalStore.$patch({
+                    platformEducation: false
+                });
+
+                state.generalParameters.podcastmaker = false;
+            }
+        });
+
+        const vm = wrapper.vm as any;
+
+        // When includeHidden is false, isSelectValidity should be false
+        expect(vm.isSelectValidity).toBe(false);
+    });
+});