@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -1,7 +1,9 @@
 <template>
   <div class="d-flex flex-column align-items-center text-danger">
     <h3>{{ $t('This live will start') }}</h3>
-    <h3 ref="countdown" v-if="countdownTimer">
+    <h3
+      v-if="countdownTimer"
+    >
       {{
         $t('In days hours minutes seconds', {
           days: pad(days),
@@ -11,26 +13,29 @@
         })
       }}
     </h3>
-    <h3 v-else>{{ $t('In a moment') }}</h3>
+    <h3 v-else>
+      {{ $t('In a moment') }}
+    </h3>
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue'
+export default defineComponent({
   props: {
-    timeRemaining: { default: undefined as number|undefined},
+    timeRemaining: { default: undefined, type: Number},
   },
   data() {
     return {
       seconds: 0 as number,
-      countdownTimer: undefined as any,
+      countdownTimer: undefined as  ReturnType<typeof setTimeout>|undefined,
       days: 0 as number,
       hours: 0 as number,
       minutes: 0 as number,
       remainingSeconds: 0 as number,
     };
   },
+  computed: {},
   mounted() {
     if (!this.timeRemaining || this.timeRemaining <= 0) return;
     this.seconds = this.timeRemaining;
@@ -38,7 +43,10 @@ export default Vue.extend({
       this.timer();
     }, 1000);
   },
-  computed: {},
+  unmounted() {
+    clearInterval((this.countdownTimer as unknown as number));
+  },
+
   methods: {
     timer(): void {
       this.days = Math.floor(this.seconds / 24 / 60 / 60);
@@ -47,9 +55,8 @@ export default Vue.extend({
       const minutesLeft = Math.floor(hoursLeft - this.hours * 3600);
       this.minutes = Math.floor(minutesLeft / 60);
       this.remainingSeconds = this.seconds % 60;
-      /* this.$refs.countdown.innerHTML = this.pad(days) + ":" + this.pad(hours) + ":" + this.pad(minutes) + ":" + this.pad(remainingSeconds); */
       if (0 === this.seconds) {
-        clearInterval(this.countdownTimer);
+        clearInterval((this.countdownTimer as unknown as number));
         this.countdownTimer = undefined;
       } else {
         this.seconds--;
@@ -59,5 +66,5 @@ export default Vue.extend({
       return n < 10 ? '0' + n : n.toString();
     },
   },
-});
-</script>
+})
+</script>

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

@@ -1,47 +1,57 @@
 <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 Vue from 'vue';
-import { Podcast } from '@/store/class/podcast';
-export default Vue.extend({
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+import { emptyPodcastData } from '@/store/typeAppStore';
+export default defineComponent({
   name: 'LiveHorizontalList',
 
   components: {
     PodcastItem,
+    ListPaginate
   },
 
   props: {
-    first: { default: 0 as number },
-    size: { default: 12 as number },
-    emissionId: { default: undefined as undefined|number},
+    first: { default: 0, type: Number },
+    size: { default: 30, type: Number },
+    emissionId: { default: undefined, type: Number},
   },
 
   data() {
@@ -52,58 +62,71 @@ export default Vue.extend({
       lives: [] as Array<Podcast>,
       notEmpty: false as boolean,
       inFetching: false as boolean,
+      isMobile: false as boolean,
     };
   },
 
-  created() {
-    this.fetchContent(true);
-  },
-
  
   computed: {
-    allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus(): boolean {
-      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: {
+    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;
       }
-      const 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: boolean, data: any): void {
+    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: Podcast | 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 }): void {
-      event.preventDefault();
-      this.fetchContent(false);
-    },
   },
-});
-</script>
+})
+</script>

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

@@ -1,5 +1,8 @@
 <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="{
@@ -8,8 +11,12 @@
         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>
@@ -22,242 +29,219 @@
       }"
     >
       <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: $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: $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 class="mx-1">:</div>
+      <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: $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: $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-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>
-
 <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';
-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/podcast';
-import { Participant } from '@/store/class/participant';
+import { Podcast } from '@/store/class/general/podcast';
+import { Participant } from '@/store/class/general/participant';
 
-export default displayMethods.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';
+const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
+export default defineComponent({
   name: 'LiveItem',
 
   components: {
-    RecordingItemButton: () => import('@/components/display/studio/RecordingItemButton.vue'),
+    RecordingItemButton,
     PodcastImage,
   },
+  mixins: [displayMethods],
   props: {
-    fetchConference: { default: undefined as Podcast|undefined},
-    index: { default: undefined as number|undefined},
+    fetchConference: { default: undefined, type: Object as ()=>Podcast},
+    index: { default: undefined, type: Number},
   },
+  emits: ['deleteItem'],
 
   data() {
     return {
       live: undefined as Podcast|undefined,
     };
   },
-
-  async created() {
-    this.fetchPodcastData();
-  },
   
   computed: {
     isEditBox(): boolean {
-      return state.podcastPage.EditBox;
+      return (state.podcastPage.EditBox as boolean);
     },
     isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
+      return (state.generalParameters.podcastmaker as boolean);
     },
     hours(): string {
-      return moment(this.live!.pubDate).format('À HH[H]mm');
+      return !this.live?'': moment(this.live.pubDate).format('HH[H]mm');
     },
     date(): string {
-      return moment(this.live!.pubDate).format('D/MM/YYYY');
+      return !this.live? '': moment(this.live.pubDate).format('D/MM/YYYY');
     },
     displayDate(): string {
-      return moment(this.live!.pubDate).format('X');
+      return !this.live? '':moment(this.live.pubDate).format('X');
     },
     description(): string {
-      if (this.live!.description) return this.live!.description;
-      return '';
+      return this.live?.description??'';
     },
-    myOrganisationId(): string {
+    myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
     organisationRight(): boolean {
-      if (
-        this.isRoleLive &&
-        this.myOrganisationId === this.live!.organisation.id
-      )
-        return true;
-      return false;
+      return true===this.isRoleLive && this.myOrganisationId === this.live?.organisation.id;
     },
     isRoleLive(): boolean {
-      return state.generalParameters.isRoleLive;
+      return (state.generalParameters.isRoleLive as boolean);
     },
     duration(): string {
-      if (this.live!.duration <= 1) return '';
-      if (this.live!.duration > 600000) {
-        return humanizeDuration(this.live!.duration, {
+      if (!this.live || this.live.duration <= 1) return '';
+      if (this.live.duration > 600000) {
+        return humanizeDuration(this.live.duration, {
           language: this.$i18n.locale,
           largest: 1,
           round: true,
         });
       }
-      return humanizeDuration(this.live!.duration, {
+      return humanizeDuration(this.live.duration, {
         language: this.$i18n.locale,
         largest: 2,
         round: true,
       });
     },
   },
+  watch: {
+    live: {
+      deep: true,
+      handler(){
+      this.handleDescription();
+      }
+    },
+  },
+
+  async created() {
+    this.fetchPodcastData();
+  },
   methods: {
     updatePodcast(podcastUpdated: Podcast): void {
       this.live = podcastUpdated;
     },
     getName(person: Participant): string {
-      const first = person.firstName || '';
-      const last = person.lastName || '';
-      return (first + ' ' + last).trim();
+      return (`${person.firstName??''} ${person.lastName??''}`).trim();
     },
     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.state,
-          this.fetchConference.conferenceId!.toString()
-        );
+        if(this.fetchConference.conferenceId){
+          await crudApi.deleteData(this.$store.state, 9 ,'conference/'+this.fetchConference.conferenceId);
+        }
       }
     },
     async handleDescription(): Promise<void> {
       this.$nextTick(() => {
-        const liveDesc = document.getElementById(
-          'description-live-' + this.live!.podcastId
-        );
-        const liveDescContainer = document.getElementById(
-          'description-live-container-' + this.live!.podcastId
-        );
+        if(!this.live){
+          return;
+        }
+        const liveDesc = (this.$refs.descriptionLive as HTMLElement);
+        const liveDescContainer = (this.$refs.descriptionLiveContainer as HTMLElement);
         if (
-          null !== liveDesc &&
-          liveDesc.clientHeight > liveDescContainer!.clientHeight
+          null !== liveDesc && null !== liveDescContainer && 
+          liveDesc.clientHeight > liveDescContainer.clientHeight
         ) {
-          liveDescContainer!.classList.add('after-live-description');
+          liveDescContainer.classList.add('after-live-description');
         }
       });
     },
@@ -265,10 +249,41 @@ export default displayMethods.extend({
       this.$emit('deleteItem', this.index);
     },
   },
-  watch: {
-    live(): void {
-      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>