@saooti/octopus-sdk 36.0.4 → 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"
@@ -200,32 +202,14 @@ export default defineComponent({
     iFrameHeight(): string {
       switch (this.iFrameModel) {
         case 'large':
-          if (this.podcast) return '180px';
-          if ('number' === this.episodeNumbers && !this.playlist) {
-            switch (this.iFrameNumber.toString()) {
-              case '1': return '270px';
-              case '2': return '320px';
-              case '3': return '360px';
-              case '4': return '420px';
-              case '5': return '420px';
-              default: return '420px';
-            }
-          }
-          return '435px';
+          if (this.podcast) return '200px';
+          return '350px';
         case 'emissionLarge':
         case 'largeSuggestion':
-          if ('number' !== this.episodeNumbers) return '510px';
-          switch (this.iFrameNumber.toString()) {
-            case '1':return '315px';
-            case '2':return '365px';
-            case '3':return '420px';
-            case '4':return '470px';
-            case '5':return '470px';
-            default:return '470px';
-          }
-        case 'emission':return '530px';
+          return '350px';
+        case 'emission':return '520px';
         default:
-          if (this.podcast) return '520px';
+          if (this.podcast) return '500px';
           return '530px';
       }
     },
@@ -341,7 +325,10 @@ export default defineComponent({
     }
   }
   .max-iframe {
-    max-width: 300px;
+    width: 500px;
+    @media (max-width: 960px){
+      width: calc(100% - 2rem);
+    }
   }
 }
 </style>

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;