@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

package/src/components/display/emission/EmissionInlineList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex flex-column p-3 list-episode">
     <ClassicLoading
-      :loading-text="loading ? $t('Loading emissions ...') : undefined"
+      :loading-text="loading ? t('Loading emissions ...') : undefined"
     />
     <SwiperList
       v-if="(displayRubriquage && rubriques) || !(displayRubriquage && loaded)"
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import SwiperList from "../list/SwiperList.vue";
 import classicApi from "../../../api/classicApi";
 import EmissionPlayerItem from "./EmissionPlayerItem.vue";
@@ -36,116 +36,101 @@ import {useErrorHandler} from "../../composable/useErrorHandler";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { Emission } from "@/stores/class/general/emission";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
-import { defineComponent } from "vue";
+import { computed, onMounted, Ref, ref } from "vue";
 import { AxiosError } from "axios";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-export default defineComponent({
-  name: "EmissionInlineList",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    EmissionPlayerItem,
-    ClassicLoading,
-    SwiperList,
-  },
-  props: {
-    organisationId: { default: undefined, type: String },
+//Props 
+const props = defineProps({
+  organisationId: { default: undefined, type: String },
     href: { default: undefined, type: String },
     buttonText: { default: undefined, type: String },
     rubriqueId: { default: undefined, type: Number },
     rubriquageId: { default: undefined, type: Number },
     nbPodcasts: { default: undefined, type: Number },
     itemSize: { default: undefined, type: Number },
-  },
+})
 
-  setup(){
-    const {handle403} = useErrorHandler();
-    return { handle403 }
-  },
 
-  data() {
-    return {
-      loading: true as boolean,
-      allEmissions: [] as Array<Emission>,
-      rubriques: undefined as Array<Rubrique> | undefined,
-    };
-  },
+//Data 
+const loading = ref(true);
+const allEmissions: Ref<Array<Emission>> = ref([]);
+const rubriques: Ref<Array<Rubrique> | undefined> = ref(undefined);
 
-  computed: {
-    displayRubriquage(): number | undefined {
-      return state.emissionsPage.rubriquage;
-    },
-  },
 
-  mounted() {
-    this.fetchNext();
-    if (this.displayRubriquage) {
-      this.fetchRubriques();
-    }
-  },
-  methods: {
-    async fetchNext(): Promise<void> {
-      try {
-        const data = await classicApi.fetchData<ListClassicReturn<Emission>>({
-          api: 0,
-          path: "emission/search",
-          parameters: {
-            first: 0,
-            size: 12,
-            organisationId: this.organisationId,
-            rubriqueId: this.rubriqueId ? [this.rubriqueId] : [],
-            rubriquageId: this.rubriquageId ? [this.rubriquageId] : [],
-            sort: "LAST_PODCAST_DESC",
-          },
-          specialTreatement: true,
-        });
-        this.allEmissions = this.allEmissions.concat(
-          data.result.filter((em: Emission | null) => null !== em),
-        );
-        this.loading = false;
-      } catch (error) {
-        this.handle403(error as AxiosError);
-      }
-    },
+//Composables
+const { t } = useI18n();
+const {handle403} = useErrorHandler();
+
 
-    reset(): void {
-      this.loading = true;
-      this.allEmissions.length = 0;
-    },
-    async fetchRubriques(): Promise<void> {
-      const data = await classicApi.fetchData<Rubriquage>({
-        api: 0,
-        path: "rubriquage/" + this.displayRubriquage,
-      });
-      this.rubriques = data.rubriques;
-    },
-    rubriquesId(emission: Emission): string | undefined {
-      if (
-        !this.displayRubriquage ||
-        !emission.rubriqueIds ||
-        0 === emission.rubriqueIds.length ||
-        !this.rubriques ||
-        !this.rubriques.length
-      )
-        return undefined;
-      const rubrique = this.rubriques.find(
-        (element: Rubrique) =>
-          element.rubriqueId &&
-          emission.rubriqueIds.includes(element.rubriqueId) &&
-          element.rubriquageId === this.displayRubriquage,
-      );
-      if (rubrique) {
-        return rubrique.name;
-      }
-    },
-    mainRubriquage(emission: Emission): string {
-      return state.emissionsPage.mainRubrique &&
-        emission.rubriqueIds?.includes(state.emissionsPage.mainRubrique)
-        ? "partenaireRubrique"
-        : "";
-    },
-  },
-});
+//Computed
+const displayRubriquage = computed(() => state.emissionsPage.rubriquage);
+ 
+onMounted(()=>{
+  fetchNext();
+  if (displayRubriquage.value) {
+    fetchRubriques();
+  }
+})
+
+//Methods
+async function fetchNext(): Promise<void> {
+  try {
+    const data = await classicApi.fetchData<ListClassicReturn<Emission>>({
+      api: 0,
+      path: "emission/search",
+      parameters: {
+        first: 0,
+        size: 12,
+        organisationId: props.organisationId,
+        rubriqueId: props.rubriqueId ? [props.rubriqueId] : [],
+        rubriquageId: props.rubriquageId ? [props.rubriquageId] : [],
+        sort: "LAST_PODCAST_DESC",
+      },
+      specialTreatement: true,
+    });
+    allEmissions.value = allEmissions.value.concat(
+      data.result.filter((em: Emission | null) => null !== em),
+    );
+    loading.value = false;
+  } catch (error) {
+    handle403(error as AxiosError);
+  }
+}
+async function fetchRubriques(): Promise<void> {
+  const data = await classicApi.fetchData<Rubriquage>({
+    api: 0,
+    path: "rubriquage/" + displayRubriquage.value,
+  });
+  rubriques.value = data.rubriques;
+}
+function rubriquesId(emission: Emission): string | undefined {
+  if (
+    !displayRubriquage.value ||
+    !emission.rubriqueIds ||
+    0 === emission.rubriqueIds.length ||
+    !rubriques.value ||
+    !rubriques.value.length
+  )
+    return undefined;
+  const rubrique = rubriques.value.find(
+    (element: Rubrique) =>
+      element.rubriqueId &&
+      emission.rubriqueIds.includes(element.rubriqueId) &&
+      element.rubriquageId === displayRubriquage.value,
+  );
+  if (rubrique) {
+    return rubrique.name;
+  }
+}
+function mainRubriquage(emission: Emission): string {
+  return state.emissionsPage.mainRubrique &&
+    emission.rubriqueIds?.includes(state.emissionsPage.mainRubrique)
+    ? "partenaireRubrique"
+    : "";
+}
 </script>
 
 <style lang="scss">

package/src/components/display/emission/EmissionItem.vue

@@ -5,7 +5,7 @@
         name: 'emission',
         params: { emissionId: emission.emissionId },
       }"
-      :title="$t('Series name page', { name: emission.name })"
+      :title="t('Series name page', { name: emission.name })"
       class="d-flex flex-grow-1 text-dark"
     >
       <img
@@ -13,9 +13,9 @@
         width="250"
         height="250"
         class="img-box"
-        role="presentation"
+        aria-hidden="true"
         alt=""
-        :title="$t('Emission name image', { name: emission.name })"
+        :title="t('Emission name image', { name: emission.name })"
       />
       <div class="classic-element-text">
         <div class="d-flex align-items-center element-name basic-line-clamp">
@@ -23,7 +23,7 @@
             v-if="!activeEmission && !isPodcastmaker && editRight"
             :size="16"
             class="text-danger me-1"
-            :title="$t('Emission have not podcasts')"
+            :title="t('Emission have not podcasts')"
           />
           {{ emission.name }}
         </div>
@@ -53,83 +53,70 @@
   </article>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import AlertIcon from "vue-material-design-icons/Alert.vue";
 import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import { Emission } from "@/stores/class/general/emission";
 import classicApi from "../../../api/classicApi";
 import {useImageProxy} from "../../composable/useImageProxy";
 import displayHelper from "../../../helper/displayHelper";
-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: "EmissionItem",
-  components: {
-    AlertIcon,
-  },
+import { useI18n } from "vue-i18n";
 
-  props: {
-    emission: { default: () => ({}), type: Object as () => Emission },
-  },
+//Props 
+const props = defineProps({
+  emission: { default: () => ({}), type: Object as () => Emission },
+})
 
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    const { isPodcastmaker, isEditRights } = useOrgaComputed();
-    return { useProxyImageUrl, isPodcastmaker, isEditRights }
-  },
+//Data 
+const activeEmission = ref(true);
 
-  data() {
-    return {
-      activeEmission: true as boolean,
-    };
-  },
+//Composables
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+const { isPodcastmaker, isEditRights } = useOrgaComputed();
 
-  computed: {
-    organisation(): string {
-      return this.emission?.publisher?.organisation?.name ?? "";
-    },
-    editRight(): boolean {
-      return this.isEditRights(this.emission.orga.id);
-    },
-  },
+//Computed
+const editRight = computed(() => isEditRights(props.emission.orga.id));
 
-  created() {
-    if (!this.editRight) return;
-    this.hasPodcast();
-  },
-  mounted() {
-    const emissionDesc = this.$refs.descriptionEmission as HTMLElement;
-    const emissionDescContainer = this.$refs
-      .descriptionEmissionContainer as HTMLElement;
-    if (
-      null !== emissionDesc &&
-      null !== emissionDescContainer &&
-      emissionDesc.clientHeight > emissionDescContainer.clientHeight
-    ) {
-      emissionDescContainer.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: {
-          emissionId: this.emission.emissionId,
-          first: 0,
-          size: 0,
-          includeStatus: ["READY", "PROCESSING"],
-        },
-        specialTreatement: true,
-      });
-      if (0 === data.count) {
-        this.activeEmission = false;
-      }
+
+onBeforeMount(()=>{
+  if (!editRight.value) return;
+  hasPodcast();
+})
+
+onMounted(()=>{
+  const emissionDesc = useTemplateRef('descriptionEmission')?.value as HTMLElement;
+  const emissionDescContainer = useTemplateRef('descriptionEmissionContainer')?.value as HTMLElement;
+  if (
+    null !== emissionDesc &&
+    null !== emissionDescContainer &&
+    emissionDesc.clientHeight > emissionDescContainer.clientHeight
+  ) {
+    emissionDescContainer.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: {
+      emissionId: props.emission.emissionId,
+      first: 0,
+      size: 0,
+      includeStatus: ["READY", "PROCESSING"],
     },
-  },
-});
+    specialTreatement: true,
+  });
+  if (0 === data.count) {
+    activeEmission.value = false;
+  }
+}
 </script>