@saooti/octopus-sdk 31.0.26 → 31.0.27

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',
     };
   },

package/src/components/misc/TopBar.vue

@@ -35,69 +35,21 @@
       @selected="onOrganisationSelected"
     />
     <div class="d-flex justify-content-end flex-grow-1">
-      <router-link
-        v-if="
-          isLiveTab &&
-            ((filterOrga && filterOrgaLive) || !filterOrga)
-        "
-        :to="{
-          name: 'lives',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="link-hover p-3 fw-bold"
+      <template
+        v-for="link in routerLinkArray"
+        :key="link.routeName"
       >
-        {{ $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},
-        }"
-        class="link-hover p-3 fw-bold"
-      >
-        {{ $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 },
-        }"
-        class="link-hover p-3 fw-bold"
-      >
-        {{ $t('Emissions') }}
-      </router-link>
-      <router-link
-        :to="{
-          name: 'participants',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="link-hover p-3 fw-bold"
-      >
-        {{ $t('Speakers') }}
-      </router-link>
-      <router-link
-        :to="{
-          name: 'playlists',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="link-hover p-3 fw-bold"
-      >
-        {{ $t('Playlists') }}
-      </router-link>
-      <router-link
-        v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-        :to="{
-          name: 'productors',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="link-hover p-3 fw-bold"
-      >
-        {{ $t('Productors') }}
-      </router-link>
+        <router-link
+          v-if="link.condition"
+          :to="{
+            name: link.routeName,
+            query: getQueriesRouter(link.routeName),
+          }"
+          class="link-hover p-3 fw-bold"
+        >
+          {{ link.title }}
+        </router-link>
+      </template>
     </div>
     <div class="d-flex flex-column">
       <div class="hosted-by">
@@ -129,19 +81,16 @@ import { defineComponent,defineAsyncComponent } from 'vue';
 const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
 export default defineComponent({
   name: 'TopBar',
-
   components: {
     OrganisationChooserLight,
     HomeDropdown,
   },
   mixins:[orgaFilter],
-
   props: {
     displayMenu: { default: false, type: Boolean},
     isEducation: { default: false, type: Boolean},
   },
   emits: ['update:displayMenu'],
-
   data() {
     return {
       scrolled: false as boolean,
@@ -152,8 +101,16 @@ export default defineComponent({
       dummyParam: new Date().getTime().toString() as string,
     };
   },
- 
   computed: {
+    routerLinkArray(){
+      return [
+        {title : this.$t('Live'), routeName: 'lives', condition : this.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('Speakers'), routeName: 'participants', condition : true},
+        {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
+        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrga || this.isEducation)}]
+    },
     rubriqueQueryParam(): string|undefined{
       if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
         return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
@@ -186,26 +143,32 @@ 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;
-    }
     window.addEventListener('scroll', this.handleScroll);
   },
-
   beforeUnmount() {
     window.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
+    getQueriesRouter(routeName: string){
+      if('podcasts' !== routeName && 'emissions' !== 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}
+    },
     handleScroll(): void {
       if (
         window.scrollY - this.oldScrollY > 0 &&
@@ -231,11 +194,7 @@ export default defineComponent({
       }
     },
     onDisplayMenu(param: boolean): void {
-      if (true === param) {
-        this.$emit('update:displayMenu', false);
-      } else {
-        this.$emit('update:displayMenu', !this.displayMenu);
-      }
+      this.$emit('update:displayMenu',param?false:!this.displayMenu);
     },
     async onOrganisationSelected(organisation: Organisation | undefined): Promise<void> {
       if (organisation && organisation.id) {

package/src/components/misc/modal/ClipboardModal.vue

@@ -43,7 +43,6 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));
 export default defineComponent({
   name: 'ClipboardModal',
-
   components: {
     RssSection,
   },
@@ -55,14 +54,8 @@ export default defineComponent({
   },
   emits: ['close', 'copy'],
 
-  data() {
-    return {
-    };
-  },
-
   methods: {
-    closePopup(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
     afterCopy(): void{

package/src/components/misc/modal/MessageModal.vue

@@ -71,8 +71,7 @@ export default defineComponent({
   },
   emits: ['close', 'validate', 'cancel', 'thirdEvent'],
   methods: {
-    closePopup(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
     onValid(): void {

package/src/components/misc/modal/QrCodeModal.vue

@@ -38,25 +38,15 @@ import QrCode from '../../display/sharing/QrCode.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'QrCodeModal',
-
   components: {
     QrCode
   },
-
   props: {
     urlPage: { default: undefined, type: String},
   },
-
   emits: ['close'],
-
-  data() {
-    return {
-    };
-  },
-
   methods:{
-    closePopup(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
   }

package/src/components/mixins/orgaComputed.ts

@@ -0,0 +1,15 @@
+import { state } from '@/store/paramStore';
+import { defineComponent } from 'vue';
+export const orgaComputed = defineComponent({
+  computed: {
+		myOrganisationId(): string|undefined {
+      return state.generalParameters.organisationId;
+    },
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+		filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+  },
+});