@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -9,11 +9,8 @@
       id-checkbox="search-rubriquage-checkbox"
       :label="$t('By topic')"
     />
-    <div
-      v-if="isRubriquage"
-      class="d-flex ms-1 flex-column mb-2 flex-grow-1"
-    >
-      <RubriqueChoice 
+    <div v-if="isRubriquage" class="d-flex ms-1 flex-column mb-2 flex-grow-1">
+      <RubriqueChoice
         v-for="(filter, index) in arrayFilter"
         :key="index"
         :index="index"
@@ -22,42 +19,47 @@
         :rubrique-id-selected="filter.rubriqueId"
         :rubriquage-id-selected="filter.rubriquageId"
         :no-deselect="true"
-        @updateRubrique="updateRubrique"
-        @updateRubriquage="updateRubriquage"
-        @deleteRubriqueChoice="deleteRubriqueChoice(index)"
+        @update-rubrique="updateRubrique"
+        @update-rubriquage="updateRubriquage"
+        @delete-rubrique-choice="deleteRubriqueChoice(index)"
       />
       <button
         v-if="availableRubriquage.length"
         class="btn mt-2"
         @click="addFilter"
       >
-        {{ $t('Add a sort criterion by topic') }}
+        {{ $t("Add a sort criterion by topic") }}
       </button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const RubriqueChoice = defineAsyncComponent(() => import('./RubriqueChoice.vue'));
+import octopusApi from "@saooti/octopus-api";
+import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+const RubriqueChoice = defineAsyncComponent(
+  () => import("./RubriqueChoice.vue"),
+);
 export default defineComponent({
   components: {
     RubriqueChoice,
-    ClassicCheckbox
+    ClassicCheckbox,
   },
   props: {
-    organisationId: { default: undefined, type: String},
-    resetRubriquage: { default: false, type:  Boolean},
-    modifyFilter:{ default: true, type:  Boolean},
-    initRubriqueFilter:{ default: undefined, type: Array as ()=> Array<RubriquageFilter>},
+    organisationId: { default: undefined, type: String },
+    resetRubriquage: { default: false, type: Boolean },
+    modifyFilter: { default: true, type: Boolean },
+    initRubriqueFilter: {
+      default: undefined,
+      type: Array as () => Array<RubriquageFilter>,
+    },
   },
-  emits: ['updateRubriquageFilter'],
+  emits: ["updateRubriquageFilter"],
 
   data() {
     return {
@@ -73,91 +75,111 @@ export default defineComponent({
   },
 
   computed: {
-    ...mapState(useFilterStore, ['filterRubrique', 'filterOrgaId']),
-    organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.filterOrgaId;
+    ...mapState(useFilterStore, ["filterRubrique", "filterOrgaId"]),
+    organisation(): string | undefined {
+      return this.organisationId ? this.organisationId : this.filterOrgaId;
     },
-    availableRubriquage(): Array<Rubriquage>{
-      if(this.arrayFilter.length){
-        const rubriquageIdToNotShow = this.arrayFilter.map(a => a.rubriquageId);
-        return this.rubriquageData.filter((element)=>{
-          if(element.rubriquageId){
+    availableRubriquage(): Array<Rubriquage> {
+      if (this.arrayFilter.length) {
+        const rubriquageIdToNotShow = this.arrayFilter.map(
+          (a) => a.rubriquageId,
+        );
+        return this.rubriquageData.filter((element) => {
+          if (element.rubriquageId) {
             return !rubriquageIdToNotShow.includes(element.rubriquageId);
           }
         });
       }
       return this.rubriquageData;
-    }
+    },
   },
   watch: {
     organisation(): void {
-      if(this.isRubriquage){
+      if (this.isRubriquage) {
         this.fetchTopics(true);
       }
     },
     isRubriquage(): void {
-      if(this.isInternChanged ||this.isInit){
+      if (this.isInternChanged || this.isInit) {
         return;
       }
       this.isInternChanged = true;
-      if(0===this.arrayFilter.length && this.availableRubriquage[0].rubriquageId){
-        this.arrayFilter.push({rubriquageId: this.availableRubriquage[0].rubriquageId, rubriqueId: 0, nameRubriquage:this.rubriquageData[0].title, nameRubrique:""});
+      if (
+        0 === this.arrayFilter.length &&
+        this.availableRubriquage[0].rubriquageId
+      ) {
+        this.arrayFilter.push({
+          rubriquageId: this.availableRubriquage[0].rubriquageId,
+          rubriqueId: 0,
+          nameRubriquage: this.rubriquageData[0].title,
+          nameRubrique: "",
+        });
       }
-      if(this.isRubriquage){
-        if(this.saveOrganisation !== this.organisation){
+      if (this.isRubriquage) {
+        if (this.saveOrganisation !== this.organisation) {
           this.fetchTopics(true);
         }
-        this.$emit('updateRubriquageFilter', this.arrayFilter);
-      }else{
-        this.$emit('updateRubriquageFilter', []);
+        this.$emit("updateRubriquageFilter", this.arrayFilter);
+      } else {
+        this.$emit("updateRubriquageFilter", []);
       }
-      if(this.modifyFilter){
+      if (this.modifyFilter) {
         this.resetRubriqueFilter();
       }
       this.$nextTick(() => {
         this.isInternChanged = false;
       });
     },
-    arrayFilter:{
+    arrayFilter: {
       deep: true,
-      handler(){
-        if(this.isInternChanged ||this.isInit){
+      handler() {
+        if (this.isInternChanged || this.isInit) {
           return;
         }
         this.isInternChanged = true;
-        if(this.modifyFilter){
+        if (this.modifyFilter) {
           this.resetRubriqueFilter();
         }
-        if(this.isRubriquage){
-          this.$emit('updateRubriquageFilter', this.arrayFilter);
+        if (this.isRubriquage) {
+          this.$emit("updateRubriquageFilter", this.arrayFilter);
         }
         this.$nextTick(() => {
           this.isInternChanged = false;
         });
-      }
+      },
     },
-    filterRubrique:{
+    filterRubrique: {
       deep: true,
-      async handler(){
-        if(this.isInternChanged || !this.modifyFilter){
+      async handler() {
+        if (this.isInternChanged || !this.modifyFilter) {
           return;
         }
         this.isInternChanged = true;
-        if(this.saveOrganisation !== this.filterOrgaId){
+        if (this.saveOrganisation !== this.filterOrgaId) {
           await this.fetchTopics(false);
         }
-        if(this.filterRubrique.length){
+        if (this.filterRubrique.length) {
           this.arrayFilter = Array.from(this.filterRubrique);
           this.isRubriquage = true;
-        }else if(this.rubriquageData[0].rubriquageId){
-          this.arrayFilter = [{rubriquageId: this.rubriquageData[0].rubriquageId, rubriqueId: 0, nameRubriquage:this.rubriquageData[0].title, nameRubrique:""}];
+        } else if (this.rubriquageData[0].rubriquageId) {
+          this.arrayFilter = [
+            {
+              rubriquageId: this.rubriquageData[0].rubriquageId,
+              rubriqueId: 0,
+              nameRubriquage: this.rubriquageData[0].title,
+              nameRubrique: "",
+            },
+          ];
           this.isRubriquage = false;
         }
-        this.$emit('updateRubriquageFilter',this.isRubriquage? this.arrayFilter : []);
+        this.$emit(
+          "updateRubriquageFilter",
+          this.isRubriquage ? this.arrayFilter : [],
+        );
         this.$nextTick(() => {
           this.isInternChanged = false;
         });
-      }
+      },
     },
     resetRubriquage(): void {
       this.isRubriquage = false;
@@ -165,12 +187,12 @@ export default defineComponent({
   },
 
   created() {
-    if(!this.modifyFilter){
-      if(this.initRubriqueFilter && this.initRubriqueFilter.length > 0){
+    if (!this.modifyFilter) {
+      if (this.initRubriqueFilter && this.initRubriqueFilter.length > 0) {
         this.arrayFilter = Array.from(this.initRubriqueFilter);
         this.isRubriquage = true;
       }
-    }else if(this.filterRubrique.length){
+    } else if (this.filterRubrique.length) {
       this.arrayFilter = Array.from(this.filterRubrique);
       this.isRubriquage = true;
     }
@@ -180,63 +202,86 @@ export default defineComponent({
     });
   },
   methods: {
-    ...mapActions(useFilterStore, ['filterUpdateRubrique']),
-    deleteRubriqueChoice(index: number): void{
-      this.arrayFilter.splice(index,1);
+    ...mapActions(useFilterStore, ["filterUpdateRubrique"]),
+    deleteRubriqueChoice(index: number): void {
+      this.arrayFilter.splice(index, 1);
     },
-    getRubriquage(index: number){
+    getRubriquage(index: number) {
       const elementToNotShow = Array.from(this.arrayFilter);
       elementToNotShow.splice(index, 1);
-      if(elementToNotShow.length){
-        const rubriquageIdToNotShow = elementToNotShow.map(a => a.rubriquageId);
-        return this.rubriquageData.filter((element)=>{
-          if(element.rubriquageId){
+      if (elementToNotShow.length) {
+        const rubriquageIdToNotShow = elementToNotShow.map(
+          (a) => a.rubriquageId,
+        );
+        return this.rubriquageData.filter((element) => {
+          if (element.rubriquageId) {
             return !rubriquageIdToNotShow.includes(element.rubriquageId);
           }
         });
       }
       return this.rubriquageData;
     },
-    addFilter(): void{
-      if(this.availableRubriquage[0].rubriquageId){
-        this.arrayFilter.push({rubriquageId: this.availableRubriquage[0].rubriquageId, rubriqueId: 0,nameRubriquage:this.rubriquageData[0].title, nameRubrique:""});
+    addFilter(): void {
+      if (this.availableRubriquage[0].rubriquageId) {
+        this.arrayFilter.push({
+          rubriquageId: this.availableRubriquage[0].rubriquageId,
+          rubriqueId: 0,
+          nameRubriquage: this.rubriquageData[0].title,
+          nameRubrique: "",
+        });
       }
     },
-    updateRubrique(newValue: {rubriqueId: number; index: number}): void{
+    updateRubrique(newValue: { rubriqueId: number; index: number }): void {
       const item = this.arrayFilter[newValue.index];
       item.rubriqueId = newValue.rubriqueId;
       this.arrayFilter.splice(newValue.index, 1, item);
     },
-    updateRubriquage(newValue: {rubriquageId: number; index: number}): void{
+    updateRubriquage(newValue: { rubriquageId: number; index: number }): void {
       const item = this.arrayFilter[newValue.index];
       item.rubriquageId = newValue.rubriquageId;
       this.arrayFilter.splice(newValue.index, 1, item);
     },
     async fetchTopics(initArrayFilter: boolean): Promise<void> {
-      if(initArrayFilter){
+      if (initArrayFilter) {
         this.arrayFilter.length = 0;
       }
       if (!this.organisation) return;
-      const data = await octopusApi.fetchDataWithParams<Array<Rubriquage>>(0, 'rubriquage/find/'+this.organisation,{}, true);
-      this.rubriquageData = data.filter((element: Rubriquage)=>{
+      const data = await octopusApi.fetchDataWithParams<Array<Rubriquage>>(
+        0,
+        "rubriquage/find/" + this.organisation,
+        {},
+        true,
+      );
+      this.rubriquageData = data.filter((element: Rubriquage) => {
         return element.rubriques.length;
       });
       this.saveOrganisation = this.organisation;
       if (0 === this.rubriquageData.length) return;
-      if(initArrayFilter && this.rubriquageData[0].rubriquageId){
-        this.arrayFilter.push({rubriquageId: this.rubriquageData[0].rubriquageId, rubriqueId: 0, nameRubriquage:this.rubriquageData[0].title, nameRubrique:""});
+      if (initArrayFilter && this.rubriquageData[0].rubriquageId) {
+        this.arrayFilter.push({
+          rubriquageId: this.rubriquageData[0].rubriquageId,
+          rubriqueId: 0,
+          nameRubriquage: this.rubriquageData[0].title,
+          nameRubrique: "",
+        });
       }
     },
-    resetRubriqueFilter(): void{
-      if(0===this.filterRubrique.length || this.isInit || !this.modifyFilter){
+    resetRubriqueFilter(): void {
+      if (
+        0 === this.filterRubrique.length ||
+        this.isInit ||
+        !this.modifyFilter
+      ) {
         return;
       }
       const queries = this.$route.query;
       if (queries.rubriquesId) {
-        this.$router.replace({ query: {...queries, ...{rubriquesId: undefined} } });
+        this.$router.replace({
+          query: { ...queries, ...{ rubriquesId: undefined } },
+        });
       }
       this.filterUpdateRubrique([]);
-    }
+    },
   },
-})
-</script>
+});
+</script>

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

@@ -2,25 +2,30 @@
   <ClassicRadio
     v-model:textInit="sort"
     id-radio="sort-radio"
-    :options="[{title:$t('Sort score'), value:'SCORE'},
-               {title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
-               {title:$t('Sort name'), value:'NAME'}]"
+    :options="[
+      { title: $t('Sort score'), value: 'SCORE' },
+      {
+        title: $t('Sort last'),
+        value: isEmission ? 'LAST_PODCAST_DESC' : 'DATE',
+      },
+      { title: $t('Sort name'), value: 'NAME' },
+    ]"
   />
 </template>
 
 <script lang="ts">
-import ClassicRadio from '../../form/ClassicRadio.vue';
-import { defineComponent } from 'vue';
+import ClassicRadio from "../../form/ClassicRadio.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     ClassicRadio,
   },
   props: {
-    isEmission: { default: false, type:  Boolean},
-    sortCriteria: { default: 'DATE', type: String},
+    isEmission: { default: false, type: Boolean },
+    sortCriteria: { default: "DATE", type: String },
   },
 
-  emits: ['updateSortCriteria'],
+  emits: ["updateSortCriteria"],
   data() {
     return {
       sort: this.sortCriteria,
@@ -28,11 +33,11 @@ export default defineComponent({
   },
   watch: {
     sort(): void {
-      this.$emit('updateSortCriteria', this.sort);
+      this.$emit("updateSortCriteria", this.sort);
     },
     sortCriteria(): void {
       this.sort = this.sortCriteria;
     },
   },
-})
-</script>
+});
+</script>

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

@@ -1,31 +1,27 @@
 <template>
-  <div
-    :id="id"
-    class="d-flex flex-column align-items-center"
-  >
-    <ClassicLoading
-      :loading-text="loadingText"
-      :error-text="errorText"
-    />
+  <div :id="id" class="d-flex flex-column align-items-center">
+    <ClassicLoading :loading-text="loadingText" :error-text="errorText" />
     <template v-if="!loading">
       <div
         v-if="!justSizeChosen"
         class="d-flex justify-content-between align-items-center flex-grow-1 w-100"
       >
         <div class="text-secondary">
-          <template v-if="textCount && (windowWidth > 1300 || windowWidth<=960)">
+          <template
+            v-if="textCount && (windowWidth > 1300 || windowWidth <= 960)"
+          >
             {{ textCount }}
           </template>
         </div>
         <PaginateParams
           v-if="!isPhone && !justSizeChosen && totalCount > 0"
           :rows-per-page="rowsPerPage"
-          @update:rowsPerPage="changeSize"
+          @update:rows-per-page="changeSize"
         />
       </div>
     </template>
     <slot name="list" />
-    <Paginate 
+    <PaginateSection
       v-if="!isPhone && !justSizeChosen && totalCount > 0"
       :first="first"
       :rows-per-page="rowsPerPage"
@@ -34,108 +30,114 @@
       @update:first="changeFirst"
     />
     <button
-      v-show="((first+rowsPerPage) < totalCount) && (isPhone || justSizeChosen)"
+      v-show="first + rowsPerPage < totalCount && (isPhone || justSizeChosen)"
       :disabled="loading"
       class="btn"
-      :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4' : 'btn-more'"
+      :class="
+        buttonPlus
+          ? 'btn-primary align-self-center width-fit-content m-4'
+          : 'btn-more'
+      "
       :title="$t('See more')"
       @click="fetchMore"
     >
       <template v-if="buttonPlus">
-        {{ $t('See more') }}
+        {{ $t("See more") }}
       </template>
-      <div
-        :class="buttonPlus?'ms-1':''"
-        class="saooti-more"
-      />
+      <div :class="buttonPlus ? 'ms-1' : ''" class="saooti-more" />
     </button>
   </div>
 </template>
 
 <script lang="ts">
-import domHelper from '../../../helper/dom';
-import ClassicLoading from '../../form/ClassicLoading.vue';
-import { state } from '../../../stores/ParamSdkStore';
-import PaginateParams from './PaginateParams.vue';
-import Paginate from './Paginate.vue';
-import { defineComponent } from 'vue'
+import domHelper from "../../../helper/dom";
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import { state } from "../../../stores/ParamSdkStore";
+import PaginateParams from "./PaginateParams.vue";
+import PaginateSection from "./PaginateSection.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ListPaginate',
+  name: "ListPaginate",
   components: {
-    Paginate,
+    PaginateSection,
     PaginateParams,
-    ClassicLoading
+    ClassicLoading,
   },
   props: {
-    first: { default: 0, type: Number},
-    rowsPerPage: { default: 30, type: Number},
-    totalCount: { default: 0, type: Number},
-    textCount: { default: undefined, type: String},
-    id: {default: '', type: String},
-    loadingText:{ default: undefined, type: String},
-    errorText:{ default: undefined, type: String},
-    loading: { default: false, type:Boolean},
-    isMobile: { default: false, type: Boolean},
-    justSizeChosen:{default: false, type: Boolean}
+    first: { default: 0, type: Number },
+    rowsPerPage: { default: 30, type: Number },
+    totalCount: { default: 0, type: Number },
+    textCount: { default: undefined, type: String },
+    id: { default: "", type: String },
+    loadingText: { default: undefined, type: String },
+    errorText: { default: undefined, type: String },
+    loading: { default: false, type: Boolean },
+    isMobile: { default: false, type: Boolean },
+    justSizeChosen: { default: false, type: Boolean },
   },
 
-  emits: ['update:first', 'update:rowsPerPage', 'update:isMobile'],
+  emits: ["update:first", "update:rowsPerPage", "update:isMobile"],
   data() {
     return {
       windowWidth: window.innerWidth,
-		};
+    };
   },
-  computed:{
+  computed: {
     buttonPlus(): boolean {
-      return (state.generalParameters.buttonPlus as boolean);
+      return state.generalParameters.buttonPlus as boolean;
     },
-    isPhone(){
+    isPhone() {
       return 960 >= this.windowWidth;
     },
-    rangeSize(){
-      if(this.windowWidth > 1600){
+    rangeSize() {
+      if (this.windowWidth > 1600) {
         return 3;
       }
       return this.windowWidth > 1530 ? 2 : 1;
     },
   },
-  watch:{
-    isPhone:{
-      immediate:true,
-      handler(){
-        this.$emit('update:isMobile', this.isPhone);
-      }
-    }
+  watch: {
+    isPhone: {
+      immediate: true,
+      handler() {
+        this.$emit("update:isMobile", this.isPhone);
+      },
+    },
   },
   mounted() {
     this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize);
-    })
+      window.addEventListener("resize", this.onResize);
+    });
   },
-  beforeUnmount() { 
-    window.removeEventListener('resize', this.onResize); 
+  beforeUnmount() {
+    window.removeEventListener("resize", this.onResize);
   },
-  methods:{
+  methods: {
     onResize() {
       this.windowWidth = window.innerWidth;
     },
-    fetchMore(){
-      this.$emit('update:first', this.first + this.rowsPerPage);
+    fetchMore() {
+      this.$emit("update:first", this.first + this.rowsPerPage);
     },
-    changeFirst(firstValue: number){
+    changeFirst(firstValue: number) {
       this.scrollToTop();
-      this.$emit('update:first', firstValue);
+      this.$emit("update:first", firstValue);
     },
-    changeSize(sizeValue: number){
+    changeSize(sizeValue: number) {
       this.scrollToTop();
-      this.$emit('update:rowsPerPage', sizeValue)
+      this.$emit("update:rowsPerPage", sizeValue);
     },
-    scrollToTop(){
+    scrollToTop() {
       const element = document.getElementById(this.id);
-      if(!element || element.getBoundingClientRect().top > 0){return;}
-      const y = element.getBoundingClientRect().top + window.scrollY - domHelper.convertRemToPixels(3.5);
-      window.scrollTo({top: y, behavior: 'smooth'});
-    }
-	}
-})
-</script>
+      if (!element || element.getBoundingClientRect().top > 0) {
+        return;
+      }
+      const y =
+        element.getBoundingClientRect().top +
+        window.scrollY -
+        domHelper.convertRemToPixels(3.5);
+      window.scrollTo({ top: y, behavior: "smooth" });
+    },
+  },
+});
+</script>