@saooti/octopus-sdk 30.0.7 → 30.0.8

package/README.md

@@ -504,4 +504,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.4 Remplacer la version "classique" des miniplayers par la version beta
  * 30.0.5 Tri des classes dans des sous dossiers
  * 30.0.6 Merge 29
- * 30.0.7 Améliorations css
+ * 30.0.7 Améliorations css
+ * 30.0.8 Améliorations diverses

package/index.ts

@@ -49,6 +49,11 @@ import RubriqueChooser from "./src/components/display/rubriques/RubriqueChooser.
 import CommentList from "./src/components/display/comments/CommentList.vue";
 import CommentInput from "./src/components/display/comments/CommentInput.vue";
 
+//form
+import ClassicSearch from "./src/components/form/ClassicSearch.vue";
+import ClassicCheckbox from "./src/components/form/ClassicCheckbox.vue";
+import ClassicRadio from "./src/components/form/ClassicRadio.vue";
+
 //mixins
 import {selenium} from "./src/components/mixins/functions";
 import {cookies} from "./src/components/mixins/functions";
@@ -99,7 +104,10 @@ const components = {
     orgaFilter,
     initSDK,
     Popover,
-    tagOfMixins
+    tagOfMixins,
+    ClassicSearch,
+    ClassicCheckbox,
+    ClassicRadio
 }
 
 export default components;
@@ -146,5 +154,8 @@ export {
     orgaFilter,
     initSDK,
     Popover,
-    tagOfMixins
+    tagOfMixins,
+    ClassicSearch,
+    ClassicCheckbox,
+    ClassicRadio
 };

package/package.json

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

package/src/assets/bootstrap-diff.scss

@@ -240,12 +240,13 @@
         display: none;
       }    
     .dropdown-menu {
-        padding: $dropdown-padding-y 0.5rem;
+        padding: 0.5rem;
         @media (max-width: 450px) {
             min-width: 15rem;
         } 
     }
     .dropdown-item {
+        cursor: pointer;
         font-size: 0.8rem;
         @media (max-width: 450px) {
             padding: 0.25rem 0;

package/src/assets/form.scss

@@ -5,6 +5,13 @@
 	.width-auto{
 	width: auto !important;
 	}
+	select {
+		background: white !important;
+		outline-color: transparent !important;
+		padding: 0.5rem;
+		border: 0.1rem solid #dee2e6;
+		border-radius: 0.3rem;
+	}
 
 	.form-input {
 		-webkit-appearance: none;

package/src/assets/general.scss

@@ -51,6 +51,13 @@ body{
     }
 
   }
+  .d-flex-column{
+		display: flex;
+		flex-direction: row;
+		@media (max-width: 960px) {
+			flex-direction: column;
+		}
+	}
 
   .primary-color{
     color: $octopus-primary-color;
@@ -66,14 +73,6 @@ body{
     background: $octopus-background;
   }
 
-  .border-primary{
-    border-color:$octopus-primary-color !important;
-    border-radius: 3rem;
-    border-radius: 3rem;
-    border-style: inset;
-    border-width: 1px;;
-  }
-
   .pe-5 {
     @media (max-width: 960px) {
       padding-right: 5px !important;
@@ -84,6 +83,10 @@ body{
       padding-left: 5px !important;
     }
   }
+  .horizontal-separator {
+		border-top: 1px solid rgb(243, 243, 243);
+		margin: 0.5rem 0;
+	}
 
   .page-box{
     background-color: $octopus-background;
@@ -132,15 +135,12 @@ body{
     text-decoration: none;
     outline-width: 0;
   }
-
-  a.linkHover.router-link-exact-active.router-link-active {
-    color: $octopus-primary-color !important;
+  a.link-hover{
+    color: black !important;
   }
-
-  a.linkHover:hover{
+  a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
     color: $octopus-primary-color !important;
   }
-
   .descriptionText{
     white-space: pre-wrap; 
     word-wrap: break-word;
@@ -154,15 +154,9 @@ body{
   .alert-text{
     color: $octopus-alert-text;
   }
-  .flex-grow{
-    flex-grow: 1;
-  }
   .flex-super-grow{
     flex-grow: 2;
   }
-  .flex-shrink{
-    flex-shrink: 0;
-  }
   .text-center-mobile{
     text-align: inherit;
     @media (max-width: 960px) {

package/src/assets/multiselect.scss

@@ -15,7 +15,7 @@
         text-overflow: '';
         font-size: 1rem;
         @media (max-width: 450px) {
-            background: #eee !important;
+            background: transparent !important;
             width: 98%;
         }
     }

package/src/assets/share.scss

@@ -1,14 +1,6 @@
 @import '../sass/_variables.scss';
 .octopus-app{
-  .search-icon-container {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      display: flex;
-      align-items: center;
-  }
-  .share-container {
+  .flex-grow-mobile {
       @media (max-width: 960px) {
           flex-grow: 1;
       }
@@ -18,9 +10,6 @@
       margin-bottom: 2px;
       height: 25px;
   }
-  .flex-no-grow {
-      flex-grow: 0 !important;
-  }
   .custom-radio .custom-control-label {
       cursor: pointer;
   }

package/src/components/display/comments/CommentPlayer.vue

@@ -22,7 +22,7 @@
       v-if="displayContent"
       class="comment-content"
     >
-      <div class="primary-color flex-shrink">
+      <div class="primary-color flex-shrink-0">
         {{ displayContent.name }}
       </div>
       <div class="ms-1 me-1">

package/src/components/display/emission/EmissionInlineList.vue

@@ -47,7 +47,7 @@
       <EmissionPlayerItem
         v-for="e in emissions"
         :key="e.emissionId"
-        class="flex-shrink item-phone-margin"
+        class="flex-shrink-0 item-phone-margin"
         :emission="e"
         :class="[alignLeft ? 'me-3' : '', mainRubriquage(e)]"
         :nb-podcasts="nbPodcasts"

package/src/components/display/emission/EmissionItem.vue

@@ -26,7 +26,7 @@
         class="d-flex"
       >
         <div
-          class="img-box-light flex-shrink"
+          class="img-box-light flex-shrink-0"
           :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
         />
         <div class="emission-light-title">
@@ -70,7 +70,7 @@
           <!-- eslint-enable -->
         </div>
       </router-link>
-      <div class="flex-grow" />
+      <div class="flex-grow-1" />
       <router-link
         v-if="!isPodcastmaker"
         :to="{

package/src/components/display/emission/EmissionList.vue

@@ -37,7 +37,7 @@
         v-for="e in emissions"
         :key="e.emissionId"
         :emission="e"
-        class="m-3 flex-shrink"
+        class="m-3 flex-shrink-0"
         :class="mainRubriquage(e)"
         :rubrique-name="rubriquesId(e)"
         @emissionNotVisible="displayCount--"

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -52,7 +52,7 @@
       :key="p.podcastId"
       class="border-top emission-item-border-color p-2 secondary-bg d-flex"
     >
-      <div class="d-flex justify-content-between flex-grow">
+      <div class="d-flex justify-content-between flex-grow-1">
         <router-link
           :to="{
             name: 'podcast',

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,6 +138,8 @@ import { state } from '../../../store/paramStore';
 import moment from 'moment';
 import CategoryFilter from './CategoryFilter.vue';
 import RubriqueFilter from './RubriqueFilter.vue';
+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';
@@ -213,7 +149,9 @@ export default defineComponent({
     MonetizableFilter,
     DatePicker,
     CategoryFilter,
-    RubriqueFilter
+    RubriqueFilter,
+    ClassicCheckbox,
+    ClassicRadio
   },
   props: {
     organisationId: { default: undefined, type: String},

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/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    CategoryChooser
+    CategoryChooser,
+    ClassicCheckbox
   },
   emits: ['updateCategory'],
   data() {

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/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

@@ -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

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,6 +38,7 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
+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';
@@ -51,6 +46,7 @@ const RubriqueChoice = defineAsyncComponent(() => import('./RubriqueChoice.vue')
 export default defineComponent({
   components: {
     RubriqueChoice,
+    ClassicCheckbox
   },
   props: {
     organisationId: { default: undefined, type: String},

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

@@ -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/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="{