@saooti/octopus-sdk 0.28.16 → 1.1.1

package/src/components/misc/HomeDropdown.vue

@@ -1,185 +1,128 @@
 <template>
   <div
-    class="d-flex align-items-center justify-content-end flex-no-wrap top-bar-dropdown"
+    class="d-flex align-items-center"
   >
-    <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')"
+    <button
       v-if="authenticated"
+      class="btn btn-primary hide-phone m-1"
+      @click="goToUrl('/main/priv/backoffice')"
     >
-      <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
+      {{ $t('My space') }}
+    </button>
+    <div
+      class="dropdown btn-group"
+    >
+      <button
+        class="btn dropdown-toggle m-1 admin-button dropdown-toggle-no-caret saooti-user"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        :title="$t('User menu')"
+      />
+      <div class="dropdown-menu dropdown-menu-right px-4">
+        <template v-if="!authenticated">
+          <a
+            class="dropdown-item"
+            href="/sso/login"
           >
-          <b-dropdown-item
-            to="/main/priv/edit/profile"
+            {{ $t('Login') }}
+          </a>
+          <router-link
             v-if="!isPodcastmaker"
-            >{{ $t('Edit my profile') }}</b-dropdown-item
+            class="dropdown-item"
+            to="/main/pub/create"
           >
-          <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/"
-            rel="noopener"
-            target="_blank"
-            v-if="!isEducation"
-            >{{ $t('Help') }}</b-dropdown-item
+            {{ $t('Create an account') }}
+          </router-link>
+        </template>
+        <template v-else>
+          <template
+            v-for="routerBack in routerBackoffice"
+            :key="routerBack.path"
           >
-          <b-dropdown-item
-            href="https://help.octopus.saooti.com/"
-            rel="noopener"
-            target="_blank"
-            v-if="!isEducation"
-            >{{ $t('TutoMag') }}</b-dropdown-item
+            <router-link
+              v-if="!isPodcastmaker && routerBack.condition"
+              :class="routerBack.class"
+              :to="routerBack.path"
+            >
+              {{ routerBack.title }}
+            </router-link>
+          </template>
+          <template v-if="!isEducation">
+            <hr class="dropdown-divider">
+            <template
+              v-for="helpLink in helpLinks"
+              :key="helpLink.title"
+            >
+              <a
+                :href="helpLink.href"
+                class="dropdown-item"
+                rel="noopener"
+                target="_blank"
+              >
+                {{ helpLink.title }}
+              </a>
+            </template>
+          </template>
+          <hr class="dropdown-divider">
+          <a
+            class="dropdown-item"
+            href="/sso/logout"
           >
-          <b-dropdown-divider></b-dropdown-divider>
-          <b-dropdown-item href="/sso/logout">{{
-            $t('Logout')
-          }}</b-dropdown-item>
+            {{ $t('Logout') }}
+          </a>
         </template>
-      </b-dropdown-text>
-    </b-dropdown>
-    <b-dropdown
-      right
-      toggle-class="text-decoration-none  m-1 admin-button btn-rounded-icon"
-      no-caret
-      v-else
-    >
-      <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>
+        <router-link
+          class="dropdown-item"
+          to="/main/pub/contact"
+        >
+          {{ $t('Contact') }}
+        </router-link>
+      </div>
+    </div>
   </div>
 </template>
-<style lang="scss">
-.top-bar-dropdown {
-  .main-button-dropdown {
-    padding-bottom: 0.4rem;
-    width: 140px;
-    text-align: left;
-    padding-left: 15px;
-    margin-right: 30px;
-  }
-
-  .btn-group .dropdown-toggle-split {
-    align-items: center;
-    border-radius: 50% !important;
-    width: 40px !important;
-    height: 40px !important;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    right: 5px;
-    border: 4px solid white !important;
-    z-index: 2;
-    @media (max-width: 650px) {
-      position: relative;
-      right: auto;
-    }
-  }
-  .b-dropdown-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .dropdown-header {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-  }
-  .linkSpace {
-    display: none;
-  }
-
-  /** PHONES*/
-  @media (max-width: 1200px) {
-    .linkSpace {
-      display: block;
-    }
-  }
-  @media (max-width: 650px) {
-    .dropdown {
-      .main-button-dropdown {
-        display: none;
-      }
-    }
-    .btn-group .dropdown-toggle-split {
-      height: 30px;
-      width: 30px;
-      border-radius: 50% !important;
-    }
-  }
-}
-</style>
 
 <script lang="ts">
 import { state } from '../../store/paramStore';
 
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue'
+import { Organisation } from '@/store/class/general/organisation';
+export default defineComponent({
   name: 'HomeDropdown',
   props: {
-    isEducation: { default: false as boolean},
-  },
-
-  data() {
-    return {};
+    isEducation: { default: false, type: Boolean},
   },
-
   computed: {
+    organisationsAvailable(): Array<Organisation>{
+      return this.$store.state.profile.organisations?? [];
+    },
+    helpLinks(){
+      return [
+        {title:this.$t('Help'), href:'https://help.octopus.saooti.com/Aide/'},
+        {title:this.$t('TutoMag'),href:"https://help.octopus.saooti.com/"}];
+    },
+    routerBackoffice(){
+      return [
+        {title:this.$t('Upload'),class:"btn btn-primary w-100", path:'/main/priv/upload', condition: (state.generalParameters.isContribution as boolean)},
+        {title:this.$t('My space'),class:"show-phone dropdown-item", path:'/main/priv/backoffice', condition: true},
+        {title:this.$t('Edit my profile'),class:"dropdown-item", path:'/main/priv/edit/profile', condition: true},
+        {title:this.$t('Edit my organisation'),class:"dropdown-item", path:'/main/priv/edit/organisation', condition: (state.generalParameters.isOrganisation as boolean) || 1<this.organisationsAvailable.length}];
+    },
+    
     isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
+      return (state.generalParameters.podcastmaker as boolean);
     },
     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>
+})
+</script>

package/src/components/misc/LeftMenu.vue

@@ -1,195 +1,85 @@
 <template>
-  <div class="left-menu-container" v-show="displayMenu">
-    <div class="routes-container h5">
+  <div
+    v-show="displayMenu"
+    class="left-menu-container"
+  >
+    <template
+      v-for="link in routerLinkArray"
+      :key="link.routeName"
+    >
       <router-link
-        @click.native="onMenuClick"
-        class="text-dark font-weight-bold mb-3 show-phone home-route"
+        v-if="link.condition"
+        :class="'home'===link.routeName ? 'show-phone' : ''"
         :to="{
-          name: 'home',
-          query: { productor: $store.state.filter.organisationId,
-                  iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                  rubriquesId: rubriqueQueryParam},
+          name: link.routeName,
+          query: getQueriesRouter(link.routeName),
         }"
-        >{{ $t('Home') }}</router-link
+        @click="onMenuClick"
       >
-      <router-link
-        @click.native="onMenuClick"
-        v-if="isLiveTab && filterOrga && filterOrgaLive"
-        class="text-dark font-weight-bold mb-3 live-route"
-        :to="{
-          name: 'lives',
-          query: { productor: $store.state.filter.organisationId},
-        }"
-        >{{ $t('Live') }}</router-link
-      >
-      <router-link
-        @click.native="onMenuClick"
-        class="text-dark font-weight-bold mb-3 podcasts-route"
-        :to="{
-          name: 'podcasts',
-          query: { productor: $store.state.filter.organisationId,
-                  iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
-                  rubriquesId: rubriqueQueryParam},
-        }"
-        >{{ $t('Podcasts') }}</router-link
-      >
-      <router-link
-        @click.native="onMenuClick"
-        class="text-dark font-weight-bold mb-3 emissions-route"
-        :to="{
-          name: 'emissions',
-          query: { productor: $store.state.filter.organisationId,
-                  iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined ,
-                  rubriquesId: rubriqueQueryParam},
-        }"
-        >{{ $t('Emissions') }}</router-link
-      >
-      <router-link
-        @click.native="onMenuClick"
-        v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-        class="text-dark font-weight-bold mb-3 productors-route"
-        :to="{
-          name: 'productors',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        >{{ $t('Productors') }}</router-link
-      >
-      <router-link
-        @click.native="onMenuClick"
-        class="text-dark font-weight-bold mb-3 participants-route"
-        :to="{
-          name: 'participants',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        >{{ $t('Speakers') }}</router-link
-      >
-      <router-link
-      @click.native="onMenuClick"
-        :to="{
-          name: 'playlists',
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="linkHover pb-3 text-dark font-weight-bold playlists-route"
-        >{{ $t('Playlists') }}</router-link
-      >
-      <OrganisationChooserLight
-        width="auto"
-        page="leftMenu"
-        :defaultanswer="$t('No organisation filter')"
-        @selected="onOrganisationSelected"
-        :value="organisationId"
-        :light="true"
-        class="mr-2 hide-top-bar"
-        :reset="reset"
-        v-if="!isPodcastmaker"
-      />
-      <hr class="divided-line show-phone" />
-      <router-link
-        @click.native="onMenuClick"
-        class="text-dark font-weight-bold mb-3 show-phone category-route"
-        v-for="category in categories"
-        v-bind:key="category.id"
-        :to="{
-          name: 'category',
-          params: { iabId: category.id },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-      >
-        {{ category.name }}</router-link
-      >
-      <div class="d-flex hostedBy">
-        <span>{{ $t('Hosted by') }}</span
-        ><span class="ml-1 mr-1 primary-color">Saooti</span>
-      </div>
-    </div>
+        {{ link.title }}
+      </router-link>
+    </template>
+    <OrganisationChooserLight
+      v-if="!isPodcastmaker"
+      width="auto"
+      page="leftMenu"
+      :defaultanswer="$t('No organisation filter')"
+      :value="organisationId"
+      :reset="reset"
+      @selected="onOrganisationSelected"
+    />
+    <hr class="show-phone">
+    <router-link
+      v-for="category in categories"
+      :key="category.id"
+      class="show-phone"
+      :to="{
+        name: 'category',
+        params: { iabId: category.id },
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      @click="onMenuClick"
+    >
+      {{ category.name }}
+    </router-link>
   </div>
 </template>
-<style lang="scss">
-.left-menu-container {
-  position: fixed;
-  top: 3rem;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  background: #fff;
-  width: 20%;
-  padding: 2rem;
-
-  .routes-container {
-    display: flex;
-    flex-direction: column;
-    font-size: 0.9rem;
-  }
-  .hostedBy {
-    font-size: 0.6rem;
-    position: absolute;
-    bottom: 10px;
-    right: 0;
-  }
-}
-/** PHONES*/
-@media (max-width: 960px) {
-  .left-menu-container {
-    width: 75%;
-    max-height: 80%;
-    left: 0.5rem;
-    top: 2.5rem;
-    padding-left: 1rem;
-    font-size: 0.5rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 0.2rem 1rem rgba(79, 83, 90, 0.3);
 
-    .routes-container {
-      overflow-y: scroll;
-      height: 100%;
-    }
-  }
-  .divided-line {
-    margin: 0.5rem 0;
-    border-top: 1px solid lightgray;
-  }
-}
-@media (max-width: 450px) {
-  .left-menu-container {
-    width: 94%;
-    font-size: 0.3rem;
-    padding: 2rem 0 1.5rem 1rem;
-  }
-}
-</style>
 <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';
-export default orgaFilter.extend({
+import { Category } from '@/store/class/general/category';
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { Organisation } from '@/store/class/general/organisation';
+const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
+export default defineComponent({
   name: 'LeftMenu',
-
   components: {
-    OrganisationChooserLight: () => import('../display/organisation/OrganisationChooserLight.vue'),
+    OrganisationChooserLight,
   },
-
+  mixins:[orgaFilter],
   props: {
-    displayMenu: { default: false as boolean},
-    isEducation: { default: false as boolean},
+    displayMenu: { default: false, type: Boolean},
+    isEducation: { default: false, type: Boolean},
   },
-
+  emits: ['update:displayMenu'],
   data() {
     return {
       organisationId: undefined as string|undefined,
       reset: false as boolean,
     };
   },
-
-  mounted() {
-    if (this.filterOrga) {
-      this.organisationId = this.filterOrga;
-    }
-  },
-
   computed: {
-    isLiveTab(): boolean {
-      return state.generalParameters.isLiveTab;
+    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) => {
@@ -198,7 +88,7 @@ export default orgaFilter.extend({
       });
     },
     isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker;
+      return (state.generalParameters.podcastmaker as boolean);
     },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
@@ -207,40 +97,79 @@ export default orgaFilter.extend({
       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){
+      if(this.$store.state.filter?.rubriqueFilter?.length){
         return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
       }
       return undefined;
     },
   },
+  watch: {
+    filterOrga: {
+      immediate: true,
+      handler() {
+        if (this.filterOrga) {
+          this.organisationId = this.filterOrga;
+        } else {
+          this.reset = !this.reset;
+        }
+      },
+    },
+  },
   
   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?.id,
+                   rubriquesId: this.rubriqueQueryParam}
+    },
     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} } });
-        }
+    async onOrganisationSelected(organisation: Organisation|undefined) {
+      if (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 });
-      }
-    },
-  },
-  watch: {
-    filterOrga(): void {
-      if (this.filterOrga) {
-        this.organisationId = this.filterOrga;
-      } else {
-        this.reset = !this.reset;
+        return;
       }
+      this.removeSelectedOrga();
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+.left-menu-container {
+  position: fixed;
+  top: 3rem;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background: #fff;
+  width: 20%;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9rem;
+
+  a{
+    color: black !important;
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+  /** PHONES*/
+  @media (max-width: 960px) {
+    width: 75%;
+    max-height: 80%;
+    top: 2.5rem;
+    overflow-y: auto;
+    height: 100%;
+  }
+  @media (max-width: 450px) {
+    width: 94%;
+  }
+}
+}
+</style>