@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/misc/HomeDropdown.vue

@@ -2,78 +2,178 @@
   <div
     class="d-flex align-items-center justify-content-end flex-no-wrap top-bar-dropdown"
   >
-    <b-dropdown
-      class="split-dropdown"
-      split
-      right
-      split-variant="primary main-button-dropdown"
-      variant="primary data-selenium-dropdown-topbar"
-      @click="goToUrl('/main/priv/backoffice')"
-      :text="$t('My space')"
+    <div
       v-if="authenticated"
+      class="dropdown split-dropdown btn-group"
     >
-      <b-dropdown-text>
-        <router-link
-          to="/main/priv/upload"
-          v-if="isContribution && !isPodcastmaker"
-          class="align-self-center w-100 mb-2"
-        >
-          <button class="btn btn-primary w-100">{{ $t('Upload') }}</button>
-        </router-link>
-        <template @click="displayMenuPhone(true)">
-          <b-dropdown-item
-            to="/main/priv/backoffice"
-            class="linkSpace"
-            v-if="!isPodcastmaker"
-            >{{ $t('My space') }}</b-dropdown-item
+      <button
+        class="btn btn-primary main-button-dropdown"
+        @click="goToUrl('/main/priv/backoffice')"
+      >
+        {{ $t('My space') }}
+      </button>
+      <button
+        class="btn dropdown-toggle btn-primary data-selenium-dropdown-topbar dropdown-toggle-split"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      />
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <li>
+          <router-link
+            v-if="isContribution && !isPodcastmaker"
+            to="/main/priv/upload"
+            class="align-self-center w-100"
           >
-          <b-dropdown-item
-            to="/main/priv/edit/profile"
-            v-if="!isPodcastmaker"
-            >{{ $t('Edit my profile') }}</b-dropdown-item
-          >
-          <b-dropdown-item
-            to="/main/priv/edit/organisation"
-            v-if="!isPodcastmaker && isOrganisation"
-            >{{ $t('Edit my organisation') }}</b-dropdown-item
-          >
-          <b-dropdown-divider v-if="!isEducation"></b-dropdown-divider>
-          <b-dropdown-item
-            href="https://help.octopus.saooti.com/Aide/"
-            target="_blank"
-            v-if="!isEducation"
-            >{{ $t('Help') }}</b-dropdown-item
-          >
-          <b-dropdown-item
-            href="https://help.octopus.saooti.com/"
-            target="_blank"
-            v-if="!isEducation"
-            >{{ $t('TutoMag') }}</b-dropdown-item
-          >
-          <b-dropdown-divider></b-dropdown-divider>
-          <b-dropdown-item href="/sso/logout">{{
-            $t('Logout')
-          }}</b-dropdown-item>
-        </template>
-      </b-dropdown-text>
-    </b-dropdown>
-    <b-dropdown
-      right
-      toggle-class="text-decoration-none  m-1 admin-button btn-rounded-icon"
-      no-caret
+            <button class="btn btn-primary w-100 mb-2">
+              {{ $t('Upload') }}
+            </button>
+          </router-link>
+        </li>
+        <div @click="displayMenuPhone(true)">
+          <li v-if="!isPodcastmaker">
+            <router-link
+              to="/main/priv/backoffice"
+              class="linkSpace dropdown-item"
+            >
+              {{ $t('My space') }}
+            </router-link>
+          </li>
+          <li v-if="!isPodcastmaker">
+            <router-link
+              class="dropdown-item"
+              to="/main/priv/edit/profile"
+            >
+              {{ $t('Edit my profile') }}
+            </router-link>
+          </li>
+          <li v-if="!isPodcastmaker && isOrganisation">
+            <router-link
+              class="dropdown-item"
+              to="/main/priv/edit/organisation"
+            >
+              {{ $t('Edit my organisation') }}
+            </router-link>
+          </li>
+          <li v-if="!isEducation">
+            <hr class="dropdown-divider">
+          </li>
+          <li v-if="!isEducation">
+            <a
+              href="https://help.octopus.saooti.com/Aide/"
+              class="dropdown-item"
+              rel="noopener"
+              target="_blank"
+            >
+              {{ $t('Help') }}
+            </a>
+          </li>
+          <li v-if="!isEducation">
+            <a
+              href="https://help.octopus.saooti.com/"
+              class="dropdown-item"
+              rel="noopener"
+              target="_blank"
+            >
+              {{ $t('TutoMag') }}
+            </a>
+          </li>
+          <li><hr class="dropdown-divider"></li>
+          <li v-if="!isEducation">
+            <a
+              class="dropdown-item"
+              href="/sso/logout"
+            >
+              {{ $t('Logout') }}
+            </a>
+          </li>
+        </div>
+      </ul>
+    </div>
+    <div
       v-else
+      class="dropdown btn-group"
     >
-      <template v-slot:button-content>
-        <i class="saooti-user-octopus text-dark"></i
-        ><span class="sr-only">Profile</span>
-      </template>
-      <b-dropdown-item href="/sso/login">{{ $t('Login') }}</b-dropdown-item>
-      <b-dropdown-item to="/main/pub/create" v-if="!isPodcastmaker">{{
-        $t('Create an account')
-      }}</b-dropdown-item>
-    </b-dropdown>
+      <button
+        class="btn dropdown-toggle btn-secondary text-decoration-none m-1 admin-button btn-rounded-icon dropdown-toggle-no-caret"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <i class="saooti-user-octopus text-dark" />
+        <span class="visually-hidden">Profile</span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <li>
+          <a
+            class="dropdown-item"
+            href="/sso/login"
+          >
+            {{ $t('Login') }}
+          </a>
+        </li>
+        <li v-if="!isPodcastmaker">
+          <router-link
+            class="dropdown-item"
+            to="/main/pub/create"
+          >
+            {{
+              $t('Create an account')
+            }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
+
+<script lang="ts">
+import { state } from '../../store/paramStore';
+
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'HomeDropdown',
+  props: {
+    isEducation: { default: false, type: Boolean},
+  },
+
+  data() {
+    return {
+      showMenu: false as boolean
+    };
+  },
+
+  computed: {
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    authenticated(): boolean {
+      return this.$store.state.authentication.isAuthenticated;
+    },
+    isOrganisation(): boolean {
+      return state.generalParameters.isOrganisation;
+    },
+    isContribution(): boolean {
+      return state.generalParameters.isContribution;
+    },
+  },
+
+
+  methods: {
+    displayMenuPhone(hidden: boolean): void {
+      if (hidden) {
+        (this.$refs.menu as HTMLElement).className='menu hid';
+      } else {
+        (this.$refs.menu as HTMLElement).className='menu';
+      }
+    },
+    goToUrl(url: string): void {
+      if (this.authenticated) {
+        this.$router.push(url);
+      }
+    },
+  },
+})
+</script>
+
 <style lang="scss">
 .top-bar-dropdown {
   .main-button-dropdown {
@@ -83,7 +183,6 @@
     padding-left: 15px;
     margin-right: 30px;
   }
-
   .btn-group .dropdown-toggle-split {
     align-items: center;
     border-radius: 50% !important;
@@ -100,11 +199,6 @@
       right: auto;
     }
   }
-  .b-dropdown-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
   .dropdown-header {
     display: flex;
     align-items: center;
@@ -133,55 +227,4 @@
     }
   }
 }
-</style>
-
-<script lang="ts">
-import { state } from '../../store/paramStore';
-
-import { defineComponent, ref } from 'vue'
-export default defineComponent({
-  name: 'HomeDropdown',
-
-  props: ['isEducation'],
-
-  data() {
-    return {};
-  },
-  setup() {
-    const menu:any =ref(null);
-    return {
-      menu,
-    };
-  },
-
-  computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-    authenticated():boolean {
-      return this.$store.state.authentication.isAuthenticated;
-    },
-    isOrganisation() {
-      return state.generalParameters.isOrganisation;
-    },
-    isContribution() {
-      return state.generalParameters.isContribution;
-    },
-  },
-
-  methods: {
-    displayMenuPhone(hidden: any) {
-      if (hidden) {
-        this.menu.className = 'menu hid';
-      } else {
-        this.menu.className = 'menu';
-      }
-    },
-    goToUrl(url: any) {
-      if (this.authenticated) {
-        this.$router.push(url);
-      }
-    },
-  },
-});
-</script>
+</style>

package/src/components/misc/LeftMenu.vue

@@ -1,102 +1,211 @@
 <template>
-  <div class="left-menu-container" v-show="displayMenu">
+  <div
+    v-show="displayMenu"
+    class="left-menu-container"
+  >
     <div class="routes-container h5">
       <router-link
-        @click="onMenuClick"
-        class="text-dark font-weight-bold mb-3 show-phone"
+        class="text-dark fw-bold mb-3 show-phone home-route"
         :to="{
           name: 'home',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId,
+                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                   rubriquesId: rubriqueQueryParam},
         }"
-        >{{ $t('Home') }}</router-link
+        @click="onMenuClick"
       >
+        {{ $t('Home') }}
+      </router-link>
       <router-link
-        @click="onMenuClick"
-        v-if="isLiveTab && !isPodcastmaker && filterOrga && filterOrgaLive"
-        class="text-dark font-weight-bold mb-3"
+        v-if="isLiveTab && filterOrga && filterOrgaLive"
+        class="text-dark fw-bold mb-3 live-route"
         :to="{
           name: 'lives',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId},
         }"
-        >{{ $t('Live') }}</router-link
+        @click="onMenuClick"
       >
+        {{ $t('Live') }}
+      </router-link>
       <router-link
-        @click="onMenuClick"
-        class="text-dark font-weight-bold mb-3"
+        class="text-dark fw-bold mb-3 podcasts-route"
         :to="{
           name: 'podcasts',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId,
+                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                   rubriquesId: rubriqueQueryParam},
         }"
-        >{{ $t('Podcasts') }}</router-link
+        @click="onMenuClick"
       >
+        {{ $t('Podcasts') }}
+      </router-link>
       <router-link
-        @click="onMenuClick"
-        class="text-dark font-weight-bold mb-3"
+        class="text-dark fw-bold mb-3 emissions-route"
         :to="{
           name: 'emissions',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId,
+                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
+                   rubriquesId: rubriqueQueryParam},
         }"
-        >{{ $t('Emissions') }}</router-link
+        @click="onMenuClick"
       >
+        {{ $t('Emissions') }}
+      </router-link>
       <router-link
-        @click="onMenuClick"
         v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-        class="text-dark font-weight-bold mb-3"
+        class="text-dark fw-bold mb-3 productors-route"
         :to="{
           name: 'productors',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
-        >{{ $t('Productors') }}</router-link
+        @click="onMenuClick"
       >
+        {{ $t('Productors') }}
+      </router-link>
       <router-link
-        @click="onMenuClick"
-        class="text-dark font-weight-bold mb-3"
+        class="text-dark fw-bold mb-3 participants-route"
         :to="{
           name: 'participants',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
-        >{{ $t('Speakers') }}</router-link
+        @click="onMenuClick"
       >
+        {{ $t('Speakers') }}
+      </router-link>
       <router-link
         :to="{
           name: 'playlists',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
-        class="linkHover pb-3 text-dark font-weight-bold"
-        >{{ $t('Playlists') }}</router-link
+        class="linkHover pb-3 text-dark fw-bold playlists-route"
+        @click="onMenuClick"
       >
+        {{ $t('Playlists') }}
+      </router-link>
       <OrganisationChooserLight
+        v-if="!isPodcastmaker"
         width="auto"
         page="leftMenu"
         :defaultanswer="$t('No organisation filter')"
-        @selected="onOrganisationSelected"
         :value="organisationId"
         :light="true"
-        class="mr-2 hide-top-bar"
+        class="me-2 hide-top-bar"
         :reset="reset"
-        v-if="!isPodcastmaker"
+        @selected="onOrganisationSelected"
       />
-      <hr class="divided-line show-phone" />
+      <hr class="divided-line show-phone">
       <router-link
-        @click="onMenuClick"
-        class="text-dark font-weight-bold mb-3 show-phone"
         v-for="category in categories"
-        v-bind:key="category.id"
+        :key="category.id"
+        class="text-dark fw-bold mb-3 show-phone category-route"
         :to="{
           name: 'category',
           params: { iabId: category.id },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId },
         }"
+        @click="onMenuClick"
       >
-        {{ category.name }}</router-link
-      >
+        {{ category.name }}
+      </router-link>
       <div class="d-flex hostedBy">
-        <span>{{ $t('Hosted by') }}</span
-        ><span class="ml-1 mr-1 primary-color">Saooti</span>
+        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
       </div>
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import { state } from '../../store/paramStore';
+import { orgaFilter } from '../mixins/organisationFilter';
+import { Category } from '@/store/class/category';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { defineComponent, defineAsyncComponent } from 'vue';
+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;
+    },
+    categories(): Array<Category> {
+      return this.$store.state.categories.filter((c: Category) => {
+        if (this.isPodcastmaker) return c.podcastOrganisationCount;
+        return c.podcastCount;
+      });
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    filterOrgaLive(): string {
+      return this.$store.state.filter.live;
+    },
+    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();
+      }
+      return undefined;
+    },
+  },
+  watch: {
+    filterOrga(): void {
+      if (this.filterOrga) {
+        this.organisationId = this.filterOrga;
+      } else {
+        this.reset = !this.reset;
+      }
+    },
+  },
+
+  mounted() {
+    if (this.filterOrga) {
+      this.organisationId = this.filterOrga;
+    }
+  },
+  
+  methods: {
+    onMenuClick() {
+      this.$emit('update:displayMenu', false);
+    },
+    async onOrganisationSelected(organisation: any) {
+      const queries = this.$route.query;
+      if (organisation && organisation.id) {
+        if (queries.productor !== organisation.id) {
+          this.$router.push({ query: {...queries, ...{productor: organisation.id} } });
+        }
+        await this.selectOrganisation(organisation.id);
+      } else {
+        if (this.$route.query.productor) {
+          this.$router.push({ query: {...queries, ...{productor: undefined} } });
+        }
+        this.$store.commit('filterOrga', { orgaId: undefined });
+      }
+    },
+  },
+})
+</script>
+
 <style lang="scss">
 .left-menu-container {
   position: fixed;
@@ -148,97 +257,5 @@
     font-size: 0.3rem;
     padding: 2rem 0 1.5rem 1rem;
   }
-  .default-multiselect-width .basic-select {
-    background: #eee !important;
-    width: 98%;
-  }
 }
-</style>
-<script lang="ts">
-import OrganisationChooserLight from '../display/organisation/OrganisationChooserLight.vue';
-import { state } from '../../store/paramStore';
-const octopusApi = require('@saooti/octopus-api');
-
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'LeftMenu',
-
-  components: {
-    OrganisationChooserLight,
-  },
-
-  props: ['displayMenu', 'isEducation'],
-
-  emits: ['update:displayMenu'],
-
-  mounted() {
-    if (this.filterOrga) {
-      this.organisationId = this.filterOrga;
-    }
-  },
-
-  data() {
-    return {
-      organisationId: undefined as any,
-      reset: false,
-    };
-  },
-
-  methods: {
-    onMenuClick() {
-      this.$emit('update:displayMenu', false);
-    },
-    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 {
-        if (this.$route.query.productor) {
-          this.$router.push({ query: { productor: undefined } });
-        }
-        this.$store.commit('filterOrga', { orgaId: undefined });
-      }
-    },
-  },
-
-  computed: {
-    isLiveTab() {
-      return state.generalParameters.isLiveTab;
-    },
-    categories() {
-      return state.generalParameters.allCategories.filter((c: { podcastOrganisationCount: any; podcastCount: any; }) => {
-        if (this.isPodcastmaker) return c.podcastOrganisationCount;
-        return c.podcastCount;
-      });
-    },
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-    filterOrga():any {
-      return this.$store.state.filter.organisationId;
-    },
-    filterOrgaLive():any {
-      return this.$store.state.filter.live;
-    },
-  },
-
-  watch: {
-    filterOrga(newVal) {
-      if (newVal) {
-        this.organisationId = newVal;
-      } else {
-        this.reset = !this.reset;
-      }
-    },
-  },
-});
-</script>
+</style>