@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -0,0 +1,235 @@
+<template>
+  <div
+    v-if="organisationId && rubriquageData"
+    class="d-flex mt-3 align-items-center"
+  >
+    <div class="flex-shrink">
+      <input
+        id="search-rubriquage-checkbox"
+        v-model="isRubriquage"
+        type="checkbox"
+        class="form-check-input"
+      >
+      <label
+        class="form-check-label"
+        for="search-rubriquage-checkbox"
+      >{{ $t('By topic') }}</label>
+    </div>
+    <div
+      v-if="isRubriquage"
+      class="d-flex flex-column"
+    >
+      <RubriqueChoice 
+        v-for="(filter, index) in arrayFilter"
+        :key="index"
+        :index="index"
+        :rubriquage-display="getRubriquage(index)"
+        :rubrique-id-selected="filter.rubriqueId"
+        :rubriquage-id-selected="filter.rubriquageId"
+        @updateRubrique="updateRubrique"
+        @updateRubriquage="updateRubriquage"
+        @deleteRubriqueChoice="deleteRubriqueChoice(index)"
+      />
+      <button
+        v-if="availableRubriquage.length"
+        class="btn mt-2"
+        @click="addFilter"
+      >
+        {{ $t('Add a sort criterion by topic') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+const octopusApi = require('@saooti/octopus-api');
+import { Rubriquage } from '@/store/class/rubriquage';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const RubriqueChoice = defineAsyncComponent(() => import('./RubriqueChoice.vue'));
+export default defineComponent({
+  components: {
+    RubriqueChoice,
+  },
+  props: {
+    organisationId: { default: undefined, type: String},
+    resetRubriquage: { default: false, type:  Boolean},
+  },
+  emits: ['updateRubriquageFilter'],
+
+  data() {
+    return {
+      isRubriquage: false as boolean,
+      rubriquageId: [] as Array<number>,
+      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,
+    };
+  },
+
+  computed: {
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    organisation(): string|undefined {
+      if (this.organisationId) return this.organisationId;
+      if (this.filterOrga) return this.filterOrga;
+      return undefined;
+    },
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    availableRubriquage(): Array<Rubriquage>{
+      if(this.arrayFilter.length){
+        const rubriquageIdToNotShow = this.arrayFilter.map(a => a.rubriquageId);
+        return this.rubriquageData.filter((element)=>{
+          if(element.rubriquageId){
+            return !rubriquageIdToNotShow.includes(element.rubriquageId);
+          }
+        });
+      }
+      return this.rubriquageData;
+    }
+  },
+  watch: {
+    organisation(): void {
+      if(this.isRubriquage){
+        this.fetchTopics(true);
+      }
+    },
+    isRubriquage(): void {
+      if(this.isInternChanged ||this.isInit){
+        return;
+      }
+      this.isInternChanged = true;
+      if(this.isRubriquage){
+        if(this.saveOrganisation !== this.organisation){
+          this.fetchTopics(true);
+        }
+        this.$emit('updateRubriquageFilter', this.arrayFilter);
+      }else{
+        this.$emit('updateRubriquageFilter', []);
+      }
+      this.resetRubriqueFilter();
+      this.$nextTick(() => {
+        this.isInternChanged = false;
+      });
+    },
+    arrayFilter(): void{
+      if(this.isInternChanged ||this.isInit){
+        return;
+      }
+      this.isInternChanged = true;
+      this.resetRubriqueFilter();
+      if(this.isRubriquage){
+        this.$emit('updateRubriquageFilter', this.arrayFilter);
+      }
+      this.$nextTick(() => {
+        this.isInternChanged = false;
+      });
+    },
+    async rubriqueFilter(): Promise<void>{
+      if(this.isInternChanged){
+        return;
+      }
+      this.isInternChanged = true;
+      if(this.saveOrganisation !== this.filterOrga){
+        await this.fetchTopics(false);
+      }
+      if(this.rubriqueFilter.length){
+        this.arrayFilter = Array.from(this.rubriqueFilter);
+        this.isRubriquage = true;
+      }else if(this.rubriquageData[0].rubriquageId){
+        this.arrayFilter = [{rubriquageId: this.rubriquageData[0].rubriquageId, rubriqueId: 0, name:""}];
+        this.isRubriquage = false;
+      }
+      if(this.isRubriquage){
+        this.$emit('updateRubriquageFilter', this.arrayFilter);
+      }else{
+        this.$emit('updateRubriquageFilter', []);
+      }
+      this.$nextTick(() => {
+        this.isInternChanged = false;
+      });
+    },
+    resetRubriquage(): void {
+      this.isRubriquage = false;
+    },
+  },
+
+  created() {
+    if(this.rubriqueFilter.length){
+      this.arrayFilter = Array.from(this.rubriqueFilter);
+      this.isRubriquage = true;
+    }
+    this.fetchTopics(false);
+    this.$nextTick(() => {
+      this.isInit = false;
+    });
+  },
+  methods: {
+    deleteRubriqueChoice(index: number): void{
+      this.arrayFilter.splice(index,1);
+    },
+    getRubriquage(index: number){
+      const elementToNotShow = Array.from(this.arrayFilter);
+      elementToNotShow.splice(index, 1);
+      if(elementToNotShow.length){
+        const rubriquageIdToNotShow = elementToNotShow.map(a => a.rubriquageId);
+        return this.rubriquageData.filter((element)=>{
+          if(element.rubriquageId){
+            return !rubriquageIdToNotShow.includes(element.rubriquageId);
+          }
+        });
+      }
+      return this.rubriquageData;
+    },
+    addFilter(): void{
+      if(this.availableRubriquage[0].rubriquageId){
+        this.arrayFilter.push({rubriquageId: this.availableRubriquage[0].rubriquageId, rubriqueId: 0, name:""});
+      }
+    },
+    updateRubrique(newValue: {rubriqueId: number; index: number}): void{
+      const item = this.arrayFilter[newValue.index];
+      item.rubriqueId = newValue.rubriqueId;
+      this.arrayFilter.splice(newValue.index, 1, item);
+    },
+    updateRubriquage(newValue: {rubriquageId: number; index: number}): void{
+      const item = this.arrayFilter[newValue.index];
+      item.rubriquageId = newValue.rubriquageId;
+      this.arrayFilter.splice(newValue.index, 1, item);
+    },
+    async fetchTopics(initArrayFilter: boolean): Promise<void> {
+      if(initArrayFilter){
+        this.arrayFilter.length = 0;
+      }
+      if (!this.organisation) return;
+      const data = await octopusApi.fetchTopics(this.organisation);
+      this.rubriquageData = data.filter((element: Rubriquage)=>{
+        return element.rubriques.length;
+      });
+      this.saveOrganisation = this.organisation;
+      if (0 === this.rubriquageData.length) return;
+      if(initArrayFilter && this.rubriquageData[0].rubriquageId){
+        this.arrayFilter.push({rubriquageId: this.rubriquageData[0].rubriquageId, rubriqueId: 0, name:""});
+      }
+    },
+    resetRubriqueFilter(): void{
+      if(0===this.rubriqueFilter.length || this.isInit){
+        return;
+      }
+      const queries = this.$route.query;
+      if (queries.rubriquesId) {
+        this.$router.push({ query: {...queries, ...{rubriquesId: undefined} } });
+      }
+      this.$store.commit('filterRubrique', []);
+    }
+  },
+})
+</script>
+
+<style lang="scss"></style>

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

@@ -1,7 +1,10 @@
 <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"
+      ref="countdown"
+    >
       {{
         $t('In days hours minutes seconds', {
           days: pad(days),
@@ -11,48 +14,44 @@
         })
       }}
     </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 { defineComponent } from 'vue'
 export default defineComponent({
-  components: {},
-
-  mounted() {
-    if (!this.timeRemaining || this.timeRemaining <= 0) return;
-
-    this.seconds = this.timeRemaining;
-    this.countdownTimer = setInterval(() => {
-      this.timer();
-    }, 1000);
+  props: {
+    timeRemaining: { default: undefined, type: Number},
   },
-
-  props: ['timeRemaining'],
-
   data() {
     return {
-      seconds: undefined as any,
+      seconds: 0 as number,
       countdownTimer: undefined as any,
-      days: 0,
-      hours: 0,
-      minutes: 0,
-      remainingSeconds: 0,
+      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;
+    this.countdownTimer = setInterval(() => {
+      this.timer();
+    }, 1000);
+  },
   methods: {
-    timer() {
+    timer(): void {
       this.days = Math.floor(this.seconds / 24 / 60 / 60);
-      var hoursLeft = Math.floor(this.seconds - this.days * 86400);
+      const hoursLeft = Math.floor(this.seconds - this.days * 86400);
       this.hours = Math.floor(hoursLeft / 3600);
-      var minutesLeft = Math.floor(hoursLeft - this.hours * 3600);
+      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);
@@ -61,9 +60,11 @@ export default defineComponent({
         this.seconds--;
       }
     },
-    pad(n: string|number) {
-      return n < 10 ? '0' + n : n;
+    pad(n: number): string {
+      return n < 10 ? '0' + n : n.toString();
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

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

@@ -1,81 +1,87 @@
 <template>
-  <div class="d-flex flex-column" v-if="notEmpty">
-    <h2 class="mb-4 mt-3">{{ $t('All live emission button') }}</h2>
+  <div
+    v-if="notEmpty"
+    class="d-flex flex-column"
+  >
+    <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"
+        :key="l.podcastId"
+        :podcast="l"
       />
     </ul>
     <button
+      v-show="!allFetched"
       class="btn"
       :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
-      @click="displayMore"
-      v-show="!allFetched"
       :disabled="inFetching"
       :aria-label="$t('See more')"
+      @click="displayMore"
     >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
+      <template v-if="buttonPlus">
+        {{ $t('See more') }}
+      </template>
+      <div class="saooti-plus" />
     </button>
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import { state } from '../../../store/paramStore';
 
+import { Podcast } from '@/store/class/podcast';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LiveHorizontalList',
 
-  props: {
-    first: { default: 0 },
-    size: { default: 12 },
-    emissionId: { default: undefined as any },
-  },
-
   components: {
     PodcastItem,
   },
 
-  created() {
-    this.fetchContent(true);
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 12, 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,
     };
   },
 
+ 
   computed: {
-    allFetched():boolean {
+    allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
-    buttonPlus() {
+    buttonPlus(): boolean {
       return state.generalParameters.buttonPlus;
     },
   },
 
+  created() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
+    async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
         this.lives.length = 0;
         this.dfirst = 0;
         this.notEmpty = false;
       }
-      let param = {
+      const param = {
         first: this.dfirst,
         size: this.dsize,
         emissionId: this.emissionId,
@@ -84,13 +90,12 @@ export default defineComponent({
       const data = await octopusApi.fetchLives(param);
       this.afterFetching(reset, data);
     },
-
-    afterFetching(reset: any, data: { result: any; count: number; }) {
+    afterFetching(reset: boolean, data: any): void {
       if (reset) {
         this.lives.length = 0;
         this.dfirst = 0;
       }
-      this.lives = this.lives.concat(data.result).filter((l: null) => {
+      this.lives = this.lives.concat(data.result).filter((l: Podcast | null) => {
         return null !== l;
       });
       this.dfirst += this.dsize;
@@ -100,11 +105,12 @@ export default defineComponent({
       }
       this.inFetching = false;
     },
-
-    displayMore(event: { preventDefault: () => void; }) {
+    displayMore(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.fetchContent(false);
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>