@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,359 +1,248 @@
 <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"
   >
-    <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>
-    <div
-      v-if="
-        loaded && !lives.length && !livesToBe.length && !livesTerminated.length
-      "
-    >
-      <p>{{ $t('No live currently') }}</p>
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading lives...'):undefined"
+      :error-text="isNoLive?$t('No live currently'):undefined"
+    />
     <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>
-      <LiveItem
-        class="mt-3"
-        v-for="(l, index) in lives"
-        :fetchConference="l"
-        :key="l.podcastId"
-        :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>
-      <LiveItem
-        class="mt-3"
-        v-for="(l, index) in livesNotStarted"
-        :fetchConference="l"
-        :key="l.podcastId"
-        :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>
-      <LiveItem
-        class="mt-3"
-        v-for="(l, index) in livesToBe"
-        :fetchConference="l"
-        :key="l.podcastId"
-        :index="index"
-        @deleteItem="deleteLiveToBe"
-      />
-    </template>
-    <template v-if="livesTerminated.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('Live terminated') }}</p>
-      <LiveItem
-        class="mt-3"
-        v-for="(l, index) in livesTerminated"
-        :fetchConference="l"
-        :key="l.podcastId"
-        :index="index"
-        @deleteItem="deleteLiveTerminated"
-      />
-    </template>
-    <template v-if="livesPublishing.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('Publishing') }}</p>
-      <LiveItem
-        class="mt-3"
-        v-for="(l, index) in livesPublishing"
-        :fetchConference="l"
-        :key="l.podcastId"
-        :index="index"
-        @deleteItem="deleteLivePublishing"
-      />
-    </template>
-    <template v-if="livesError.length">
-      <div class="horizontal-separator"></div>
-      <p class="live-list-category">{{ $t('In error') }}</p>
-      <LiveItem
-        class="mt-3"
-        v-for="(l, index) in livesError"
-        :fetchConference="l"
-        :key="l.podcastId"
-        :index="index"
-        @deleteItem="deleteLiveError"
-      />
+    <template
+      v-for="(live, indexLive) in livesArray"
+      :key="live.status"
+    >
+      <template v-if="live.lives.length">
+        <hr class="w-100">
+        <p class="live-list-category">
+          {{ live.title }}
+        </p>
+        <LiveItem
+          v-for="(l, index) in live.lives"
+          :key="l.podcastId"
+          class="mt-3"
+          :fetch-conference="l"
+          :index="index"
+          @deleteItem="deleteLive(indexLive, $event)"
+        />
+      </template>
     </template>
   </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 ClassicLoading from '../../form/ClassicLoading.vue';
 import LiveItem from './LiveItem.vue';
-const octopusApi = require('@saooti/octopus-api');
-const moment = require('moment');
+import { handle403 } from '../../mixins/handle403';
+import octopusApi from '@saooti/octopus-api';
+import moment from 'moment';
 import { state } from '../../../store/paramStore';
-
+import { Conference } from '@/store/class/conference/conference';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'LiveList',
-
-  props: {
-    conferenceWatched: { default: [] },
-    organisationId: { default: undefined as any },
-  },
-  emits: ['initConferenceIds'],
-
   components: {
     LiveItem,
+    ClassicLoading
   },
 
-  async created() {
-    const isLive = await octopusApi.liveEnabledOrganisation(
-      this.filterOrgaUsed
-    );
-    if (isLive) {
-      this.fetchContent();
-    } else {
-      this.loading = false;
-      this.loaded = true;
-    }
-  },
+  mixins: [handle403],
 
+  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,
     };
   },
-
+  
   computed: {
-    filterOrgaUsed():any {
-      if (this.filterOrga) return this.filterOrga;
-      if (this.organisationId) return this.organisationId;
-      return undefined;
-    },
-    filterOrga():any {
+    livesArray(): Array<{status:string, title:string, lives:Array<Conference>}>{
+      return [
+        {status: "RECORDING", title:this.$t('In live'), lives:[]},
+        {status: "PENDING", title:this.$t('This live is not started yet'), lives:[]},
+        {status: "PLANNED", title:this.$t('Live to be'), lives:[]},
+        {status: "DEBRIEFING", title:this.$t('Live terminated'), lives:[]},
+        {status: "PUBLISHING", title:this.$t('Publishing'), lives:[]},
+        {status: "ERROR", title:this.$t('In error'), lives:[]}
+      ];
+    },
+    isNoLive(): boolean{
+      return this.loaded && !this.livesArray[0].lives.length && !this.livesArray[2].lives.length && !this.livesArray[3].lives.length;
+    },
+    filterOrgaUsed(): string|undefined {
+      return this.filterOrga??this.organisationId;
+    },
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-    displayNextLiveMessage():string {
-      if (0 !== this.lives.length) return '';
-      if (this.livesNotStarted.length > 0)
+    displayNextLiveMessage(): string {
+      if (0 !== this.livesArray[0].lives.length) return '';
+      if (this.livesArray[1].lives.length > 0)
         return this.$t('A live can start any moment');
-      if (this.livesToBe.length > 0)
-        return this.$t('Next live date', {
-          date: moment(this.livesToBe[0].date).format('LLLL'),
-        });
+      if (this.livesArray[2].lives.length > 0)
+        return this.$t('Next live date', {date: moment(this.livesArray[2].lives[0].date).format('LLLL'),});
       return '';
     },
-    myOrganisationId() {
+    myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
-    organisationRight() {
-      if (this.isRoleLive && this.myOrganisationId === this.filterOrgaUsed)
-        return true;
-      return false;
+    organisationRight(): boolean {
+      return this.isRoleLive && this.myOrganisationId === this.filterOrgaUsed;
     },
-    isRoleLive() {
-      return state.generalParameters.isRoleLive;
+    isRoleLive(): boolean {
+      return (state.generalParameters.isRoleLive as boolean);
     },
   },
-
-  methods: {
-    initArrays() {
-      this.lives.length = 0;
-      this.livesNotStarted.length = 0;
-      this.livesToBe.length = 0;
-      this.livesTerminated.length = 0;
-      this.livesError.length = 0;
-      this.livesPublishing.length = 0;
-    },
-    async fetchContent() {
-      if (!this.filterOrgaUsed) {
+  watch: {
+    async organisationId(): Promise<void> {
+      if(!this.organisationId){return;}
+      const isLive = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+this.organisationId);
+      if (isLive) {
+        if(!this.loading){
+          this.fetchContent();
+        }
+      } else {
+        this.initArrays();
         this.loading = false;
         this.loaded = true;
-        return;
-      }
-      this.loading = true;
-      this.loaded = false;
-      let dataLives = await studioApi.listConferences(
-        this.$store,
-        true,
-        this.filterOrgaUsed,
-        'RECORDING'
-      );
-      this.lives = dataLives.filter((p:any) => {
-        return null !== p;
-      });
-      let dataLivesToBe = await studioApi.listConferences(
-        this.$store,
-        true,
-        this.filterOrgaUsed,
-        'PENDING'
-      );
-      let indexPast = 0;
-      for (let index = 0, len = dataLivesToBe.length; index < len; index++) {
-        if (moment(dataLivesToBe[index].date).isBefore(moment())) {
-          this.livesNotStarted.push(dataLivesToBe[index]);
-          indexPast = index + 1;
-        } else {
-          break;
-        }
-      }
-      let dataLivesPlanned = await studioApi.listConferences(
-        this.$store,
-        true,
-        this.filterOrgaUsed,
-        'PLANNED'
-      );
-      this.livesToBe = dataLivesToBe
-        .slice(indexPast)
-        .concat(dataLivesPlanned)
-        .filter((p: null) => {
-          return null !== p;
-        });
-      if (this.organisationRight) {
-        let dataLivesTerminated = await studioApi.listConferences(
-          this.$store,
-          true,
-          this.filterOrgaUsed,
-          'DEBRIEFING'
-        );
-        this.livesTerminated = dataLivesTerminated.filter((p:any) => {
-          return null !== p;
-        });
-        let dataLivesError = await studioApi.listConferences(
-          this.$store,
-          true,
-          this.filterOrgaUsed,
-          'ERROR'
-        );
-        this.livesError = dataLivesError.filter((p:any) => {
-          return null !== p;
-        });
-        let dataLivesPublishing = await studioApi.listConferences(
-          this.$store,
-          true,
-          this.filterOrgaUsed,
-          'PUBLISHING'
-        );
-        this.livesPublishing = dataLivesPublishing.filter((p:any) => {
-          return null !== p;
-        });
       }
-      let listIds = this.lives
-        .concat(this.livesToBe)
-        .concat(this.livesNotStarted);
-      this.$emit('initConferenceIds', listIds);
-      this.loading = false;
-      this.loaded = true;
     },
-    deleteLive(index: any) {
-      this.lives.splice(index, 1);
-    },
-    deleteLiveToBe(index: any) {
-      this.livesToBe.splice(index, 1);
+    filterOrga(): void {
+      if(!this.loading){
+        this.fetchContent();
+      }
     },
-    deleteLiveTerminated(index: any) {
-      this.livesTerminated.splice(index, 1);
+    conferenceWatched: {
+      handler(): void {
+        this.updateLiveLocal();
+      },
+      deep: true,
     },
-    deleteLiveError(index: any) {
-      this.livesError.splice(index, 1);
+  },
+
+  async created() {
+    if(!this.filterOrgaUsed){
+      return;
+    }
+    const isLive = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+this.filterOrgaUsed);
+    if (isLive) {
+      this.fetchContent();
+    } else {
+      this.loading = false;
+      this.loaded = true;
+    }
+  },
+  methods: {
+    initArrays(): void {
+      for (let i = 0, len = this.livesArray.length; i < len; i++) {
+        this.livesArray[i].lives.length = 0;
+      }
     },
-    deleteLiveNotStarted(index: any) {
-      this.livesNotStarted.splice(index, 1);
+    async fetchContent(): Promise<void> {
+      try {
+        this.initArrays();
+        if (!this.filterOrgaUsed) {
+          this.loading = false;
+          this.loaded = true;
+          return;
+        }
+        this.loading = true;
+        this.loaded = false;
+        let indexPast = 0;
+        let dataLivesToBe: Array<Conference> = [];
+        for (let i = 0, len = this.livesArray.length; i < len; i++) {
+          if (!this.organisationRight && 
+          ("DEBRIEFING"===this.livesArray[i].status ||"ERROR"===this.livesArray[i].status ||"PUBLISHING"===this.livesArray[i].status)) {
+            continue;
+          }
+          const dataLives = await octopusApi.fetchDataWithParams<Array<Conference>>(9, 'conference/list',{
+            organisationId: this.filterOrgaUsed,
+            withPodcastId: true,
+            status: this.livesArray[i].status,
+          });
+          if("PLANNED"!==this.livesArray[i].status && "PENDING"!==this.livesArray[i].status){
+            this.livesArray[i].lives = dataLives.filter((p: Conference | null) => {
+              return null !== p;
+            });
+          }else if("PENDING"===this.livesArray[i].status){
+            dataLivesToBe = dataLives;
+            for (let index = 0, len = dataLives.length; index < len; index++) {
+              if (moment(dataLives[index].date).isBefore(moment())) {
+                this.livesArray[i].lives.push(dataLives[index]);
+                indexPast = index + 1;
+              } else {break;}
+            }
+          }else{
+            this.livesArray[i].lives = dataLivesToBe
+            .slice(indexPast)
+            .concat(dataLives)
+            .filter((p: Conference | null) => {
+              return null !== p;
+            });
+          }
+        }
+        const listIds = this.livesArray[0].lives
+          .concat(this.livesArray[1].lives)
+          .concat(this.livesArray[2].lives);
+        this.$emit('initConferenceIds', listIds);
+      } catch (error) {
+        this.handle403((error as AxiosError));
+      }
+      this.loading = false;
+      this.loaded = true;
     },
-    deleteLivePublishing(index: any) {
-      this.livesPublishing.splice(index, 1);
+    deleteLive(indexLives: number, index: number): void {
+      this.livesArray[indexLives].lives.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.livesArray[1].lives.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.livesArray[0].lives.findIndex(
+            (el: Conference) => el.conferenceId === element.conferenceId
           );
           if (-1 === indexLives || 'DEBRIEFING' !== element.status) continue;
-          let newConf = this.lives[indexLives];
+          const newConf = this.livesArray[0].lives[indexLives];
           newConf.status = element.status;
-          this.lives.splice(indexLives, 1);
-          this.livesTerminated.push(newConf);
+          this.livesArray[0].lives.splice(indexLives, 1);
+          this.livesArray[3].lives.push(newConf);
           break;
         }
         if ('RECORDING' !== element.status) continue;
-        let newConf = this.livesToBe[indexLivesToBe];
+        const newConf = this.livesArray[1].lives[indexLivesToBe];
         newConf.status = element.status;
-        this.livesToBe.splice(indexLivesToBe, 1);
-        this.lives.push(newConf);
+        this.livesArray[1].lives.splice(indexLivesToBe, 1);
+        this.livesArray[0].lives.push(newConf);
         break;
       }
     },
   },
-
-  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">
+.octopus-app{
+.live-list-category {
+  align-self: flex-start;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+}
+</style>