@saooti/octopus-sdk 41.1.14 → 41.2.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # CHANGELOG
 
+## 41.2.0 (05/01/2026)
+
+**Features**
+
+- Ajout d'un système de notifications
+  - Intégrez `ClassicNotification` dans la vue principale pour afficher les
+    notifications
+  - Utilisez le composable `useNotifications` pour contrôler l'affichage des
+    notification depuis n'importe quel composant
+- Ajout du composant `ClassicDataTable` pour afficher des tableaux de données
+  facilement
+- Ajout du composant `ActionButton` pour faire un bouton déclenchant une action,
+  avec confirmation optionnelle
+- Ajout du composant `ClassicBigChip` pour afficher des éléments simples
+- Ajout du composant `EmissionGroupChooser` pour sélectionner un groupe
+  d'émissions parmis ceux définis
+- Ajout de la bibliothèque d'icones `src/components/icons.ts` pour uniformiser
+  les icones au sein des différents projets
+- Ajout de l'API groupes
+- Ajout du filtrage par groupe sur les podcasts
+
+**Fixes**
+
+- Les mots-clés définis à la fois sur une émission et sur un épisode de cette
+  émissions ne s'affichent qu'une seule fois lors de la consultation de cet
+  épisode
+- Le bouton de lecture vidéo ne disparait plus quand on lit une autre vidéo
+- Correction des épisodes avec vidéos n'apparaissant plus lors de la
+  consultation des émissions
+- `ClassicHelpButton` utilise le string `relative-class` au lieu du booléen
+  `relative` pour déterminer l'élément parent.
+
+## 41.1.15 (19/12/2025)
+
+**Fixes**
+
+- Correction de l'affichage de certaines émission sur iPhone
+
+**Misc**
+
+- Troncature des descriptions d'émissions sur mobile
+
 ## 41.1.14 (18/12/2025)
 
 **Misc**

package/index.ts

@@ -40,11 +40,27 @@ export const getContractPreviewModal = () => import("./src/components/misc/modal
 export const getClassicModalInBody = () => import("./src/components/misc/modal/ClassicModalInBody.vue");
 export const getClassicHelpButton = () => import("./src/components/misc/ClassicHelpButton.vue");
 export const getClassicAlert = () => import("./src/components/misc/ClassicAlert.vue");
+export const getClassicBigChip = () => import("./src/components/misc/ClassicBigChip.vue");
+
+import ClassicDataTable, { type ClassicDataTableHeader } from "./src/components/misc/ClassicDataTable.vue";
+import ClassicNotifications from "./src/components/misc/ClassicNotifications.vue";
+
+export {
+    ClassicDataTable,
+    type ClassicDataTableHeader,
+    ClassicNotifications
+}
+
+// Buttons
+import ActionButton from "./src/components/buttons/ActionButton.vue";
+export { ActionButton };
+
 //Display
 export const getCategoryChooser = () => import("./src/components/display/categories/CategoryChooser.vue");
 export const getCategoryList = () => import("./src/components/display/categories/CategoryList.vue");
 export const getCategoryFilter = () => import("./src/components/display/categories/CategoryFilter.vue");
 export const getEmissionList = () => import("./src/components/display/emission/EmissionList.vue");
+export const getEmissionGroupChooser = () => import("./src/components/display/emission/EmissionGroupChooser.vue");
 export const getOrganisationChooser = () => import("./src/components/display/organisation/OrganisationChooser.vue");
 export const getPodcastFilterList = () => import("./src/components/display/podcasts/PodcastFilterList.vue");
 export const getPodcastInlineList = () => import("./src/components/display/podcasts/PodcastInlineList.vue");
@@ -110,7 +126,7 @@ import {useOrganisationFilter} from "./src/components/composable/useOrganisation
 import {useInit} from "./src/components/composable/useInit.ts";
 import {useErrorHandler} from "./src/components/composable/useErrorHandler.ts";
 import { useSimplePageParam } from "./src/components/composable/route/useSimplePageParam";
-
+import { useNotifications } from "./src/components/composable/useNotifications.ts";
 
 //helper
 import domHelper from "./src/helper/domHelper.ts";
@@ -135,11 +151,16 @@ import {useAuthStore} from "./src/stores/AuthStore.ts";
 import {getApiUrl, ModuleApi} from "./src/api/apiConnection.ts";
 import classicApi from "./src/api/classicApi.ts";
 
+// API
 export { emissionApi } from "./src/api/emissionApi.ts";
+export * from "./src/api/groupsApi.ts";
 export { organisationApi } from "./src/api/organisationApi.ts";
 export { playlistApi } from "./src/api/playlistApi.ts";
 export { podcastApi, PodcastSort, type PodcastSearchOptions } from "./src/api/podcastApi.ts";
 
+// Types
+export { type Emission, emptyEmissionData } from "./src/stores/class/general/emission.ts";
+
 //Icons
 export const getAmazonMusicIcon = () => import("./src/components/icons/AmazonMusicIcon.vue");
 export const getApplePodcastIcon = () => import("./src/components/icons/ApplePodcastIcon.vue");
@@ -161,6 +182,7 @@ import { setupRouter } from './src/router/utils';
 import { type SelectOption } from "./src/components/form/ClassicSelect.vue";
 
 import { ROUTE_PARAMS } from "./src/components/composable/route/types";
+import { defineAsyncComponent } from "vue";
 
 export {
     useResizePhone,
@@ -173,6 +195,7 @@ export {
     useInit,
     useErrorHandler,
     useSimplePageParam,
+    useNotifications,
     debounce,
     useVastStore,
     useSaveFetchStore,

package/package.json

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

package/src/api/groupsApi.ts

@@ -0,0 +1,214 @@
+import classicApi from "./classicApi";
+import { ModuleApi } from "./apiConnection";
+import { ListClassicReturn } from "../stores/class/general/listReturn";
+import { Emission } from "@/stores/class/general/emission";
+import { mapFromGetAll } from "./apiUtils";
+
+const BASE_PATH = 'emission/groups/';
+
+/** Group of emissions */
+export interface EmissionGroup {
+    /** Name of the group */
+    name: string;
+    /** Id of the group */
+    groupId: number;
+    /** Simple description */
+    description?: string;
+    /** The id of the organisation this group belongs to */
+    organisationId: string;
+    /** The list of ids of emissions in this group */
+    emissionIds: Array<number>|null;
+    /** If set, defines this group as a "marque" group. */
+    acpmMarque: string|null;
+}
+
+interface Pagination {
+    /** Pagination */
+    first: number;
+    /** Number of elements */
+    size: number;
+}
+
+interface SearchParams {
+    /** Filter by acpm */
+    acpmMarque: string;
+    /** Filter by name */
+    search: string;
+    /** Filter by organisations */
+    organisationIds: Array<string>;
+}
+
+/**
+ * Add an emission to a list of groups
+ * @param emission The emission to add to the groups
+ * @param groups The list of groups to add the emission to
+ */
+async function addToGroups(emission: Emission|number, groups: Array<EmissionGroup>|Array<number>): Promise<void> {
+    if (groups.length === 0) {
+        return;
+    }
+
+    let emissionId: number;
+    if (typeof emission === 'object') {
+        emissionId = emission.emissionId;
+    } else {
+        emissionId = emission;
+    }
+    let groupIds: Array<number>;
+    if (typeof groups[0] === 'object') {
+        groupIds = (groups as Array<EmissionGroup>).map(g => g.groupId);
+    } else {
+        groupIds = groups as Array<number>;
+    }
+
+    return classicApi.putData({
+        api: ModuleApi.DEFAULT,
+        path: BASE_PATH + 'add/' + emissionId,
+        dataToSend: groupIds
+    });
+}
+
+/**
+ * Create a new group
+ */
+async function create(group: Omit<EmissionGroup, 'groupId'|'emissionIds'>): Promise<EmissionGroup> {
+    return classicApi.postData<EmissionGroup>({
+        api: ModuleApi.DEFAULT,
+        path: BASE_PATH,
+        dataToSend: group
+    });
+}
+
+/**
+ * Delete a group
+ */
+async function remove(groupId: number): Promise<void> {
+    return classicApi.deleteData({
+        api: ModuleApi.DEFAULT,
+        path: BASE_PATH + groupId
+    });
+}
+
+/**
+ * Retrieve a group by its ID
+ * @param groupId The ID of the group to retrieve
+ * @return The group
+ */
+async function get(groupId: number): Promise<EmissionGroup> {
+    return classicApi.fetchData<EmissionGroup>({
+        api: ModuleApi.DEFAULT,
+        path: BASE_PATH + groupId
+    });
+}
+
+/**
+ * Retrieve all groups specified by their IDs
+ * @param groupIds A list of group IDs. For better result, they
+                          should be unique.
+ * @return The matching groups
+ */
+async function getAllById(groupIds: Array<number>): Promise<Record<string, EmissionGroup>> {
+    return mapFromGetAll(groupIds, get, 'groupId');
+}
+
+/**
+ * Remove an emission from a list of groups
+ * @param emission The emission to remove from the groups
+ * @param groups The list of groups to remove the emission from
+ */
+async function removeFromGroups(emission: Emission|number, groups: Array<EmissionGroup>|Array<number>): Promise<void> {
+    if (groups.length === 0) {
+        return;
+    }
+
+    let emissionId: number;
+    if (typeof emission === 'object') {
+        emissionId = emission.emissionId;
+    } else {
+        emissionId = emission;
+    }
+    let groupIds: Array<number>;
+    if (typeof groups[0] === 'object') {
+        groupIds = (groups as Array<EmissionGroup>).map(g => g.groupId);
+    } else {
+        groupIds = groups as Array<number>;
+    }
+
+    return classicApi.putData({
+        api: ModuleApi.DEFAULT,
+        path: BASE_PATH + 'remove/' + emissionId,
+        dataToSend: groupIds
+    });
+}
+
+/**
+ * Update a group
+ */
+async function update(group: Omit<EmissionGroup, 'emissionIds'>): Promise<EmissionGroup> {
+    return classicApi.putData({
+        api: ModuleApi.DEFAULT,
+        path: BASE_PATH,
+        dataToSend: group
+    });
+}
+
+/**
+ * Count number of groups
+ */
+async function count(parameters: Partial<SearchParams>): Promise<number> {
+    const result = await search({
+        ...parameters,
+        size: 0
+    });
+
+    return result.count;
+}
+
+/**
+ * Search groups
+ */
+async function search(parameters: Partial<SearchParams & Pagination>): Promise<ListClassicReturn<EmissionGroup>> {
+    return classicApi.fetchData<ListClassicReturn<EmissionGroup>>({
+        api: ModuleApi.DEFAULT,
+        path: BASE_PATH + 'search',
+        parameters
+    });
+}
+
+/**
+ * Search for all groups, without pagination
+ */
+async function searchNoPagination(parameters: Partial<SearchParams>): Promise<Array<EmissionGroup>> {
+    const result: Array<EmissionGroup> = [];
+
+    let index = 0;
+    while (true) {
+        const response = await search({
+            ...parameters,
+            first: index,
+            size: 1
+        });
+
+        result.push(...response.result);
+        index += response.result.length;
+
+        if (index >= response.count || response.result.length === 0) {
+            break;
+        }
+    }
+
+    return result;
+}
+
+export const groupsApi = {
+    addToGroups,
+    count,
+    create,
+    remove,
+    get,
+    getAllById,
+    removeFromGroups,
+    update,
+    search,
+    searchNoPagination
+};

package/src/api/podcastApi.ts

@@ -6,6 +6,9 @@ import { ModuleApi } from './apiConnection';
 import { unique } from '../helper/arrayHelper';
 import { organisationApi } from './organisationApi';
 import { emissionApi } from './emissionApi';
+import { EmissionGroup } from './groupsApi';
+import { FetchParam } from '@/stores/class/general/fetchParam';
+import { toRaw } from 'vue';
 
 export enum PodcastSort {
     DATE = 'DATE',
@@ -41,6 +44,8 @@ interface Paginable<S> {
 export interface PodcastSearchOptions extends Paginable<PodcastSort> {
     /** Filter by emission ID */
     emissionId?: number|number[];
+    /** Filter by emission groups */
+    emissionGroups?: EmissionGroup[];
     /** Filter by organisation ID */
     organisationId?: string[];
     /** Filter by title containing */
@@ -103,6 +108,47 @@ function get(podcastId: number): Promise<Podcast> {
     });
 }
 
+
+/**
+ * Convert easy to use PodcastSearchOptions to the actual FetchParams used by
+ * the endpoint.
+ */
+function processSearchParameters(search: PodcastSearchOptions): FetchParam {
+    const parameters: FetchParam = {};
+
+    Object.keys(search).forEach(key => {
+        const value = search[key];
+
+        if (value === undefined || value === null) {
+            return;
+        }
+
+        if (key === 'beneficiaries') {
+            parameters.beneficiary = value;
+        } else if (key === 'processingStatus') {
+            parameters.includeStatus = value;
+        } else if (key === 'tags') {
+            parameters.includeTags = value;
+        } else if (key === 'pubDateBefore') {
+            parameters.before = value;
+        } else if (key === 'pubDateAfter') {
+            parameters.after = value;
+        } else if (key === 'pageSize') {
+            parameters.size = value;
+        } else if (key === 'emissionGroups') {
+            const emissionIds = [search.emissionId ?? undefined].flat();
+            search.emissionGroups.forEach(group => {
+                emissionIds.push(...group.emissionIds);
+            });
+            parameters.emissionId = emissionIds;
+        } else {
+            parameters[key] = value;
+        }
+    });
+
+    return parameters;
+}
+
 /**
  * Search for podcasts. Retrieved podcasts are 'incomplete', some of their
  * properties are only IDs.
@@ -115,15 +161,7 @@ function search(options: PodcastSearchOptions, adaptParameters?: boolean): Promi
     return classicApi.fetchData<ListClassicReturn<SimplifiedPodcast>>({
         api: ModuleApi.DEFAULT,
         path: 'v2/podcast/search',
-        parameters: {
-            ...options,
-            beneficiary: options.beneficiaries,
-            includeStatus: options.processingStatus,
-            includeTags: options.tags,
-            before: options.pubDateBefore,
-            after: options.pubDateAfter,
-            size: options.pageSize ?? 50
-        },
+        parameters: processSearchParameters(options),
         specialTreatement: adaptParameters
     });
 }

package/src/components/buttons/ActionButton.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <!-- The button with an icon to trigger the action -->
+        <button
+            class="btn btn-transparent"
+            :title="action"
+            @click="onClick"
+        >
+            <component :is="icon" />
+        </button>
+
+        <!-- Modal to ask for confirmation -->
+        <MessageModal
+            v-if="showModal"
+            :title="confirmModal.title"
+            :message="confirmModal.message"
+            :validatetext="$t('Yes')"
+            :canceltext="$t('No')"
+            @validate="onConfirmModal"
+            @cancel="showModal = false"
+            @close="showModal = false"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { type Component, computed, ref } from 'vue';
+import MessageModal from '../misc/modal/MessageModal.vue'; 
+import Icons from '../icons';
+
+/** Actions available to the button */
+enum Action {
+    Edit = 'edit',
+    Delete = 'delete'
+}
+
+export interface ConfirmModalData {
+    title: string;
+    message: string;
+}
+
+const { action, confirmModal } = defineProps<{
+    /** The type of action provided by the button */
+    action: Action;
+    /** When set, clicking on the button will first open a confirm modal */
+    confirmModal?: ConfirmModalData;
+}>();
+
+const emit = defineEmits<{
+    /**
+     * Event trigger when the button is clicked, or after confirmation in the
+     * modal if `withConfirmModal` is true.
+     */
+    (e: 'click'): void
+}>();
+
+/************************
+ * Using button
+ ***********************/
+
+/** Method called when clicking on button */
+function onClick(): void {
+    if (confirmModal === undefined) {
+        emit('click');
+    } else {
+        showModal.value = true;
+    }
+}
+
+/***********************
+ * Modal
+ **********************/
+/** Display modal when true */
+const showModal = ref(false);
+
+/** Method called when the modal is validated */
+function onConfirmModal(): void {
+    showModal.value = false;
+    emit('click');
+}
+
+/***********************
+ * Button appearance
+ **********************/
+
+/** The icon displayed by the button */
+const icon = computed((): Component => {
+    switch (action) {
+        case Action.Edit:
+            return Icons.Edit;
+
+        case Action.Delete:
+            return Icons.Delete;
+
+        default:
+            return;
+    }
+});
+</script>

package/src/components/buttons/index.ts

@@ -0,0 +1,5 @@
+import ActionButton from "./ActionButton.vue";
+
+export {
+    ActionButton
+};

package/src/components/composable/route/types.ts

@@ -14,6 +14,8 @@ export interface RouteProps {
     routeRubriques?: string;
     /** The filter on beneficiaries defined on the route props */
     routeBeneficiaries?: string[];
+    /** The filter on emission groups defined on the route props */
+    routeEmissionGroups?: number[];
 }
 
 type DateStr = string;
@@ -32,16 +34,22 @@ export interface AdvancedRouteParams extends RouteParams {
     to?: DateStr;
     /** When set, filter on beneficiaries */
     b?: string[];
+    /** When set, filter on topics */
+    r?: string;
     q?: string;
+    /** When set, filter on groups */
+    gp?: number[];
 }
 
 type RouteParamEnum =
     'Beneficiaries' |
-    'Query'
+    'Query' |
+    'EmissionGroups'
     ;
 
 /** Utility to access route params by constants instead of undefined value */
 export const ROUTE_PARAMS: Record<RouteParamEnum, keyof AdvancedRouteParams> = {
     Beneficiaries: 'b',
-    Query: 'q'
-};
+    Query: 'q',
+    EmissionGroups: 'gp'
+};

package/src/components/composable/route/useAdvancedParamInit.ts

@@ -8,6 +8,7 @@ import { computed, nextTick, onMounted, Ref, ref, watch } from "vue";
 import dayjs from "dayjs";
 
 import { RouteProps } from "./types";
+import { EmissionGroup, groupsApi } from "../../../api/groupsApi";
 
 export const useAdvancedParamInit = (props: RouteProps, isEmission: boolean) => {
 
@@ -29,7 +30,7 @@ export const useAdvancedParamInit = (props: RouteProps, isEmission: boolean) =>
   const iabId: Ref<number|undefined> = ref(undefined);
   const rubriqueFilter: Ref<Array<RubriquageFilter>> = ref([]);
   const beneficiaries = ref<string[]|null>(null);
-
+  const emissionGroups = ref<EmissionGroup[]|null>(null);
 
   const organisationRight = computed(() => isEditRights(organisationId.value));
   const organisation = computed(() => organisationId.value ?? filterStore.filterOrgaId);
@@ -53,17 +54,18 @@ export const useAdvancedParamInit = (props: RouteProps, isEmission: boolean) =>
     }
   });
 
-  watch(() => props.routeQuery, () => initSearchPattern());
-  watch(() => props.routeMonetisable, () => initMonetisable());
-  watch(() => props.routeSort, () => initSort());
-  watch(() => props.routeIncludeHidden, () => initIncludeHidden());
-  watch(() => props.routeValidity, () => initValidity());
-  watch(() => props.routeFrom, () => initFromDate());
-  watch(() => props.routeTo, () => initToDate());
+  watch(() => props.routeQuery, initSearchPattern);
+  watch(() => props.routeMonetisable, initMonetisable);
+  watch(() => props.routeSort, initSort);
+  watch(() => props.routeIncludeHidden, initIncludeHidden);
+  watch(() => props.routeValidity, initValidity);
+  watch(() => props.routeFrom, initFromDate);
+  watch(() => props.routeTo, initToDate);
   watch(() => props.routeIab, () => {iabId.value = props.routeIab;});
-  watch(() => props.routeOrga, () => initOrga());
-  watch(() => props.routeRubriques, () => initRubriquageFilter());
+  watch(() => props.routeOrga, initOrga);
+  watch(() => props.routeRubriques, initRubriquageFilter);
   watch(() => props.routeBeneficiaries, initBeneficiariesFilter);
+  watch(() => props.routeEmissionGroups, initEmissionGroups);
   watch(organisationId, () => {
     if (!isInit.value) {
       return;
@@ -135,7 +137,7 @@ export const useAdvancedParamInit = (props: RouteProps, isEmission: boolean) =>
       return
     }
     const rubriqueFilterToUpdate = [];
-    if(props.routeRubriques.trim().length){
+    if(props.routeRubriques?.trim().length){
       const arrayFilter = props.routeRubriques.split(",");
       for(const filter of arrayFilter){
         const rubriqueFilter = filter.split(":");
@@ -151,7 +153,7 @@ export const useAdvancedParamInit = (props: RouteProps, isEmission: boolean) =>
   }
 
   function initBeneficiariesFilter() {
-    const data = props.routeBeneficiaries as string[];
+    const data = props.routeBeneficiaries;
     // No beneficiaries
     if (
       data === undefined ||
@@ -170,6 +172,28 @@ export const useAdvancedParamInit = (props: RouteProps, isEmission: boolean) =>
     beneficiaries.value = data;
   }
 
+  async function initEmissionGroups(): Promise<void> {
+    const data = props.routeEmissionGroups;
+    // No groups
+    if (
+      data === undefined ||
+      data === null ||
+      data.length === 0
+    ) {
+      emissionGroups.value = null;
+      return;
+    }
+
+    // No changes
+    if(emissionGroups.value && data === emissionGroups.value.map(g => g.groupId)){
+      return;
+    }
+
+    const groups = await groupsApi.getAllById(data);
+
+    emissionGroups.value = Object.values(groups);
+  }
+
   return {
     organisationId,
     searchPattern,
@@ -185,6 +209,7 @@ export const useAdvancedParamInit = (props: RouteProps, isEmission: boolean) =>
     validity,
     rubriquesFilterArrayIds,
     isInit,
-    beneficiaries
+    beneficiaries,
+    emissionGroups
   };
 }

package/src/components/composable/useErrorHandler.ts

@@ -12,6 +12,7 @@ export const useErrorHandler = ()=>{
       if (undefined === authStore.authOrgaId) {
         window.location.href = window.location.origin + "/sso/login";
       } else {
+        console.error(error);
         router.push({
           path: "/main/pub/error",
         });
@@ -19,7 +20,7 @@ export const useErrorHandler = ()=>{
     }
   }
 
-	return {
+  return {
     handle403
-	}
+  }
 }