@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/pages/LivesPage.vue

@@ -1,27 +1,27 @@
 <template>
   <section class="page-box">
-    <template v-if="!filterOrgaId && !organisationId && !isPodcastmaker">
+    <template v-if="!filterStore.filterOrgaId && !organisationId && !state.generalParameters.podcastmaker">
       <div class="align-self-start fw-bold mb-2">
-        {{ $t("Please chose a productor") }}
+        {{ t("Please chose a productor") }}
       </div>
       <OrganisationChooser
-        :defaultanswer="$t('Please chose a productor')"
+        :defaultanswer="t('Please chose a productor')"
         @selected="onOrganisationSelected"
       />
     </template>
-    <template v-if="filterOrgaId || organisationId">
+    <template v-if="filterStore.filterOrgaId || organisationId">
       <LiveList :organisation-id="organisationId" />
       <RadioList v-if="!notRadios" :organisation-id="organisationId" />
     </template>
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { state } from "../../stores/ParamSdkStore";
 import { Organisation } from "@/stores/class/general/organisation";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, onMounted } from "vue";
 import { useFilterStore } from "../../stores/FilterStore";
-import { mapState } from "pinia";
+import { useI18n } from "vue-i18n";
 const LiveList = defineAsyncComponent(
   () => import("../display/live/LiveList.vue"),
 );
@@ -31,37 +31,35 @@ const RadioList = defineAsyncComponent(
 const OrganisationChooser = defineAsyncComponent(
   () => import("../display/organisation/OrganisationChooser.vue"),
 );
-export default defineComponent({
-  components: {
-    LiveList,
-    RadioList,
-    OrganisationChooser,
-  },
-  props: {
-    organisationId: { default: undefined, type: String },
-    productor: { default: undefined, type: String },
-    notRadios: { default: false, type: Boolean },
-  },
-  emits: ["update:organisationId"],
 
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
 
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
-    },
-  },
-  created() {
-    if (this.productor) {
-      this.$emit("update:organisationId", this.productor);
-    } else if (this.filterOrgaId) {
-      this.$emit("update:organisationId", this.filterOrgaId);
-    }
-  },
-  methods: {
-    onOrganisationSelected(organisation: Organisation | undefined): void {
-      this.$emit("update:organisationId", organisation?.id);
-    },
-  },
+//Props
+const props = defineProps({
+  organisationId: { default: undefined, type: String },
+  productor: { default: undefined, type: String },
+  notRadios: { default: false, type: Boolean },
 });
+
+
+//Emits
+const emit = defineEmits(["update:organisationId"]);
+
+
+//Composables
+const { t } = useI18n();
+const filterStore = useFilterStore();
+
+
+onMounted(() => {
+  if (props.productor) {
+    emit("update:organisationId", props.productor);
+  } else if (filterStore.filterOrgaId) {
+    emit("update:organisationId", filterStore.filterOrgaId);
+  }
+})
+
+//Methods
+function onOrganisationSelected(organisation: Organisation | undefined): void {
+  emit("update:organisationId", organisation?.id);
+}
 </script>

package/src/components/pages/MapPage.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="page-box map-page">
-    <component :is="titleTag">{{ $t("Site map") }}</component>
-    <nav :aria-label="$t('Site menu')" class="d-flex flex-column align-items-center">
+    <component :is="titleTag">{{ t("Site map") }}</component>
+    <nav :aria-label="t('Site menu')" class="d-flex flex-column align-items-center">
       <ul class="my-1">
         <template v-for="linkItem in siteMap" :key="linkItem.id">
           <li v-if="linkItem.condition" :id="linkItem.id" class="my-1">
@@ -24,14 +24,13 @@
   </section>
 </template>
 
-<script lang="ts">
-import { mapState } from "pinia";
+<script setup lang="ts">
 import { useAuthStore } from "../../stores/AuthStore";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { state } from "../../stores/ParamSdkStore";
-import { defineComponent } from "vue";
-import { Organisation } from "@/stores/class/general/organisation";
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
 interface LinkMapSite {
   id: string;
   title: string;
@@ -44,276 +43,245 @@ interface LinkMapSite {
     condition: boolean;
   }>;
 }
-export default defineComponent({
-  props: {
-    externLinks: { default: () => [], type: Array as () => Array<LinkMapSite> },
+
+
+//Props
+const props = defineProps({
+  externLinks: { default: () => [], type: Array as () => Array<LinkMapSite> },
     titleTag: { default: "h1", type: String },
-  },
+});
+
+//Data
+const studioAuthorized = ref(true);
+const radioAuthorized = ref(true);
+
 
-  data() {
-    return {
-      studioAuthorized: true as boolean,
-      radioAuthorized: true as boolean,
-    };
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+const filterStore = useFilterStore();
+const generalStore = useGeneralStore();
+
+
+//Computed
+const isAuthenticated = computed(() =>undefined !== authStore.authProfile?.userId);
+const isStudioAuth = computed(() =>(authStore.isRoleLive || authStore.isRoleContribution) && studioAuthorized.value);
+const isPodcastmaker = computed(() =>state.generalParameters.podcastmaker);
+const organisationsAvailable = computed(() =>authStore.authProfile?.organisations ?? []);
+const siteMap = computed(() =>[
+  ...contentSection.value,
+  ...props.externLinks,
+  ...userLinks.value,
+  ...adminSection.value,
+  ...footerLinks.value,
+]);
+const contentSection = computed(() =>[
+  {
+    title: t("Home"),
+    id: "link-page-home",
+    href: "/main/pub/home",
+    condition: true,
   },
-  computed: {
-    ...mapState(useGeneralStore, ["platformEducation"]),
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    ...mapState(useAuthStore, [
-      "authProfile",
-      "authOrgaId",
-      "authOrganisation",
-      "isRoleAdmin",
-      "isRoleAnimator",
-      "isRoleUsers",
-      "isRoleLive",
-      "isRoleContribution",
-      "isRoleComments",
-      "isRoleEditor",
-      "isRoleAnalytics",
-      "isRoleAdvertising",
-      "isRoleOrganisation",
-      "isRoleRadio",
-      "isGarRole",
-    ]),
-    isAuthenticated(): boolean {
-      return undefined !== this.authProfile?.userId;
-    },
-    isStudioAuth(): boolean {
-      return (
-        (this.isRoleLive || this.isRoleContribution) && this.studioAuthorized
-      );
-    },
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
+  {
+    title: isPodcastmaker.value? t("Live"): t("Radio & Live"),
+    id: "link-page-lives",
+    href: "/main/pub/lives",
+    condition: true,
+  },
+  {
+    title: t("Podcasts"),
+    id: "link-page-podcasts",
+    href: "/main/pub/podcasts",
+    condition: true,
+  },
+  {
+    title: t("Emissions"),
+    id: "link-page-emissions",
+    href: "/main/pub/emissions",
+    condition: true,
+  },
+  {
+    title: t("Speakers"),
+    id: "link-page-participants",
+    href: "/main/pub/participants",
+    condition: true,
+  },
+  {
+    title: t("Playlists"),
+    id: "link-page-playlists",
+    href: "/main/pub/playlists",
+    condition: true,
+  },
+  {
+    title: t("Productors"),
+    id: "link-page-productors",
+    href: "/main/pub/productors",
+    condition:!isPodcastmaker.value && (!filterStore.filterOrgaId || generalStore.platformEducation),
+  },
+]);
+const userLinks = computed(() =>[
+  {
+    title: t("Edit my profile"),
+    href: "/main/priv/edit/profile",
+    id: "link-page-profile",
+    condition: !isPodcastmaker.value && isAuthenticated.value,
+  },
+  {
+    title: t("Edit my organisation"),
+    href: "/main/priv/edit/organisation",
+    id: "link-page-organisation",
+    condition:
+      !isPodcastmaker.value &&
+      isAuthenticated.value &&
+      (authStore.isRoleOrganisation || 1 < organisationsAvailable.value.length),
+  },
+]);
+const footerLinks = computed(() =>{
+  if (isPodcastmaker.value || authStore.isGarRole) {
+    return [];
+  }
+  return [
+    {
+      title: t("Contact"),
+      href: "/main/pub/contact",
+      id: "link-page-contact",
+      condition: true,
     },
-    organisationsAvailable(): Array<Organisation> {
-      return this.authProfile?.organisations ?? [];
+    {
+      title: t("Term of use"),
+      href: "/main/pub/cgu",
+      id: "link-page-cgu",
+      condition: true,
     },
-    siteMap() {
-      return [
-        ...this.contentSection,
-        ...this.externLinks,
-        ...this.userLinks,
-        ...this.adminSection,
-        ...this.footerLinks,
-      ];
+    {
+      title: t("Used libraries"),
+      href: "/main/pub/libraries",
+      id: "link-page-libraries",
+      condition: true,
     },
-    contentSection() {
-      return [
+  ];
+});
+const adminSection = computed(() =>{
+  if (isPodcastmaker.value) {
+    return [];
+  }
+  return [
+    {
+      title: t("Welcome in the Backoffice"),
+      href: "/main/priv/backoffice",
+      id: "link-page-backoffice",
+      condition: isAuthenticated.value,
+      links: [
         {
-          title: this.$t("Home"),
-          id: "link-page-home",
-          href: "/main/pub/home",
-          condition: true,
+          title: t("Upload"),
+          href: "/main/priv/upload",
+          id: "link-page-upload",
+          condition: authStore.isRoleContribution,
         },
         {
-          title: this.isPodcastmaker
-            ? this.$t("Live")
-            : this.$t("Radio & Live"),
-          id: "link-page-lives",
-          href: "/main/pub/lives",
-          condition: true,
+          title: t("Media library"),
+          href: "/main/priv/media",
+          id: "link-page-media",
+          condition: isStudioAuth.value,
+        },
+        {
+          title: t("Studio"),
+          href: "/main/priv/records",
+          id: "link-page-records",
+          condition: isStudioAuth.value,
+        },
+        {
+          title: t("Radio planning"),
+          href: "/main/priv/radio/",
+          id: "link-page-radio",
+          condition: authStore.isRoleRadio && radioAuthorized.value,
         },
         {
-          title: this.$t("Podcasts"),
-          id: "link-page-podcasts",
+          title: t("Edit / Delete episodes"),
           href: "/main/pub/podcasts",
+          id: "link-page-edit-podcast",
           condition: true,
         },
         {
-          title: this.$t("Emissions"),
-          id: "link-page-emissions",
-          href: "/main/pub/emissions",
-          condition: true,
+          title: t("Handle my players"),
+          href: "/main/priv/players",
+          id: "link-page-players",
+          condition: authStore.isRoleEditor,
         },
         {
-          title: this.$t("Speakers"),
-          id: "link-page-participants",
-          href: "/main/pub/participants",
-          condition: true,
+          title: t("Monetization"),
+          href: "/main/priv/edit/adserv",
+          id: "link-page-adserv",
+          condition: authStore.isRoleAdvertising && !generalStore.platformEducation,
         },
         {
-          title: this.$t("Playlists"),
-          id: "link-page-playlists",
-          href: "/main/pub/playlists",
-          condition: true,
+          title: t("Handle FTP"),
+          href: "/main/priv/edit/ftp",
+          id: "link-page-ftp",
+          condition: authStore.isRoleEditor,
         },
         {
-          title: this.$t("Productors"),
-          id: "link-page-productors",
-          href: "/main/pub/productors",
-          condition:
-            !this.isPodcastmaker && (!this.filterOrgaId || this.platformEducation),
+          title: t("Topics and rubrics"),
+          href: "/main/priv/edit/rubrics",
+          id: "link-page-rubrics",
+          condition: authStore.isRoleEditor,
         },
-      ];
-    },
-    userLinks() {
-      return [
         {
-          title: this.$t("Edit my profile"),
-          href: "/main/priv/edit/profile",
-          id: "link-page-profile",
-          condition: !this.isPodcastmaker && this.isAuthenticated,
+          title: t("Handle RSS"),
+          href: "/main/priv/edit/rss",
+          id: "link-page-rss",
+          condition: authStore.isRoleEditor,
         },
         {
-          title: this.$t("Edit my organisation"),
-          href: "/main/priv/edit/organisation",
-          id: "link-page-organisation",
-          condition:
-            !this.isPodcastmaker &&
-            this.isAuthenticated &&
-            (this.isRoleOrganisation || 1 < this.organisationsAvailable.length),
+          title: t("Handle my participants"),
+          href: "/main/priv/participants/handle",
+          id: "link-page-edit-participants",
+          condition: authStore.isRoleEditor,
         },
-      ];
-    },
-    footerLinks() {
-      if (this.isPodcastmaker || this.isGarRole) {
-        return [];
-      }
-      return [
         {
-          title: this.$t("Contact"),
-          href: "/main/pub/contact",
-          id: "link-page-contact",
-          condition: true,
+          title: t("Handle comments"),
+          href: "/main/priv/comments",
+          id: "link-page-comments",
+          condition: authStore.isRoleComments,
         },
         {
-          title: this.$t("Term of use"),
-          href: "/main/pub/cgu",
-          id: "link-page-cgu",
-          condition: true,
+          title: t("See my statistics"),
+          href: "/main/priv/show/stats",
+          id: "link-page-stats",
+          condition: authStore.isRoleAnalytics,
+        },
+        {
+          title: t("Organisations management"),
+          href: "/main/priv/edit/contract",
+          id: "link-page-contract",
+          condition: authStore.isRoleAdmin,
         },
         {
-          title: this.$t("Used libraries"),
-          href: "/main/pub/libraries",
-          id: "link-page-libraries",
+          title: t("My account"),
+          href: "/main/priv/account",
+          id: "link-page-account",
           condition: true,
         },
-      ];
-    },
-    adminSection() {
-      if (this.isPodcastmaker) {
-        return [];
-      }
-      return [
         {
-          title: this.$t("Welcome in the Backoffice"),
-          href: "/main/priv/backoffice",
-          id: "link-page-backoffice",
-          condition: this.isAuthenticated,
-          links: [
-            {
-              title: this.$t("Upload"),
-              href: "/main/priv/upload",
-              id: "link-page-upload",
-              condition: this.isRoleContribution,
-            },
-            {
-              title: this.$t("Media library"),
-              href: "/main/priv/media",
-              id: "link-page-media",
-              condition: this.isStudioAuth,
-            },
-            {
-              title: this.$t("Studio"),
-              href: "/main/priv/records",
-              id: "link-page-records",
-              condition: this.isStudioAuth,
-            },
-            {
-              title: this.$t("Radio planning"),
-              href: "/main/priv/radio/",
-              id: "link-page-radio",
-              condition: this.isRoleRadio && this.radioAuthorized,
-            },
-            {
-              title: this.$t("Edit / Delete episodes"),
-              href: "/main/pub/podcasts",
-              id: "link-page-edit-podcast",
-              condition: true,
-            },
-            {
-              title: this.$t("Handle my players"),
-              href: "/main/priv/players",
-              id: "link-page-players",
-              condition: this.isRoleEditor,
-            },
-            {
-              title: this.$t("Monetization"),
-              href: "/main/priv/edit/adserv",
-              id: "link-page-adserv",
-              condition: this.isRoleAdvertising && !this.platformEducation,
-            },
-            {
-              title: this.$t("Handle FTP"),
-              href: "/main/priv/edit/ftp",
-              id: "link-page-ftp",
-              condition: this.isRoleEditor,
-            },
-            {
-              title: this.$t("Topics and rubrics"),
-              href: "/main/priv/edit/rubrics",
-              id: "link-page-rubrics",
-              condition: this.isRoleEditor,
-            },
-            {
-              title: this.$t("Handle RSS"),
-              href: "/main/priv/edit/rss",
-              id: "link-page-rss",
-              condition: this.isRoleEditor,
-            },
-            {
-              title: this.$t("Handle my participants"),
-              href: "/main/priv/participants/handle",
-              id: "link-page-edit-participants",
-              condition: this.isRoleEditor,
-            },
-            {
-              title: this.$t("Handle comments"),
-              href: "/main/priv/comments",
-              id: "link-page-comments",
-              condition: this.isRoleComments,
-            },
-            {
-              title: this.$t("See my statistics"),
-              href: "/main/priv/show/stats",
-              id: "link-page-stats",
-              condition: this.isRoleAnalytics,
-            },
-            {
-              title: this.$t("Organisations management"),
-              href: "/main/priv/edit/contract",
-              id: "link-page-contract",
-              condition: this.isRoleAdmin,
-            },
-            {
-              title: this.$t("My account"),
-              href: "/main/priv/account",
-              id: "link-page-account",
-              condition: true,
-            },
-            {
-              title: this.$t("Handle my users"),
-              href: "/main/priv/user/handle",
-              id: "link-page-users",
-              condition: this.isRoleUsers,
-            },
-          ],
+          title: t("Handle my users"),
+          href: "/main/priv/user/handle",
+          id: "link-page-users",
+          condition: authStore.isRoleUsers,
         },
-      ];
-    },
-  },
-  created() {
-    this.studioAuthorized = this.checkOrgaAttribute("studio.active");
-    this.radioAuthorized = this.checkOrgaAttribute("radio.active");
-  },
-  methods: {
-    checkOrgaAttribute(attribute: string): boolean {
-      return (
-        "true" == this.authOrganisation.attributes?.[attribute]?.toString()
-      );
+      ],
     },
-  },
+  ];
 });
+
+
+onMounted(() => {
+  studioAuthorized.value = checkOrgaAttribute("studio.active");
+  radioAuthorized.value = checkOrgaAttribute("radio.active");
+})
+
+
+//Methods
+function checkOrgaAttribute(attribute: string): boolean {
+  return "true" == authStore.authOrganisation.attributes?.[attribute]?.toString();
+}
 </script>

package/src/components/pages/PageLogout.vue

@@ -3,22 +3,19 @@
     class="page-box page-box-absolute page-logout"
   >
     <div class="logout-section">
-      <h1 class="mb-3">{{ $t("Logout") }}</h1>
+      <h1 class="mb-3">{{ t("Logout") }}</h1>
       <div class="loader"></div>
     </div>
   </section>
 </template>
 
-<script lang="ts">
-import { useFilterStore } from "../../stores/FilterStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PageNotFound",
-  computed: {
-    ...mapState(useFilterStore, ["filterIab"]),
-  },
-});
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+
+//Composables
+const { t } = useI18n();
+
 </script>
 <style lang="scss">
 .octopus-app .page-logout {

package/src/components/pages/PageNotFound.vue

@@ -4,20 +4,20 @@
     :style="backgroundStyle"
   >
     <div class="position-absolute module-box">
-      <h1>{{ $t("Oops") }}</h1>
-      <h2>{{ $t("The page you are looking for cannot be found") }}</h2>
+      <h1>{{ t("Oops") }}</h1>
+      <h2>{{ t("The page you are looking for cannot be found") }}</h2>
       <router-link
         class="btn btn-primary"
         :to="{
           name: 'home',
           query: {
             iabId: filterStore.filterIab?.id,
-            rubriquesId: rubriqueQueryParam,
+            rubriquesId: rubriqueQueryParam.value,
             productor: filterStore.filterOrgaId
           },
         }"
       >
-        {{ $t("Back to home") }}
+        {{ t("Back to home") }}
       </router-link>
     </div>
   </section>
@@ -27,11 +27,15 @@
 import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import { useFilterStore } from "../../stores/FilterStore";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
+//Composables
 const { rubriqueQueryParam } = useRubriquesFilterComputed();
-
 const filterStore = useFilterStore();
+const { t } = useI18n();
+
 
+//Computed
 const backgroundStyle = computed(() => "background-image: url('/img/404.svg');");
 
 </script>