@saooti/octopus-sdk 36.0.5 → 36.0.6

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

@@ -1,139 +1,87 @@
 <template>
-  <div
-    class="default-multiselect-width"
-    :style="{ width: width }"
-  >
-    <label
-      :for="id"
-      class="d-inline"
-      title="select rubrique"
-    />
-    <VueMultiselect
-      :id="id"
-      ref="multiselectRef"
-      v-model="model"
-      :disabled="isDisabled"
-      class="rubriqueChooser"
-      label="name"
-      track-by="rubriqueId"
-      :aria-expanded="false"
-      :placeholder="$t('Type string to filter by rubrics')"
-      :options="rubriques"
-      :multiple="multiple"
-      :searchable="true"
-      :loading="isLoading"
-      :internal-search="false"
-      :clear-on-select="false"
-      :close-on-select="true"
-      :options-limit="rubriqueLimit"
-      :max-height="600"
-      :show-no-results="true"
-      :hide-selected="true"
-      :show-labels="false"
-      @open="onOpen"
-      @search-change="onSearchRubrique"
-      @select="onRubriqueSelected"
-    >
-      <template #singleLabel="{ option }">
-        <div class="multiselect-octopus-proposition">
-          <span class="option__title">
-            {{ option.name }}
-          </span>
-        </div>
-      </template>
-      <template
-        #option="{ option }"
-      >
-        <div
-          v-if="undefined!==option"
-          class="multiselect-octopus-proposition"
-          :class="option.rubriqueId <= 0 ? 'text-primary' : ''"
-          :data-selenium="'rubric-chooser-' + seleniumFormat(option.name)"
-        >
-          <span class="option__title">{{ option.name }}</span>
-        </div>
-      </template>
-      <template #noOptions>
-        {{ $t('List is empty') }}
-      </template>
-      <template #noResult>
-        {{ $t('No elements found. Consider changing the search query.') }}
-      </template>
-      <template #caret>
-        <span class="saooti-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>
+  <ClassicMultiselect
+    :id="idClassicMultiselect"
+    ref="selectRubrique"
+    :option-chosen="model"
+    option-label="name"
+    :label="$t('By rubric')"
+    :placeholder="$t('Type string to filter by categories')"
+    :max-element="maxElement"
+    :multiple="multiple"
+    :min-search-length="1"
+    :width="width"
+    :in-modal="inModal"
+    :is-disabled="isDisabled"
+    :no-deselect="noDeselect"
+    @onSearch="onSearchRubrique"
+    @selected="onRubriqueSelected"
+  />
 </template>
 
 <script lang="ts">
 import selenium from '../../mixins/selenium';
-//@ts-ignore
-import VueMultiselect from 'vue-multiselect';
 import { Rubrique } from '@/stores/class/rubrique/rubrique';
-const getDefaultRubrique = (defaultName: string) => {
-  if ('' === defaultName){
-    return undefined;
-  }
-  return { name: defaultName, rubriqueId: 0 } as Rubrique;
-};
-
+import ClassicMultiselect from '../../form/ClassicMultiselect.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    VueMultiselect,
+    ClassicMultiselect,
   },
   mixins:[selenium],
   props: {
-    width: { default: '100%', type: String },
     defaultanswer: { default: '', type: String },
-    rubriqueSelected: { default: undefined, type: Number },
+    width: { default: '100%', type: String },
     multiple: { default: false, type: Boolean },
-    rubriqueArray: { default: undefined, type: Object as ()=>Array<number> },
-    rubriquageId: { default: undefined, type: Number },
-    allRubriques: { default: () => [], type: Array as ()=> Array<Rubrique> },
     reset: { default: false, type: Boolean },
+    allRubriques: { default: () => [], type: Array as ()=> Array<Rubrique> },
+    rubriqueSelected: { default: undefined, type: Number },
+    rubriqueSelectedArray: { default: undefined, type: Object as ()=>Array<number> },
+    rubriquageId: { default: undefined, type: Number },
     withoutRubrique: { default: false, type: Boolean },
     isDisabled: { default: false, type: Boolean },
-    cannotBeUndefined: {default: false, type: Boolean}
+    noDeselect: {default: false, type: Boolean},
+    inModal:{default: false, type: Boolean},
   },
-  emits: ['update:rubriqueSelected', 'selected'],
+  emits: ['update:rubriqueSelected', 'update:rubriqueSelectedArray', 'selected'],
 
   data() {
     return {
-      rubriqueLimit: 250 as number,
-      rubriques: [] as Array<Rubrique>,
-      rubrique: getDefaultRubrique(this.defaultanswer),
-      rubriqueForArray: [] as Array<Rubrique>,
-      isLoading: false as boolean,
+      maxElement: 250 as number,
+      rubrique: undefined as Rubrique|undefined,
+      rubriqueForArray: [] as Array<Rubrique>|undefined,
       withoutItem: { name: this.$t('Without rubric'), rubriqueId: -1 } as {name: string, rubriqueId:number},
     };
   },
   computed: {
-    id(): string {
+    idClassicMultiselect(): string {
       return this.rubriquageId? 'rubriqueChooser' + this.rubriquageId : 'rubriqueChooser';
     },
+    getDefaultRubrique(): Rubrique|undefined{
+      if(''===this.defaultanswer){
+        return undefined;
+      }
+      return { name: this.defaultanswer, rubriqueId: 0 };
+    },
+    rubriques(): Array<Rubrique>{
+      let rubriques = this.allRubriques; 
+      if (!this.getDefaultRubrique) {
+        return rubriques;
+      }
+      if (this.withoutRubrique) {
+        rubriques.unshift(this.withoutItem);
+      }
+      rubriques.unshift(this.getDefaultRubrique);
+      
+      return rubriques;
+    },
     model: {
       get(): Rubrique| Array<Rubrique>|undefined{
-        return false===this.multiple ? this.rubrique:this.rubriqueForArray;
+        return !this.multiple ? this.rubrique:this.rubriqueForArray;
       },
       set(value: Rubrique| Array<Rubrique>|undefined): void{
-        if(false===this.multiple){
+        if(!this.multiple){
           this.rubrique = (value as Rubrique|undefined);
-          return
+          return;
         }
         this.rubriqueForArray = (value as Array<Rubrique>);
       }
@@ -141,102 +89,60 @@ export default defineComponent({
     }
   },
   watch: {
-    model:{
-      deep: true,
-      handler(){
-        if(false===this.multiple){
-          return;
-        }
-        const selected: Array<Rubrique> = JSON.parse(JSON.stringify(this.model));
-        const idsArray: Array<number> = [];
-        selected.forEach((el: Rubrique) => {
-          if(el.rubriqueId){
-            idsArray.push(el.rubriqueId);
-          }
-        });
-        this.$emit('selected', idsArray);
-      }
-    },
     rubriqueSelected: {
-      deep: true,
+      immediate:true,
       handler(){
-        if (undefined !== this.rubriqueSelected) {
-          this.initRubriqueSelected(this.rubriqueSelected);
+        if (this.rubriqueSelected) {
+          this.initRubriqueSelected();
+        }else{
+          this.rubrique = this.getDefaultRubrique;
         }
       }
     },
     reset(): void {
-      this.rubrique = getDefaultRubrique(this.defaultanswer);
+      this.rubrique = this.getDefaultRubrique;
     }
   },
   mounted() {
-    if (undefined !== this.rubriqueSelected) {
-      this.initRubriqueSelected(this.rubriqueSelected);
-    }
-    if (undefined !== this.rubriqueArray) {
-      this.initRubriqueArray(this.rubriqueArray);
-    }
+    this.initRubriqueArray();
   },
   methods: {
-    initRubriquesArray(): Array<Rubrique>{
-      if ('' === this.defaultanswer) {
-        return this.allRubriques;
-      }
-      const rubriqueDefault = getDefaultRubrique(this.defaultanswer);
-      if(!rubriqueDefault){
-        return this.allRubriques;
-      }
-      if (this.withoutRubrique) {
-        return [
-          rubriqueDefault,
-          this.withoutItem,
-        ].concat(this.allRubriques);
-      }
-      return [rubriqueDefault].concat(this.allRubriques);
-    },
-    onOpen(): void {
-      (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
-        'autocomplete',
-        'off'
-      );
-      this.rubriques = this.initRubriquesArray();
-    },
-    onClose(): void {
-      if (this.rubrique || undefined !== this.rubriqueArray) return;
-      if(this.cannotBeUndefined && undefined !== this.rubriqueSelected){
-        this.initRubriqueSelected(this.rubriqueSelected);
-        return;
-      }
-      this.rubrique ='' !== this.defaultanswer? getDefaultRubrique(this.defaultanswer): undefined;
-      this.onRubriqueSelected(this.rubrique);
-    },
     onSearchRubrique(query: string): void {
-      this.isLoading = true;
-      this.rubriques = this.initRubriquesArray().filter((item: Rubrique) => {
-        return item.name.toUpperCase().includes(query.toUpperCase());
-      });
-      this.isLoading = false;
-    },
-    onRubriqueSelected(rubrique: Rubrique|undefined): void {
-      if (undefined !== this.rubriqueSelected && rubrique) {
-        this.$emit('update:rubriqueSelected', rubrique.rubriqueId);
+      let rubriques = this.rubriques;
+      if(query){
+        rubriques = rubriques.filter((item: Rubrique) => {
+          return item.name.toUpperCase().includes(query.toUpperCase());
+        });
       }
-      if (false === this.multiple) {
+      (this.$refs.selectRubrique as InstanceType<typeof ClassicMultiselect>).afterSearch(rubriques,rubriques.length);
+    },
+    onRubriqueSelected(rubrique: Rubrique| Array<Rubrique>): void {
+      if (undefined !== this.rubriqueSelected) {
+        this.$emit('update:rubriqueSelected', (rubrique as Rubrique).rubriqueId);
+      } else if (undefined !== this.categorySelectedArray) {
+        const idsArray: Array<number> = [];
+        (rubrique as Array<Rubrique>).forEach((el: Rubrique) => {
+          idsArray.push(el.rubriqueId??0);
+        });
+        this.$emit('update:rubriqueSelectedArray', idsArray);
+      }else{
         this.$emit('selected', rubrique);
       }
     },
-    initRubriqueSelected(val: number): void {
-      this.rubrique = this.initRubriquesArray().find((el: Rubrique) => {
-        return el.rubriqueId === val;
-      });
+    initRubriqueSelected(): void {
+      this.rubrique = this.rubriques.find((el: Rubrique) => {
+        return el.rubriqueId === this.rubriqueSelected;
+      }) ?? this.getDefaultRubrique;
     },
-    initRubriqueArray(val: number[]): void {
-      this.rubriqueForArray = [];
-      val.forEach((element: number) => {
-        const item = this.initRubriquesArray().find((el: Rubrique) => {
+
+    initRubriqueArray(): void {
+      if(!this.rubriqueForArray || !this.rubriqueSelectedArray){return; }
+      this.rubriqueForArray.length = 0;
+      this.rubriqueSelectedArray.forEach((element: number) => {
+        const item = this.rubriques.find((el: Rubrique) => {
           return el.rubriqueId === element;
         });
-        if(undefined!==item){
+        if(this.rubriqueForArray && item){
           this.rubriqueForArray.push(item);
         }
       });

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

@@ -39,6 +39,7 @@
       :title="$t('See more')"
     />
     <Popover
+      ref="popoverRubrique"
       target="rubriques-dropdown"
       :only-click="true"
       :is-fixed="true"
@@ -46,22 +47,20 @@
     >
       <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)"
+        @selected="addFilterFromPopover($event)"
       />
-      <button
+      <!--  <button
         v-for="rubrique in hidenRubriques"
         :key="rubrique.rubriqueId"
         class="me-3 octopus-dropdown-item"
         @mousedown="addFilter(rubrique)"
       >
         {{ rubrique.name }}
-      </button>
+      </button> -->
     </Popover>
   </div>
 </template>
@@ -138,6 +137,10 @@ export default defineComponent({
         this.resizeWindow();
       });
     },
+    addFilterFromPopover(rubrique: Rubrique): void{
+      (this.$refs.popoverRubrique as InstanceType<typeof Popover>).clearClick();
+      this.addFilter(rubrique);
+    },
     addFilter(rubrique: Rubrique): void{
       if(!this.rubriquage){ return ;}
       const filterToAdd = {

package/src/components/display/sharing/PlayerParameters.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="h4 mb-2 mt-3">{{ $t('player parameters') }}</div>
+  <div class="h4 mb-2 mt-3">
+    {{ $t('player parameters') }}
+  </div>
   <template
     v-if="choseNumberEpisode"
   >

package/src/components/display/sharing/ShareButtons.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="module-box">
     <div class="d-flex align-items-center mb-3">
-      <h2 class="big-h2 mb-0">{{ $t('Share') }}</h2>
+      <h2 class="big-h2 mb-0">
+        {{ $t('Share') }}
+      </h2>
       <span
         v-if="authenticated"
         id="popover-share-help"
@@ -14,8 +16,8 @@
         target="popover-share-help"
         :title="$t('Help')"
         :content="$t('Share this page without edit and share blocks')"
-        relativeClass="page-element"
-        :isFixed="true"
+        relative-class="page-element"
+        :is-fixed="true"
       />
     </div>
     <div class="d-flex align-items-center justify-content-between">

package/src/components/display/sharing/ShareButtonsIntern.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="d-flex flex-column me-2">
-    <div class="h4 mb-2">{{$t('Social networks')}}</div>
+    <div class="h4 mb-2">
+      {{ $t('Social networks') }}
+    </div>
     <div class="d-flex align-items-center">
       <template
         v-for="button in arrayShareButtons"
@@ -20,8 +22,13 @@
       </template>
     </div>
   </div>
-  <div class="d-flex flex-column me-2" v-if="podcast || emission ||playlist">
-    <div class="h4 mb-2">{{$t('Newsletter')}}</div>
+  <div
+    v-if="podcast || emission ||playlist"
+    class="d-flex flex-column me-2"
+  >
+    <div class="h4 mb-2">
+      {{ $t('Newsletter') }}
+    </div>
     <div class="d-flex align-items-center justify-content-center">
       <button
         :class="getClass()"
@@ -33,19 +40,23 @@
   </div>
 
   <div class="d-flex flex-column me-2">
-    <div class="h4 mb-2">{{$t('QR Code')}}</div>
+    <div class="h4 mb-2">
+      {{ $t('QR Code') }}
+    </div>
     <div class="d-flex align-items-center justify-content-center">
       <button
         :class="getClass()"
         :title="$t('Share QR Code')"
-        @click="qrCode = true"
         class="saooti-qrcode"
+        @click="qrCode = true"
       />
     </div>
   </div>
 
   <div class="d-flex flex-column me-2">
-    <div class="h4 mb-2">{{$t('Copy this page URL')}}</div>
+    <div class="h4 mb-2">
+      {{ $t('Copy this page URL') }}
+    </div>
     <div class="d-flex align-items-center justify-content-center">
       <button
         :class="getClass()"
@@ -56,8 +67,13 @@
     </div>
   </div>
 
-  <div class="d-flex flex-column me-2" v-if="''!==rssUrl && displayRss">
-    <div class="h4 mb-2">{{$t('Rss feed')}}</div>
+  <div
+    v-if="''!==rssUrl && displayRss"
+    class="d-flex flex-column me-2"
+  >
+    <div class="h4 mb-2">
+      {{ $t('Rss feed') }}
+    </div>
     <div class="d-flex align-items-center justify-content-center">
       <a
         rel="noopener"

package/src/components/display/sharing/ShareDistribution.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="module-box">
-    <h2 class="big-h2 mb-3">{{ $t('Distribute') }}</h2>
+    <h2 class="big-h2 mb-3">
+      {{ $t('Distribute') }}
+    </h2>
     <div class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
       <div class="text-primary hide-small-screen text-break">

package/src/components/display/sharing/SharePlayer.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="module-box overflow-visible">
     <div class="d-flex justify-content-between align-items-center">
-      <h2 class="big-h2 mb-3 height-40">{{ $t('Embed') }}</h2>
+      <h2 class="big-h2 mb-3 height-40">
+        {{ $t('Embed') }}
+      </h2>
       <div
         v-if="noAd && !isEducation"
         class="sticker"

package/src/components/display/sharing/SharePlayerColors.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="d-flex mt-3">
     <div class="d-flex flex-column align-items-center flex-shrink-0 me-4">
-      <div class="h4 mb-2">{{ $t('Choose color') }}</div>
+      <div class="h4 mb-2">
+        {{ $t('Choose color') }}
+      </div>
       <VSwatches
         :model-value="color"
         class="c-hand "
@@ -13,7 +15,9 @@
       />
     </div>
     <div class="d-flex flex-column align-items-center">
-      <div class="h4 mb-2">{{ $t('Choose theme') }}</div>
+      <div class="h4 mb-2">
+        {{ $t('Choose theme') }}
+      </div>
       <VSwatches
         :model-value="theme"
         class="c-hand "

package/src/components/form/ClassicCheckbox.vue

@@ -72,7 +72,7 @@ export default defineComponent({
       bottom: 0;
       background-color: #ccc;
       transition: .4s;
-      border-radius: $octopus-borderradius;
+      border-radius: 1rem;
     }
     .slider:before {
       position: absolute;

package/src/components/form/ClassicMultiselect.vue

@@ -0,0 +1,155 @@
+<template>
+  <div 
+    class="default-multiselect-width"
+    :class="{'multiselect-in-modal' : inModal,
+             'multiselect-no-deselect': noDeselect}"
+    :style="{ width: width }"
+  >
+    <label
+      :for="id"
+      :title="label"
+    />
+    <vSelect
+      :id="id"
+      v-model="optionSelected"
+      :label="optionLabel"
+      :append-to-body="inModal"
+      :multiple="multiple"
+      :options="options"
+      :disabled="isDisabled"
+      :loading="isLoading"
+      :placeholder="placeholder"
+      @open="onSearch"
+      @search="onSearch"
+      @option:selected="onOptionSelected"
+    >
+      <template
+        v-if="optionCustomTemplating"
+        #option="option"
+      >
+        <slot
+          name="optionTemplating"
+          :option="option"
+        />
+      </template>
+      <template
+        v-if="optionCustomTemplating"
+        #selected-option="option"
+      >
+        <slot
+          name="optionTemplating"
+          :option="option"
+        />
+      </template>
+      <template #no-options="{ searching }">
+        <span v-if="searching">{{ $t('No elements found. Consider changing the search query.') }}</span>
+        <span v-else>{{ $t('List is empty') }}</span>
+      </template>
+      <template #list-footer>
+        <li
+          v-if="remainingElements"
+          class="vs__dropdown-option"
+        >
+          {{
+            $t('Count more elements matched your query, please make a more specific search.',{ count: remainingElements })
+          }}
+        </li>
+      </template>
+    </vSelect>
+  </div>
+</template>
+
+<script lang="ts">
+import vSelect from "vue-select";
+  export default {
+    components: {
+      vSelect,
+    },
+    props: {
+      id:{default: '', type: String},
+      label:{default: '', type: String},
+      placeholder:{default: '', type: String},
+      optionLabel:{default: '', type: String},
+      inModal:{default: false, type: Boolean},
+      multiple:{default: false, type: Boolean},
+      isDisabled:{default: false, type: Boolean},
+      width: { default: '100%', type: String },
+      maxElement: { default: 50, type: Number },
+      minSearchLength: { default: 3, type: Number },
+      optionChosen: { default: undefined, type: Object as ()=>unknown},
+      noDeselect:{default: false, type: Boolean},
+      optionCustomTemplating:{default: false, type: Boolean},
+    },
+
+    emits: ['onSearch','selected'],
+
+    data() {
+      return {
+        optionSelected: undefined as unknown|undefined,
+        options: [] as Array<unknown>,
+        remainingElements: 0 as number,
+        isLoading: false as boolean,
+      };
+    },
+
+    watch: {
+      optionChosen: {
+        deep: true,
+        immediate:true,
+        handler(){
+          this.optionSelected = this.optionChosen;
+        }
+      }
+    },
+    
+    methods:{
+      onSearch(search: string): void{
+        if(search && search.length < this.minSearchLength){return;}
+        this.isLoading = true;
+        this.$emit('onSearch', search);
+      },
+      afterSearch(optionsFetched: Array<unknown>, count: number):void{
+        this.options = optionsFetched;
+        this.remainingElements = Math.max(0, count - this.maxElement);
+        this.isLoading = false;
+      },
+      onOptionSelected(optionSelected: unknown):void{
+        this.$emit('selected', optionSelected);
+      }
+    }
+  }
+</script>
+<style lang="scss">
+@import "vue-select/dist/vue-select.css";
+.octopus-app{
+  --vs-border-radius: 0.2rem;
+  --vs-dropdown-option--active-bg: #ddd;
+  --vs-dropdown-option--active-color: black;
+  .default-multiselect-width {
+    width: 100%;
+    font-size: 1rem;
+  }
+  .vs__dropdown-option{
+    white-space: initial;
+  }
+  .vs__search:focus{
+    min-width: 150px;
+  }
+  .multiselect-in-modal .vs__dropdown-menu{
+    z-index: 9999;
+  }
+  .multiselect-no-deselect .vs__clear{
+    display: none;
+  }
+  .multiselect-transparent{
+    --vs-border-color: transparent;
+  }
+  .multiselect-white{
+    --vs-selected-color: white;
+    --vs-dropdown-bg: black;
+    .vs__actions path{
+      fill: white;
+    }
+  }
+}
+</style>