@saooti/octopus-sdk 30.0.28 → 30.0.32

package/README.md

@@ -525,4 +525,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.25 Css +  Accessibilité
  * 30.0.26 Css +  Accessibilité
  * 30.0.27 Top bar responsive
- * 30.0.28 Limiter caractères des commentaires
+ * 30.0.28 Limiter caractères des commentaires
+ * 30.0.29 Pour podcastmaker sudPresse
+ * 30.0.30 Problème fetch participants
+ * 30.0.31 Amélioration interface
+ * 30.0.32 Amélioration interface

package/package.json

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

package/src/assets/bootstrap-diff.scss

@@ -120,9 +120,9 @@
     
         &.admin-button{
             padding: 0.3rem;
-            height: 1.8rem;
-            width: 1.8rem;
-            font-size: 1rem;
+            height: 2.2rem !important;
+            width: 2.2rem;
+            font-size: 1.1rem;
             display: inline-flex;
             align-items: center;
             justify-content: center;

package/src/assets/general.scss

@@ -13,9 +13,11 @@ body{
   overscroll-behavior-y: contain;
 }
 .octopus-app{
+  h1{
+    margin-bottom: 2rem;
+  }
   h1,h2,h3,h4,h5,h6{
     font-weight: 600;
-    margin-bottom: 0.25rem;
     margin-top: 0;
     @media (max-width: 500px){
       margin: 0.2rem;
@@ -35,6 +37,10 @@ body{
       font-size: 1rem;
     }
   }
+  hr{
+    height: 0.01rem;
+    color: #999;
+  }
 
   .small-text{
     font-size: 0.6rem;

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="isDisplay"
+    v-show="isDisplay"
     class="mt-3"
   >
     <nav
@@ -54,12 +54,17 @@
     <CategoryList
       v-if="!categoryFilter && !rubriquageFilter.length"
       :is-filter="true"
+      @categoriesLength="checkIfCategories"
     />
     <RubriqueList
       v-else-if="rubriquageFilter.length !== rubriqueFilter.length"
       :rubriquages="rubriquageFilter"
     />
   </div>
+  <div
+    v-if="!isDisplay"
+    class="categary-filter-no-filter"
+  />
 </template>
 
 <script lang="ts">
@@ -79,6 +84,11 @@ export default defineComponent({
     RubriqueList,
     RubriqueChooser
   },
+  data() {
+    return {
+      isCategories: false as boolean,
+    };
+  },
   computed: {
     categoryFilter(): Category|undefined{
       return this.$store.state.filter.iab;
@@ -87,16 +97,20 @@ export default defineComponent({
       return this.$store.state.filter.rubriqueFilter;
     },
     isDisplay(): boolean {
-      return "homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name;
+      return ("homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name) 
+      && (this.isCategories || undefined!==this.categoryFilter || 0!==this.rubriqueFilter.length || 0!==this.rubriquageFilter.length);
     },
     rubriquageFilter(): Array<Rubriquage>{
       if(this.$store.state.filter.organisationId){
         return this.$store.state.filter.rubriquageArray;
       }
       return [];
-    }
+    },
   },
   methods:{
+    checkIfCategories(length: number): void{
+      this.isCategories = 0!==length;
+    },
     onRubriqueSelected(index: number, rubrique: Rubrique): void {
       if(!rubrique ||this.rubriqueFilter[index].rubriqueId === rubrique.rubriqueId){
         return;
@@ -145,4 +159,15 @@ export default defineComponent({
     }
   }
 })
-</script>
+</script>
+<style lang="scss">
+.categary-filter-no-filter{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: white;
+  z-index: -1;
+}
+</style>

package/src/components/display/categories/CategoryList.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list">
+  <div
+    v-if="categories.length"
+    class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list"
+  >
     <div
       id="category-list-container"
       class="category-list-container"
@@ -50,6 +53,7 @@ export default defineComponent({
   props: {
     isFilter: { default: false, type: Boolean },
   },
+  emits:['categoriesLength'],
 
   data() {
     return {
@@ -65,15 +69,19 @@ export default defineComponent({
       return this.$store.state.categories;
     },
     categories(): Array<Category> {
+      let arrayCategories: Array<Category>  = [];
       if (this.filterOrga) {
-        return this.$store.state.categoriesOrga.filter((c: Category) => {
+        arrayCategories = this.$store.state.categoriesOrga.filter((c: Category) => {
           return c.podcastOrganisationCount;
         });
+      }else{
+        arrayCategories = this.$store.state.categories.filter((c: Category) => {
+          if (this.isPodcastmaker) return c.podcastOrganisationCount;
+          return c.podcastCount;
+        });
       }
-      return this.$store.state.categories.filter((c: Category) => {
-        if (this.isPodcastmaker) return c.podcastOrganisationCount;
-        return c.podcastCount;
-      });
+      this.$emit('categoriesLength', arrayCategories.length);
+      return arrayCategories;
     },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
@@ -83,9 +91,9 @@ export default defineComponent({
     categories: {
       deep: true,
       handler(){
-      this.$nextTick(() => {
-        this.resizeWindow();
-      });
+        this.$nextTick(() => {
+          this.resizeWindow();
+        });
       }
     },
     filterOrga(): void {

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

@@ -257,31 +257,34 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.list-episode {
-    padding: 2rem 0rem 1rem !important;
-    @media (max-width: 450px) {
-        padding: 0.5rem 0rem 1rem !important;
+.octopus-app{
+  .list-episode {
+      padding: 2rem 0rem 1rem !important;
+      @media (max-width: 450px) {
+          padding: 0.5rem 0rem 1rem !important;
+      }
+      h2 {
+          margin-bottom: 1rem;
+      }
+  }
+  .element-list-inline.overflowScroll {
+    display: flex;
+    flex-wrap: wrap;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    padding-bottom: 1rem;
+    width: 100%;
+    height: 80vh;
+    overflow-y: auto;
+    grid-gap: inherit;
+    @media (max-width: 960px) {
+      overflow-x: hidden;
+      flex-direction: column;
+      flex-wrap: nowrap;
     }
-    h2 {
-        margin-bottom: 1rem;
+    .item-phone-margin {
+      margin: 1rem 0.5rem !important;
     }
-}
-.element-list-inline.overflowScroll {
-  display: flex;
-  flex-wrap: wrap;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-  padding-bottom: 1rem;
-  width: 100%;
-  height: 80vh;
-  overflow-y: auto;
-  @media (max-width: 960px) {
-    overflow-x: hidden;
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-  .item-phone-margin {
-    margin: 1rem 0.5rem !important;
   }
 }
 </style>

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

@@ -168,7 +168,6 @@ export default defineComponent({
     async fetchContent(reset: boolean): Promise<void> {
       this.loading = true;
       if (reset) {
-        this.emissions.length = 0;
         this.dfirst = 0;
       }
       const param: FetchParam = {

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

@@ -80,7 +80,6 @@ export default defineComponent({
     async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
-        this.lives.length = 0;
         this.dfirst = 0;
         this.notEmpty = false;
       }

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

@@ -168,7 +168,7 @@ export default defineComponent({
       background: linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0),
-        #f3f3f3 40%
+        #fafafa 40%
       );
     }
   }

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

@@ -96,6 +96,9 @@ export default defineComponent({
   methods: {
     async fetchContent(reset: boolean): Promise<void> {
       this.loading = true;
+      if (reset) {
+        this.dfirst = 0;
+      }
       const data = await octopusApi.fetchParticipants({
         first: this.dfirst,
         size: this.dsize,

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

@@ -147,7 +147,6 @@ export default defineComponent({
     async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
-        this.podcasts.length = 0;
         this.dfirst = 0;
         this.loading = true;
         this.loaded = false;

package/src/components/pages/Participant.vue

@@ -12,7 +12,7 @@
         </template>
       </h1>
       <div
-        class="d-flex flex-column align-items-center"
+        class="d-flex flex-column align-items-center mb-3"
       >
         <div
           class="img-box-circle mb-3"
@@ -43,7 +43,7 @@
             <div class="saooti-rss-bounty" />
           </a>
         </div>
-        <div class="d-flex">
+        <div class="d-flex mt-3">
           <EditBox
             v-if="editRight && isEditBox"
             :participant="participant"

package/src/components/pages/Podcast.vue

@@ -68,6 +68,7 @@
           :fetch-conference="fetchConference"
         />
         <PodcastInlineList
+          class="mt-4"
           :emission-id="podcast.emission.emissionId"
           :href="'/main/pub/emission/' + podcast.emission.emissionId"
           :title="$t('More episodes of this emission')"