@saooti/octopus-sdk 36.0.5 → 36.0.7

package/index.ts

@@ -35,7 +35,6 @@ export const getClassicModal = () => import("./src/components/misc/modal/Classic
 export const getCategoryChooser = () => import("./src/components/display/categories/CategoryChooser.vue");
 export const getCategoryList = () => import("./src/components/display/categories/CategoryList.vue");
 export const getCategoryFilter = () => import("./src/components/display/categories/CategoryFilter.vue");
-export const getEmissionChooser = () => import("./src/components/display/emission/EmissionChooser.vue");
 export const getEmissionList = () => import("./src/components/display/emission/EmissionList.vue");
 export const getOrganisationChooser = () => import("./src/components/display/organisation/OrganisationChooser.vue");
 export const getPodcastFilterList = () => import("./src/components/display/podcasts/PodcastFilterList.vue");
@@ -64,7 +63,7 @@ export const getClassicSelect = () => import("./src/components/form/ClassicSelec
 export const getClassicDatePicker = () => import("./src/components/form/ClassicDatePicker.vue");
 export const getPaginate = () => import("./src/components/display/list/Paginate.vue");
 export const getListPaginate = () => import("./src/components/display/list/ListPaginate.vue");
-
+export const getClassicMultiselect = () => import("./src/components/form/ClassicMultiselect.vue");
 
 //mixins
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "36.0.5",
+  "version": "36.0.7",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -37,14 +37,15 @@
     "vite": "^3.2.5",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
-    "vue-multiselect": "^3.0.0-beta.1",
     "vue-recaptcha": "^2.0.3",
     "vue-router": "^4.1.6",
+    "vue-select": "^4.0.0-beta.6",
     "vue3-lazyload": "^0.3.6",
     "vue3-swatches": "1.0.10"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.16",
+    "@types/vue-select": "^3.16.2",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
     "@vitejs/plugin-vue": "^3.2.0",

package/src/assets/bootstrap.scss

@@ -4,7 +4,7 @@
 	box-sizing: border-box;
 }
 .octopus-app{
-	input, button, select, optgroup, textarea {
+	input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs__"]), optgroup, textarea {
 		margin: 0;
 		font-family: inherit;
 		font-size: inherit;
@@ -240,6 +240,16 @@
 	.bg-secondary{
 		background: #eee !important;
 	}
+	.w-50-responsive{
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    width: 50%;
+    @media (max-width: 960px) {
+      width:100%;
+			padding: 0 !important;
+    }
+  }
 }
 
 	

package/src/assets/octopus-library.scss

@@ -15,6 +15,5 @@ $breadcrumb-border-radius:          2rem !default;
 @import './general.scss';
 @import './live.scss';
 @import './form.scss';
-@import './multiselect.scss';
 @import './transition.scss';
 @import './share.scss';

package/src/assets/share.scss

@@ -252,11 +252,5 @@
         }
       }
     }
-    select {
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      padding-right: 40px;
-    }
   }
 }

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

@@ -1,106 +1,51 @@
 <template>
-  <div
-    class="default-multiselect-width"
-    :style="{ width: width }"
-  >
-    <label
-      :for="id"
-      class="hid"
-    >{{ $t('Type string to filter by categories') }}</label>
-    <VueMultiselect
-      :id="id"
-      ref="multiselectRef"
-      v-model="model"
-      :disabled="isDisabled"
-      label="name"
-      track-by="id"
-      :aria-expanded="false"
-      :placeholder="$t('Type string to filter by categories')"
-      :options="categories"
-      :multiple="multiple"
-      :searchable="true"
-      :loading="isLoading"
-      :internal-search="false"
-      :clear-on-select="false"
-      :close-on-select="true"
-      :options-limit="200"
-      :max-height="600"
-      :show-no-results="true"
-      :hide-selected="true"
-      :show-labels="false"
-      @open="onOpen"
-      @search-change="onSearchCategory"
-      @select="onCategorySelected"
-    >
-      <template #singleLabel="{ option }">
-        <div class="multiselect-octopus-proposition">
-          <span class="option__title">
-            {{ option.name }}
-          </span>
-        </div>
-      </template>
-      <template #option="{ option }">
-        <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ option.name }}</span>
-        </div>
-      </template>
-      <template #noOptions="">
-        {{ $t('List is empty') }}
-      </template>
-      <template #noResult="">
-        <span>
-          {{ $t('No elements found. Consider changing the search query.') }}
-        </span>
-      </template>
-      <template #caret="">
-        <div class="position-relative">
-          <span
-            class="saooti-down octopus-arrow-down-absolute"
-          />
-        </div>
-      </template>
-    </VueMultiselect>
-  </div>
+  <ClassicMultiselect
+    :id="idClassicMultiselect"
+    ref="selectCategory"
+    :option-chosen="model"
+    option-label="name"
+    :label="$t('By category')"
+    :placeholder="$t('Type string to filter by categories')"
+    :max-element="maxElement"
+    :in-modal="inModal"
+    :multiple="multiple"
+    :min-search-length="1"
+    :width="width"
+    :is-disabled="isDisabled"
+    :no-deselect="noDeselect"
+    @onSearch="onSearchCategory"
+    @selected="onCategorySelected"
+  />
 </template>
 
 <script lang="ts">
-//@ts-ignore
-import VueMultiselect from 'vue-multiselect';
-
-const getDefaultCategory = (defaultName: string) => {
-  if ('' === defaultName){
-    return undefined;
-  }
-  return { name: defaultName, id: 0 };
-};
 import { useGeneralStore } from '@/stores/GeneralStore';
 import { mapState } from 'pinia';
+import ClassicMultiselect from '../../form/ClassicMultiselect.vue';
 import { Category } from '@/stores/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    VueMultiselect
+    ClassicMultiselect
   },
   props: {
-    width: { default: '100%', type: String },
     defaultanswer: { default: '', type: String },
-    categorySelected: { default: undefined, type: Number },
+    width: { default: '100%', type: String },
     multiple: { default: false, type: Boolean },
-    categoryArray: { default: undefined, type: Array as ()=>Array<number> },
-    displayAllCategories: { default: false, type: Boolean },
     isDisabled: { default: false, type: Boolean },
     initCategories: { default: undefined, type: Array as ()=>Array<Category> },
+    displayAllCategories: { default: false, type: Boolean },
+    categorySelected: { default: undefined, type: Number },
+    categorySelectedArray: { default: undefined, type: Array as ()=>Array<number> },
+    inModal:{default: false, type: Boolean},
+    noDeselect: {default: true, type: Boolean},
   },
-  emits: ['update:categorySelected','selected'],
+  emits: ['update:categorySelected','update:categorySelectedArray','selected'],
   data() {
     return {
-      categories: [] as Array<Category>,
-      category: getDefaultCategory(this.defaultanswer) as Category|undefined,
-      categoryForArray: [getDefaultCategory(this.defaultanswer)] as Array<Category>|undefined,
-      isLoading: false as boolean,
-      totalCategories: [] as Array<Category>,
-      init: true as boolean,
-      initArray: false as boolean,
+      maxElement: 50 as number,
+      category: undefined as Category|undefined,
+      categoryForArray: [] as Array<Category>|undefined,
     };
   },
 
@@ -113,26 +58,39 @@ export default defineComponent({
       }
       return this.storedCategories;
     },
-    allCategories(): Array<Category> {
-      return [...this.categoriesChosen].sort((a: Category, b: Category) =>
+    categoriesOrdered(): Array<Category> {
+      let allCategoriesOrdered = [...this.categoriesChosen].sort((a: Category, b: Category) =>
         a.name > b.name ? 1 : -1
-      );
+      )
+      if(!this.displayAllCategories){
+        allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {
+          return c.podcastCount;
+        });
+      }
+      if (this.getDefaultCategory) {
+        allCategoriesOrdered.unshift(this.getDefaultCategory);
+      }
+      return allCategoriesOrdered;
+    },
+    getDefaultCategory(): Category|undefined{
+      if(''===this.defaultanswer){
+        return undefined;
+      }
+      return {id: 0, name: this.defaultanswer};
     },
-    id(): string {
+    idClassicMultiselect(): string {
       if (this.multiple) return 'categoryChooser' + this.multiple;
       return 'categoryChooser';
     },
+   
     model: {
       get(): Category| Array<Category>|undefined{
-        if(false===this.initArray){
-          return this.category;
-        }
-        return this.categoryForArray;
+        return this.multiple ? this.categoryForArray:this.category; 
       },
       set(value: Category| Array<Category>|undefined): void{
-        if(false===this.initArray){
+        if(!this.multiple){
           this.category = (value as Category|undefined);
-          return
+          return;
         }
         this.categoryForArray = (value as Array<Category>|undefined);
       }
@@ -140,101 +98,53 @@ export default defineComponent({
     }
   },
   watch: {
-    categorySelected(): void {
-      if(this.categorySelected){
-        this.initCategorySelected(this.categorySelected);
-      }
-    },
-    model: {
-      deep: true,
+    categorySelected: {
+      immediate:true,
       handler(){
-        if(undefined===this.categoryArray ||undefined === this.categoryForArray){
-          return;
+        if(this.categorySelected){
+          this.initCategorySelected();
+        }else{
+          this.category = this.getDefaultCategory;
         }
-        const idsArray: Array<number> = [];
-        this.categoryForArray.forEach((el: Category) => {
-          idsArray.push(el.id);
-        });
-        this.$emit('selected', idsArray);
       }
-    },
+    }
   },
  
   mounted() {
-    if (undefined !== this.categorySelected) {
-      this.initCategorySelected(this.categorySelected);
-    }
-    if (undefined !== this.categoryArray) {
-      this.initCategoryArray(this.categoryArray);
-      this.initArray=true;
-    }
+    this.initCategoryArray();
   },
   methods: {
-    onOpen(): void {
-      (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
-        'autocomplete',
-        'off'
-      );
-      if (
-        undefined !== this.categorySelected ||
-        undefined !== this.categoryArray ||
-        this.displayAllCategories
-      ) {
-        this.totalCategories = this.allCategories;
-      } else {
-        this.totalCategories = this.allCategories.filter((c: Category) => {
-          return c.podcastCount;
-        });
-      }
-      if ('' !== this.defaultanswer) {
-        const categoryDefault = getDefaultCategory(this.defaultanswer);
-        if(categoryDefault){
-          this.categories = [categoryDefault].concat(
-            this.totalCategories
-          );
-        }
-      } else {
-        this.categories = this.totalCategories;
-      }
-    },
-    onSearchCategory(query: string): void {
-      this.isLoading = true;
-      const categoryDefault = getDefaultCategory(this.defaultanswer);
-      if(categoryDefault){
-        let list: Array<Category> = [categoryDefault].concat(
-          this.totalCategories
-        );
-        if ('' === this.defaultanswer) {
-          list = this.totalCategories;
-        }
-        this.categories = list.filter((item: Category) => {
+    async onSearchCategory(query?: string): Promise<void> {
+      let categories = this.categoriesOrdered;
+      if(query){
+        categories = categories.filter((item: Category) => {
           return item.name.toUpperCase().includes(query.toUpperCase());
         });
       }
-      this.isLoading = false;
+      (this.$refs.selectCategory as InstanceType<typeof ClassicMultiselect>).afterSearch(categories,categories.length);
     },
-    onCategorySelected(category: Category): void {
+    onCategorySelected(category: Category| Array<Category>): void {
       if (undefined !== this.categorySelected) {
-        this.$emit('update:categorySelected', category.id);
-      } else if (undefined === this.categoryArray) {
+        this.$emit('update:categorySelected', (category as Category).id);
+      } else if (undefined !== this.categorySelectedArray) {
+        const idsArray: Array<number> = [];
+        (category as Array<Category>).forEach((el: Category) => {
+          idsArray.push(el.id);
+        });
+        this.$emit('update:categorySelectedArray', idsArray);
+      }else{
         this.$emit('selected', category);
       }
     },
-    initCategorySelected(val: number): void {
-      let categorySelected = this.categoriesChosen.find((el: Category) => {
-        return el.id === val;
-      });
-      if(!categorySelected){
-        categorySelected = getDefaultCategory(this.defaultanswer);
-      }
-      this.category = categorySelected;
+    initCategorySelected(): void {
+      this.category = this.categoriesChosen.find((el: Category) => {
+        return el.id === this.categorySelected;
+      }) ?? this.getDefaultCategory;
     },
-    initCategoryArray(val: Array<number>): void {
-      if(!this.categoryForArray){
-        return;
-      }
+    initCategoryArray(): void {
+      if(!this.categoryForArray || !this.categorySelectedArray){return; }
       this.categoryForArray.length = 0;
-      val.forEach((element: number) => {
+      this.categorySelectedArray.forEach((element: number) => {
         const item = this.categoriesChosen.find((el: Category) => {
           return el.id === element;
         });

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

@@ -4,8 +4,11 @@
     class="header-img flex-column justify-content-end"
     :style="backgroundDisplay"
   >
-    <h1>{{titleDisplay}}</h1>
-    <div v-show="isDisplay" class="d-flex flex-column justify-content-end">
+    <h1>{{ titleDisplay }}</h1>
+    <div
+      v-show="isDisplay"
+      class="d-flex flex-column justify-content-end"
+    >
       <ol
         v-if="filterIab || filterRubrique.length"
         class="octopus-breadcrumb d-flex align-items-center justify-content-center flex-wrap"
@@ -33,7 +36,10 @@
             href="#"
             @click="removeFilter(index,$event)"
           >{{ filter.nameRubriquage }}</a>
-          <div class="fw-bold" v-else>
+          <div
+            v-else
+            class="fw-bold"
+          >
             {{ filter.nameRubriquage }}
           </div>
           <div class="mx-1">
@@ -46,7 +52,6 @@
             :rubriquage-id="filter.rubriquageId"
             :rubrique-selected="filter.rubriqueId"
             :all-rubriques="getRubriques(filter.rubriquageId)"
-            :cannot-be-undefined="true"
             width="auto"
             @selected="onRubriqueSelected(index,$event)"
           />

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -93,7 +93,10 @@
               <!-- eslint-enable -->
             </div>
           </router-link>
-          <PodcastPlayBar  :podcast-id="p.podcastId" :duration="p.duration" />
+          <PodcastPlayBar
+            :podcast-id="p.podcastId"
+            :duration="p.duration"
+          />
         </div>
         <button
           v-if="

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

@@ -8,7 +8,7 @@
     />
     <CategoryChooser
       v-model:categorySelected="iabId"
-      width="auto"
+      width="100%"
       :defaultanswer="$t('No category filter')"
     />
   </div>

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

@@ -1,19 +1,22 @@
 <template>
   <div class="d-flex align-items-center">
     <div>{{ $t('Advertising') + ' :' }}</div>
-    <label class="position-relative">
-      <select
-        ref="select"
-        v-model="monetization"
-        class="ms-2 mb-0 c-hand"
-        @change="onChange"
-      >
-        <option value="UNDEFINED">{{ allString }}</option>
-        <option value="YES">{{ $t('Authorized advertising') }}</option>
-        <option value="NO">{{ $t('Prohibited advertising') }}</option>
-      </select>
-      <div class="saooti-down octopus-arrow-down-absolute" />
-    </label>
+    <select
+      ref="select"
+      v-model="monetization"
+      class="ms-2 mb-0 c-hand"
+      @change="onChange"
+    >
+      <option value="UNDEFINED">
+        {{ allString }}
+      </option>
+      <option value="YES">
+        {{ $t('Authorized advertising') }}
+      </option>
+      <option value="NO">
+        {{ $t('Prohibited advertising') }}
+      </option>
+    </select>
   </div>
 </template>
 

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

@@ -1,17 +1,17 @@
 <template>
-  <div class="d-flex align-items-center my-3">
+  <div class="d-flex-column align-items-center my-3">
     <div
       v-if="!isPodcastmaker && !filterOrgaId"
-      class="filter-organisation-chooser"
+      class="w-50-responsive pe-3 position-relative"
     >
       <OrganisationChooser
         :defaultanswer="$t('No organisation filter')"
-        :value="organisationId"
+        :orga-id-selected="organisationId"
         @selected="onOrganisationSelected"
       />
       <ClassicCheckbox
-        v-if="!!organisationId"
         v-model:textInit="keepOrganisation"
+        :class="!!organisationId? '' : 'invisible'"
         class="m-3"
         :label="$t('check this box if you want to keep this filter for the rest of your visit')"
         :display-label="false"
@@ -19,7 +19,7 @@
         @clickAction="onKeepOrganisation"
       />
       <div
-        v-if="showBubble"
+        :class="showBubble? '' : 'invisible'"
         class="filter-speech-bubble"
       >
         {{
@@ -31,7 +31,7 @@
     </div>
     <ClassicSearch
       :text-init="searchPattern"
-      class="d-flex align-items-center flex-grow-1"
+      class="w-50-responsive"
       :autofocus="true"
       id-search="productor-search-input"
       :label="searchText"
@@ -190,15 +190,5 @@ export default defineComponent({
       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

@@ -1,21 +1,18 @@
 <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"
+    <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"
       >
-        <option
-          v-for="rubriquage in rubriquageDisplay"
-          :key="rubriquage.rubriquageId"
-          :value="rubriquage.rubriquageId"
-        >{{ rubriquage.title }}</option>
-      </select>
-      <div
-        class="saooti-down octopus-arrow-down-absolute"
-      />
-    </label>
+        {{ rubriquage.title }}
+      </option>
+    </select>
     <template v-if="rubriquageId">
       <div class="ms-3 flex-shrink-0">
         {{ $t('By rubric') }}
@@ -30,7 +27,6 @@
         :defaultanswer="$t('No rubric filter')"
         :reset="reset"
         :without-rubrique="true"
-        width="auto"
         @selected="onRubriqueSelected"
       />
     </template>

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

@@ -11,7 +11,7 @@
     />
     <div
       v-if="isRubriquage"
-      class="d-flex flex-column mb-2"
+      class="d-flex flex-column mb-2 flex-grow-1"
     >
       <RubriqueChoice 
         v-for="(filter, index) in arrayFilter"
@@ -21,6 +21,7 @@
         :rubriquage-display="getRubriquage(index)"
         :rubrique-id-selected="filter.rubriqueId"
         :rubriquage-id-selected="filter.rubriquageId"
+        :no-deselect="true"
         @updateRubrique="updateRubrique"
         @updateRubriquage="updateRubriquage"
         @deleteRubriqueChoice="deleteRubriqueChoice(index)"

package/src/components/display/list/Paginate.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="paginate-fixed" :style="'bottom:'+playerHeight">
+  <div
+    class="paginate-fixed"
+    :style="'bottom:'+playerHeight"
+  >
     <div class="mx-2">
       {{ $t('Showing items number', {page: (page+1), totalPage: totalPage}) }}
     </div>