@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/display/live/LiveHorizontalList.vue

@@ -1,110 +1,132 @@
 <template>
-  <div class="d-flex flex-column" v-if="notEmpty">
-    <h2 class="mb-4 mt-3">{{ $t('All live emission button') }}</h2>
-    <ul class="podcast-list">
-      <PodcastItem
-        v-bind:podcast="l"
-        v-for="l in lives"
-        v-bind:key="l.podcastId"
-      />
-    </ul>
-    <button
-      class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
-      @click="displayMore"
-      v-show="!allFetched"
-      :disabled="inFetching"
-      :aria-label="$t('See more')"
+  <div
+    v-if="notEmpty"
+    class="p-3"
+  >
+    <h2 class="mb-0 mt-3">
+      {{ $t('All live emission button') }}
+    </h2>
+    <ListPaginate
+      id="liveListPaginate"
+      v-model:first="dfirst"
+      v-model:rowsPerPage="dsize"
+      v-model:isMobile="isMobile"
+      :total-count="totalCount"
+      :loading="false"
     >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
-    </button>
+      <template #list>
+        <ul
+          class="podcast-list"
+        >
+          <template
+            v-for="p in displayArray"
+            :key="p.podcastId"
+          >
+            <PodcastItem
+              v-if="0!==p.podcastId"
+              :podcast="p"
+            />
+          </template>
+        </ul>
+      </template>
+    </ListPaginate>
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
+import ListPaginate from '../list/ListPaginate.vue';
+import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
-import { state } from '../../../store/paramStore';
-
+import { Podcast } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
+import { emptyPodcastData } from '@/store/typeAppStore';
 export default defineComponent({
   name: 'LiveHorizontalList',
 
-  props: {
-    first: { default: 0 },
-    size: { default: 12 },
-    emissionId: { default: undefined as any },
-  },
-
   components: {
     PodcastItem,
+    ListPaginate
   },
 
-  created() {
-    this.fetchContent(true);
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 30, type: Number },
+    emissionId: { default: undefined, type: Number},
   },
 
   data() {
     return {
-      dfirst: this.$props.first,
-      dsize: this.$props.size,
-      totalCount: 0,
-      lives: [] as any,
-      notEmpty: false,
-      inFetching: false,
+      dfirst: this.first as number,
+      dsize: this.size as number,
+      totalCount: 0 as number,
+      lives: [] as Array<Podcast>,
+      notEmpty: false as boolean,
+      inFetching: false as boolean,
+      isMobile: false as boolean,
     };
   },
 
+ 
   computed: {
-    allFetched():boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus() {
-      return state.generalParameters.buttonPlus;
-    },
+    displayArray(): Array<Podcast>{
+      if(this.isMobile){
+        return this.lives;
+      }
+      return this.lives.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
+		},
+  },
+  watch: {
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.lives[this.dfirst] || 0===this.lives[this.dfirst].podcastId){
+				this.fetchContent(false);
+			}
+		},
   },
 
+  created() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
+    async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
-        this.lives.length = 0;
-        this.dfirst = 0;
         this.notEmpty = false;
       }
-      let param = {
+      const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
         first: this.dfirst,
         size: this.dsize,
         emissionId: this.emissionId,
         sort: 'DATE',
-      };
-      const data = await octopusApi.fetchLives(param);
+        includeStatus:'READY_TO_RECORD'
+      }, true);
       this.afterFetching(reset, data);
     },
-
-    afterFetching(reset: any, data: { result: any; count: number; }) {
+    afterFetching(reset: boolean, data: {count: number, result: Array<Podcast>, sort: string}): void {
       if (reset) {
         this.lives.length = 0;
-        this.dfirst = 0;
       }
-      this.lives = this.lives.concat(data.result).filter((l: null) => {
+      if(this.dfirst > this.lives.length){
+        for (let i = this.lives.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+          this.lives.push(emptyPodcastData());
+        }
+      }
+      const responseLives = data.result.filter((l: Podcast | null) => {
         return null !== l;
       });
-      this.dfirst += this.dsize;
+      this.lives = this.lives.slice(0, this.dfirst).concat(responseLives).concat(this.lives.slice(this.dfirst+this.dsize, this.lives.length));
       this.totalCount = data.count;
       if (0 !== this.lives.length) {
         this.notEmpty = true;
       }
       this.inFetching = false;
     },
-
-    displayMore(event: { preventDefault: () => void; }) {
-      event.preventDefault();
-      this.fetchContent(false);
-    },
   },
-});
-</script>
+})
+</script>

package/src/components/display/live/LiveItem.vue

@@ -1,15 +1,22 @@
 <template>
-  <div class="d-flex w-100" v-if="live">
+  <div
+    v-if="live"
+    class="d-flex w-100"
+  >
     <router-link
       class="live-date-box"
       :to="{
         name: 'podcast',
         params: { podcastId: live.podcastId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
     >
-      <div class="font-weight-bold">{{ date }}</div>
-      <div class="font-weight-bold">{{ hours }}</div>
+      <div class="fw-bold">
+        {{ date }}
+      </div>
+      <div class="fw-bold">
+        {{ hours }}
+      </div>
       <div class="font-size-smaller">
         {{ $t('Duration', { duration: duration }) }}
       </div>
@@ -18,297 +25,265 @@
       :to="{
         name: 'podcast',
         params: { podcastId: live.podcastId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: $store.state.filter.organisationId },
       }"
     >
       <PodcastImage
-        class="mr-3"
+        class="me-3"
         :class="
           fetchConference &&
-          'null' !== fetchConference &&
-          fetchConference.status
+            'null' !== fetchConference &&
+            fetchConference.status
             ? fetchConference.status.toLowerCase() + '-shadow'
             : ''
         "
-        v-bind:podcast="live"
-        :hidePlay="false"
-        :playingPodcast="false"
-        :fetchConference="fetchConference"
-        :isAnimatorLive="organisationRight"
+        :podcast="live"
+        :hide-play="false"
+        :playing-podcast="false"
+        :fetch-conference="fetchConference"
+        :is-animator-live="organisationRight"
       />
     </router-link>
     <div class="d-flex flex-column live-special-width">
       <router-link
-        class="text-uppercase link-info text-truncate"
+        class="text-uppercase fw-bold text-truncate"
         :to="{
           name: 'podcast',
           params: { podcastId: live.podcastId },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
-        >{{ live.title }}</router-link
       >
+        {{ live.title }}
+      </router-link>
       <router-link
-        class="link-info text-truncate"
+        class="fw-bold text-truncate"
         :to="{
           name: 'emission',
           params: { emissionId: live.emission.emissionId },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
-        >{{ live.emission.name }}</router-link
       >
+        {{ live.emission.name }}
+      </router-link>
       <div
-        :id="'description-live-container-' + live.podcastId"
+        ref="descriptionLiveContainer"
         class="live-description-container html-wysiwyg-content"
       >
+        <!-- eslint-disable vue/no-v-html -->
         <div
-          :id="'description-live-' + live.podcastId"
+          ref="descriptionLive"
           v-html="urlify(description)"
-        ></div>
+        />
+        <!-- eslint-enable -->
       </div>
-      <div class="comma" v-if="live.animators">
-        {{ $t('Animated by : ') }}
+      <div
+        v-if="live.animators"
+        class="comma"
+      >
+        {{ $t('Animated by') }}<div class="mx-1">
+          :
+        </div>
         <router-link
-          :aria-label="$t('Participant')"
-          class="link-info"
           v-for="animator in live.animators"
-          v-bind:key="animator.participantId"
+          :key="animator.participantId"
+          :title="$t('Participant')"
+          class="fw-bold"
           :to="{
             name: 'participant',
             params: { participantId: animator.participantId },
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          >{{ getName(animator) }}</router-link
         >
+          {{ getName(animator) }}
+        </router-link>
       </div>
       <div v-if="!isPodcastmaker">
         {{ $t('Producted by : ') }}
         <router-link
-          class="link-info"
+          class="fw-bold"
           :to="{
             name: 'productor',
             params: { productorId: live.organisation.id },
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          >{{ live.organisation.name }}</router-link
         >
+          {{ live.organisation.name }}
+        </router-link>
       </div>
       <RecordingItemButton
+        v-if="fetchConference && organisationRight && isEditBox"
         :live="true"
         :recording="fetchConference"
         :podcast="live"
         @deleteItem="deleteItem"
         @validatePodcast="updatePodcast"
-        v-if="fetchConference && organisationRight && isEditBox"
-      ></RecordingItemButton>
+      />
     </div>
   </div>
 </template>
 
-<style lang="scss">
-.live-date-box {
-  width: 200px;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-}
-.font-size-smaller {
-  font-size: smaller;
-}
-.live-image-status {
-  text-align: center;
-  width: 100%;
-  font-size: 0.6rem;
-  padding: 0.2rem 0;
-  color: white;
-  text-transform: uppercase;
-}
-.live-description-container {
-  overflow: hidden;
-  margin-top: 0.5em;
-  word-break: break-word;
-  max-height: 6rem;
-  position: relative;
-  &.after-live-description:after {
-    content: '...';
-    position: absolute;
-    padding-left: 1rem;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: bolder;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f3f3f3 40%);
-  }
-}
-.live-special-width {
-  width: 0;
-  flex-grow: 1;
-}
-.planned-bg {
-  background: #f09653;
-}
-.pending-bg {
-  background: #f1643e;
-}
-.recording-bg {
-  background: #f34a4a;
-}
-.debriefing-bg {
-  background: #6ec66e;
-}
-.done-bg {
-  background: #679fe9;
-}
-.publishing-bg {
-  background: #7d7d7d;
-}
-.planned-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(240, 151, 83, 0.2);
-}
-.pending-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(241, 101, 62, 0.2);
-}
-.recording-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(243, 74, 74, 0.2);
-}
-.debriefing-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(110, 198, 110, 0.2);
-}
-.publishing-shadow {
-  box-shadow: 0px 12px 48px 6px rgba(125, 125, 125, 0.2);
-}
-</style>
-
 <script lang="ts">
 import { state } from '../../../store/paramStore';
-const octopusApi = require('@saooti/octopus-api');
+import octopusApi from '@saooti/octopus-api';
 import PodcastImage from '../podcasts/PodcastImage.vue';
-import studioApi from '@/api/studio';
-import RecordingItemButton from '@/components/display/studio/RecordingItemButton.vue';
-const moment = require('moment');
-const humanizeDuration = require('humanize-duration');
+import crudApi from '@/api/classicCrud';
+import moment from 'moment';
+// @ts-ignore
+import humanizeDuration from 'humanize-duration';
 import { displayMethods } from '../../mixins/functions';
+import { Podcast } from '@/store/class/general/podcast';
+import { Participant } from '@/store/class/general/participant';
 
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
 export default defineComponent({
   name: 'LiveItem',
 
-  props: ['fetchConference', 'index'],
-  emits: ['deleteItem'],
-  mixins: [displayMethods],
-
   components: {
     RecordingItemButton,
     PodcastImage,
   },
-
-  async created() {
-    this.fetchPodcastData();
+  mixins: [displayMethods],
+  props: {
+    fetchConference: { default: undefined, type: Object as ()=>Podcast},
+    index: { default: undefined, type: Number},
   },
+  emits: ['deleteItem'],
 
   data() {
     return {
-      live: undefined as any,
+      live: undefined as Podcast|undefined,
     };
   },
-
+  
   computed: {
-    isEditBox() {
-      return state.podcastPage.EditBox;
+    isEditBox(): boolean {
+      return (state.podcastPage.EditBox as boolean);
     },
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-    hours():string {
-      return moment(this.live.pubDate).format('À HH[H]mm');
+    hours(): string {
+      return !this.live?'': moment(this.live.pubDate).format('HH[H]mm');
     },
-    date():string {
-      return moment(this.live.pubDate).format('D/MM/YYYY');
+    date(): string {
+      return !this.live? '': moment(this.live.pubDate).format('D/MM/YYYY');
     },
-    displayDate():string {
-      return moment(this.live.pubDate).format('X');
+    displayDate(): string {
+      return !this.live? '':moment(this.live.pubDate).format('X');
     },
-    description():string {
-      if (this.live.description) return this.live.description;
-      return '';
+    description(): string {
+      return this.live?.description??'';
     },
-    myOrganisationId() {
+    myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
-    organisationRight() {
-      if (
-        this.isRoleLive &&
-        this.myOrganisationId === this.live.organisation.id
-      )
-        return true;
-      return false;
+    organisationRight(): boolean {
+      return true===this.isRoleLive && this.myOrganisationId === this.live?.organisation.id;
     },
-    isRoleLive() {
-      return state.generalParameters.isRoleLive;
+    isRoleLive(): boolean {
+      return (state.generalParameters.isRoleLive as boolean);
     },
-
-    duration():string {
-      if (this.live.duration <= 1) return '';
+    duration(): string {
+      if (!this.live || this.live.duration <= 1) return '';
       if (this.live.duration > 600000) {
         return humanizeDuration(this.live.duration, {
-          language: 'fr',
+          language: this.$i18n.locale,
           largest: 1,
           round: true,
         });
       }
       return humanizeDuration(this.live.duration, {
-        language: 'fr',
+        language: this.$i18n.locale,
         largest: 2,
         round: true,
       });
     },
   },
+  watch: {
+    live: {
+      deep: true,
+      handler(){
+      this.handleDescription();
+      }
+    },
+  },
+
+  async created() {
+    this.fetchPodcastData();
+  },
   methods: {
-    updatePodcast(podcastUpdated: any) {
+    updatePodcast(podcastUpdated: Podcast): void {
       this.live = podcastUpdated;
     },
-    getName(person: any) {
-      const first = person.firstName || '';
-      const last = person.lastName || '';
-      return (first + ' ' + last).trim();
+    getName(person: Participant): string {
+      return (`${person.firstName??''} ${person.lastName??''}`).trim();
     },
-    async fetchPodcastData() {
+    async fetchPodcastData(): Promise<void> {
       if (!this.fetchConference || !this.fetchConference.podcastId) return;
       try {
-        this.live = await octopusApi.fetchPodcast(
-          this.fetchConference.podcastId
-        );
+        this.live = await octopusApi.fetchData<Podcast>(0, 'podcast/'+this.fetchConference.podcastId);
       } catch {
         this.$emit('deleteItem', this.index);
-        studioApi.deleteConference(
-          this.$store,
-          this.fetchConference.conferenceId
-        );
+        if(this.fetchConference.conferenceId){
+          await crudApi.deleteData(this.$store.state, 9 ,'conference/'+this.fetchConference.conferenceId);
+        }
       }
     },
-    async handleDescription() {
-      await nextTick();
-      let liveDesc = document.getElementById(
-        'description-live-' + this.live.podcastId
-      );
-      let liveDescContainer:any = document.getElementById(
-        'description-live-container-' + this.live.podcastId
-      );
-      if (
-        null !== liveDesc &&
-        liveDesc.clientHeight > liveDescContainer.clientHeight
-      ) {
-        liveDescContainer.classList.add('after-live-description');
-      }
+    async handleDescription(): Promise<void> {
+      this.$nextTick(() => {
+        if(!this.live){
+          return;
+        }
+        const liveDesc = (this.$refs.descriptionLive as HTMLElement);
+        const liveDescContainer = (this.$refs.descriptionLiveContainer as HTMLElement);
+        if (
+          null !== liveDesc && null !== liveDescContainer && 
+          liveDesc.clientHeight > liveDescContainer.clientHeight
+        ) {
+          liveDescContainer.classList.add('after-live-description');
+        }
+      });
     },
-    deleteItem() {
+    deleteItem(): void {
       this.$emit('deleteItem', this.index);
     },
   },
-  watch: {
-    live() {
-      this.handleDescription();
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+.live-date-box {
+  width: 200px;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+.font-size-smaller {
+  font-size: smaller;
+}
+.live-description-container {
+  overflow: hidden;
+  margin-top: 0.5em;
+  word-break: break-word;
+  max-height: 6rem;
+  position: relative;
+  &.after-live-description:after {
+    content: '...';
+    position: absolute;
+    padding-left: 1rem;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    font-size: 1rem;
+    font-weight: bolder;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f3f3f3 40%);
+  }
+}
+.live-special-width {
+  width: 0;
+  flex-grow: 1;
+}
+}
+</style>