@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,15 +1,23 @@
 <template>
-  <div class="default-multiselect-width" :style="{ width: width }">
-    <label :for="id" class="d-inline" aria-label="select rubrique"></label>
-    <Multiselect
-      v-model="rubrique"
+  <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')"
-      ref="multiselectRef"
       :options="rubriques"
       :multiple="multiple"
       :searchable="true"
@@ -22,87 +30,131 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      @open="clearAll"
+      @open="onOpen"
       @search-change="onSearchRubrique"
-      @close="onClose"
       @select="onRubriqueSelected"
     >
-      <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
+          v-if="undefined!==option"
           class="multiselect-octopus-proposition"
-          :class="props.option.rubriqueId <= 0 ? 'primary-dark' : ''"
-          :data-selenium="'rubric-chooser-' + seleniumFormat(props.option.name)"
+          :class="option.rubriqueId <= 0 ? 'primary-darker' : ''"
+          :data-selenium="'rubric-chooser-' + seleniumFormat(option.name)"
         >
-          <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>
+      <template #noOptions>
+        {{ $t('List is empty') }}
+      </template>
+      <template #noResult>
         {{ $t('No elements found. Consider changing the search query.') }}
-      </span></template>
-      <template v-slot:caret>
-      <span
-        class="saooti-arrow_down octopus-arrow-down octopus-arrow-down-top"
-      ></span></template>
-    </Multiselect>
+      </template>
+      <template #caret>
+        <span class="saooti-down octopus-arrow-down" />
+      </template>
+    </VueMultiselect>
   </div>
 </template>
 
-<style lang="scss"></style>
 <script lang="ts">
 import { selenium } from '../../mixins/functions';
-import Multiselect from 'vue-multiselect';
-
-const getDefaultRubrique = (defaultName: any) => {
-  if (undefined !== defaultName) return { name: defaultName, rubriqueId: 0 };
-  return '';
+//@ts-ignore
+import VueMultiselect from 'vue-multiselect';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+const getDefaultRubrique = (defaultName: string) => {
+  if ('' === defaultName){
+    return undefined;
+  }
+  return { name: defaultName, rubriqueId: 0 } as Rubrique;
 };
 
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    Multiselect,
+    VueMultiselect,
   },
-
+  mixins:[selenium],
   props: {
-    width: { default: '100%' },
-    defaultanswer: { default: undefined as any },
-    rubriqueSelected: { default: undefined as any },
-    multiple: { default: false },
-    rubriqueArray: { default: undefined as any },
-    rubriquageId: { default: undefined as any },
-    allRubriques: { default: [] },
-    reset: { default: false },
-    withoutRubrique: { default: false },
-    isDisabled: { default: false },
+    width: { default: '100%', type: String },
+    defaultanswer: { default: '', type: String },
+    rubriqueSelected: { default: undefined, type: Number },
+    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 },
+    withoutRubrique: { default: false, type: Boolean },
+    isDisabled: { default: false, type: Boolean },
+    cannotBeUndefined: {default: false, type: Boolean}
   },
-  emits: ['update:rubrique', 'selected'],
-  mixins: [selenium],
+  emits: ['update:rubriqueSelected', 'selected'],
 
   data() {
     return {
-      rubriques: [] as any,
-      rubrique: getDefaultRubrique(this.defaultanswer) as any,
-      isLoading: false,
-      withoutItem: { name: this.$t('Without rubric'), rubriqueId: -1 },
+      rubriques: [] as Array<Rubrique>,
+      rubrique: getDefaultRubrique(this.defaultanswer) as Rubrique|undefined,
+      rubriqueForArray: [] as Array<Rubrique>,
+      isLoading: false as boolean,
+      withoutItem: { name: this.$t('Without rubric'), rubriqueId: -1 } as {name: string, rubriqueId:number},
     };
   },
+  computed: {
+    id(): string {
+      return this.rubriquageId? 'rubriqueChooser' + this.rubriquageId : 'rubriqueChooser';
+    },
+    model: {
+      get(): Rubrique| Array<Rubrique>|undefined{
+        return false===this.multiple ? this.rubrique:this.rubriqueForArray;
+      },
+      set(value: Rubrique| Array<Rubrique>|undefined): void{
+        if(false===this.multiple){
+          this.rubrique = (value as Rubrique|undefined);
+          return
+        }
+        this.rubriqueForArray = (value as Array<Rubrique>);
+      }
 
-  setup() {
-    const multiselect : any = ref(null);
-    return {
-      multiselect,
-    };
+    }
+  },
+  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,
+      handler(){
+        if (undefined !== this.rubriqueSelected) {
+          this.initRubriqueSelected(this.rubriqueSelected);
+        }
+      }
+    },
+    reset(): void {
+      this.rubrique = getDefaultRubrique(this.defaultanswer);
+    }
   },
-
   mounted() {
     if (undefined !== this.rubriqueSelected) {
       this.initRubriqueSelected(this.rubriqueSelected);
@@ -111,109 +163,70 @@ export default defineComponent({
       this.initRubriqueArray(this.rubriqueArray);
     }
   },
-  computed: {
-    id():string {
-      if (this.rubriquageId) return 'rubriqueChooser' + this.rubriquageId;
-      return 'rubriqueChooser';
-    },
-  },
-
   methods: {
-    clearAll() {
-      this.multiselect.$refs.search.setAttribute(
-        'autocomplete',
-        'off'
-      );
-      if (undefined === this.rubriqueArray) {
-        this.rubrique = '';
+    initRubriquesArray(): Array<Rubrique>{
+      if ('' === this.defaultanswer) {
+        return this.allRubriques;
       }
-      if (undefined === this.defaultanswer) {
-        this.rubriques = this.allRubriques;
-        return;
+      const rubriqueDefault = getDefaultRubrique(this.defaultanswer);
+      if(!rubriqueDefault){
+        return this.allRubriques;
       }
       if (this.withoutRubrique) {
-        this.rubriques = [
-          getDefaultRubrique(this.defaultanswer),
+        return [
+          rubriqueDefault,
           this.withoutItem,
         ].concat(this.allRubriques);
-      } else {
-        this.rubriques = [getDefaultRubrique(this.defaultanswer)].concat(
-          this.allRubriques
-        );
       }
+      return [rubriqueDefault].concat(this.allRubriques);
     },
-
-    onClose() {
+    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 (undefined !== this.defaultanswer) {
-        this.rubrique = getDefaultRubrique(this.defaultanswer);
-      } else {
-        this.rubrique = '';
+      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) {
+    onSearchRubrique(query: string): void {
       this.isLoading = true;
-      let list;
-      if (undefined !== this.defaultanswer) {
-        if (this.withoutRubrique) {
-          list = [
-            getDefaultRubrique(this.defaultanswer),
-            this.withoutItem,
-          ].concat(this.allRubriques);
-        } else {
-          list = [getDefaultRubrique(this.defaultanswer)].concat(
-            this.allRubriques
-          );
-        }
-      } else {
-        list = this.allRubriques;
-      }
-      this.rubriques = list.filter((item:any) => {
+      this.rubriques = this.initRubriquesArray().filter((item: Rubrique) => {
         return item.name.toUpperCase().includes(query.toUpperCase());
       });
       this.isLoading = false;
     },
-
-    onRubriqueSelected(rubrique:any) {
-      if (undefined !== this.rubriqueSelected) {
-        this.$emit('update:rubrique', rubrique.rubriqueId);
-      } else if (undefined === this.rubriqueArray) {
+    onRubriqueSelected(rubrique: Rubrique|undefined): void {
+      if (undefined !== this.rubriqueSelected && rubrique) {
+        this.$emit('update:rubriqueSelected', rubrique.rubriqueId);
+      }
+      if (false === this.multiple) {
         this.$emit('selected', rubrique);
       }
     },
-    initRubriqueSelected(val: any) {
-      this.rubrique = this.allRubriques.find((el:any) => {
+    initRubriqueSelected(val: number): void {
+      this.rubrique = this.initRubriquesArray().find((el: Rubrique) => {
         return el.rubriqueId === val;
       });
     },
-    initRubriqueArray(val: any[]) {
-      this.rubrique.length = 0;
-      val.forEach((element: any) => {
-        let item = this.allRubriques.find((el:any) => {
+    initRubriqueArray(val: number[]): void {
+      this.rubriqueForArray = [];
+      val.forEach((element: number) => {
+        const item = this.initRubriquesArray().find((el: Rubrique) => {
           return el.rubriqueId === element;
         });
-        this.rubrique.push(item);
-      });
-    },
-  },
-  watch: {
-    rubriqueSelected(newVal) {
-      this.initRubriqueSelected(newVal);
-    },
-    rubrique(newVal) {
-      if (undefined === this.rubriqueArray) return;
-
-      let idsArray: any[] = [];
-      newVal.forEach((el: { rubriqueId: any; }) => {
-        idsArray.push(el.rubriqueId);
+        if(undefined!==item){
+          this.rubriqueForArray.push(item);
+        }
       });
-      this.$emit('selected', idsArray);
-    },
-    reset() {
-      this.rubrique = getDefaultRubrique(this.defaultanswer);
     },
   },
-});
-</script>
+})
+</script>

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

@@ -0,0 +1,216 @@
+<template>
+  <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
+    <div
+      ref="rubriqueListContainer"
+      class="rubrique-list-container"
+    >
+      <select
+        v-model="rubriquage"
+        class="c-hand"
+        @change="onRubriquageSelected"
+      >
+        <option
+          v-for="myRubriquage in rubriquageDisplay"
+          :key="myRubriquage.rubriquageId"
+          :value="myRubriquage"
+        >
+          {{ myRubriquage.title }}
+        </option>
+      </select>
+      <button
+        v-for="rubrique in rubriqueDisplay"
+        :ref="'rubrique' + rubrique.rubriqueId"
+        :key="rubrique.rubriqueId"
+        class="rubrique-item bg-white"
+        @click="addFilter(rubrique)"
+      >
+        {{ rubrique.name }}
+      </button>
+    </div>
+    <div
+      v-show="hidenRubriques.length"
+      class="dropdown btn-group"
+    >
+      <button
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        :title="$t('See more')"
+      />
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <div
+          v-for="rubrique in hidenRubriques"
+          :key="rubrique.rubriqueId"
+          class="me-3 dropdown-item"
+          @click="addFilter(rubrique)"
+        >
+          {{ rubrique.name }}
+        </div>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'RubriqueList',
+
+  props: {
+    rubriquages: { default: () => [], type: Array as ()=>Array<Rubriquage>},
+  },
+
+  data() {
+    return {
+      hidenRubriques: [] as Array<Rubrique>,
+      rubriques: [] as Array<Rubrique>,
+      rubriquage: undefined as Rubriquage|undefined,
+    };
+  },
+
+  computed: {
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    rubriqueDisplay(): Array<Rubrique>{
+      return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
+    },
+    rubriquageDisplay(): Array<Rubriquage>{
+      const elementToNotShow = Array.from(this.rubriqueFilter);
+      if(elementToNotShow.length){
+        const rubriquageIdToNotShow = elementToNotShow.map(a => a.rubriquageId);
+        return this.rubriquages.filter((element)=>{
+          if(!element.rubriquageId){return;}
+          return !rubriquageIdToNotShow.includes(element.rubriquageId);
+        });
+      }
+      return this.rubriquages;
+    },
+  },
+  watch:{
+    rubriqueFilter:{
+      deep: true,
+      handler(){
+        this.selectNewRubriquage();
+      }
+    }
+  },
+
+  mounted() {
+    this.selectNewRubriquage();
+  },
+  beforeUnmount(): void {
+    window.removeEventListener('resize', this.resizeWindow);
+  },
+  methods: {
+    
+    initRubriques(): void{
+      if(!this.rubriquage){ return ;}
+      this.$store.commit('filterRubriqueDisplay', this.rubriquage.rubriques);
+      window.addEventListener('resize', this.resizeWindow);
+      this.$nextTick(() => {
+        this.resizeWindow();
+      });
+    },
+    addFilter(rubrique: Rubrique): void{
+      if(!this.rubriquage){ return ;}
+      const filterToAdd = {
+        rubriquageId: this.rubriquage.rubriquageId??0, 
+        rubriqueId: rubrique.rubriqueId??0, 
+        nameRubriquage: this.rubriquage.title,
+        nameRubrique: rubrique.name
+      };
+      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
+      newFilter.push(filterToAdd);
+      this.$store.commit('filterRubrique', newFilter);
+      const queries = this.$route.query;
+      const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
+      this.$router.replace({ query: { ...queries, ...{ rubriquesId: queryString }} });
+      this.selectNewRubriquage();
+    },
+    selectNewRubriquage(){
+      const rubriquageLength = this.rubriquages.length;
+      if(rubriquageLength === this.rubriqueFilter.length){
+        return;
+      }
+      let index = 0;
+      const rubriquageAlreadyFilter = this.rubriqueFilter.map(a => a.rubriquageId);
+      for (index; index < rubriquageLength; index++) {
+        const rubriquageIdIndex = this.rubriquages[index].rubriquageId;
+        if(rubriquageIdIndex && !rubriquageAlreadyFilter.includes(rubriquageIdIndex)){
+          break;
+        }
+      }
+      this.rubriquage = this.rubriquages[index];
+      this.initRubriques();
+    },
+    resizeWindow(): void {
+      const rubriqueList = (this.$refs.rubriqueListContainer as HTMLElement);
+      if(null === rubriqueList){return}
+      rubriqueList.style.justifyContent = 'flex-start';
+      this.hidenRubriques.length = 0;
+      this.rubriqueDisplay.forEach((element: Rubrique) => {
+        const el = (this.$refs['rubrique' + element.rubriqueId] as Array<HTMLElement>)[0];
+        if (!el) return;
+        const parent = el.parentElement;
+        if (null !== parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
+          el.classList.remove('hid');
+          return;
+        }
+        this.hidenRubriques.push(element);
+        if (!el.classList.contains('hid')) {
+          el.className += ' hid';
+        }
+      });
+      if (!this.hidenRubriques.length) {
+        rubriqueList.style.justifyContent = 'center';
+      }
+    },
+    onRubriquageSelected(){
+      this.initRubriques();
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.rubrique-list-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: hidden;
+  flex-grow: 1;
+  width: 0;
+  padding: 0 4rem;
+  select{
+    width: auto;
+    border-radius: 1.5rem;
+    margin: 0.2rem;
+    font-size: 0.6rem;
+    padding: 0.5rem;
+  }
+}
+.rubrique-item {
+  font-size: 0.6rem;
+  margin: 0.2rem;
+  padding: 0.5rem;
+  border-radius: 1.5rem;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+  &:hover {
+    background: #eee !important;
+  }
+}
+}
+</style>