@saooti/octopus-sdk 40.1.5 → 40.1.7

package/index.ts

@@ -12,6 +12,7 @@ export const getSearch = () => import("./src/components/pages/SearchPage.vue");
 export const getHome = () => import("./src/components/pages/HomePage.vue");
 export const getCategory = () => import("./src/components/pages/CategoryPage.vue");
 export const getRubrique = () => import("./src/components/pages/RubriquePage.vue");
+export const getTag = () => import("./src/components/pages/TagPage.vue");
 export const getError403Page = () => import("./src/components/pages/Error403Page.vue");
 export const getRadio = () => import("./src/components/pages/RadioPage.vue");
 export const getVideo = () => import("./src/components/pages/VideoPage.vue");

package/package.json

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

package/plateform.conf

@@ -1 +1 @@
-preprod.saooti.org
+dev2.saooti.org

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

@@ -44,3 +44,31 @@ export default defineComponent({
   },
 });
 </script>
+<style lang="scss">
+.octopus-app{
+  /** Comma list style */
+  .comma {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0.5rem 0;
+
+    > a{
+      text-transform: capitalize;
+    }
+
+    > a, .comma-element {
+      &::after {
+        content: ", ";
+        margin-right: 0.2rem;
+      }
+
+      &:last-child {
+        &::after {
+          content: "";
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -91,6 +91,7 @@ export default defineComponent({
     noRubriquageId: { default: () => [], type: Array as () => Array<number> },
     justSizeChosen: { default: false, type: Boolean },
     withVideo: { default: undefined, type: Boolean },
+    includeTag:{ default: () => [], type: Array as () => Array<string> },
   },
   emits: ["fetch", "emptyList"],
 
@@ -129,7 +130,7 @@ export default defineComponent({
       return `${this.organisation}|${this.emissionId}|${this.sortCriteria}|${this.sort}
       ${this.iabId}|${this.participantId}|${this.query}|${this.monetisable}|${this.popularSort}|
       ${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.includeHidden}|${this.noRubriquageId}|${this.validity}|
-      ${this.withVideo}`;
+      ${this.withVideo}|${this.includeTag}`;
     },
     organisation(): Array<string> {
       if (this.organisationId) {
@@ -214,6 +215,7 @@ export default defineComponent({
             : undefined, */
         includeStatus: ["READY", "PROCESSING"],
         withVideo: this.withVideo,
+        includeTag: this.includeTag.length ? this.includeTag : undefined,
       };
       try {
         const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({

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

@@ -117,6 +117,7 @@
     <TagList
       v-if="undefined !== podcast.tags && 0 !== podcast.tags.length"
       :tag-list="podcast.tags"
+      :orga-id="podcast.organisation.id"
       :podcast-annotations="podcast.annotations"
     />
     <PodcastRubriqueList

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

@@ -1,16 +1,20 @@
 <template>
   <div
     v-if="undefined !== tagList && 0 !== tagList.length"
-    class="tag-list-component d-flex align-items-center flex-wrap comma mb-3 small-text"
+    class="tag-list-component d-flex align-items-center flex-wrap mb-3 small-text"
   >
     <div class="fw-bold me-3">
       {{ $t("Podcast tags") + " : " }}
     </div>
-    <div
+    <router-link
       v-for="(tag, index) in tagList"
       :key="tag"
-      class="d-flex align-items-center comma-element"
-      :class="ouestFranceMainTag === tag ? 'main-of-tag' : ''"
+      class="d-flex align-items-center border p-1 m-1 text-dark"
+      :to="{
+        name: 'tag',
+        params: { tag: tag},
+        query: organisationQuery
+      }"
     >
       <template v-if="!isOuestFranceTag(tag)">{{ tag }}</template>
       <template v-else>
@@ -35,7 +39,7 @@
           :is-fixed="true"
         />
       </template>
-    </div>
+    </router-link>
   </div>
 </template>
 
@@ -45,6 +49,8 @@ const ClassicPopover = defineAsyncComponent(
   () => import("../../misc/ClassicPopover.vue"),
 );
 import {useTagOf} from "../../composable/useTagOf";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
 export default defineComponent({
   name: "TagList",
   components: {
@@ -58,12 +64,20 @@ export default defineComponent({
         [key: string]: string | number | boolean | undefined;
       },
     },
+    orgaId: {default: "", type: String,},
   },
   setup(){
     const { isOuestFranceTag, formateOfTag } = useTagOf();
     return { isOuestFranceTag, formateOfTag }
   },
   computed: {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    organisationQuery(){
+      if(this.filterOrgaId){
+        return undefined;
+      }
+      return { o: this.orgaId};
+    },
     ouestFranceMainTag(): string | undefined {
       if (this.podcastAnnotations?.["mainOfTag"]) {
         for (const key in this.podcastAnnotations) {

package/src/components/pages/TagPage.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="page-box tag-page">
+    <h1>
+      {{ $t("Search for keyword", {tag:titleDisplay})}}
+      <img
+        v-if="isOf"
+        width="30"
+        height="30"
+        class="ouest-france-logo-tag-page"
+        role="presentation"
+        alt=""
+        src="/img/ouest_france_logo.svg" 
+      />
+    </h1>
+    <ProductorSearch
+      v-model:organisation-id="organisationId"
+      v-model:search-pattern="searchPattern"
+    />
+    <PodcastList
+      :first="paginateFirst"
+      :size="ps"
+      :include-tag="[tag]"
+      :organisation-id="orgaArray"
+      :query="searchMinSize"
+      :sort-criteria="sortOrder ?? 'DATE'"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useSeoTitleUrl } from "../composable/route/useSeoTitleUrl";
+import { useSimplePageParam } from "../composable/route/useSimplePageParam";
+import { useTagOf } from "../composable/useTagOf";
+import PodcastList from "../display/podcasts/PodcastList.vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
+const ProductorSearch = defineAsyncComponent(
+  () => import("../display/filter/ProductorSearch.vue"),
+);
+
+const props = defineProps({
+  pr: { default: 0, type: Number },
+  ps: { default: 30, type: Number },
+  tag: { default: undefined, type: String },
+  routeOrga: { default: undefined, type: String },
+  routeQuery: { default: "", type: String },
+});
+
+const {
+  searchPattern,
+  organisationId,
+  searchMinSize,
+  paginateFirst,
+} = useSimplePageParam(props);
+
+const { isOuestFranceTag, formateOfTag } = useTagOf();
+
+const { updatePathParams } = useSeoTitleUrl();
+
+const titleDisplay = ref("");
+const isOf = ref(false);
+const {t} = useI18n();
+
+const orgaArray = computed(() =>organisationId.value ? [organisationId.value] : []);
+const sortOrder = computed(() =>{
+  if(searchMinSize.value.length){
+    return "SCORE";
+  }
+  return undefined;
+});
+
+
+watch(()=>props.tag, async () => {
+  const tagString = props.tag?? "";
+  isOf.value = isOuestFranceTag(tagString);
+  titleDisplay.value= isOf.value ?  formateOfTag(tagString) :tagString;
+  updatePathParams(t("Search for keyword", {tag:titleDisplay.value}));
+}, {immediate: true});
+
+
+</script>
+<style lang="scss">
+.octopus-app .tag-page{
+  .ouest-france-logo-tag-page{
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+    vertical-align: center;
+    @media (width <= 500px) {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+</style>

package/src/locale/de.ts

@@ -411,4 +411,5 @@ export default {
   "Font size":"Schriftgröße",
   "Preview":"Vorschau",
   "Save":"Speichern",
+  "Search for keyword": "Suche nach Schlüsselwort: {tag}",
 }

package/src/locale/en.ts

@@ -414,4 +414,5 @@ export default {
   "Font size":"Font size",
   "Preview":"Preview",
   "Save":"Save",
+  "Search for keyword": "Search for keyword: {tag}",
 };

package/src/locale/es.ts

@@ -412,4 +412,5 @@ export default {
   "Font size":"Tamaño de fuente",
   "Preview":"Avance",
   "Save":"Ahorrar",
+  "Search for keyword": "Buscar palabra clave: {etiqueta}",
 }

package/src/locale/fr.ts

@@ -421,4 +421,5 @@ export default {
   "Font size":"Taille de la police",
   "Preview":"Aperçu",
   "Save":"Sauvegarder",
+  "Search for keyword": "Recherche pour le mot-clé: {tag}",
 };

package/src/locale/it.ts

@@ -408,4 +408,5 @@ export default{
   "Font size":"Dimensione del carattere",
   "Preview":"Anteprima",
   "Save":"Salva",
+  "Search for keyword": "Cerca parola chiave: {tag}",
 };

package/src/locale/sl.ts

@@ -403,4 +403,5 @@ export default {
   "Font size":"Velikost pisave",
   "Preview":"Predogled",
   "Save":"Shrani",
+  "Search for keyword": "Iskanje ključne besede: {tag}",
 }

package/src/router/router.ts

@@ -24,6 +24,7 @@ const ParticipantPage = () => import("@/components/pages/ParticipantPage.vue");
 const SearchPage = () => import("@/components/pages/SearchPage.vue");
 const CategoryPage = () => import("@/components/pages/CategoryPage.vue");
 const RubriquePage = () => import("@/components/pages/RubriquePage.vue");
+const TagPage = () => import("@/components/pages/TagPage.vue");
 const LivesPage = () => import("@/components/pages/LivesPage.vue");
 const PlaylistPage = () => import("@/components/pages/PlaylistPage.vue");
 const PlaylistsPage = () => import("@/components/pages/PlaylistsPage.vue");
@@ -206,6 +207,21 @@ const routes: Array<RouteRecordRaw> = [
       title: "",
     }
   },
+  {
+    path: "/main/pub/tag/:tag([^?]*)?:productor?",
+    name: "tag",
+    component: TagPage,
+    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,
+      tag: route.params.tag,
+      routeOrga:route.query.o,
+      routeQuery: route.query.q ?? "",
+    }),
+    meta:{
+      title: "",
+    }
+  },
   {
     path: "/main/pub/lives/:productor?",
     name: "lives",

package/src/style/general.scss

@@ -210,31 +210,6 @@ main, #app{
   .hid{
     display: none !important;
   }
-  
-  /** Comma list style */
-  .comma {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin: 0.5rem 0;
-
-    > a{
-      text-transform: capitalize;
-    }
-
-    > a, .comma-element {
-      &::after {
-        content: ", ";
-        margin-right: 0.2rem;
-      }
-
-      &:last-child {
-        &::after {
-          content: "";
-        }
-      }
-    }
-  }
 
    /* Line clamp */
   .basic-line-clamp{