@saooti/octopus-sdk 41.12.0-beta2 → 41.12.0

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

@@ -2,37 +2,39 @@
   Simple component to display a few podcasts
 -->
 <template>
-  <PresentationLayout
-    v-if="!loading && !error"
-    :title="title"
-    :items="podcasts"
-    :route="href"
-    :button-text="buttonText"
-  >
-    <template #item="{ item, first }">
-      <PresentationItem
-        :class="!isPhone && first ? 'me-3' : ''"
-        :name="item.title"
-        :route="route(item)"
-        :image-url="item.imageUrl"
-        :description="item.description"
-        :vertical="!isPhone && first"
-      >
-        <template #after-image>
-          <PodcastPlayButton
-            :podcast="item"
-            :hide-play="false"
-            :show-processing="false"
-          />
+    <PresentationLayout
+        v-if="!loading && !error"
+        :title="title"
+        :items="podcasts"
+        :route="href"
+        :button-text="buttonText"
+    >
+        <template #item="{ item, first }">
+            <PresentationItem
+                :class="!isPhone && first ? 'me-3' : ''"
+                :name="item.title"
+                :route="route(item)"
+                :image-url="item.imageUrl"
+                :description="item.description"
+                :vertical="!isPhone && first"
+                :tags="tags.get(item.podcastId)"
+                :additional-info="additionalInfoFor(item)"
+            >
+                <template #after-image>
+                    <PodcastPlayButton
+                        :podcast="item"
+                        :hide-play="false"
+                        :show-processing="false"
+                    />
+                </template>
+            </PresentationItem>
         </template>
-      </PresentationItem>
-    </template>
-  </PresentationLayout>
-  <ClassicLoading
-    v-else
-    :loading-text="loading ? $t('Loading emissions ...') : undefined"
-    :error-text="error ? $t(`Error`) : undefined"
-  />
+    </PresentationLayout>
+    <ClassicLoading
+        v-else
+        :loading-text="loading ? $t('Loading emissions ...') : undefined"
+        :error-text="error ? $t(`Error`) : undefined"
+    />
 </template>
 
 <script setup lang="ts">
@@ -40,7 +42,7 @@ import classicApi from "../../../api/classicApi";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { Emission } from "@/stores/class/general/emission";
-import { onMounted, Ref, ref } from "vue";
+import { onMounted, reactive, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
 import {useResizePhone} from "../../composable/useResizePhone";
 import { ListClassicReturn } from "../../../stores/class/general/listReturn";
@@ -52,89 +54,101 @@ import PresentationItem from "../../layouts/PresentationItem.vue";
 import PodcastPlayButton from "./PodcastPlayButton.vue"; 
 import { RouteLocationRaw } from "vue-router";
 import { podcastApi, PodcastSort } from "../../../api/podcastApi";
+import { usePresentationItem } from "../../composable/usePresentationItem";
 
 //Props 
 const props = defineProps({
-  organisationId: { default: undefined, type: String },
-  title: { default: "", type: String },
-  href: { default: undefined, type: String },
-  buttonText: { default: undefined, type: String },
-  isDescription: { default: false, type: Boolean },
-  rubriquesId: { default: [], type: Array<number> },
+    organisationId: { default: undefined, type: String },
+    title: { default: "", type: String },
+    href: { default: undefined, type: String },
+    buttonText: { default: undefined, type: String },
+    isDescription: { default: false, type: Boolean },
+    rubriquesId: { default: [], type: Array<number> },
 })
 
 //Data 
 const loading = ref(true);
 const error = ref(false);
 const podcasts: Ref<Array<Podcast>> = ref([]);
+const tags = reactive(new Map<number, Array<string>>());
   
 //Composables
 const { isPhone } = useResizePhone();
-const {handle403} = useErrorHandler();
+const { handle403 } = useErrorHandler();
+const { tagsFor, additionalInfoFor } = usePresentationItem();
 
-onMounted(()=>fetchNext())
+onMounted(fetchNext);
+
+watch(podcasts, async () => {
+    podcasts.value.forEach(async (podcast) => {
+        if (!tags.has(podcast.podcastId)) {
+            const t = await tagsFor(podcast);
+            tags.set(podcast.podcastId, t);
+        }
+    });
+});
 
 //Methods
 async function fetchNext(): Promise<void> {
-  loading.value = true;
-  try {
-    // Retrieve latest emissions
-    const emissions = await classicApi.fetchData<ListClassicReturn<Emission>>({
-      api: 0,
-      path: "emission/search",
-      parameters: {
-        first: 0,
-        size: 5,
-        organisationId: props.organisationId,
-        sort: "LAST_PODCAST_DESC",
-        rubriqueId: props.rubriquesId
-      },
-      specialTreatement: true,
-    });
+    loading.value = true;
+    try {
+        // Retrieve latest emissions
+        const emissions = await classicApi.fetchData<ListClassicReturn<Emission>>({
+            api: 0,
+            path: "emission/search",
+            parameters: {
+                first: 0,
+                size: 5,
+                organisationId: props.organisationId,
+                sort: "LAST_PODCAST_DESC",
+                rubriqueId: props.rubriquesId
+            },
+            specialTreatement: true,
+        });
 
-    const promises: Array<Promise<SimplifiedPodcast>> = [];
+        const promises: Array<Promise<SimplifiedPodcast>> = [];
 
-    for (let i = 0; i < emissions.result.length; i++) {
-      promises.push(podcastApi.search({
-        first: 0,
-        size: 1,
-        organisationId: [props.organisationId],
-        emissionId: [emissions.result[i].emissionId],
-        sort: PodcastSort.DATE,
-        rubriqueId: props.rubriquesId
-      }).then(r => r.result[0]));
-    }
+        for (let i = 0; i < emissions.result.length; i++) {
+            promises.push(podcastApi.search({
+                first: 0,
+                size: 1,
+                organisationId: [props.organisationId],
+                emissionId: [emissions.result[i].emissionId],
+                sort: PodcastSort.DATE,
+                rubriqueId: props.rubriquesId
+            }).then(r => r.result[0]));
+        }
 
-    // Retrieve the podcasts for these emissions
-    const data = await Promise.all(promises);
+        // Retrieve the podcasts for these emissions
+        const data = await Promise.all(promises);
 
-    podcasts.value = podcasts.value.concat(
-      data.filter((em: SimplifiedPodcast | null) => null !== em && undefined !== em).map(p => {
-        // Get emission from podcast
-        const emission = emissions.result.find(e => e.emissionId === p.emissionId);
-        // Create full podcast from simplified + emission
-        return simplifiedToFull(p, emission.orga, emission);
-      })
-    );
+        podcasts.value = podcasts.value.concat(
+            data.filter((em: SimplifiedPodcast | null) => null !== em && undefined !== em).map(p => {
+                // Get emission from podcast
+                const emission = emissions.result.find(e => e.emissionId === p.emissionId);
+                // Create full podcast from simplified + emission
+                return simplifiedToFull(p, emission.orga, emission);
+            })
+        );
 
-    // Sort podcasts by pub date so that the most recent one is focused
-    podcasts.value.sort((p1, p2) => {
-      return new Date(p2.pubDate).getTime() - new Date(p1.pubDate).getTime();
-    });
+        // Sort podcasts by pub date so that the most recent one is focused
+        podcasts.value.sort((p1, p2) => {
+            return new Date(p2.pubDate).getTime() - new Date(p1.pubDate).getTime();
+        });
     
+        loading.value = false;
+    } catch (errorWs) {
+        console.error(errorWs);
+        handle403(errorWs as AxiosError);
+        error.value = true;
+    }
     loading.value = false;
-  } catch (errorWs) {
-    console.error(errorWs);
-    handle403(errorWs as AxiosError);
-    error.value = true;
-  }
-  loading.value = false;
 }
 
 function route(podcast: Podcast): RouteLocationRaw {
-  return {
-    name: 'podcast',
-    params: { podcastId: podcast.podcastId }
-  }
+    return {
+        name: 'podcast',
+        params: { podcastId: podcast.podcastId }
+    }
 }
 </script>

package/src/components/form/ClassicButtonGroup.vue

@@ -24,6 +24,8 @@ const props = defineProps<{
     value: T[];
     /** Possible values */
     options: ButtonGroupOption<T>[];
+    /** Select only one option */
+    solo?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -31,12 +33,16 @@ const emit = defineEmits<{
 }>();
 
 function toggle(value: T): void {
-    const isSelected = props.value.includes(value);
-    if (isSelected && props.value.length <= 1) { return; }
-    const newValues = isSelected
-        ? props.value.filter(v => v !== value)
-        : [...props.value, value];
-    emit('update:value', newValues);
+    if (props.solo === true) {
+        emit('update:value', [value]);
+    } else {
+        const isSelected = props.value.includes(value);
+        if (isSelected && props.value.length <= 1) { return; }
+        const newValues = isSelected
+            ? props.value.filter(v => v !== value)
+            : [...props.value, value];
+        emit('update:value', newValues);
+    }
 }
 </script>
 

package/src/components/form/OctopusMultiselect.vue

@@ -41,6 +41,7 @@
                 :disabled="isDisabled"
                 @focus="openDropdown"
                 @input="handleInput"
+                @keydown.enter="handleCustomValueEnter"
             >
             <button
                 class="btn-transparent octopus-multiselect-chevron"
@@ -74,14 +75,20 @@
 
                 <div class="octopus-multiselect-options">
                     <ClassicCheckbox
-                        v-for="(option, index) in displayedOptions"
+                        v-for="(option, index) in visibleOptions"
                         :key="index"
                         :text-init="isSelected(option)"
                         :label="getLabel(option)"
                         :is-disabled="isDisabled"
                         @update:text-init="toggleOption(option)"
                     />
-                    <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                    <template v-if="allowCustomValue && searchQuery.trim()">
+                        <hr v-if="visibleOptions.length > 0">
+                        <span class="text-indic px-2">
+                            {{ t('Press Enter to add this value') }}
+                        </span>
+                    </template>
+                    <span v-else-if="visibleOptions.length === 0" class="text-indic px-2">
                         {{ t('No elements found. Consider changing the search query.') }}
                     </span>
                 </div>
@@ -106,8 +113,16 @@ const props = defineProps<{
     options: T[];
     /** Key of each option object to use as the ID */
     optionKey?: keyof T;
-    /** Key of each option object to use as the display label. */
-    optionLabel: keyof T & string;
+    /** Key of each option object to use as the display label. Omit when `options` is a
+     *  plain `string[]` — each string is used as its own label. Note: omitting this for
+     *  an object array is a runtime mistake (not caught at compile time) and will render
+     *  "[object Object]". */
+    optionLabel?: keyof T & string;
+    /** When true, pressing Enter in the search input adds the typed text as a new
+     *  selected value, even if it doesn't match any option. Intended for use when
+     *  options are plain strings (`optionLabel` omitted) — casting arbitrary typed
+     *  text into an object-shaped T would not produce a valid option. */
+    allowCustomValue?: boolean;
     /** Disables the field and all checkboxes when true. */
     isDisabled?: boolean;
     /** Placeholder shown in the input when no items are selected. Defaults to the translated "Search" string. */
@@ -118,6 +133,10 @@ const props = defineProps<{
     noBorder?: boolean;
     /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */
     expandOnHover?: boolean;
+    /** When true, options selected at the moment the dropdown opens are moved to the
+     *  top of the list. This is a snapshot taken at open time — it does not live-reorder
+     *  while the dropdown stays open, only on the next closed→open transition. */
+    pullSelectedToTop?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -166,11 +185,35 @@ function updateDropdownPosition(): void {
 }
 const visibleCount = ref(2);
 
+// Selection snapshot captured the instant the dropdown opens, used only to freeze the
+// sort order when pullSelectedToTop is set — does not react to later `selected` changes
+// while the dropdown stays open.
+const pinnedSnapshot = ref<T[]>([]);
+
+// Selected values not present in `options` — only populated when allowCustomValue is set,
+// so a custom value typed via handleCustomValueEnter still shows (checked) in the dropdown.
+const customSelectedOptions = computed<T[]>(() => {
+    if (!props.allowCustomValue) { return []; }
+    return (props.selected ?? []).filter((item) => !isInOptions(item));
+});
+
+const visibleOptions = computed<T[]>(() => {
+    const query = searchQuery.value.toLowerCase();
+    const filteredCustom = query
+        ? customSelectedOptions.value.filter((option) => getLabel(option).toLowerCase().includes(query))
+        : customSelectedOptions.value;
+    const combined = [...displayedOptions.value, ...filteredCustom];
+    if (!props.pullSelectedToTop) {
+        return combined;
+    }
+    return [...combined.filter(isPinned), ...combined.filter((option) => !isPinned(option))];
+});
+
 const allSelected = computed(() => {
-    if (displayedOptions.value.length === 0) {
+    if (visibleOptions.value.length === 0) {
         return false;
     }
-    return displayedOptions.value.every((option) => isSelected(option));
+    return visibleOptions.value.every((option) => isSelected(option));
 });
 
 const hasSelected = computed(() => (props.selected?.length ?? 0) > 0);
@@ -195,6 +238,22 @@ function isSelected(option: T): boolean {
     }
 }
 
+function isInOptions(option: T): boolean {
+    if (props.optionKey) {
+        return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);
+    } else {
+        return props.options.includes(option);
+    }
+}
+
+function isPinned(option: T): boolean {
+    if (props.optionKey) {
+        return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);
+    } else {
+        return pinnedSnapshot.value.includes(option);
+    }
+}
+
 function toggleOption(option: T): void {
     const current = props.selected ?? [];
     if (isSelected(option)) {
@@ -208,16 +267,27 @@ function toggleOption(option: T): void {
     }
 }
 
+function handleCustomValueEnter(): void {
+    if (!props.allowCustomValue) { return; }
+    const value = searchQuery.value.trim();
+    if (!value) { return; }
+    const customOption = value as unknown as T;
+    if (!isSelected(customOption)) {
+        emit('update:selected', [...(props.selected ?? []), customOption]);
+    }
+    searchQuery.value = '';
+}
+
 function toggleAll(val: boolean): void {
     const current = props.selected ?? [];
     if (val) {
-        const toAdd = displayedOptions.value.filter((option: T) => !isSelected(option));
+        const toAdd = visibleOptions.value.filter((option: T) => !isSelected(option));
         emit('update:selected', [...current, ...toAdd]);
     } else {
         const key = props.optionKey;
         emit('update:selected', current.filter((item: T) => key
-            ? !displayedOptions.value.some((opt) => opt[key] === item[key])
-            : !displayedOptions.value.includes(item)
+            ? !visibleOptions.value.some((opt) => opt[key] === item[key])
+            : !visibleOptions.value.includes(item)
         ));
     }
 }
@@ -287,6 +357,7 @@ watch(() => props.selected, updateVisibleCount);
 
 watch(isOpen, (val) => {
     if (val) {
+        pinnedSnapshot.value = [...(props.selected ?? [])];
         nextTick(updateDropdownPosition);
     } else {
         nextTick(updateVisibleCount);
@@ -403,4 +474,10 @@ watch(isOpen, (val) => {
         padding: 0.25rem 0.5rem;
     }
 }
+
+hr {
+    border-top: 1px solid var(--octopus-secondary);
+    border-bottom: none;
+    margin: 0;
+}
 </style>

package/src/components/form/OctopusSelect.vue

@@ -51,7 +51,7 @@
             >
                 <div class="octopus-select-options">
                     <button
-                        v-for="(option, index) in displayedOptions"
+                        v-for="(option, index) in visibleOptions"
                         :key="index"
                         class="octopus-select-option"
                         :class="{ selected: isSelected(option) }"
@@ -59,7 +59,7 @@
                     >
                         {{ getLabel(option) }}
                     </button>
-                    <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                    <span v-if="visibleOptions.length === 0" class="text-indic px-2">
                         {{ t('No elements found. Consider changing the search query.') }}
                     </span>
                 </div>
@@ -93,6 +93,10 @@ const props = withDefaults(defineProps<{
     noBorder?: boolean;
     /** When true (default), clicking the already-selected option clears the selection. */
     allowDeselect?: boolean;
+    /** When true, the option matching the current value is moved to the top of the list
+     *  the moment the dropdown opens. This is a snapshot taken at open time — it does not
+     *  live-reorder while the dropdown stays open, only on the next closed→open transition. */
+    pullSelectedToTop?: boolean;
 }>(), {
     label: undefined,
     value: undefined,
@@ -144,8 +148,14 @@ function updateDropdownPosition(): void {
     };
 }
 
+// Value snapshot captured the instant the dropdown opens, used only to freeze the
+// sort order when pullSelectedToTop is set — does not react to later `value` changes
+// while the dropdown stays open.
+const pinnedValue = ref<T | undefined>(undefined);
+
 watch(isOpen, (val) => {
     if (val) {
+        pinnedValue.value = props.value;
         nextTick(updateDropdownPosition);
     }
 });
@@ -175,6 +185,23 @@ function isSelected(option: T): boolean {
     return toRaw(props.value as object) === toRaw(option as object);
 }
 
+function isPinned(option: T): boolean {
+    if (pinnedValue.value === undefined) {
+        return false;
+    }
+    if (props.optionKey) {
+        return pinnedValue.value[props.optionKey] === option[props.optionKey];
+    }
+    return toRaw(pinnedValue.value as object) === toRaw(option as object);
+}
+
+const visibleOptions = computed<T[]>(() => {
+    if (!props.pullSelectedToTop) {
+        return displayedOptions.value;
+    }
+    return [...displayedOptions.value.filter(isPinned), ...displayedOptions.value.filter((option) => !isPinned(option))];
+});
+
 function selectOption(option: T): void {
     if (isSelected(option) && props.allowDeselect) {
         emit('update:value', undefined);