@saooti/octopus-sdk 37.0.5 → 37.0.7

package/src/components/display/organisation/OrganisationChooserLight.vue

@@ -14,7 +14,7 @@
         {{ organisation.name }}
       </option>
       <option :value="-1">
-        {{ $t('No organisation filter') }}
+        {{ $t("No organisation filter") }}
       </option>
     </select>
     <label
@@ -26,22 +26,22 @@
 </template>
 
 <script lang="ts">
-import { Organisation } from '@/stores/class/general/organisation';
-import octopusApi from '@saooti/octopus-api';
-import { defineComponent } from 'vue'
+import { Organisation } from "@/stores/class/general/organisation";
+import octopusApi from "@saooti/octopus-api";
+import { defineComponent } from "vue";
 export default defineComponent({
   props: {
-    width: { default: '100%', type: String},
-    value: { default: undefined, type: String},
-    reset: { default: false, type: Boolean},
-    page: { default: '', type: String},
+    width: { default: "100%", type: String },
+    value: { default: undefined, type: String },
+    reset: { default: false, type: Boolean },
+    page: { default: "", type: String },
   },
-  emits: ['selected'],
+  emits: ["selected"],
 
   data() {
-    return  {
-      actual: -1 as number|string,
-      organisation: undefined as Organisation|undefined,
+    return {
+      actual: -1 as number | string,
+      organisation: undefined as Organisation | undefined,
       init: false as boolean,
     };
   },
@@ -64,26 +64,34 @@ export default defineComponent({
   },
 
   methods: {
-    onOrganisationSelected(): void{
-      this.$emit('selected', -1 === this.actual? undefined:this.organisation);
+    onOrganisationSelected(): void {
+      this.$emit(
+        "selected",
+        -1 === this.actual ? undefined : this.organisation,
+      );
     },
     async fetchOrganisation(): Promise<void> {
-      if(!this.value){return;}
-      const data = await octopusApi.fetchData<Organisation>(0,`organisation/${this.value}`);
+      if (!this.value) {
+        return;
+      }
+      const data = await octopusApi.fetchData<Organisation>(
+        0,
+        `organisation/${this.value}`,
+      );
       this.organisation = data;
       this.actual = data.id;
       this.init = true;
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .organisation-chooser-light select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
   }
 }
-</style>
+</style>

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="participant"
-    class="participant-item-container"
-  >
+  <div v-if="participant" class="participant-item-container">
     <router-link
       :to="{
         name: 'participant',
@@ -19,7 +16,7 @@
         :title="$t('Animator image')"
         :alt="$t('Animator image')"
         class="img-box border"
-      >
+      />
       <div class="d-flex align-items-center h4 justify-content-center mt-2">
         <span
           v-if="!activeParticipant && !isPodcastmaker && editRight"
@@ -35,7 +32,7 @@
         <!-- eslint-disable vue/no-v-html -->
         <div
           ref="descriptionParticipant"
-          v-html="urlify(participant.description|| '')"
+          v-html="urlify(participant.description || '')"
         />
         <!-- eslint-enable -->
       </div>
@@ -55,19 +52,19 @@
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import { Participant } from '@/stores/class/general/participant';
-import { state } from '../../../stores/ParamSdkStore';
-import imageProxy from '../../mixins/imageProxy';
-import displayMethods from '../../mixins/displayMethods';
-import { orgaComputed } from '../../mixins/orgaComputed';
-import { defineComponent } from 'vue'
-import { Podcast } from '@/stores/class/general/podcast';
+import octopusApi from "@saooti/octopus-api";
+import { Participant } from "@/stores/class/general/participant";
+import { state } from "../../../stores/ParamSdkStore";
+import imageProxy from "../../mixins/imageProxy";
+import displayMethods from "../../mixins/displayMethods";
+import { orgaComputed } from "../../mixins/orgaComputed";
+import { defineComponent } from "vue";
+import { Podcast } from "@/stores/class/general/podcast";
 export default defineComponent({
-  name: 'ParticpantItem',
+  name: "ParticpantItem",
   mixins: [displayMethods, orgaComputed, imageProxy],
   props: {
-    participant: { default: ()=>({}), type: Object as ()=> Participant},
+    participant: { default: () => ({}), type: Object as () => Participant },
   },
   data() {
     return {
@@ -76,97 +73,113 @@ export default defineComponent({
   },
   computed: {
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
     name(): string {
-      return (`${this.participant.firstName??''} ${this.participant.lastName??''}`).trim();
+      return `${this.participant.firstName ?? ""} ${
+        this.participant.lastName ?? ""
+      }`.trim();
     },
     editRight(): boolean {
-      if(!this.participant || !this.participant.orga){
+      if (!this.participant || !this.participant.orga) {
         return false;
       }
-      return (this.authenticated &&
-        this.myOrganisationId === this.participant.orga.id) ||
+      return (
+        (this.authenticated &&
+          this.myOrganisationId === this.participant.orga.id) ||
         true === state.generalParameters.isAdmin
+      );
     },
   },
 
   created() {
-    if(!this.editRight)return;
+    if (!this.editRight) return;
     this.hasPodcast();
   },
   mounted() {
-    const participantDesc = (this.$refs.descriptionParticipant as HTMLElement);
-    const participantDescContainer = (this.$refs.descriptionParticipantContainer as HTMLElement);
+    const participantDesc = this.$refs.descriptionParticipant as HTMLElement;
+    const participantDescContainer = this.$refs
+      .descriptionParticipantContainer as HTMLElement;
     if (
-      null !== participantDesc && null !==participantDescContainer && 
+      null !== participantDesc &&
+      null !== participantDescContainer &&
       participantDesc.clientHeight > participantDescContainer.clientHeight
     ) {
-      participantDescContainer.classList.add('after-participant-description');
+      participantDescContainer.classList.add("after-participant-description");
     }
   },
   methods: {
     async hasPodcast(): Promise<void> {
-      const data =  await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
-        participantId: this.participant.participantId,
-        first: 0,
-        size: 0,
-        includeStatus:["READY","PROCESSING"]
-      }, true);
+      const data = await octopusApi.fetchDataWithParams<{
+        count: number;
+        result: Array<Podcast>;
+        sort: string;
+      }>(
+        0,
+        "podcast/search",
+        {
+          participantId: this.participant.participantId,
+          first: 0,
+          size: 0,
+          includeStatus: ["READY", "PROCESSING"],
+        },
+        true,
+      );
       if (0 === data.count) {
         this.activeParticipant = false;
       }
     },
   },
-})
+});
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.participant-item-container {
-  list-style: none;
-  border-radius: $octopus-borderradius;
-  display: flex;
-  flex-direction: column;
-  margin: 1rem 0;
-  align-items: center;
-  width: $octopus-item-size;
+@import "@scss/_variables.scss";
+.octopus-app {
+  .participant-item-container {
+    list-style: none;
+    border-radius: $octopus-borderradius;
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0;
+    align-items: center;
+    width: $octopus-item-size;
 
-  .participant-description {
-    overflow: hidden;
-    margin-top: 0.5em;
-    word-break: break-word;
-    max-height: 3rem;
-    position: relative;
-    &.after-participant-description:after {
-      content: '...';
-      position: absolute;
-      padding-left: 1rem;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      font-size: 1rem;
-      font-weight: bolder;
+    .participant-description {
+      overflow: hidden;
+      margin-top: 0.5em;
+      word-break: break-word;
+      max-height: 3rem;
+      position: relative;
       text-align: center;
-      background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0),
-        white 40%
-      );
+      &.after-participant-description:after {
+        content: "...";
+        position: absolute;
+        padding-left: 1rem;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: bolder;
+        text-align: center;
+        background: linear-gradient(
+          to bottom,
+          rgba(255, 255, 255, 0),
+          white 40%
+        );
+      }
     }
-  }
 
-  .participant-producer {
-    font-weight: 300;
-    font-size: 0.6rem;
-    margin-top: 0.5rem;
-  }
-  @media (max-width: 960px) {
-    margin: 0;
-  }
-  @media (max-width: 450px) {
-    margin: 1rem 0 0;
+    .participant-producer {
+      font-weight: 300;
+      font-size: 0.6rem;
+      margin-top: 0.5rem;
+    }
+    @media (max-width: 960px) {
+      margin: 0;
+    }
+    @media (max-width: 450px) {
+      margin: 1rem 0 0;
+    }
   }
 }
-}
-</style>
+</style>

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

@@ -4,23 +4,21 @@
     v-model:first="dfirst"
     v-model:rowsPerPage="dsize"
     v-model:isMobile="isMobile"
-    :text-count="showCount && displayCount > 1 ? `${$t('Number participants', { nb: displayCount })} ${$t('sort by score')}`: undefined"
+    :text-count="
+      showCount && displayCount > 1
+        ? `${$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"
   >
     <template #list>
-      <div
-        class="podcast-list"
-      >
-        <template
-          v-for="p in displayArray"
-          :key="p.participantId"
-        >
-          <ParticipantItem
-            v-if="0!==p.participantId"
-            :participant="p"
-          />
+      <div class="podcast-list">
+        <template v-for="p in displayArray" :key="p.participantId">
+          <ParticipantItem v-if="0 !== p.participantId" :participant="p" />
         </template>
       </div>
     </template>
@@ -28,21 +26,24 @@
 </template>
 
 <script lang="ts">
-import ListPaginate from '../list/ListPaginate.vue';
-import { handle403 } from '../../mixins/handle403';
-import octopusApi from '@saooti/octopus-api';
-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 { AxiosError } from 'axios';
+import ListPaginate from "../list/ListPaginate.vue";
+import { handle403 } from "../../mixins/handle403";
+import octopusApi from "@saooti/octopus-api";
+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 { AxiosError } from "axios";
 export default defineComponent({
-  name: 'ParticipantList',
+  name: "ParticipantList",
 
   components: {
     ParticipantItem,
-    ListPaginate
+    ListPaginate,
   },
 
   mixins: [handle403],
@@ -50,8 +51,8 @@ export default defineComponent({
   props: {
     first: { default: 0, type: Number },
     size: { default: 30, type: Number },
-    query: { default: undefined, type: String},
-    organisationId: { default: undefined, type: String},
+    query: { default: undefined, type: String },
+    organisationId: { default: undefined, type: String },
     showCount: { default: false, type: Boolean },
   },
 
@@ -67,17 +68,19 @@ export default defineComponent({
     };
   },
 
-   
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
-    displayArray(): Array<Participant>{
-      if(this.isMobile){
+    ...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;
+      return this.participants.slice(
+        this.dfirst,
+        Math.min(this.dfirst + this.dsize, this.totalCount),
+      );
+    },
+    organisation(): string | undefined {
+      return this.organisationId ? this.organisationId : this.filterOrgaId;
     },
   },
   watch: {
@@ -87,55 +90,82 @@ export default defineComponent({
     organisation(): void {
       this.reloadList();
     },
-    dsize():void{
+    dsize(): void {
       this.reloadList();
-		},
-		dfirst(): void{
-			if(!this.participants[this.dfirst] || 0===this.participants[this.dfirst].participantId){
-				this.fetchContent(false);
-			}
-		},
+    },
+    dfirst(): void {
+      if (
+        !this.participants[this.dfirst] ||
+        0 === this.participants[this.dfirst].participantId
+      ) {
+        this.fetchContent(false);
+      }
+    },
   },
 
   created() {
     this.fetchContent(true);
   },
   methods: {
-    reloadList(){
+    reloadList() {
       this.dfirst = 0;
       this.fetchContent(true);
     },
     async fetchContent(reset: boolean): Promise<void> {
       this.loading = true;
       try {
-        const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Participant>;sort: string;}>(0, 'participant/search',{
-          first: this.dfirst,
-          size: this.dsize,
-          query: this.query,
-          organisationId: this.organisation,
-        }, true);
+        const data = await octopusApi.fetchDataWithParams<{
+          count: number;
+          result: Array<Participant>;
+          sort: string;
+        }>(
+          0,
+          "participant/search",
+          {
+            first: this.dfirst,
+            size: this.dsize,
+            query: this.query,
+            organisationId: this.organisation,
+          },
+          true,
+        );
         if (reset) {
           this.participants.length = 0;
         }
         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++) {
+        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));
+        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.handle403(error as AxiosError);
       }
       this.loading = false;
     },
   },
-})
-</script>
+});
+</script>

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="editRight || activePlaylist"
-    class="emission-item-container"
-  >
+  <div v-if="editRight || activePlaylist" class="emission-item-container">
     <router-link
       :to="{
         name: 'playlist',
@@ -26,10 +23,7 @@
           class="emission-description html-wysiwyg-content"
         >
           <!-- eslint-disable vue/no-v-html -->
-          <div
-            ref="descriptionPlaylist"
-            v-html="urlify(description)"
-          />
+          <div ref="descriptionPlaylist" v-html="urlify(description)" />
           <!-- eslint-enable -->
         </div>
         <router-link
@@ -48,63 +42,66 @@
         v-lazy="proxyImageUrl(playlist.imageUrl, '330')"
         width="330"
         height="330"
-        :title="$t('Playlist name image', {name:name})"
-        :alt="$t('Playlist name image', {name:name})"
+        :title="$t('Playlist name image', { name: name })"
+        :alt="$t('Playlist name image', { name: name })"
         class="img-box"
-      >
+      />
     </router-link>
   </div>
 </template>
 
 <script lang="ts">
-import { Playlist } from '@/stores/class/general/playlist';
-import { state } from '../../../stores/ParamSdkStore';
-import imageProxy from '../../mixins/imageProxy';
-import displayMethods from '../../mixins/displayMethods';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue'
+import { Playlist } from "@/stores/class/general/playlist";
+import { state } from "../../../stores/ParamSdkStore";
+import imageProxy from "../../mixins/imageProxy";
+import displayMethods from "../../mixins/displayMethods";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'PlaylistItem',
+  name: "PlaylistItem",
 
   mixins: [displayMethods, imageProxy],
 
   props: {
-    playlist: { default: ()=>({}), type: Object as ()=>Playlist},
+    playlist: { default: () => ({}), type: Object as () => Playlist },
   },
-  
+
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
     organisation(): string {
-      return this.playlist?.publisher?.organisation?.name ??'';
+      return this.playlist?.publisher?.organisation?.name ?? "";
     },
     description(): string {
-      return this.playlist.description ?? '';
+      return this.playlist.description ?? "";
     },
     name(): string {
       return this.playlist.title;
     },
-    organisationId(): string|undefined {
+    organisationId(): string | undefined {
       return state.generalParameters.organisationId;
     },
     editRight(): boolean {
-      return (true===state.generalParameters.isPlaylist &&
-        this.organisationId === this.playlist.organisation?.id) ||
-        (state.generalParameters.isAdmin as boolean);
+      return (
+        (true === state.generalParameters.isPlaylist &&
+          this.organisationId === this.playlist.organisation?.id) ||
+        (state.generalParameters.isAdmin as boolean)
+      );
     },
     activePlaylist(): boolean {
-      return 0 !== Object.keys(this.playlist.samplingViews??[]).length;
+      return 0 !== Object.keys(this.playlist.samplingViews ?? []).length;
     },
   },
   mounted() {
-    const playlistDesc = (this.$refs.descriptionPlaylist as HTMLElement);
-    const playlistDescContainer = (this.$refs.descriptionPlaylistContainer as HTMLElement);
+    const playlistDesc = this.$refs.descriptionPlaylist as HTMLElement;
+    const playlistDescContainer = this.$refs
+      .descriptionPlaylistContainer as HTMLElement;
     if (playlistDesc?.clientHeight > playlistDescContainer?.clientHeight) {
-      playlistDescContainer.classList.add('after-emission-description');
+      playlistDescContainer.classList.add("after-emission-description");
     }
   },
-})
-</script>
+});
+</script>