@saooti/octopus-sdk 39.2.14 → 39.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.2.14",
+  "version": "39.2.16",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/App.vue

@@ -16,16 +16,12 @@
 import TopBar from "@/components/misc/TopBar.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
 import ClassicLazy from "@/components/misc/ClassicLazy.vue";
-import { Rubriquage } from "./stores/class/rubrique/rubriquage";
-import { RubriquageFilter } from "./stores/class/rubrique/rubriquageFilter";
-import { Rubrique } from "./stores/class/rubrique/rubrique";
 import initSDK from "./components/mixins/init";
 import { useAuthStore } from "./stores/AuthStore";
 import { useFilterStore } from "./stores/FilterStore";
 import { useGeneralStore } from "./stores/GeneralStore";
 import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
-import { Category } from "./stores/class/general/category";
 const FooterOctopus = defineAsyncComponent(
   () => import("@/components/misc/FooterSection.vue"),
 );
@@ -92,12 +88,10 @@ export default defineComponent({
     }, 2000);
   },
   methods: {
-    ...mapActions(useFilterStore, ["filterUpdateIab", "filterUpdateRubrique"]),
+    ...mapActions(useFilterStore, ["filterUpdateRubrique"]),
     async initApp() {
       await this.initSdk();
       await this.handleOrganisationFilter();
-      this.handleIabIdFilter();
-      this.handleRubriquesFilter();
     },
     async handleOrganisationFilter() {
       let orgaId = "";
@@ -114,56 +108,6 @@ export default defineComponent({
       }
       await this.selectOrganisation(orgaId);
     },
-    handleIabIdFilter() {
-      if (this.filterOrgaId) {
-        return;
-      }
-      if (
-        this.$route.query.iabId &&
-        "string" === typeof this.$route.query.iabId
-      ) {
-        const iabId = parseInt(this.$route.query.iabId, 10);
-        const category = this.storedCategories.filter((c: Category) => {
-          return c.id === iabId;
-        });
-        if (category.length) {
-          this.filterUpdateIab(category[0]);
-        }
-      }
-    },
-    handleRubriquesFilter() {
-      if (0 === this.filterRubriquage.length) {
-        return;
-      }
-      if (
-        this.$route.query.rubriquesId &&
-        "string" === typeof this.$route.query.rubriquesId
-      ) {
-        const arrayFilter = this.$route.query.rubriquesId.split(",");
-        const rubriquesFilter: Array<RubriquageFilter> = [];
-        const filterLength = arrayFilter.length;
-        for (let index = 0; index < filterLength; index++) {
-          const rubriqueFilter = arrayFilter[index].split(":");
-          const rubriquage = this.filterRubriquage.find((x: Rubriquage) => {
-            return x.rubriquageId === parseInt(rubriqueFilter[0]);
-          });
-          if (rubriquage) {
-            const rubrique = rubriquage.rubriques.find((x: Rubrique) => {
-              return x.rubriqueId === parseInt(rubriqueFilter[1]);
-            });
-            rubriquesFilter.push({
-              rubriquageId: rubriquage.rubriquageId,
-              rubriqueId: rubrique.rubriqueId,
-              nameRubriquage: rubriquage.title,
-              nameRubrique: rubrique.name,
-            });
-          }
-        }
-        if (rubriquesFilter.length) {
-          this.filterUpdateRubrique(rubriquesFilter);
-        }
-      }
-    },
   },
 });
 </script>

package/src/assets/general.scss

@@ -47,6 +47,9 @@ body{
     height: 0.01rem;
     color: #999;
   }
+  .d-flex-low-importance{
+		display: flex;
+	}
   .d-flex-column{
 		display: flex;
 		flex-direction: row;

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

@@ -7,7 +7,10 @@
     <h1 v-if="isHeaderDisplay" v-show="titleDisplay">
       {{ titleDisplay ?? $t("Home") }}
     </h1>
-    <div v-show="isDisplay" class="d-flex flex-column justify-content-end">
+    <div
+      v-show="isDisplay"
+      class="d-flex-low-importance flex-column justify-content-end"
+    >
       <ol
         v-if="filterIab || filterRubrique.length"
         class="octopus-breadcrumb d-flex align-items-center justify-content-center flex-wrap"
@@ -35,7 +38,7 @@
           </div>
           <div class="mx-1">:</div>
           <RubriqueChooser
-            v-if="getRubriques(filter.rubriquageId).length"
+            v-if="getRubriquesLength(filter.rubriquageId)"
             class="ms-2 multiselect-transparent multiselect-white"
             :multiple="false"
             :rubriquage-id="filter.rubriquageId"
@@ -64,12 +67,16 @@
 </template>
 
 <script lang="ts">
+import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterParam";
+import { routeParams } from "../../mixins/routeParam/routeParams";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { useFilterStore } from "../../../stores/FilterStore";
+import { useGeneralStore } from "../../../stores/GeneralStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
+import { Category } from "@/stores/class/general/category";
 const CategoryList = defineAsyncComponent(() => import("./CategoryList.vue"));
 const RubriqueList = defineAsyncComponent(
   () => import("./../rubriques/RubriqueList.vue"),
@@ -79,18 +86,19 @@ const RubriqueChooser = defineAsyncComponent(
 );
 export default defineComponent({
   name: "CategoryFilter",
-
   components: {
     CategoryList,
     RubriqueList,
     RubriqueChooser,
   },
+  mixins: [routeParams, rubriquesFilterParam],
   data() {
     return {
       isCategories: false as boolean,
     };
   },
   computed: {
+    ...mapState(useGeneralStore, ["storedCategories"]),
     ...mapState(useFilterStore, [
       "filterIab",
       "filterRubrique",
@@ -153,6 +161,66 @@ export default defineComponent({
       }
       return `background-image: url('/img/header-${imgName}.webp');`;
     },
+    routeFilterIab() {
+      return this.$route.query.iabId;
+    },
+    routeRubriques() {
+      return this.$route.query.rubriquesId;
+    },
+  },
+  watch: {
+    routeFilterIab: {
+      deep: true,
+      immediate: true,
+      async handler() {
+        if (this.routeFilterIab && "string" === typeof this.routeFilterIab) {
+          const iabId = parseInt(this.routeFilterIab, 10);
+          const category = this.storedCategories.filter((c: Category) => {
+            return c.id === iabId;
+          });
+          if (category.length) {
+            this.filterUpdateIab(category[0]);
+          }
+        } else {
+          this.filterUpdateIab();
+        }
+      },
+    },
+    routeRubriques: {
+      deep: true,
+      immediate: true,
+      async handler() {
+        if (0 === this.filterRubriquage.length) {
+          return;
+        }
+        const rubriquesFilter: Array<RubriquageFilter> = [];
+        if (
+          this.$route.query.rubriquesId &&
+          "string" === typeof this.$route.query.rubriquesId
+        ) {
+          const arrayFilter = this.$route.query.rubriquesId.split(",");
+          const filterLength = arrayFilter.length;
+          for (let index = 0; index < filterLength; index++) {
+            const rubriqueFilter = arrayFilter[index].split(":");
+            const rubriquage = this.filterRubriquage.find((x: Rubriquage) => {
+              return x.rubriquageId === parseInt(rubriqueFilter[0]);
+            });
+            if (rubriquage) {
+              const rubrique = rubriquage.rubriques.find((x: Rubrique) => {
+                return x.rubriqueId === parseInt(rubriqueFilter[1]);
+              });
+              rubriquesFilter.push({
+                rubriquageId: rubriquage.rubriquageId,
+                rubriqueId: rubrique.rubriqueId,
+                nameRubriquage: rubriquage.title,
+                nameRubrique: rubrique.name,
+              });
+            }
+          }
+        }
+        this.filterUpdateRubrique(rubriquesFilter);
+      },
+    },
   },
   methods: {
     ...mapActions(useFilterStore, ["filterUpdateIab", "filterUpdateRubrique"]),
@@ -166,14 +234,9 @@ export default defineComponent({
       ) {
         return;
       }
-      const filter = Array.from(this.filterRubrique);
-      filter[index].rubriqueId = rubrique.rubriqueId ?? 0;
-      this.filterUpdateRubrique(filter);
-      const queryString = filter
-        .map((value) => value.rubriquageId + ":" + value.rubriqueId)
-        .join();
-      this.$router.replace({
-        query: { ...this.$route.query, ...{ rubriquesId: queryString } },
+      this.modifyRubriquesFilter((a) => {
+        a[index].rubriqueId = rubrique.rubriqueId ?? 0;
+        return a;
       });
     },
     getRubriques(rubriquageId: number): Array<Rubrique> {
@@ -182,32 +245,22 @@ export default defineComponent({
       });
       return rubriquage ? rubriquage.rubriques : [];
     },
+    getRubriquesLength(rubriquageId: number): number {
+      const rubriquage = this.filterRubriquage.find((x: Rubriquage) => {
+        return x.rubriquageId === rubriquageId;
+      });
+      return rubriquage ? rubriquage.rubriques.length : 0;
+    },
     removeFilter(index: number, event?: { preventDefault: () => void }): void {
       if (this.filterIab) {
         if (this.$route.query.iabId) {
-          this.$router.replace({
-            query: { ...this.$route.query, ...{ iabId: undefined } },
-          });
+          this.updateFiltersParam({ iabId: undefined }, { i: undefined });
         }
-        this.filterUpdateIab();
       } else {
-        const newFilter: Array<RubriquageFilter> = Array.from(
-          this.filterRubrique,
-        );
-        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.filterUpdateRubrique(newFilter);
+        this.modifyRubriquesFilter((a) => {
+          a.splice(index + 1);
+          return a;
+        });
       }
       if (event) {
         event.preventDefault();

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

@@ -39,6 +39,7 @@
 </template>
 
 <script lang="ts">
+import { routeParams } from "../../mixins/routeParam/routeParams";
 import classicApi from "../../../api/classicApi";
 import { state } from "../../../stores/ParamSdkStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
@@ -52,6 +53,7 @@ export default defineComponent({
   components: {
     ClassicPopover,
   },
+  mixins: [routeParams],
 
   props: {
     isFilter: { default: false, type: Boolean },
@@ -121,7 +123,6 @@ export default defineComponent({
   },
 
   methods: {
-    ...mapActions(useFilterStore, ["filterUpdateIab"]),
     ...mapActions(useGeneralStore, ["storedUpdateCategoriesOrga"]),
     checkIfFilter(category: Category): void {
       if (!this.isFilter) {
@@ -137,11 +138,11 @@ export default defineComponent({
         ("string" === typeof queries.iabId &&
           parseInt(queries.iabId, 10) !== category.id)
       ) {
-        this.$router.replace({
-          query: { ...queries, ...{ iabId: category.id.toString() } },
-        });
+        this.updateFiltersParam(
+          { iabId: category.id.toString() },
+          { i: category.id.toString() },
+        );
       }
-      this.filterUpdateIab(category);
     },
     resizeWindow(): void {
       const categoryList = this.$refs.categoryListContainer as HTMLElement;

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

@@ -92,7 +92,7 @@ export default defineComponent({
     query: { default: undefined, type: String },
     iabId: { default: undefined, type: Number },
     organisationId: { default: undefined, type: String },
-    monetization: { default: "UNDEFINED", type: String },
+    monetisable: { default: "UNDEFINED", type: String },
     before: { default: undefined, type: String },
     after: { default: undefined, type: String },
     sort: { default: "DATE", type: String },
@@ -138,7 +138,7 @@ export default defineComponent({
       return `${this.first}|${this.size}`;
     },
     changed(): string {
-      return `${this.organisationId}|${this.query}|${this.monetization}|${this.includeHidden}
+      return `${this.organisationId}|${this.query}|${this.monetisable}|${this.includeHidden}
       ${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.sort}|${this.noRubriquageId}`;
     },
     sortText(): string {
@@ -203,7 +203,7 @@ export default defineComponent({
         size: this.dsize,
         query: this.query,
         organisationId: this.organisation,
-        monetisable: this.monetization,
+        monetisable: this.monetisable,
         iabId: this.iabId,
         before: this.before,
         after: this.after,

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

@@ -22,37 +22,40 @@
         <MonetizableFilter
           v-if="!isPodcastmaker && !isEducation"
           :is-emission="isEmission"
-          @update-monetization="updateMonetization"
+          :monetisable="monetisable"
+          @update:monetisable="updateMonetisable"
         />
-        <CategorySearchFilter @update-category="updateCategory" />
+        <CategorySearchFilter :iab-id="iabId" @update:iab-id="updateIab" />
         <RubriqueFilter
-          :reset-rubriquage="resetRubriquage"
-          :organisation-id="organisationId"
-          @update-rubriquage-filter="updateRubriquageFilter"
+          :rubrique-filter="rubriqueFilter"
+          @update:rubrique-filter="updateRubriquageFilter"
         />
         <DateFilter
           :is-emission="isEmission"
-          @update-to-date="updateToDate"
-          @update-from-date="updateFromDate"
+          :from-date="fromDate"
+          :to-date="toDate"
+          @update-dates="updateDates($event)"
         />
         <div
           v-if="organisation && organisationRight && !isPodcastmaker"
           class="d-flex flex-column mt-3"
         >
           <ClassicCheckbox
-            v-model:text-init="isNotVisible"
+            :text-init="includeHidden"
             class="flex-shrink-0"
             id-checkbox="search-future-checkbox"
             :label="textNotVisible"
-            :is-disabled="isCheckboxNotValidate && isNotValidate"
+            :is-disabled="isCheckboxNotValidate && notValid"
+            @update:text-init="updateIncludeHidden"
           />
         </div>
         <div v-if="isCheckboxNotValidate" class="d-flex flex-column mt-3">
           <ClassicCheckbox
-            v-model:text-init="isNotValidate"
+            :text-init="notValid"
             class="flex-shrink-0"
             id-checkbox="search-not-validate-checkbox"
             :label="textNotValidate"
+            @update:text-init="updateNotValid"
           />
         </div>
         <ClassicCheckbox
@@ -61,19 +64,14 @@
           class="flex-shrink-0 mt-3"
           id-checkbox="only-video-checkbox"
           :label="$t('Show only episodes with video')"
-          @update:text-init="$emit('update:onlyVideo', $event)"
-        />
-      </div>
-      <div class="d-flex flex-column">
-        <div class="text-primary mb-2">
-          {{ $t("Sort") }}
-        </div>
-        <SearchOrder
-          :is-emission="isEmission"
-          :sort-criteria="sortCriteria"
-          @update-sort-criteria="updateSortCriteria"
+          @update:text-init="updateOnlyVideo"
         />
       </div>
+      <SearchOrder
+        :is-emission="isEmission"
+        :sort="sort"
+        @update:sort="updateSort"
+      />
     </div>
   </div>
 </template>
@@ -81,6 +79,8 @@
 <script lang="ts">
 import { orgaComputed } from "../../mixins/orgaComputed";
 import { useAuthStore } from "../../../stores/AuthStore";
+import { useFilterStore } from "../../../stores/FilterStore";
+import { rubriquesFilterParam } from "../../mixins/routeParam/rubriquesFilterParam";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { mapState } from "pinia";
@@ -107,38 +107,46 @@ export default defineComponent({
     DateFilter,
     SearchOrder,
   },
-  mixins: [orgaComputed],
+  mixins: [orgaComputed, rubriquesFilterParam],
   props: {
     organisationId: { default: undefined, type: String },
     isEmission: { default: false, type: Boolean },
-    resetRubriquage: { default: false, type: Boolean },
     isEducation: { default: false, type: Boolean },
     includeHidden: { default: false, type: Boolean },
-    sortCriteria: { default: "DATE", type: String },
+    sort: { default: "DATE", type: String },
     onlyVideo: { default: false, type: Boolean },
+    monetisable: { default: "UNDEFINED", type: String },
+    iabId: { default: undefined, type: Number },
+    searchPattern: { default: "", type: String },
+    fromDate: { default: undefined, type: String },
+    toDate: { default: undefined, type: String },
+    notValid: { default: false, type: Boolean },
+    rubriqueFilter: {
+      default: () => [],
+      type: Array as () => Array<RubriquageFilter>,
+    },
   },
 
   emits: [
-    "updateToDate",
-    "updateFromDate",
-    "updateMonetization",
-    "updateCategory",
-    "updateSortCriteria",
-    "includeHidden",
-    "notValid",
-    "updateRubriquageFilter",
+    "update:toDate",
+    "update:fromDate",
+    "update:monetisable",
+    "update:iabId",
+    "update:sort",
+    "update:includeHidden",
+    "update:notValid",
+    "update:rubriqueFilter",
     "update:onlyVideo",
   ],
   data() {
     return {
-      isNotVisible: this.includeHidden,
-      isNotValidate: false as boolean,
       showFilters: false as boolean,
       firstLoaded: false as boolean,
     };
   },
 
   computed: {
+    ...mapState(useFilterStore, ["filterIab", "filterRubrique"]),
     ...mapState(useAuthStore, [
       "isRoleProduction",
       "isRoleContribution",
@@ -162,7 +170,7 @@ export default defineComponent({
         this.isRoleContribution &&
         !this.isPodcastmaker &&
         !this.isEmission &&
-        this.isNotVisible
+        this.includeHidden
       );
     },
     textNotValidate(): string {
@@ -173,42 +181,91 @@ export default defineComponent({
   },
   watch: {
     organisation(): void {
-      this.isNotVisible =
+      const hidden =
         undefined !== this.organisation &&
         this.organisationRight &&
         !this.isEmission;
+      if (hidden !== this.includeHidden) {
+        this.updateIncludeHidden(hidden);
+      }
     },
-    isNotVisible(): void {
-      this.$emit("includeHidden", this.isNotVisible);
-    },
-    isNotValidate(): void {
-      this.$emit("notValid", this.isNotValidate);
+    searchPattern(value: string): void {
+      const search = value.trim();
+      const valSort =
+        search.length > 3
+          ? "SCORE"
+          : this.isEmission
+            ? "LAST_PODCAST_DESC"
+            : "DATE";
+      if (valSort !== this.sort) {
+        this.$emit("update:sort", valSort);
+      }
+      this.updateRouteParam({
+        q: search.length ? search : undefined,
+        s: valSort,
+      });
     },
   },
   methods: {
-    clickShowFilters(): void {
-      if (!this.firstLoaded) {
-        this.firstLoaded = true;
+    updateMonetisable(value: string): void {
+      this.$emit("update:monetisable", value);
+      this.updateRouteParam({ m: "UNDEFINED" !== value ? value : undefined });
+    },
+    updateIab(value: number | undefined) {
+      this.$emit("update:iabId", 0 !== value ? value : undefined);
+      let filterIab = {};
+      if (this.filterIab && this.filterIab.id !== value) {
+        filterIab = { iabId: undefined };
       }
-      this.showFilters = !this.showFilters;
+      this.updateRouteParam({
+        ...{ i: value ? value.toString() : undefined },
+        ...filterIab,
+      });
+    },
+    updateSort(value: string) {
+      this.$emit("update:sort", value);
+      this.updateRouteParam({ s: value });
     },
-    updateFromDate(value: string): void {
-      this.$emit("updateFromDate", value);
+    updateIncludeHidden(value: boolean) {
+      this.$emit("update:includeHidden", value);
+      this.updateRouteParam({ h: value.toString() });
     },
-    updateToDate(value: string): void {
-      this.$emit("updateToDate", value);
+    updateNotValid(value: boolean) {
+      this.$emit("update:notValid", value);
+      this.updateRouteParam({ nv: value.toString() });
     },
-    updateMonetization(value: string): void {
-      this.$emit("updateMonetization", value);
+    updateOnlyVideo(value: boolean) {
+      this.$emit("update:onlyVideo", value);
+      this.updateRouteParam({ v: value ? "true" : undefined });
     },
-    updateCategory(value: number) {
-      this.$emit("updateCategory", 0 !== value ? value : undefined);
+    updateDates(value: {
+      from: string | undefined;
+      to: string | undefined;
+    }): void {
+      this.$emit("update:fromDate", value.from);
+      this.$emit("update:toDate", value.to);
+      this.updateRouteParam({ from: value.from, to: value.to });
     },
     updateRubriquageFilter(value: Array<RubriquageFilter>) {
-      this.$emit("updateRubriquageFilter", value);
+      this.$emit("update:rubriqueFilter", value);
+      let filterRubriques = {};
+      const valueString = this.stringifyRubriquesFilter(value);
+      if (
+        this.filterRubrique.length &&
+        this.stringifyRubriquesFilter(this.filterRubrique) !== valueString
+      ) {
+        filterRubriques = { rubriquesId: undefined };
+      }
+      this.updateRouteParam({
+        ...{ r: valueString.length ? valueString : undefined },
+        ...filterRubriques,
+      });
     },
-    updateSortCriteria(value: string) {
-      this.$emit("updateSortCriteria", value);
+    clickShowFilters(): void {
+      if (!this.firstLoaded) {
+        this.firstLoaded = true;
+      }
+      this.showFilters = !this.showFilters;
     },
   },
 });