@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/podcasts/PodcastSwiperList.vue

@@ -17,7 +17,7 @@
     <template #list-inline>
       <ClassicLoading
         class="loading-size"
-        :loading-text="loading ? $t('Loading podcasts ...') : undefined"
+        :loading-text="loading ? t('Loading podcasts ...') : undefined"
       />
       <SwiperList v-if="!loading" :list-object="allPodcasts">
         <template #octopusSlide="{ option }">
@@ -31,7 +31,7 @@
   </PodcastInlineListTemplate>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import dayjs from "dayjs";
 import PodcastInlineListTemplate from "./PodcastInlineListTemplate.vue";
 import classicApi from "../../../api/classicApi";
@@ -39,119 +39,109 @@ import PodcastItem from "./PodcastItem.vue";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import SwiperList from "../list/SwiperList.vue";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
 import { Podcast } from "@/stores/class/general/podcast";
-import { defineComponent } from "vue";
+import { computed, onBeforeMount, Ref, ref, watch } from "vue";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-export default defineComponent({
-  name: "PodcastSwiperList",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    PodcastInlineListTemplate,
-    PodcastItem,
-    ClassicLoading,
-    SwiperList,
-  },
+//Props 
+const props = defineProps({
+  organisationId: { default: () => [], type: Array as () => Array<string> },
+  emissionId: { default: undefined, type: Number },
+  iabId: { default: undefined, type: Number },
+  title: { default: "", type: String },
+  href: { default: undefined, type: String },
+  buttonText: { default: undefined, type: String },
+  isArrow: { default: false, type: Boolean },
+  requirePopularSort: { default: undefined, type: Boolean },
+  buttonPlus: { default: false, type: Boolean },
+  rubriqueId: { default: () => [], type: Array as () => Array<number> },
+  rubriquageId: { default: () => [], type: Array as () => Array<number> },
+  noRubriquageId: { default: () => [], type: Array as () => Array<number> },
+  query: { default: undefined, type: String },
+  lastThreeMonths: { default: false, type: Boolean },
+  titleTag: { default: "h2", type: String },
+})
 
-  props: {
-    organisationId: { default: () => [], type: Array as () => Array<string> },
-    emissionId: { default: undefined, type: Number },
-    iabId: { default: undefined, type: Number },
-    title: { default: "", type: String },
-    href: { default: undefined, type: String },
-    buttonText: { default: undefined, type: String },
-    isArrow: { default: false, type: Boolean },
-    requirePopularSort: { default: undefined, type: Boolean },
-    buttonPlus: { default: false, type: Boolean },
-    rubriqueId: { default: () => [], type: Array as () => Array<number> },
-    rubriquageId: { default: () => [], type: Array as () => Array<number> },
-    noRubriquageId: { default: () => [], type: Array as () => Array<number> },
-    query: { default: undefined, type: String },
-    lastThreeMonths: { default: false, type: Boolean },
-    titleTag: { default: "h2", type: String },
-  },
-  emits: ["update:isArrow"],
+//Emits
+const emit = defineEmits(["update:isArrow"]);
 
-  data() {
-    return {
-      loading: true as boolean,
-      popularSort: false as boolean,
-      allPodcasts: [] as Array<Podcast>,
-    };
-  },
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    organisation(): Array<string> {
-      if (this.organisationId.length) {
-        return this.organisationId;
-      }
-      return this.filterOrgaId ? [this.filterOrgaId] : [];
-    },
-    watchVariable(): string {
-      return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
-    },
-  },
-  watch: {
-    watchVariable(): void {
-      this.fetchNext();
-    },
-  },
+//Data 
+const loading = ref(true);
+const popularSort = ref(false);
+const allPodcasts: Ref<Array<Podcast>> = ref([]);
 
-  created() {
-    if (undefined !== this.requirePopularSort) {
-      this.popularSort = this.requirePopularSort;
-    }
-    if (undefined !== this.isArrow) {
-      this.$emit("update:isArrow", true);
-    }
-  },
-  mounted() {
-    this.fetchNext();
-  },
-  methods: {
-    async fetchNext(): Promise<void> {
-      const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
-        api: 0,
-        path: "podcast/search",
-        parameters: {
-          first: 0,
-          size: 12,
-          organisationId: this.organisation,
-          emissionId: this.emissionId,
-          iabId: this.iabId,
-          rubriqueId: this.rubriqueId.length ? this.rubriqueId : undefined,
-          rubriquageId: this.rubriquageId.length
-            ? this.rubriquageId
-            : undefined,
-          noRubriquageId: this.noRubriquageId.length
-            ? this.noRubriquageId
-            : undefined,
-          sort: this.popularSort ? "POPULARITY" : "DATE",
-          query: this.query,
-          includeStatus: ["READY", "PROCESSING"],
-          after:
-            this.popularSort && this.lastThreeMonths
-              ? dayjs().subtract(3, "months").toISOString()
-              : undefined,
-        },
-        specialTreatement: true,
-      });
-      this.loading = true;
-      this.allPodcasts = data.result.filter(
-        (pod: Podcast | null) => null !== pod,
-      );
-      this.loading = false;
-    },
-    sortPopular(): void {
-      if (this.popularSort) return;
-      this.popularSort = true;
-      this.fetchNext();
-    },
-    sortChrono(): void {
-      if (!this.popularSort) return;
-      this.popularSort = false;
-      this.fetchNext();
-    },
-  },
+
+//Composables
+const { t } = useI18n();
+const filterStore = useFilterStore();
+
+//Computed
+const organisation = computed(() => {
+  if (props.organisationId.length) {
+    return props.organisationId;
+  }
+  return filterStore.filterOrgaId ? [filterStore.filterOrgaId] : [];
+});
+const watchVariable = computed(() => {
+  return `${props.emissionId}|${props.organisationId}|${filterStore.filterOrgaId}|${props.iabId}|${props.rubriqueId}|${props.rubriquageId}|${props.query}`;
 });
+
+
+//Watch
+watch(watchVariable, () => fetchNext(), {immediate:true});
+
+onBeforeMount(()=>{
+  if (undefined !== props.requirePopularSort) {
+    popularSort.value = props.requirePopularSort;
+  }
+  if (undefined !== props.isArrow) {
+    emit("update:isArrow", true);
+  }
+})
+
+//Methods
+async function fetchNext(): Promise<void> {
+  const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
+    api: 0,
+    path: "podcast/search",
+    parameters: {
+      first: 0,
+      size: 12,
+      organisationId: organisation.value,
+      emissionId: props.emissionId,
+      iabId: props.iabId,
+      rubriqueId: props.rubriqueId.length ? props.rubriqueId : undefined,
+      rubriquageId: props.rubriquageId.length
+        ? props.rubriquageId
+        : undefined,
+      noRubriquageId: props.noRubriquageId.length
+        ? props.noRubriquageId
+        : undefined,
+      sort: popularSort.value ? "POPULARITY" : "DATE",
+      query: props.query,
+      includeStatus: ["READY", "PROCESSING"],
+      after:
+      popularSort.value && props.lastThreeMonths
+          ? dayjs().subtract(3, "months").toISOString()
+          : undefined,
+    },
+    specialTreatement: true,
+  });
+  loading.value = true;
+  allPodcasts.value = data.result.filter(
+    (pod: Podcast | null) => null !== pod,
+  );
+  loading.value = false;
+}
+function sortPopular(): void {
+  if (popularSort.value) return;
+  popularSort.value = true;
+  fetchNext();
+}
+function sortChrono(): void {
+  if (!popularSort.value) return;
+  popularSort.value = false;
+  fetchNext();
+}
 </script>

package/src/components/display/podcasts/TagList.vue

@@ -4,7 +4,7 @@
     class="tag-list-component d-flex align-items-center flex-wrap mb-3 small-text"
   >
     <div class="fw-bold me-3">
-      {{ $t("Podcast tags") + " : " }}
+      {{ t("Podcast tags") + " : " }}
     </div>
     <router-link
       v-for="(tag, index) in tagListFiltered"
@@ -26,7 +26,8 @@
             width="20"
             height="20"
             class="ouest-france-logo"
-            role="presentation"
+            aria-hidden="true"
+        alt=""
             title="Ouest France"
             
             src="/img/ouest_france_logo.svg" 
@@ -44,62 +45,59 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue";
 const ClassicPopover = defineAsyncComponent(
   () => import("../../misc/ClassicPopover.vue"),
 );
 import {useTagOf} from "../../composable/useTagOf";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
-export default defineComponent({
-  name: "TagList",
-  components: {
-    ClassicPopover,
-  },
-  props: {
-    tagList: { default: () => [], type: Array as () => Array<string> },
-    podcastAnnotations: {
-      default: () => {},
-      type: Object as () => {
-        [key: string]: string | number | boolean | undefined;
-      },
-    },
-    orgaId: {default: "", type: String,},
-  },
-  setup(){
-    const { isOuestFranceTag, formateOfTag } = useTagOf();
-    return { isOuestFranceTag, formateOfTag }
-  },
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    tagListFiltered(): Array<string>{
-      return this.tagList.filter((tag: string) => {
-        return !tag.match(/^\[\[.*\]\]$/);
-      });
-    },
-    organisationQuery(){
-      if(this.filterOrgaId){
-        return undefined;
-      }
-      return { o: this.orgaId};
-    },
-    ouestFranceMainTag(): string | undefined {
-      if (this.podcastAnnotations?.["mainOfTag"]) {
-        for (const key in this.podcastAnnotations) {
-          if (
-            this.podcastAnnotations[key] ===
-              this.podcastAnnotations["mainOfTag"] &&
-            key !== "mainOfTag"
-          ) {
-            return "[of]" + key;
-          }
-        }
-      }
-      return undefined;
+import { useI18n } from "vue-i18n";
+
+//Props 
+const props = defineProps({
+  tagList: { default: () => [], type: Array as () => Array<string> },
+  podcastAnnotations: {
+    default: () => {},
+    type: Object as () => {
+      [key: string]: string | number | boolean | undefined;
     },
   },
+  orgaId: {default: "", type: String,},
+})
+
+
+//Composables
+const { t } = useI18n()
+const { isOuestFranceTag, formateOfTag } = useTagOf();
+const filterStore = useFilterStore();
+
+//Computed
+const tagListFiltered = computed(() => {
+  return props.tagList.filter((tag: string) => {
+    return !tag.match(/^\[\[.*\]\]$/);
+  });
+});
+const organisationQuery = computed(() => {
+  if(filterStore.filterOrgaId){
+    return undefined;
+  }
+  return { o: props.orgaId};
 });
+/* const ouestFranceMainTag = computed(() => {
+  if (props.podcastAnnotations?.["mainOfTag"]) {
+    for (const key in props.podcastAnnotations) {
+      if (
+        props.podcastAnnotations[key] ===
+        props.podcastAnnotations["mainOfTag"] &&
+        key !== "mainOfTag"
+      ) {
+        return "[of]" + key;
+      }
+    }
+  }
+  return undefined;
+}); */
 </script>
 
 <style lang="scss">

package/src/components/display/podcasts/VideoModuleBox.vue

@@ -22,36 +22,25 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { Podcast } from "@/stores/class/general/podcast";
 import displayHelper from "../../../helper/displayHelper";
 import PodcastRawTranscript from "./PodcastRawTranscript.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { defineAsyncComponent } from "vue";
 const ParticipantDescription = defineAsyncComponent(
   () => import("./ParticipantDescription.vue"),
 );
-export default defineComponent({
-  name: "VideoModuleBox",
-  components: {
-    ParticipantDescription,
-    PodcastRawTranscript,
-  },
 
-  props: {
-    podcast: { default: undefined, type: Object as () => Podcast },
-    date: { default: "", type: String },
-    duration: { default: "", type: String },
-    durationIso: { default: "", type: String },
-  },
+//Props 
+defineProps({
+  podcast: { default: undefined, type: Object as () => Podcast },
+  date: { default: "", type: String },
+  duration: { default: "", type: String },
+  durationIso: { default: "", type: String },
+})
 
-  data() {
-    return {};
-  },
-  computed: {},
-  methods: {
-    urlify(text:string|undefined){
-      return displayHelper.urlify(text);
-    },
-  }
-});
+//Methods
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
 </script>