@saooti/octopus-sdk 41.1.14 → 41.2.0

package/src/components/composable/useNotifications.ts

@@ -0,0 +1,50 @@
+import { ref } from "vue";
+
+type NotificationType = 'success'|'info'|'warning'|'error';
+
+/**
+ * Type for notifications
+ */
+interface Notification {
+    /** Optional title of the notification */
+    title?: string;
+    /** Message displayed by the notification */
+    message: string;
+    /** Type of notification, may affect display */
+    type: NotificationType;
+    /** When set to false, disallow manual closing of modal notification (default: true) */
+    closeable?: boolean;
+}
+
+/** The notification currently displayed */
+const notification = ref<Notification|null>(null);
+
+/**
+ * Composable used to manage notifications
+ */
+export const useNotifications = () => {
+    /**
+     * Add & display a notification
+     * @param newNotif The data of the new notification
+     */
+    function addNotification(newNotif: Notification): void {
+        notification.value = { ...newNotif };
+    }
+
+    /**
+     * Remove all notifications
+     */
+    function clearNotifications(): void {
+        notification.value = null;
+    }
+
+    return {
+        /** The currently active notification */
+        notification,
+        
+        /** Add a new notification to be displayed */
+        addNotification,
+        /** Remove all active notifications */
+        clearNotifications
+    }
+};

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

@@ -0,0 +1,56 @@
+<template>
+    <ClassicMultiselect
+        id="group-chooser"
+        ref="selectGroup"
+        option-label="name"
+        :placeholder="$t('Search - Emission groups placeholder')"
+        :max-element="maxElement"
+        width="400px"
+        in-modal
+        :option-chosen="groups"
+        multiple
+        @on-search="onSearch"
+        @selected="emitSelected"
+    />
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from "vue";
+
+import ClassicMultiselect from "../../form/ClassicMultiselect.vue"; 
+import { groupsApi, EmissionGroup } from "../../../api/groupsApi";
+
+//Props 
+const props = defineProps<{
+    /** Filter by organisation */
+    organisationId?: Array<string>;
+    /** Currently selected groups */
+    groups: Array<EmissionGroup>;
+}>();
+
+//Emits
+const emit = defineEmits(["update:groups"]);
+
+//Data
+const maxElement = 50;
+const selectGroupRef = useTemplateRef('selectGroup');
+
+//Methods
+async function onSearch(query?: string): Promise<void> {
+    const response = await groupsApi.search({
+        first: 0,
+        size: maxElement,
+        search: query,
+        organisationIds: props.organisationId,
+    });
+
+    selectGroupRef.value!.afterSearch(
+        response.result.filter(g => g.emissionIds?.length ?? 0 > 0),
+        response.count
+    );
+}
+
+function emitSelected(option: Array<EmissionGroup>) {
+    emit("update:groups", option);
+}
+</script>

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

@@ -38,7 +38,7 @@
           <!-- eslint-disable vue/no-v-html -->
           <div
             ref="descriptionEmission"
-            v-html="urlify(emission.description || '')"
+            v-html="description"
           />
           <!-- eslint-enable -->
         </div>
@@ -71,6 +71,7 @@ import { ListClassicReturn } from "@/stores/class/general/listReturn";
 import ClassicImageBanner from '../../misc/ClassicImageBanner.vue';
 
 import { useI18n } from "vue-i18n";
+import { useResizePhone } from "../../composable/useResizePhone";
 
 //Props 
 const props = defineProps<{
@@ -111,6 +112,25 @@ onMounted(()=>{
   }
 })
 
+const { isPhone } = useResizePhone();
+const description = computed((): string => {
+  let str = props.emission.description;
+  if (!str) {
+    return '';
+  }
+
+  // Truncate description on phones
+  if (isPhone.value === true) {
+    const pattern = /^(.+?<\/p>)/;
+    const matches = str.match(pattern);
+    if (matches && matches.length === 2) {
+      str = matches[1];
+    }
+  }
+
+  return urlify(str);
+});
+
 //Methods
 function urlify(text:string|undefined){
   return displayHelper.urlify(text);
@@ -142,8 +162,8 @@ article {
     max-height: 500px;
 
     a {
-      flex-direction: column;
-      flex-wrap: nowrap;
+      flex-direction: column !important;
+      flex-wrap: nowrap !important;
     }
 
     .element-name {

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

@@ -71,6 +71,7 @@ import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 import { useI18n } from "vue-i18n";
+import { EmissionGroup } from "../../../api/groupsApi";
 const EmissionItem = defineAsyncComponent(() => import("./EmissionItem.vue"));
 const EmissionPlayerItem = defineAsyncComponent(
   () => import("./EmissionPlayerItem.vue"),
@@ -94,7 +95,9 @@ const props = defineProps({
   noRubriquageId: { default: () => [], type: Array as () => Array<number> },
   nbPodcasts: { default: undefined, type: Number },
   /** The beneficiaries to filter on */
-  beneficiaries: { default: null, type: Array as () => Array<string> }
+  beneficiaries: { default: null, type: Array as () => Array<string> },
+  /** The emission groups to filter on */
+  emissionGroups: { default: null, type: Array as () => Array<EmissionGroup> }
 })
 
 //Data 
@@ -128,7 +131,8 @@ const changePaginate = computed(() => `${props.first}|${props.size}`);
 const changed = computed(() => {
   return `${props.organisationId}|${props.query}|${props.monetisable}|${props.includeHidden}|\
   ${props.iabId}|${props.rubriqueId}|${props.rubriquageId}|${props.before}|\
-  ${props.after}|${props.sort}|${props.noRubriquageId}|${props.beneficiaries}`;
+  ${props.after}|${props.sort}|${props.noRubriquageId}|${props.beneficiaries}|\
+  ${props.emissionGroups}`;
 });
 const sortText = computed(() => {
   let textSort = "";
@@ -204,6 +208,8 @@ async function fetchContent(reset: boolean): Promise<void> {
     param.visible = 'VISIBLE';
   }
 
+  // TODO use emissionGroups
+
   try {
     const data = await classicApi.fetchData<ListClassicReturn<Emission>>({
       api: 0,

package/src/components/display/filter/AdvancedSearch.vue

@@ -32,6 +32,23 @@
                         @update:rubrique-filter="updateRubriquageFilter"
                     />
 
+                    <!-- Group filters -->
+                    <div v-if="!isEmission && showEmissionGroups" class="mt-3 d-flex">
+                        <ClassicCheckbox
+                            v-model:text-init="emissionGroupCheckbox"
+                            class="flex-shrink-0"
+                            id-checkbox="search-emission-groups-checkbox"
+                            :label="t('Filters - Emission groups')"
+                        />
+
+                        <EmissionGroupChooser
+                            v-if="emissionGroupCheckbox"
+                            class="ms-4 flex-grow-1"
+                            :groups="emissionGroups"
+                            @update:groups="updateEmissionGroupFilter"
+                        />
+                    </div>
+
                     <!-- Date -->
                     <DateFilter
                         :is-emission="isEmission"
@@ -117,7 +134,7 @@ import { useAuthStore } from "../../../stores/AuthStore";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
-import { defineAsyncComponent, ref, computed, watch } from "vue";
+import { defineAsyncComponent, ref, computed, watch, onMounted } from "vue";
 import { useGeneralStore } from "../../../stores/GeneralStore";
 import { useI18n } from "vue-i18n";
 const MonetizableFilter = defineAsyncComponent(
@@ -141,27 +158,34 @@ const ClassicCheckbox = defineAsyncComponent(
 const DateFilter = defineAsyncComponent(() => import("./DateFilter.vue"));
 const SearchOrder = defineAsyncComponent(() => import("./SearchOrder.vue"));
 import { ROUTE_PARAMS } from '../../composable/route/types';
+import { EmissionGroup, groupsApi } from "../../../api/groupsApi";
+import EmissionGroupChooser from "../emission/EmissionGroupChooser.vue";
 
 //Props 
-const props = defineProps({
-    organisationId: { default: undefined, type: String },
-    isEmission: { default: false, type: Boolean },
-    includeHidden: { default: false, type: Boolean },
-    sort: { default: "DATE", type: String },
-    onlyVideo: { default: false, type: Boolean },
-    monetisable: { default: "UNDEFINED", type: String },
-    iabId: { default: undefined, type: Number },
-    searchPattern: { default: "", type: String },
-    fromDate: { default: undefined, type: String },
-    toDate: { default: undefined, type: String },
-    validity: { default: 'true', type: String },
+const props = withDefaults(defineProps<{
+    organisationId?: string;
+    /** Indicates that the filters apply to emissions */
+    isEmission?: boolean;
+    includeHidden?: boolean;
+    sort?: string;
+    onlyVideo?: boolean;
+    monetisable?: string;
+    iabId?: number;
+    searchPattern?: string;
+    fromDate?: string;
+    toDate?: string;
+    validity?: string;
     /** The filter on beneficiaries */
-    beneficiaries: { default: null, type: Array as () => Array<string> },
-    rubriqueFilter: {
-        default: () => [],
-        type: Array as () => Array<RubriquageFilter>,
-    },
-})
+    beneficiaries?: Array<string>;
+    rubriqueFilter?: Array<RubriquageFilter>;
+    /** The filter on groups */
+    emissionGroups?: Array<EmissionGroup>;
+}>(), {
+    sort: "DATE",
+    monetisable: "UNDEFINED",
+    searchPattern: "",
+    validity: "true"
+});
 
 //Emits
 const emit = defineEmits([
@@ -174,13 +198,14 @@ const emit = defineEmits([
     "update:validity",
     "update:rubriqueFilter",
     "update:onlyVideo",
-    "update:beneficiaries"
+    "update:beneficiaries",
+    "update:emission-groups"
 ]);
 
 //Data 
 const showFilters = ref(false);
 const firstLoaded = ref(false);
-
+const showEmissionGroups = ref(false);
 
 //Composables
 const { t } = useI18n();
@@ -190,6 +215,13 @@ const generalStore = useGeneralStore();
 const filterStore = useFilterStore();
 const authStore = useAuthStore();
 
+onMounted(async() => {
+    // Only show emission groups if there are some
+    const nbGroups = await groupsApi.count({
+        organisationIds: [props.organisationId]
+    });
+    showEmissionGroups.value = nbGroups > 0;
+});
 
 //Computed
 const organisationRight = computed(() => isEditRights(props.organisationId));
@@ -205,6 +237,7 @@ const isSelectValidity = computed(() => {
         props.includeHidden
     );
 });
+
 /** The beneficiaries filter is only displayed if beneficiaries are enabled */
 const beneficiariesEnabled = computed(() => {
     return authStore.authOrganisation.attributes['beneficiaries.enabled'] === 'true';
@@ -288,11 +321,37 @@ function updateRubriquageFilter(value: Array<RubriquageFilter>) {
         filterRubriques = { rubriquesId: undefined };
     }
     updateRouteParamAdvanced({
-        ...{ r: valueString.length ? valueString : undefined },
+         r: valueString.length ? valueString : undefined,
         ...filterRubriques,
     });
 }
 
+/** Manage the checkbox enabling filtering on groups */
+const emissionGroupCheckbox = computed({
+    get(): boolean {
+        return props.emissionGroups !== undefined && props.emissionGroups !== null;
+    },
+    set(value: boolean): void {
+        if (value) {
+            updateEmissionGroupFilter([]);
+        } else {
+            updateEmissionGroupFilter(undefined);
+        }
+    }
+});
+
+/** Update selected groups */
+function updateEmissionGroupFilter(groups: Array<EmissionGroup>|undefined): void {
+    if (groups !== undefined && groups.length === 0) {
+        emit('update:emission-groups', []);
+    } else {
+        updateRouteParamAdvanced({
+            [ROUTE_PARAMS.EmissionGroups]: groups?.map(g => g.groupId)
+        });
+        emit('update:emission-groups', groups);
+    }
+}
+
 /** Update the beneficiaries filter */
 function updateBeneficiaries(value: string[]|undefined): void {
     emit('update:beneficiaries', value);
@@ -350,4 +409,4 @@ function clickShowFilters(): void {
       overflow: hidden;
   }
 }
-</style>
+</style>

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

@@ -1,6 +1,9 @@
 <template>
   <div :id="id" class="d-flex flex-column align-items-center">
-    <ClassicLoading :loading-text="loadingText" :error-text="errorText" />
+    <ClassicLoading
+      v-if="loading || errorText"
+      :loading-text="loadingText" :error-text="errorText"
+    />
     <template v-if="!loading">
       <div
         v-if="!justSizeChosen"

package/src/components/display/podcasts/PodcastList.vue

@@ -56,17 +56,15 @@
 <script setup lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
 import {useErrorHandler} from "../../composable/useErrorHandler";
-import classicApi from "../../../api/classicApi";
 import PodcastItem from "./PodcastItem.vue";
 import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { Podcast, PodcastProcessingStatus, emptyPodcastData } from "../../../stores/class/general/podcast";
 import { computed, onBeforeMount, Ref, ref, watch } from "vue";
-import { FetchParam } from "@/stores/class/general/fetchParam";
 import { AxiosError } from "axios";
-import { ListClassicReturn } from "../../../stores/class/general/listReturn";
 import { useI18n } from "vue-i18n";
 import { podcastApi, PodcastMonetisation, PodcastSearchOptions, PodcastSort } from "../../../api/podcastApi";
+import { EmissionGroup } from "@/api/groupsApi";
 
 //Props 
 const props = withDefaults(defineProps<{
@@ -96,6 +94,8 @@ const props = withDefaults(defineProps<{
   forceUpdateParameters?: boolean;
   /** The beneficiaries to filter on */
   beneficiaries?: Array<string>;
+  /** The emission groups to filter on */
+  emissionGroups?: Array<EmissionGroup>;
 }>(), {
   first: 0,
   size: 30,
@@ -106,6 +106,7 @@ const props = withDefaults(defineProps<{
   displaySortText: true,
   validity: true,
   justSizeChosen: false,
+  withVideo: undefined,
   forceUpdateParameters: false
 });
 
@@ -140,7 +141,7 @@ const changed = computed(() => {
   return `${organisation.value}|${props.emissionId}|${props.sortCriteria}|${sort.value}
     ${props.iabId}|${props.participantId}|${props.query}|${props.monetisable}|${props.popularSort}|
     ${props.rubriqueId}|${props.rubriquageId}|${props.before}|${props.after}|${props.includeHidden}|${props.noRubriquageId}|${props.validity}|
-    ${props.withVideo}|${props.includeTag}|${props.beneficiaries}`;
+    ${props.withVideo}|${props.includeTag}|${props.beneficiaries}|${props.emissionGroups}`;
 });
 const organisation = computed(() => {
   if (props.organisationId) {
@@ -200,6 +201,7 @@ async function fetchContent(reset: boolean): Promise<void> {
     pageSize: dsize.value,
     organisationId: organisation.value,
     emissionId: props.emissionId,
+    emissionGroups: props.emissionGroups,
     iabId: props.iabId,
     participantId: props.participantId,
     query: props.query,
@@ -223,11 +225,16 @@ async function fetchContent(reset: boolean): Promise<void> {
     tags: props.includeTag?.length ? props.includeTag : undefined,
     beneficiaries: props.beneficiaries ?? undefined
   };
+
   try {
     const data = await podcastApi.searchFull(param, true);
     afterFetching(reset, data);
   } catch (error) {
-    handle403(error as AxiosError);
+    if (error instanceof AxiosError) {
+      handle403(error as AxiosError);
+    } else {
+      console.error('error', error);
+    }
   }
 }
 function afterFetching(

package/src/components/display/podcasts/PodcastPlayButton.vue

@@ -47,11 +47,11 @@
           @mouseenter="hoverType = 'video'"
           @mouseleave="hoverType = ''"
         >
+          <PodcastIsPlaying v-if="playingPodcast && playerStore.playerVideo" />
           <PlayVideoIcon
-            v-if="!playerStore.playerVideo"
+            v-else
             :size="'video' === hoverType ? 50 : 40"
           />
-          <PodcastIsPlaying v-if="playingPodcast && playerStore.playerVideo" />
           <time
             class="ms-2 me-2"
             :datetime="durationIso"

package/src/components/display/podcasts/TagList.vue

@@ -74,9 +74,12 @@ const filterStore = useFilterStore();
 
 //Computed
 const tagListFiltered = computed(() => {
-  return props.tagList.filter((tag: string) => {
+  const tags = props.tagList.filter((tag: string) => {
     return !tag.match(/^\[\[.*\]\]$/);
   });
+
+  // Each tag is only displayed once
+  return tags.filter((tag, index) => tags.indexOf(tag) === index);
 });
 const organisationQuery = computed(() => {
   if(filterStore.filterOrgaId){

package/src/components/form/ClassicMultiselect.vue

@@ -96,7 +96,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import { computed, defineAsyncComponent, ref, Ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
@@ -108,37 +108,43 @@ const ClassicPopover = defineAsyncComponent(
 );
 
 //Props 
-const props = defineProps({
-  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 },
-  height: { default: undefined, type: String },
-  maxElement: { default: 50, type: Number },
-  minSearchLength: { default: 3, type: Number },
-  optionChosen: { default: undefined, type: Object as () => unknown },
-  noDeselect: { default: true, type: Boolean },
-  optionCustomTemplating: { default: "", type: String },
-  optionSelectedCustomTemplating: { default: "", type: String },
-  displayLabel: { default: false, type: Boolean },
-  maxOptions: { default: null, type: Number },
-  allowEmpty: { default: true, type: Boolean },
-  textDanger :{ default: undefined, type: String },
-  displayRequired: { default: false, type: Boolean },
-  popover: { default: undefined, type: String },
-  popoverRelativeClass: { default: undefined, type: String },
-})
+const {
+  inModal = false, multiple = false, isDisabled = false, width = "100%",
+  maxElement = 50, minSearchLength = 3, noDeselect = true, displayLabel = false,
+  allowEmpty = true, optionChosen, maxOptions = null,
+  optionCustomTemplating = '', optionSelectedCustomTemplating = ''
+} = defineProps<{
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  optionLabel?: string;
+  inModal?: boolean;
+  multiple?: boolean;
+  isDisabled?: boolean;
+  width?: string;
+  height?: string;
+  maxElement?: number;
+  minSearchLength?: number;
+  /** Currently chosen option */
+  optionChosen?: T|Array<T>;
+  noDeselect?: boolean;
+  optionCustomTemplating?: string;
+  optionSelectedCustomTemplating?: string;
+  displayLabel?: boolean;
+  maxOptions?: number;
+  allowEmpty?: boolean;
+  textDanger ?:string;
+  displayRequired?: boolean;
+  popover?: string;
+  popoverRelativeClass?: string;
+}>();
 
 //Emits
 const emit = defineEmits(["onSearch", "selected", "onClose"]);
 
 //Data 
-const optionSelected : Ref<unknown>= ref(undefined);
-const options : Ref<Array<unknown>>= ref([]);
+const optionSelected : Ref<T|T[]>= ref(undefined);
+const options : Ref<Array<T>>= ref([]);
 const remainingElements = ref(0);
 const isLoading = ref(false);
 const searchInput = ref("");
@@ -149,20 +155,20 @@ const { t } = useI18n();
 
 //Computed
 const maxOptionsSelected = computed(() => {
-  if (props.maxOptions !== null && props.multiple) {
+  if (maxOptions !== null && multiple) {
     return (
-      (optionSelected.value as Array<unknown>).length >= props.maxOptions
+      (optionSelected.value as Array<T>).length >= maxOptions
     );
   }
   return false;
 });
 
 //Watch
-watch(()=>props.optionChosen, () => {
-  optionSelected.value = props.optionChosen;
+watch(()=>optionChosen, () => {
+  optionSelected.value = optionChosen;
 }, {deep: true, immediate: true});
 watch(optionSelected, () => {
-  if (props.noDeselect || null !== optionSelected.value) {
+  if (noDeselect || null !== optionSelected.value) {
     return;
   }
   emit("selected", undefined);
@@ -173,7 +179,7 @@ function fakeSearch(): Array<unknown> {
   return options.value;
 }
 function onSearch(search?: string): void {
-  if (search && search.length < props.minSearchLength) {
+  if (search && search.length < minSearchLength) {
     return;
   } else if (search) {
     searchInput.value = search;
@@ -185,20 +191,20 @@ function onClose() {
   emit("onClose", searchInput.value);
   searchInput.value = "";
 }
-function afterSearch(optionsFetched: Array<unknown>, count: number): void {
+function afterSearch(optionsFetched: Array<T>, count: number): void {
   options.value = optionsFetched;
-  remainingElements.value = Math.max(0, count - props.maxElement);
+  remainingElements.value = Math.max(0, count - maxElement);
   isLoading.value = false;
 }
 function onOptionSelected(optionSelected: unknown): void {
   emit("selected", optionSelected);
 }
 function onOptionDeselect(event: unknown): void {
-  if (!props.multiple) {
+  if (!multiple) {
     return;
   }
   if (
-    !props.allowEmpty &&
+    !allowEmpty &&
     0 === (optionSelected.value as Array<unknown>).length
   ) {
     (optionSelected.value as Array<unknown>).push(event);

package/src/components/icons.ts

@@ -0,0 +1,13 @@
+/**
+ * Library of icons to use in the application
+ * Icons should be defined here, then used with their alias.
+ * This will allow for better consistency, and easily changing icons.
+ */
+
+import SquareEditOutline from 'vue-material-design-icons/SquareEditOutline.vue';
+import TrashCan from 'vue-material-design-icons/TrashCan.vue'; 
+
+export default {
+    Delete: TrashCan,
+    Edit: SquareEditOutline
+}

package/src/components/misc/ClassicAlert.vue

@@ -82,6 +82,13 @@ const iconComponent = computed(() => {
         display: flex;
         flex-direction: column;
         align-self: center;
+
+        &:deep(p) {
+            margin: 0 !important;
+            &:not(:first-child) {
+                margin-top: 8px !important;
+            }
+        }
     }
 
     $types: (
@@ -103,4 +110,4 @@ const iconComponent = computed(() => {
         }
     }
 }
-</style>
+</style>