@saooti/octopus-sdk 40.2.19 → 41.0.0

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

@@ -6,12 +6,12 @@
     v-model:is-mobile="isMobile"
     :text-count="
       displayCount > 1
-        ? `${$t('Number playlists', { nb: displayCount })}`
+        ? `${t('Number playlists', { nb: displayCount })}`
         : undefined
     "
     :total-count="totalCount"
     :loading="loading"
-    :loading-text="loading ? $t('Loading content ...') : undefined"
+    :loading-text="loading ? t('Loading content ...') : undefined"
     :player-responsive="true"
   >
     <template #list>
@@ -29,7 +29,7 @@
                 name: 'playlist',
                 params: { playlistId: p.playlistId },
               }"
-              :title="$t('Playlist name page', { name: p.title })"
+              :title="t('Playlist name page', { name: p.title })"
             >
               {{ p.title }}
             </router-link>
@@ -40,7 +40,7 @@
   </ListPaginate>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicLazy from "../../misc/ClassicLazy.vue";
 import ListPaginate from "../list/ListPaginate.vue";
 import {useErrorHandler} from "../../composable/useErrorHandler";
@@ -48,153 +48,124 @@ import classicApi from "../../../api/classicApi";
 import PlaylistItem from "./PlaylistItem.vue";
 import { Playlist, emptyPlaylistData } from "@/stores/class/general/playlist";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { computed, onMounted, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-export default defineComponent({
-  name: "PlaylistList",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    PlaylistItem,
-    ListPaginate,
-    ClassicLazy,
-  },
+//Props 
+const props = defineProps({
+  first: { default: 0, type: Number },
+  size: { default: 30, type: Number },
+  query: { default: undefined, type: String },
+  organisationId: { default: undefined, type: String },
+})
 
-  props: {
-    first: { default: 0, type: Number },
-    size: { default: 30, type: Number },
-    query: { default: undefined, type: String },
-    organisationId: { default: undefined, type: String },
-  },
+//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 playlists: Ref<Array<Playlist>> = ref([]);
 
-  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,
-      playlists: [] as Array<Playlist>,
-      isMobile: false as boolean,
-    };
-  },
+//Composables
+const { t } = useI18n();
+const {handle403} = useErrorHandler();
+const filterStore = useFilterStore();
 
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    displayArray(): Array<Playlist> {
-      if (this.isMobile) {
-        return this.playlists;
-      }
-      return this.playlists.slice(
-        this.dfirst,
-        Math.min(this.dfirst + this.dsize, this.totalCount),
-      );
-    },
-    changed(): string {
-      return `${this.organisationId}|${this.query}`;
-    },
-    changePaginate(): string {
-      return `${this.first}|${this.size}`;
-    },
-    sort(): string {
-      return !this.query ? "NAME" : "SCORE";
-    },
-    organisation(): string | undefined {
-      return this.organisationId ? this.organisationId : this.filterOrgaId;
-    },
-  },
-  watch: {
-    changePaginate() {
-      this.dfirst = this.first;
-      this.dsize = this.size;
-    },
-    changed(): void {
-      this.reloadList();
-    },
-    dsize(): void {
-      this.reloadList();
-    },
-    dfirst(): void {
-      if (
-        !this.playlists[this.dfirst] ||
-        0 === this.playlists[this.dfirst].playlistId
-      ) {
-        this.fetchContent(false);
-      }
-    },
-  },
 
-  mounted() {
-    this.fetchContent(true);
-  },
-  methods: {
-    reloadList() {
-      this.dfirst = 0;
-      this.fetchContent(true);
-    },
-    async fetchContent(reset: boolean): Promise<void> {
-      this.loading = true;
-      const param = {
-        first: this.dfirst,
-        size: this.dsize,
-        query: this.query,
-        organisationId: this.organisation,
-        type: "NONE",
-        sort: this.sort,
-      };
-      try {
-        const data = await classicApi.fetchData<ListClassicReturn<Playlist>>({
-          api: 0,
-          path: "playlist/search",
-          parameters: param,
-          specialTreatement: true,
-        });
-        this.afterFetching(reset, data);
-      } catch (error) {
-        this.handle403(error as AxiosError);
-      }
-    },
-    afterFetching(
-      reset: boolean,
-      data: { count: number; result: Array<Playlist>; sort: string },
-    ): void {
-      if (reset) {
-        this.playlists.length = 0;
-      }
-      if (this.dfirst > this.playlists.length) {
-        for (
-          let i = this.playlists.length - 1, len = this.dfirst + this.dsize;
-          i < len;
-          i++
-        ) {
-          this.playlists.push(emptyPlaylistData());
-        }
-      }
-      this.displayCount = data.count;
-      const responsePlaylists = data.result.filter((e: Playlist | null) => {
-        if (null === e) {
-          this.displayCount--;
-        }
-        return null !== e;
-      });
-      this.playlists = this.playlists
-        .slice(0, this.dfirst)
-        .concat(responsePlaylists)
-        .concat(
-          this.playlists.slice(this.dfirst + this.dsize, this.playlists.length),
-        );
-      this.totalCount = data.count;
-      this.loading = false;
-    },
-    displayMore(): void {
-      this.fetchContent(false);
-    },
-  },
+//Computed
+const displayArray = computed(() => {
+  if (isMobile.value) {
+    return playlists.value;
+  }
+  return playlists.value.slice(
+    dfirst.value,
+    Math.min(dfirst.value + dsize.value, totalCount.value),
+  );
 });
+const changed = computed(() => `${props.organisationId}|${props.query}`);
+const changePaginate = computed(() => `${props.first}|${props.size}`);
+const sort = computed(() => !props.query ? "NAME" : "SCORE");
+const organisation = computed(() => props.organisationId ? props.organisationId : filterStore.filterOrgaId);
+
+
+//Watch
+watch(changePaginate, () => {
+  dfirst.value = props.first;
+  dsize.value = props.size;
+});
+watch(changed, () => fetchContent(true));
+watch(dsize, () =>fetchContent(true));
+watch(dfirst, () => {
+  if (
+    !playlists.value[dfirst.value] ||
+    0 === playlists.value[dfirst.value].playlistId
+  ) {
+    fetchContent(false);
+  }
+});
+
+onMounted(()=>fetchContent(false))
+
+
+//Methods
+async function fetchContent(reset: boolean): Promise<void> {
+  loading.value = true;
+  const param = {
+    first: reset ? 0 : dfirst.value,
+    size: dsize.value,
+    query: props.query,
+    organisationId: organisation.value,
+    type: "NONE",
+    sort: sort.value,
+  };
+  try {
+    const data = await classicApi.fetchData<ListClassicReturn<Playlist>>({
+      api: 0,
+      path: "playlist/search",
+      parameters: param,
+      specialTreatement: true,
+    });
+    afterFetching(reset, data);
+  } catch (error) {
+    handle403(error as AxiosError);
+  }
+}
+function afterFetching(
+  reset: boolean,
+  data: { count: number; result: Array<Playlist>; sort: string },
+): void {
+  if (reset) {
+    dfirst.value = 0;
+    playlists.value.length = 0;
+  }
+  if (dfirst.value > playlists.value.length) {
+    for (
+      let i = playlists.value.length - 1, len = dfirst.value + dsize.value;
+      i < len;
+      i++
+    ) {
+      playlists.value.push(emptyPlaylistData());
+    }
+  }
+  displayCount.value = data.count;
+  const responsePlaylists = data.result.filter((e: Playlist | null) => {
+    if (null === e) {
+      displayCount.value--;
+    }
+    return null !== e;
+  });
+  playlists.value = playlists.value
+    .slice(0, dfirst.value)
+    .concat(responsePlaylists)
+    .concat(
+      playlists.value.slice(dfirst.value + dsize.value, playlists.value.length),
+    );
+  totalCount.value = data.count;
+  loading.value = false;
+}
 </script>

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

@@ -8,27 +8,28 @@
       v-model:text-init="searchPattern"
       class="align-self-baseline mb-2"
       id-search="podcast-list-search"
-      :label="$t('Search')"
+      :label="t('Search')"
     />
     <ListPaginate
       id="podcastPlaylistListPaginate"
-      v-model:first="first"
-      v-model:rows-per-page="size"
+      v-model:first="dfirst"
+      v-model:rows-per-page="dsize"
       v-model:is-mobile="isMobile"
       :text-count="
         podcasts.length > 1
-          ? `${$t('Number podcasts', { nb: podcasts.length })}`
+          ? `${t('Number podcasts', { nb: podcasts.length })}`
           : undefined
       "
       :total-count="podcasts.length"
       :loading="loading"
-      :loading-text="loading ? $t('Loading podcasts ...') : undefined"
+      :loading-text="loading ? t('Loading podcasts ...') : undefined"
       :error-text="
         !loading && !podcasts.length && notEmptyPlaylist
-          ? $t(`No podcast match your query`)
+          ? t(`No podcast match your query`)
           : undefined
       "
       :player-responsive="true"
+      :force-update-parameters="true"
     >
       <template #list>
         <div class="octopus-element-list">
@@ -44,7 +45,7 @@
                   name: 'podcast',
                   params: { podcastId: p.podcastId },
                 }"
-                :title="$t('Episode name page', { name: p.title })"
+                :title="t('Episode name page', { name: p.title })"
               >
                 {{ p.title }}
               </router-link>
@@ -56,7 +57,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import {useOrgaComputed} from "../../composable/useOrgaComputed";
@@ -66,108 +67,94 @@ import ClassicSearch from "../../form/ClassicSearch.vue";
 import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Playlist } from "@/stores/class/general/playlist";
-import { defineComponent } from "vue";
+import { computed, onBeforeMount, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
-export default defineComponent({
-  name: "PodcastList",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    PodcastItem,
-    ClassicSearch,
-    ListPaginate,
-    ClassicLazy,
-  },
+//Props 
+const props = defineProps({
+  playlist: { default: () => ({}), type: Object as () => Playlist },
+  first: { default: 0, type: Number },
+  size: { default: 30, type: Number },
+  query: { default: undefined, type: String },
+})
 
-  props: {
-    playlist: { default: () => ({}), type: Object as () => Playlist },
-  },
+//Emits
+const emit = defineEmits(["update:query"]);
 
-  setup(){
-    const {handle403} = useErrorHandler();
-    const { isEditRights } = useOrgaComputed();
-    return { handle403, isEditRights }
-  },
+//Data 
+const loading = ref(true);
+const podcasts: Ref<Array<Podcast>> = ref([]);
+const podcastsQuery: Ref<Array<Podcast>> = ref([]);
+const dfirst = ref(props.first);
+const dsize = ref(props.size);
+const searchPattern = ref("");
+const isMobile = ref(false);
 
-  data() {
-    return {
-      loading: true as boolean,
-      podcasts: [] as Array<Podcast>,
-      podcastsQuery: [] as Array<Podcast>,
-      size: 30 as number,
-      first: 0 as number,
-      searchPattern: "" as string,
-      isMobile: false as boolean,
-    };
-  },
+//Composables
+const { t } = useI18n();
+const {handle403} = useErrorHandler();
+const { isEditRights } = useOrgaComputed();
 
-  computed: {
-    titleList(): string {
-      return this.notEmptyPlaylist
-        ? this.$t("Podcasts in the playlist")
-        : this.$t("No podcasts in the playlist");
-    },
-    notEmptyPlaylist(): boolean {
-      return 0 !== Object.keys(this.playlist.samplingViews ?? []).length;
-    },
-    podcastsDisplay(): Array<Podcast> {
-      if (this.isMobile) {
-        return this.podcastsQuery.slice(
-          0,
-          Math.min(this.first + this.size, this.podcasts.length),
-        );
-      }
-      return this.podcastsQuery.slice(
-        this.first,
-        Math.min(this.first + this.size, this.podcasts.length),
-      );
-    },
-    editRight(): boolean {
-      return this.isEditRights(this.playlist.organisation?.id);
-    },
-  },
-  watch: {
-    searchPattern(): void {
-      if ("" !== this.searchPattern) {
-        this.podcastsQuery = this.podcasts.filter((el: Podcast) => {
-          return el.title
-            .toLowerCase()
-            .includes(this.searchPattern.toLowerCase());
-        });
-      } else {
-        this.podcastsQuery = this.podcasts;
-      }
-    },
-  },
+//Computed
+const titleList = computed(() => notEmptyPlaylist.value? t("Podcasts in the playlist"): t("No podcasts in the playlist"));
+const notEmptyPlaylist = computed(() => 0 !== Object.keys(props.playlist.samplingViews ?? []).length);
+const podcastsDisplay = computed(() => {
+  if (isMobile.value) {
+    return podcastsQuery.value.slice(
+      0,
+      Math.min(dfirst.value + dsize.value, podcasts.value.length),
+    );
+  }
+  return podcastsQuery.value.slice(
+    dfirst.value,
+    Math.min(dfirst.value + dsize.value, podcasts.value.length),
+  );
+});
+const editRight = computed(() =>isEditRights(props.playlist.organisation?.id));
 
-  created() {
-    this.fetchContent();
-  },
-  methods: {
-    async fetchContent(): Promise<void> {
-      if (this.notEmptyPlaylist) {
-        this.podcasts.length = 0;
-        this.loading = true;
-        try {
-          this.podcasts = await classicApi.fetchData<Array<Podcast>>({
-            api: 0,
-            path: "playlist/" + this.playlist.playlistId + "/content",
-          });
-          if (!this.editRight) {
-            this.podcasts = this.podcasts.filter((p: Podcast | null) => {
-              return (
-                null !== p &&
-                (!p.availability || true === p.availability.visibility)
-              );
-            });
-          }
-          this.podcastsQuery = this.podcasts;
-        } catch (error) {
-          this.handle403(error as AxiosError);
-        }
-      }
-      this.loading = false;
-    },
-  },
+//Watch
+watch(searchPattern,() => {
+  emit('update:query', searchPattern.value);
+  if ("" !== searchPattern.value) {
+    podcastsQuery.value = podcasts.value.filter((el: Podcast) => {
+      return el.title
+        .toLowerCase()
+        .includes(searchPattern.value.toLowerCase());
+    });
+  } else {
+    podcastsQuery.value = podcasts.value;
+  }
 });
+
+onBeforeMount(()=>fetchContent());
+
+
+//Methods
+async function fetchContent(): Promise<void> {
+  if (notEmptyPlaylist.value) {
+    podcasts.value.length = 0;
+    loading.value = true;
+    try {
+      podcasts.value = await classicApi.fetchData<Array<Podcast>>({
+        api: 0,
+        path: "playlist/" + props.playlist.playlistId + "/content",
+      });
+      if (!editRight.value) {
+        podcasts.value = podcasts.value.filter((p: Podcast | null) => {
+          return (
+            null !== p &&
+            (!p.availability || true === p.availability.visibility)
+          );
+        });
+      }
+      podcastsQuery.value = podcasts.value;
+      searchPattern.value = props.query ?? "";
+    } catch (error) {
+      handle403(error as AxiosError);
+    }
+  }
+  loading.value = false;
+}
 </script>
 

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

@@ -2,7 +2,7 @@
   <PodcastInlineListTemplate
     v-if="loading || (!loading && 0 !== allPodcasts.length)"
     :display-arrow="false"
-    :button-text="$t('See more')"
+    :button-text="t('See more')"
     :button-plus="true"
     :title="playlist?.title ?? ''"
     :href="'/main/pub/playlist/' + playlistId"
@@ -11,7 +11,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"
@@ -29,7 +29,7 @@
   </PodcastInlineListTemplate>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../../api/classicApi";
 import PodcastInlineListTemplate from "../podcasts/PodcastInlineListTemplate.vue";
 import PodcastItem from "../podcasts/PodcastItem.vue";
@@ -38,75 +38,63 @@ import ClassicLoading from "../../form/ClassicLoading.vue";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Playlist } from "@/stores/class/general/playlist";
-import { defineComponent } from "vue";
-import { mapState } from "pinia";
-export default defineComponent({
-  name: "PodcastPlaylistInlineList",
+import { onMounted, Ref, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-  components: {
-    PodcastItem,
-    ClassicLoading,
-    PodcastInlineListTemplate,
-    SwiperList,
-  },
+//Props 
+const props = defineProps({
+  playlistId: { default: undefined, type: Number },
+  sizeItemOverload: { default: undefined, type: Number }
+})
 
-  props: {
-    playlistId: { default: undefined, type: Number },
-    sizeItemOverload: { default: undefined, type: Number },
-  },
+//Data 
+const loading = ref(true);
+const totalCount = ref(0);
+const playlist: Ref<Playlist | undefined> = ref(undefined);
+const allPodcasts: Ref<Array<Podcast>> = ref([]);
 
-  data() {
-    return {
-      loading: true as boolean,
-      totalCount: 0 as number,
-      playlist: undefined as Playlist | undefined,
-      allPodcasts: [] as Array<Podcast>,
-    };
-  },
-  computed: {
-    ...mapState(useAuthStore, ["authOrgaId", "isRoleAdmin"]),
-  },
-  watch: {
-    playlistId(): void {
-      this.reset();
-      this.fetchContent();
-    },
-  },
-  mounted() {
-    this.fetchContent();
-  },
-  methods: {
-    async fetchContent(): Promise<void> {
-      this.allPodcasts.length = 0;
-      this.loading = true;
-      this.playlist = await classicApi.fetchData<Playlist>({
-        api: 0,
-        path: "playlist/" + this.playlistId,
-      });
-      this.allPodcasts = await classicApi.fetchData<Array<Podcast>>({
-        api: 0,
-        path: "playlist/" + this.playlistId + "/content",
-      });
-      if (
-        !(
-          (undefined !== this.authOrgaId &&
-            this.authOrgaId === this.playlist?.organisation?.id) ||
-          this.isRoleAdmin
-        )
-      ) {
-        this.allPodcasts = this.allPodcasts.filter((p: Podcast | null) => {
-          return (
-            null !== p &&
-            (!p.availability || true === p.availability.visibility)
-          );
-        });
-      }
-      this.loading = false;
-    },
-    reset(): void {
-      this.totalCount = 0;
-      this.allPodcasts.length = 0;
-    },
-  },
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+
+//Watch
+watch(()=>props.playlistId, () => {
+  reset();
+  fetchContent();
 });
+
+onMounted(()=>fetchContent())
+
+//Methods
+async function fetchContent(): Promise<void> {
+  allPodcasts.value.length = 0;
+  loading.value = true;
+  playlist.value = await classicApi.fetchData<Playlist>({
+    api: 0,
+    path: "playlist/" + props.playlistId,
+  });
+  allPodcasts.value = await classicApi.fetchData<Array<Podcast>>({
+    api: 0,
+    path: "playlist/" + props.playlistId + "/content",
+  });
+  if (
+    !(
+      (undefined !== authStore.authOrgaId &&
+      authStore.authOrgaId === playlist.value?.organisation?.id) ||
+      authStore.isRoleAdmin
+    )
+  ) {
+    allPodcasts.value = allPodcasts.value.filter((p: Podcast | null) => {
+      return (
+        null !== p &&
+        (!p.availability || true === p.availability.visibility)
+      );
+    });
+  }
+  loading.value = false;
+}
+function reset(): void {
+  totalCount.value = 0;
+  allPodcasts.value.length = 0;
+}
 </script>