@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="d-flex mt-3 align-items-center">
+    <ClassicCheckbox
+      v-model:textInit="isCategory"
+      class="flex-shrink-0 me-2"
+      id-checkbox="search-category-checkbox"
+      :label="$t('By category')"
+    />
+    <CategoryChooser
+      v-model:categorySelected="iabId"
+      width="auto"
+      :defaultanswer="$t('No category filter')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import CategoryChooser from '../categories/CategoryChooser.vue';
+import { Category } from '@/store/class/general/category';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  components: {
+    CategoryChooser,
+    ClassicCheckbox
+  },
+  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;
+      this.$emit('updateCategory', this.isCategory?this.iabId: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:{
+      deep: true,
+      handler(){
+        if(this.isInternChanged){
+          return;
+        }
+        this.isInternChanged = true;
+        this.iabId = this.categoryFilter ? this.categoryFilter.id : 0;
+        this.isCategory = this.categoryFilter ? true : 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.replace({ query: {...queries, ...{iabId: undefined} } });
+      }
+      this.$store.commit('filterIab', undefined);
+    }
+  },
+})
+</script>

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

@@ -1,41 +1,44 @@
 <template>
-  <div class="d-flex align-items-center" v-if="!isEducation">
+  <div class="d-flex align-items-center">
     <div>{{ $t('Advertising') + ' :' }}</div>
-    <label class="wrap">
+    <label class="position-relative">
       <select
         ref="select"
-        class="basic-select ml-2 mb-0 border c-hand"
         v-model="monetization"
+        class="ms-2 mb-0 c-hand"
         @change="onChange"
       >
-        <option value="UNDEFINED" v-if="isEmission">{{
-          $t('All emissions')
-        }}</option>
-        <option value="UNDEFINED" v-else>{{ $t('All podcasts') }}</option>
+        <option value="UNDEFINED">{{ allString }}</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-down octopus-arrow-down" />
     </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},
+  },
   emits: ['updateMonetization'],
 
   data() {
     return {
-      monetization: 'UNDEFINED',
+      monetization: 'UNDEFINED' as string,
     };
   },
-
+  computed:{
+    allString(): string{
+      return this.isEmission? this.$t('All emissions') : this.$t('All podcasts');
+    }
+  },
   methods: {
-    onChange() {
+    onChange(): void {
       this.$emit('updateMonetization', this.monetization);
     },
   },
-});
-</script>
+})
+</script>

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

@@ -1,26 +1,27 @@
 <template>
-  <div class="d-flex align-items-center">
+  <div class="d-flex align-items-center my-3">
     <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">
-        <input
-          type="checkbox"
-          class="custom-control-input"
-          id="orgaCheck"
-          v-model="keepOrganisation"
-          @click="onKeepOrganisation"
-        />
-        <label class="custom-control-label" for="orgaCheck"></label>
-      </div>
-      <div class="filter-speech-bubble" v-if="showBubble">
+      <ClassicCheckbox
+        v-if="!!organisationId"
+        v-model:textInit="keepOrganisation"
+        class="m-3"
+        :label="$t('check this box if you want to keep this filter for the rest of your visit')"
+        :display-label="false"
+        id-checkbox="organisation-checkbox"
+        @clickAction="onKeepOrganisation"
+      />
+      <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'
@@ -28,208 +29,184 @@
         }}
       </div>
     </div>
-    <div class="d-flex align-items-center flex-grow">
-      <label for="search" class="d-inline" :aria-label="$t('Search')"></label>
-      <input
-        id="search"
-        class="filter-search-input input-no-outline"
-        :placeholder="searchText"
-        :value="searchPattern"
-        ref="search"
-        v-on:input="
-          event => this.$emit('updateSearchPattern', event.target.value)
-        "
-      />
-    </div>
+    <ClassicSearch
+      v-model:textInit="queryIntern"
+      class="d-flex align-items-center flex-grow-1"
+      :autofocus="true"
+      id-checkbox="productor-search-input"
+      :label="searchText"
+    />
   </div>
 </template>
-<style lang="scss">
-@import '../../../sass/_variables.scss';
 
-.filter-speech-bubble {
-  position: absolute;
-  background: $octopus-primary-color;
-  border-radius: 0.4em;
-  width: 10rem;
-  right: 4rem;
-  padding: 5px;
-  -webkit-animation: fadein 1s;
-  -moz-animation: fadein 1s;
-  animation: fadein 1s;
-  color: white;
-}
-
-.filter-speech-bubble:after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  width: 0;
-  height: 0;
-  border: 18px solid transparent;
-  border-left-color: $octopus-primary-color;
-  border-right: 0;
-  border-bottom: 0;
-  margin-top: -9px;
-  margin-right: -18px;
-  -webkit-animation: fadein 1s;
-  -moz-animation: fadein 1s;
-  animation: fadein 1s;
-}
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-moz-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.filter-organisation-chooser {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  margin-right: 10%;
-  position: relative;
-  @media (max-width: 500px) {
-    margin-right: 0;
-  }
-}
-</style>
 <script lang="ts">
-// @ is an alias to /src
-import OrganisationChooser from '../organisation/OrganisationChooser.vue';
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import { state } from '../../../store/paramStore';
-const octopusApi = require('@saooti/octopus-api');
-
-import { defineComponent, ref } from 'vue'
+import { orgaFilter } from '../../mixins/organisationFilter';
+import { Organisation } from '@/store/class/general/organisation';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const OrganisationChooser = defineAsyncComponent(() => import('../organisation/OrganisationChooser.vue'));
+const ClassicCheckbox = defineAsyncComponent(() => import('../../form/ClassicCheckbox.vue'));
 export default defineComponent({
   components: {
     OrganisationChooser,
+    ClassicSearch,
+    ClassicCheckbox
   },
+  mixins:[orgaFilter],
 
   props: {
-    organisationId: { default: undefined as any },
-    searchPattern: { default: '' },
-    type: { default: 'podcast' },
+    organisationId: { default: undefined, type: String},
+    searchPattern: { default: '', type: String },
+    type: { default: 'podcast', type: String },
   },
   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,
+      keepOrganisation: false as boolean,
+      showBubble: false as boolean,
+      queryIntern: '' as string,
     };
   },
-
+ 
   computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-    searchText():string {
+    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 ('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 {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
   },
-
+  watch: {
+    queryIntern(): void {
+      if(this.queryIntern !== this.searchPattern){
+        this.$emit('updateSearchPattern', this.queryIntern);
+      }
+    },
+    filterOrga():void{
+      this.keepOrganisation = undefined!==this.filterOrga;
+      if (this.filterOrga) {
+        this.$emit('updateOrganisationId', this.filterOrga);
+      }
+    },
+  },
+  async created() {
+    if(this.searchPattern){
+      this.queryIntern=this.searchPattern;
+    }
+    if (!this.organisationId) return;
+    if(this.$store.state.filter.organisationId === this.organisationId){
+      this.keepOrganisation = true;
+    }
+  },
   methods: {
-    onOrganisationSelected(organisation: any) {
+    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 as any,
-        imgUrl: this.imgUrl,
-      });
+      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);
+        if("PUBLIC"!==organisation.privacy){
+          this.$nextTick(() => {
+            this.onKeepOrganisation();
+          });
+        } else{
+          this.showBubble = true;
+          setTimeout(() => {
+            this.showBubble = false;
+          }, 6000);
+        }
       } else {
         this.$emit('updateOrganisationId', undefined);
       }
     },
-    async onKeepOrganisation() {
+    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 } });
-        }
-        this.$store.commit('filterOrga', {
-          orgaId: this.organisationId,
-          imgUrl: this.imgUrl,
-        });
-        const isLive = await octopusApi.liveEnabledOrganisation(
-          this.organisationId
-        );
-        this.$store.commit('filterOrgaLive', isLive);
+        await this.selectOrganisation(this.organisationId);
         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;
-      }
+      this.removeSelectedOrga();
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.octopus-app{
+  .filter-speech-bubble {
+    position: absolute;
+    background: $octopus-primary-dark;
+    border-radius: 0.4em;
+    width: 10rem;
+    right: 4rem;
+    padding: 5px;
+    -webkit-animation: fadein 1s;
+    -moz-animation: fadein 1s;
+    animation: fadein 1s;
+    color: white;
+  }
+
+  .filter-speech-bubble:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 0;
+    height: 0;
+    border: 18px solid transparent;
+    border-left-color: $octopus-primary-dark;
+    border-right: 0;
+    border-bottom: 0;
+    margin-top: -9px;
+    margin-right: -18px;
+    -webkit-animation: fadein 1s;
+    -moz-animation: fadein 1s;
+    animation: fadein 1s;
+  }
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @-moz-keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @-webkit-keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  .filter-organisation-chooser {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    margin-right: 10%;
+    position: relative;
+    @media (max-width: 500px) {
+      margin-right: 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="d-flex align-items-center">
+    <label class="position-relative">
+      <select
+        v-model="rubriquageId"
+        class="ms-2 mb-0 c-hand"
+        @change="onRubriquageSelected"
+      >
+        <option
+          v-for="rubriquage in rubriquageDisplay"
+          :key="rubriquage.rubriquageId"
+          :value="rubriquage.rubriquageId"
+        >{{ rubriquage.title }}</option>
+      </select>
+      <div
+        class="saooti-down octopus-arrow-down"
+      />
+    </label>
+    <template v-if="rubriquageId">
+      <div class="ms-3 flex-shrink-0">
+        {{ $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 admin-button ms-1 saooti-bin"
+      title="delete"
+      @click="deleteRubriquage"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { Rubrique } from '@/store/class/rubrique/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
+      );
+      return -1 !== topicIndex ? this.rubriquageDisplay[topicIndex].rubriques : [];
+    },
+    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>