@saooti/octopus-sdk 41.12.0-beta2 → 41.12.0

package/.claude/scheduled_tasks.lock

@@ -0,0 +1 @@
+{"sessionId":"92d5c13f-8d38-4dc6-a66d-c7256640dc6f","pid":10553,"procStart":"32347","acquiredAt":1783406560303}

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## 41.12.0 (En cours)
+## 41.12.0 (13/07/2026)
 
 **Features**
 
@@ -15,15 +15,21 @@
   - Mise en commun de code entre `OctopusSelect` & `OctopusMultiselect`
   - Ajustement de `OctopusMultiselect` pour fonctionner correctement avec des
     objets identiques avec références différentes
+  - Ajout de nouvelles options à `OctopusMultiselect` pour permettre la saisie
+    de données et avoir une meilleure UX en cas de longue liste
 - Ajout de nouvelles classes utilitaires dans le css
 - Ajout de nouvelles options d'apparence pour `ClassicButton`
 - Changement propriété principale de `ClassicButtonGroup` pour plus de cohérence
 - Ajout de variables CSS pour configurer l'aspect de divers boutons
+- Ajout d'une propriété SDK permettant d'afficher des tags sur les éléments de
+  type `PresentationItem`
+- Ajout de l'api `rubriqueApi`
 
 **Fixes**
 
 - Correction d'une exception dans `deepEquals` si la comparaison est faite entre
   une variable primitive et un objet
+- Correction du placement du header `PodcastmakerHeader`
 
 **Misc**
 

package/index.ts

@@ -194,7 +194,7 @@ export {
     type ProviderTts,
     type Voice
 } from "./src/stores/class/transcript/transcriptParams.ts";
-export { type Canal } from "./src/stores/class/radio/canal.ts";
+export * from "./src/stores/class/radio/canal";
 export { type Cartouchier } from "./src/stores/class/cartouchier/cartouchier.ts";
 export { type Cartouche, emptyCartouche } from "./src/stores/class/cartouchier/cartouche.ts";
 export { type PlaylistMedia } from "./src/stores/class/radio/playlistMedia";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.12.0-beta2",
+  "version": "41.12.0",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -51,7 +51,7 @@
     "typescript-eslint": "^8.47.0",
     "video.js": "^8.23.6",
     "videojs-quality-selector-hls": "^1.1.1",
-    "vite": "^6.4.1",
+    "vite": "^8.0.16",
     "vite-bundle-visualizer": "^1.2.1",
     "vue-material-design-icons": "^5.3.1",
     "vue-recaptcha": "^2.0.3",
@@ -64,7 +64,7 @@
     "@stylistic/eslint-plugin": "*",
     "@types/sockjs-client": "^1.5.4",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.39.1",
     "eslint-plugin-vue": "10.9.1",

package/src/api/index.ts

@@ -7,3 +7,4 @@ export { podcastApi, PodcastSort, type PodcastSearchOptions } from "./podcastApi
 export { radioApi } from "./radioApi";
 export * from "./aggregatorsApi";
 export * from "./mediathequeApi";
+export * from "./rubriquesApi";

package/src/api/radioApi.ts

@@ -1,4 +1,4 @@
-import { Canal } from "../stores/class/radio/canal";
+import { Ambiance, Canal } from "../stores/class/radio/canal";
 import classicApi from "./classicApi";
 import { ModuleApi } from "./apiConnection";
 
@@ -26,7 +26,23 @@ async function getAll(organisationId: string): Promise<Array<Canal>> {
     });
 }
 
+/**
+ * Set the default ambiance for the given canal
+ * @param canalId ID of the canal to change
+ * @param ambiance New ambiance settings
+ * @returns The modified ambiance
+ */
+async function setDefaultAmbiance(canalId: number, ambiance: Ambiance): Promise<Ambiance> {
+    return await classicApi.putData<Ambiance>({
+        api: ModuleApi.RADIO,
+        path: `ambiance/canal/${canalId}/default`,
+        dataToSend: ambiance
+    });
+    
+}
+
 export const radioApi = {
     get,
-    getAll
+    getAll,
+    setDefaultAmbiance
 };

package/src/api/rubriquesApi.ts

@@ -0,0 +1,68 @@
+import { classicApi, ModuleApi } from "@saooti/octopus-sdk";
+import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
+import { useCacheStore } from "../stores/CacheStore";
+
+/**
+ * Find rubriquages according to criterias
+ * @param organisationIds List of organisation IDs for which to retrieve the
+ *                        rubriquage
+ * @param searchOptions Additional search options
+ */
+async function searchRubriquages(organisationIds: Array<string>, searchOptions?: {
+    rubriquageId?: number;
+    organisationId?: string|Array<string>;
+    query?: string;
+}): Promise<Array<Rubriquage>> {
+    return classicApi.fetchData<Array<Rubriquage>>({
+        api: ModuleApi.DEFAULT,
+        path: 'rubriquage/find',
+        parameters: {
+            organisationId: organisationIds,
+            ...searchOptions
+        }
+    });
+}
+
+async function searchRubriques(searchOptions?: {
+    rubriquageId?: number;
+    organisationId?: string|Array<string>;
+    query?: string;
+}): Promise<Array<Rubrique>> {
+    return classicApi.fetchData<Array<Rubrique>>({
+        api: ModuleApi.DEFAULT,
+        path: 'rubrique/search',
+        parameters: searchOptions
+    });
+}
+
+/**
+ * Fetch rubrique data by ID
+ * @see getCachedRubrique
+ * @param rubriqueId ID of the rubrique to fetch
+ * @returns The rubrique
+ */
+async function getRubrique(rubriqueId: number): Promise<Rubrique> {
+    return classicApi.fetchData<Rubrique>({
+        api: ModuleApi.DEFAULT,
+        path: `rubrique/${rubriqueId}`
+    });
+}
+
+/**
+ * Fetch rubrique data by ID
+ * If the rubrique is available in the cache, return it from the cache
+ * @param rubriqueId ID of the rubrique to fetch
+ * @returns The rubrique
+ */
+async function getCachedRubrique(rubriqueId: number): Promise<Rubrique> {
+    const cacheStore = useCacheStore();
+    return cacheStore.getData(`rubrique-${rubriqueId}`, () => getRubrique(rubriqueId));
+}
+
+export const rubriquesApi = {
+    getRubrique,
+    getCachedRubrique,
+    searchRubriquages,
+    searchRubriques
+};

package/src/components/composable/form/useOctopusDropdown.ts

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 export interface OctopusDropdownProps<T> {
     options: T[];
-    optionLabel: keyof T & string;
+    optionLabel?: keyof T & string;
     optionKey?: keyof T;
     isDisabled?: boolean;
     placeholder?: string;
@@ -51,7 +51,10 @@ export function useOctopusDropdown<T>(
     const inputPlaceholder = computed(() => props.placeholder ?? t('Search'));
 
     function getLabel(option: T): string {
-        return option[props.optionLabel] as string;
+        if (props.optionLabel) {
+            return option[props.optionLabel] as string;
+        }
+        return option as unknown as string;
     }
 
     function openDropdown(): void {

package/src/components/composable/usePresentationItem.ts

@@ -0,0 +1,78 @@
+import { Emission } from "@/stores/class/general/emission";
+import { state } from "../../stores/ParamSdkStore";
+import { useGeneralStore } from "../../stores/GeneralStore";
+import { Podcast } from "../../stores/class/general/podcast";
+import { rubriquesApi } from "../../api";
+import { useDayjs } from "./useDayjs";
+
+export const usePresentationItem = () => {
+    const generalStore = useGeneralStore();
+    const { formatDate } = useDayjs();
+
+    function iabTags(emission: Emission): Array<string> {
+        return generalStore.storedCategories
+            .filter(cat => emission.iabIds.includes(cat.id))
+            .map(cat => cat.name);
+    }
+
+    async function rubriqueTags(element: Podcast|Emission): Promise<Array<string>> {
+        const rubriqueIds: Array<number> = [];
+        if (element.rubriqueIds) {
+            rubriqueIds.push(...element.rubriqueIds);
+        }
+        if ('emission' in element && element.emission.rubriqueIds) {
+            rubriqueIds.push(...element.emission.rubriqueIds);
+        }
+        const promises = rubriqueIds.map(rubriquesApi.getCachedRubrique);
+        const rubriques = await Promise.all(promises);
+
+        if (state.presentationItems.tagsRubriquageId) {
+            const rubriquageId = state.presentationItems.tagsRubriquageId;
+            return rubriques.filter(r => r.rubriquageId === rubriquageId).map(r => r.name);
+        } else {
+            return rubriques.map(r => r.name);
+        }
+    }
+    
+    async function tagsFor(element: Podcast|Emission): Promise<Array<string>|undefined> {
+        const type = state.presentationItems.tags;
+        let tags: Array<string>|undefined = undefined;
+        if (type === 'iab') {
+            const emission = 'emission' in element ? element.emission : element;
+            tags = iabTags(emission);
+        } else if (type === 'rubrique') {
+            tags = await rubriqueTags(element);
+        }
+
+        if (tags && state.presentationItems.tagsLimit) {
+            return tags.slice(0, state.presentationItems.tagsLimit);
+        }
+
+        return tags;
+    }
+
+    function additionalInfoFor(element: Podcast|Emission): Array<string>|undefined {
+        const prop = state.presentationItems.additionalInfo;
+        if (!prop?.length) {
+            return undefined;
+        }
+
+        const podcast = 'emission' in element ? element : null;
+        const emission = podcast?.emission ?? element as Emission;
+
+        return prop.map(property => {
+            if (property === 'date') {
+                if (podcast?.pubDate) {
+                    return formatDate(podcast.pubDate);
+                } else {
+                    return null;
+                }
+            } else if (property === 'productor') {
+                return emission.orga.name;
+            }
+            return null;
+        }).filter(p => p !== null);
+    }
+
+    return { tagsFor, additionalInfoFor };
+};

package/src/components/display/emission/EmissionInlineList.vue

@@ -30,7 +30,7 @@
     <router-link
       v-if="href"
       :to="href"
-      class="btn btn-primary align-self-center w-fit-content m-4"
+      class="btn btn-primary align-self-center w-fit-content m-4 icon-available"
     >
       {{ buttonText }}
     </router-link>

package/src/components/display/emission/EmissionPresentationItem.vue

@@ -2,33 +2,42 @@
   Component to display an emission with its description
 -->
 <template>
-  <PresentationItem
-    :name="emission.name"
-    :route="route"
-    :image-url="emission.imageUrl"
-    :description="isDescription ? emission.description : undefined"
-    :vertical="isVertical"
-  />
+    <PresentationItem
+        :name="emission.name"
+        :route="route"
+        :image-url="emission.imageUrl"
+        :description="isDescription ? emission.description : undefined"
+        :vertical="isVertical"
+        :tags="tags"
+        :additional-info="additionalInfoFor(emission)"
+    />
 </template>
 
 <script setup lang="ts">
 import { Emission } from "@/stores/class/general/emission";
 import PresentationItem from "../../layouts/PresentationItem.vue";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { RouteLocationRaw } from "vue-router";
+import { usePresentationItem } from "../../composable/usePresentationItem";
 
 //Props 
 const props = defineProps<{
-  /** The emission to display */
-  emission: Emission;
-  /** When true display the card vertically */
-  isVertical?: boolean;
-  /** When true also display the description */
-  isDescription?: boolean;
+    /** The emission to display */
+    emission: Emission;
+    /** When true display the card vertically */
+    isVertical?: boolean;
+    /** When true also display the description */
+    isDescription?: boolean;
 }>();
 
+const tags = ref([]);
+const { tagsFor, additionalInfoFor } = usePresentationItem();
+
+watch(props.emission, async () => {
+    tags.value = await tagsFor(props.emission);
+}, { immediate: true });
+
 const route = computed((): RouteLocationRaw => {
-  return { name: 'emission', params: { emissionId: props.emission.emissionId } };
+    return { name: 'emission', params: { emissionId: props.emission.emissionId } };
 });
-
 </script>

package/src/components/display/podcastmaker/PodcastmakerHeader.vue

@@ -1,72 +1,87 @@
 <template>
-  <div class="page-element-title-container">
-    <div class="page-element-title">
-      <h1>{{ pageTitle }}</h1>
+    <div class="page-element-title-container">
+        <div class="page-element-title">
+            <h1>{{ pageTitle }}</h1>
+        </div>
+        <div class="page-element-bg" :style="backgroundDisplay" />
     </div>
-    <div class="page-element-bg" :style="backgroundDisplay" />
-  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import {useImageProxy} from "../../composable/useImageProxy";
+import { computed, onMounted } from "vue";
+import { useImageProxy } from "../../composable/useImageProxy";
 
 //Props 
 const props = defineProps({
-  pageTitle: { default: undefined, type: String },
-  imgUrl: { default: undefined, type: String },
+    pageTitle: { default: undefined, type: String },
+    imgUrl: { default: undefined, type: String },
 })
 
+onMounted(() => {
+    const elt = document.querySelector('.page-element-title-container');
+
+    // Retrieve header
+    const header = document.getElementsByTagName('header');
+    if (header.length) {
+        // Get header height
+        const height = (header[0] as HTMLElement).offsetHeight;
+        // Update PM header position according to header height
+        elt.style.setProperty('--top', height + 'px');
+    }
+});
+
 //Composables
 const { useProxyImageUrl } = useImageProxy();
 
 //Computed
 const backgroundDisplay = computed(() => {
-  if (!props.imgUrl) {
-    return "";
-  }
-  return `background-image: url('${useProxyImageUrl(
-    props.imgUrl,
-    "250",
-  )}');`;
+    if (!props.imgUrl) {
+        return "";
+    }
+    return `background-image: url('${useProxyImageUrl(
+        props.imgUrl,
+        "250",
+    )}');`;
 });
 </script>
 
 <style lang="scss">
 .octopus-app {
-  .page-element.page-element-podcastmaker {
-    margin-top: 11rem;
-  }
+    .page-element.page-element-podcastmaker {
+        margin-top: 11rem;
+    }
 
-  .page-element-title-container {
-    background: black;
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
+    .page-element-title-container {
+        --top: 0;
 
-    .page-element-bg {
-      height: 15rem;
-      opacity: 0.5;
-      filter: blur(8px);
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
+        background: black;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: var(--top);
+
+        .page-element-bg {
+            height: 15rem;
+            opacity: 0.5;
+            filter: blur(8px);
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
 
-    .page-element-title {
-      position: absolute;
-      inset: 0;
-      z-index: 2;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+        .page-element-title {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-      h1 {
-        color: white !important;
-        font-size: 2rem;
-      }
+            h1 {
+                color: white !important;
+                font-size: 2rem;
+            }
+        }
     }
-  }
 }
 </style>