@saooti/octopus-sdk 31.0.26 → 31.0.29

package/src/components/form/ClassicSearch.vue

@@ -49,38 +49,38 @@ export default defineComponent({
 				this.$emit('update:textInit', this.textValue)
 			}
 		},
-		textInit(){
-			if(this.textInit !== this.textValue){
-				this.textValue =this.textInit;
-			}
-		}
-  },
-  mounted(){
-		this.textValue = this.textInit;
-	}
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+          this.textValue =this.textInit;
+          }
+      },
+    },
+  }
 });
 </script>
 <style lang="scss">
 .octopus-app{
-.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;
-  }
-} 
+  .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/form/ClassicSelect.vue

@@ -25,7 +25,6 @@
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'ClassicSelect',
-
   props: {
     idSelect: { default: '', type: String },
     label: { default: '', type: String },
@@ -34,9 +33,7 @@ export default defineComponent({
     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,
@@ -48,21 +45,21 @@ export default defineComponent({
 				this.$emit('update:textInit', this.textValue)
 			}
 		},
-		textInit(){
-			if(this.textInit !== this.textValue){
-				this.textValue =this.textInit;
-			}
-		}
-  },
-  mounted(){
-		this.textValue = this.textInit;
-	}
+    textInit: {
+      immediate: true,
+      handler() {
+        if(this.textInit !== this.textValue){
+          this.textValue =this.textInit;
+          }
+      },
+    },
+  }
 });
 </script>
 <style lang="scss">
 .octopus-app{
-.classic-select select{
-  width: inherit;
-}
+  .classic-select select{
+    width: inherit;
+  }
 }
 </style>

package/src/components/misc/ErrorMessage.vue

@@ -17,7 +17,6 @@
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -27,14 +26,13 @@ export default defineComponent({
   },
 })
 </script>
-
 <style lang="scss">
 .octopus-app{
-.bg-error-message {
-  background-color: #ffd84a9c;
-}
-.alert-text{
-  color: darkred;
-}
+  .bg-error-message {
+    background-color: #ffd84a9c;
+  }
+  .alert-text{
+    color: darkred;
+  }
 }
 </style>

package/src/components/misc/Footer.vue

@@ -7,57 +7,21 @@
     >
       <div class="d-flex flex-column flex-grow-1 align-items-end">
         <div class="d-flex flex-column">
-          <router-link
-            :to="{
-              name: 'home',
-              query: { productor: $store.state.filter.organisationId,
-                       iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                       rubriquesId: rubriqueQueryParam },
-            }"
-            class="link-hover"
-          >
-            {{ $t('Home') }}
-          </router-link>
-          <router-link
-            :to="{
-              name: 'podcasts',
-              query: { productor: $store.state.filter.organisationId,
-                       iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                       rubriquesId: rubriqueQueryParam},
-            }"
-            class="link-hover"
+          <template
+            v-for="link in routerLinkArray"
+            :key="link.routeName"
           >
-            {{ $t('Podcasts') }}
-          </router-link>
-          <router-link
-            :to="{
-              name: 'emissions',
-              query: { productor: $store.state.filter.organisationId,
-                       iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined },
-            }"
-            class="link-hover"
-          >
-            {{ $t('Emissions') }}
-          </router-link>
-          <router-link
-            v-if="!isPodcastmaker"
-            :to="{
-              name: 'productors',
-              query: { productor: $store.state.filter.organisationId },
-            }"
-            class="link-hover"
-          >
-            {{ $t('Productors') }}
-          </router-link>
-          <router-link
-            :to="{
-              name: 'participants',
-              query: { productor: $store.state.filter.organisationId },
-            }"
-            class="link-hover"
-          >
-            {{ $t('Speakers') }}
-          </router-link>
+            <router-link
+              v-if="link.condition"
+              class="link-hover"
+              :to="{
+                name: link.routeName,
+                query: getQueriesRouter(link.routeName),
+              }"
+            >
+              {{ link.title }}
+            </router-link>
+          </template>
         </div>
       </div>
       <hr class="show-phone">
@@ -70,28 +34,12 @@
             &copy; Saooti 2019
           </div>
           <router-link
+            v-for="link in routerLinkSecondArray" 
+            :key="link.routeName"
             class="link-hover"
-            to="/main/pub/contact"
-          >
-            {{
-              $t('Contact')
-            }}
-          </router-link>
-          <router-link
-            class="link-hover"
-            to="/main/pub/cgu"
+            :to="link.routeName"
           >
-            {{
-              $t('Term of use')
-            }}
-          </router-link>
-          <router-link
-            class="link-hover"
-            to="/main/pub/libraries"
-          >
-            {{
-              $t('Used libraries')
-            }}
+            {{ link.title }}
           </router-link>
           <ClassicSelect
             v-model:textInit="language"
@@ -159,17 +107,31 @@ export default defineComponent({
     Player,
     ClassicSelect
   },
-
   mixins:[cookies],
-
   data() {
     return {
       language: this.$i18n.locale as string,
     };
   },
-
-
   computed: {
+    routerLinkArray(){
+      return [
+        {title : this.$t('Home'), routeName: 'home', condition : true},
+        {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
+        {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
+        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && !this.filterOrga},
+        {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
+        {title : this.$t('Speakers'), routeName: 'participants', condition : true},]
+    },
+    routerLinkSecondArray(){
+      return [
+        {title : this.$t('Contact'), routeName: '/main/pub/contact'},
+        {title : this.$t('Term of use'), routeName: '/main/pub/cgu'},
+        {title : this.$t('Used libraries'), routeName: "/main/pub/libraries"}]
+    },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
@@ -183,17 +145,23 @@ export default defineComponent({
       return undefined;
     },
   },
-
   watch:{
     language(){
       this.changeLanguage();
     }
   },
-
   methods: {
+    getQueriesRouter(routeName: string){
+      if('podcasts' !== routeName && 'emissions' !== routeName && 'home' !== routeName){
+        return { productor: this.$store.state.filter.organisationId};
+      }
+      return { productor: this.$store.state.filter.organisationId,
+                   iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
+                   rubriquesId: this.rubriqueQueryParam}
+    },
     showBlackBorder(hide: boolean): void {
       const footerElement = (this.$refs.footer as HTMLElement);
-      if(null===footerElement){return}
+      if(null===footerElement){return;}
       if (hide) {
         footerElement.classList.remove('border-round');
       } else {
@@ -222,25 +190,25 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-#footer{
-  font-size: 0.7rem;
-  .acpm_image {
-    width: 70px;
-    height: 70px;
-  }
-  a{
-    color: #666;
-  }
-  .border-round {
-    border-radius: 0 0 2rem 2rem;
-  }
-  /** PHONES*/
-  @media (max-width: 960px) {
-    .align-items-center,
-    .align-items-end {
-      align-items: flex-start !important;
+  #footer{
+    font-size: 0.7rem;
+    .acpm_image {
+      width: 70px;
+      height: 70px;
+    }
+    a{
+      color: #666;
+    }
+    .border-round {
+      border-radius: 0 0 2rem 2rem;
+    }
+    /** PHONES*/
+    @media (max-width: 960px) {
+      .align-items-center,
+      .align-items-end {
+        align-items: flex-start !important;
+      }
     }
   }
 }
-}
 </style>

package/src/components/misc/LeftMenu.vue

@@ -3,78 +3,22 @@
     v-show="displayMenu"
     class="left-menu-container"
   >
-    <router-link
-      class="show-phone"
-      :to="{
-        name: 'home',
-        query: { productor: $store.state.filter.organisationId,
-                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                 rubriquesId: rubriqueQueryParam},
-      }"
-      @click="onMenuClick"
-    >
-      {{ $t('Home') }}
-    </router-link>
-    <router-link
-      v-if="isLiveTab && filterOrga && filterOrgaLive"
-      :to="{
-        name: 'lives',
-        query: { productor: $store.state.filter.organisationId},
-      }"
-      @click="onMenuClick"
-    >
-      {{ $t('Live') }}
-    </router-link>
-    <router-link
-      :to="{
-        name: 'podcasts',
-        query: { productor: $store.state.filter.organisationId,
-                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                 rubriquesId: rubriqueQueryParam},
-      }"
-      @click="onMenuClick"
-    >
-      {{ $t('Podcasts') }}
-    </router-link>
-    <router-link
-      :to="{
-        name: 'emissions',
-        query: { productor: $store.state.filter.organisationId,
-                 iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
-                 rubriquesId: rubriqueQueryParam},
-      }"
-      @click="onMenuClick"
-    >
-      {{ $t('Emissions') }}
-    </router-link>
-    <router-link
-      v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-      :to="{
-        name: 'productors',
-        query: { productor: $store.state.filter.organisationId },
-      }"
-      @click="onMenuClick"
-    >
-      {{ $t('Productors') }}
-    </router-link>
-    <router-link
-      :to="{
-        name: 'participants',
-        query: { productor: $store.state.filter.organisationId },
-      }"
-      @click="onMenuClick"
-    >
-      {{ $t('Speakers') }}
-    </router-link>
-    <router-link
-      :to="{
-        name: 'playlists',
-        query: { productor: $store.state.filter.organisationId },
-      }"
-      @click="onMenuClick"
+    <template
+      v-for="link in routerLinkArray"
+      :key="link.routeName"
     >
-      {{ $t('Playlists') }}
-    </router-link>
+      <router-link
+        v-if="link.condition"
+        :class="'home'===link.routeName ? 'show-phone' : ''"
+        :to="{
+          name: link.routeName,
+          query: getQueriesRouter(link.routeName),
+        }"
+        @click="onMenuClick"
+      >
+        {{ link.title }}
+      </router-link>
+    </template>
     <OrganisationChooserLight
       v-if="!isPodcastmaker"
       width="auto"
@@ -111,28 +55,31 @@ import { Organisation } from '@/store/class/general/organisation';
 const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
 export default defineComponent({
   name: 'LeftMenu',
-
   components: {
     OrganisationChooserLight,
   },
   mixins:[orgaFilter],
-
   props: {
     displayMenu: { default: false, type: Boolean},
     isEducation: { default: false, type: Boolean},
   },
   emits: ['update:displayMenu'],
-
   data() {
     return {
       organisationId: undefined as string|undefined,
       reset: false as boolean,
     };
   },
-
   computed: {
-    isLiveTab(): boolean {
-      return (state.generalParameters.isLiveTab as boolean);
+    routerLinkArray(){
+      return [
+        {title : this.$t('Home'), routeName: 'home', condition : true},
+        {title : this.$t('Live'), routeName: 'lives', condition : state.generalParameters.isLiveTab &&((this.filterOrga && this.filterOrgaLive) || !this.filterOrga)},
+        {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
+        {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
+        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrga || this.isEducation)},
+        {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
+        {title : this.$t('Speakers'), routeName: 'participants', condition : true},]
     },
     categories(): Array<Category> {
       return this.$store.state.categories.filter((c: Category) => {
@@ -157,22 +104,27 @@ export default defineComponent({
     },
   },
   watch: {
-    filterOrga(): void {
-      if (this.filterOrga) {
-        this.organisationId = this.filterOrga;
-      } else {
-        this.reset = !this.reset;
-      }
+    filterOrga: {
+      immediate: true,
+      handler() {
+        if (this.filterOrga) {
+          this.organisationId = this.filterOrga;
+        } else {
+          this.reset = !this.reset;
+        }
+      },
     },
   },
-
-  mounted() {
-    if (this.filterOrga) {
-      this.organisationId = this.filterOrga;
-    }
-  },
   
   methods: {
+    getQueriesRouter(routeName: string){
+      if('podcasts' !== routeName && 'emissions' !== routeName && 'home' !== routeName){
+        return { productor: this.$store.state.filter.organisationId};
+      }
+      return { productor: this.$store.state.filter.organisationId,
+                   iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
+                   rubriquesId: this.rubriqueQueryParam}
+    },
     onMenuClick() {
       this.$emit('update:displayMenu', false);
     },

package/src/components/misc/Snackbar.vue

@@ -64,6 +64,7 @@ export default defineComponent({
           warn: '#FF6600',
         }), type: Object},
     position: { default: 'top-center', type: String},
+    holdTime: {default:5000, type:Number}
   },
   data() {
     return {
@@ -72,7 +73,6 @@ export default defineComponent({
         msg:string,
         timer: ReturnType<typeof setTimeout>|undefined,
       }>,
-      holdTime: 5000,
       baseSize: '5rem',
     };
   },