@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/display/emission/EmissionInlineList.vue

@@ -1,78 +1,71 @@
 <template>
   <div class="d-flex flex-column p-3 list-episode">
-    <div class="d-flex justify-content-end" v-if="!overflowScroll">
+    <div
+      v-if="!overflowScroll"
+      class="d-flex justify-content-end"
+    >
       <div class="hide-phone">
         <button
           class="btn btn-arrow"
-          @click="displayPrevious()"
           :class="{ disabled: !previousAvailable }"
           :aria-label="$t('Display previous')"
+          @click="displayPrevious()"
         >
-          <div class="saooti-arrow-left2"></div>
+          <div class="saooti-arrow-left2" />
         </button>
         <button
           class="btn btn-arrow"
-          @click="displayNext()"
           :class="{ disabled: !nextAvailable }"
           :aria-label="$t('Display next')"
+          @click="displayNext()"
         >
-          <div class="saooti-arrow-right2"></div>
+          <div class="saooti-arrow-right2" />
         </button>
       </div>
     </div>
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading emissions ...') }}</h3>
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading emissions ...') }}
+      </h3>
     </div>
     <transition-group
-      :name="transitionName"
-      class="podcast-list-inline"
-      tag="ul"
       v-show="
         (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
       "
+      :name="transitionName"
+      class="podcast-list-inline"
+      tag="ul"
       :class="[
         alignLeft ? 'justify-content-start' : '',
         overflowScroll ? 'overflowScroll' : '',
       ]"
     >
       <EmissionPlayerItem
+        v-for="e in emissions"
+        :key="e.emissionId"
         class="flex-shrink item-phone-margin"
         :emission="e"
-        v-for="e in emissions"
-        v-bind:key="e.emissionId"
-        :class="[alignLeft ? 'mr-3' : '', mainRubriquage(e)]"
-        :nbPodcasts="nbPodcasts"
-        :rubriqueName="rubriquesId(e)"
+        :class="[alignLeft ? 'me-3' : '', mainRubriquage(e)]"
+        :nb-podcasts="nbPodcasts"
+        :rubrique-name="rubriquesId(e)"
       />
     </transition-group>
-    <router-link v-bind:to="href" class="btn btn-link" v-if="!overflowScroll">{{
-      buttonText
-    }}</router-link>
+    <router-link
+      v-if="!overflowScroll"
+      :to="href"
+      class="btn btn-link"
+    >
+      {{
+        buttonText
+      }}
+    </router-link>
   </div>
 </template>
 
-<style lang="scss">
-.podcast-list-inline.overflowScroll {
-  display: flex;
-  flex-wrap: wrap;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-  padding-bottom: 1rem;
-  width: 100%;
-  height: 80vh;
-  overflow-y: auto;
-  @media (max-width: 960px) {
-    overflow-x: hidden;
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-  .item-phone-margin {
-    margin: 1rem 0.5rem !important;
-  }
-}
-</style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import domHelper from '../../../helper/dom';
@@ -81,78 +74,80 @@ import { state } from '../../../store/paramStore';
 
 const PHONE_WIDTH = 960;
 
+import { Emission } from '@/store/class/emission';
+import { Rubrique } from '@/store/class/rubrique';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'EmissionInlineList',
 
-  props: [
-    'organisationId',
-    'href',
-    'buttonText',
-    'rubriqueId',
-    'rubriquageId',
-    'nbPodcasts',
-    'itemSize',
-  ],
-
   components: {
     EmissionPlayerItem,
   },
-
-  created() {
-    window.addEventListener('resize', this.handleResize);
-  },
-
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-
-  mounted() {
-    this.handleResize();
-    this.fetchNext();
-    if (this.displayRubriquage) {
-      this.fetchRubriques();
-    }
+  props: {
+    organisationId: { default: undefined, type: String},
+    href: { default: undefined, type: String},
+    buttonText: { default: undefined, type: String},
+    rubriqueId: { default: undefined, type: Number },
+    rubriquageId: { default: undefined, type: Number },
+    nbPodcasts: { default: undefined, type: Number },
+    itemSize: { default: undefined, type: Number },
   },
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      index: 0,
-      first: 0,
-      size: 5,
-      totalCount: 0,
-      popularSort: true,
-      allEmissions: [] as any,
-      direction: 1,
-      alignLeft: false,
-      rubriques: undefined as any,
+      loading: true as boolean,
+      loaded: true as boolean,
+      index: 0 as number,
+      first: 0 as number,
+      size: 5 as number,
+      totalCount: 0 as number,
+      popularSort: true as boolean,
+      allEmissions: [] as Array<Emission>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
+      rubriques: undefined as Array<Rubrique>|undefined,
     };
   },
 
+
   computed: {
-    emissions():any {
+    emissions(): Array<Emission> {
       return this.allEmissions.slice(this.index, this.index + this.size);
     },
-    overflowScroll() {
+    overflowScroll(): boolean {
       return state.emissionsPage.overflowScroll;
     },
-    previousAvailable():boolean {
+    previousAvailable(): boolean {
       return this.index > 0;
     },
-    nextAvailable():boolean {
+    nextAvailable(): boolean {
       return this.index + this.size < this.totalCount;
     },
-    displayRubriquage() {
+    displayRubriquage(): string {
       return state.emissionsPage.rubriquage;
     },
-    transitionName: ({ direction }:any) =>
-      direction > 0 ? 'out-left' : 'out-right',
+    transitionName(): string {
+      return this.direction > 0 ? 'out-left' : 'out-right';
+    }
+  },
+  
+  created() {
+    window.addEventListener('resize', this.handleResize);
   },
 
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchNext();
+    if (this.displayRubriquage) {
+      this.fetchRubriques();
+    }
+  },
   methods: {
-    async fetchNext() {
+    async fetchNext(): Promise<void> {
       const data = await octopusApi.fetchEmissions({
         first: this.first,
         size: this.size + 1,
@@ -174,7 +169,7 @@ export default defineComponent({
         });
       } */
       if (this.allEmissions.length + data.result.length < this.totalCount) {
-        let nexEl = data.result.pop();
+        const nexEl = data.result.pop();
         this.preloadImage(nexEl.imageUrl);
       }
       this.allEmissions = this.allEmissions.concat(data.result);
@@ -183,15 +178,13 @@ export default defineComponent({
       }
       this.first += this.size;
     },
-
-    displayPrevious() {
+    displayPrevious(): void {
       this.direction = -1;
       if (this.previousAvailable) {
         this.index -= 1;
       }
     },
-
-    displayNext() {
+    displayNext(): void {
       this.direction = 1;
       if (!this.nextAvailable) return;
       if (
@@ -202,8 +195,7 @@ export default defineComponent({
       }
       this.index += 1;
     },
-
-    handleResize() {
+    handleResize(): void {
       if (!this.$el) return;
       if (window.innerWidth <= PHONE_WIDTH) {
         this.size = 10;
@@ -213,15 +205,14 @@ export default defineComponent({
         this.size = 20;
         return;
       }
-      const width = this.$el.offsetWidth;
+      const width = (this.$el as HTMLElement).offsetWidth;
       let sixteen = domHelper.convertRemToPixels(13.7);
       if (this.itemSize) {
         sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
       }
       this.size = Math.floor(width / sixteen);
     },
-
-    reset() {
+    reset(): void {
       this.loading = true;
       this.loaded = true;
       this.index = 0;
@@ -229,16 +220,15 @@ export default defineComponent({
       this.totalCount = 0;
       this.allEmissions.length = 0;
     },
-
-    preloadImage(url: string) {
-      let img = new Image();
+    preloadImage(url: string): void {
+      const img = new Image();
       img.src = url;
     },
-    async fetchRubriques() {
+    async fetchRubriques(): Promise<void> {
       const data = await octopusApi.fetchTopic(this.displayRubriquage);
       this.rubriques = data.rubriques;
     },
-    rubriquesId(emission:any) {
+    rubriquesId(emission: Emission): string|undefined {
       if (
         !this.displayRubriquage ||
         !emission.rubriqueIds ||
@@ -247,19 +237,42 @@ export default defineComponent({
         !this.rubriques.length
       )
         return undefined;
-      let rubrique = this.rubriques.find(
-        (        element: { rubriqueId: any; }) => element.rubriqueId === emission.rubriqueIds[0]
+      const rubrique = this.rubriques.find(
+        (element: Rubrique) => element.rubriqueId && emission.rubriqueIds.includes(element.rubriqueId) && element.rubriquageId === parseInt(this.displayRubriquage)
       );
-      return rubrique.name;
+      if(rubrique){
+        return rubrique.name;
+      }
     },
-    mainRubriquage(emission: { rubriqueIds: any[]; }) {
+    mainRubriquage(emission: Emission): string {
       if (
         emission.rubriqueIds &&
-        emission.rubriqueIds[0] === state.emissionsPage.mainRubrique
+        emission.rubriqueIds.includes(state.emissionsPage.mainRubrique)
       )
         return 'partenaireRubrique';
       return '';
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.podcast-list-inline.overflowScroll {
+  display: flex;
+  flex-wrap: wrap;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  padding-bottom: 1rem;
+  width: 100%;
+  height: 80vh;
+  overflow-y: auto;
+  @media (max-width: 960px) {
+    overflow-x: hidden;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+  .item-phone-margin {
+    margin: 1rem 0.5rem !important;
+  }
+}
+</style>

package/src/components/display/emission/EmissionItem.vue

@@ -6,67 +6,77 @@
         ? 'noList emission-light-max-size'
         : 'emission-item-container shadow-element'
     "
-    v-if="activeEmission || editRight"
   >
     <router-link
       :to="{
         name: 'emission',
         params: { emissionId: emission.emissionId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
       :aria-label="$t('Emission')"
       class="text-dark"
     >
       <div
+        v-if="!lightItems"
         class="img-box"
         :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
-        v-if="!lightItems"
-      ></div>
-      <div class="d-flex" v-else>
+      />
+      <div
+        v-else
+        class="d-flex"
+      >
         <div
           class="img-box-light flex-shrink"
           :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
-        ></div>
-        <div class="emission-light-title">{{ name }}</div>
+        />
+        <div class="emission-light-title">
+          {{ name }}
+        </div>
       </div>
     </router-link>
-    <div class="emission-item-text" :class="lightItems ? 'p-0' : ''">
+    <div
+      class="emission-item-text"
+      :class="lightItems ? 'p-0' : ''"
+    >
       <router-link
         :to="{
           name: 'emission',
           params: { emissionId: emission.emissionId },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
         class="text-dark"
       >
-        <div class="emission-name" v-if="!lightItems">
+        <div
+          v-if="!lightItems"
+          class="emission-name"
+        >
           <img
+            v-if="!activeEmission && !isPodcastmaker && editRight"
             class="icon-caution"
             src="/img/caution.png"
-            v-if="!activeEmission && !isPodcastmaker && editRight"
             :title="$t('Emission have not podcasts')"
-          />{{ name }}
+          >{{ name }}
         </div>
         <div
           :id="'description-emission-container-' + emission.emissionId"
-          class="emission-description html-wysiwyg-content"
+          class="emission-description htms-wysiwyg-content"
           :class="lightItems ? 'emission-small-description' : ''"
         >
           <div
             :id="'description-emission-' + emission.emissionId"
             v-html="urlify(description)"
-          ></div>
+          />
         </div>
       </router-link>
-      <div class="flex-grow"></div>
+      <div class="flex-grow" />
       <router-link
+        v-if="!isPodcastmaker"
         :to="{
           name: 'productor',
           params: { productorId: emission.orga.id },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
         class="text-dark"
-        v-if="!isPodcastmaker"
       >
         <div class="emission-producer primary-color">
           © {{ emission.orga.name }}
@@ -76,107 +86,8 @@
   </li>
 </template>
 
-<style lang="scss">
-.emission-item-container {
-  list-style: none;
-  background: #fff;
-  border-radius: 2rem;
-  display: flex;
-  width: 100%;
-  margin: 1rem 0;
-  .img-box {
-    border-radius: 2rem !important;
-  }
-}
-.emission-light-max-size {
-  width: 300px;
-  border-bottom: 1px solid #ddd;
-}
-.emission-light-title {
-  color: #333 !important;
-  align-self: flex-end;
-  text-transform: none;
-  font-size: 1.5em;
-  font-weight: normal;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.emission-item-text {
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  max-height: 13rem;
-
-  .emission-name {
-    font-size: 0.9rem;
-    font-weight: 600;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-word;
-  }
-
-  .emission-description {
-    overflow: hidden;
-    margin-top: 0.5em;
-    word-break: break-word;
-    max-height: 7rem;
-    position: relative;
-    &.after-emission-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), #fff 40%);
-    }
-  }
-
-  .emission-small-description {
-    -webkit-line-clamp: 2;
-    border-top: 1px solid #ddd;
-    word-break: break-word;
-  }
-
-  .emission-producer {
-    font-weight: 300;
-    font-size: 0.6rem;
-  }
-}
-
-button.btn.btn-primary.share-btn.m-3 {
-  font-size: 1rem;
-  width: 2.5rem;
-  height: 2.5rem !important;
-  margin: 0 0.8rem 0 0 !important;
-}
-/** PHONES*/
-@media (max-width: 680px) {
-  .emission-item-container {
-    flex-wrap: wrap;
-    width: auto;
-    margin: 0;
-    padding: 1rem;
-    justify-content: center;
-  }
-}
-
-@media (max-width: 450px) {
-  .emission-item-text {
-    padding: 0.5rem 0;
-    text-align: center;
-  }
-}
-</style>
-
 <script lang="ts">
+import { Emission } from '@/store/class/emission';
 import { state } from '../../../store/paramStore';
 const octopusApi = require('@saooti/octopus-api');
 import { displayMethods } from '../../mixins/functions';
@@ -184,71 +95,44 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'EmissionItem',
 
-  props: ['emission'],
-  emits: ['emissionNotVisible'],
-
   mixins: [displayMethods],
 
-  created() {
-    this.hasPodcast();
-  },
-  mounted() {
-    let emissionDesc = document.getElementById(
-      'description-emission-' + this.emission.emissionId
-    );
-    let emissionDescContainer:any = document.getElementById(
-      'description-emission-container-' + this.emission.emissionId
-    );
-    if (
-      null !== emissionDesc &&
-      emissionDesc.clientHeight > emissionDescContainer.clientHeight
-    ) {
-      emissionDescContainer.classList.add('after-emission-description');
-    }
+  props: {
+    emission: { default: ()=>({}), type: Object as ()=> Emission},
   },
 
   data() {
     return {
-      activeEmission: true,
+      activeEmission: true as boolean,
     };
   },
-
+  
   computed: {
-    isPodcastmaker() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-
-    organisation():string {
-      return '' + this.emission.publisher.organisation.name;
+    organisation(): string {
+      if(this.emission && this.emission.publisher && this.emission.publisher.organisation){
+        return '' + this.emission.publisher.organisation.name;
+      }
+      return '';
     },
-
-    lightItems() {
+    lightItems(): boolean {
       return state.emissionsPage.lightItems;
     },
-
-    description():string {
-      let description;
-      description = this.emission.description || '';
-      if (state.generalParameters.isIE11)
-        return description.substring(0, 50) + '...';
-      return description;
+    description(): string {
+      return this.emission.description || '';
     },
-
-    name():string {
-      if (state.generalParameters.isIE11)
-        return this.emission.name.substring(0, 50) + '...';
+    name(): string {
       return this.emission.name;
     },
-
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-
-    editRight() {
+    editRight(): boolean {
       if (
         (this.authenticated && this.organisationId === this.emission.orga.id) ||
         state.generalParameters.isAdmin
@@ -258,8 +142,26 @@ export default defineComponent({
     },
   },
 
+  created() {
+    if(!this.editRight)return;
+    this.hasPodcast();
+  },
+  mounted() {
+    const emissionDesc = document.getElementById(
+      'description-emission-' + this.emission.emissionId
+    );
+    const emissionDescContainer = document.getElementById(
+      'description-emission-container-' + this.emission.emissionId
+    );
+    if (
+      null !== emissionDesc && null !== emissionDescContainer && 
+      emissionDesc.clientHeight > emissionDescContainer.clientHeight
+    ) {
+      emissionDescContainer.classList.add('after-emission-description');
+    }
+  },
   methods: {
-    async hasPodcast() {
+    async hasPodcast(): Promise<void> {
       const data = await octopusApi.fetchPodcasts({
         emissionId: this.emission.emissionId,
         first: 0,
@@ -268,11 +170,8 @@ export default defineComponent({
       if (0 === data.count) {
         this.activeEmission = false;
       }
-      if (this.editRight || this.activeEmission) {
-        return;
-      }
-      this.$emit('emissionNotVisible');
     },
   },
-});
+})
 </script>
+<style lang="scss"></style>