@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="d-flex mt-3 align-items-center">
+    <div class="flex-shrink me-2">
+      <input
+        id="search-category-checkbox"
+        v-model="isCategory"
+        type="checkbox"
+        class="form-check-input"
+      >
+      <label
+        class="form-check-label"
+        for="search-category-checkbox"
+      >{{ $t('By category') }}</label>
+    </div>
+    <CategoryChooser
+      v-model:categorySelected="iabId"
+      width="auto"
+      :defaultanswer="$t('No category filter')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import CategoryChooser from '../categories/CategoryChooser.vue';
+import { Category } from '@/store/class/category';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  components: {
+    CategoryChooser
+  },
+  emits: ['updateCategory'],
+  data() {
+    return {
+      isCategory: false as boolean,
+      iabId: 0 as number,
+      isInternChanged: false as boolean,
+      isInit: true as boolean,
+    };
+  },
+  computed: {
+    categoryFilter(): Category|undefined{
+      return this.$store.state.filter.iab;
+    },
+  },
+  watch: {
+    isCategory(): void {
+      if(this.isInternChanged ||this.isInit){
+        return;
+      }
+      this.isInternChanged = true;
+      if (this.isCategory) {
+        this.$emit('updateCategory', this.iabId);
+      } else {
+        this.$emit('updateCategory', 0); 
+      }
+      this.resetCategoryFilter();
+      this.$nextTick(() => {
+        this.isInternChanged = false;
+      });
+    },
+    iabId(): void {
+      if(this.isInternChanged ||this.isInit){
+        return;
+      }
+      this.isInternChanged = true;
+      this.resetCategoryFilter();
+      if(this.isCategory){
+        this.$emit('updateCategory', this.iabId);
+      }
+      this.$nextTick(() => {
+        this.isInternChanged = false;
+      });
+    },
+    categoryFilter(): void{
+      if(this.isInternChanged){
+        return;
+      }
+      this.isInternChanged = true;
+      if(this.categoryFilter){
+        this.iabId = this.categoryFilter.id;
+        this.isCategory = true;
+      }else{
+        this.iabId = 0;
+        this.isCategory = false;
+      }
+      this.$emit('updateCategory', this.iabId);
+      this.$nextTick(() => {
+        this.isInternChanged = false;
+      });
+    },
+  },
+
+  created() {
+    if(this.categoryFilter){
+      this.iabId = this.categoryFilter.id;
+      this.isCategory = true;
+    }
+    this.$nextTick(() => {
+      this.isInit = false;
+    });
+  },
+  methods: {
+    resetCategoryFilter(): void{
+      if(!this.categoryFilter || this.isInit){
+        return;
+      }
+      const queries = this.$route.query;
+      if (queries.iabId) {
+        this.$router.push({ query: {...queries, ...{iabId: undefined} } });
+      }
+      this.$store.commit('filterIab', undefined);
+    }
+  },
+})
+</script>
+
+<style lang="scss"></style>

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

@@ -1,41 +1,55 @@
 <template>
-  <div class="d-flex align-items-center" v-if="!isEducation">
+  <div
+    v-if="!isEducation"
+    class="d-flex align-items-center"
+  >
     <div>{{ $t('Advertising') + ' :' }}</div>
     <label class="wrap">
       <select
         ref="select"
-        class="basic-select ml-2 mb-0 border c-hand"
         v-model="monetization"
+        class="basic-select ms-2 mb-0 border c-hand"
         @change="onChange"
       >
-        <option value="UNDEFINED" v-if="isEmission">{{
+        <option
+          v-if="isEmission"
+          value="UNDEFINED"
+        >{{
           $t('All emissions')
         }}</option>
-        <option value="UNDEFINED" v-else>{{ $t('All podcasts') }}</option>
+        <option
+          v-else
+          value="UNDEFINED"
+        >{{ $t('All podcasts') }}</option>
         <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>
+      <div class="saooti-arrow_down octopus-arrow-down-2 classic-select" />
     </label>
   </div>
 </template>
-<style lang="scss"></style>
+
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
-  props: ['isEmission', 'isEducation'],
+  props: {
+    isEmission: { default: false, type:  Boolean},
+    isEducation: { default: false, type:  Boolean},
+  },
   emits: ['updateMonetization'],
 
   data() {
     return {
-      monetization: 'UNDEFINED',
+      monetization: 'UNDEFINED' as string,
     };
   },
 
   methods: {
-    onChange() {
+    onChange(): void {
       this.$emit('updateMonetization', this.monetization);
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

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

@@ -1,26 +1,35 @@
 <template>
   <div class="d-flex align-items-center">
     <div
-      class="filter-organisation-chooser"
       v-if="!isPodcastmaker && !filterOrga"
+      class="filter-organisation-chooser"
     >
       <OrganisationChooser
         :defaultanswer="$t('No organisation filter')"
-        @selected="onOrganisationSelected"
         :value="organisationId"
         :all="true"
+        @selected="onOrganisationSelected"
       />
-      <div class="checkbox-saooti m-3" v-if="!!organisationId">
+      <div
+        v-if="!!organisationId"
+        class="m-3"
+      >
         <input
-          type="checkbox"
-          class="custom-control-input"
           id="orgaCheck"
           v-model="keepOrganisation"
+          type="checkbox"
+          class="form-check-input"
           @click="onKeepOrganisation"
+        >
+        <label
+          class="form-check-label"
+          for="orgaCheck"
         />
-        <label class="custom-control-label" for="orgaCheck"></label>
       </div>
-      <div class="filter-speech-bubble" v-if="showBubble">
+      <div
+        v-if="showBubble"
+        class="filter-speech-bubble"
+      >
         {{
           $t(
             'check this box if you want to keep this filter for the rest of your visit'
@@ -29,20 +38,129 @@
       </div>
     </div>
     <div class="d-flex align-items-center flex-grow">
-      <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
+      <label
+        for="search"
+        class="d-inline"
+        :aria-label="$t('Search')"
+      />
       <input
         id="search"
+        ref="search"
         class="filter-search-input input-no-outline"
         :placeholder="searchText"
         :value="searchPattern"
-        ref="search"
-        v-on:input="
-          event => this.$emit('updateSearchPattern', event.target.value)
+        :readonly="notInitFocus"
+        @input="
+          event => $emit('updateSearchPattern', event.target.value)
         "
-      />
+      >
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import { state } from '../../../store/paramStore';
+import { orgaFilter } from '../../mixins/organisationFilter';
+import { Organisation } from '@/store/class/organisation';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const OrganisationChooser = defineAsyncComponent(() => import('../organisation/OrganisationChooser.vue'));
+export default defineComponent({
+  components: {
+    OrganisationChooser,
+  },
+  mixins:[orgaFilter],
+
+  props: {
+    organisationId: { default: undefined, type: String},
+    searchPattern: { default: '', type: String },
+    type: { default: 'podcast', type: String },
+  },
+  emits: ['updateOrganisationId', 'updateSearchPattern'],
+
+  data() {
+    return {
+      keepOrganisation: false as boolean,
+      showBubble: false as boolean,
+      imgUrl: '' as string,
+      notInitFocus: true as boolean
+    };
+  },
+ 
+  computed: {
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    searchText(): string {
+      if ('emission' === this.type) return this.$t('Look for emission name').toString();
+      if ('participant' === this.type)
+        return this.$t('Look for participant name').toString();
+      if ('playlist' === this.type) return this.$t('Look for playlist name').toString();
+      return this.$t('Look for podcast name').toString();
+    },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+  },
+  watch: {
+    filterOrga(): void {
+      if (this.filterOrga) {
+        this.keepOrganisation = true;
+        this.$emit('updateOrganisationId', this.filterOrga);
+      } else {
+        this.keepOrganisation = false;
+      }
+    },
+  },
+  async created() {
+    if (!this.organisationId) return;
+    if(this.$store.state.filter.organisationId === this.organisationId){
+      this.keepOrganisation = true;
+    }
+  },
+  mounted() {
+    if (this.$refs.search) {
+      (this.$refs.search as HTMLElement).focus();
+      this.notInitFocus = false;
+    }
+  },
+  methods: {
+    onOrganisationSelected(organisation: Organisation): void {
+      if (this.$route.query.productor) {
+        this.$router.push({ query: { productor: undefined } });
+      }
+      this.imgUrl = organisation.imageUrl;
+      this.$store.commit('filterOrga', {
+        orgaId: undefined,
+      });
+      this.keepOrganisation = false;
+      if (organisation && organisation.id) {
+        this.showBubble = true;
+        setTimeout(() => {
+          this.showBubble = false;
+        }, 6000);
+        this.$emit('updateOrganisationId', organisation.id);
+      } else {
+        this.$emit('updateOrganisationId', undefined);
+      }
+    },
+    async onKeepOrganisation(): Promise<void> {
+      if(!this.organisationId){return}
+      if (!this.keepOrganisation) {
+        if (this.$route.query.productor !== this.organisationId) {
+          this.$router.push({ query: { productor: this.organisationId } });
+        }
+        await this.selectOrganisation(this.organisationId);
+        return;
+      }
+      if (this.$route.query.productor) {
+        this.$router.push({ query: { productor: undefined } });
+      }
+      this.$store.commit('filterOrga', { orgaId: undefined });
+    },
+  },
+})
+</script>
+
 <style lang="scss">
 @import '../../../sass/_variables.scss';
 
@@ -110,126 +228,4 @@
     margin-right: 0;
   }
 }
-</style>
-<script lang="ts">
-// @ is an alias to /src
-import OrganisationChooser from '../organisation/OrganisationChooser.vue';
-import { state } from '../../../store/paramStore';
-const octopusApi = require('@saooti/octopus-api');
-
-import { defineComponent, ref } from 'vue'
-export default defineComponent({
-  components: {
-    OrganisationChooser,
-  },
-
-  props: {
-    organisationId: { default: undefined as any },
-    searchPattern: { default: '' },
-    type: { default: 'podcast' },
-  },
-  emits: ['updateOrganisationId', 'updateSearchPattern'],
-  setup() {
-    const search : any = ref(null);
-    return {
-      search,
-    };
-  },
-
-  async created() {
-    if (!this.organisationId) return;
-    this.$store.commit('filterOrga', { orgaId: this.organisationId });
-    const isLive = await octopusApi.liveEnabledOrganisation(
-      this.organisationId
-    );
-    this.$store.commit('filterOrgaLive', isLive);
-    this.keepOrganisation = true;
-    if (!this.$route.query.productor) {
-      this.$router.replace({ query: { productor: this.organisationId } });
-    }
-  },
-
-  mounted() {
-    if (this.search) {
-      this.search.focus();
-    }
-  },
-
-  data() {
-    return {
-      keepOrganisation: false,
-      showBubble: false,
-      imgUrl: undefined as any,
-    };
-  },
-
-  computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-    searchText():string {
-      if ('emission' === this.type) return this.$t('Look for emission name');
-      if ('participant' === this.type)
-        return this.$t('Look for participant name');
-      if ('playlist' === this.type) return this.$t('Look for playlist name');
-      return this.$t('Look for podcast name');
-    },
-    filterOrga():any {
-      return this.$store.state.filter.organisationId;
-    },
-  },
-
-  methods: {
-    onOrganisationSelected(organisation: any) {
-      if (this.$route.query.productor) {
-        this.$router.push({ query: { productor: undefined } });
-      }
-      this.imgUrl = organisation.imageUrl;
-      this.$store.commit('filterOrga', {
-        orgaId: undefined as any,
-        imgUrl: this.imgUrl,
-      });
-      this.keepOrganisation = false;
-      if (organisation && organisation.id) {
-        this.showBubble = true;
-        setTimeout(() => {
-          this.showBubble = false;
-        }, 6000);
-        this.$emit('updateOrganisationId', organisation.id);
-      } else {
-        this.$emit('updateOrganisationId', undefined);
-      }
-    },
-    async onKeepOrganisation() {
-      if (!this.keepOrganisation) {
-        if (this.$route.query.productor !== this.organisationId) {
-          this.$router.push({ query: { productor: this.organisationId } });
-        }
-        this.$store.commit('filterOrga', {
-          orgaId: this.organisationId,
-          imgUrl: this.imgUrl,
-        });
-        const isLive = await octopusApi.liveEnabledOrganisation(
-          this.organisationId
-        );
-        this.$store.commit('filterOrgaLive', isLive);
-        return;
-      }
-      if (this.$route.query.productor) {
-        this.$router.push({ query: { productor: undefined } });
-      }
-      this.$store.commit('filterOrga', { orgaId: undefined });
-    },
-  },
-  watch: {
-    filterOrga():any {
-      if (this.filterOrga) {
-        this.keepOrganisation = true;
-        this.$emit('updateOrganisationId', this.filterOrga);
-      } else {
-        this.keepOrganisation = false;
-      }
-    },
-  },
-});
-</script>
+</style>

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

@@ -0,0 +1,104 @@
+<template>
+  <div class="d-flex align-items-center">
+    <label class="wrap">
+      <select
+        v-model="rubriquageId"
+        class="basic-select ms-2 mb-0 border c-hand"
+        @change="onRubriquageSelected"
+      >
+        <option
+          v-for="rubriquage in rubriquageDisplay"
+          :key="rubriquage.rubriquageId"
+          :value="rubriquage.rubriquageId"
+        >{{ rubriquage.title }}</option>
+      </select>
+      <div
+        class="saooti-arrow_down octopus-arrow-down-2 classic-select"
+      />
+    </label>
+    <template v-if="rubriquageId">
+      <div class="ms-3 flex-shrink">
+        {{ $t('By rubric') }}
+      </div>
+      <RubriqueChooser
+        v-if="getRubriques(rubriquageId).length"
+        class="ms-2"
+        :multiple="false"
+        :rubriquage-id="rubriquageId"
+        :rubrique-selected="0 < rubriqueIdSelected? rubriqueIdSelected : undefined"
+        :all-rubriques="getRubriques(rubriquageId)"
+        :defaultanswer="$t('No rubric filter')"
+        :reset="reset"
+        :without-rubrique="true"
+        width="auto"
+        @selected="onRubriqueSelected"
+      />
+    </template>
+    <button
+      v-if="index"
+      class="btn btn-circle primary-color ms-1"
+      aria-label="delete"
+      @click="deleteRubriquage"
+    >
+      <span class="saooti-bin" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Rubriquage } from '@/store/class/rubriquage';
+import { Rubrique } from '@/store/class/rubrique';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const RubriqueChooser = defineAsyncComponent(() => import('../rubriques/RubriqueChooser.vue'));
+export default defineComponent({
+  components: {
+    RubriqueChooser,
+  },
+  props: {
+    rubriquageDisplay: { default: () => [], type: Array as ()=>Array<Rubriquage>},
+    rubriquageIdSelected:{default: 0, type: Number},
+    rubriqueIdSelected: { default: 0, type: Number},
+    index: { default: 0, type: Number},
+  },
+  emits: ['deleteRubriqueChoice', 'updateRubrique', 'updateRubriquage'],
+
+  data() {
+    return {
+      rubriquageId: undefined as number|undefined,
+      rubriqueId: undefined as number|undefined,
+      reset: false as boolean,
+    };
+  },
+
+  created(){
+    this.rubriquageId = this.rubriquageIdSelected;
+  },
+
+  methods: {
+    deleteRubriquage(){
+      this.$emit('deleteRubriqueChoice');
+    },
+    getRubriques(rubriquageId: number): Array<Rubrique> {
+      const topicIndex = this.rubriquageDisplay.findIndex(
+        ( element: Rubriquage) => element.rubriquageId === rubriquageId
+      );
+      if(-1 !== topicIndex){
+        return this.rubriquageDisplay[topicIndex].rubriques;
+      }
+      return [];
+    },
+    onRubriqueSelected(rubrique: Rubrique): void {
+      if (rubrique.rubriqueId === this.rubriqueId) return;
+      this.rubriqueId = rubrique.rubriqueId;
+      this.$emit('updateRubrique', {rubriqueId : rubrique.rubriqueId, index: this.index});
+    },
+    onRubriquageSelected(): void {
+      this.reset = !this.reset;
+      this.rubriqueId = 0;
+      this.$emit('updateRubriquage', {rubriquageId : this.rubriquageId, index: this.index});
+    },
+  },
+})
+</script>
+
+<style lang="scss"></style>