@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,11 +1,16 @@
 <template>
   <div
-    class="d-flex flex-column align-items-center live-list-container"
     v-if="filterOrga || organisationId"
+    class="d-flex flex-column align-items-center live-list-container"
   >
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading lives...') }}</h3>
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading lives...') }}
+      </h3>
     </div>
     <div
       v-if="
@@ -15,76 +20,90 @@
       <p>{{ $t('No live currently') }}</p>
     </div>
     <div v-if="loaded && displayNextLiveMessage">
-      <h3 class="text-danger">{{ displayNextLiveMessage }}</h3>
+      <h3 class="text-danger">
+        {{ displayNextLiveMessage }}
+      </h3>
     </div>
     <template v-if="lives.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('In live') }}</p>
+      <div class="horizontal-separator" />
+      <p class="live-list-category">
+        {{ $t('In live') }}
+      </p>
       <LiveItem
-        class="mt-3"
         v-for="(l, index) in lives"
-        :fetchConference="l"
         :key="l.podcastId"
+        class="mt-3"
+        :fetch-conference="l"
         :index="index"
         @deleteItem="deleteLive"
       />
     </template>
     <template v-if="livesNotStarted.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('This live is not started yet') }}</p>
+      <div class="horizontal-separator" />
+      <p class="live-list-category">
+        {{ $t('This live is not started yet') }}
+      </p>
       <LiveItem
-        class="mt-3"
         v-for="(l, index) in livesNotStarted"
-        :fetchConference="l"
         :key="l.podcastId"
+        class="mt-3"
+        :fetch-conference="l"
         :index="index"
         @deleteItem="deleteLiveNotStarted"
       />
     </template>
     <template v-if="livesToBe.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('Live to be') }}</p>
+      <div class="horizontal-separator" />
+      <p class="live-list-category">
+        {{ $t('Live to be') }}
+      </p>
       <LiveItem
-        class="mt-3"
         v-for="(l, index) in livesToBe"
-        :fetchConference="l"
         :key="l.podcastId"
+        class="mt-3"
+        :fetch-conference="l"
         :index="index"
         @deleteItem="deleteLiveToBe"
       />
     </template>
     <template v-if="livesTerminated.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('Live terminated') }}</p>
+      <div class="horizontal-separator" />
+      <p class="live-list-category">
+        {{ $t('Live terminated') }}
+      </p>
       <LiveItem
-        class="mt-3"
         v-for="(l, index) in livesTerminated"
-        :fetchConference="l"
         :key="l.podcastId"
+        class="mt-3"
+        :fetch-conference="l"
         :index="index"
         @deleteItem="deleteLiveTerminated"
       />
     </template>
     <template v-if="livesPublishing.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('Publishing') }}</p>
+      <div class="horizontal-separator" />
+      <p class="live-list-category">
+        {{ $t('Publishing') }}
+      </p>
       <LiveItem
-        class="mt-3"
         v-for="(l, index) in livesPublishing"
-        :fetchConference="l"
         :key="l.podcastId"
+        class="mt-3"
+        :fetch-conference="l"
         :index="index"
         @deleteItem="deleteLivePublishing"
       />
     </template>
     <template v-if="livesError.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('In error') }}</p>
+      <div class="horizontal-separator" />
+      <p class="live-list-category">
+        {{ $t('In error') }}
+      </p>
       <LiveItem
-        class="mt-3"
         v-for="(l, index) in livesError"
-        :fetchConference="l"
         :key="l.podcastId"
+        class="mt-3"
+        :fetch-conference="l"
         :index="index"
         @deleteItem="deleteLiveError"
       />
@@ -92,109 +111,110 @@
   </div>
 </template>
 
-<style lang="scss">
-.live-list-container .horizontal-separator {
-  border-top: 1px solid #cccccc;
-  width: 100%;
-  margin: 2rem;
-}
-.live-list-category {
-  align-self: flex-start;
-  text-transform: uppercase;
-  font-weight: bold;
-}
-
-@media (max-width: 450px) {
-  .live-list-container h3 {
-    text-align: center;
-    font-size: 1rem;
-  }
-  .live-list-container .horizontal-separator {
-    margin: 1rem;
-  }
-}
-</style>
-
 <script lang="ts">
-import studioApi from '@/api/studio';
 import LiveItem from './LiveItem.vue';
 const octopusApi = require('@saooti/octopus-api');
 const moment = require('moment');
 import { state } from '../../../store/paramStore';
-
+import { Conference } from '@/store/class/conference';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LiveList',
-
-  props: {
-    conferenceWatched: { default: [] },
-    organisationId: { default: undefined as any },
-  },
-  emits: ['initConferenceIds'],
-
   components: {
     LiveItem,
   },
 
-  async created() {
-    const isLive = await octopusApi.liveEnabledOrganisation(
-      this.filterOrgaUsed
-    );
-    if (isLive) {
-      this.fetchContent();
-    } else {
-      this.loading = false;
-      this.loaded = true;
-    }
+  props: {
+    conferenceWatched: { default: () => [], type: Array as ()=>Array<Conference>},
+    organisationId: { default: undefined, type: String},
   },
+  emits: ['initConferenceIds'],
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      lives: [] as any,
-      livesNotStarted: [] as any,
-      livesToBe: [] as any,
-      livesTerminated: [] as any,
-      livesError: [] as any,
-      livesPublishing: [] as any,
+      loading: true as boolean,
+      loaded: true as boolean,
+      lives: [] as Array<Conference>,
+      livesNotStarted: [] as Array<Conference>,
+      livesToBe: [] as Array<Conference>,
+      livesTerminated: [] as Array<Conference>,
+      livesError: [] as Array<Conference>,
+      livesPublishing: [] as Array<Conference>,
     };
   },
-
+  
   computed: {
-    filterOrgaUsed():any {
+    filterOrgaUsed(): string|undefined {
       if (this.filterOrga) return this.filterOrga;
       if (this.organisationId) return this.organisationId;
       return undefined;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-    displayNextLiveMessage():string {
+    displayNextLiveMessage(): string {
       if (0 !== this.lives.length) return '';
       if (this.livesNotStarted.length > 0)
-        return this.$t('A live can start any moment');
+        return this.$t('A live can start any moment').toString();
       if (this.livesToBe.length > 0)
         return this.$t('Next live date', {
           date: moment(this.livesToBe[0].date).format('LLLL'),
-        });
+        }).toString();
       return '';
     },
-    myOrganisationId() {
+    myOrganisationId(): string {
       return state.generalParameters.organisationId;
     },
-    organisationRight() {
+    organisationRight(): boolean {
       if (this.isRoleLive && this.myOrganisationId === this.filterOrgaUsed)
         return true;
       return false;
     },
-    isRoleLive() {
+    isRoleLive(): boolean {
       return state.generalParameters.isRoleLive;
     },
   },
+  watch: {
+    async organisationId(): Promise<void> {
+      const isLive = await octopusApi.liveEnabledOrganisation(
+        this.organisationId
+      );
+      if (isLive) {
+        if(!this.loading){
+          this.fetchContent();
+        }
+      } else {
+        this.initArrays();
+        this.loading = false;
+        this.loaded = true;
+      }
+    },
+    filterOrga(): void {
+      if(!this.loading){
+        this.fetchContent();
+      }
+    },
+    conferenceWatched: {
+      handler(): void {
+        this.updateLiveLocal();
+      },
+      deep: true,
+    },
+  },
 
+  async created() {
+    const isLive = await octopusApi.liveEnabledOrganisation(
+      this.filterOrgaUsed
+    );
+    if (isLive) {
+      this.fetchContent();
+    } else {
+      this.loading = false;
+      this.loaded = true;
+    }
+  },
   methods: {
-    initArrays() {
+    initArrays(): void {
       this.lives.length = 0;
       this.livesNotStarted.length = 0;
       this.livesToBe.length = 0;
@@ -202,7 +222,8 @@ export default defineComponent({
       this.livesError.length = 0;
       this.livesPublishing.length = 0;
     },
-    async fetchContent() {
+    async fetchContent(): Promise<void> {
+      this.initArrays();
       if (!this.filterOrgaUsed) {
         this.loading = false;
         this.loaded = true;
@@ -210,19 +231,17 @@ export default defineComponent({
       }
       this.loading = true;
       this.loaded = false;
-      let dataLives = await studioApi.listConferences(
-        this.$store,
-        true,
+      const dataLives = await octopusApi.listConferences(
         this.filterOrgaUsed,
+        true,
         'RECORDING'
       );
-      this.lives = dataLives.filter((p:any) => {
+      this.lives = dataLives.filter((p: Conference | null) => {
         return null !== p;
       });
-      let dataLivesToBe = await studioApi.listConferences(
-        this.$store,
-        true,
+      const dataLivesToBe = await octopusApi.listConferences(
         this.filterOrgaUsed,
+        true,
         'PENDING'
       );
       let indexPast = 0;
@@ -234,95 +253,91 @@ export default defineComponent({
           break;
         }
       }
-      let dataLivesPlanned = await studioApi.listConferences(
-        this.$store,
-        true,
+      const dataLivesPlanned = await octopusApi.listConferences(
         this.filterOrgaUsed,
+        true,
         'PLANNED'
       );
       this.livesToBe = dataLivesToBe
         .slice(indexPast)
         .concat(dataLivesPlanned)
-        .filter((p: null) => {
+        .filter((p: Conference | null) => {
           return null !== p;
         });
       if (this.organisationRight) {
-        let dataLivesTerminated = await studioApi.listConferences(
-          this.$store,
-          true,
+        const dataLivesTerminated = await octopusApi.listConferences(
           this.filterOrgaUsed,
+          true,
           'DEBRIEFING'
         );
-        this.livesTerminated = dataLivesTerminated.filter((p:any) => {
+        this.livesTerminated = dataLivesTerminated.filter((p: Conference | null) => {
           return null !== p;
         });
-        let dataLivesError = await studioApi.listConferences(
-          this.$store,
-          true,
+        const dataLivesError = await octopusApi.listConferences(
           this.filterOrgaUsed,
+          true,
           'ERROR'
         );
-        this.livesError = dataLivesError.filter((p:any) => {
+        this.livesError = dataLivesError.filter((p: Conference | null) => {
           return null !== p;
         });
-        let dataLivesPublishing = await studioApi.listConferences(
-          this.$store,
-          true,
+        const dataLivesPublishing = await octopusApi.listConferences(
           this.filterOrgaUsed,
+          true,
           'PUBLISHING'
         );
-        this.livesPublishing = dataLivesPublishing.filter((p:any) => {
+        this.livesPublishing = dataLivesPublishing.filter((p: Conference | null) => {
           return null !== p;
         });
       }
-      let listIds = this.lives
+      const listIds = this.lives
         .concat(this.livesToBe)
         .concat(this.livesNotStarted);
       this.$emit('initConferenceIds', listIds);
       this.loading = false;
       this.loaded = true;
     },
-    deleteLive(index: any) {
+    deleteLive(index: number): void {
       this.lives.splice(index, 1);
     },
-    deleteLiveToBe(index: any) {
+    deleteLiveToBe(index: number): void {
       this.livesToBe.splice(index, 1);
     },
-    deleteLiveTerminated(index: any) {
+    deleteLiveTerminated(index: number): void {
       this.livesTerminated.splice(index, 1);
     },
-    deleteLiveError(index: any) {
+    deleteLiveError(index: number): void {
       this.livesError.splice(index, 1);
     },
-    deleteLiveNotStarted(index: any) {
+    deleteLiveNotStarted(index: number): void {
       this.livesNotStarted.splice(index, 1);
     },
-    deleteLivePublishing(index: any) {
+    deleteLivePublishing(index: number): void {
       this.livesPublishing.splice(index, 1);
     },
-    updateLiveLocal() {
+    updateLiveLocal(): void {
       for (
         let index = 0, len = this.conferenceWatched.length;
         index < len;
         index++
       ) {
-        const element:any = this.conferenceWatched[index];
-        let indexLivesToBe = this.livesToBe.findIndex(
-          (          el: { conferenceId: any; }) => el.conferenceId === element.conferenceId
+        const element = this.conferenceWatched[index];
+        const indexLivesToBe = this.livesToBe.findIndex(
+          (el: Conference) => el.conferenceId === element.conferenceId
         );
         if (-1 === indexLivesToBe) {
-          let indexLives = this.lives.findIndex(
-            (            el: { conferenceId: any; }) => el.conferenceId === element.conferenceId
+          const indexLives = this.lives.findIndex(
+            (el: Conference) => el.conferenceId === element.conferenceId
           );
           if (-1 === indexLives || 'DEBRIEFING' !== element.status) continue;
-          let newConf = this.lives[indexLives];
+          const newConf = this.lives[indexLives];
           newConf.status = element.status;
           this.lives.splice(indexLives, 1);
           this.livesTerminated.push(newConf);
           break;
         }
         if ('RECORDING' !== element.status) continue;
-        let newConf = this.livesToBe[indexLivesToBe];
+        const newConf = this.livesToBe[indexLivesToBe];
         newConf.status = element.status;
         this.livesToBe.splice(indexLivesToBe, 1);
         this.lives.push(newConf);
@@ -330,30 +345,28 @@ export default defineComponent({
       }
     },
   },
-
-  watch: {
-    async organisationId() {
-      this.initArrays();
-      const isLive = await octopusApi.liveEnabledOrganisation(
-        this.organisationId
-      );
-      if (isLive) {
-        this.fetchContent();
-      } else {
-        this.loading = false;
-        this.loaded = true;
-      }
-    },
-    filterOrga():any {
-      this.initArrays();
-      this.fetchContent();
-    },
-    conferenceWatched: {
-      handler() {
-        this.updateLiveLocal();
-      },
-      deep: true,
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+.live-list-container .horizontal-separator {
+  border-top: 1px solid #cccccc;
+  width: 100%;
+  margin: 2rem;
+}
+.live-list-category {
+  align-self: flex-start;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+@media (max-width: 450px) {
+  .live-list-container h3 {
+    text-align: center;
+    font-size: 1rem;
+  }
+  .live-list-container .horizontal-separator {
+    margin: 1rem;
+  }
+}
+</style>