@saooti/octopus-sdk 41.1.14 → 41.2.0

package/src/components/misc/ClassicBigChip.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="big-chip">
+        <div class="title">
+            <b>{{ title }}</b>
+            <ActionButton
+                v-if="removeable"
+                action="delete"
+                :confirm-modal="confirmModal"
+                @click="emit('remove')"
+            />
+        </div>
+            
+        <p>{{ content }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ActionButton } from '../buttons';
+import { ConfirmModalData } from '../buttons/ActionButton.vue';
+
+defineProps<{
+    /** The title of the chip */
+    title: string;
+    /** The content of the chip */
+    content: string;
+    /** When true, displays an action button for removing this chip */
+    removeable?: boolean;
+    /** When removeable, allow for a confirmation modal to be shown */
+    confirmModal?: ConfirmModalData;
+}>();
+
+const emit = defineEmits<{
+    /** Called when the remove button is clicked */
+    (e: 'remove'): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+.big-chip {
+    display: flex;
+    flex-direction: column;
+    border-radius: 3px;
+    background-color: var(--octopus-secondary);
+    border: 1px solid var(--octopus-primary);
+    padding: 8px 16px;
+    margin: 4px;
+    width: 335px;
+    height: 80px;
+
+    .title {
+        display: flex;
+        justify-content: space-between;
+
+        b {
+            white-space: nowrap;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            height: 1rem;
+
+            &:hover {
+                background-color: var(--octopus-secondary);
+                overflow-x: unset;
+                z-index: 1;
+            }
+        }
+
+        // Limit style to buttons directly in title (to not affect the modal)
+        & > div > :deep(button) {
+            margin-top: -6px;
+            padding: 0;
+        }
+    }
+
+    p {
+        margin: 0;
+        overflow: hidden;
+        &:hover {
+            background-color: var(--octopus-secondary);
+            overflow: unset;
+            z-index: 1;
+        }
+    }
+}
+</style>

package/src/components/misc/ClassicDataTable.vue

@@ -0,0 +1,98 @@
+<!--
+    Generic component to display an array of elements
+
+    **Slots** :
+    - `item-[header.value]`
+      - Replace the default display of a value
+      - Parameters :
+        - `item`: The item being displayed
+        - `value`: The value of the item
+    - `item-actions`
+      - When defined, add a final column dedicated to action buttons
+      - Parameters :
+        - `item`: The item being displayed
+-->
+<template>
+    <ClassicDataTable_Internal 
+        v-if="noPagination"
+        v-bind="{ ...props, ...$attrs }"
+    >
+        <template v-for="(_, name) in $slots" v-slot:[name]="scope">
+            <slot :name="name" v-bind="{ ...scope }" />
+        </template>
+    </ClassicDataTable_Internal>
+    <ListPaginate
+        v-else
+        :first="first"
+        :size="size"
+        :text-count="$t('Number items', { nb: items.length })"
+        :total-count="items.length"
+        :loading="loading"
+        :loading-text="$t('Loading content ...')"
+    >
+        <template v-if="!loading" #list>
+            <ClassicDataTable_Internal 
+                v-bind="{ ...props, ...$attrs }"
+            >
+                <template v-for="(_, name) in $slots" v-slot:[name]="scope">
+                    <slot :name="name" v-bind="{ ...scope }" />
+                </template>
+            </ClassicDataTable_Internal>
+        </template>
+    </ListPaginate>
+</template>
+
+<script setup lang="ts" generic="T">
+import ListPaginate from '../display/list/ListPaginate.vue';
+import ClassicDataTable_Internal, {
+    type ClassicDataTableHeader,
+    type ClassicDataTableProps
+} from './ClassicDataTable_Internal.vue';
+
+export type { ClassicDataTableHeader };
+
+const {
+    first = 0,
+    size = 50,
+    noPagination = false,
+    ...props
+} = defineProps<ClassicDataTableProps<T> & {
+    /** Index of first element in pagination */
+    first?: number;
+    /** Number of elements in pagination */
+    size?: number;
+    /** Disable pagination */
+    noPagination?: boolean;
+    /** Indicates that data is loading */
+    loading?: boolean;
+}>();
+</script>
+
+<style scoped lang="scss">
+table {
+    border-collapse: collapse;
+}
+
+th {
+    text-align: start;
+}
+
+tr {
+    height: var(--table-line-height);
+    min-height: var(--table-line-height);
+}
+
+thead, tr/*:not(:last-child)*/ {
+    // Display a border between each line
+    border-bottom: 1px solid var(--octopus-primary-more-transparent);
+
+    td:first-child, th:first-child {
+        padding: 0px 32px;
+    }
+}
+
+.actions {
+    // Right align content
+    justify-content: right;
+}
+</style>

package/src/components/misc/ClassicDataTable_Internal.vue

@@ -0,0 +1,132 @@
+<!--
+    This component is used by ClassicDataTable and should not be used by
+    itself.
+-->
+<template>
+    <table class="w-100">
+        <!-- Displays the headers of the table -->
+        <thead>
+            <tr>
+                <th v-if="selectable" />
+                <th v-for="(header, i) in headers" :key="i">
+                    {{ header.label }}
+                </th>
+            </tr>
+        </thead>
+
+        <!-- Displays the data of the table -->
+        <tbody>
+            <tr v-for="(item, i) in items" :key="'item-' + i">
+                <td v-if="selectable" class="selection">
+                    <ClassicCheckbox
+                        :text-init="isSelected(item)"
+                        @update:text-init="select(item)"
+                    />
+                </td>
+                <td v-for="(header, j) in headers" :key="'item-' + i + '-' + j">
+                    <!-- Slot to allow for customisation of value display -->
+                    <slot
+                        :name="'item-' + header.value.toString()"
+                        :item="item"
+                        :value="item[header.value]"
+                    >
+                        {{ item[header.value] }}
+                    </slot>
+                </td>
+
+                <!-- Slot to display optional actions -->
+                <td v-if="slots['item-actions']" class="actions d-flex">
+                    <slot name="item-actions" :item="item" />
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script setup lang="ts" generic="T">
+import { useSlots } from 'vue';
+
+import ClassicCheckbox from '../form/ClassicCheckbox.vue';
+
+/**
+ * Header of table
+ */
+export interface ClassicDataTableHeader<T> {
+    /** Label of the header */
+    label: string;
+    /** Key of the item that will be displayed */
+    value: keyof T;
+}
+
+export interface ClassicDataTableProps<T> {
+    /** The elements to display in the table */
+    items: Array<T>;
+    /** The columns to display in the table */
+    headers: Array<ClassicDataTableHeader<T>>;
+    /** When true, checkboxes allowing for selection will be displayed */
+    selectable?: boolean;
+    /** The currently selected items */
+    selection?: Array<T>;
+    /** When set to false, only one element can be selected */
+    selectionMultiple?: boolean;
+}
+
+export interface ClassicDataTableEvents<T> {
+    /** Event triggered when the selection changes */
+    (e: 'update:selection', selection: Array<T>): void
+}
+
+const { selection, selectionMultiple = true } = defineProps<ClassicDataTableProps<T>>();
+
+const emit = defineEmits<ClassicDataTableEvents<T>>();
+
+const slots = useSlots();
+
+function isSelected(element: T): boolean {
+    return selection.indexOf(element) >= 0;
+}
+
+function select(element: T): void  {
+    if (isSelected(element)) {
+        emit('update:selection', []);
+    } else if (selectionMultiple === false) {
+        emit('update:selection', [element]);
+    } else {
+        emit('update:selection', [...selection, element]);
+    }
+}
+</script>
+
+<style scoped lang="scss">
+table {
+    border-collapse: collapse;
+}
+
+th {
+    text-align: start;
+}
+
+tr {
+    height: var(--table-line-height);
+    min-height: var(--table-line-height);
+}
+
+thead, tr/*:not(:last-child)*/ {
+    // Display a border between each line
+    border-bottom: 1px solid var(--octopus-primary-more-transparent);
+
+    td:first-child, th:first-child {
+        padding: 0px 32px;
+    }
+}
+
+.actions {
+    // Right align content
+    justify-content: right;
+}
+
+.selection {
+    width: 20px;
+    padding: 0;
+}
+</style>

package/src/components/misc/ClassicHelpButton.vue

@@ -17,7 +17,7 @@
         <ClassicPopover
             :target="computedId"
             popover-class="help-popover"
-            :relative-class="relative ? 'page-element' : ''"
+            :relative-class="relativeClass"
         >
             <div class="content">
                 <slot />
@@ -35,7 +35,7 @@ import ClassicPopover from './ClassicPopover.vue';
 const { colored, small } = defineProps<{
     colored?: boolean;
     /** Make the popover relative (userful when in page-element) */
-    relative?: boolean;
+    relativeClass?: string;
     /** Make the icon smaller if true *(default: false)* */
     small?: boolean;
 }>();
@@ -74,4 +74,4 @@ const iconSize = computed(() => {
 .help-popover {
     background-color: var(--octopus-secondary-lighter);
 }
-</style>
+</style>

package/src/components/misc/ClassicNotifications.vue

@@ -0,0 +1,23 @@
+<!--
+    A component to display notifications
+-->
+<template>
+    <MessageModal
+        v-if="notification !== null"
+        :title="notification.title"
+        :message="notification.message"
+        :closeable="notification.closeable !== false"
+        @close="clearNotifications"
+    />
+</template>
+
+<script setup lang="ts">
+import MessageModal from './modal/MessageModal.vue';
+
+import { useNotifications } from '../composable/useNotifications';
+
+const {
+    notification,
+    clearNotifications
+} = useNotifications();
+</script>

package/src/components/misc/ClassicPopover.vue

@@ -40,6 +40,7 @@ const props = defineProps({
   onlyClick: { type: Boolean, default: false },
   onlyMouse: { type: Boolean, default: false },
   isFixed: { type: Boolean, default: false },
+  /** Class(????) of the parent with relative positionning, must be set for proper positionning */
   relativeClass: { type: String, default: undefined },
   leftPos: { type: Boolean, default: false },
   topPos: { type: Boolean, default: false },

package/src/components/pages/EmissionPage.vue

@@ -42,7 +42,7 @@
               <div class="d-flex" style="align-items: center">
                 <div>{{ t('Emission - Not available for listeners') }}</div>
 
-                <ClassicHelpButton relative small>
+                <ClassicHelpButton relative-class="page-element" small>
                   {{ t('Emission - Not available explanation') }}
                 </ClassicHelpButton>
               </div>
@@ -179,7 +179,7 @@ const props = withDefaults(defineProps<{
   ps?: number;
   routeQuery?: string;
   /** When true, display emission title in podcastmaker header */
-  useEmissionTitle?: boolean;
+  useEmissionTitle: boolean;
 }>(), {
   pr: 0,
   ps: 30,

package/src/components/pages/EmissionsPage.vue

@@ -15,6 +15,7 @@
             v-model:to-date="toDate"
             v-model:rubrique-filter="rubriqueFilter"
             v-model:beneficiaries="beneficiaries"
+            v-model:emission-groups="emissionGroups"
             :search-pattern="searchPattern"
             :is-emission="true"
             :organisation-id="organisationId"
@@ -35,6 +36,7 @@
             :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
             :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
             :beneficiaries="beneficiaries"
+            :emission-groups="emissionGroups"
         />
     </section>
 </template>
@@ -44,25 +46,17 @@ import EmissionList from "../display/emission/EmissionList.vue";
 import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
 import {useAdvancedParamInit} from "../composable/route/useAdvancedParamInit";
 import { defineAsyncComponent } from "vue";
+import { RouteProps } from "../composable/route/types";
 const ProductorSearch = defineAsyncComponent(
     () => import("../display/filter/ProductorSearch.vue"),
 );
 
 //Props
-const props = defineProps({
-    pr: { default: 0, type: Number },
-    ps: { default: 30, type: Number },
-    routeQuery: { default: "", type: String },
-    routeMonetisable: { default: "UNDEFINED", type: String },
-    routeIab: { default: undefined, type: Number },
-    routeSort: { default: "LAST_PODCAST_DESC", type: String },
-    routeIncludeHidden: { default: "", type: String },
-    routeFrom: { default: undefined, type: String },
-    routeTo: { default: undefined, type: String },
-    routeOrga: { default: undefined, type: String },
-    routeRubriques: { default: "", type: String },
-    /** The filter on beneficiaries defined on the route props */
-    routeBeneficiaries: { default: null, type: Array as () => Array<string> }
+const props = withDefaults(defineProps<RouteProps>(), {
+    pr: 0,
+    ps: 30,
+    routeMonetisable: "UNDEFINED",
+    routeSort: "LAST_PODCAST_DESC"
 });
 
 //Composables
@@ -80,6 +74,7 @@ const {
     paginateFirst,
     rubriquesFilterArrayIds,
     isInit,
-    beneficiaries
+    beneficiaries,
+    emissionGroups
 } = useAdvancedParamInit(props, true);
 </script>

package/src/components/pages/PodcastPage.vue

@@ -115,7 +115,7 @@ const props = defineProps<{
   playingPodcast?: Podcast;
   podcastId: number;
   /** When true, display emission title in podcastmaker header */
-  useEmissionTitle?: boolean;
+  useEmissionTitle: boolean;
 }>();
 
 

package/src/components/pages/PodcastsPage.vue

@@ -15,6 +15,7 @@
             v-model:validity="validity"
             v-model:rubrique-filter="rubriqueFilter"
             v-model:beneficiaries="beneficiaries"
+            v-model:emission-groups="emissionGroups"
             :search-pattern="searchPattern"
             :is-emission="false"
             :organisation-id="organisationId"
@@ -37,6 +38,7 @@
             :beneficiaries="beneficiaries"
             :with-video="withVideo"
             :validity="validity"
+            :emission-groups="emissionGroups"
         />
     </section>
 </template>
@@ -47,31 +49,17 @@ import ProductorSearch from "../display/filter/ProductorSearch.vue";
 import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
 import {useAdvancedParamInit} from "../composable/route/useAdvancedParamInit";
 import { computed, ref, watch } from "vue";
+import { RouteProps } from "../composable/route/types";
 
 //Props 
-const props = defineProps({
-    pr: { default: 0, type: Number },
-    ps: { default: 30, type: Number },
-    routeQuery: { default: "", type: String },
-    routeMonetisable: { default: "UNDEFINED", type: String },
-    routeIab: { default: undefined, type: Number },
-    routeSort: { default: "DATE", type: String },
-    routeIncludeHidden: { default: "", type: String },
-    routeFrom: { default: undefined, type: String },
-    routeTo: { default: undefined, type: String },
-    routeValidity: { default: "", type: String },
-    routeOnlyVideo: { default: "", type: String },
-    routeOrga: { default: undefined, type: String },
-    routeRubriques: { default: "", type: String },
-    /** The filter on beneficiaries defined on the route props */
-    routeBeneficiaries: { default: null, type: Array as () => Array<string> }
+const props = withDefaults(defineProps<RouteProps>(), {
+    routeMonetisable: "UNDEFINED",
+    routeSort: "DATE"
 });
 
-
 //Data 
 const onlyVideo = ref(false);
 
-
 //Composables
 const {
     organisationId,
@@ -88,14 +76,14 @@ const {
     validity,
     rubriquesFilterArrayIds,
     isInit,
-    beneficiaries
+    beneficiaries,
+    emissionGroups
 } = useAdvancedParamInit(props, false);
 
 //Computed
 const orgaArray = computed(() => organisationId.value ? [organisationId.value] : []);
 const withVideo = computed(() => false === onlyVideo.value ? undefined : true);
 
-
 //Watch
 watch(() => props.routeOnlyVideo, () =>{
     onlyVideo.value = "true" === props.routeOnlyVideo;

package/src/helper/fetchHelper.ts

@@ -114,6 +114,7 @@ export default {
       // remove empty array for stats #12323
       if (
         undefined !== value &&
+        null !== value &&
         "" !== value &&
         (!Array.isArray(value) || (Array.isArray(value) && value.length))
       ) {

package/src/locale/de.ts

@@ -418,4 +418,6 @@ export default {
   "Emission - Not available for listeners": "Sendung für Hörer nicht sichtbar",
   "Emission - Not available explanation": "Diese Sendung ist für Hörer nicht sichtbar, da sie so konfiguriert wurde, dass ihre Episoden nicht veröffentlicht werden. Diese Konfiguration ist in den erweiterten Einstellungen der Show verfügbar.",
   "Filters - Beneficiaries": "Nach Referenzen der Rechteinhaber",
+  "Filter - Emission groups": "Nach Broadcast-Gruppen",
+  "Search - Emission groups placeholder": "Filtern Sie Gruppen nach Namen"
 }

package/src/locale/en.ts

@@ -421,4 +421,6 @@ export default {
   "Emission - Not available for listeners": "Broadcast not visible to listeners",
   "Emission - Not available explanation": "This show is not visible to listeners because it has been configured so that its episodes are not published. This configuration is available in the advanced settings of the show.",
   "Filters - Beneficiaries": "By rights holder references",
+  "Filter - Emission groups": "By broadcast groups",
+  "Search - Emission groups placeholder": "Filter groups by name"
 };

package/src/locale/es.ts

@@ -419,4 +419,6 @@ export default {
   "Emission - Not available for listeners": "Transmisión no visible para los oyentes",
   "Emission - Not available explanation": "Este programa no es visible para los oyentes porque ha sido configurado para que sus episodios no se publiquen. Esta configuración está disponible en la configuración avanzada del programa.",
   "Filters - Beneficiaries": "Por referencias de titulares de derechos",
+  "Filter - Emission groups": "Por grupos de difusión",
+  "Search - Emission groups placeholder": "Filtrar grupos por nombre"
 }

package/src/locale/fr.ts

@@ -21,7 +21,7 @@ export default {
   "Please set an animator": "Merci de sélectionner ou de créer un animateur.",
   "Term of use": "Conditions Générales d'Utilisation",
   "Producted by : ": "Produit par : ",
-  "Loading podcasts ...": "Chargement des épisodes ...",
+  "Loading podcasts ...": "Chargement des épisodes…",
   "All podcasts": "Tous les épisodes",
   Error: "Erreur",
   Upload: "Téléverser",
@@ -68,7 +68,7 @@ export default {
   "Loading productors ...": "Chargement des producteurs en cours...",
   "Loading emissions ...": "Chargement des émissions en cours...",
   "Emission name image": "Image de l'émission {name}",
-  "Loading content ...": "Chargement en cours ...",
+  "Loading content ...": "Chargement en cours…",
   Episode: "Épisode",
   "Episode name image": "Image de l'épisode {name}",
   "More episodes of this emission": "Plus d'épisodes de cette émission",
@@ -427,5 +427,7 @@ export default {
   "Silent stream":"Flux silencieux",
   "Emission - Not available for listeners": "Émission non visible pour les auditeurs",
   "Emission - Not available explanation": "Cette émission n'est pas visible pour les auditeurs car elle a été configurée pour que ses épisodes ne soient pas publiés. Cette configuration est disponible dans les paramètres avancés de l'émission.",
-  "Filters - Beneficiaries": "Par références ayants-droit"
+  "Filters - Beneficiaries": "Par références ayants-droit",
+  "Filters - Emission groups": "Par groupes d'émissions",
+  "Search - Emission groups placeholder": "Filtrer les groupes par nom"
 };

package/src/locale/it.ts

@@ -415,4 +415,6 @@ export default{
   "Emission - Not available for listeners": "Trasmissione non visibile agli ascoltatori",
   "Emission - Not available explanation": "Questo programma non è visibile agli ascoltatori perché è stato configurato in modo che i suoi episodi non vengano pubblicati. Questa configurazione è disponibile nelle impostazioni avanzate dello spettacolo.",
   "Filters - Beneficiaries": "Per riferimenti del titolare dei diritti",
+  "Filter - Emission groups": "Per gruppi di trasmissione",
+  "Search - Emission groups placeholder": "Filtra i gruppi per nome"
 };

package/src/locale/sl.ts

@@ -410,4 +410,6 @@ export default {
   "Emission - Not available for listeners": "Oddaja ni vidna poslušalcem",
   "Emission - Not available explanation": "Ta oddaja ni vidna poslušalcem, ker je bila konfigurirana tako, da njene epizode niso objavljene. Ta konfiguracija je na voljo v naprednih nastavitvah oddaje.",
   "Filters - Beneficiaries": "Po referencah imetnikov pravic",
+  "Filter - Emission groups": "Po oddajnih skupinah",
+  "Search - Emission groups placeholder": "Filtrirajte skupine po imenu"
 }