@saooti/octopus-sdk 40.0.1 → 40.0.2

package/package.json

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

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

@@ -49,17 +49,17 @@
         <ClassicSelect
           v-if="isSelectValidity"
           :text-init="validity"
-          @update:text-init="updateValidity"
           id-select="valid-episodes-select"
           :label="$t('Episodes to validate')+' :'"
           :display-label="true"
-          classLabel="flex-shrink-0 me-1"
+          class-label="flex-shrink-0 me-1"
           class="d-flex align-items-center mt-3 mb-0"
           :options="[
             { title: $t('Display only episodes to validate'), value: 'false' },
             { title: $t('Display episodes to validate'), value: '' },
             { title: $t('Do not display episodes to validate'), value: 'true' },
           ]"
+          @update:text-init="updateValidity"
         />
         <ClassicCheckbox
           v-if="!isEmission"
@@ -203,7 +203,7 @@ export default defineComponent({
       if (valSort !== this.sort) {
         this.$emit("update:sort", valSort);
       }
-      this.updateRouteParam({
+      this.updateRouteParamAdvanced({
         q: search.length ? search : undefined,
         s: valSort,
       });
@@ -212,7 +212,7 @@ export default defineComponent({
   methods: {
     updateMonetisable(value: string): void {
       this.$emit("update:monetisable", value);
-      this.updateRouteParam({ m: "UNDEFINED" !== value ? value : undefined });
+      this.updateRouteParamAdvanced({ m: "UNDEFINED" !== value ? value : undefined });
     },
     updateIab(value: number | undefined) {
       this.$emit("update:iabId", 0 !== value ? value : undefined);
@@ -220,26 +220,26 @@ export default defineComponent({
       if (this.filterIab && this.filterIab.id !== value) {
         filterIab = { iabId: undefined };
       }
-      this.updateRouteParam({
+      this.updateRouteParamAdvanced({
         ...{ i: value ? value.toString() : undefined },
         ...filterIab,
       });
     },
     updateSort(value: string) {
       this.$emit("update:sort", value);
-      this.updateRouteParam({ s: value });
+      this.updateRouteParamAdvanced({ s: value });
     },
     updateIncludeHidden(value: boolean) {
       this.$emit("update:includeHidden", value);
-      this.updateRouteParam({ h: value.toString() });
+      this.updateRouteParamAdvanced({ h: value.toString() });
     },
     updateValidity(value: boolean) {
       this.$emit("update:validity", value);
-      this.updateRouteParam({ vl: value.toString() });
+      this.updateRouteParamAdvanced({ vl: value.toString() });
     },
     updateOnlyVideo(value: boolean) {
       this.$emit("update:onlyVideo", value);
-      this.updateRouteParam({ v: value ? "true" : undefined });
+      this.updateRouteParamAdvanced({ v: value ? "true" : undefined });
     },
     updateDates(value: {
       from: string | undefined;
@@ -247,7 +247,7 @@ export default defineComponent({
     }): void {
       this.$emit("update:fromDate", value.from);
       this.$emit("update:toDate", value.to);
-      this.updateRouteParam({ from: value.from, to: value.to });
+      this.updateRouteParamAdvanced({ from: value.from, to: value.to });
     },
     updateRubriquageFilter(value: Array<RubriquageFilter>) {
       this.$emit("update:rubriqueFilter", value);
@@ -259,7 +259,7 @@ export default defineComponent({
       ) {
         filterRubriques = { rubriquesId: undefined };
       }
-      this.updateRouteParam({
+      this.updateRouteParamAdvanced({
         ...{ r: valueString.length ? valueString : undefined },
         ...filterRubriques,
       });

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

@@ -112,7 +112,7 @@ export default defineComponent({
         this.internSizeChange = false;
         return;
       }
-      this.updatePaginateRank(Math.floor(this.first / this.rowsPerPage) + 1);
+      this.updateRouteParam({pr:(Math.floor(this.first / this.rowsPerPage) + 1).toString()});
     },
   },
   methods: {

package/src/components/display/participant/ParticipantList.vue

@@ -104,6 +104,9 @@ export default defineComponent({
     changePaginate(): string {
       return `${this.first}|${this.size}`;
     },
+    sort(): string {
+      return !this.query ? "NAME" : "SCORE";
+    },
   },
   watch: {
     changePaginate() {
@@ -149,6 +152,7 @@ export default defineComponent({
               size: this.dsize,
               query: this.query,
               organisationId: this.organisation,
+              sort: this.sort
             },
             specialTreatement: true,
           },

package/src/components/display/podcasts/PodcastRubriqueList.vue

@@ -12,7 +12,8 @@
       class="d-flex align-items-center border p-1 m-1 text-dark"
       :to="{
         name: 'rubrique',
-        params: { rubriqueId: rubriqueId },
+        params: { rubriqueId: rubriqueId},
+        query: organisationQuery
       }"
     >
       {{ rubriquagesOrga[rubriqueId]?.name ?? rubriqueId}}
@@ -21,10 +22,11 @@
 </template>
 
 <script lang="ts">
-import { mapActions } from "pinia";
+import { mapActions, mapState } from "pinia";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
 import {defineComponent } from "vue";
-import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import { Rubrique } from "../../../stores/class/rubrique/rubrique";
+import { useFilterStore } from "../../../stores/FilterStore";
 export default defineComponent({
   name: "TagList",
   components: {
@@ -42,6 +44,15 @@ export default defineComponent({
   created() {
     this.fetchRubriquages();
   },
+  computed:{
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    organisationQuery(){
+      if(this.filterOrgaId){
+        return undefined;
+      }
+      return { o: this.orgaId};
+    }
+  },
   methods:{
     ...mapActions(useSaveFetchStore, ["getOrgaRubriques"]),
     async fetchRubriquages(){

package/src/components/form/ClassicSearch.vue

@@ -55,6 +55,10 @@ export default defineComponent({
       height: 48px;
     }
 
+    input[type="search"]::-webkit-search-cancel-button {
+      display: none;
+    }
+    
     .search-icon-container {
       position: absolute;
       inset-block:0;

package/src/components/mixins/routeParam/paginateParamInit.ts

@@ -1,16 +1,43 @@
+import { useFilterStore } from '../../../stores/FilterStore';
+import { routeParams } from "../../mixins/routeParam/routeParams";
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
 export const paginateParamInit = defineComponent({
+  mixins: [ routeParams],
   props: {
     pr: { default: 0, type: Number },
     ps: { default: 30, type: Number },
+    routeOrga: { default: undefined, type: String },
+    routeQuery: { default: "", type: String },
+  },
+  data() {
+    return {
+      organisationId: undefined as string | undefined,
+      searchPattern: "" as string,
+    };
   },
   computed:{
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     paginateFirst(){
       if(!this.pr){
         return 0;
       }
       return  Math.max((this.pr - 1 ) * this.ps, 0);
-    }
-  }
+    },
+    searchMinSize(): string{
+      return this.searchPattern.length>3 ? this.searchPattern : "";
+    },
+  },
+  watch: {
+    searchPattern(value: string): void {
+      this.updateRouteParam({
+        q: this.searchMinSize.length ? this.searchMinSize : undefined,
+      });
+    },
+  },
+  created() {
+    this.organisationId = this.filterOrgaId ?? this.routeOrga;
+    this.searchPattern = this.routeQuery ?? "";
+  },
 });
 

package/src/components/mixins/routeParam/routeParams.ts

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 export const routeParams = defineComponent({
   methods: {
     checkPage(): boolean{
-      return ['podcasts', 'emissions', 'participants', 'playlists', 'productors'].includes(this.$route.name?.toString()??"");
+      return ['podcasts', 'emissions', 'participants', 'playlists', 'productors', 'rubrique'].includes(this.$route.name?.toString()??"");
     },
     checkPageAdvanced(): boolean{
       return ['podcasts', 'emissions'].includes(this.$route.name?.toString()??"");
@@ -12,12 +12,12 @@ export const routeParams = defineComponent({
         this.$router.push({query: {...this.$route.query, ...{ps:ps, pr:1}}});
       }
     },
-    updatePaginateRank(pr:number){
+    updateRouteParam(update: {[key:string]: string|undefined}){
       if(this.checkPage()){
-        this.$router.push({query: {...this.$route.query, ...{pr:pr}}});
+        this.$router.push({query: {...this.$route.query, ...update}});
       }
     },
-    updateRouteParam(update: {[key:string]: string|undefined}){
+    updateRouteParamAdvanced(update: {[key:string]: string|undefined}){
       if(this.checkPageAdvanced()){
         this.$router.push({query: {...this.$route.query, ...update}});
       }

package/src/components/pages/ParticipantsPage.vue

@@ -9,7 +9,7 @@
       :show-count="true"
       :first="paginateFirst"
       :size="ps"
-      :query="searchPattern"
+      :query="searchMinSize"
       :organisation-id="organisationId"
     />
   </section>
@@ -17,11 +17,9 @@
 
 <script lang="ts">
 import { paginateParamInit } from "../mixins/routeParam/paginateParamInit";
-import { useFilterStore } from "../../stores/FilterStore";
 import ParticipantList from "../display/participant/ParticipantList.vue";
 import ProductorSearch from "../display/filter/ProductorSearch.vue";
 import { defineComponent } from "vue";
-import { mapState } from "pinia";
 export default defineComponent({
   components: {
     ProductorSearch,
@@ -29,9 +27,10 @@ export default defineComponent({
   },
   mixins: [paginateParamInit],
   props: {
-    productor: { default: undefined, type: String },
     pr: { default: 0, type: Number },
     ps: { default: 30, type: Number },
+    routeOrga: { default: undefined, type: String },
+    routeQuery: { default: "", type: String },
   },
   data() {
     return {
@@ -39,11 +38,5 @@ export default defineComponent({
       organisationId: undefined as string | undefined,
     };
   },
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-  },
-  created() {
-    this.organisationId = this.productor ? this.productor : this.filterOrgaId;
-  },
 });
 </script>

package/src/components/pages/PlaylistsPage.vue

@@ -18,7 +18,7 @@
       :show-count="true"
       :first="paginateFirst"
       :size="ps"
-      :query="searchPattern"
+      :query="searchMinSize"
       :organisation-id="organisationId"
     />
   </section>
@@ -28,7 +28,6 @@
 import { paginateParamInit } from "../mixins/routeParam/paginateParamInit";
 import PlaylistList from "../display/playlist/PlaylistList.vue";
 import { useAuthStore } from "../../stores/AuthStore";
-import { useFilterStore } from "../../stores/FilterStore";
 import { state } from "../../stores/ParamSdkStore";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { mapState } from "pinia";
@@ -42,9 +41,10 @@ export default defineComponent({
   },
   mixins: [paginateParamInit],
   props: {
-    productor: { default: undefined, type: String },
     pr: { default: 0, type: Number },
     ps: { default: 30, type: Number },
+    routeOrga: { default: undefined, type: String },
+    routeQuery: { default: "", type: String },
   },
 
   data() {
@@ -55,15 +55,10 @@ export default defineComponent({
   },
 
   computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
     ...mapState(useAuthStore, ["isRolePlaylists"]),
     isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker as boolean;
     },
   },
-
-  created() {
-    this.organisationId = this.productor ? this.productor : this.filterOrgaId;
-  },
 });
 </script>

package/src/components/pages/RubriquePage.vue

@@ -1,38 +1,65 @@
 <template>
   <section class="page-box">
     <h1>{{ title }}</h1>
+    <ProductorSearch
+      v-model:organisation-id="organisationId"
+      v-model:search-pattern="searchPattern"
+    />
     <PodcastList
-      :first="firstRoute"
-      :size="sizeRoute"
-      :rubrique-id="rubriqueId"
+      :first="paginateFirst"
+      :size="ps"
+      :rubrique-id="[rubriqueId]"
+      :organisation-id="orgaArray"
+      :query="searchMinSize"
+      :sort-criteria="sortOrder ?? 'DATE'"
     />
   </section>
 </template>
 
 <script lang="ts">
+import { paginateParamInit } from "../mixins/routeParam/paginateParamInit";
+import { seoTitleUrl } from "../mixins/seoTitleUrl";
 import classicApi from "../../api/classicApi";
 import PodcastList from "../display/podcasts/PodcastList.vue";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { mapState } from "pinia";
+const ProductorSearch = defineAsyncComponent(
+  () => import("../display/filter/ProductorSearch.vue"),
+);
 export default defineComponent({
   name: "RubriquePage",
   components: {
     PodcastList,
+    ProductorSearch
   },
+  mixins: [paginateParamInit, seoTitleUrl],
   props: {
-    firstRoute: { default: 0, type: Number },
-    sizeRoute: { default: 30, type: Number },
-    rubriqueId: { default: undefined, type: [Number] },
+    pr: { default: 0, type: Number },
+    ps: { default: 30, type: Number },
+    rubriqueId: { default: undefined, type: Number },
+    routeOrga: { default: undefined, type: String },
+    routeQuery: { default: "", type: String },
   },
   data() {
     return {
       title: "" as string,
+      organisationId: undefined as string | undefined,
+      searchPattern: "" as string,
     };
   },
   computed:{
     ...mapState(useGeneralStore, ["metaTitle"]),
+    orgaArray(): Array<string> {
+      return this.organisationId ? [this.organisationId] : [];
+    },
+    sortOrder(){
+      if(this.searchMinSize.length){
+        return "SCORE";
+      }
+      return undefined;
+    }
   },
   watch: {
     rubriqueId: {
@@ -42,8 +69,8 @@ export default defineComponent({
           api: 0,
           path: "rubrique/" + this.rubriqueId,
         });
+        this.updatePathParams(data.name);
         this.title = data.name;
-        document.title = this.title + ' - ' + this.metaTitle;
       },
     },
   },

package/src/router/router.ts

@@ -128,6 +128,8 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
       ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
+      routeOrga:route.query.o,
+      routeQuery: route.query.q ?? "",
     }),
     meta:{
       title: "Speakers",
@@ -190,18 +192,15 @@ const routes: Array<RouteRecordRaw> = [
     }
   },
   {
-    path: "/main/pub/rubrique/:rubriqueId/:productor?",
+    path: "/main/pub/rubrique/:rubriqueId(\\d+):title([^?]*)?:productor?",
     name: "rubrique",
     component: RubriquePage,
     props: (route: RouteLocationNormalized) => ({
-      firstRoute: route.query.first
-        ? parseInt(route.query.first.toString(), 10)
-        : 0,
-      sizeRoute: route.query.size
-        ? parseInt(route.query.size.toString(), 10)
-        : 12,
+      pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
+      ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
       rubriqueId: parseInt(route.params.rubriqueId.toString(), 10),
-      productor: route.params.productor,
+      routeOrga:route.query.o,
+      routeQuery: route.query.q ?? "",
     }),
     meta:{
       title: "",
@@ -236,6 +235,8 @@ const routes: Array<RouteRecordRaw> = [
     props: (route: RouteLocationNormalized) => ({
       pr: route.query.pr ? parseInt(route.query.pr.toString(), 10) : undefined,
       ps: route.query.ps ? parseInt(route.query.ps.toString(), 10) : undefined,
+      routeOrga:route.query.o,
+      routeQuery: route.query.q ?? "",
     }),
     meta:{
       title: "Playlists"

package/src/style/_variables.scss

@@ -34,22 +34,3 @@
     --octopus-line-clamp:2;
     --octopus-max-height-description: 7rem;
 }
-
-:root.dark-theme{
-    // Colors
-    --octopus-background: oklch(100% 0 0deg);
-    --octopus-primary: oklch(55% 0.118 159.16deg);
-    --octopus-secondary: oklch(90% 0 0deg);
-    --octopus-tertiary: oklch(45.74% 0.0822 222.06deg);
-    --octopus-danger: oklab(50% 0.18 0.105);
-    --octopus-warning:oklch(55% 0.1647 42.35deg);
-    --octopus-gray-text: oklch(44.75% 0.0121 229.13deg);
-    --octopus-color-text: oklch(30% 0 0deg);
-    --octopus-color-on-primary: oklch(100% 0 0deg);
-    --octopus-border-default: oklch(91% 0.007 248deg);
-    --octopus-shadow: oklch(0% 0 0deg / 40%); 
-    --octopus-player-color:oklch(27% 0 0deg);
-    --octopus-gray: oklch(50% 0 0deg);
-}
-
-