@saooti/octopus-sdk 41.0.14-SNAPSHOT → 41.0.14

package/src/components/display/sharing/PlayerParameters.vue

@@ -36,12 +36,6 @@
         </div>
       </div>
       <ChooseEpisodesNumber v-else :episodes-number="episodesNumber" @update-number="emit('update:episodesNumber', $event)"/>
-      <ClassicCheckbox
-        :text-init="proceedReading"
-        id-checkbox="proceed-reading-checkbox"
-        :label="t('Proceed reading')"
-        @update:text-init="emit('update:proceedReading', $event)"
-      />
     </template>
     <ClassicCheckbox
       v-if="displayIsVisible"
@@ -104,7 +98,6 @@ const props = defineProps({
   displayArticleParam: { default: false, type: Boolean },
   displayIsVisible: { default: false, type: Boolean },
   displayInsertCode: { default: false, type: Boolean },
-  proceedReading: { default: true, type: Boolean },
   displayArticle: { default: true, type: Boolean },
   displayTranscript: { default: true, type: Boolean },
   displayWave: { default: true, type: Boolean },
@@ -118,7 +111,6 @@ const props = defineProps({
 //Emits
 const emit = defineEmits([
   "episodeChoiceDisplay",
-  "update:proceedReading",
   "update:isVisible",
   "update:episodesNumber",
   "update:displayArticle",

package/src/components/display/sharing/SharePlayer.vue

@@ -44,7 +44,6 @@
             v-model:display-article="displayArticle"
             v-model:display-transcript="displayTranscript"
             v-model:display-wave="displayWave"
-            v-model:proceed-reading="proceedReading"
             v-model:is-visible="isVisible"
             v-model:player-auto-play="playerAutoPlay"
             v-model:episodes-number="episodesNumber"
@@ -125,7 +124,6 @@ const iFrameModel = ref("default");
 const isShareModal = ref(false);
 const color = ref("#40a372");
 const theme = ref("#000000");
-const proceedReading = ref(true);
 const episodeChoiceDisplay = ref("number");
 const episodesNumber = ref(3);
 const isVisible = ref(false);
@@ -341,9 +339,6 @@ function addUrlParameters(url: Array<string>) {
   url.push(
     `&color=${color.value.substring(1)}&theme=${theme.value.substring(1)}`,
   );
-  if (!proceedReading.value) {
-    url.push("&proceed=false");
-  }
   if (!displayArticle.value && displayArticleParam.value) {
     url.push("&article=false");
   }

package/src/components/display/sharing/SubscribeButtons.vue

@@ -78,7 +78,7 @@ import RssIcon from "vue-material-design-icons/Rss.vue";
 import { useApiStore } from "../../../stores/ApiStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Emission } from "@/stores/class/general/emission";
-import { computed, Ref, ref, useTemplateRef, watch } from "vue";
+import { computed, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 type Link = {
   name: string;
@@ -204,7 +204,9 @@ const rssUrl = computed(() => {
 
 
 //Watch
-watch(()=>props.windowWidth, () =>resizeWindow(), {immediate: true});
+watch(()=>props.windowWidth, () =>resizeWindow());
+
+onMounted(()=>resizeWindow());
 
 
 //Methods

package/src/components/form/ClassicCheckbox.vue

@@ -2,7 +2,7 @@
   <div class="d-flex flex-nowrap align-items-center octopus-form-item">
     <div :class="isSwitch ? 'octopus-form-switch me-2' : ''">
       <input
-        :id="idCheckbox"
+        :id="computedIdCheckbox"
         :checked="textInit"
         type="checkbox"
         :disabled="isDisabled"
@@ -16,26 +16,35 @@
         v-if="isSwitch"
         class="slider btn-transparent"
         :title="label"
+        :disabled="isDisabled"
         @click="clickSlider"
         @keydown.space.prevent="clickSlider"
       />
     </div>
     <label
       class="c-hand"
-      :class="[classLabel, displayLabel ? '' : 'd-none']"
-      :for="idCheckbox"
-      >{{ label }}</label
+      :class="[classLabel, displayLabel ? '' : 'd-none', isDisabled ? 'disabled' : '']"
+      :for="computedIdCheckbox"
     >
+      {{ label }}
+    </label>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+
 //Props 
 const props = defineProps({
+  /** The ID for the checkbox input */
   idCheckbox: { default: "", type: String },
+  /** The label to display with the checkbox */
   label: { default: "", type: String },
+  /** Disables input */
   isDisabled: { default: false, type: Boolean },
+  /** The value of the checkbox */
   textInit: { default: false, type: Boolean },
+  /** If true, displays a switch instead of a checkbox */
   isSwitch: { default: false, type: Boolean },
   displayLabel: { default: true, type: Boolean },
   classLabel: { default: "", type: String },
@@ -45,6 +54,11 @@ const props = defineProps({
 //Emits
 const emit = defineEmits(["update:textInit", "clickAction"]);
 
+// Computed
+const computedIdCheckbox = computed(() => {
+  return props.idCheckbox || 'checkbox-' + getCurrentInstance()?.uid;
+});
+
 //Methods
 function emitClickAction(): void {
   emit("clickAction");
@@ -59,6 +73,12 @@ function clickSlider() {
 
 <style lang="scss">
 .octopus-app {
+
+  label.disabled {
+    color: var(--octopus-text-disabled);
+    cursor: default;
+  }
+
   .octopus-form-switch {
     position: relative;
     display: inline-block;
@@ -92,6 +112,11 @@ function clickSlider() {
       border-radius: 50%;
     }
 
+    .slider:disabled::before {
+      background-color: var(--octopus-text-disabled);
+      opacity: 0.6;
+    }
+
     input:checked + .slider {
       background-color: var(--octopus-primary);
     }

package/src/components/form/ClassicInputText.vue

@@ -8,13 +8,14 @@
       <component
         :is="isWysiwyg? 'div': 'label'"
         :class="[classLabel, displayLabel ? '' : 'd-none']"
-        :for="isWysiwyg ? '': inputId"
+        :for="isWysiwyg ? '': computedInputId"
         >{{ label }}
         <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
       </component>
+      <slot name="afterTitle"/>
       <template v-if="popover">
         <button
-          :id="'popover' + inputId"
+          :id="'popover' + computedInputId"
           :title="t('Help')"
           class="btn-transparent"
         >
@@ -22,7 +23,7 @@
         </button>
 
         <ClassicPopover
-          :target="'popover' + inputId"
+          :target="'popover' + computedInputId"
           popover-class="popover-z-index"
           :relative-class="popoverRelativeClass"
         >
@@ -31,11 +32,13 @@
           <!-- eslint-enable -->
         </ClassicPopover>
       </template>
+      <slot name="afterHelp"/>
     </div>
+    <slot name="betweenTitleInput"/>
     <input
       v-if="!isWysiwyg && !isTextarea"
       v-show="showField"
-      :id="inputId"
+      :id="computedInputId"
       ref="focusElement"
       v-model="textValue"
       :type="typeInput"
@@ -56,7 +59,7 @@
     <textarea
       v-else-if="isTextarea"
       v-show="showField"
-      :id="inputId"
+      :id="computedInputId"
       ref="focusElement"
       v-model="textValue"
       :data-selenium="dataSelenium"
@@ -110,10 +113,11 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
-import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from "vue";
 import { useI18n } from "vue-i18n";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
@@ -129,6 +133,7 @@ const ClassicEmojiPicker = defineAsyncComponent(
 const props = defineProps({
   inputId: { default: "", type: String },
   label: { default: "", type: String },
+  /** The input's value */
   textInit: { default: undefined, type: String },
   maxLength: { default: 0, type: Number },
   errorText: { default: "", type: String },
@@ -138,6 +143,7 @@ const props = defineProps({
   canBeNull: { default: false, type: Boolean },
   inputMaxLengthField: { default: undefined, type: Number },
   errorVariable: { default: true, type: Boolean },
+  /** Disable the text input */
   isDisable: { default: false, type: Boolean },
   indicText: { default: "", type: String },
   dataSelenium: { default: "", type: String },
@@ -168,6 +174,7 @@ const focusElementRef = useTemplateRef('focusElement');
 const { t } = useI18n();
 
 //Computed
+const computedInputId = computed(() => props.inputId || 'input-' + getCurrentInstance()?.uid);
 const isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);
 const countValue = computed(() => {
   if (textValue.value) {
@@ -236,6 +243,7 @@ function addEmojiSelected(emoji: string) {
   textValue.value = (textValue.value ?? "") + emoji;
 }
 </script>
+
 <style lang="scss">
 .octopus-app .classic-input-text {
   .text-indic {

package/src/components/form/ClassicMultiselect.vue

@@ -7,11 +7,31 @@
     }"
     :style="{ width: width, height: height }"
   >
-    <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
-      label
-    }}
-    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
-  </label>
+    <div class="d-flex align-items-center">
+      <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
+        label
+      }}
+      <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
+      </label>
+      <template v-if="popover">
+        <button
+          :id="'popover' + id"
+          :title="t('Help')"
+          class="btn-transparent"
+        >
+          <HelpCircleIcon :size="30" />
+        </button>
+        <ClassicPopover
+          :target="'popover' + id"
+          popover-class="popover-z-index"
+          :relative-class="popoverRelativeClass"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="popover" />
+          <!-- eslint-enable -->
+        </ClassicPopover>
+      </template>
+    </div>
     <vSelect
       v-model="optionSelected"
       :input-id="id"
@@ -77,12 +97,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, Ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import vSelect from "vue-select";
-
+import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
+);
 
 //Props 
 const props = defineProps({
@@ -106,6 +129,8 @@ const props = defineProps({
   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 },
 })
 
 //Emits
@@ -214,6 +239,9 @@ defineExpose({
     height: 100%;
   }
 
+  .vs__search, .vs__search:focus{
+    border: var(--vs-selected-border-width) solid transparent;
+  }
   .vs__search:focus {
     min-width: 150px;
   }

package/src/components/misc/ClassicAccordion.vue

@@ -20,11 +20,11 @@
           class="img-accordion"
           :src="imageUrl"
           aria-hidden="true"
-        alt=""
-          
+          alt=""
         />
-        <span class="flex-grow-1">{{ title }}</span>
-        <ChevronDownIcon :class="{ 'arrow-transform': isOpen }" />
+        <span>{{ title }}</span>
+        <slot name="afterTitle"/>
+        <ChevronDownIcon class="ms-auto" :class="{ 'arrow-transform': isOpen }" />
       </button>
       <div v-show="isOpen" class="body p-2">
         <slot />

package/src/components/misc/ClassicLazy.vue

@@ -4,9 +4,10 @@
     <slot v-else name="preview" />
   </div>
 </template>
+
 <script setup lang="ts">
 import { useIntersectionObserver } from "@vueuse/core";
-import { ref, nextTick, watch } from "vue";
+import { ref, nextTick, watch, onMounted } from "vue";
 
 //Props
 const props = defineProps({
@@ -37,8 +38,8 @@ const { pause, resume } = useIntersectionObserver(
     if (isIntersecting) {
       // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer
       clearTimeout(unrenderTimer);
-      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
 
+      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
       renderTimer = setTimeout(
         () => {
           shouldRender.value = true;
@@ -46,6 +47,7 @@ const { pause, resume } = useIntersectionObserver(
         },
         props.unrender ? 200 : 0,
       );
+
       if (!props.unrender) {
         pause();
       }
@@ -64,18 +66,27 @@ const { pause, resume } = useIntersectionObserver(
 );
 
 //Logic
-setTimeout(() => {
-  waitBeforeInit.value = false;
-}, props.initRenderDelay);
-if (props.renderOnIdle) {
-  onIdle(() => {
-    shouldRender.value = true;
-    emit("isRender", true);
-    if (!props.unrender) {
-      pause();
-    }
-  });
-}
+onMounted(() => {
+  if (props.initRenderDelay <= 0) {
+    // If there's no render delay, do not delay initialization
+    waitBeforeInit.value = false;
+  } else {
+    // Otherwise delay initialization
+    setTimeout(() => {
+      waitBeforeInit.value = false;
+    }, props.initRenderDelay);
+  }
+
+  if (props.renderOnIdle) {
+    onIdle(() => {
+      shouldRender.value = true;
+      emit("isRender", true);
+      if (!props.unrender) {
+        pause();
+      }
+    });
+  }
+});
 
 //Watch
 watch(

package/src/components/misc/ClassicNav.vue

@@ -1,3 +1,6 @@
+<!--
+  Component to make a tab-based navigation
+-->
 <template>
   <ul class="octopus-nav" :class="light ? 'light' : ''">
     <li

package/src/components/misc/ClassicSpinner.vue

@@ -16,7 +16,7 @@ defineProps({
   --size-spinner: 3rem;
   --size-spinner-section: calc(var(--size-spinner) / 20);
   --half-size-spinner: calc(var(--size-spinner) / 2);
-
+  
   color: #000000;
   display: inline-block;
   position: relative;

package/src/components/misc/FooterSection.vue

@@ -5,11 +5,17 @@
     role="contentinfo"
     class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
-    <div v-if="!state.generalParameters.podcastmaker" class="d-flex flex-column px-1">
+    <div
+      v-if="!state.generalParameters.podcastmaker"
+      class="d-flex flex-column px-1"
+    >
       <div class="text-dark my-1 special-select-align-magic-trick">
         &copy; Saooti 2025
       </div>
-      <FooterGarSection v-if="authStore.isGarRole" :auth-orga-id="authStore.authOrgaId" />
+      <FooterGarSection
+        v-if="authStore.isGarRole"
+        :auth-orga-id="authStore.authOrgaId"
+      />
       <nav :aria-label="t('Site menu')">
         <ul class="p-0 m-0">
           <li 
@@ -43,13 +49,11 @@
         class="my-1"
       />
       <OrganisationChooserLight
-        v-if="!state.generalParameters.podcastmaker && organisationId && authenticated"
+        v-if="!state.generalParameters.podcastmaker && authenticated"
         page="footer"
         width="auto"
         class="my-1"
         :defaultanswer="t('No organisation filter')"
-        :value="organisationId"
-        :reset="reset"
         @selected="onOrganisationSelected"
       />
     </div>
@@ -83,7 +87,7 @@ import { useFilterStore } from "../../stores/FilterStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useAuthStore } from "../../stores/AuthStore";
 import { Category } from "@/stores/class/general/category";
-import { computed, defineAsyncComponent, Ref, ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { Organisation } from "@/stores/class/general/organisation";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
@@ -98,8 +102,6 @@ const { t, locale } = useI18n();
 
 //Data 
 const language = ref(locale);
-const reset = ref(false);
-const organisationId: Ref<string | undefined> = ref(undefined);
 
 //Composables
 const generalStore = useGeneralStore();
@@ -127,15 +129,6 @@ const routerLinkSecondArray = computed(() => {
 
 //Watch
 watch(language, () => changeLanguage());
-watch(()=>filterStore.filterOrgaId, () => {
-  if (filterStore.filterOrgaId) {
-    organisationId.value = filterStore.filterOrgaId;
-  } else {
-    reset.value = !reset.value;
-  }
-}, {immediate: true});
-
-
 
 //Methods
 function changeLanguage(): void {
@@ -164,15 +157,20 @@ function changeLanguage(): void {
     }
   });
 }
+
+/**
+ * Select another organisation
+ * @param organisation The new organisation to focus on, or undefined to remove focus
+ */
 async function onOrganisationSelected( organisation: Organisation | undefined): Promise<void> {
+  // TODO use router utils
   if (organisation?.id) {
     router.push({
-      query: { ...route.query, ...{ productor: organisation.id, o:undefined } },
+      query: { ...route.query, ...{ productor: organisation.id, o:undefined, displayAll: "false" } },
     });
   }else{
-    organisationId.value = undefined;
     router.push({
-      query: { ...route.query, ...{ productor: undefined } },
+      query: { ...route.query, ...{ productor: undefined, displayAll: "true" } },
     });
   }
 }

package/src/components/misc/HomeDropdown.vue

@@ -32,143 +32,36 @@
       :left-pos="true"
       :is-top-layer="true"
     >
-      <nav :aria-label="t('User menu')">
-        <ul class="p-0 m-0">
-          <template v-if="!isAuthenticated">
-            <li class="li-style-none">
-              <a class="octopus-dropdown-item realLink" :href="pathLogin">
-                {{ t("Login") }}
-              </a>
-            </li>
-            <li class="li-style-none">
-              <router-link
-                v-if="!state.generalParameters.podcastmaker"
-                class="octopus-dropdown-item"
-                to="/main/pub/create"
-              >
-                {{ t("Create an account") }}
-              </router-link>
-            </li>
-          </template>
-          <template v-else>
-            <li v-for="routerBack in routerBackoffice" :key="routerBack.path" class="li-style-none">
-              <router-link
-                v-if="!state.generalParameters.podcastmaker && routerBack.condition"
-                :class="routerBack.class"
-                :to="routerBack.path"
-              >
-                {{ routerBack.title }}
-              </router-link>
-            </li>
-            <template v-if="helpLinks.length">
-              <hr />
-              <li v-for="helpLink in helpLinks" :key="helpLink.title" class="li-style-none">
-                <a
-                  :href="helpLink.href"
-                  class="octopus-dropdown-item realLink"
-                  rel="noreferrer noopener"
-                  target="_blank"
-                  :title="t('New window', {text: helpLink.title})"
-                >
-                  {{ helpLink.title }}
-                  <OpenInNewIcon class="ms-1" :size="15"/>
-                </a>
-              </li>
-            </template>
-            <hr />
-            <li class="li-style-none">
-              <a class="octopus-dropdown-item c-hand" href="/logout">
-                {{ t("Logout") }}
-              </a>
-            </li>
-          </template>
-          <li class="li-style-none">
-            <router-link
-              v-if="!authStore.isGarRole"
-              class="octopus-dropdown-item"
-              to="/main/pub/contact"
-            >
-              {{ t("Contact") }}
-            </router-link>
-          </li>
-        </ul>
-      </nav>
+      <UserButtonContent :isEducation="isEducation" :navLabel="t('User menu')"/>
     </ClassicPopover>
   </div>
 </template>
 
 <script setup lang="ts">
-import OpenInNewIcon from "vue-material-design-icons/OpenInNew.vue";
+import UserButtonContent from "./UserButtonContent.vue";
 import AppsIcon from "vue-material-design-icons/Apps.vue";
 import AccountIcon from "vue-material-design-icons/Account.vue";
 import DownloadIcon from "vue-material-design-icons/Download.vue";
-import { state } from "../../stores/ParamSdkStore";
 import ClassicPopover from "../misc/ClassicPopover.vue";
 import { useAuthStore } from "../../stores/AuthStore";
 import { computed } from "vue";
-import { useApiStore } from "../../stores/ApiStore";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
 //Props 
-const props = defineProps({
+defineProps({
   isEducation: { default: false, type: Boolean },
   mobileMenuDisplay: { default: false, type: Boolean },
-  scrolled: { default: false, type: Boolean },
 })
 
 //Composables
 const { t } = useI18n();
 const authStore = useAuthStore();
-const apiStore = useApiStore();
 const route = useRoute();
 const router = useRouter();
 
 //Computed
-const isAuthenticated = computed(() => undefined !== authStore.authProfile?.userId);
 const isAuthenticatedWithOrga = computed(() => undefined !== authStore.authOrgaId);
-const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
-const organisationsAvailable = computed(() =>  authStore.authProfile?.organisations ?? []);
-const helpLinks = computed(() => {
-  if (authStore.isGarRole || props.isEducation) {
-    return [];
-  }
-  return [
-    { title:t("Help"), href: "https://help.octopus.saooti.com/Aide/"},
-    { title: t("TutoMag"), href: "https://help.octopus.saooti.com/" },
-  ];
-});
-const routerBackoffice = computed(() => {
-  return [
-    {
-      title: t("My space"),
-      class: "octopus-dropdown-item show-small-phone-flex",
-      path: "/main/priv/backoffice",
-      condition: isAuthenticatedWithOrga.value,
-    },
-    {
-      title: t("Upload"),
-      class: "octopus-dropdown-item show-small-phone-flex",
-      path: "/main/priv/upload",
-      condition: isAuthenticatedWithOrga.value && authStore.isRoleContribution,
-    },
-    {
-      title: t("Edit my profile"),
-      class: "octopus-dropdown-item",
-      path: "/main/priv/edit/profile",
-      condition: true,
-    },
-    {
-      title: t("Edit my organisation"),
-      class: "octopus-dropdown-item",
-      path: "/main/priv/edit/organisation",
-      condition:
-      isAuthenticatedWithOrga.value &&
-        (authStore.isRoleOrganisation || 1 < organisationsAvailable.value.length),
-    },
-  ];
-});
-
 
 //Methods
 function goToAdministration() {