@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/misc/TopBar.vue

@@ -1,324 +1,167 @@
 <template>
   <div
-    class="top-bar-container position-sticky"
-    v-bind:class="{ 'shadow-element': scrolled }"
-    v-if="init"
+    class="top-bar-container"
+    :class="{ 'shadow-element': scrolled }"
   >
-    <div class="top-bar">
-      <div
-        class="hamburger-menu"
-        v-on:click="onDisplayMenu(false)"
-        :aria-label="$t('open left Menu')"
+    <router-link
+      class="top-bar-logo"
+      :to="{
+        name: 'home',
+        query: { productor: $store.state.filter.organisationId,
+                 iabId: $store.state.filter.iab?.id ,
+                 rubriquesId: rubriqueQueryParam},
+      }"
+      @click="onDisplayMenu(true)"
+    >
+      <img
+        :src="!filterOrga || '' === imgUrl ? logoUrl : imgUrl"
+        :alt="!filterOrga || '' === imgUrl ? $t('Logo of main page') : $t('Visual', {name: $store.state.filter?.name})"
+        :class="isEducation ? 'educationLogo' : ''"
       >
-        <div class="saooti-burger-menu h3"></div>
-      </div>
-      <router-link
-        :to="{
-          name: 'home',
-          query: { productor: this.$store.state.filter.organisationId },
-        }"
+    </router-link>
+    <OrganisationChooserLight
+      v-if="!isPodcastmaker"
+      page="topBar"
+      width="auto"
+      :defaultanswer="$t('No organisation filter')"
+      :value="organisationId"
+      class="me-2"
+      :reset="reset"
+      @selected="onOrganisationSelected"
+    />
+    <div class="d-flex justify-content-end flex-grow-1">
+      <template
+        v-for="link in routerLinkArray"
+        :key="link.routeName"
       >
-        <div class="top-bar-logo m-3" v-on:click="onDisplayMenu(true)">
-          <img
-            :src="logoUrl"
-            :alt="$t('Logo of main page')"
-            :class="isEducation ? 'educationLogo' : ''"
-            v-if="!filterOrga || undefined === imgUrl"
-          />
-          <img :src="imgUrl" :alt="$t('Logo of main page')" v-else />
-        </div>
-      </router-link>
-      <OrganisationChooserLight
-        width="auto"
-        page="topBar"
-        :defaultanswer="$t('No organisation filter')"
-        @selected="onOrganisationSelected"
-        :value="organisationId"
-        :light="true"
-        class="mr-2 hide-top-bar"
-        :reset="reset"
-        v-if="!isPodcastmaker"
-      />
-      <div class="d-flex align-items-center justify-content-center flex-grow">
         <router-link
-          v-if="
-            isLiveTab &&
-              !isPodcastmaker &&
-              ((filterOrga && filterOrgaLive) || !filterOrga)
-          "
+          v-if="link.condition"
           :to="{
-            name: 'lives',
-            query: { productor: this.$store.state.filter.organisationId },
+            name: link.routeName,
+            query: getQueriesRouter(link.routeName),
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Live') }}</router-link
+          class="link-hover p-3 fw-bold"
         >
+          {{ link.title }}
+        </router-link>
+      </template>
+    </div>
+    <button
+      class="btn-transparent saooti-menu"
+      :title="$t('open left Menu')"
+      @click="onDisplayMenu(false)"
+    />
+    <div class="d-flex flex-column">
+      <div class="hosted-by">
+        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-darker">Saooti</span>
+      </div>
+      <div class="d-flex justify-content-end flex-nowrap">
+        <HomeDropdown :is-education="isEducation" />
         <router-link
+          :title="$t('Search')"
           :to="{
             name: 'podcasts',
-            query: { productor: this.$store.state.filter.organisationId },
-          }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Podcasts') }}</router-link
-        >
-        <router-link
-          :to="{
-            name: 'emissions',
-            query: { productor: this.$store.state.filter.organisationId },
-          }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Emissions') }}</router-link
-        >
-        <router-link
-          :to="{
-            name: 'participants',
-            query: { productor: this.$store.state.filter.organisationId },
-          }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Speakers') }}</router-link
-        >
-        <router-link
-          :to="{
-            name: 'playlists',
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Playlists') }}</router-link
-        >
-        <router-link
-          :to="{
-            name: 'productors',
-            query: { productor: this.$store.state.filter.organisationId },
-          }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-          >{{ $t('Productors') }}</router-link
-        >
-      </div>
-      <div class="d-flex flex-column">
-        <div class="d-flex justify-content-end hostedBy hide-phone">
-          <span>{{ $t('Hosted by') }}</span
-          ><span class="ml-1 mr-1 primary-color">Saooti</span>
-        </div>
-        <div class="d-flex align-items-center justify-content-end flex-no-wrap">
-          <HomeDropdown :isEducation="isEducation" />
-          <router-link
-            :aria-label="$t('Search')"
-            :to="{
-              name: 'podcasts',
-              query: { productor: this.$store.state.filter.organisationId },
-            }"
-          >
-            <div class="btn admin-button m-1">
-              <i class="saooti-search text-dark"></i>
-            </div>
-          </router-link>
-        </div>
+          class="btn admin-button m-1 saooti-search"
+        />
       </div>
     </div>
   </div>
 </template>
-<style lang="scss">
-.top-bar-container {
-  top: 0;
-  background: #fff;
-  width: 100%;
-  z-index: 10;
-  padding: 0 2em;
-
-  @media (max-width: 450px) {
-    padding: 0 0.5rem;
-  }
-
-  .top-bar {
-    transition: height 1s;
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    height: 5rem;
-    position: relative;
-
-    .top-bar-logo {
-      margin: 1rem 2rem 1rem 1rem !important;
-      img {
-        max-width: 160px !important;
-        max-height: 80px;
-        height: 80px;
-        border-radius: 0.8rem;
-        &.educationLogo {
-          height: auto;
-          border-radius: 0;
-        }
-      }
-    }
-    .multiselect__tags {
-      padding: 6px 40px 0 10px;
-    }
-
-    .hamburger-menu {
-      display: none;
-      margin: 0 1rem;
-      @media (max-width: 600px) {
-        margin: 0;
-      }
-      .saooti-burger-menu {
-        font-size: 2.2em;
-        font-weight: bold;
-        margin-bottom: 0;
-      }
-      cursor: pointer;
-    }
-  }
-
-  &.shadow-element {
-    .linkHover {
-      display: none;
-    }
-    .top-bar {
-      height: 3.5rem;
-
-      .hamburger-menu {
-        display: block;
-        .saooti-burger-menu {
-          font-size: 2.2em;
-          font-weight: bold;
-          margin: 0;
-        }
-      }
-      .top-bar-logo {
-        flex-grow: 1;
-        text-align: center;
-        align-items: center;
-        display: flex;
-        img {
-          height: 2.5rem;
-          width: auto;
-        }
-      }
-      .hostedBy {
-        display: none !important;
-      }
-    }
-  }
-  .hostedBy {
-    font-size: 0.6rem;
-    position: absolute;
-    top: 5px;
-    right: 0;
-  }
-
-  /** PHONES*/
-  @media (max-width: 1200px) {
-    .hide-top-bar {
-      display: none !important;
-    }
-    .hostedBy {
-      display: none !important;
-    }
-    .top-bar {
-      padding: 0;
-      height: 3.5rem;
-      .linkHover {
-        display: none;
-      }
-      .hamburger-menu {
-        flex-grow: 1;
-        display: block;
-      }
-      .top-bar-logo {
-        flex-grow: 1;
-        text-align: center;
-        display: flex;
-        width: 100px;
-        img {
-          max-width: 100px !important;
-        }
-      }
-    }
-  }
-  @media (max-width: 650px) {
-    .top-bar {
-      .top-bar-logo {
-        img {
-          height: 2rem;
-        }
-      }
-    }
-  }
-}
-</style>
 
 <script lang="ts">
 import { state } from '../../store/paramStore';
-import OrganisationChooserLight from '../display/organisation/OrganisationChooserLight.vue';
 import HomeDropdown from './HomeDropdown.vue';
-const octopusApi = require('@saooti/octopus-api');
-
-import { defineComponent } from 'vue'
+import { Organisation } from '@/store/class/general/organisation';
+import { orgaFilter } from '../mixins/organisationFilter';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent,defineAsyncComponent } from 'vue';
+const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
 export default defineComponent({
   name: 'TopBar',
-
   components: {
     OrganisationChooserLight,
     HomeDropdown,
   },
-
-  mounted() {
-    if (this.filterOrga) {
-      this.organisationId = this.filterOrga;
-    }
-    this.init = true;
-    window.addEventListener('scroll', this.handleScroll);
-  },
-  beforeUnmount() {
-    window.removeEventListener('scroll', this.handleScroll);
+  mixins:[orgaFilter],
+  props: {
+    displayMenu: { default: false, type: Boolean},
+    isEducation: { default: false, type: Boolean},
   },
-
-  props: ['displayMenu', 'isEducation'],
   emits: ['update:displayMenu'],
-
   data() {
     return {
-      scrolled: false,
-      oldScrollY: 0,
-      minScroll: 0,
-      organisationId: undefined as any,
-      reset: false,
-      init: false,
-      dummyParam: new Date().getTime().toString(),
+      scrolled: false as boolean,
+      oldScrollY: 0 as number,
+      minScroll: 0 as number,
+      organisationId: undefined as string | undefined,
+      reset: false as boolean,
+      dummyParam: new Date().getTime().toString() as string,
     };
   },
-
   computed: {
-    logoUrl() {
-      if (this.isEducation) return '/img/logo_education.png';
-      return '/img/logo_octopus_final.svg';
+    routerLinkArray(){
+      return [
+        {title : this.$t('Live'), routeName: 'lives', condition : (state.generalParameters.isLiveTab as boolean) &&((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?.rubriqueFilter?.length){
+        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
     },
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    logoUrl(): string {
+      return this.isEducation ?'/img/logo_education.png': '/img/logo_octopus_final.svg';
     },
-    isLiveTab() {
-      return state.generalParameters.isLiveTab;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-    filterOrgaLive():any {
+    filterOrgaLive(): string {
       return this.$store.state.filter.live;
     },
-    imgUrl():any {
-      if (
-        this.$store.state.filter.imgUrl &&
-        !this.$store.state.filter.imgUrl.includes('emptypodcast')
-      )
-        return this.$store.state.filter.imgUrl + '?dummy=' + this.dummyParam;
-      return undefined;
+    imgUrl(): string {
+      if (!this.$store.state.filter.imgUrl?.includes('emptypodcast'))
+        return `${this.$store.state.filter.imgUrl}?dummy=${this.dummyParam}`;
+      return '';
     },
   },
-
+  watch: {
+    filterOrga: {
+      immediate: true,
+      handler() {
+        if (this.filterOrga) {
+          this.organisationId = this.filterOrga;
+        } else {
+          this.reset = !this.reset;
+        }
+      },
+    },
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  beforeUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
   methods: {
-    handleScroll() {
+    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?.id,
+                   rubriquesId: this.rubriqueQueryParam}
+    },
+    handleScroll(): void {
       if (
         window.scrollY - this.oldScrollY > 0 &&
         window.scrollY > 1 &&
@@ -342,46 +185,100 @@ export default defineComponent({
         this.$emit('update:displayMenu', false);
       }
     },
-
-    onDisplayMenu(param: boolean) {
-      if (true === param) {
-        this.$emit('update:displayMenu', false);
-      } else {
-        this.$emit('update:displayMenu', !this.displayMenu);
-      }
+    onDisplayMenu(param: boolean): void {
+      this.$emit('update:displayMenu',param?false:!this.displayMenu);
     },
-
-    async onOrganisationSelected(organisation: any) {
-      if (organisation && organisation.id) {
-        if (this.$route.query.productor !== organisation.id) {
-          this.$router.push({ query: { productor: organisation.id } });
-        }
-        this.$store.commit('filterOrga', {
-          orgaId: organisation.id,
-          imgUrl: organisation.imageUrl,
-        });
-        const isLive = await octopusApi.liveEnabledOrganisation(
-          organisation.id
-        );
-        this.$store.commit('filterOrgaLive', isLive);
-      } else {
-        this.organisationId = undefined;
-        if (this.$route.query.productor) {
-          this.$router.push({ query: { productor: undefined } });
-        }
-        this.$store.commit('filterOrga', { orgaId: undefined });
+    async onOrganisationSelected(organisation: Organisation | undefined): Promise<void> {
+      if (organisation?.id) {
+        await this.selectOrganisation(organisation.id);
+        return;
       }
+      this.organisationId = undefined;
+      this.removeSelectedOrga();
     },
   },
+})
+</script>
 
-  watch: {
-    filterOrga(newVal) {
-      if (newVal) {
-        this.organisationId = newVal;
-      } else {
-        this.reset = !this.reset;
+<style lang="scss">
+.octopus-app{
+.top-bar-container {
+  position: sticky;
+  top: 0;
+  background: #fff;
+  width: 100%;
+  height: 5rem;
+  z-index: 10;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: height 1s;
+  @media (max-width: 450px) {
+    padding: 0 0.5rem;
+  }
+
+  .saooti-menu {
+    display: none;
+    cursor: pointer;
+    font-size: 1.5rem;
+    margin: 0.5rem;
+  }
+
+  .top-bar-logo {
+    margin: 1rem 2rem 1rem 1rem;
+    img {
+      max-width: 160px !important;
+      max-height: 2.5rem;
+      height: 2.5rem;
+      &.educationLogo {
+        height: auto;
       }
-    },
-  },
-});
-</script>
+    }
+  }
+  .hosted-by {
+    font-size: 0.6rem;
+    position: absolute;
+    top: 5px;
+    right: 0;
+  }
+  .multiselect__tags {
+    padding: 6px 40px 0 10px;
+  }
+  &.shadow-element {
+    height: 3.5rem;
+    .link-hover,.hosted-by {
+      display: none;
+    }
+    .saooti-menu {
+      display: block;
+    }
+  }
+  /** PHONES*/
+  @media (max-width: 1470px) {
+    height: 3.5rem;
+    .default-multiselect-width, .hosted-by, .link-hover {
+      display: none;
+    }
+    .saooti-menu {
+      display: block;
+    }
+  }
+  @media (max-width: 650px) {
+    .top-bar-logo img{
+      height: 2rem;
+    }
+  }
+  @media (max-width: 380px) {
+    .top-bar-logo img{
+      height: 1rem;
+    }
+  }
+  @media (max-width: 290px) {
+    .top-bar-logo{
+      display: none;
+    }
+  }
+}
+}
+</style>