@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,14 +1,22 @@
 <template>
-  <div class="w-100" :style="{ width: width }">
-    <label :for="id" class="d-inline" aria-label="select category"></label>
-    <Multiselect
-      v-model="category"
-      :disabled="isDisabled"
+  <div
+    class="default-multiselect-width"
+    :style="{ width: width }"
+  >
+    <label
+      :for="id"
+      class="d-inline"
+      title="select category"
+    />
+    <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')"
-      ref="multiselectRef"
       :options="categories"
       :multiple="multiple"
       :searchable="true"
@@ -21,114 +29,151 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      @open="clearAll"
+      @open="onOpen"
       @search-change="onSearchCategory"
-      @close="onClose"
-      @select="onEmissionSelected"
+      @select="onCategorySelected"
     >
-      <template v-slot:singleLabel="props" >
+      <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
           <span class="option__title">
-            {{ props.option.name }}
+            {{ option.name }}
           </span>
         </div>
       </template>
-      <template v-slot:option="props" >
+      <template #option="{ option }">
         <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ props.option.name }}</span>
+          <span class="option__title">{{ option.name }}</span>
         </div>
       </template>
-      <template v-slot:noOptions>{{ $t('List is empty') }}</template>
-      <template v-slot:noResult>
-      <span>
-        {{ $t('No elements found. Consider changing the search query.') }}
-      </span>
+      <template #noOptions="">
+        {{ $t('List is empty') }}
       </template>
-      <template v-slot:caret>
-      <div class="position-relative">
-        <span
-          class="saooti-arrow_down octopus-arrow-down-2 octopus-arrow-down-top"
-        ></span>
-      </div>
+      <template #noResult="">
+        <span>
+          {{ $t('No elements found. Consider changing the search query.') }}
+        </span>
       </template>
-    </Multiselect>
+      <template #caret="">
+        <div class="position-relative">
+          <span
+            class="saooti-down octopus-arrow-down"
+          />
+        </div>
+      </template>
+    </VueMultiselect>
   </div>
 </template>
 
-<style lang="scss"></style>
 <script lang="ts">
-import Multiselect from 'vue-multiselect';
-import { state } from '../../../store/paramStore';
+//@ts-ignore
+import VueMultiselect from 'vue-multiselect';
 
-const getDefaultCategory = (defaultName: any) => {
-  if (undefined !== defaultName) return { name: defaultName, id: 0 };
-  return '';
+const getDefaultCategory = (defaultName: string) => {
+  if ('' === defaultName){
+    return undefined;
+  }
+  return { name: defaultName, id: 0 };
 };
 
-import { defineComponent, ref } from 'vue'
+import { Category } from '@/store/class/general/category';
+import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    Multiselect,
+    VueMultiselect
   },
-
   props: {
-    width: { default: '100%' },
-    defaultanswer: { default: undefined as any },
-    categorySelected: { default: undefined as any },
-    multiple: { default: false },
-    categoryArray: { default: undefined as any },
-    displayAllCategories: { default: false },
-    isDisabled: { default: false },
+    width: { default: '100%', type: String },
+    defaultanswer: { default: '', type: String },
+    categorySelected: { default: undefined, type: Number },
+    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> },
   },
-  emits: ['update:categorySelected', 'selected'],
+  emits: ['update:categorySelected','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,
+    };
+  },
+
 
   computed: {
-    allCategories() {
-      return state.generalParameters.allCategories.sort((a:any, b:any) =>
+    categoriesChosen(): Array<Category>{
+      if(this.initCategories){
+        return this.initCategories;
+      }
+      return this.$store.state.categories;
+    },
+    allCategories(): Array<Category> {
+      return [...this.categoriesChosen].sort((a: Category, b: Category) =>
         a.name > b.name ? 1 : -1
       );
     },
-    id():string {
+    id(): 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;
+      },
+      set(value: Category| Array<Category>|undefined): void{
+        if(false===this.initArray){
+          this.category = (value as Category|undefined);
+          return
+        }
+        this.categoryForArray = (value as Array<Category>|undefined);
+      }
 
-  data() {
-    return {
-      categories: [] as any,
-      category: getDefaultCategory(this.defaultanswer) as any,
-      isLoading: false,
-      totalCategories: undefined as any,
-      init: true,
-    };
+    }
   },
-
-  setup() {
-    const multiselect : any = ref(null);
-    return {
-      multiselect,
-    };
+  watch: {
+    categorySelected(): void {
+      if(this.categorySelected){
+        this.initCategorySelected(this.categorySelected);
+      }
+    },
+    model: {
+      deep: true,
+      handler(){
+        if(undefined===this.categoryArray ||undefined === this.categoryForArray){
+          return;
+        }
+        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;
     }
   },
-
   methods: {
-    clearAll() {
-      this.multiselect.$refs.search.setAttribute(
+    onOpen(): void {
+      (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
-      if (undefined === this.categoryArray) {
-        this.category = '';
-      }
       if (
         undefined !== this.categorySelected ||
         undefined !== this.categoryArray ||
@@ -136,75 +181,67 @@ export default defineComponent({
       ) {
         this.totalCategories = this.allCategories;
       } else {
-        this.totalCategories = this.allCategories.filter((c: { podcastCount: any; }) => {
+        this.totalCategories = this.allCategories.filter((c: Category) => {
           return c.podcastCount;
         });
       }
-      if (undefined !== this.defaultanswer) {
-        this.categories = [getDefaultCategory(this.defaultanswer)].concat(
-          this.totalCategories
-        );
+      if ('' !== this.defaultanswer) {
+        const categoryDefault = getDefaultCategory(this.defaultanswer);
+        if(categoryDefault){
+          this.categories = [categoryDefault].concat(
+            this.totalCategories
+          );
+        }
       } else {
         this.categories = this.totalCategories;
       }
     },
-
-    onClose() {
-      if (!this.category && undefined === this.categoryArray) {
-        this.category = getDefaultCategory(this.defaultanswer);
-        this.onEmissionSelected(this.category);
-      }
-    },
-
-    onSearchCategory(query: string) {
+    onSearchCategory(query: string): void {
       this.isLoading = true;
-      let list = [getDefaultCategory(this.defaultanswer)].concat(
-        this.totalCategories
-      );
-      if (undefined === this.defaultanswer) {
-        list = this.totalCategories;
+      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) => {
+          return item.name.toUpperCase().includes(query.toUpperCase());
+        });
       }
-      this.categories = list.filter((item:any) => {
-        return item.name.toUpperCase().includes(query.toUpperCase());
-      });
       this.isLoading = false;
     },
-
-    onEmissionSelected(category: any) {
+    onCategorySelected(category: Category): void {
       if (undefined !== this.categorySelected) {
         this.$emit('update:categorySelected', category.id);
       } else if (undefined === this.categoryArray) {
         this.$emit('selected', category);
       }
     },
-    initCategorySelected(val: any) {
-      this.category = state.generalParameters.allCategories.find((el: { id: any; }) => {
+    initCategorySelected(val: number): void {
+      let categorySelected = this.categoriesChosen.find((el: Category) => {
         return el.id === val;
       });
+      if(!categorySelected){
+        categorySelected = getDefaultCategory(this.defaultanswer);
+      }
+      this.category = categorySelected;
     },
-    initCategoryArray(val: any[]) {
-      this.category.length = 0;
-      val.forEach((element: any) => {
-        let item = state.generalParameters.allCategories.find((el: { id: any; }) => {
+    initCategoryArray(val: Array<number>): void {
+      if(!this.categoryForArray){
+        return;
+      }
+      this.categoryForArray.length = 0;
+      val.forEach((element: number) => {
+        const item = this.categoriesChosen.find((el: Category) => {
           return el.id === element;
         });
-        this.category.push(item);
-      });
-    },
-  },
-  watch: {
-    categorySelected(newVal) {
-      this.initCategorySelected(newVal);
-    },
-    category(newVal) {
-      if (undefined === this.categoryArray) return;
-
-      let idsArray: any[] = [];
-      newVal.forEach((el: { id: any; }) => {
-        idsArray.push(el.id);
+        if(this.categoryForArray && item){
+          this.categoryForArray.push(item);
+        }
       });
-      this.$emit('selected', idsArray);
     },
   },
-});
-</script>
+})
+</script>

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

@@ -0,0 +1,162 @@
+<template>
+  <div
+    v-show="isDisplay"
+    class="mt-3"
+  >
+    <nav
+      v-if="categoryFilter || rubriqueFilter.length"
+      title="breadcrumb"
+    >
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+          <a
+            href="#"
+            @click="removeFilter(-1, $event)"
+          >{{ $t('All') }}</a>
+        </li>
+        <li
+          v-if="categoryFilter"
+          class="breadcrumb-item active"
+        >
+          {{ categoryFilter.name }}
+        </li>
+        <li 
+          v-for="(filter, index) in rubriqueFilter" 
+          :key="filter.rubriqueId"
+          class="breadcrumb-item d-flex align-items-center"
+          :class="rubriqueFilter.length-1 === index ? 'active':''"
+        >
+          <a
+            v-if="rubriqueFilter.length - 1 !== index"
+            href="#"
+            @click="removeFilter(index,$event)"
+          >{{ filter.nameRubriquage }}</a>
+          <template v-else>
+            {{ filter.nameRubriquage }}
+          </template>
+          <div class="mx-1">
+            :
+          </div>
+          <RubriqueChooser
+            v-if="getRubriques(filter.rubriquageId).length"
+            class="ms-2 multiselect-transparent"
+            :multiple="false"
+            :rubriquage-id="filter.rubriquageId"
+            :rubrique-selected="filter.rubriqueId"
+            :all-rubriques="getRubriques(filter.rubriquageId)"
+            :cannot-be-undefined="true"
+            width="auto"
+            @selected="onRubriqueSelected(index,$event)"
+          />
+        </li>
+      </ol>
+    </nav>
+    <CategoryList
+      v-if="!categoryFilter && !rubriquageFilter.length"
+      :is-filter="true"
+      :is-display="isDisplay"
+      @categoriesLength="checkIfCategories"
+    />
+    <RubriqueList
+      v-else-if="isDisplay && rubriquageFilter.length !== rubriqueFilter.length"
+      :rubriquages="rubriquageFilter"
+    />
+  </div>
+  <div
+    v-if="!isDisplay"
+    class="categary-filter-no-filter"
+  />
+</template>
+
+<script lang="ts">
+import { Category } from '@/store/class/general/category';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CategoryList = defineAsyncComponent(() => import('./CategoryList.vue'));
+const RubriqueList = defineAsyncComponent(() => import('./../rubriques/RubriqueList.vue'));
+const RubriqueChooser = defineAsyncComponent(() => import('../rubriques/RubriqueChooser.vue'));
+export default defineComponent({
+  name: 'CategoryFilter',
+
+  components:{
+    CategoryList,
+    RubriqueList,
+    RubriqueChooser
+  },
+  data() {
+    return {
+      isCategories: false as boolean,
+    };
+  },
+  computed: {
+    categoryFilter(): Category|undefined{
+      return this.$store.state.filter.iab;
+    },
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    isDisplay(): boolean {
+      return ("homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name) 
+      && (this.isCategories || undefined!==this.categoryFilter || 0!==this.rubriqueFilter.length || 0!==this.rubriquageFilter.length);
+    },
+    rubriquageFilter(): Array<Rubriquage>{
+      return this.$store.state.filter.organisationId ? this.$store.state.filter.rubriquageArray : [];
+    },
+  },
+  methods:{
+    checkIfCategories(length: number): void{
+      this.isCategories = 0!==length;
+    },
+    onRubriqueSelected(index: number, rubrique: Rubrique): void {
+      if(!rubrique ||this.rubriqueFilter[index].rubriqueId === rubrique.rubriqueId){
+        return;
+      }
+      const filter = Array.from(this.rubriqueFilter);
+      filter[index].rubriqueId = rubrique.rubriqueId||0;
+      this.$store.commit('filterRubrique', filter);
+      const queryString = filter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
+      this.$router.replace({ query: { ...this.$route.query, ...{ rubriquesId: queryString }} });
+    },
+    getRubriques(rubriquageId: number): Array<Rubrique>{
+      const rubriquage = this.$store.state.filter.rubriquageArray.find((x: Rubriquage) => {
+        return x.rubriquageId === rubriquageId;
+      });
+      return rubriquage ? rubriquage.rubriques : [];
+    },
+    removeFilter(index: number, event?: { preventDefault: () => void }): void{
+      if(this.categoryFilter){
+        if (this.$route.query.iabId) {
+          this.$router.replace({ query: {...this.$route.query, ...{iabId: undefined} } });
+        }
+        this.$store.commit('filterIab', undefined);
+      }else{
+        const newFilter: Array<RubriquageFilter>  = Array.from(this.$store.state.filter.rubriqueFilter);
+        newFilter.splice(index + 1);
+        if (this.$route.query.rubriquesId) {
+          const queryString = newFilter.map(value => value.rubriquageId+':'+value.rubriqueId).join();
+          this.$router.replace({ query: { ...this.$route.query, ...{ rubriquesId:"" !== queryString? queryString : undefined}} });
+        }
+        this.$store.commit('filterRubrique', newFilter);
+      }
+      if(event){
+        event.preventDefault();
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+.octopus-app{
+  .categary-filter-no-filter{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: white;
+    z-index: -1;
+  }
+}
+</style>