@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/participant/ParticipantItem.vue

@@ -6,15 +6,16 @@
         params: { participantId: participant.participantId },
       }"
       class="mt-3 text-dark"
-      :title="$t('Participant name page', { name: name })"
+      :title="t('Participant name page', { name: name })"
     >
       <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 border"
       />
       <div class="d-flex align-items-center h4 justify-content-center mt-2">
@@ -22,7 +23,7 @@
           v-if="!activeParticipant && !isPodcastmaker && editRight"
           :size="16"
           class="text-danger me-1"
-          :title="$t('Participant have not podcasts')"
+          :title="t('Participant have not podcasts')"
         />
         {{ name }}
       </div>
@@ -51,87 +52,78 @@
   </article>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import AlertIcon from "vue-material-design-icons/Alert.vue";
 import classicApi from "../../../api/classicApi";
 import { Participant } from "@/stores/class/general/participant";
 import {useImageProxy} from "../../composable/useImageProxy";
 import displayHelper from "../../../helper/displayHelper";
 import {useOrgaComputed} from "../../composable/useOrgaComputed";
-import { defineComponent } from "vue";
+import { computed, onBeforeMount, onMounted, ref, useTemplateRef } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-export default defineComponent({
-  name: "ParticpantItem",
-  components: {
-    AlertIcon,
-  },
-  props: {
-    participant: { default: () => ({}), type: Object as () => Participant },
-  },
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    const { isPodcastmaker, isEditRights } = useOrgaComputed();
-    return { useProxyImageUrl, isPodcastmaker, isEditRights }
-  },
+import { useI18n } from "vue-i18n";
 
-  data() {
-    return {
-      activeParticipant: true as boolean,
-    };
-  },
-  computed: {
-    name(): string {
-      return `${this.participant.firstName ?? ""} ${
-        this.participant.lastName ?? ""
-      }`.trim();
-    },
-    editRight(): boolean {
-      if (!this.participant?.orga) {
-        return false;
-      }
-      return this.isEditRights(this.participant.orga.id);
-    },
-  },
+//Props 
+const props = defineProps({
+  participant: { default: () => ({}), type: Object as () => Participant },
+})
+ 
+//Data 
+const activeParticipant = ref(true);
 
-  created() {
-    if (!this.editRight) return;
-    this.hasPodcast();
-  },
-  mounted() {
-    const participantDesc = this.$refs.descriptionParticipant as HTMLElement;
-    const participantDescContainer = this.$refs
-      .descriptionParticipantContainer as HTMLElement;
-    if (
-      null !== participantDesc &&
-      null !== participantDescContainer &&
-      participantDesc.clientHeight > participantDescContainer.clientHeight
-    ) {
-      participantDescContainer.classList.add("after-element-description");
-    }
-  },
-  methods: {
-    urlify(text:string|undefined){
-      return displayHelper.urlify(text);
-    },
-    async hasPodcast(): Promise<void> {
-      const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
-        api: 0,
-        path: "podcast/search",
-        parameters: {
-          participantId: this.participant.participantId,
-          first: 0,
-          size: 0,
-          includeStatus: ["READY", "PROCESSING"],
-        },
-        specialTreatement: true,
-      });
-      if (0 === data.count) {
-        this.activeParticipant = false;
-      }
-    },
-  },
+//Composables
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+const { isPodcastmaker, isEditRights } = useOrgaComputed();
+
+//Computed
+const name = computed(() => `${props.participant.firstName ?? ""} ${props.participant.lastName ?? ""}`.trim());
+const editRight = computed(() => {
+  if (!props.participant?.orga) {
+    return false;
+  }
+  return isEditRights(props.participant.orga.id);
 });
+
+onBeforeMount(()=>{
+  if (!editRight.value) return;
+  hasPodcast();
+})
+
+onMounted(()=>{
+  const participantDesc = useTemplateRef('descriptionParticipant')?.value as HTMLElement;
+  const participantDescContainer = useTemplateRef('descriptionParticipantContainer')?.value as HTMLElement;
+
+  if (
+    null !== participantDesc &&
+    null !== participantDescContainer &&
+    participantDesc.clientHeight > participantDescContainer.clientHeight
+  ) {
+    participantDescContainer.classList.add("after-element-description");
+  }
+})
+
+//Methods
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
+async function hasPodcast(): Promise<void> {
+  const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
+    api: 0,
+    path: "podcast/search",
+    parameters: {
+      participantId: props.participant.participantId,
+      first: 0,
+      size: 0,
+      includeStatus: ["READY", "PROCESSING"],
+    },
+    specialTreatement: true,
+  });
+  if (0 === data.count) {
+    activeParticipant.value = false;
+  }
+}
 </script>
 <style lang="scss">
 .octopus-app .participant-item-container {

package/src/components/display/participant/ParticipantList.vue

@@ -6,14 +6,14 @@
     v-model:is-mobile="isMobile"
     :text-count="
       showCount && displayCount > 1
-        ? `${$t('Number participants', { nb: displayCount })} ${$t(
+        ? `${t('Number participants', { nb: displayCount })} ${t(
             'sort by score',
           )}`
         : undefined
     "
     :total-count="totalCount"
     :loading="loading"
-    :loading-text="loading ? $t('Loading participants ...') : undefined"
+    :loading-text="loading ? t('Loading participants ...') : undefined"
     :player-responsive="true"
   >
     <template #list>
@@ -30,7 +30,7 @@
                 name: 'participant',
                 params: { participantId: p.participantId },
               }"
-              :title="$t('Participant name page', { name: p.lastName })"
+              :title="t('Participant name page', { name: p.lastName })"
             >
               {{ p.lastName }}
             </router-link>
@@ -41,162 +41,137 @@
   </ListPaginate>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
 import ClassicLazy from "../../misc/ClassicLazy.vue";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
 import ParticipantItem from "./ParticipantItem.vue";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
 import {
   Participant,
   emptyParticipantData,
 } from "@/stores/class/general/participant";
-import { defineComponent } from "vue";
+import { computed, onBeforeMount, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-export default defineComponent({
-  name: "ParticipantList",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    ParticipantItem,
-    ListPaginate,
-    ClassicLazy,
-  },
 
-  props: {
-    first: { default: 0, type: Number },
-    size: { default: 30, type: Number },
-    query: { default: undefined, type: String },
-    organisationId: { default: undefined, type: String },
-    showCount: { default: false, type: Boolean },
-  },
+//Props 
+const props = defineProps({
+  first: { default: 0, type: Number },
+  size: { default: 30, type: Number },
+  query: { default: undefined, type: String },
+  organisationId: { default: undefined, type: String },
+  showCount: { default: false, type: Boolean },
+})
 
-  setup(){
-    const {handle403} = useErrorHandler();
-    return { handle403 }
-  },
 
-  data() {
-    return {
-      loading: true as boolean,
-      dfirst: this.first,
-      dsize: this.size,
-      totalCount: 0 as number,
-      displayCount: 0 as number,
-      participants: [] as Array<Participant>,
-      isMobile: false as boolean,
-    };
-  },
+//Data 
+const loading = ref(true);
+const dfirst = ref(props.first);
+const dsize = ref(props.size);
+const totalCount = ref(0);
+const displayCount = ref(0);
+const isMobile = ref(false);
+const participants: Ref<Array<Participant>> = ref([]);
 
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    displayArray(): Array<Participant> {
-      if (this.isMobile) {
-        return this.participants;
-      }
-      return this.participants.slice(
-        this.dfirst,
-        Math.min(this.dfirst + this.dsize, this.totalCount),
-      );
-    },
-    organisation(): string | undefined {
-      return this.organisationId ? this.organisationId : this.filterOrgaId;
-    },
-    changePaginate(): string {
-      return `${this.first}|${this.size}`;
-    },
-    sort(): string {
-      return !this.query ? "NAME" : "SCORE";
-    },
-  },
-  watch: {
-    changePaginate() {
-      this.dfirst = this.first;
-      this.dsize = this.size;
-    },
-    query(): void {
-      this.reloadList();
-    },
-    organisation(): void {
-      this.reloadList();
-    },
-    dsize(): void {
-      this.reloadList();
-    },
-    dfirst(): void {
-      if (
-        !this.participants[this.dfirst] ||
-        0 === this.participants[this.dfirst].participantId
+//Composables
+const { t } = useI18n();
+const {handle403} = useErrorHandler();
+const filterStore = useFilterStore();
+
+
+//Computed
+const organisation = computed(() => props.organisationId ? props.organisationId : filterStore.filterOrgaId);
+const displayArray = computed(() => {
+  if (isMobile.value) {
+    return participants.value;
+  }
+  return participants.value.slice(
+    dfirst.value,
+    Math.min(dfirst.value + dsize.value, totalCount.value),
+  );
+});
+const changePaginate = computed(() =>  `${props.first}|${props.size}`);
+const sort = computed(() =>  !props.query ? "NAME" : "SCORE");
+
+
+//Watch
+watch(changePaginate, () => {
+  dfirst.value = props.first;
+  dsize.value = props.size;
+});
+watch(()=>props.query, () =>  fetchContent(true));
+watch(organisation, () => fetchContent(true));
+watch(dsize, () => fetchContent(true));
+watch(dfirst, () => {
+  if (
+    !participants.value[dfirst.value] ||
+    0 === participants.value[dfirst.value].participantId
+  ) {
+    fetchContent(false);
+  }
+});
+
+onBeforeMount(()=>fetchContent(false))
+
+
+//Methods
+async function fetchContent(reset: boolean): Promise<void> {
+  loading.value = true;
+  try {
+    const data = await classicApi.fetchData<ListClassicReturn<Participant>>(
+      {
+        api: 0,
+        path: "participant/search",
+        parameters: {
+          first: reset? 0: dfirst.value,
+          size: dsize.value,
+          query: props.query,
+          organisationId: organisation.value,
+          sort: sort.value
+        },
+        specialTreatement: true,
+      },
+    );
+    if (reset) {
+      dfirst.value = 0;
+      participants.value.length = 0;
+    }
+    displayCount.value = data.count;
+    if (dfirst.value > participants.value.length) {
+      for (
+        let i = participants.value.length - 1,
+          len = dfirst.value + dsize.value;
+        i < len;
+        i++
       ) {
-        this.fetchContent(false);
+        participants.value.push(emptyParticipantData());
       }
-    },
-  },
-
-  created() {
-    this.fetchContent(true);
-  },
-  methods: {
-    reloadList() {
-      this.dfirst = 0;
-      this.fetchContent(true);
-    },
-    async fetchContent(reset: boolean): Promise<void> {
-      this.loading = true;
-      try {
-        const data = await classicApi.fetchData<ListClassicReturn<Participant>>(
-          {
-            api: 0,
-            path: "participant/search",
-            parameters: {
-              first: this.dfirst,
-              size: this.dsize,
-              query: this.query,
-              organisationId: this.organisation,
-              sort: this.sort
-            },
-            specialTreatement: true,
-          },
-        );
-        if (reset) {
-          this.participants.length = 0;
+    }
+    const responseParticipants = data.result.filter(
+      (p: Participant | null) => {
+        if (null === p) {
+          displayCount.value--;
         }
-        this.displayCount = data.count;
-        if (this.dfirst > this.participants.length) {
-          for (
-            let i = this.participants.length - 1,
-              len = this.dfirst + this.dsize;
-            i < len;
-            i++
-          ) {
-            this.participants.push(emptyParticipantData());
-          }
-        }
-        const responseParticipants = data.result.filter(
-          (p: Participant | null) => {
-            if (null === p) {
-              this.displayCount--;
-            }
-            return null !== p;
-          },
-        );
-        this.participants = this.participants
-          .slice(0, this.dfirst)
-          .concat(responseParticipants)
-          .concat(
-            this.participants.slice(
-              this.dfirst + this.dsize,
-              this.participants.length,
-            ),
-          );
-        this.totalCount = data.count;
-      } catch (error) {
-        this.handle403(error as AxiosError);
-      }
-      this.loading = false;
-    },
-  },
-});
+        return null !== p;
+      },
+    );
+    participants.value = participants.value
+      .slice(0, dfirst.value)
+      .concat(responseParticipants)
+      .concat(
+        participants.value.slice(
+          dfirst.value + dsize.value,
+          participants.value.length,
+        ),
+      );
+    totalCount.value = data.count;
+  } catch (error) {
+    handle403(error as AxiosError);
+  }
+  loading.value = false;
+}
 </script>

package/src/components/display/playlist/PlaylistItem.vue

@@ -5,12 +5,12 @@
         name: 'playlist',
         params: { playlistId: playlist.playlistId },
       }"
-      :title="$t('Playlist name page', { name: name })"
+      :title="t('Playlist name page', { name: name })"
       class="d-flex flex-grow-1 text-dark"
     >
       <div class="classic-element-text">
         <div v-if="!activePlaylist" class="sticker-empty-ressource">
-          {{ $t("Empty playlist") }}
+          {{ t("Empty playlist") }}
         </div>
         <div class="d-flex align-items-center element-name basic-line-clamp">
           {{ name }}
@@ -24,7 +24,7 @@
           <!-- eslint-enable -->
         </div>
         <router-link
-          v-if="!isPodcastmaker && playlist.organisation"
+          v-if="!state.generalParameters.podcastmaker && playlist.organisation"
           :to="{
             name: 'productor',
             params: { productorId: playlist.organisation.id },
@@ -38,63 +38,50 @@
         v-lazy="useProxyImageUrl(playlist.imageUrl, '250')"
         width="250"
         height="250"
-        role="presentation"
+        aria-hidden="true"
+        alt=""
         
-        :title="$t('Playlist name image', { name: name })"
+        :title="t('Playlist name image', { name: name })"
         class="img-box"
       />
     </router-link>
   </article>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { Playlist } from "@/stores/class/general/playlist";
 import { state } from "../../../stores/ParamSdkStore";
 import {useImageProxy} from "../../composable/useImageProxy";
 import displayHelper from "../../../helper/displayHelper";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PlaylistItem",
+import { computed, onMounted, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
 
-  props: {
-    playlist: { default: () => ({}), type: Object as () => Playlist },
-  },
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    return { useProxyImageUrl }
-  },
+//Props 
+const props = defineProps({
+  playlist: { default: () => ({}), type: Object as () => Playlist },
+})
 
-  computed: {
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
-    },
-    organisation(): string {
-      return this.playlist?.publisher?.organisation?.name ?? "";
-    },
-    description(): string {
-      return this.playlist.description ?? "";
-    },
-    name(): string {
-      return this.playlist.title;
-    },
-    activePlaylist(): boolean {
-      return 0 !== Object.keys(this.playlist.samplingViews ?? []).length;
-    },
-  },
-  mounted() {
-    const playlistDesc = this.$refs.descriptionPlaylist as HTMLElement;
-    const playlistDescContainer = this.$refs
-      .descriptionPlaylistContainer as HTMLElement;
-    if (playlistDesc?.clientHeight > playlistDescContainer?.clientHeight) {
-      playlistDescContainer.classList.add("after-element-description");
-    }
-  },
-  methods:{
-    urlify(text:string|undefined){
-      return displayHelper.urlify(text);
-    },
+//Composables
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+
+//Computed
+const description = computed(() => props.playlist.description ?? "");
+const name = computed(() => props.playlist.title ?? "");
+const activePlaylist = computed(() => 0 !== Object.keys(props.playlist.samplingViews ?? []).length);
+
+onMounted(()=>{
+  const playlistDesc = useTemplateRef('descriptionPlaylist')?.value as HTMLElement;
+  const playlistDescContainer = useTemplateRef('descriptionPlaylistContainer')?.value as HTMLElement;
+  if (playlistDesc?.clientHeight > playlistDescContainer?.clientHeight) {
+    playlistDescContainer.classList.add("after-element-description");
   }
-});
+})
+
+//Methods
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
 </script>
 <style lang="scss">
 .octopus-app .sticker-empty-ressource{