@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,278 +1,124 @@
 <template>
   <li
-    class="mt-3"
-    :class="
-      lightItems
-        ? 'noList emission-light-max-size'
-        : 'emission-item-container shadow-element'
-    "
-    v-if="activeEmission || editRight"
+    class="mt-3 emission-item-container shadow-element"
   >
     <router-link
       :to="{
         name: 'emission',
         params: { emissionId: emission.emissionId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: filterOrga },
       }"
-      :aria-label="$t('Emission')"
-      class="text-dark"
+      :title="$t('Emission')"
+      class="d-flex flex-grow-1 text-dark"
     >
-      <div
+      <img
+        v-lazy="emission.imageUrl"
         class="img-box"
-        :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
-        v-if="!lightItems"
-      ></div>
-      <div class="d-flex" v-else>
-        <div
-          class="img-box-light flex-shrink"
-          :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
-        ></div>
-        <div class="emission-light-title">{{ name }}</div>
-      </div>
-    </router-link>
-    <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 },
-        }"
-        class="text-dark"
+        :title="$t('Emission name image', {name:emission.name})"
+        :alt="$t('Emission name image', {name:emission.name})"
       >
-        <div class="emission-name" v-if="!lightItems">
+      <div class="emission-item-text">
+        <div
+          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 }}
+            :alt="$t('Emission have not podcasts')"
+          >{{ emission.name }}
         </div>
         <div
-          :id="'description-emission-container-' + emission.emissionId"
-          class="emission-description html-wysiwyg-content"
-          :class="lightItems ? 'emission-small-description' : ''"
+          ref="descriptionEmissionContainer"
+          class="emission-description htms-wysiwyg-content"
         >
+          <!-- eslint-disable vue/no-v-html -->
           <div
-            :id="'description-emission-' + emission.emissionId"
-            v-html="urlify(description)"
-          ></div>
+            ref="descriptionEmission"
+            v-html="urlify(emission.description|| '')"
+          />
+        <!-- eslint-enable -->
         </div>
-      </router-link>
-      <div class="flex-grow"></div>
-      <router-link
-        :to="{
-          name: 'productor',
-          params: { productorId: emission.orga.id },
-          query: { productor: this.$store.state.filter.organisationId },
-        }"
-        class="text-dark"
-        v-if="!isPodcastmaker"
-      >
-        <div class="emission-producer primary-color">
-          © {{ emission.orga.name }}
-        </div>
-      </router-link>
-    </div>
+        <div class="flex-grow-1" />
+        <router-link
+          v-if="!isPodcastmaker"
+          :to="{
+            name: 'productor',
+            params: { productorId: emission.orga.id },
+            query: { productor: filterOrga },
+          }"
+        >
+          <div class="emission-producer">
+            © {{ emission.orga.name }}
+          </div>
+        </router-link>
+      </div>
+    </router-link>
   </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 { orgaComputed } from '../../mixins/orgaComputed';
+import { Emission } from '@/store/class/general/emission';
 import { state } from '../../../store/paramStore';
-const octopusApi = require('@saooti/octopus-api');
+import octopusApi from '@saooti/octopus-api';
 import { displayMethods } from '../../mixins/functions';
 import { defineComponent } from 'vue'
+import { Podcast } from '@/store/class/general/podcast';
 export default defineComponent({
   name: 'EmissionItem',
 
-  props: ['emission'],
-  emits: ['emissionNotVisible'],
+  mixins: [displayMethods, orgaComputed],
 
-  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() {
-      return state.generalParameters.podcastmaker;
-    },
-
-    organisation():string {
-      return '' + this.emission.publisher.organisation.name;
-    },
-
-    lightItems() {
-      return state.emissionsPage.lightItems;
-    },
-
-    description():string {
-      let description;
-      description = this.emission.description || '';
-      if (state.generalParameters.isIE11)
-        return description.substring(0, 50) + '...';
-      return description;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-
-    name():string {
-      if (state.generalParameters.isIE11)
-        return this.emission.name.substring(0, 50) + '...';
-      return this.emission.name;
+    organisation(): string {
+      return this.emission?.publisher?.organisation?.name ?? '';
     },
-
-    organisationId() {
-      return state.generalParameters.organisationId;
-    },
-
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-
-    editRight() {
-      if (
-        (this.authenticated && this.organisationId === this.emission.orga.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+    editRight(): boolean {
+      return (true === this.authenticated && this.myOrganisationId === this.emission.orga.id) ||
+        true === state.generalParameters.isAdmin
     },
   },
 
+  created() {
+    if(!this.editRight)return;
+    this.hasPodcast();
+  },
+  mounted() {
+    const emissionDesc = (this.$refs.descriptionEmission as HTMLElement);
+    const emissionDescContainer = (this.$refs.descriptionEmissionContainer as HTMLElement);
+    if (
+      null !== emissionDesc && null !== emissionDescContainer && 
+      emissionDesc.clientHeight > emissionDescContainer.clientHeight
+    ) {
+      emissionDescContainer.classList.add('after-emission-description');
+    }
+  },
   methods: {
-    async hasPodcast() {
-      const data = await octopusApi.fetchPodcasts({
+    async hasPodcast(): Promise<void> {
+      const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
         emissionId: this.emission.emissionId,
         first: 0,
         size: 0,
-      });
+      }, true);
       if (0 === data.count) {
         this.activeEmission = false;
       }
-      if (this.editRight || this.activeEmission) {
-        return;
-      }
-      this.$emit('emissionNotVisible');
     },
   },
-});
-</script>
+})
+</script>