@saooti/octopus-sdk 30.0.4 → 30.0.8

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

@@ -43,20 +43,12 @@
             {{ $t('Emission with episode published :') }}
           </div>
           <div class="d-flex align-items-center">
-            <div class="flex-shrink">
-              <input
-                id="search-from-checkbox"
-                v-model="isFrom"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="search-from-checkbox"
-              >{{
-                $t('From the :')
-              }}</label>
-            </div>
+            <ClassicCheckbox
+              v-model:textInit="isFrom"
+              class="flex-shrink-0"
+              id-checkbox="search-from-checkbox"
+              :label="$t('From the :')"
+            />
             <DatePicker
               v-model="fromDate"
               class="ps-3 pe-3"
@@ -75,20 +67,12 @@
             </DatePicker>
           </div>
           <div class="d-flex align-items-center">
-            <div class="flex-shrink">
-              <input
-                id="search-to-checkbox"
-                v-model="isTo"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="search-to-checkbox"
-              >{{
-                $t('To the :')
-              }}</label>
-            </div>
+            <ClassicCheckbox
+              v-model:textInit="isTo"
+              class="flex-shrink-0"
+              id-checkbox="search-to-checkbox"
+              :label="$t('To the :')"
+            />
             <DatePicker
               v-model="toDate"
               class="ps-3"
@@ -111,89 +95,39 @@
           v-if="organisation && organisationRight && !isPodcastmaker"
           class="d-flex flex-column mt-3"
         >
-          <div class="flex-shrink">
-            <input
-              id="search-future-checkbox"
-              v-model="isNotVisible"
-              type="checkbox"
-              class="form-check-input"
-              :disabled="isCheckboxNotValidate && isNotValidate"
-            >
-            <label
-              class="form-check-label"
-              for="search-future-checkbox"
-            >{{
-              textNotVisible
-            }}</label>
-          </div>
+          <ClassicCheckbox
+            v-model:textInit="isNotVisible"
+            class="flex-shrink-0"
+            id-checkbox="search-future-checkbox"
+            :label="textNotVisible"
+            :is-disabled="isCheckboxNotValidate && isNotValidate"
+          />
         </div>
         <div
           v-if="isCheckboxNotValidate"
           class="d-flex flex-column mt-3"
         >
-          <div class="flex-shrink">
-            <input
-              id="search-not-validate-checkbox"
-              v-model="isNotValidate"
-              type="checkbox"
-              class="form-check-input"
-            >
-            <label
-              class="form-check-label"
-              for="search-not-validate-checkbox"
-            >{{ textNotValidate }}</label>
-          </div>
+          <ClassicCheckbox
+            v-model:textInit="isNotValidate"
+            class="flex-shrink-0"
+            id-checkbox="search-not-validate-checkbox"
+            :label="textNotValidate"
+          />
         </div>
       </div>
       <div class="d-flex flex-column">
         <div class="primary-color mb-2 padding-left-custom-radio">
           {{ $t('Sort') }}
         </div>
-        <div
-          v-if="isSearchBar"
-          class="form-check"
-        >
-          <input
-            id="radio_score"
-            v-model="sort"
-            class="form-check-input"
-            type="radio"
-            name="sortRadio"
-            value="SCORE"
-          >
-          <label
-            class="form-check-label"
-            for="radio_score"
-          >{{ $t('Sort score') }}</label>
-        </div>
-        <div class="form-check">
-          <input
-            id="radio_podcast"
-            v-model="sort"
-            class="form-check-input"
-            type="radio"
-            name="sortRadio"
-            :value="isEmission?'LAST_PODCAST_DESC':'DATE'"
-          >
-          <label
-            class="form-check-label"
-            for="radio_podcast"
-          >{{ $t('Sort last') }}</label>
-        </div>
-        <div class="form-check">
-          <input
-            id="radio_name"
-            v-model="sort"
-            class="form-check-input"
-            type="radio"
-            name="sortRadio"
-            value="NAME"
-          >
-          <label
-            class="form-check-label"
-            for="radio_name"
-          >{{ $t('Sort name') }}</label>
-        </div>
+        <ClassicRadio
+          v-model:textInit="sort"
+          id-select="sort-radio"
+          :options="isSearchBar? [{title:$t('Sort score'), value:'SCORE'},
+                                  {title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
+                                  {title:$t('Sort name'), value:'NAME'}]:
+            [{title:$t('Sort last'), value:isEmission?'LAST_PODCAST_DESC':'DATE'},
+             {title:$t('Sort name'), value:'NAME'}]"
+        />
       </div>
     </div>
   </div>
@@ -204,7 +138,9 @@ import { state } from '../../../store/paramStore';
 import moment from 'moment';
 import CategoryFilter from './CategoryFilter.vue';
 import RubriqueFilter from './RubriqueFilter.vue';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import ClassicRadio from '../../form/ClassicRadio.vue';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { DatePicker } from 'v-calendar';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const MonetizableFilter = defineAsyncComponent(() => import('./MonetizableFilter.vue'));
@@ -213,7 +149,9 @@ export default defineComponent({
     MonetizableFilter,
     DatePicker,
     CategoryFilter,
-    RubriqueFilter
+    RubriqueFilter,
+    ClassicCheckbox,
+    ClassicRadio
   },
   props: {
     organisationId: { default: undefined, type: String},
@@ -436,10 +374,6 @@ export default defineComponent({
       }
     }
     padding: 1rem;
-    .basic-select {
-      width: 100%;
-      margin: 0 !important;
-    }
 
     label.wrap {
       width: 100%;

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

@@ -1,17 +1,11 @@
 <template>
   <div class="d-flex mt-3 align-items-center">
-    <div class="flex-shrink me-2">
-      <input
-        id="search-category-checkbox"
-        v-model="isCategory"
-        type="checkbox"
-        class="form-check-input"
-      >
-      <label
-        class="form-check-label"
-        for="search-category-checkbox"
-      >{{ $t('By category') }}</label>
-    </div>
+    <ClassicCheckbox
+      v-model:textInit="isCategory"
+      class="flex-shrink-0 me-2"
+      id-checkbox="search-category-checkbox"
+      :label="$t('By category')"
+    />
     <CategoryChooser
       v-model:categorySelected="iabId"
       width="auto"
@@ -21,12 +15,14 @@
 </template>
 
 <script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import CategoryChooser from '../categories/CategoryChooser.vue';
-import { Category } from '@/store/class/category';
+import { Category } from '@/store/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    CategoryChooser
+    CategoryChooser,
+    ClassicCheckbox
   },
   emits: ['updateCategory'],
   data() {

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

@@ -8,7 +8,7 @@
       <select
         ref="select"
         v-model="monetization"
-        class="basic-select ms-2 mb-0 border c-hand"
+        class="ms-2 mb-0 c-hand"
         @change="onChange"
       >
         <option

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

@@ -10,22 +10,13 @@
         :all="true"
         @selected="onOrganisationSelected"
       />
-      <div
+      <ClassicCheckbox
         v-if="!!organisationId"
+        v-model:textInit="keepOrganisation"
         class="m-3"
-      >
-        <input
-          id="orgaCheck"
-          v-model="keepOrganisation"
-          type="checkbox"
-          class="form-check-input"
-          @click="onKeepOrganisation"
-        >
-        <label
-          class="form-check-label"
-          for="orgaCheck"
-        />
-      </div>
+        id-checkbox="organisation-checkbox"
+        @clickAction="onKeepOrganisation"
+      />
       <div
         v-if="showBubble"
         class="filter-speech-bubble"
@@ -37,36 +28,29 @@
         }}
       </div>
     </div>
-    <div class="d-flex align-items-center flex-grow">
-      <label
-        for="search"
-        class="d-inline"
-        :aria-label="$t('Search')"
-      />
-      <input
-        id="search"
-        ref="search"
-        class="filter-search-input input-no-outline"
-        :placeholder="searchText"
-        :value="searchPattern"
-        :readonly="notInitFocus"
-        @input="
-          event => $emit('updateSearchPattern', event.target.value)
-        "
-      >
-    </div>
+    <ClassicSearch
+      v-model:textInit="queryIntern"
+      class="d-flex align-items-center flex-grow-1"
+      :autofocus="true"
+      id-checkbox="productor-search-input"
+      :label="searchText"
+    />
   </div>
 </template>
 
 <script lang="ts">
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import { state } from '../../../store/paramStore';
 import { orgaFilter } from '../../mixins/organisationFilter';
-import { Organisation } from '@/store/class/organisation';
+import { Organisation } from '@/store/class/general/organisation';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const OrganisationChooser = defineAsyncComponent(() => import('../organisation/OrganisationChooser.vue'));
+const ClassicCheckbox = defineAsyncComponent(() => import('../../form/ClassicCheckbox.vue'));
 export default defineComponent({
   components: {
     OrganisationChooser,
+    ClassicSearch,
+    ClassicCheckbox
   },
   mixins:[orgaFilter],
 
@@ -82,7 +66,7 @@ export default defineComponent({
       keepOrganisation: false as boolean,
       showBubble: false as boolean,
       imgUrl: '' as string,
-      notInitFocus: true as boolean
+      queryIntern: '' as string,
     };
   },
  
@@ -102,6 +86,9 @@ export default defineComponent({
     },
   },
   watch: {
+    queryIntern(): void {
+      this.$emit('updateSearchPattern', this.queryIntern);
+    },
     filterOrga(): void {
       if (this.filterOrga) {
         this.keepOrganisation = true;
@@ -117,12 +104,6 @@ export default defineComponent({
       this.keepOrganisation = true;
     }
   },
-  mounted() {
-    if (this.$refs.search) {
-      (this.$refs.search as HTMLElement).focus();
-      this.notInitFocus = false;
-    }
-  },
   methods: {
     onOrganisationSelected(organisation: Organisation): void {
       if (this.$route.query.productor) {

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

@@ -3,7 +3,7 @@
     <label class="wrap">
       <select
         v-model="rubriquageId"
-        class="basic-select ms-2 mb-0 border c-hand"
+        class="ms-2 mb-0 c-hand"
         @change="onRubriquageSelected"
       >
         <option
@@ -17,7 +17,7 @@
       />
     </label>
     <template v-if="rubriquageId">
-      <div class="ms-3 flex-shrink">
+      <div class="ms-3 flex-shrink-0">
         {{ $t('By rubric') }}
       </div>
       <RubriqueChooser
@@ -46,8 +46,8 @@
 </template>
 
 <script lang="ts">
-import { Rubriquage } from '@/store/class/rubriquage';
-import { Rubrique } from '@/store/class/rubrique';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const RubriqueChooser = defineAsyncComponent(() => import('../rubriques/RubriqueChooser.vue'));
 export default defineComponent({

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

@@ -3,18 +3,12 @@
     v-if="organisationId && rubriquageData"
     class="d-flex mt-3 align-items-center"
   >
-    <div class="flex-shrink">
-      <input
-        id="search-rubriquage-checkbox"
-        v-model="isRubriquage"
-        type="checkbox"
-        class="form-check-input"
-      >
-      <label
-        class="form-check-label"
-        for="search-rubriquage-checkbox"
-      >{{ $t('By topic') }}</label>
-    </div>
+    <ClassicCheckbox
+      v-model:textInit="isRubriquage"
+      class="flex-shrink-0"
+      id-checkbox="search-rubriquage-checkbox"
+      :label="$t('By topic')"
+    />
     <div
       v-if="isRubriquage"
       class="d-flex flex-column mb-2"
@@ -44,13 +38,15 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
-import { Rubriquage } from '@/store/class/rubriquage';
-import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import { Rubriquage } from '@/store/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const RubriqueChoice = defineAsyncComponent(() => import('./RubriqueChoice.vue'));
 export default defineComponent({
   components: {
     RubriqueChoice,
+    ClassicCheckbox
   },
   props: {
     organisationId: { default: undefined, type: String},

package/src/components/display/live/LiveHorizontalList.vue

@@ -34,7 +34,7 @@ import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import { state } from '../../../store/paramStore';
 
-import { Podcast } from '@/store/class/podcast';
+import { Podcast } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LiveHorizontalList',

package/src/components/display/live/LiveItem.vue

@@ -131,8 +131,8 @@ import moment from 'moment';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
 import { displayMethods } from '../../mixins/functions';
-import { Podcast } from '@/store/class/podcast';
-import { Participant } from '@/store/class/participant';
+import { Podcast } from '@/store/class/general/podcast';
+import { Participant } from '@/store/class/general/participant';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));

package/src/components/display/live/LiveList.vue

@@ -116,7 +116,7 @@ import LiveItem from './LiveItem.vue';
 import octopusApi from '@saooti/octopus-api';
 import moment from 'moment';
 import { state } from '../../../store/paramStore';
-import { Conference } from '@/store/class/conference';
+import { Conference } from '@/store/class/conference/conference';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LiveList',

package/src/components/display/organisation/OrganisationChooser.vue

@@ -119,7 +119,7 @@ import { selenium } from '../../mixins/functions';
 import VueMultiselect from 'vue-multiselect';
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../../store/paramStore';
-import { Organisation } from '@/store/class/organisation';
+import { Organisation } from '@/store/class/general/organisation';
 
 const ELEMENTS_COUNT = 50;
 const DEFAULT_ORGANISATION_ID = "";

package/src/components/display/organisation/OrganisationChooserLight.vue

@@ -7,7 +7,7 @@
     <select
       :id="'organisation_chooser_light' + page"
       v-model="actual"
-      class="basic-select mb-0 c-hand"
+      class="mb-0 c-hand border-0"
       @change="onOrganisationSelected"
     >
       <option :value="organisation.id">
@@ -28,7 +28,7 @@
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
 
-import { Organisation } from '@/store/class/organisation';
+import { Organisation } from '@/store/class/general/organisation';
 import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
@@ -83,4 +83,10 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+</style>

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

@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
-import { Participant } from '@/store/class/participant';
+import { Participant } from '@/store/class/general/participant';
 import { state } from '../../../store/paramStore';
 import { displayMethods } from '../../mixins/functions';
 import { defineComponent } from 'vue'

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

@@ -43,7 +43,7 @@
 import octopusApi from '@saooti/octopus-api';
 import ParticipantItem from './ParticipantItem.vue';
 
-import { Participant } from '@/store/class/participant';
+import { Participant } from '@/store/class/general/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ParticipantList',

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

@@ -49,7 +49,7 @@
           <!-- eslint-enable -->
         </div>
       </router-link>
-      <div class="flex-grow" />
+      <div class="flex-grow-1" />
       <router-link
         v-if="!isPodcastmaker && playlist.organisation"
         :to="{
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { Playlist } from '@/store/class/playlist';
+import { Playlist } from '@/store/class/general/playlist';
 import { state } from '../../../store/paramStore';
 import { displayMethods } from '../../mixins/functions';
 import { defineComponent } from 'vue'

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

@@ -43,7 +43,7 @@ import octopusApi from '@saooti/octopus-api';
 import PlaylistItem from './PlaylistItem.vue';
 import { state } from '../../../store/paramStore';
 
-import { Playlist } from '@/store/class/playlist';
+import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PlaylistList',

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,15 +66,16 @@
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import { state } from '../../../store/paramStore';
-
-import { Podcast } from '@/store/class/podcast';
-import { Playlist } from '@/store/class/playlist';
+import ClassicSearch from '../../form/ClassicSearch.vue';
+import { Podcast } from '@/store/class/general/podcast';
+import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastList',
 
   components: {
     PodcastItem,
+    ClassicSearch
   },
 
   props: {

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

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { Participant } from '@/store/class/participant';
+import { Participant } from '@/store/class/general/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'AnimatorsItem',

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

@@ -6,6 +6,7 @@
     {{ title }}
     <span
       :id="idPopover"
+      tabindex="-1"
       class="saooti-help m-0"
       :aria-label="$t('Help')"
     />
@@ -54,7 +55,7 @@
 
 <script lang="ts">
 import Popover from '../../misc/Popover.vue';
-import { Participant } from '@/store/class/participant';
+import { Participant } from '@/store/class/general/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ParticipantDescription',