@saooti/octopus-sdk 30.0.7 → 30.0.11

package/src/components/pages/Podcasts.vue

@@ -6,17 +6,13 @@
         isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
       "
     >
-      <h1
-        v-if="undefined === titlePage"
-        class="flex-shrink"
-      >
-        {{ $t('All podcasts') }}
-      </h1>
-      <h1
-        v-else
-        class="flex-shrink"
-      >
-        {{ titlePage }}
+      <h1 class="flex-shrink-0">
+        <template v-if="undefined === titlePage">
+          {{ $t('All podcasts') }}
+        </template>
+        <template v-else>
+          {{ titlePage }}
+        </template>
       </h1>
       <EmissionChooser
         v-if="isEmissionChooser"
@@ -92,8 +88,6 @@ export default defineComponent({
   },
 
   props: {
-    firstRoute: { default: 0, type: Number},
-    sizeRoute: { default: 12, type: Number},
     productor: { default: undefined, type: String},
     isEducation: { default: false, type: Boolean},
   },
@@ -101,7 +95,7 @@ export default defineComponent({
   data() {
     return {
       first: 0 as number,
-      size: 49 as number,
+      size: 12 as number,
       searchPattern: '' as string,
       organisationId: undefined as string|undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -160,12 +154,6 @@ export default defineComponent({
   },
 
   created() {
-    if (this.firstRoute) {
-      this.first = this.firstRoute;
-    }
-    if (this.sizeRoute) {
-      this.size = this.sizeRoute;
-    }
     if (this.productor) {
       this.organisationId = this.productor;
     } else if (this.$store.state.filter.organisationId) {
@@ -247,6 +235,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/pages/Search.vue

@@ -1,43 +1,23 @@
 <template>
   <div class="page-box">
-    <h1 v-if="!hideBar">
-      {{ $t('Podcast search') }}
+    <h1>
+      <template v-if="!hideBar">
+        {{ $t('Podcast search') }}
+      </template>
+      <template v-else-if="!noResult">
+        {{ $t('Search results', { query: rawQuery }) }}
+      </template>
+      <template v-else>
+        {{ $t('Search - no results', { query: rawQuery }) }}
+      </template>
     </h1>
-    <h1 v-else-if="!noResult">
-      {{ $t('Search results', { query: rawQuery }) }}
-    </h1>
-    <h1 v-else>
-      {{ $t('Search - no results', { query: rawQuery }) }}
-    </h1>
-    <div
+    <ClassicSearch
       v-if="!hideBar"
-      class="position-relative champs-searchPage w-75"
-    >
-      <input
-        id="search"
-        ref="search"
-        v-model="rawQuery"
-        type="text"
-        class="search-input border-primary w-100 p-2 input-no-outline"
-        :placeholder="$t('Please type at least three characters')"
-        autofocus
-        @change="onSearchBegin"
-      >
-      <label
-        for="search"
-        class="d-inline"
-        :aria-label="$t('Search')"
-      />
-      <div
-        v-if="!rawQuery"
-        class="saooti-search-bounty search-icon-container"
-      />
-      <div
-        v-else
-        class="saooti-cross search-icon-container c-hand"
-        @click="rawQuery = ''"
-      />
-    </div>
+      v-model:textInit="rawQuery"
+      :autofocus="true"
+      id-checkbox="search-page-input"
+      :label="$t('Please type at least three characters')"
+    />
     <PodcastList
       v-if="!!query"
       :query="query"
@@ -50,6 +30,7 @@
 
 <script lang="ts">
 import { state } from '../../store/paramStore';
+import ClassicSearch from '../form/ClassicSearch.vue';
 import PodcastList from '../display/podcasts/PodcastList.vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
@@ -57,6 +38,7 @@ export default defineComponent({
 
   components: {
     PodcastList,
+    ClassicSearch
   },
 
   props: {
@@ -81,12 +63,13 @@ export default defineComponent({
   },
 
   watch: {
-    query: {
-        handler(search: string): void {
-          this.rawQuery = search;
-        },
-      deep: true,
-      immediate: true,
+    rawQuery(): void{
+      if (this.hideBar) {
+        this.noResult = false;
+      }
+    },
+    query(): void{
+      this.rawQuery = this.query;
     },
     queryRoute(): void{
       this.rawQuery = this.queryRoute;
@@ -97,9 +80,6 @@ export default defineComponent({
     if (this.queryRoute) {
       this.rawQuery = this.queryRoute;
     }
-    if (this.$refs.search) {
-      (this.$refs.search as HTMLElement).focus();
-    }
   },
   
   methods: {
@@ -108,24 +88,6 @@ export default defineComponent({
         this.noResult = true;
       }
     },
-    onSearchBegin(): void {
-      if (this.hideBar) {
-        this.noResult = false;
-      }
-    },
   },
 })
-</script>
-
-<style lang="scss">
-.champs-searchPage {
-  margin: 0 auto;
-  input {
-    margin: 1rem 0 !important;
-    padding-right: 40px !important;
-  }
-  .search-icon-container {
-    margin: 0 1em 0 0;
-  }
-}
-</style>
+</script>

package/src/sass/_variables.scss

@@ -26,7 +26,6 @@ $octopus-primary-color: #40a372;
 $octopus-secondary-color : #ddd;
 $octopus-light-secondary-color: #eee;
 $octopus-third-color: rgba(214,217,31,1);
-$octopus-alert-text: darkred;
 $octopus-primary-dark : #48a879;
 $primaryColorReallyTransparent : #a2f3c993;
 

package/src/store/class/general/media.ts

@@ -10,5 +10,5 @@ export interface Media {
   creation?: string;
   duration?: number;
   filePath?: string;
-  audioUrl: string;
+  audioUrl?: string;
 }