@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/misc/FooterGarSection.vue

@@ -17,53 +17,45 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import downloadHelper from "../../helper/downloadHelper";
 import classicApi from "../../api/classicApi";
 import { Contract } from "../../stores/class/contract/contract";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { defineAsyncComponent, onMounted, ref, Ref } from "vue";
 import { useApiStore } from "../../stores/ApiStore";
-import { mapState } from "pinia";
 const ContractPreviewModal = defineAsyncComponent(
   () => import("./modal/ContractPreviewModal.vue"),
 );
-export default defineComponent({
-  name: "FooterGarSection",
-  components: {
-    ContractPreviewModal,
-  },
-  props: {
-    authOrgaId: { default: undefined, type: String },
-  },
 
-  data() {
-    return {
-      contracts: [] as Array<Contract>,
-      contractToDisplay: undefined as Contract | undefined,
-    };
-  },
-  computed: {
-    ...mapState(useApiStore, ["keycloakUrl"]),
-  },
-  created() {
-    this.fetchContracts();
-  },
-  methods: {
-    async fetchContracts() {
-      if (!this.authOrgaId) {
-        return;
-      }
-      this.contracts = await classicApi.fetchData({
-        api: 3,
-        path: `contract/query/organisation/${this.authOrgaId}?signedStatus=SIGNED`,
-      });
-    },
-    downloadContract(contract: Contract) {
-      if (contract) {
-        const url = this.keycloakUrl + "contract/" + contract.id;
-        downloadHelper.onDownload(url, "download" + contract.name + ".pdf");
-      }
-    },
-  },
-});
+//Props 
+const props = defineProps({
+  authOrgaId: { default: undefined, type: String },
+})
+
+
+//Data 
+const contractToDisplay: Ref<Contract | undefined> = ref(undefined);
+const contracts: Ref<Array<Contract>> = ref([]);
+
+//Composables
+const apiStore = useApiStore();
+
+onMounted(()=>fetchContracts())
+
+//Methods
+async function fetchContracts() {
+  if (!props.authOrgaId) {
+    return;
+  }
+  contracts.value = await classicApi.fetchData({
+    api: 3,
+    path: `contract/query/organisation/${props.authOrgaId}?signedStatus=SIGNED`,
+  });
+}
+function downloadContract(contract: Contract) {
+  if (contract) {
+    const url = apiStore.keycloakUrl + "contract/" + contract.id;
+    downloadHelper.onDownload(url, "download" + contract.name + ".pdf");
+  }
+}
 </script>

package/src/components/misc/FooterSection.vue

@@ -5,12 +5,12 @@
     role="contentinfo"
     class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
-    <div v-if="!isPodcastmaker" 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="isGarRole" :auth-orga-id="authOrgaId" />
-      <nav :aria-label="$t('Site menu')">
+      <FooterGarSection v-if="authStore.isGarRole" :auth-orga-id="authStore.authOrgaId" />
+      <nav :aria-label="t('Site menu')">
         <ul class="p-0 m-0">
           <li 
             v-for="link in routerLinkSecondArray"
@@ -30,7 +30,7 @@
         v-model:text-init="language"
         :display-label="false"
         id-select="language-chooser-select"
-        :label="$t('Change locale')"
+        :label="t('Change locale')"
         :transparent="true"
         :options="[
           { title: 'Deutsch', value: 'de' },
@@ -43,11 +43,11 @@
         class="my-1"
       />
       <OrganisationChooserLight
-        v-if="!isPodcastmaker && organisationId && authenticated"
+        v-if="!state.generalParameters.podcastmaker && organisationId && authenticated"
         page="footer"
         width="auto"
         class="my-1"
-        :defaultanswer="$t('No organisation filter')"
+        :defaultanswer="t('No organisation filter')"
         :value="organisationId"
         :reset="reset"
         @selected="onOrganisationSelected"
@@ -55,16 +55,16 @@
     </div>
     <div class="d-flex align-items-center">
       <div class="hosted-by">
-        {{ $t("Hosted by") }}<span class="ms-1 me-1 text-primary">Saooti</span>
+        {{ t("Hosted by") }}<span class="ms-1 me-1 text-primary">Saooti</span>
       </div>
 
-      <AcpmImage v-if="isGarRole" />
+      <AcpmImage v-if="authStore.isGarRole" />
       <a
         v-else
         href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
         rel="noreferrer noopener"
         target="_blank"
-        :title="$t('New window', {text: $t('Octopus is ACPM Podcast accredited')})"
+        :title="t('New window', {text: t('Octopus is ACPM Podcast accredited')})"
       >
         <AcpmImage />
       </a>
@@ -72,9 +72,8 @@
   </footer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import cookiesHelper from "../../helper/cookiesHelper";
-import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import ClassicSelect from "../form/ClassicSelect.vue";
 import AcpmImage from "./AcpmImage.vue";
 import { state } from "../../stores/ParamSdkStore";
@@ -83,136 +82,100 @@ import classicApi from "../../api/classicApi";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useAuthStore } from "../../stores/AuthStore";
-import { mapState, mapActions } from "pinia";
 import { Category } from "@/stores/class/general/category";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, Ref, ref, watch } from "vue";
 import { Organisation } from "@/stores/class/general/organisation";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 const OrganisationChooserLight = defineAsyncComponent(
   () => import("../display/organisation/OrganisationChooserLight.vue"),
 );
 const FooterGarSection = defineAsyncComponent(
   () => import("./FooterGarSection.vue"),
 );
-export default defineComponent({
-  name: "FooterSection",
-  components: {
-    ClassicSelect,
-    AcpmImage,
-    OrganisationChooserLight,
-    FooterGarSection,
-  },
+const i18n = useI18n();
+const { t, locale } = useI18n();
 
-  setup(){
-    const { rubriqueQueryParam } = useRubriquesFilterComputed();
-    return { rubriqueQueryParam }
-  },
-  data() {
-    return {
-      language: this.$i18n.locale,
-      organisationId: undefined as string | undefined,
-      reset: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(useGeneralStore, ["storedCategories", "platformEducation"]),
-    ...mapState(useFilterStore, ["filterOrgaId", "filterIab"]),
-    ...mapState(useAuthStore, ["isGarRole", "authOrgaId"]),
-    authenticated() {
-      return undefined !== this.authOrgaId;
-    },
-    routerLinkSecondArray() {
-      const links = [];
-      if (!this.isGarRole) {
-        links.push(
-          { title: this.$t("Contact"), routeName: "/main/pub/contact" },
-          {
-            title: this.$t("Used libraries"),
-            routeName: "/main/pub/libraries",
-          },
-          { title: this.$t("Term of use"), routeName: "/main/pub/cgu" },
-        );
-      }
-      links.push({ title: this.$t("Site map"), routeName: "/main/pub/map" });
-      return links;
-    },
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
-    },
-  },
-  watch: {
-    language() {
-      this.changeLanguage();
-    },
-    filterOrgaId: {
-      immediate: true,
-      handler() {
-        if (this.filterOrgaId) {
-          this.organisationId = this.filterOrgaId;
-        } else {
-          this.reset = !this.reset;
-        }
-      },
-    },
-  },
-  methods: {
-    ...mapActions(useGeneralStore, ["storedUpdateCategories"]),
-    ...mapActions(useFilterStore, ["filterUpdateIab"]),
-    getQueriesRouter(routeName: string) {
-      if (
-        "podcasts" !== routeName &&
-        "emissions" !== routeName &&
-        "home" !== routeName
-      ) {
-        return { productor: this.filterOrgaId };
-      }
-      return {
-        productor: this.filterOrgaId,
-        iabId: this.filterIab?.id,
-        rubriquesId: this.rubriqueQueryParam,
-      };
-    },
-    changeLanguage(): void {
-      cookiesHelper.setCookie("octopus-language", this.language);
-      loadLocaleMessages(
-        this.$i18n,
-        this.language,
-        this.authenticated,
-        this.platformEducation,
-      );
-      classicApi
-        .fetchData<Array<Category>>({
-          api: 0,
-          path: `iab/list${this.authOrgaId ? "/" + this.authOrgaId : ""}`,
-          parameters: { lang: this.$i18n.locale },
-        })
-        .then((data: Array<Category>) => {
-          this.storedUpdateCategories(data);
-          if (this.filterIab) {
-            const category = this.storedCategories.filter((c: Category) => {
-              return c.id === this.filterIab?.id;
-            });
-            if (category.length) {
-              this.filterUpdateIab(category[0]);
-            }
-          }
-        });
-    },
-    async onOrganisationSelected(
-      organisation: Organisation | undefined,
-    ): Promise<void> {
-      if (organisation?.id) {
-        this.$router.push({
-          query: { ...this.$route.query, ...{ productor: organisation.id, o:undefined } },
-        });
-      }else{
-        this.organisationId = undefined;
-        this.$router.push({
-          query: { ...this.$route.query, ...{ productor: undefined } },
-        });
-      }
-    },
-  },
+//Data 
+const language = ref(locale);
+const reset = ref(false);
+const organisationId: Ref<string | undefined> = ref(undefined);
+
+//Composables
+const generalStore = useGeneralStore();
+const filterStore = useFilterStore();
+const authStore = useAuthStore();
+const router = useRouter();
+const route = useRoute();
+
+
+//Computed
+const authenticated = computed(() => undefined !== authStore.authOrgaId);
+const routerLinkSecondArray = computed(() => {
+  const links = [];
+  if (!authStore.isGarRole) {
+    links.push(
+      { title: t("Contact"), routeName: "/main/pub/contact" },
+      { title:t("Used libraries"), routeName: "/main/pub/libraries"},
+      { title: t("Term of use"), routeName: "/main/pub/cgu" },
+    );
+  }
+  links.push({ title: t("Site map"), routeName: "/main/pub/map" });
+  return links;
 });
+
+
+//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 {
+  cookiesHelper.setCookie("octopus-language", language.value);
+  loadLocaleMessages(
+    i18n,
+    language.value,
+    authenticated.value,
+    generalStore.platformEducation,
+  );
+  classicApi
+  .fetchData<Array<Category>>({
+    api: 0,
+    path: `iab/list${authStore.authOrgaId ? "/" + authStore.authOrgaId : ""}`,
+    parameters: { lang: language.value },
+  })
+  .then((data: Array<Category>) => {
+    generalStore.storedUpdateCategories(data);
+    if (filterStore.filterIab) {
+      const category = generalStore.storedCategories.filter((c: Category) => {
+        return c.id === filterStore.filterIab?.id;
+      });
+      if (category.length) {
+        filterStore.filterUpdateIab(category[0]);
+      }
+    }
+  });
+}
+async function onOrganisationSelected( organisation: Organisation | undefined): Promise<void> {
+  if (organisation?.id) {
+    router.push({
+      query: { ...route.query, ...{ productor: organisation.id, o:undefined } },
+    });
+  }else{
+    organisationId.value = undefined;
+    router.push({
+      query: { ...route.query, ...{ productor: undefined } },
+    });
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/misc/HomeDropdown.vue

@@ -2,15 +2,15 @@
   <div class="d-flex align-items-center">
     <button
       v-if="isAuthenticatedWithOrga"
-      :title="$t('My space')"
+      :title="t('My space')"
       class="btn admin-button hide-small-screen m-1 text-blue-octopus"
       @click="goToAdministration"
     >
       <AppsIcon :size="30" />
     </button>
     <router-link
-      v-if="isAuthenticatedWithOrga && isRoleContribution"
-      :title="$t('Upload')"
+      v-if="isAuthenticatedWithOrga && authStore.isRoleContribution"
+      :title="t('Upload')"
       to="/main/priv/upload"
       class="btn admin-button hide-small-screen m-1 text-blue-octopus"
     >
@@ -20,7 +20,7 @@
       v-show="!mobileMenuDisplay || isAuthenticatedWithOrga"
       id="home-dropdown"
       class="btn m-1 admin-button hide-small-screen text-blue-octopus"
-      :title="$t('User menu')"
+      :title="t('User menu')"
     >
       <AccountIcon :size="30" />
     </button>
@@ -32,28 +32,28 @@
       :left-pos="true"
       :is-top-layer="true"
     >
-      <nav :aria-label="$t('User menu')">
+      <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") }}
+                {{ t("Login") }}
               </a>
             </li>
             <li class="li-style-none">
               <router-link
-                v-if="!isPodcastmaker"
+                v-if="!state.generalParameters.podcastmaker"
                 class="octopus-dropdown-item"
                 to="/main/pub/create"
               >
-                {{ $t("Create an account") }}
+                {{ 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="!isPodcastmaker && routerBack.condition"
+                v-if="!state.generalParameters.podcastmaker && routerBack.condition"
                 :class="routerBack.class"
                 :to="routerBack.path"
               >
@@ -68,7 +68,7 @@
                   class="octopus-dropdown-item realLink"
                   rel="noreferrer noopener"
                   target="_blank"
-                  :title="$t('New window', {text: helpLink.title})"
+                  :title="t('New window', {text: helpLink.title})"
                 >
                   {{ helpLink.title }}
                   <OpenInNewIcon class="ms-1" :size="15"/>
@@ -78,17 +78,17 @@
             <hr />
             <li class="li-style-none">
               <a class="octopus-dropdown-item c-hand" href="/logout">
-                {{ $t("Logout") }}
+                {{ t("Logout") }}
               </a>
             </li>
           </template>
           <li class="li-style-none">
             <router-link
-              v-if="!isGarRole"
+              v-if="!authStore.isGarRole"
               class="octopus-dropdown-item"
               to="/main/pub/contact"
             >
-              {{ $t("Contact") }}
+              {{ t("Contact") }}
             </router-link>
           </li>
         </ul>
@@ -97,7 +97,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import OpenInNewIcon from "vue-material-design-icons/OpenInNew.vue";
 import AppsIcon from "vue-material-design-icons/Apps.vue";
 import AccountIcon from "vue-material-design-icons/Account.vue";
@@ -105,101 +105,79 @@ 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 { mapState } from "pinia";
-import { defineComponent } from "vue";
-import { Organisation } from "@/stores/class/general/organisation";
+import { computed } from "vue";
 import { useApiStore } from "../../stores/ApiStore";
-export default defineComponent({
-  name: "HomeDropdown",
-  components: {
-    ClassicPopover,
-    DownloadIcon,
-    AccountIcon,
-    AppsIcon,
-    OpenInNewIcon
-  },
-  props: {
-    isEducation: { default: false, type: Boolean },
-    mobileMenuDisplay: { default: false, type: Boolean },
-    scrolled: { default: false, type: Boolean },
-  },
-  computed: {
-    ...mapState(useAuthStore, [
-      "authOrgaId",
-      "authProfile",
-      "isGarRole",
-      "isRoleContribution",
-      "isRoleOrganisation",
-    ]),
-    ...mapState(useApiStore, ["frontendUrl"]),
-    pathLogin(){
-      return "/sso/login?redirect_url="+encodeURI(this.frontendUrl + this.$route.fullPath);
-    },
-    organisationsAvailable(): Array<Organisation> {
-      return this.authProfile.organisations ?? [];
-    },
-    helpLinks() {
-      if (this.isGarRole || this.isEducation) {
-        return [];
-      }
-      return [
-        {
-          title: this.$t("Help"),
-          href: "https://help.octopus.saooti.com/Aide/",
-        },
-        { title: this.$t("TutoMag"), href: "https://help.octopus.saooti.com/" },
-      ];
-    },
-    routerBackoffice() {
-      return [
-        {
-          title: this.$t("My space"),
-          class: "octopus-dropdown-item show-small-phone-flex",
-          path: "/main/priv/backoffice",
-          condition: this.isAuthenticatedWithOrga,
-        },
-        {
-          title: this.$t("Upload"),
-          class: "octopus-dropdown-item show-small-phone-flex",
-          path: "/main/priv/upload",
-          condition: this.isAuthenticatedWithOrga && this.isRoleContribution,
-        },
-        {
-          title: this.$t("Edit my profile"),
-          class: "octopus-dropdown-item",
-          path: "/main/priv/edit/profile",
-          condition: true,
-        },
-        {
-          title: this.$t("Edit my organisation"),
-          class: "octopus-dropdown-item",
-          path: "/main/priv/edit/organisation",
-          condition:
-            this.isAuthenticatedWithOrga &&
-            (this.isRoleOrganisation || 1 < this.organisationsAvailable.length),
-        },
-      ];
-    },
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+
+//Props 
+const props = 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,
     },
-    isAuthenticated(): boolean {
-      return undefined !== this.authProfile?.userId;
+    {
+      title: t("Upload"),
+      class: "octopus-dropdown-item show-small-phone-flex",
+      path: "/main/priv/upload",
+      condition: isAuthenticatedWithOrga.value && authStore.isRoleContribution,
     },
-    isAuthenticatedWithOrga(): boolean {
-      return undefined !== this.authOrgaId;
+    {
+      title: t("Edit my profile"),
+      class: "octopus-dropdown-item",
+      path: "/main/priv/edit/profile",
+      condition: true,
     },
-  },
-  methods: {
-    goToAdministration() {
-      if ("backoffice" !== this.$route.name) {
-        this.$router.push("/main/priv/backoffice");
-      } else if (window.history.length > 1) {
-        this.$router.go(-1);
-      } else {
-        this.$router.push("/");
-      }
+    {
+      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() {
+  if ("backoffice" !== route.name) {
+    router.push("/main/priv/backoffice");
+  } else if (window.history.length > 1) {
+    router.go(-1);
+  } else {
+    router.push("/");
+  }
+}
 </script>