@saooti/octopus-sdk 37.0.5 → 37.0.7

package/src/components/display/rubriques/RubriqueList.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
-    <div
-      ref="rubriqueListContainer"
-      class="rubrique-list-container"
-    >
-      <label
-        for="rubrique-list-select"
-        class="hid"
-      >{{ $t('By topic') }}</label>
+    <div ref="rubriqueListContainer" class="rubrique-list-container">
+      <label for="rubrique-list-select" class="hid">{{ $t("By topic") }}</label>
       <select
         id="rubrique-list-select"
         v-model="rubriquage"
@@ -38,7 +32,7 @@
       class="btn btn-primary btn-on-dark m-1 saooti-more"
       :title="$t('See more')"
     />
-    <Popover
+    <ClassicPopover
       ref="popoverRubrique"
       target="rubriques-dropdown"
       :only-click="true"
@@ -53,112 +47,137 @@
         width="auto"
         @selected="addFilterFromPopover($event)"
       />
-    </Popover>
+    </ClassicPopover>
   </div>
 </template>
 
 <script lang="ts">
-import Popover from '../../misc/Popover.vue';
-import { Rubrique } from '@/stores/class/rubrique/rubrique';
-import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState, mapActions } from 'pinia';
-import { defineAsyncComponent, defineComponent } from 'vue';
-const RubriqueChooser = defineAsyncComponent(() => import('../rubriques/RubriqueChooser.vue'));
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState, mapActions } from "pinia";
+import { defineAsyncComponent, defineComponent } from "vue";
+const RubriqueChooser = defineAsyncComponent(
+  () => import("../rubriques/RubriqueChooser.vue"),
+);
 export default defineComponent({
-  name: 'RubriqueList',
+  name: "RubriqueList",
 
-  components:{
-    Popover,
-    RubriqueChooser
+  components: {
+    ClassicPopover,
+    RubriqueChooser,
   },
 
   props: {
-    rubriquages: { default: () => [], type: Array as ()=>Array<Rubriquage>},
+    rubriquages: { default: () => [], type: Array as () => Array<Rubriquage> },
   },
-  
 
   data() {
     return {
       hidenRubriques: [] as Array<Rubrique>,
       rubriques: [] as Array<Rubrique>,
-      rubriquage: undefined as Rubriquage|undefined,
+      rubriquage: undefined as Rubriquage | undefined,
     };
   },
 
   computed: {
-    ...mapState(useFilterStore, ['filterRubrique', 'filterRubriqueDisplay']),
-    rubriqueDisplay(): Array<Rubrique>{
-      return this.filterRubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
+    ...mapState(useFilterStore, ["filterRubrique", "filterRubriqueDisplay"]),
+    rubriqueDisplay(): Array<Rubrique> {
+      return this.filterRubriqueDisplay.filter(
+        (rubrique: Rubrique) => 0 !== rubrique.podcastCount,
+      );
     },
-    rubriquageDisplay(): Array<Rubriquage>{
+    rubriquageDisplay(): Array<Rubriquage> {
       const elementToNotShow = Array.from(this.filterRubrique);
-      if(elementToNotShow.length){
-        const rubriquageIdToNotShow = elementToNotShow.map(a => a.rubriquageId);
-        return this.rubriquages.filter((element)=>{
-          if(!element.rubriquageId){return;}
+      if (elementToNotShow.length) {
+        const rubriquageIdToNotShow = elementToNotShow.map(
+          (a) => a.rubriquageId,
+        );
+        return this.rubriquages.filter((element) => {
+          if (!element.rubriquageId) {
+            return;
+          }
           return !rubriquageIdToNotShow.includes(element.rubriquageId);
         });
       }
       return this.rubriquages;
     },
   },
-  watch:{
-    filterRubrique:{
+  watch: {
+    filterRubrique: {
       deep: true,
-      handler(){
+      handler() {
         this.selectNewRubriquage();
-      }
-    }
+      },
+    },
   },
 
   mounted() {
     this.selectNewRubriquage();
   },
   beforeUnmount(): void {
-    window.removeEventListener('resize', this.resizeWindow);
+    window.removeEventListener("resize", this.resizeWindow);
   },
   methods: {
-    ...mapActions(useFilterStore, ['filterUpdateRubrique', 'filterUpdateRubriqueDisplay']),
-    initRubriques(): void{
-      if(!this.rubriquage){ return ;}
+    ...mapActions(useFilterStore, [
+      "filterUpdateRubrique",
+      "filterUpdateRubriqueDisplay",
+    ]),
+    initRubriques(): void {
+      if (!this.rubriquage) {
+        return;
+      }
       this.filterUpdateRubriqueDisplay(this.rubriquage.rubriques);
-      window.addEventListener('resize', this.resizeWindow);
+      window.addEventListener("resize", this.resizeWindow);
       this.$nextTick(() => {
         this.resizeWindow();
       });
     },
-    addFilterFromPopover(rubrique: Rubrique): void{
+    addFilterFromPopover(rubrique: Rubrique): void {
       (this.$refs.popoverRubrique as InstanceType<typeof Popover>).clearClick();
       this.addFilter(rubrique);
     },
-    addFilter(rubrique: Rubrique): void{
-      if(!this.rubriquage){ return ;}
+    addFilter(rubrique: Rubrique): void {
+      if (!this.rubriquage) {
+        return;
+      }
       const filterToAdd = {
-        rubriquageId: this.rubriquage.rubriquageId??0, 
-        rubriqueId: rubrique.rubriqueId??0, 
+        rubriquageId: this.rubriquage.rubriquageId ?? 0,
+        rubriqueId: rubrique.rubriqueId ?? 0,
         nameRubriquage: this.rubriquage.title,
-        nameRubrique: rubrique.name
+        nameRubrique: rubrique.name,
       };
-      const newFilter: Array<RubriquageFilter> = Array.from(this.filterRubrique);
+      const newFilter: Array<RubriquageFilter> = Array.from(
+        this.filterRubrique,
+      );
       newFilter.push(filterToAdd);
       this.filterUpdateRubrique(newFilter);
       const queries = this.$route.query;
-      const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
-      this.$router.replace({ query: { ...queries, ...{ rubriquesId: queryString }} });
+      const queryString = newFilter
+        .map((value) => value.rubriquageId + ":" + value.rubriqueId)
+        .join();
+      this.$router.replace({
+        query: { ...queries, ...{ rubriquesId: queryString } },
+      });
       this.selectNewRubriquage();
     },
-    selectNewRubriquage(){
+    selectNewRubriquage() {
       const rubriquageLength = this.rubriquages.length;
-      if(rubriquageLength === this.filterRubrique.length){
+      if (rubriquageLength === this.filterRubrique.length) {
         return;
       }
       let index = 0;
-      const rubriquageAlreadyFilter = this.filterRubrique.map(a => a.rubriquageId);
+      const rubriquageAlreadyFilter = this.filterRubrique.map(
+        (a) => a.rubriquageId,
+      );
       for (index; index < rubriquageLength; index++) {
         const rubriquageIdIndex = this.rubriquages[index].rubriquageId;
-        if(rubriquageIdIndex && !rubriquageAlreadyFilter.includes(rubriquageIdIndex)){
+        if (
+          rubriquageIdIndex &&
+          !rubriquageAlreadyFilter.includes(rubriquageIdIndex)
+        ) {
           break;
         }
       }
@@ -166,58 +185,67 @@ export default defineComponent({
       this.initRubriques();
     },
     resizeWindow(): void {
-      const rubriqueList = (this.$refs.rubriqueListContainer as HTMLElement);
-      if(null === rubriqueList){return}
-      rubriqueList.style.justifyContent = 'flex-start';
+      const rubriqueList = this.$refs.rubriqueListContainer as HTMLElement;
+      if (null === rubriqueList) {
+        return;
+      }
+      rubriqueList.style.justifyContent = "flex-start";
       this.hidenRubriques.length = 0;
       this.rubriqueDisplay.forEach((element: Rubrique) => {
-        const el = (this.$refs['rubrique' + element.rubriqueId] as Array<HTMLElement>)[0];
+        const el = (
+          this.$refs["rubrique" + element.rubriqueId] as Array<HTMLElement>
+        )[0];
         if (!el) return;
-        if (el.classList.contains('hid')) {
-          el.classList.remove('hid');
+        if (el.classList.contains("hid")) {
+          el.classList.remove("hid");
         }
       });
       this.rubriqueDisplay.forEach((element: Rubrique) => {
-        const el = (this.$refs['rubrique' + element.rubriqueId] as Array<HTMLElement>)[0];
+        const el = (
+          this.$refs["rubrique" + element.rubriqueId] as Array<HTMLElement>
+        )[0];
         if (!el) return;
         const parent = el.parentElement;
-        if (null !== parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
+        if (
+          null !== parent &&
+          el.offsetLeft + el.clientWidth <= parent.clientWidth - 20
+        ) {
           return;
         }
         this.hidenRubriques.push(element);
-        if (!el.classList.contains('hid')) {
-          el.className += ' hid';
+        if (!el.classList.contains("hid")) {
+          el.className += " hid";
         }
       });
       if (!this.hidenRubriques.length) {
-        rubriqueList.style.justifyContent = 'center';
+        rubriqueList.style.justifyContent = "center";
       }
     },
-    onRubriquageSelected(){
+    onRubriquageSelected() {
       this.initRubriques();
-    }
-  }
-})
+    },
+  },
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.rubrique-list-container {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  overflow: hidden;
-  flex-grow: 1;
-  width: 0;
-  padding: 0 4rem;
-  select{
-    width: auto;
-    border-radius: $octopus-borderradius;
-    margin: 0.25rem;
-    font-size: 0.6rem;
-    padding: 0.5rem;
+@import "@scss/_variables.scss";
+.octopus-app {
+  .rubrique-list-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    overflow: hidden;
+    flex-grow: 1;
+    width: 0;
+    padding: 0 4rem;
+    select {
+      width: auto;
+      border-radius: $octopus-borderradius;
+      margin: 0.25rem;
+      font-size: 0.6rem;
+      padding: 0.5rem;
+    }
   }
 }
-}
-</style>
+</style>

package/src/components/display/sharing/PlayerParameters.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="h4 mb-2 mt-3">
-    {{ $t('player parameters') }}
+    {{ $t("player parameters") }}
   </div>
-  <template
-    v-if="choseNumberEpisode"
-  >
+  <template v-if="choseNumberEpisode">
     <div
       v-if="displayChoiceAllEpisodes"
       class="d-flex align-items-center flex-wrap mt-1"
@@ -15,8 +13,8 @@
         type="radio"
         name="episodeNumbers"
         value="all"
-      >
-      <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
+      />
+      <span class="flex-shrink-0">{{ $t("Show every episode") }}</span>
     </div>
     <div
       class="d-flex align-items-center flex-wrap"
@@ -29,21 +27,18 @@
         type="radio"
         name="episodeNumbers"
         value="number"
-      >
-      <span class="flex-shrink-0">{{ $t('Show') }}</span>
+      />
+      <span class="flex-shrink-0">{{ $t("Show") }}</span>
       <input
         id="number-input"
         v-model="iFrameNumber"
         type="number"
         min="1"
         max="50"
-        class="input-share-player  text-center m-2"
-      >
-      <label
-        for="number-input"
-        :title="$t('Number of player podcasts')"
+        class="input-share-player text-center m-2"
       />
-      <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
+      <label for="number-input" :title="$t('Number of player podcasts')" />
+      <span class="flex-shrink-0">{{ $t("Last podcasts") }}</span>
     </div>
     <ClassicCheckbox
       v-model:textInit="proceedReading"
@@ -76,30 +71,38 @@
 </template>
 
 <script lang="ts">
-import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { defineComponent } from 'vue'
+import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
-  components:{
-    ClassicCheckbox
+  components: {
+    ClassicCheckbox,
   },
   props: {
-    isVisible: { default: false, type: Boolean},
-    choseNumberEpisode: {default: false, type: Boolean},
-    displayChoiceAllEpisodes: {default: false, type: Boolean},
-    displayTranscriptParam: {default: false, type: Boolean},
-    displayArticleParam: {default: false, type: Boolean},
+    isVisible: { default: false, type: Boolean },
+    choseNumberEpisode: { default: false, type: Boolean },
+    displayChoiceAllEpisodes: { default: false, type: Boolean },
+    displayTranscriptParam: { default: false, type: Boolean },
+    displayArticleParam: { default: false, type: Boolean },
   },
-  emits: ['episodeNumbers', 'proceedReading', 'isVisible', 'iFrameNumber', 'displayArticle', 'displayTranscript', 'displayWave'],
+  emits: [
+    "episodeNumbers",
+    "proceedReading",
+    "isVisible",
+    "iFrameNumber",
+    "displayArticle",
+    "displayTranscript",
+    "displayWave",
+  ],
 
   data() {
     return {
       proceedReading: true as boolean,
-      episodeNumbers: 'number' as string,
-      iFrameNumberPriv: '3' as string,
+      episodeNumbers: "number" as string,
+      iFrameNumberPriv: "3" as string,
       isVisibleTemp: this.isVisible,
       displayArticle: true as boolean,
-      displayTranscript:true as boolean,
-      displayWave:true as boolean,
+      displayTranscript: true as boolean,
+      displayWave: true as boolean,
     };
   },
   computed: {
@@ -117,39 +120,39 @@ export default defineComponent({
   },
   watch: {
     episodeNumbers(): void {
-      this.$emit('episodeNumbers', this.episodeNumbers);
+      this.$emit("episodeNumbers", this.episodeNumbers);
     },
     proceedReading(): void {
-      this.$emit('proceedReading', this.proceedReading);
+      this.$emit("proceedReading", this.proceedReading);
     },
     isVisibleTemp(): void {
-      this.$emit('isVisible', this.isVisibleTemp);
+      this.$emit("isVisible", this.isVisibleTemp);
     },
     isVisible(): void {
       this.isVisibleTemp = this.isVisible;
     },
     iFrameNumberPriv(): void {
-      this.$emit('iFrameNumber', this.iFrameNumberPriv);
+      this.$emit("iFrameNumber", this.iFrameNumberPriv);
+    },
+    displayArticle(): void {
+      this.$emit("displayArticle", this.displayArticle);
     },
-    displayArticle(): void{
-      this.$emit('displayArticle', this.displayArticle);
+    displayTranscript(): void {
+      this.$emit("displayTranscript", this.displayTranscript);
     },
-    displayTranscript(): void{
-      this.$emit('displayTranscript', this.displayTranscript);
+    displayWave(): void {
+      this.$emit("displayWave", this.displayWave);
     },
-    displayWave(): void{
-      this.$emit('displayWave', this.displayWave);
-    }
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .input-share-player {
     border: 1px solid #ddd;
     border-radius: 50px;
     width: 60px;
   }
 }
-</style>
+</style>

package/src/components/display/sharing/QrCode.vue

@@ -6,94 +6,100 @@
       level="H"
       :foreground="color"
       class="myQrCode"
-      :margin="2" 
+      :margin="2"
     />
     <ClassicCheckbox
-      v-if="'#000000'!==otherColor"
+      v-if="'#000000' !== otherColor"
       v-model:textInit="isNotBlack"
       class="flex-shrink-0"
       id-checkbox="is-black-qr-code"
       :label="$t('Use organization color')"
     />
-    <button
-      class="btn m-3"
-      @click="download"
-    >
-      {{ $t('Download') }}
+    <button class="btn m-3" @click="download">
+      {{ $t("Download") }}
     </button>
-    <Snackbar
-      ref="snackbar"
-      position="bottom-left"
-    />
+    <SnackBar ref="snackbar" position="bottom-left" />
   </div>
 </template>
 
 <script lang="ts">
-import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { state } from '../../../stores/ParamSdkStore';
-import octopusApi from '@saooti/octopus-api';
-import Snackbar from '../../misc/Snackbar.vue';
-import QrcodeVue from 'qrcode.vue';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue'
+import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
+import SnackBar from "../../misc/SnackBar.vue";
+import QrcodeVue from "qrcode.vue";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'QrCode',
+  name: "QrCode",
 
   components: {
-    Snackbar,
+    SnackBar,
     QrcodeVue,
-    ClassicCheckbox
+    ClassicCheckbox,
   },
   props: {
-    url: { default: '', type: String},
+    url: { default: "", type: String },
   },
   data() {
     return {
       size: 200 as number,
       color: "#000000" as string,
-      otherColor:"#000000" as string,
+      otherColor: "#000000" as string,
       isNotBlack: false as boolean,
     };
   },
-  computed:{
-    ...mapState(useAuthStore, ['authOrganisation']),
+  computed: {
+    ...mapState(useAuthStore, ["authOrganisation"]),
   },
-  watch:{
-    isNotBlack(){
+  watch: {
+    isNotBlack() {
       this.color = this.isNotBlack ? this.otherColor : "#000000";
-    }
+    },
   },
-  created(){
+  created() {
     this.initColor();
   },
-  methods:{
-    download(): void{
-      const link = document.createElement('a');
-      link.download = 'qrcode.png';
-      const canvas = document.getElementsByClassName('myQrCode');
-      if(canvas && canvas.length > 0 && canvas[0]){
+  methods: {
+    download(): void {
+      const link = document.createElement("a");
+      link.download = "qrcode.png";
+      const canvas = document.getElementsByClassName("myQrCode");
+      if (canvas && canvas.length > 0 && canvas[0]) {
         link.href = (canvas[0] as HTMLCanvasElement).toDataURL();
         link.click();
-        (this.$refs.snackbar as InstanceType<typeof Snackbar>).open(this.$t('Download started'));
+        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+          this.$t("Download started"),
+        );
       }
     },
     async initColor(): Promise<void> {
-      if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
+      if (
+        state.generalParameters.podcastmaker &&
+        state.generalParameters.podcastmakerColor
+      ) {
         this.otherColor = state.generalParameters.podcastmakerColor;
         return;
       }
       if (!state.generalParameters.authenticated) return;
       let data;
-      if(""!==this.authOrganisation.id && this.authOrganisation.attributes && Object.keys(this.authOrganisation.attributes).length > 1){
+      if (
+        "" !== this.authOrganisation.id &&
+        this.authOrganisation.attributes &&
+        Object.keys(this.authOrganisation.attributes).length > 1
+      ) {
         data = this.authOrganisation.attributes;
-      }else{
-        data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
+      } else {
+        data = await octopusApi.fetchData<{ [key: string]: string }>(
+          0,
+          "organisation/attributes/" + state.generalParameters.organisationId,
+        );
       }
-      if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
-        this.otherColor = (data.COLOR as string);
+      if (Object.prototype.hasOwnProperty.call(data, "COLOR")) {
+        this.otherColor = data.COLOR as string;
       }
     },
-  }
-})
-</script>
+  },
+});
+</script>