@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/pages/ParticipantPage.vue

@@ -2,16 +2,17 @@
   <section class="page-box">
     <template v-if="loaded && !error && participant">
       <h1>
-        {{ $t("Animator") }}
+        {{ t("Animator") }}
       </h1>
       <section class="d-flex flex-column align-items-center mb-3">
         <img
           v-lazy="useProxyImageUrl(participant.imageUrl, '200')"
           width="200"
           height="200"
-          role="presentation"
+          aria-hidden="true"
+        alt=""
           
-          :title="$t('Animator image', { name: name })"
+          :title="t('Animator image', { name: name })"
           class="img-box mb-3"
         />
         <h2 class="text-capitalize">
@@ -24,13 +25,13 @@
         />
         <!-- eslint-enable -->
         <EditBox
-          v-if="editRight && pageParameters.isEditBox"
+          v-if="editRight && !state.generalParameters.podcastmaker"
           :participant="participant"
           class="w-100 justify-content-center"
           @participant-update="updateParticipant"
         />
         <ShareSocialsButtons
-          v-if="pageParameters.isShareButtons"
+          v-if="state.podcastPage.ShareButtons"
           class="w-100"
           :organisation-id="participant.orga.id"
         >
@@ -46,25 +47,29 @@
       </section>
       <!-- productorId define to avoid overwrite #12817 -->
       <PodcastFilterList
+        v-if="isInit"
+        v-model:query="searchPattern"
+        :first="paginateFirst"
+        :size="ps"
         :participant-id="participantId"
         :name="name"
         :category-filter="true"
         :productor-id="['']"
         :reload="reload"
         :show-count="true"
+        :force-update-parameters="true"
       />
     </template>
     <ClassicLoading
-      :loading-text="!loaded ? $t('Loading content ...') : undefined"
-      :error-text="error ? $t(`Animator doesn't exist`) : undefined"
+      :loading-text="!loaded ? t('Loading content ...') : undefined"
+      :error-text="error ? t(`Animator doesn't exist`) : undefined"
     />
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../api/classicApi";
 import { state } from "../../stores/ParamSdkStore";
-import { useApiStore } from "../../stores/ApiStore";
 import { useFilterStore } from "../../stores/FilterStore";
 import displayHelper from "../../helper/displayHelper";
 import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
@@ -73,9 +78,11 @@ import {useOrgaComputed} from "../composable/useOrgaComputed";
 import {useErrorHandler} from "../composable/useErrorHandler";
 import { Participant } from "@/stores/class/general/participant";
 import ClassicLoading from "../form/ClassicLoading.vue";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { computed, defineAsyncComponent, ref, Ref, watch } from "vue";
 import { AxiosError } from "axios";
-import { mapState } from "pinia";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 const ShareSocialsButtons = defineAsyncComponent(
   () => import("../display/sharing/ShareSocialsButtons.vue"),
 );
@@ -86,106 +93,85 @@ const EditBox = defineAsyncComponent(
   () => import("@/components/display/edit/EditBox.vue"),
 );
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
-export default defineComponent({
-  components: {
-    ShareSocialsButtons,
-    PodcastFilterList,
-    EditBox,
-    ClassicLoading,
-    ShareAnonymous
-  },
-  props: {
-    participantId: { default: undefined, type: Number },
-  },
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    const {  isEditRights } = useOrgaComputed();
-    const { updatePathParams } = useSeoTitleUrl();
-    const {handle403} = useErrorHandler();
-    return { useProxyImageUrl, isEditRights, updatePathParams, handle403 }
-  },
-  data() {
-    return {
-      loaded: false as boolean,
-      participant: undefined as Participant | undefined,
-      error: false as boolean,
-      reload: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    ...mapState(useApiStore, ["apiUrl"]),
-    pageParameters() {
-      return {
-        isEditBox: !state.generalParameters.podcastmaker as boolean,
-        isShareButtons: state.podcastPage.ShareButtons as boolean,
-      };
-    },
-    rssUrl(): string {
-      return `${this.apiUrl}rss/participant/${this.participantId}`;
-    },
-    description(): string {
-      return this.participant?.description ?? "";
-    },
-    name(): string {
-      return `${this.participant?.firstName ?? ""} ${
-        this.participant?.lastName ?? ""
-      }`.trim();
-    },
-    editRight(): boolean {
-      return this.isEditRights(this.participant?.orga?.id);
-    },
-  },
-  watch: {
-    participant: {
-      deep: true,
-      handler() {
-        this.reload = !this.reload;
-      },
-    },
-    participantId: {
-      immediate: true,
-      handler() {
-        this.getParticipantDetails();
-      },
-    },
-  },
-  methods: {
-    urlify(text:string|undefined){
-      return displayHelper.urlify(text);
-    },
-    initError(): void {
-      this.error = true;
-      this.loaded = true;
-    },
-    async getParticipantDetails(): Promise<void> {
-      this.loaded = false;
-      try {
-        const data = await classicApi.fetchData<Participant>({
-          api: 0,
-          path: "participant/" + this.participantId,
-        });
-        if (
-          "PUBLIC" !== data?.orga?.privacy &&
-          this.filterOrgaId !== data?.orga?.id &&
-          this.$route.query.productor !== data?.orga?.id
-        ) {
-          this.initError();
-          return;
-        }
-        this.updateParticipant(data);
-        this.loaded = true;
-      } catch (error) {
-        this.handle403(error as AxiosError);
-        this.initError();
-      }
-    },
-    updateParticipant(participant: Participant): void {
-      this.participant = participant;
-      this.updatePathParams(this.name);
-    },
-  },
+
+
+//Props
+const props = defineProps({
+  participantId: { default: undefined, type: Number },
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeQuery: { default: "", type: String },
 });
+
+
+//Data
+const loaded = ref(false);
+const error = ref(false);
+const reload = ref(false);
+const participant: Ref<Participant | undefined> = ref(undefined);
+
+
+//Composables
+const route = useRoute();
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+const {  isEditRights } = useOrgaComputed();
+const { updatePathParams } = useSeoTitleUrl();
+const {handle403} = useErrorHandler();
+const filterStore = useFilterStore();
+const {
+  searchPattern,
+  paginateFirst,
+  isInit
+} = useSimplePageParam(props, true);
+
+
+//Computed
+const description = computed(() =>participant.value?.description ?? "");
+const name = computed(() =>`${participant.value?.firstName ?? ""} ${participant.value?.lastName ?? ""}`.trim());
+const editRight = computed(() =>isEditRights(participant.value?.orga?.id));
+
+
+//Watch
+watch(participant, () => {reload.value = !reload.value}, {deep: true});
+watch(()=>props.participantId, () =>getParticipantDetails(), {immediate: true});
+
+
+
+//Methods
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
+function  initError(): void {
+  error.value = true;
+  loaded.value = true;
+}
+async function getParticipantDetails(): Promise<void> {
+  loaded.value = false;
+  try {
+    const data = await classicApi.fetchData<Participant>({
+      api: 0,
+      path: "participant/" + props.participantId,
+    });
+    if (
+      "PUBLIC" !== data?.orga?.privacy &&
+      filterStore.filterOrgaId !== data?.orga?.id &&
+      route.query.productor !== data?.orga?.id
+    ) {
+      initError();
+      return;
+    }
+    updateParticipant(data);
+    loaded.value = true;
+  } catch (error) {
+    handle403(error as AxiosError);
+    initError();
+  }
+}
+function updateParticipant(participantUpdated: Participant): void {
+  participant.value = participantUpdated;
+  updatePathParams(name.value);
+}
 </script>
 
 <style lang="scss">

package/src/components/pages/ParticipantsPage.vue

@@ -20,6 +20,7 @@ import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 import ParticipantList from "../display/participant/ParticipantList.vue";
 import ProductorSearch from "../display/filter/ProductorSearch.vue";
 
+//Props
 const props = defineProps({
   pr: { default: 0, type: Number },
   ps: { default: 30, type: Number },
@@ -27,6 +28,8 @@ const props = defineProps({
   routeQuery: { default: "", type: String },
 });
 
+
+//Composables
 const {
   searchPattern,
   organisationId,

package/src/components/pages/PlaylistPage.vue

@@ -17,9 +17,9 @@
               v-lazy="useProxyImageUrl(playlist.imageUrl, '250')"
               width="250"
               height="250"
-              role="presentation"
-              
-              :title="$t('Playlist name image', { name: name })"
+              aria-hidden="true"
+              alt=""
+              :title="t('Playlist name image', { name: name })"
               class="img-box float-start me-3 mb-3"
             />
             <div class="d-flex align-items-center justify-content-between">
@@ -37,25 +37,30 @@
           :organisation-id="authOrgaId"
         />
         <ShareSocialsButtons
-          v-if="pageParameters.isShareButtons"
+          v-if="state.podcastPage.ShareButtons"
           :organisation-id="playlist.organisation.id"
         />
         <section class="module-box">
-          <PodcastList :playlist="playlist" />
+          <PodcastList 
+            v-if="isInit"
+            v-model:query="searchPattern"
+            :first="paginateFirst"
+            :size="ps"
+            :playlist="playlist"
+          />
         </section>
       </div>
     </template>
     <ClassicLoading
-      :loading-text="!loaded ? $t('Loading content ...') : undefined"
-      :error-text="error ? $t(`Playlist doesn't exist`) : undefined"
+      :loading-text="!loaded ? t('Loading content ...') : undefined"
+      :error-text="error ? t(`Playlist doesn't exist`) : undefined"
     />
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useAuthStore } from "../../stores/AuthStore";
-import { mapActions, mapState } from "pinia";
 import {useOrgaComputed} from "../composable/useOrgaComputed";
 import {useSeoTitleUrl} from "../composable/route/useSeoTitleUrl";
 import ClassicLoading from "../form/ClassicLoading.vue";
@@ -67,8 +72,11 @@ import displayHelper from "../../helper/displayHelper";
 import {useImageProxy} from "../composable/useImageProxy";
 import {useErrorHandler} from "../composable/useErrorHandler";
 import { Playlist } from "@/stores/class/general/playlist";
-import { defineComponent, defineAsyncComponent } from "vue";
+import {defineAsyncComponent, ref, Ref, computed, watch, onBeforeUnmount } from "vue";
 import { AxiosError } from "axios";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
 const ShareSocialsButtons = defineAsyncComponent(
   () => import("../display/sharing/ShareSocialsButtons.vue"),
 );
@@ -82,112 +90,99 @@ const PodcastmakerHeader = defineAsyncComponent(
   () => import("../display/podcastmaker/PodcastmakerHeader.vue"),
 );
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
-export default defineComponent({
-  components: {
-    ShareSocialsButtons,
-    EditBox,
-    PodcastList,
-    SharePlayer,
-    ClassicLoading,
-    PodcastmakerHeader,
-    ShareAnonymous
-  },
-
-  props: {
-    playlistId: { default: undefined, type: Number },
-  },
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
-    const { updatePathParams } = useSeoTitleUrl();
-    const {handle403} = useErrorHandler();
-    return { useProxyImageUrl, isPodcastmaker, isEditRights, authOrgaId, updatePathParams, handle403 }
-  },
-  data() {
-    return {
-      loaded: false as boolean,
-      playlist: undefined as Playlist | undefined,
-      error: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    ...mapState(useAuthStore, ["isRolePlaylists"]),
-    pageParameters() {
-      return {
-        isShareButtons: state.podcastPage.ShareButtons as boolean,
-      };
-    },
-    pageTitle(): string {
-      return this.playlistRadio
-        ? this.$t("Mix of episodes")
-        : this.$t("Playlist");
-    },
-    playlistRadio(): boolean {
-      return (
-        "AMBIANCE" === this.playlist?.ambianceType ||
-        "AMBIANCE_PROGRAMMED" === this.playlist?.ambianceType
-      );
-    },
-    name(): string {
-      return this.playlist?.title ?? "";
-    },
-    description(): string {
-      return this.playlist?.description ?? "";
-    },
-    editRight(): boolean {
-      return this.isEditRights(
-        this.playlist?.organisation?.id,
-        this.isRolePlaylists,
-      );
-    },
-  },
-  watch: {
-    playlistId: {
-      immediate: true,
-      handler() {
-        this.getPlaylistDetails();
-      },
-    },
-  },
-  beforeUnmount() {
-    this.contentToDisplayUpdate(null);
-  },
-
-  methods: {
-    ...mapActions(useGeneralStore, ["contentToDisplayUpdate"]),
-    urlify(text:string|undefined){
-      return displayHelper.urlify(text);
-    },
-    initError(): void {
-      this.error = true;
-      this.loaded = true;
-    },
-    async getPlaylistDetails(): Promise<void> {
-      try {
-        this.loaded = false;
-        this.error = false;
-        this.playlist = await classicApi.fetchData<Playlist>({
-          api: 0,
-          path: "playlist/" + this.playlistId,
-        });
-        if (
-          (!this.editRight && this.playlistRadio) ||
-          ("PUBLIC" !== this.playlist.organisation?.privacy &&
-            this.filterOrgaId !== this.playlist.organisation?.id &&
-            this.$route.query.productor !== this.playlist.organisation?.id)
-        ) {
-          this.initError();
-          return;
-        }
-        this.contentToDisplayUpdate(this.playlist);
-        this.updatePathParams(this.playlist.title);
-      } catch (error) {
-        this.handle403(error as AxiosError);
-        this.initError();
-      }
-      this.loaded = true;
-    },
-  },
+
+
+//Props
+const props = defineProps({
+  playlistId: { default: undefined, type: Number },
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  routeQuery: { default: "", type: String },
+});
+
+
+//Data 
+const loaded = ref(false);
+const error = ref(false);
+const playlist : Ref<Playlist | undefined> = ref(undefined);
+
+
+//Composables
+const route = useRoute();
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+const { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();
+const { updatePathParams } = useSeoTitleUrl();
+const {handle403} = useErrorHandler();
+const authStore = useAuthStore();
+const filterStore = useFilterStore();
+const generalStore = useGeneralStore();
+const {
+  searchPattern,
+  paginateFirst,
+  isInit
+} = useSimplePageParam(props, true);
+
+
+//Computed
+const playlistRadio = computed(() =>{
+  return (
+    "AMBIANCE" === playlist.value?.ambianceType ||
+    "AMBIANCE_PROGRAMMED" === playlist.value?.ambianceType
+  );
 });
+const pageTitle = computed(() =>playlistRadio.value? t("Mix of episodes"): t("Playlist"));
+const name = computed(() =>playlist.value?.title ?? "");
+const description = computed(() =>playlist.value?.description ?? "");
+const editRight = computed(() =>{
+  return isEditRights(
+    playlist.value?.organisation?.id,
+    authStore.isRolePlaylists,
+  );
+});
+
+
+//Watch
+watch(()=>props.playlistId, () => {getPlaylistDetails()}, {immediate: true});
+
+
+onBeforeUnmount(() => {
+  generalStore.contentToDisplayUpdate(null);
+});
+
+
+//Methods
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
+function initError(): void {
+  error.value = true;
+  loaded.value = true;
+}
+async function getPlaylistDetails(): Promise<void> {
+  try {
+    loaded.value = false;
+    error.value = false;
+    playlist.value = await classicApi.fetchData<Playlist>({
+      api: 0,
+      path: "playlist/" + props.playlistId,
+    });
+    if (
+      (!editRight.value && playlistRadio.value) ||
+      ("PUBLIC" !== playlist.value.organisation?.privacy &&
+      filterStore.filterOrgaId !== playlist.value.organisation?.id &&
+      route.query.productor !== playlist.value.organisation?.id)
+    ) {
+      initError();
+      return;
+    }
+    generalStore.contentToDisplayUpdate(playlist.value);
+    updatePathParams(playlist.value.title);
+  } catch (error) {
+    handle403(error as AxiosError);
+    initError();
+  }
+  loaded.value = true;
+}
+
 </script>

package/src/components/pages/PlaylistsPage.vue

@@ -6,7 +6,7 @@
       class="d-flex justify-content-center my-3"
     >
       <div class="btn btn-primary">
-        {{ $t("Create playlist") }}
+        {{ t("Create playlist") }}
       </div>
     </router-link>
     <ProductorSearch
@@ -30,9 +30,12 @@ import PlaylistList from "../display/playlist/PlaylistList.vue";
 import { useAuthStore } from "../../stores/AuthStore";
 import { state } from "../../stores/ParamSdkStore";
 import {  computed, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
 const ProductorSearch = defineAsyncComponent(
   () => import("../display/filter/ProductorSearch.vue"),
 );
+
+//Props
 const props = defineProps({
   pr: { default: 0, type: Number },
   ps: { default: 30, type: Number },
@@ -40,6 +43,9 @@ const props = defineProps({
   routeQuery: { default: "", type: String },
 });
 
+
+//Composables
+const { t } = useI18n();
 const {
   searchPattern,
   organisationId,
@@ -47,9 +53,10 @@ const {
   paginateFirst,
   isInit
 } = useSimplePageParam(props);
-
 const authStore = useAuthStore();
 
+
+//Computed
 const isPodcastmaker = computed(() =>state.generalParameters.podcastmaker as boolean);
 const isRolePlaylists = computed(() =>authStore.isRolePlaylists);