@saooti/octopus-sdk 35.2.8 → 35.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "35.2.8",
+  "version": "35.2.9",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/assets/multiselect.scss

@@ -75,7 +75,7 @@
     {
         position: absolute;
         right: 10px;
-        top: 0.4rem;
+        top: 0.5rem;
     }
 
 
@@ -220,6 +220,8 @@
     .multiselect__tags {
         min-height: 45px;
         display: flex;
+        padding-right: 40px;
+        padding-left: 5px;
         align-items: center;
         border-radius: 0.3em;
         border: 0.1rem solid #dee2e6;
@@ -327,8 +329,6 @@
     .multiselect__placeholder {
         color: #757575;
         display: inline-block;
-        margin-bottom: 10px;
-        padding-top: 2px;
     }
 
     .multiselect--active .multiselect__placeholder {

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

@@ -7,7 +7,7 @@
       v-if="filterIab || filterRubrique.length"
       class="octopus-breadcrumb d-flex align-items-center flex-wrap"
     >
-      <li>
+      <li class="octopus-breadcrumb-li">
         <a
           href="#"
           @click="removeFilter(-1, $event)"
@@ -15,13 +15,14 @@
       </li>
       <li
         v-if="filterIab"
+        class="octopus-breadcrumb-li"
       >
         {{ filterIab.name }}
       </li>
       <li 
         v-for="(filter, index) in filterRubrique" 
         :key="filter.rubriqueId"
-        class="d-flex align-items-center"
+        class="d-flex align-items-center octopus-breadcrumb-li"
         :class="filterRubrique.length-1 === index ? 'active':''"
       >
         <a
@@ -148,7 +149,7 @@ export default defineComponent({
     padding: 1rem;
     align-items: center;
     background: #FAFAFA;
-    li{
+    .octopus-breadcrumb-li{
       list-style: none;
       &:after {
         content: "/";

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -25,7 +25,7 @@
       :internal-search="false"
       :clear-on-select="false"
       :close-on-select="true"
-      :options-limit="200"
+      :options-limit="rubriqueLimit"
       :max-height="600"
       :show-no-results="true"
       :hide-selected="true"
@@ -62,6 +62,19 @@
       <template #caret>
         <span class="saooti-down octopus-arrow-down octopus-arrow-down-absolute" />
       </template>
+       <template #afterList="">
+        <div
+          v-if="rubriques.length > rubriqueLimit"
+          class="multiselect-remaining-elements"
+        >
+          {{
+            $t(
+              'Count more elements matched your query, please make a more specific search.',
+              { count: rubriques.length - rubriqueLimit }
+            )
+          }}
+        </div>
+      </template>
     </VueMultiselect>
   </div>
 </template>
@@ -101,6 +114,7 @@ export default defineComponent({
 
   data() {
     return {
+      rubriqueLimit: 250 as number,
       rubriques: [] as Array<Rubrique>,
       rubrique: getDefaultRubrique(this.defaultanswer),
       rubriqueForArray: [] as Array<Rubrique>,

package/src/components/display/rubriques/RubriqueList.vue

@@ -44,6 +44,16 @@
       :is-fixed="true"
       :left-pos="true"
     >
+      <RubriqueChooser
+        v-if="hidenRubriques.length"
+        :multiple="false"
+        :rubriquage-id="rubriquage.rubriquageId"
+        :all-rubriques="hidenRubriques"
+        :cannot-be-undefined="true"
+        class="mb-3"
+        width="auto"
+        @selected="addFilter(index,$event)"
+      />
       <button
         v-for="rubrique in hidenRubriques"
         :key="rubrique.rubriqueId"
@@ -63,12 +73,14 @@ import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
 import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
 import { useFilterStore } from '@/stores/FilterStore';
 import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
+const RubriqueChooser = defineAsyncComponent(() => import('../rubriques/RubriqueChooser.vue'));
 export default defineComponent({
   name: 'RubriqueList',
 
   components:{
-    Popover
+    Popover,
+    RubriqueChooser
   },
 
   props: {

package/src/components/pages/Home.vue

@@ -11,19 +11,33 @@
     </template>
     <template v-else>
       <PodcastInlineList
-        v-for="r in rubriqueDisplay"
+        v-for="r in rubriqueToShow"
         :key="r.rubriqueId"
         :rubrique-id="rubriqueId.concat(r.rubriqueId)"
         :title="r.name"
         :button-text="$t('All podcast button', { name: r.name })"
       />
       <PodcastInlineList
-        v-if="rubriqueDisplay && rubriqueDisplay.length"
+        v-if="!tooManyRubrique"
         :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
         :rubrique-id="rubriqueId"
         :title="$t('Without rubric')"
         :button-text="$t('All podcast button', { name: $t('Without rubric') })"
       />
+      <router-link
+        v-else
+        :to="{
+          name: 'podcasts',
+          query: { productor: filterOrgaId, 
+                  iabId: filterIab?.id,
+                  rubriquesId: this.rubriqueQueryParam },
+          }"
+        class="btn btn-primary align-self-center width-fit-content mt-5 m-auto"
+      >
+        {{
+          $t('See more')
+        }}
+      </router-link>
     </template>
   </div>
 </template>
@@ -47,14 +61,30 @@ export default defineComponent({
   data() {
     return {
       rubriqueId: [] as Array<number>,
+      rubriqueMaxDisplay: 20 as number,
     };
   },
   computed: {
     ...mapState(useGeneralStore, ['storedCategories']),
     ...mapState(useFilterStore, ['filterRubriquage', 'filterOrgaId', 'filterRubrique', 'filterRubriqueDisplay', 'filterIab']),
+    rubriqueQueryParam(): string|undefined{
+      if(this.filterRubrique?.length){
+        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
+    },
+    tooManyRubrique(): boolean{
+      return this.rubriqueDisplay && this.rubriqueDisplay.length >this.rubriqueMaxDisplay;
+    },
     rubriqueDisplay(): Array<Rubrique>{
       return this.filterRubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
+    rubriqueToShow(): Array<Rubrique>{
+      if(!this.tooManyRubrique){
+        return this.rubriqueDisplay ?? [];
+      }
+      return this.rubriqueDisplay.slice(0, this.rubriqueMaxDisplay);
+    },
     rubriquageFilter(): Array<Rubriquage>{
       return this.filterOrgaId? this.filterRubriquage :[];
     },