@saooti/octopus-sdk 30.0.7 → 30.0.8

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

@@ -30,25 +30,13 @@
     >
       {{ $t('Number podcasts', { nb: podcasts.length }) + $t('sort by score') }}
     </div>
-    <div
+    <ClassicSearch
       v-if="notEmptyPlaylist"
-      class="d-flex position-relative width-600 align-self-baseline"
-    >
-      <label
-        for="search"
-        class="d-inline"
-        :aria-label="$t('Search')"
-      />
-      <input
-        id="search"
-        v-model="searchPattern"
-        :placeholder="$t('Search')"
-        class="filter-search-input input-no-outline flex-grow"
-      >
-      <div
-        class="saooti-search-bounty filter-list-search-icon search-icon-container"
-      />
-    </div>
+      v-model:textInit="searchPattern"
+      class="width-600 align-self-baseline"
+      id-checkbox="podcast-list-search"
+      :label="$t('Search')"
+    />
     <ul
       v-show="loaded"
       class="podcast-list"
@@ -78,7 +66,7 @@
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import { state } from '../../../store/paramStore';
-
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import { Podcast } from '@/store/class/general/podcast';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
@@ -87,6 +75,7 @@ export default defineComponent({
 
   components: {
     PodcastItem,
+    ClassicSearch
   },
 
   props: {

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

@@ -9,29 +9,19 @@
     <div class="d-flex align-items-center flex-wrap">
       <div
         v-if="categoryFilter"
-        class="d-flex align-items-center flex-grow categories-filter"
+        class="d-flex align-items-center flex-grow-1 categories-filter"
       >
         <CategoryChooser
           :defaultanswer="$t('No category filter')"
           @selected="onCategorySelected"
         />
       </div>
-      <div class="d-flex position-relative small-flex-grow">
-        <label
-          for="search"
-          class="d-inline"
-          :aria-label="$t('Search')"
-        />
-        <input
-          id="search"
-          v-model="searchPattern"
-          :placeholder="$t('Search')"
-          class="filter-search-input input-no-outline flex-grow"
-        >
-        <div
-          class="saooti-search-bounty filter-list-search-icon search-icon-container"
-        />
-      </div>
+      <ClassicSearch
+        v-model:textInit="searchPattern"
+        class="small-flex-grow"
+        id-checkbox="podcast-filter-search"
+        :label="$t('Search')"
+      />
     </div>
     <PodcastList
       :first="first"
@@ -49,7 +39,7 @@
 </template>
 
 <script lang="ts">
-
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import PodcastList from './PodcastList.vue';
 import { Category } from '@/store/class/general/category';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -59,6 +49,7 @@ export default defineComponent({
   components: {
     CategoryChooser,
     PodcastList,
+    ClassicSearch
   },
   props: {
     participantId: { default: undefined, type: Number},

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="podcast"
-    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink float-start"
+    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
     :style="{ 'background-image': 'url(\'' + podcast.imageUrl + '\')' }"
   >
     <template v-if="isPodcastmaker">

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

@@ -62,7 +62,7 @@
       <PodcastItem
         v-for="p in podcasts"
         :key="p.podcastId"
-        class="flex-shrink item-phone-margin"
+        class="flex-shrink-0 item-phone-margin"
         :podcast="p"
         :class="[alignLeft ? 'me-3' : '']"
       />

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

@@ -54,7 +54,7 @@
           params: { podcastId: podcast.podcastId },
           query: { productor: $store.state.filter.organisationId },
         }"
-        class="text-dark d-flex flex-column flex-grow"
+        class="text-dark d-flex flex-column flex-grow-1"
       >
         <div class="title-podcast-item">
           {{ title }}

package/src/components/display/sharing/PlayerParameters.vue

@@ -28,7 +28,7 @@
         <div class="accordion-body">
           <div
             v-if="choseNumberEpisode"
-            class="d-flex flex-column flex-grow"
+            class="d-flex flex-column flex-grow-1"
           >
             <div
               v-if="displayChoiceAllEpisodes"
@@ -41,7 +41,7 @@
                 name="episodeNumbers"
                 value="all"
               >
-              <span class="flex-shrink">{{ $t('Show every episode') }}</span>
+              <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
             </div>
             <div
               class="d-flex align-items-center flex-wrap"
@@ -55,7 +55,7 @@
                 name="episodeNumbers"
                 value="number"
               >
-              <span class="flex-shrink">{{ $t('Show') }}</span>
+              <span class="flex-shrink-0">{{ $t('Show') }}</span>
               <input
                 id="number-input"
                 v-model="iFrameNumber"
@@ -69,53 +69,28 @@
                 class="d-inline"
                 :aria-label="$t('Number of player podcasts')"
               />
-              <span class="flex-shrink">{{ $t('Last podcasts') }}</span>
-            </div>
-            <div>
-              <input
-                id="proceedCheck"
-                v-model="proceedReading"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="proceedCheck"
-              >{{
-                $t('Proceed reading')
-              }}</label>
-            </div>
-            <div>
-              <input
-                id="isVisibleCheckbox"
-                v-model="isVisibleTemp"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label me-2"
-                for="isVisibleCheckbox"
-              >{{ $t('Podcasts still available') }}</label>
+              <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
             </div>
+            <ClassicCheckbox
+              v-model:textInit="proceedReading"
+              id-checkbox="proceed-reading-checkbox"
+              :label="$t('Proceed reading')"
+            />
+            <ClassicCheckbox
+              v-model:textInit="isVisibleTemp"
+              id-checkbox="is-visible-checkbox"
+              :label="$t('Podcasts still available')"
+            />
           </div>
           <div
             v-else
-            class="d-flex flex-column flex-grow"
+            class="d-flex flex-column flex-grow-1"
           >
-            <div>
-              <input
-                id="proceedCheck"
-                v-model="displayArticle"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="proceedCheck"
-              >{{
-                $t('Display associated article')
-              }}</label>
-            </div>
+            <ClassicCheckbox
+              v-model:textInit="displayArticle"
+              id-checkbox="display-article-checkbox"
+              :label="$t('Display associated article')"
+            />
           </div>
         </div>
       </div>
@@ -124,8 +99,12 @@
 </template>
 
 <script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
+  components:{
+    ClassicCheckbox,
+  },
   props: {
     isVisible: { default: false, type: Boolean},
     choseNumberEpisode: {default: false, type: Boolean},

package/src/components/display/sharing/SharePlayer.vue

@@ -40,23 +40,12 @@
             v-model:color="color"
             v-model:theme="theme"
           />
-          <div
+          <ClassicCheckbox
             v-if="isPodcastNotVisible || playlist"
-            class="d-flex align-items-center flex-wrap"
-          >
-            <div>
-              <input
-                id="isVisibleCheckbox"
-                v-model="isVisible"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label me-2"
-                for="isVisibleCheckbox"
-              >{{ titleStillAvailable }}</label>
-            </div>
-          </div>
+            v-model:textInit="isVisible"
+            id-checkbox="is-visible-checkbox"
+            :label="titleStillAvailable"
+          />
         </div>
         <PlayerParameters
           v-if="isPlayerParameter"
@@ -99,12 +88,14 @@ const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/Sha
 const PlayerParameters = defineAsyncComponent(() => import('./PlayerParameters.vue'));
 const SharePlayerTypes = defineAsyncComponent(() => import('./SharePlayerTypes.vue'));
 const SharePlayerColors = defineAsyncComponent(() => import('./SharePlayerColors.vue'));
+const ClassicCheckbox = defineAsyncComponent(() => import('../../form/ClassicCheckbox.vue'));
 export default defineComponent({
   components: {
     ShareModalPlayer,
     SharePlayerColors,
     PlayerParameters,
-    SharePlayerTypes
+    SharePlayerTypes,
+    ClassicCheckbox
   },
 
   props: {

package/src/components/display/sharing/SharePlayerColors.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="d-flex justify-content-around mt-3 flex-grow w-100">
-    <div class="d-flex flex-column align-items-center flex-shrink me-3">
+  <div class="d-flex justify-content-around mt-3 flex-grow-1 w-100">
+    <div class="d-flex flex-column align-items-center flex-shrink-0 me-3">
       <div class="fw-600">
         {{ $t('Choose color') }}
       </div>

package/src/components/display/sharing/SubscribeButtons.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="module-box flex-no-grow">
+  <div class="module-box flex-grow-0">
     <div class="d-flex align-items-center mb-3">
       <h3 class="mb-0 share-button-title">
         {{ $t('Subscribe emission') }}

package/src/components/form/ClassicCheckbox.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="form-check"
+    :class="isSwitch?'form-switch':''"
+  >
+    <input
+      :id="idCheckbox"
+      v-model="textValue"
+      type="checkbox"
+      class="form-check-input"
+      :disabled="isDisabled"
+      @click="emitClickAction"
+    >
+    <label
+      class="form-check-label"
+      :for="idCheckbox"
+    >{{ label }}</label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicCheckbox',
+
+  props: {
+    idCheckbox: { default: '', type: String },
+    label: { default: '', type: String },
+    isDisabled: { default: false, type: Boolean },
+    textInit: { default: false, type: Boolean },
+    isSwitch:{default:false, type:Boolean}
+  },
+  emits: ['update:textInit', 'clickAction'],
+
+  data() {
+    return {
+      textValue: false as boolean,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	},
+  methods:{
+    emitClickAction():void{
+      this.$emit('clickAction');
+    }
+  }
+});
+</script>

package/src/components/form/ClassicLoading.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    v-if="loadingText"
+    class="d-flex justify-content-center"
+  >
+    <div class="spinner-border me-3" />
+    <h3 class="mt-2">
+      {{ loadingText }}
+    </h3>
+  </div>
+  <div
+    v-else-if="errorText"
+    class="text-center"
+  >
+    <h3>{{ errorText }}</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "ClassicLoading",
+  props: {
+    loadingText: { default: undefined, type: String},
+    errorText: { default: undefined, type: String},
+  }
+})
+</script>

package/src/components/form/ClassicRadio.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="d-flex flex-column">
+    <div
+      v-for="option in options"
+      :key="option.title"
+      class="form-check"
+    >
+      <input
+        :id="idRadio + option.value"
+        v-model="textValue"
+        class="form-check-input"
+        type="radio"
+        :name="idRadio"
+        :value="option.value"
+        :disabled="isDisabled"
+      >
+      <label
+        class="form-check-label"
+        :for="idRadio + option.value"
+      >{{
+        option.title
+      }}</label>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicRadio',
+
+  props: {
+    idRadio: { default: '', type: String },
+    isDisabled: { default: false, type: Boolean },
+    options: { default: ()=>[], type: Array as () => Array<{title: string, value: string|undefined}> },
+    textInit: { default: undefined, type: String },
+  },
+  emits: ['update:textInit'],
+
+  data() {
+    return {
+      textValue: undefined as string|undefined,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	}
+});
+</script>

package/src/components/form/ClassicSearch.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="position-relative champs-searchPage static-height">
+    <input
+      :id="idSearch"
+      ref="search"
+      v-model="textValue"
+      type="text"
+      class="search-input w-100 p-2 input-no-outline"
+      :placeholder="label"
+      :autofocus="autofocus"
+    >
+    <label
+      :for="idSearch"
+      :aria-label="label"
+    />
+    <div
+      v-if="!textValue"
+      class="saooti-search-bounty search-icon-container"
+    />
+    <div
+      v-else
+      class="saooti-cross search-icon-container c-hand"
+      @click="textValue = ''"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'ClassicSearch',
+ props: {
+    idSearch: { default: '', type: String },
+    label: { default: '', type: String },
+    textInit: { default: '', type: String },
+    autofocus: { default: false, type: Boolean },
+  },
+
+  emits: ['update:textInit'],
+
+  data() {
+    return {
+      textValue: '' as string,
+    };
+  },
+  watch: {
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+  mounted(){
+		this.textValue = this.textInit;
+	}
+});
+</script>
+<style lang="scss" scoped>
+.champs-searchPage input {
+  border: 2px solid #dee2e6;
+  border-radius: 10px;
+  margin: 0 !important;
+}
+.saooti-search-bounty,
+.saooti-cross {
+  font-size: 1rem;
+}
+.search-icon-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  margin: 1rem;
+}
+</style>

package/src/components/misc/ErrorMessage.vue

@@ -4,7 +4,7 @@
     class="d-flex"
   >
     <div
-      class="d-flex align-items-center bg-error-message p-2 rounded mt-1 mb-1"
+      class="d-flex align-items-center bg-error-message p-2 rounded my-1"
     >
       <img
         src="/img/caution.png"