@saooti/octopus-sdk 30.0.8 → 30.0.9

package/src/components/display/filter/AdvancedSearch.vue

@@ -1,18 +1,14 @@
 <template>
   <div>
     <div
-      class="d-flex justify-content-center mb-3"
+      class="d-flex justify-content-center mb-3 text-secondary c-hand"
       @click="showFilters = !showFilters"
     >
-      <div class="text-secondary c-hand">
-        {{ $t('Advanced filters') }}
-      </div>
-      <div
-        class="text-secondary c-hand align-self-center large-font-size"
+      <div>{{ $t('Advanced filters') }}</div>
+      <div 
+        class="h3 saooti-arrow_down m-0"
         :class="{ 'arrow-transform': showFilters }"
-      >
-        <div class="saooti-arrow_down saooti-arrow_down-margin" />
-      </div>
+      />
     </div>
     <div
       v-show="showFilters"
@@ -23,8 +19,7 @@
           {{ $t('Filter') }}
         </div>
         <MonetizableFilter
-          v-if="isMonetizableFilter"
-          :is-education="isEducation"
+          v-if="isMonetizableFilter && !isEducation"
           :is-emission="isEmission"
           @updateMonetization="updateMonetization"
         />
@@ -116,7 +111,7 @@
         </div>
       </div>
       <div class="d-flex flex-column">
-        <div class="primary-color mb-2 padding-left-custom-radio">
+        <div class="primary-color mb-2">
           {{ $t('Sort') }}
         </div>
         <ClassicRadio
@@ -175,10 +170,6 @@ export default defineComponent({
     return {
       isFrom: false as boolean,
       isTo: false as boolean,
-      lang: {
-        ok: this.$t('Validate') as string,
-        cancel: this.$t('Cancel') as string,
-      },
       fromDate: moment().subtract(10, 'days').toISOString() as string,
       toDate: moment().toISOString() as string,
       isNotVisible: false as boolean,
@@ -339,18 +330,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-
-.padding-left-custom-radio {
-  padding-left: 1.5rem;
-  @media (max-width: 720px) {
-    padding-left: 0;
-    margin-top: 1rem;
-  }
-}
-.large-font-size {
-  font-size: 1.3rem;
-}
-
 .advanced-search-container {
   background: #fff;
   border-radius: 0.8rem;
@@ -363,35 +342,22 @@ export default defineComponent({
     flex-wrap: wrap;
     justify-content: flex-start;
   }
-
   @media (max-width: 450px) {
     flex-direction: column;
-    .vdatetime {
-      padding: 0.5em 0 !important;
+    padding: 1rem;
+    .vdatetime, label {
+      padding: 0.5rem 0 !important;
       width: 100%;
       input {
         width: 100%;
       }
     }
-    padding: 1rem;
-
-    label.wrap {
-      width: 100%;
-      margin: 0.5em 0;
-      position: relative;
-    }
-  }
-
-  @media (min-width: 401px) {
-    label.wrap {
-      position: relative;
-      margin: 0;
-    }
   }
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    padding-right: 40px;
   }
 }
 </style>

package/src/components/display/filter/MonetizableFilter.vue

@@ -1,10 +1,9 @@
 <template>
   <div
-    v-if="!isEducation"
     class="d-flex align-items-center"
   >
     <div>{{ $t('Advertising') + ' :' }}</div>
-    <label class="wrap">
+    <label class="position-relative">
       <select
         ref="select"
         v-model="monetization"
@@ -24,7 +23,7 @@
         <option value="YES">{{ $t('Authorized advertising') }}</option>
         <option value="NO">{{ $t('Prohibited advertising') }}</option>
       </select>
-      <div class="saooti-arrow_down octopus-arrow-down-2 classic-select" />
+      <div class="saooti-arrow_down octopus-arrow-down" />
     </label>
   </div>
 </template>
@@ -34,7 +33,6 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
     isEmission: { default: false, type:  Boolean},
-    isEducation: { default: false, type:  Boolean},
   },
   emits: ['updateMonetization'],
 

package/src/components/display/filter/ProductorSearch.vue

@@ -7,7 +7,6 @@
       <OrganisationChooser
         :defaultanswer="$t('No organisation filter')"
         :value="organisationId"
-        :all="true"
         @selected="onOrganisationSelected"
       />
       <ClassicCheckbox

package/src/components/display/filter/RubriqueChoice.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex align-items-center">
-    <label class="wrap">
+    <label class="position-relative">
       <select
         v-model="rubriquageId"
         class="ms-2 mb-0 c-hand"
@@ -13,7 +13,7 @@
         >{{ rubriquage.title }}</option>
       </select>
       <div
-        class="saooti-arrow_down octopus-arrow-down-2 classic-select"
+        class="saooti-arrow_down octopus-arrow-down"
       />
     </label>
     <template v-if="rubriquageId">
@@ -36,12 +36,10 @@
     </template>
     <button
       v-if="index"
-      class="btn btn-circle primary-color ms-1"
+      class="btn admin-button ms-1 saooti-bin"
       aria-label="delete"
       @click="deleteRubriquage"
-    >
-      <span class="saooti-bin" />
-    </button>
+    />
   </div>
 </template>
 

package/src/components/display/filter/RubriqueFilter.vue

@@ -61,7 +61,6 @@ export default defineComponent({
       rubriqueId: [] as Array<number>,
       arrayFilter: [] as Array<RubriquageFilter>,
       rubriquageData: [] as Array<Rubriquage>,
-      reset: false as boolean,
       saveOrganisation: "" as string,
       isInit: true as boolean,
       isInternChanged: false as boolean,

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

@@ -3,7 +3,6 @@
     <h3>{{ $t('This live will start') }}</h3>
     <h3
       v-if="countdownTimer"
-      ref="countdown"
     >
       {{
         $t('In days hours minutes seconds', {
@@ -44,6 +43,10 @@ export default defineComponent({
       this.timer();
     }, 1000);
   },
+  unmounted() {
+    clearInterval(this.countdownTimer);
+  },
+
   methods: {
     timer(): void {
       this.days = Math.floor(this.seconds / 24 / 60 / 60);
@@ -52,7 +55,6 @@ export default defineComponent({
       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 as unknown as number));
         this.countdownTimer = undefined;

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

@@ -16,7 +16,7 @@
     <button
       v-show="!allFetched"
       class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link-plus mt-3' : 'btn-more'"
       :disabled="inFetching"
       :aria-label="$t('See more')"
       @click="displayMore"

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

@@ -46,7 +46,7 @@
     </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 },
@@ -56,7 +56,7 @@
         {{ live.title }}
       </router-link>
       <router-link
-        class="link-info text-truncate"
+        class="fw-bold text-truncate"
         :to="{
           name: 'emission',
           params: { emissionId: live.emission.emissionId },
@@ -87,7 +87,7 @@
           v-for="animator in live.animators"
           :key="animator.participantId"
           :aria-label="$t('Participant')"
-          class="link-info"
+          class="fw-bold"
           :to="{
             name: 'participant',
             params: { participantId: animator.participantId },
@@ -100,7 +100,7 @@
       <div v-if="!isPodcastmaker">
         {{ $t('Producted by : ') }}
         <router-link
-          class="link-info"
+          class="fw-bold"
           :to="{
             name: 'productor',
             params: { productorId: live.organisation.id },

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

@@ -1,117 +1,41 @@
 <template>
   <div
     v-if="filterOrga || organisationId"
-    class="d-flex flex-column align-items-center live-list-container"
+    class="d-flex flex-column align-items-center"
   >
-    <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="
-        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>
     </div>
-    <template v-if="lives.length">
-      <div class="horizontal-separator" />
-      <p class="live-list-category">
-        {{ $t('In live') }}
-      </p>
-      <LiveItem
-        v-for="(l, index) in lives"
-        :key="l.podcastId"
-        class="mt-3"
-        :fetch-conference="l"
-        :index="index"
-        @deleteItem="deleteLive"
-      />
-    </template>
-    <template v-if="livesNotStarted.length">
-      <div class="horizontal-separator" />
-      <p class="live-list-category">
-        {{ $t('This live is not started yet') }}
-      </p>
-      <LiveItem
-        v-for="(l, index) in livesNotStarted"
-        :key="l.podcastId"
-        class="mt-3"
-        :fetch-conference="l"
-        :index="index"
-        @deleteItem="deleteLiveNotStarted"
-      />
-    </template>
-    <template v-if="livesToBe.length">
-      <div class="horizontal-separator" />
-      <p class="live-list-category">
-        {{ $t('Live to be') }}
-      </p>
-      <LiveItem
-        v-for="(l, index) in livesToBe"
-        :key="l.podcastId"
-        class="mt-3"
-        :fetch-conference="l"
-        :index="index"
-        @deleteItem="deleteLiveToBe"
-      />
-    </template>
-    <template v-if="livesTerminated.length">
-      <div class="horizontal-separator" />
-      <p class="live-list-category">
-        {{ $t('Live terminated') }}
-      </p>
-      <LiveItem
-        v-for="(l, index) in livesTerminated"
-        :key="l.podcastId"
-        class="mt-3"
-        :fetch-conference="l"
-        :index="index"
-        @deleteItem="deleteLiveTerminated"
-      />
-    </template>
-    <template v-if="livesPublishing.length">
-      <div class="horizontal-separator" />
-      <p class="live-list-category">
-        {{ $t('Publishing') }}
-      </p>
-      <LiveItem
-        v-for="(l, index) in livesPublishing"
-        :key="l.podcastId"
-        class="mt-3"
-        :fetch-conference="l"
-        :index="index"
-        @deleteItem="deleteLivePublishing"
-      />
-    </template>
-    <template v-if="livesError.length">
-      <div class="horizontal-separator" />
-      <p class="live-list-category">
-        {{ $t('In error') }}
-      </p>
-      <LiveItem
-        v-for="(l, index) in livesError"
-        :key="l.podcastId"
-        class="mt-3"
-        :fetch-conference="l"
-        :index="index"
-        @deleteItem="deleteLiveError"
-      />
-    </template>
+    <div
+      v-for="(live, indexLive) in livesArray"
+      :key="live.status"
+    >
+      <template v-if="live.lives.length">
+        <hr>
+        <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>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import LiveItem from './LiveItem.vue';
 import octopusApi from '@saooti/octopus-api';
 import moment from 'moment';
@@ -122,6 +46,7 @@ export default defineComponent({
   name: 'LiveList',
   components: {
     LiveItem,
+    ClassicLoading
   },
 
   props: {
@@ -129,21 +54,25 @@ export default defineComponent({
     organisationId: { default: undefined, type: String},
   },
   emits: ['initConferenceIds'],
-
   data() {
     return {
       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>,
+      livesArray: [
+        {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:[]}
+      ] as Array<{status:string, title:string, lives:Array<Conference>}>
     };
   },
   
   computed: {
+    isNoLive(): boolean{
+      return this.loaded && !this.livesArray[0].lives.length && !this.livesArray[2].lives.length && !this.livesArray[3].lives.length;
+    },
     filterOrgaUsed(): string|undefined {
       if (this.filterOrga) return this.filterOrga;
       if (this.organisationId) return this.organisationId;
@@ -153,12 +82,12 @@ export default defineComponent({
       return this.$store.state.filter.organisationId;
     },
     displayNextLiveMessage(): string {
-      if (0 !== this.lives.length) return '';
-      if (this.livesNotStarted.length > 0)
+      if (0 !== this.livesArray[0].lives.length) return '';
+      if (this.livesArray[1].lives.length > 0)
         return this.$t('A live can start any moment').toString();
-      if (this.livesToBe.length > 0)
+      if (this.livesArray[2].lives.length > 0)
         return this.$t('Next live date', {
-          date: moment(this.livesToBe[0].date).format('LLLL'),
+          date: moment(this.livesArray[2].lives[0].date).format('LLLL'),
         }).toString();
       return '';
     },
@@ -219,12 +148,9 @@ export default defineComponent({
   },
   methods: {
     initArrays(): void {
-      this.lives.length = 0;
-      this.livesNotStarted.length = 0;
-      this.livesToBe.length = 0;
-      this.livesTerminated.length = 0;
-      this.livesError.length = 0;
-      this.livesPublishing.length = 0;
+      for (let i = 0, len = this.livesArray.length; i < len; i++) {
+        this.livesArray[i].lives.length = 0;
+      }
     },
     async fetchContent(): Promise<void> {
       this.initArrays();
@@ -235,89 +161,48 @@ export default defineComponent({
       }
       this.loading = true;
       this.loaded = false;
-      const dataLives = await octopusApi.listConferences(
-        this.filterOrgaUsed,
-        true,
-        'RECORDING'
-      );
-      this.lives = dataLives.filter((p: Conference | null) => {
-        return null !== p;
-      });
-      const dataLivesToBe = await octopusApi.listConferences(
-        this.filterOrgaUsed,
-        true,
-        '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 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 dataLivesPlanned = await octopusApi.listConferences(
-        this.filterOrgaUsed,
-        true,
-        'PLANNED'
-      );
-      this.livesToBe = dataLivesToBe
-        .slice(indexPast)
-        .concat(dataLivesPlanned)
-        .filter((p: Conference | null) => {
-          return null !== p;
-        });
-      if (this.organisationRight) {
-        const dataLivesTerminated = await octopusApi.listConferences(
-          this.filterOrgaUsed,
-          true,
-          'DEBRIEFING'
-        );
-        this.livesTerminated = dataLivesTerminated.filter((p: Conference | null) => {
-          return null !== p;
-        });
-        const dataLivesError = await octopusApi.listConferences(
+        const dataLives = await octopusApi.listConferences(
           this.filterOrgaUsed,
           true,
-          'ERROR'
+          this.livesArray[i].status
         );
-        this.livesError = dataLivesError.filter((p: Conference | null) => {
-          return null !== p;
-        });
-        const dataLivesPublishing = await octopusApi.listConferences(
-          this.filterOrgaUsed,
-          true,
-          'PUBLISHING'
-        );
-        this.livesPublishing = dataLivesPublishing.filter((p: Conference | null) => {
-          return null !== p;
-        });
+        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 = this.livesArray[i].lives.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.lives
-        .concat(this.livesToBe)
-        .concat(this.livesNotStarted);
+      const listIds = this.livesArray[0].lives
+        .concat(this.livesArray[1].lives)
+        .concat(this.livesArray[2].lives);
       this.$emit('initConferenceIds', listIds);
       this.loading = false;
       this.loaded = true;
     },
-    deleteLive(index: number): void {
-      this.lives.splice(index, 1);
-    },
-    deleteLiveToBe(index: number): void {
-      this.livesToBe.splice(index, 1);
-    },
-    deleteLiveTerminated(index: number): void {
-      this.livesTerminated.splice(index, 1);
-    },
-    deleteLiveError(index: number): void {
-      this.livesError.splice(index, 1);
-    },
-    deleteLiveNotStarted(index: number): void {
-      this.livesNotStarted.splice(index, 1);
-    },
-    deleteLivePublishing(index: number): void {
-      this.livesPublishing.splice(index, 1);
+    deleteLive(indexLives: number, index: number): void {
+      this.livesArray[indexLives].lives.splice(index, 1);
     },
     updateLiveLocal(): void {
       for (
@@ -326,25 +211,25 @@ export default defineComponent({
         index++
       ) {
         const element = this.conferenceWatched[index];
-        const indexLivesToBe = this.livesToBe.findIndex(
+        const indexLivesToBe = this.livesArray[1].lives.findIndex(
           (el: Conference) => el.conferenceId === element.conferenceId
         );
         if (-1 === indexLivesToBe) {
-          const indexLives = this.lives.findIndex(
+          const indexLives = this.livesArray[0].lives.findIndex(
             (el: Conference) => el.conferenceId === element.conferenceId
           );
           if (-1 === indexLives || 'DEBRIEFING' !== element.status) continue;
-          const 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;
-        const 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;
       }
     },
@@ -353,24 +238,9 @@ export default defineComponent({
 </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>