@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -0,0 +1,204 @@
+<template>
+  <PodcastInlineListTemplate
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    :display-arrow="false"
+    :popular-sort="popularSort"
+    :button-text="buttonText"
+    :button-plus="buttonPlus"
+    :title="title"
+    :href="href"
+    :iab-id="iabId"
+    :rubrique-id="rubriqueId"
+    :no-rubriquage-id="noRubriquageId"
+    :is-button-next-title="true"
+    @sortChrono="sortChrono"
+    @sortPopular="sortPopular"
+  >
+    <template #list-inline>
+      <ClassicLoading
+        :loading-text="loading?$t('Loading podcasts ...'):undefined"
+      />
+      <swiper
+        v-if="!loading"
+        :slides-per-view="numberItem"
+        :space-between="10"
+        :loop="allPodcasts.length>=numberItem"
+        :navigation="true"
+        :modules="modules"
+      >
+        <swiper-slide
+          v-for="p in allPodcasts"
+          :key="p.podcastId"
+        >
+          <PodcastItem
+            class="flex-shrink-0 item-phone-margin"
+            :podcast="p"
+          />
+        </swiper-slide>
+      </swiper>
+    </template>
+  </PodcastInlineListTemplate>
+</template>
+
+<script lang="ts">
+import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
+import octopusApi from '@saooti/octopus-api';
+import domHelper from '../../../helper/dom';
+import PodcastItem from './PodcastItem.vue';
+import { state } from '../../../store/paramStore';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation } from "swiper";
+import "swiper/css";
+import "swiper/css/navigation";
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastSwiperList',
+  
+  components: {
+    PodcastInlineListTemplate,
+    PodcastItem,
+    ClassicLoading,
+    Swiper,
+    SwiperSlide,
+  },
+
+  props: {
+    organisationId: { default: undefined, type: 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},
+  },
+  emits: ['update:isArrow'],
+
+  data() {
+    return {
+      loading: true as boolean,
+      popularSort: false as boolean,
+      allPodcasts: [] as Array<Podcast>,
+      modules: [Navigation],
+      numberItem: 5 as number
+    };
+  },
+  computed: {
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    organisation(): string|undefined {
+      return this.organisationId ?? this.filterOrga;
+    },
+    watchVariable():string{
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
+    },
+    sizeItem(): number {
+      return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
+    },
+  },
+  watch: {
+    watchVariable(): void {
+      this.reset();
+      this.fetchNext();
+    },
+  },
+  
+  created() {
+    if (undefined !== this.requirePopularSort) {
+      this.popularSort = this.requirePopularSort;
+    }
+    if (undefined !== this.isArrow) {
+      this.$emit('update:isArrow', true);
+    }
+    window.addEventListener('resize', this.handleResize);
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+
+  mounted() {
+    this.handleResize();
+    this.fetchNext();
+  },
+  methods: {
+    handleResize(): void {
+      if (!this.$el) return;
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
+      this.numberItem = Math.floor(width / sixteen);
+    },
+    async fetchNext(): Promise<void> {
+      const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
+        first: 0,
+        size: 10,
+        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,
+      }, true);
+      this.allPodcasts = this.allPodcasts.concat(
+        data.result.filter((pod: Podcast|null) => null !== pod)
+      );
+      this.loading = false;
+    },
+    sortPopular(): void {
+      if (this.popularSort) return;
+      this.popularSort = true;
+      this.reset();
+      this.fetchNext();
+    },
+    sortChrono(): void {
+      if (!this.popularSort) return;
+      this.popularSort = false;
+      this.reset();
+      this.fetchNext();
+    },
+    reset(): void {
+      this.loading = true;
+      this.allPodcasts.length = 0;
+    },
+  },
+})
+</script>
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+.swiper-button-next, .swiper-button-prev{
+  color: $octopus-primary-color !important;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  width: 50px;
+}
+.swiper-button-next{
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,#fafafa 50%, #fafafa 100%);
+  right: 0;
+}
+.swiper-button-prev{
+  background: linear-gradient(90deg, #fafafa 0%,#fafafa 50%, rgba(255, 255, 255, 0) 100%);
+  left: 0;
+}
+
+.swiper-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

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

@@ -1,49 +1,70 @@
 <template>
-  <div v-if="undefined !== tagList">
-    <ul class="d-flex flex-wrap">
-      <li class="tagListElement" v-for="tag in tagList" :key="tag">
-        <router-link
-          :to="{
-            name: 'search',
-            query: {
-              query: tag,
-              productor: $store.state.filter.organisationId,
-            },
-          }"
-          class="tagListLink"
-          >{{ tag }}</router-link
+  <div
+    v-if="undefined !== tagList && 0!==tagList.length"
+    class="tag-list-component d-flex align-items-center flex-wrap"
+  >
+    <div class="fw-bold">
+      {{ $t('Podcast tags') + ": " }}
+    </div>
+    <div
+      v-for="(tag, index) in tagList"
+      :key="tag"
+      class="tag-list-element"
+    >
+      <div
+        :id="'tag-list-from-podcast-page'+index"
+        role="button"
+      >
+        <img
+          v-if="isOuestFranceTag(tag)"
+          class="ouest-france-logo"
+          alt="Ouest France Logo"
+          src="/img/ouest_france_logo.svg"
         >
-      </li>
-    </ul>
+        {{ formateOfTag(tag) }}
+      </div>
+      <Popover
+        v-if="isOuestFranceTag(tag)"
+        :target="'tag-list-from-podcast-page'+index"
+        triggers="hover"
+        :content="tag.substring(4,tag.length)"
+        placement="bottom"
+      />
+    </div>
   </div>
 </template>
-<style lang="scss">
-.tagListElement {
-  display: flex;
-  margin: 0.4rem;
-  padding: 0.8rem;
-  border: 1px solid #999;
-  cursor: pointer;
-}
-.tagListLink {
-  font-weight: 700;
-  font-size: 1.2rem;
-  color: #666;
-  &:hover {
-    color: #666;
-  }
-}
-</style>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import Popover from '../../misc/Popover.vue';
+import { tagOfMixins } from '../../mixins/tagOfMixins';
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'TagList',
-  components: {},
+  components: {
+    Popover
+  },
+  mixins:[tagOfMixins],
   props: {
-    tagList: { default: () => ([])  as Array<string>},
+    tagList: { default: () => [], type: Array as ()=>Array<string>},
   },
-
-  methods: {},
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+.tag-list-component{
+  .ouest-france-logo{
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+  }
+  .tag-list-element {
+    display: flex;
+    margin: 0.4rem;
+    padding: 0.2rem;
+    border: 1px solid #999;
+    border-radius: 0.5rem;
+  }
+}
+}
+</style>

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

@@ -1,15 +1,23 @@
 <template>
-  <div class="default-multiselect-width" :style="{ width: width }">
-    <label :for="id" class="d-inline" aria-label="select rubrique"></label>
-    <Multiselect
-      v-model="model"
+  <div
+    class="default-multiselect-width"
+    :style="{ width: width }"
+  >
+    <label
+      :for="id"
+      class="d-inline"
+      title="select rubrique"
+    />
+    <VueMultiselect
       :id="id"
+      ref="multiselectRef"
+      v-model="model"
       :disabled="isDisabled"
       class="rubriqueChooser"
       label="name"
       track-by="rubriqueId"
+      :aria-expanded="false"
       :placeholder="$t('Type string to filter by rubrics')"
-      ref="multiselectRef"
       :options="rubriques"
       :multiple="multiple"
       :searchable="true"
@@ -22,67 +30,74 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      @open="clearAll"
+      @open="onOpen"
       @search-change="onSearchRubrique"
-      @close="onClose"
       @select="onRubriqueSelected"
     >
-      <template slot="singleLabel" slot-scope="props">
+      <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
           <span class="option__title">
-            {{ props.option.name }}
+            {{ option.name }}
           </span>
         </div>
       </template>
-      <template slot="option" slot-scope="props" v-if="undefined!==props.option">
+      <template
+        #option="{ option }"
+      >
         <div
+          v-if="undefined!==option"
           class="multiselect-octopus-proposition"
-          :class="props.option.rubriqueId <= 0 ? 'primary-dark' : ''"
-          :data-selenium="'rubric-chooser-' + seleniumFormat(props.option.name)"
+          :class="option.rubriqueId <= 0 ? 'primary-darker' : ''"
+          :data-selenium="'rubric-chooser-' + seleniumFormat(option.name)"
         >
-          <span class="option__title">{{ props.option.name }}</span>
+          <span class="option__title">{{ option.name }}</span>
         </div>
       </template>
-      <template slot="noOptions">{{ $t('List is empty') }}</template>
-      <span slot="noResult">
+      <template #noOptions>
+        {{ $t('List is empty') }}
+      </template>
+      <template #noResult>
         {{ $t('No elements found. Consider changing the search query.') }}
-      </span>
-      <span
-        class="saooti-arrow_down octopus-arrow-down octopus-arrow-down-top"
-        slot="caret"
-      ></span>
-    </Multiselect>
+      </template>
+      <template #caret>
+        <span class="saooti-down octopus-arrow-down" />
+      </template>
+    </VueMultiselect>
   </div>
 </template>
 
-<style lang="scss"></style>
 <script lang="ts">
 import { selenium } from '../../mixins/functions';
-import Multiselect from 'vue-multiselect';
-import { Rubrique } from '@/store/class/rubrique';
+//@ts-ignore
+import VueMultiselect from 'vue-multiselect';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
 const getDefaultRubrique = (defaultName: string) => {
   if ('' === defaultName){
     return undefined;
   }
-  return { name: defaultName, rubriqueId: 0 };
+  return { name: defaultName, rubriqueId: 0 } as Rubrique;
 };
 
-export default selenium.extend({
+import { defineComponent } from 'vue'
+export default defineComponent({
   components: {
-    Multiselect,
+    VueMultiselect,
   },
+  mixins:[selenium],
   props: {
-    width: { default: '100%' as string },
-    defaultanswer: { default: '' as string },
-    rubriqueSelected: { default: undefined as number|undefined },
-    multiple: { default: false as boolean },
-    rubriqueArray: { default: undefined as Array<number>|undefined },
-    rubriquageId: { default: undefined as number|undefined },
-    allRubriques: { default: () => ([])  as Array<Rubrique>|undefined },
-    reset: { default: false as boolean },
-    withoutRubrique: { default: false as boolean },
-    isDisabled: { default: false as boolean },
+    width: { default: '100%', type: String },
+    defaultanswer: { default: '', type: String },
+    rubriqueSelected: { default: undefined, type: Number },
+    multiple: { default: false, type: Boolean },
+    rubriqueArray: { default: undefined, type: Object as ()=>Array<number> },
+    rubriquageId: { default: undefined, type: Number },
+    allRubriques: { default: () => [], type: Array as ()=> Array<Rubrique> },
+    reset: { default: false, type: Boolean },
+    withoutRubrique: { default: false, type: Boolean },
+    isDisabled: { default: false, type: Boolean },
+    cannotBeUndefined: {default: false, type: Boolean}
   },
+  emits: ['update:rubriqueSelected', 'selected'],
 
   data() {
     return {
@@ -90,84 +105,107 @@ export default selenium.extend({
       rubrique: getDefaultRubrique(this.defaultanswer) as Rubrique|undefined,
       rubriqueForArray: [] as Array<Rubrique>,
       isLoading: false as boolean,
-      withoutItem: { name: this.$t('Without rubric'), rubriqueId: -1 } as any,
+      withoutItem: { name: this.$t('Without rubric'), rubriqueId: -1 } as {name: string, rubriqueId:number},
     };
   },
-  mounted() {
-    if (undefined !== this.rubriqueSelected) {
-      this.initRubriqueSelected(this.rubriqueSelected);
-    }
-    if (undefined !== this.rubriqueArray) {
-      this.initRubriqueArray(this.rubriqueArray);
-    }
-  },
   computed: {
     id(): string {
-      if (this.rubriquageId) return 'rubriqueChooser' + this.rubriquageId;
-      return 'rubriqueChooser';
+      return this.rubriquageId? 'rubriqueChooser' + this.rubriquageId : 'rubriqueChooser';
     },
     model: {
       get(): Rubrique| Array<Rubrique>|undefined{
-        if(false===this.multiple){
-          return this.rubrique;
-        }
-        return this.rubriqueForArray;
+        return false===this.multiple ? this.rubrique:this.rubriqueForArray;
       },
-      set(value: any): void{
+      set(value: Rubrique| Array<Rubrique>|undefined): void{
         if(false===this.multiple){
-          this.rubrique = value;
+          this.rubrique = (value as Rubrique|undefined);
           return
         }
-        this.rubriqueForArray = value;
+        this.rubriqueForArray = (value as Array<Rubrique>);
       }
 
     }
   },
+  watch: {
+    model:{
+      deep: true,
+      handler(){
+        if(false===this.multiple){
+          return;
+        }
+        const selected: Array<Rubrique> = JSON.parse(JSON.stringify(this.model));
+        const idsArray: Array<number> = [];
+        selected.forEach((el: Rubrique) => {
+          if(el.rubriqueId){
+            idsArray.push(el.rubriqueId);
+          }
+        });
+        this.$emit('selected', idsArray);
+      }
+    },
+    rubriqueSelected: {
+      deep: true,
+      handler(){
+        if (undefined !== this.rubriqueSelected) {
+          this.initRubriqueSelected(this.rubriqueSelected);
+        }
+      }
+    },
+    reset(): void {
+      this.rubrique = getDefaultRubrique(this.defaultanswer);
+    }
+  },
+  mounted() {
+    if (undefined !== this.rubriqueSelected) {
+      this.initRubriqueSelected(this.rubriqueSelected);
+    }
+    if (undefined !== this.rubriqueArray) {
+      this.initRubriqueArray(this.rubriqueArray);
+    }
+  },
   methods: {
     initRubriquesArray(): Array<Rubrique>{
       if ('' === this.defaultanswer) {
         return this.allRubriques;
       }
+      const rubriqueDefault = getDefaultRubrique(this.defaultanswer);
+      if(!rubriqueDefault){
+        return this.allRubriques;
+      }
       if (this.withoutRubrique) {
         return [
-          getDefaultRubrique(this.defaultanswer),
+          rubriqueDefault,
           this.withoutItem,
         ].concat(this.allRubriques);
-      } else {
-        return [(getDefaultRubrique(this.defaultanswer) as Rubrique)].concat(
-          this.allRubriques
-        );
       }
+      return [rubriqueDefault].concat(this.allRubriques);
     },
-    clearAll(): void {
-      (this.$refs.multiselectRef as any).$refs.search.setAttribute(
+    onOpen(): void {
+      (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
-      if (undefined === this.rubriqueArray) {
-        this.rubrique = undefined;
-      }
       this.rubriques = this.initRubriquesArray();
     },
     onClose(): void {
       if (this.rubrique || undefined !== this.rubriqueArray) return;
-      if ('' !== this.defaultanswer) {
-        this.rubrique = getDefaultRubrique(this.defaultanswer);
-      } else {
-        this.rubrique = undefined;
+      if(this.cannotBeUndefined && undefined !== this.rubriqueSelected){
+        this.initRubriqueSelected(this.rubriqueSelected);
+        return;
       }
+      this.rubrique ='' !== this.defaultanswer? getDefaultRubrique(this.defaultanswer): undefined;
       this.onRubriqueSelected(this.rubrique);
     },
-    onSearchRubrique(query?: string): void {
+    onSearchRubrique(query: string): void {
       this.isLoading = true;
       this.rubriques = this.initRubriquesArray().filter((item: Rubrique) => {
-        return item.name!.toUpperCase().includes(query!.toUpperCase());
+        return item.name.toUpperCase().includes(query.toUpperCase());
       });
       this.isLoading = false;
     },
     onRubriqueSelected(rubrique: Rubrique|undefined): void {
-      if (undefined !== this.rubriqueSelected) {
-        this.$emit('update:rubriqueSelected', rubrique!.rubriqueId);
+      if (undefined !== this.rubriqueSelected && rubrique) {
+        this.$emit('update:rubriqueSelected', rubrique.rubriqueId);
       }
       if (false === this.multiple) {
         this.$emit('selected', rubrique);
@@ -185,29 +223,10 @@ export default selenium.extend({
           return el.rubriqueId === element;
         });
         if(undefined!==item){
-          this.rubriqueForArray!.push(item);
+          this.rubriqueForArray.push(item);
         }
       });
     },
   },
-  watch: {
-    model(): void {
-      if(false===this.multiple){
-        return;
-      }
-      const selected: Array<Rubrique> = JSON.parse(JSON.stringify(this.model));
-      const idsArray: Array<number> = [];
-      selected.forEach((el: Rubrique) => {
-        idsArray.push(el.rubriqueId!);
-      });
-      this.$emit('selected', idsArray);
-    },
-    rubriqueSelected(): void {
-      this.initRubriqueSelected(this.rubriqueSelected);
-    },
-    reset(): void {
-      this.rubrique = getDefaultRubrique(this.defaultanswer);
-    }
-  },
-});
-</script>
+})
+</script>