@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/display/categories/CategoryList.vue

@@ -3,10 +3,7 @@
     v-if="categories.length"
     class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list"
   >
-    <div
-      ref="categoryListContainer"
-      class="category-list-container"
-    >
+    <div ref="categoryListContainer" class="category-list-container">
       <button
         v-for="category in categories"
         :ref="'category' + category.id"
@@ -23,7 +20,7 @@
       class="btn btn-primary btn-on-dark m-1 saooti-more"
       :title="$t('See more')"
     />
-    <Popover
+    <ClassicPopover
       target="categories-dropdown"
       :only-click="true"
       :is-fixed="true"
@@ -37,30 +34,30 @@
       >
         {{ category.name }}
       </button>
-    </Popover>
+    </ClassicPopover>
   </div>
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import { state } from '../../../stores/ParamSdkStore';
-import Popover from '../../misc/Popover.vue';
-import { Category } from '@/stores/class/general/category';
-import { useFilterStore } from '@/stores/FilterStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapState, mapActions } from 'pinia';
-import { defineComponent } from 'vue';
+import octopusApi from "@saooti/octopus-api";
+import { state } from "../../../stores/ParamSdkStore";
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import { Category } from "@/stores/class/general/category";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapState, mapActions } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'CategoryList',
-  components:{
-    Popover
+  name: "CategoryList",
+  components: {
+    ClassicPopover,
   },
 
   props: {
     isFilter: { default: false, type: Boolean },
     isDisplay: { default: false, type: Boolean },
   },
-  emits:['categoriesLength'],
+  emits: ["categoriesLength"],
 
   data() {
     return {
@@ -69,120 +66,137 @@ export default defineComponent({
   },
 
   computed: {
-    ...mapState(useGeneralStore, ['storedCategories', 'storedCategoriesOrga']),
-    ...mapState(useFilterStore, ['filterOrgaId']),
+    ...mapState(useGeneralStore, ["storedCategories", "storedCategoriesOrga"]),
+    ...mapState(useFilterStore, ["filterOrgaId"]),
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
     categories(): Array<Category> {
-      let arrayCategories: Array<Category>  = [];
+      let arrayCategories: Array<Category> = [];
       if (this.filterOrgaId) {
         arrayCategories = this.storedCategoriesOrga.filter((c: Category) => {
           return c.podcastOrganisationCount;
         });
-      }else{
+      } else {
         arrayCategories = this.storedCategories.filter((c: Category) => {
           if (this.isPodcastmaker) return c.podcastOrganisationCount;
           return c.podcastCount;
         });
       }
-      this.$emit('categoriesLength', arrayCategories.length);
+      this.$emit("categoriesLength", arrayCategories.length);
       return arrayCategories;
     },
-    watchVariable(): string{
+    watchVariable(): string {
       return `${this.isDisplay}|${this.categories}`;
     },
-    reloadVariable():string{
+    reloadVariable(): string {
       return `${this.filterOrgaId}|${this.storedCategories}`;
-    }
+    },
   },
   watch: {
     watchVariable: {
       deep: true,
-      immediate:true,
-      handler(){
+      immediate: true,
+      handler() {
         this.$nextTick(() => {
           this.resizeWindow();
         });
-      }
+      },
     },
-    reloadVariable:{
+    reloadVariable: {
       deep: true,
-      immediate:true,
-      handler(){
+      immediate: true,
+      handler() {
         if (this.filterOrgaId) {
           this.fetchCategories(this.filterOrgaId);
         }
-      }
-    }
+      },
+    },
   },
   mounted() {
-    window.addEventListener('resize', this.resizeWindow);
+    window.addEventListener("resize", this.resizeWindow);
   },
   beforeUnmount(): void {
-    window.removeEventListener('resize', this.resizeWindow);
+    window.removeEventListener("resize", this.resizeWindow);
   },
-  
+
   methods: {
-    ...mapActions(useFilterStore, ['filterUpdateIab']),
-    ...mapActions(useGeneralStore, ['storedUpdateCategoriesOrga']),
-    checkIfFilter(category: Category): void{
-      if(!this.isFilter){
+    ...mapActions(useFilterStore, ["filterUpdateIab"]),
+    ...mapActions(useGeneralStore, ["storedUpdateCategoriesOrga"]),
+    checkIfFilter(category: Category): void {
+      if (!this.isFilter) {
         this.$router.push({
-          name: 'category',
+          name: "category",
           params: { iabId: category.id.toString() },
           query: { productor: this.filterOrgaId },
         });
         return;
       }
       const queries = this.$route.query;
-      if(!queries.iabId || ('string'===typeof queries.iabId &&  parseInt(queries.iabId ,10) !== category.id)) {
-        this.$router.replace({ query: { ...queries, ...{ iabId: category.id.toString() }} });
+      if (
+        !queries.iabId ||
+        ("string" === typeof queries.iabId &&
+          parseInt(queries.iabId, 10) !== category.id)
+      ) {
+        this.$router.replace({
+          query: { ...queries, ...{ iabId: category.id.toString() } },
+        });
       }
       this.filterUpdateIab(category);
     },
     resizeWindow(): void {
-      const categoryList = (this.$refs.categoryListContainer as HTMLElement);
-      if(null === categoryList ||!categoryList){
+      const categoryList = this.$refs.categoryListContainer as HTMLElement;
+      if (null === categoryList || !categoryList) {
         return;
       }
-      categoryList.style.justifyContent = 'flex-start';
+      categoryList.style.justifyContent = "flex-start";
       this.hidenCategories.length = 0;
       this.categories.forEach((element: Category) => {
-        const el = (this.$refs['category' + element.id] as Array<HTMLElement>)[0];
+        const el = (
+          this.$refs["category" + element.id] as Array<HTMLElement>
+        )[0];
         if (!el) return;
-        if (el.classList.contains('hid')) {
-          el.classList.remove('hid');
+        if (el.classList.contains("hid")) {
+          el.classList.remove("hid");
         }
       });
       this.categories.forEach((element: Category) => {
-        const el = (this.$refs['category' + element.id] as Array<HTMLElement>)[0];
+        const el = (
+          this.$refs["category" + element.id] as Array<HTMLElement>
+        )[0];
         if (!el) return;
         const parent = el.parentElement;
-        if (parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
+        if (
+          parent &&
+          el.offsetLeft + el.clientWidth <= parent.clientWidth - 20
+        ) {
           return;
         }
         this.hidenCategories.push(element);
-        if (!el.classList.contains('hid')) {
-          el.className += ' hid';
+        if (!el.classList.contains("hid")) {
+          el.className += " hid";
         }
       });
       if (!this.hidenCategories.length) {
-        categoryList.style.justifyContent = 'center';
+        categoryList.style.justifyContent = "center";
       }
     },
     async fetchCategories(organisationId: string): Promise<void> {
-      const data = await octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list/${organisationId}`,{
-        lang: this.$i18n.locale,
-      });
+      const data = await octopusApi.fetchDataWithParams<Array<Category>>(
+        0,
+        `iab/list/${organisationId}`,
+        {
+          lang: this.$i18n.locale,
+        },
+      );
       this.storedUpdateCategoriesOrga(data);
     },
   },
-})
+});
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
+@import "@scss/_variables.scss";
+.octopus-app {
   .category-list-container {
     display: inline-flex;
     justify-content: flex-start;

package/src/components/display/comments/AddCommentModal.vue

@@ -14,32 +14,26 @@
           type="text"
           :placeholder="$t('Your name')"
           :class="{ 'border border-danger': 0 === countName || !validName }"
-        >
+        />
         <p
           class="d-flex justify-content-end h6"
           :class="{ 'text-danger': !validName }"
         >
-          {{ countName + ' / ' + maxName }}
+          {{ countName + " / " + maxName }}
         </p>
-        <div
-          v-if="''!==errorText"
-          class="mt-1 text-danger"
-        >
+        <div v-if="'' !== errorText" class="mt-1 text-danger">
           {{ errorText }}
         </div>
       </template>
       <template v-else>
-        <div>{{ $t('Send in progress') }}</div>
+        <div>{{ $t("Send in progress") }}</div>
       </template>
     </template>
     <template #footer>
-      <button
-        class="btn m-1"
-        @click="closePopup"
-      >
-        {{ $t('Close') }}
+      <button class="btn m-1" @click="closePopup">
+        {{ $t("Close") }}
       </button>
-      <vue-recaptcha 
+      <vue-recaptcha
         v-if="!isVerify"
         ref="invisibleRecaptcha"
         :load-recaptcha-script="true"
@@ -54,56 +48,56 @@
         :disabled="0 === countName || !validName"
         @click="submit"
       >
-        {{ $t('Validate') }}
+        {{ $t("Validate") }}
       </button>
     </template>
   </ClassicModal>
 </template>
 
 <script lang="ts">
-import Constants from '../../../../public/config';
-import { state } from '../../../stores/ParamSdkStore';
-import ClassicModal from '../../misc/modal/ClassicModal.vue';
-import api from '@/api/initialize';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import { VueRecaptcha } from 'vue-recaptcha';
-import { defineComponent } from 'vue';
+import Constants from "../../../../public/config";
+import { state } from "../../../stores/ParamSdkStore";
+import ClassicModal from "../../misc/modal/ClassicModal.vue";
+import api from "@/api/initialize";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import { VueRecaptcha } from "vue-recaptcha";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'AddCommentModal',
-  components:{
+  name: "AddCommentModal",
+  components: {
     VueRecaptcha,
-    ClassicModal
+    ClassicModal,
   },
 
   props: {},
-  emits: ['close','validate'],
+  emits: ["close", "validate"],
 
   data() {
     return {
-      name: '' as string,
+      name: "" as string,
       sending: false as boolean,
       sendError: false as boolean,
       isVerify: false as boolean,
-      maxName : Constants.MAX_COMMENT_NAME as number
+      maxName: Constants.MAX_COMMENT_NAME as number,
     };
   },
   computed: {
-    ...mapState(useAuthStore, ['authProfile']),
-    errorText():string {
-      if(this.isCaptchaTest){
-        return this.$t('Recaptcha not active');
+    ...mapState(useAuthStore, ["authProfile"]),
+    errorText(): string {
+      if (this.isCaptchaTest) {
+        return this.$t("Recaptcha not active");
       }
-      return this.sendError? this.$t('Recaptcha error') : '';
+      return this.sendError ? this.$t("Recaptcha error") : "";
     },
-    validName(): boolean{
+    validName(): boolean {
       return this.countName <= this.maxName;
     },
-    countName(): number{
+    countName(): number {
       return this.name.length;
     },
     isCaptchaTest(): boolean {
-      return (state.generalParameters.isCaptchaTest as boolean);
+      return state.generalParameters.isCaptchaTest as boolean;
     },
   },
 
@@ -111,9 +105,13 @@ export default defineComponent({
     this.initAuthenticatedName();
   },
   methods: {
-    initAuthenticatedName():void{
-      if (!this.authProfile?.userId) { return; }
-      this.name = (`${this.authProfile?.firstname||''} ${this.authProfile?.lastname||''}`).trim();
+    initAuthenticatedName(): void {
+      if (!this.authProfile?.userId) {
+        return;
+      }
+      this.name = `${this.authProfile?.firstname || ""} ${
+        this.authProfile?.lastname || ""
+      }`.trim();
       this.isVerify = true;
     },
     async handleSuccess(token: string) {
@@ -126,17 +124,19 @@ export default defineComponent({
     },
     async submit(): Promise<void> {
       if (!this.isVerify && !this.isCaptchaTest) {
-        return (this.$refs.invisibleRecaptcha as InstanceType<typeof VueRecaptcha>).execute();
+        return (
+          this.$refs.invisibleRecaptcha as InstanceType<typeof VueRecaptcha>
+        ).execute();
       }
       this.sendComment();
     },
     closePopup(): void {
-      this.$emit('close');
+      this.$emit("close");
     },
     sendComment(): void {
       this.sending = true;
-      this.$emit('validate', this.name);
+      this.$emit("validate", this.name);
     },
   },
-})
-</script>
+});
+</script>

package/src/components/display/comments/CommentBasicView.vue

@@ -2,19 +2,22 @@
   <div>
     <div class="d-flex h6">
       <strong
-        v-if="recordingInLive && ('Live' === comment.phase || 'Prelive' === comment.phase)"
+        v-if="
+          recordingInLive &&
+          ('Live' === comment.phase || 'Prelive' === comment.phase)
+        "
         class="recording-bg me-1 text-light p-1"
-      >{{ $t('Live') }}</strong>
+        >{{ $t("Live") }}</strong
+      >
       <strong
         :id="'popover-comment' + comment.comId"
         role="button"
         tabindex="-1"
-        :class="editRight || isValid? 'c-hand-auto':'text-danger'"
+        :class="editRight || isValid ? 'c-hand-auto' : 'text-danger'"
         class="me-2"
-      >{{
-        comment.name
-      }}</strong>
-      <Popover
+        >{{ comment.name }}</strong
+      >
+      <ClassicPopover
         :disable="editRight || isValid"
         :target="'popover-comment' + comment.comId"
         :content="$t('Comment waiting')"
@@ -29,8 +32,8 @@
       <div class="me-2">
         {{ date }}
       </div>
-      <span 
-        v-if="editRight" 
+      <span
+        v-if="editRight"
         :class="'status-' + comment.status"
         :data-selenium="'status-comment-' + seleniumFormat(comment.name)"
       />
@@ -42,30 +45,31 @@
       v-if="comment.content.length > 300"
       class="c-hand font-italic"
       @click="summary = !summary"
-    >{{ readMore }}</a>
+      >{{ readMore }}</a
+    >
   </div>
 </template>
 
 <script lang="ts">
-import selenium from '../../mixins/selenium';
-import displayMethods from '../../mixins/displayMethods';
-import { CommentPodcast } from '@/stores/class/general/comment';
-import dayjs from 'dayjs';
-import Popover from '../../misc/Popover.vue';
-import { defineComponent } from 'vue';
+import selenium from "../../mixins/selenium";
+import displayMethods from "../../mixins/displayMethods";
+import { CommentPodcast } from "@/stores/class/general/comment";
+import dayjs from "dayjs";
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'CommentBasicView',
+  name: "CommentBasicView",
 
   components: {
-    Popover
+    ClassicPopover,
   },
 
-  mixins:[displayMethods, selenium],
+  mixins: [displayMethods, selenium],
 
   props: {
-    comment: { default: ()=>({}), type: Object as ()=>CommentPodcast },
-    editRight: { default: false, type: Boolean},
-    recordingInLive: { default: false, type: Boolean},
+    comment: { default: () => ({}), type: Object as () => CommentPodcast },
+    editRight: { default: false, type: Boolean },
+    recordingInLive: { default: false, type: Boolean },
   },
 
   data() {
@@ -74,21 +78,25 @@ export default defineComponent({
     };
   },
   computed: {
-    isValid(): boolean{
-      return 'Valid'=== this.comment.status;
+    isValid(): boolean {
+      return "Valid" === this.comment.status;
     },
     date(): string {
-      return this.comment.date ? dayjs(this.comment.date).format('D MMMM YYYY HH[h]mm') : '';
+      return this.comment.date
+        ? dayjs(this.comment.date).format("D MMMM YYYY HH[h]mm")
+        : "";
     },
     readMore(): string {
-      return this.summary ? this.$t('Read more') : this.$t('Read less');
+      return this.summary ? this.$t("Read more") : this.$t("Read less");
     },
     contentDisplay(): string {
-      if (!this.summary){return this.comment.content;}
-      if (!this.comment.content) return '';
+      if (!this.summary) {
+        return this.comment.content;
+      }
+      if (!this.comment.content) return "";
       if (this.comment.content.length <= 300) return this.comment.content;
-      return this.comment.content.substring(0, 300) + '...';
+      return this.comment.content.substring(0, 300) + "...";
     },
   },
-})
+});
 </script>