@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/misc/ClassicPopover.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    v-show="show && !disable"
+    :id="'popover' + target"
+    ref="popover"
+    tabindex="0"
+    class="octopus-popover"
+    :class="onlyClick ? 'octopus-dropdown' : ''"
+    :style="positionInlineStyle"
+    @blur="clearDataBlur"
+  >
+    <div v-if="title" class="bg-secondary p-2">
+      {{ title }}
+    </div>
+    <div class="p-2">
+      <slot>{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ClassicPopover",
+  props: {
+    content: { type: String, default: "" },
+    title: { type: String, default: "" },
+    target: { type: String, required: true },
+    disable: { type: Boolean, default: false },
+    onlyClick: { type: Boolean, default: false },
+    isFixed: { type: Boolean, default: false },
+    relativeClass: { type: String, default: undefined },
+    leftPos: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      show: false as boolean,
+      isClick: false as boolean,
+      posX: 0 as number,
+      posY: 0 as number,
+      targetElement: null as HTMLElement | null,
+    };
+  },
+  computed: {
+    popoverId(): string {
+      return "popover" + this.target;
+    },
+    positionInlineStyle(): string {
+      return `left: ${this.posX}px; top: ${this.posY}px;`;
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  unmounted() {
+    this.removeListeners();
+  },
+  methods: {
+    init() {
+      this.targetElement = document.getElementById(this.target);
+      if (this.targetElement) {
+        if (!this.onlyClick) {
+          this.targetElement.addEventListener(
+            "mouseenter",
+            this.setPopoverData,
+          );
+          this.targetElement.addEventListener("mouseleave", this.clearData);
+        }
+        this.targetElement.addEventListener("click", this.setPopoverData);
+        this.targetElement.addEventListener("blur", this.clearDataBlur);
+      }
+    },
+    removeListeners() {
+      if (this.targetElement) {
+        if (!this.onlyClick) {
+          this.targetElement.removeEventListener(
+            "mouseenter",
+            this.setPopoverData,
+          );
+          this.targetElement.removeEventListener("mouseleave", this.clearData);
+        }
+        this.targetElement.removeEventListener("click", this.setPopoverData);
+        this.targetElement.addEventListener("blur", this.clearDataBlur);
+      }
+    },
+    setPopoverData(e: MouseEvent | PointerEvent) {
+      if (this.disable || !e || !e.target) {
+        return;
+      }
+      if ("click" === e.type) {
+        if (this.show && this.isClick) {
+          this.isClick = false;
+          this.clearData();
+          return;
+        }
+        this.isClick = true;
+      }
+      this.show = true;
+      let parentLeft = 0;
+      let parentRight = 0;
+      let parentTop = 0;
+      let parentScrollTop = 0;
+      if (this.relativeClass) {
+        const modalBody = document.getElementsByClassName(
+          this.relativeClass,
+        )[0];
+        if (undefined === modalBody) {
+          (this.$refs.popover as HTMLElement).style.display = "block";
+          this.posX = 0;
+          this.posY = 0;
+          return;
+        }
+        const modalBodyRect = modalBody.getBoundingClientRect();
+        parentLeft = modalBodyRect.left;
+        parentRight = modalBodyRect.right;
+        parentTop = modalBodyRect.top;
+        parentScrollTop = modalBody.scrollTop;
+      }
+      const rectElement = (e.target as HTMLElement).getBoundingClientRect();
+      (this.$refs.popover as HTMLElement).style.display = "block";
+      this.posX = this.leftPos
+        ? rectElement.right -
+          parentRight -
+          (this.$refs.popover as HTMLElement).clientWidth
+        : rectElement.left - parentLeft;
+      this.posY =
+        rectElement.bottom +
+        parentScrollTop -
+        parentTop +
+        (this.isFixed ? 0 : window.scrollY) +
+        5;
+    },
+    async clearDataBlur(e: FocusEvent) {
+      if (!e.relatedTarget) {
+        return this.clearClick();
+      }
+      const myElement = e.relatedTarget as HTMLElement;
+      if (this.popoverId === myElement.id) {
+        return;
+      }
+      const parent = this.$refs.popover as HTMLElement;
+      if (null === parent || !parent.contains(myElement)) {
+        return this.clearClick();
+      }
+      if (
+        null === myElement.classList ||
+        !myElement.classList.contains("octopus-dropdown-item")
+      ) {
+        return;
+      }
+      if (!(myElement as HTMLAnchorElement).href) {
+        return this.clearClick();
+      }
+      if ("true" === myElement.getAttribute("reallink")) {
+        myElement.click();
+      } else {
+        await this.$router.push((myElement as HTMLAnchorElement).pathname);
+      }
+      this.$nextTick(() => {
+        this.isClick = false;
+        this.clearData();
+      });
+    },
+    clearClick() {
+      this.isClick = false;
+      this.clearData();
+    },
+    clearData() {
+      if (this.isClick) {
+        return;
+      }
+      this.show = false;
+      this.posX = 0;
+      this.posY = 0;
+    },
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/_variables.scss";
+.octopus-popover {
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: $octopus-borderradius;
+  position: absolute;
+  z-index: 9999;
+  &.octopus-dropdown {
+    min-width: 200px;
+    .octopus-dropdown-item {
+      display: flex;
+      justify-content: center;
+      color: rgb(29, 29, 29);
+      width: 100%;
+      padding: 0.25rem 1rem;
+      font-weight: 400;
+      text-decoration: none;
+      white-space: nowrap;
+      background-color: transparent;
+      border: 0;
+      &:hover {
+        background: rgb(243, 243, 243);
+      }
+    }
+    hr {
+      margin: 0.5rem 0;
+      overflow: hidden;
+      border-top: 1px solid #ccc;
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/components/misc/{Spinner.vue → ClassicSpinner.vue}

@@ -1,37 +1,36 @@
 <template>
-  <div
-    class="octopus-spinner"
-    :class="small?'small':''"
-  />
+  <div class="octopus-spinner" :class="small ? 'small' : ''" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: "Spinner",
+  name: "ClassicSpinner",
   props: {
     small: { default: false, type: Boolean },
   },
-})
+});
 </script>
 <style lang="scss">
-.octopus-app .octopus-spinner{
+.octopus-app .octopus-spinner {
   display: inline-block;
-  width:2rem;
-  height:2rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
   border: 2px solid currentcolor;
   border-right-color: transparent;
   flex-shrink: 0;
 
-  &.small{
-    width:1rem;
-    height:1rem;
+  &.small {
+    width: 1rem;
+    height: 1rem;
   }
 
   @keyframes spinner-border {
-    to { transform: rotate(360deg); }
+    to {
+      transform: rotate(360deg);
+    }
   }
 }
-</style>
+</style>

package/src/components/misc/ErrorMessage.vue

@@ -1,15 +1,7 @@
 <template>
-  <div
-    v-if="message && message.length"
-    class="d-flex"
-  >
-    <div
-      class="d-flex align-items-center bg-error-message p-2 rounded my-1"
-    >
-      <span
-        :title="$t('Warning')"
-        class="saooti-warning text-danger me-1"
-      />
+  <div v-if="message && message.length" class="d-flex">
+    <div class="d-flex align-items-center bg-error-message p-2 rounded my-1">
+      <span :title="$t('Warning')" class="saooti-warning text-danger me-1" />
       <div class="alert-text">
         {{ message }}
       </div>
@@ -17,20 +9,20 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ErrorMessage',
+  name: "ErrorMessage",
   props: {
-    message: { default: undefined, type: String},
+    message: { default: undefined, type: String },
   },
-})
+});
 </script>
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .bg-error-message {
     background-color: #ffd84a9c;
   }
-  .alert-text{
+  .alert-text {
     color: darkred;
   }
 }

package/src/components/misc/FooterSection.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    id="footer"
+    ref="footer"
+    class="d-flex align-items-center justify-content-between border-top mt-auto"
+  >
+    <div v-if="!isPodcastmaker" class="d-flex flex-column px-1">
+      <div class="text-dark my-1 special-select-align-magic-trick">
+        &copy; Saooti 2019
+      </div>
+      <router-link
+        v-for="link in routerLinkSecondArray"
+        :key="link.routeName"
+        class="link-hover my-1 special-select-align-magic-trick"
+        :to="link.routeName"
+      >
+        {{ link.title }}
+      </router-link>
+      <ClassicSelect
+        v-model:textInit="language"
+        :display-label="false"
+        id-select="language-chooser-select"
+        :label="$t('Change locale')"
+        :transparent="true"
+        :options="[
+          { title: 'Deutsch', value: 'de' },
+          { title: 'English', value: 'en' },
+          { title: 'Español', value: 'es' },
+          { title: 'Français', value: 'fr' },
+          { title: 'Italiano', value: 'it' },
+          { title: 'Slovenščina', value: 'sl' },
+        ]"
+        class="mb-2"
+      />
+    </div>
+    <a
+      v-if="isPodcastmaker && isContactLink"
+      id="footer-contact"
+      class="link-hover"
+      :href="isContactLink"
+      rel="noopener"
+      target="_blank"
+      >{{ $t("Contact") }}</a
+    >
+    <div class="d-flex align-items-center">
+      <div class="hosted-by">
+        {{ $t("Hosted by") }}<span class="ms-1 me-1 text-primary">Saooti</span>
+      </div>
+
+      <AcpmImage v-if="isGarRole" />
+      <a
+        v-else
+        href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
+        rel="noopener"
+        target="_blank"
+        :title="$t('Octopus is ACPM Podcast accredited')"
+      >
+        <AcpmImage />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import cookies from "../mixins/cookies";
+import ClassicSelect from "../form/ClassicSelect.vue";
+import AcpmImage from "./AcpmImage.vue";
+import { state } from "../../stores/ParamSdkStore";
+import { loadLocaleMessages } from "@/i18n";
+import octopusApi from "@saooti/octopus-api";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState, mapActions } from "pinia";
+import { Category } from "@/stores/class/general/category";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "FooterSection",
+  components: {
+    ClassicSelect,
+    AcpmImage,
+  },
+
+  mixins: [cookies],
+  data() {
+    return {
+      language: this.$i18n.locale,
+    };
+  },
+  computed: {
+    ...mapState(useGeneralStore, ["storedCategories", "platformEducation"]),
+    ...mapState(useFilterStore, [
+      "filterRubrique",
+      "filterOrgaId",
+      "filterIab",
+    ]),
+    ...mapState(useAuthStore, ["isGarRole"]),
+    routerLinkSecondArray() {
+      const links = [
+        { title: this.$t("Contact"), routeName: "/main/pub/contact" },
+        { title: this.$t("Term of use"), routeName: "/main/pub/cgu" },
+      ];
+
+      if (!this.isGarRole) {
+        links.push({
+          title: this.$t("Used libraries"),
+          routeName: "/main/pub/libraries",
+        });
+      }
+      return links;
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
+    isContactLink(): string | undefined {
+      return state.footer.contactLink;
+    },
+    rubriqueQueryParam(): string | undefined {
+      if (this.filterRubrique?.length) {
+        return this.filterRubrique
+          .map(
+            (value: RubriquageFilter) =>
+              value.rubriquageId + ":" + value.rubriqueId,
+          )
+          .join();
+      }
+      return undefined;
+    },
+  },
+  watch: {
+    language() {
+      this.changeLanguage();
+    },
+  },
+  methods: {
+    ...mapActions(useGeneralStore, ["storedUpdateCategories"]),
+    ...mapActions(useFilterStore, ["filterUpdateIab"]),
+    getQueriesRouter(routeName: string) {
+      if (
+        "podcasts" !== routeName &&
+        "emissions" !== routeName &&
+        "home" !== routeName
+      ) {
+        return { productor: this.filterOrgaId };
+      }
+      return {
+        productor: this.filterOrgaId,
+        iabId: this.filterIab?.id,
+        rubriquesId: this.rubriqueQueryParam,
+      };
+    },
+    changeLanguage(): void {
+      this.setCookie("octopus-language", this.language);
+      loadLocaleMessages(this.$i18n, this.language, this.platformEducation);
+      octopusApi
+        .fetchDataWithParams<Array<Category>>(
+          0,
+          `iab/list${
+            state.octopusApi.organisationId
+              ? "/" + state.octopusApi.organisationId
+              : ""
+          }`,
+          { lang: this.$i18n.locale },
+        )
+        .then((data: Array<Category>) => {
+          this.storedUpdateCategories(data);
+          if (this.filterIab) {
+            const category = this.storedCategories.filter((c: Category) => {
+              return c.id === this.filterIab?.id;
+            });
+            if (category.length) {
+              this.filterUpdateIab(category[0]);
+            }
+          }
+        });
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+.octopus-app {
+  #footer {
+    font-size: 0.6rem;
+    bottom: 0;
+    z-index: 10;
+    background: white;
+    padding: 0 2rem;
+    a {
+      color: #666;
+    }
+    .special-select-align-magic-trick {
+      margin-left: 0.16rem;
+    }
+  }
+}
+</style>

package/src/components/misc/HomeDropdown.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="d-flex align-items-center"
-  >
+  <div class="d-flex align-items-center">
     <router-link
       v-if="isAuthenticatedWithOrga"
       :title="$t('My space')"
@@ -19,33 +17,26 @@
       class="btn m-1 admin-button saooti-user"
       :title="$t('User menu')"
     />
-    <Popover
+    <ClassicPopover
       target="home-dropdown"
       :only-click="true"
       :is-fixed="true"
       :left-pos="true"
     >
       <template v-if="!isAuthenticated">
-        <a
-          class="octopus-dropdown-item"
-          href="/sso/login"
-          realLink="true"
-        >
-          {{ $t('Login') }}
+        <a class="octopus-dropdown-item" href="/sso/login" realLink="true">
+          {{ $t("Login") }}
         </a>
         <router-link
           v-if="!isPodcastmaker"
           class="octopus-dropdown-item"
           to="/main/pub/create"
         >
-          {{ $t('Create an account') }}
+          {{ $t("Create an account") }}
         </router-link>
       </template>
       <template v-else>
-        <template
-          v-for="routerBack in routerBackoffice"
-          :key="routerBack.path"
-        >
+        <template v-for="routerBack in routerBackoffice" :key="routerBack.path">
           <router-link
             v-if="!isPodcastmaker && routerBack.condition"
             :class="routerBack.class"
@@ -55,11 +46,8 @@
           </router-link>
         </template>
         <template v-if="helpLinks.length">
-          <hr>
-          <template
-            v-for="helpLink in helpLinks"
-            :key="helpLink.title"
-          >
+          <hr />
+          <template v-for="helpLink in helpLinks" :key="helpLink.title">
             <a
               :href="helpLink.href"
               class="octopus-dropdown-item"
@@ -71,69 +59,81 @@
             </a>
           </template>
         </template>
-        <hr>
-        <a
-          class="octopus-dropdown-item"
-          href="/sso/logout"
-          realLink="true"
-        >
-          {{ $t('Logout') }}
+        <hr />
+        <a class="octopus-dropdown-item" href="/sso/logout" realLink="true">
+          {{ $t("Logout") }}
         </a>
       </template>
-      <router-link
-        class="octopus-dropdown-item"
-        to="/main/pub/contact"
-      >
-        {{ $t('Contact') }}
+      <router-link class="octopus-dropdown-item" to="/main/pub/contact">
+        {{ $t("Contact") }}
       </router-link>
-    </Popover>
+    </ClassicPopover>
   </div>
 </template>
 
 <script lang="ts">
-import { state } from '../../stores/ParamSdkStore';
-import Popover from '../misc/Popover.vue';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-import { Organisation } from '@/stores/class/general/organisation';
+import { state } from "../../stores/ParamSdkStore";
+import ClassicPopover from "../misc/ClassicPopover.vue";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
+import { Organisation } from "@/stores/class/general/organisation";
 export default defineComponent({
-  name: 'HomeDropdown',
-  components:{
-    Popover
+  name: "HomeDropdown",
+  components: {
+    ClassicPopover,
   },
   props: {
-    isEducation: { default: false, type: Boolean},
+    isEducation: { default: false, type: Boolean },
   },
   computed: {
-    ...mapState(useAuthStore, ['authProfile', 'isGarRole']),
-    organisationsAvailable(): Array<Organisation>{
-      return this.authProfile.organisations?? [];
+    ...mapState(useAuthStore, ["authProfile", "isGarRole"]),
+    organisationsAvailable(): Array<Organisation> {
+      return this.authProfile.organisations ?? [];
     },
-    helpLinks(){
-      if(this.isGarRole || this.isEducation){return [];}
+    helpLinks() {
+      if (this.isGarRole || this.isEducation) {
+        return [];
+      }
       return [
-        {title:this.$t('Help'), href:'https://help.octopus.saooti.com/Aide/'},
-        {title:this.$t('TutoMag'),href:"https://help.octopus.saooti.com/"}];
+        {
+          title: this.$t("Help"),
+          href: "https://help.octopus.saooti.com/Aide/",
+        },
+        { title: this.$t("TutoMag"), href: "https://help.octopus.saooti.com/" },
+      ];
     },
-    routerBackoffice(){
+    routerBackoffice() {
       return [
-        {title:this.$t('Edit my profile'),class:"octopus-dropdown-item", path:'/main/priv/edit/profile', condition: true},
-        {title:this.$t('Edit my organisation'),class:"octopus-dropdown-item", path:'/main/priv/edit/organisation', condition: this.isAuthenticatedWithOrga && ((state.generalParameters.isOrganisation as boolean) || 1<this.organisationsAvailable.length)}];
+        {
+          title: this.$t("Edit my profile"),
+          class: "octopus-dropdown-item",
+          path: "/main/priv/edit/profile",
+          condition: true,
+        },
+        {
+          title: this.$t("Edit my organisation"),
+          class: "octopus-dropdown-item",
+          path: "/main/priv/edit/organisation",
+          condition:
+            this.isAuthenticatedWithOrga &&
+            ((state.generalParameters.isOrganisation as boolean) ||
+              1 < this.organisationsAvailable.length),
+        },
+      ];
     },
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
     isAuthenticated(): boolean {
-      return undefined!==this.authProfile?.userId;
+      return undefined !== this.authProfile?.userId;
     },
     isAuthenticatedWithOrga(): boolean {
-      return state.generalParameters.authenticated??false;
+      return state.generalParameters.authenticated ?? false;
     },
     isContribution(): boolean {
-      return state.generalParameters.isContribution??false;
+      return state.generalParameters.isContribution ?? false;
     },
   },
-
-})
-</script>
+});
+</script>