@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,136 +1,154 @@
 <template>
-  <div class="d-inline-flex w-100 mb-3 pl-3 pr-3 hide-phone category-list">
-    <div class="category-list-container" id="category-list-container">
-      <router-link
-        :id="'category' + category.id"
-        :to="{
-          name: 'category',
-          params: { iabId: category.id },
-          query: { productor: filterOrga },
-        }"
-        class="category-item text-dark secondary-bg"
+  <div
+    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"
+    >
+      <button
         v-for="category in categories"
-        v-bind:key="category.id"
-        >{{ category.name }}</router-link
+        :ref="'category' + category.id"
+        :key="category.id"
+        class="category-item text-dark bg-white"
+        @click="checkIfFilter(category)"
       >
+        {{ category.name }}
+      </button>
     </div>
-    <b-dropdown
+    <div
       v-show="hidenCategories.length"
-      right
-      toggle-class="text-decoration-none text-dark category-item category-item-plus"
-      no-caret
-      :aria-label="$t('See more')"
+      class="dropdown btn-group"
     >
-      <template v-slot:button-content>
-        <i :aria-label="$t('See more')" class="saooti-plus"></i>
-      </template>
-      <template>
-        <b-dropdown-item
-          :to="{
-            name: 'category',
-            params: { iabId: category.id },
-            query: { productor: filterOrga },
-          }"
+      <button
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        :title="$t('See more')"
+      />
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <div
           v-for="category in hidenCategories"
-          v-bind:key="category.id"
-          class="mr-3"
-          >{{ category.name }}</b-dropdown-item
+          :key="category.id"
+          class="me-3 dropdown-item"
+          @click="checkIfFilter(category)"
         >
-      </template>
-    </b-dropdown>
+          {{ category.name }}
+        </div>
+      </ul>
+    </div>
   </div>
 </template>
 
-<style lang="scss">
-.category-list-container {
-  display: inline-flex;
-  justify-content: flex-start;
-  overflow: hidden;
-  flex-grow: 1;
-  width: 0;
-  padding: 0 4rem;
-}
-.category-item {
-  font-size: 0.6rem;
-  margin: 0.2rem;
-  padding: 0.5rem;
-  display: block;
-  height: 1.5rem;
-  border-radius: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  .router-link-active {
-    background: #ddd !important;
-  }
-  &:hover {
-    background: #ddd !important;
-  }
-}
-
-.category-list .category-item-plus {
-  display: flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.5rem;
-}
-</style>
 <script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
+import octopusApi from '@saooti/octopus-api';
 import { state } from '../../../store/paramStore';
 
-import { defineComponent, nextTick } from 'vue'
+import { Category } from '@/store/class/general/category';
+import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CategoryList',
 
-  mounted() {
-    window.addEventListener('resize', this.resizeWindow);
-    this.resizeWindow();
-    if (this.filterOrga) {
-      this.fetchCategories(this.filterOrga);
-    }
+  props: {
+    isFilter: { default: false, type: Boolean },
+    isDisplay: { default: false, type: Boolean },
   },
+  emits:['categoriesLength'],
 
   data() {
     return {
-      hidenCategories: [] as any,
+      hidenCategories: [] as Array<Category>,
     };
   },
 
   computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
     },
-    categories() {
+    categoriesWatch(): Array<Category>{
+      return this.$store.state.categories;
+    },
+    categories(): Array<Category> {
+      let arrayCategories: Array<Category>  = [];
       if (this.filterOrga) {
-        return this.$store.state.categoriesOrga.filter((c:any) => {
+        arrayCategories = this.$store.state.categoriesOrga.filter((c: Category) => {
           return c.podcastOrganisationCount;
         });
+      }else{
+        arrayCategories = this.$store.state.categories.filter((c: Category) => {
+          if (this.isPodcastmaker) return c.podcastOrganisationCount;
+          return c.podcastCount;
+        });
       }
-      return state.generalParameters.allCategories.filter((c:any) => {
-        if (this.isPodcastmaker) return c.podcastOrganisationCount;
-        return c.podcastCount;
-      });
+      this.$emit('categoriesLength', arrayCategories.length);
+      return arrayCategories;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
+    watchVariable(): string{
+      return `${this.isDisplay}|${this.categories}`;
+    },
+    reloadVariable():string{
+      return `${this.filterOrga}|${this.categoriesWatch}`;
+    }
   },
-
+  watch: {
+    watchVariable: {
+      deep: true,
+      immediate:true,
+      handler(){
+        this.$nextTick(() => {
+          this.resizeWindow();
+        });
+      }
+    },
+    reloadVariable:{
+      deep: true,
+      immediate:true,
+      handler(){
+        if (this.filterOrga) {
+          this.fetchCategories(this.filterOrga);
+        }
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.resizeWindow);
+  },
+  beforeUnmount(): void {
+    window.removeEventListener('resize', this.resizeWindow);
+  },
+  
   methods: {
-    resizeWindow() {
-      let categoryList = document.getElementById('category-list-container');
-      categoryList!.style.justifyContent = 'flex-start';
+    checkIfFilter(category: Category): void{
+      if(!this.isFilter){
+        this.$router.push({
+          name: 'category',
+          params: { iabId: category.id.toString() },
+          query: { productor: this.filterOrga },
+        });
+        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() }} });
+      }
+      this.$store.commit('filterIab',category);
+    },
+    resizeWindow(): void {
+      const categoryList = (this.$refs.categoryListContainer as HTMLElement);
+      if(null === categoryList ||!categoryList){
+        return;
+      }
+      categoryList.style.justifyContent = 'flex-start';
       this.hidenCategories.length = 0;
-      this.categories.forEach((element:any) => {
-        let el = document.getElementById('category' + element.id);
+      this.categories.forEach((element: Category) => {
+        const el = (this.$refs['category' + element.id] as Array<HTMLElement>)[0];
         if (!el) return;
-        const parent:any = el.parentNode;
-        if (el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
+        const parent = el.parentElement;
+        if (parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
           el.classList.remove('hid');
           return;
         }
@@ -140,31 +158,45 @@ export default defineComponent({
         }
       });
       if (!this.hidenCategories.length) {
-        categoryList!.style.justifyContent = 'center';
+        categoryList.style.justifyContent = 'center';
       }
     },
-    async fetchCategories(organisationId:string) {
-      const data = await octopusApi.fetchCategoriesOrga(organisationId, {
-        lang: 'fr',
+    async fetchCategories(organisationId: string): Promise<void> {
+      const data = await octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list/${organisationId}`,{
+        lang: this.$i18n.locale,
       });
       this.$store.commit('categoriesOrgaSet', data);
     },
   },
-
-  beforeUnmount() {
-    window.removeEventListener('resize', this.resizeWindow);
-  },
-
-  watch: {
-    async categories() {
-      await nextTick();
-      this.resizeWindow();
-    },
-    filterOrga(newVal) {
-      if (newVal) {
-        this.fetchCategories(newVal);
-      }
-    },
-  },
-});
+})
 </script>
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.octopus-app{
+  .category-list-container {
+    display: inline-flex;
+    justify-content: flex-start;
+    overflow: hidden;
+    flex-grow: 1;
+    width: 0;
+    padding: 0 4rem;
+  }
+  .category-item {
+    font-size: 0.6rem;
+    margin: 0.2rem;
+    padding: 0.5rem;
+    display: block;
+    height: 1.5rem;
+    border-radius: 1.5rem;
+    border: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex-shrink: 0;
+    .router-link-active,&:hover {
+      background: $octopus-secondary-color !important;
+    }
+  }
+}
+</style>

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

@@ -1,142 +1,137 @@
 <template>
-  <div>
-    <b-modal
-      id="add-comment-modal"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
-      :title="$t('Welcome, thanks for your comment')"
-    >
-      <template v-slot:default v-if="!sending">
-        <div>{{ $t("Let's get acquainted :") }}</div>
-        <input
-          class="form-input"
-          type="text"
-          v-model="name"
-          :placeholder="$t('Your name')"
-        />
-        <div class="mt-1 text-danger" v-if="sendError">
-          {{ $t('Recaptcha error') }}
+  <div
+    id="add-comment-modal"
+    class="modal"
+  >
+    <div class="modal-backdrop" />
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            {{ $t('Welcome, thanks for your comment') }}
+          </h5>
         </div>
-        <div class="mt-1 text-danger" v-if="isCaptchaTest">
-          {{ $t('Recaptcha not active') }}
+        <div class="modal-body">
+          <template v-if="!sending">
+            <div>{{ $t("Let's get acquainted :") }}</div>
+            <input
+              v-model="name"
+              class="form-input"
+              type="text"
+              :placeholder="$t('Your name')"
+              :class="{ 'border border-danger': 0 === countName || !validName }"
+            >
+            <p
+              class="d-flex justify-content-end small-text"
+              :class="{ 'text-danger': !validName }"
+            >
+              {{ countName + ' / ' + maxName }}
+            </p>
+            <div
+              v-if="''!==errorText"
+              class="mt-1 text-danger"
+            >
+              {{ errorText }}
+            </div>
+          </template>
+          <template v-else>
+            <div>{{ $t('Send in progress') }}</div>
+          </template>
         </div>
-      </template>
-      <template v-slot:default v-else>
-        <div>{{ $t('Send in progress') }}</div>
-      </template>
-      <template v-slot:modal-footer v-if="!sending">
-        <button class="btn btn-light m-1" @click="closePopup">
-          {{ $t('Cancel') }}
-        </button>
-        <button
-          class="btn btn-primary m-1"
-          :disabled="name.length <= 2"
-          @click="recaptchaHandle"
-        >
-          {{ $t('Validate') }}
-        </button>
-      </template>
-      <template v-slot:modal-footer v-else>
-        <button class="btn m-1" @click="closePopup">
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
+        <div class="modal-footer">
+          <button
+            class="btn m-1"
+            @click="closePopup"
+          >
+            {{ $t('Close') }}
+          </button>
+          <button
+            v-if="!sending"
+            class="btn btn-primary m-1"
+            :disabled="0 === countName || !validName"
+            @click="validateName"
+          >
+            {{ $t('Validate') }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang="scss"></style>
 <script lang="ts">
-import { useReCaptcha } from "vue-recaptcha-v3";
+import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
 import api from '@/api/initialize';
-
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'AddCommentModal',
 
-  props: [],
-  emits: ['close', 'validate'],
-
-  setup() {
-    const { executeRecaptcha, recaptchaLoaded }:any = useReCaptcha();
-
-    const recaptcha = async () => {
-      await recaptchaLoaded();
-      const token = await executeRecaptcha("login");
-      return token;
-    }
-    return {
-      recaptcha
-    }
-  },
-
-  mounted() {
-    let captcha:any = document.getElementsByClassName('grecaptcha-badge')[0];
-    captcha.style.display ='block';
-    if (this.authenticated) {
-      this.name = (
-        (this.$store.state.profile.firstname || '') +
-        ' ' +
-        (this.$store.state.profile.lastname || '')
-      ).trim();
-      this.needVerify = false;
-    }
-    /* this.$bvModal.show('add-comment-modal'); */
-  },
-
-  unmounted() {
-    let captcha:any = document.getElementsByClassName('grecaptcha-badge')[0];
-    captcha.style.display ='none';
-  },
+  props: {},
+  emits: ['close','validate'],
 
   data() {
     return {
-      name: '',
-      sending: false,
-      needVerify: true,
-      sendError: false,
+      name: '' as string,
+      sending: false as boolean,
+      needVerify: true as boolean,
+      sendError: false as boolean,
+      maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
-
   computed: {
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
+    errorText():string {
+      return this.isCaptchaTest ? this.$t('Recaptcha not active') : this.sendError? this.$t('Recaptcha error') : '';
+    },
+    validName(): boolean{
+      return this.countName <= this.maxName;
     },
-    isCaptchaTest() {
-      return state.generalParameters.isCaptchaTest;
+    countName(): number{
+      return this.name.length;
+    },
+    isCaptchaTest(): boolean {
+      return (state.generalParameters.isCaptchaTest as boolean);
     },
   },
 
+  mounted() {
+    this.displayCaptcha('block');
+    this.initAuthenticatedName();
+  },
+  unmounted() {
+    this.displayCaptcha('none');
+  },
   methods: {
-    async recaptchaHandle() {
-      if (!this.needVerify || this.isCaptchaTest) {
-        this.sendComment();
-        return;
-      }
-      const token = await this.recaptcha();
-      try {
-        this.sendError = false;
-        const ok:any = await api.checkToken(token);
-        if (!ok) {
+    initAuthenticatedName():void{
+      if (!state.generalParameters.authenticated) { return; }
+      this.name = (`${this.$store.state.profile.firstname||''} ${this.$store.state.profile.lastname||''}`).trim();
+      this.needVerify = false;
+    },
+    displayCaptcha(displayStyle: string): void{
+      const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
+      if (!captcha) {return;}
+      (captcha as HTMLElement).style.display = displayStyle;
+    },
+    async validateName(): Promise<void> {
+      if (this.needVerify && this.isCaptchaTest) {
+        try {
+          await this.$recaptchaLoaded()
+          const token = await this.$recaptcha('login');
+          this.sendError = !await api.checkToken(token);
+        } catch {
           this.sendError = true;
-          return;
         }
-      } catch {
-        this.sendError = true;
-        return;
+        if(this.sendError){return;}
       }
       this.sendComment();
     },
-    closePopup(event: { preventDefault: () => void; }) {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
-    sendComment() {
+    sendComment(): void {
       this.sending = true;
       this.$emit('validate', this.name);
     },
   },
-});
-</script>
+})
+</script>

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

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div class="d-flex small-text">
+      <b
+        v-if="recordingInLive && ('Live' === comment.phase || 'Prelive' === comment.phase)"
+        class="recording-bg me-1 text-light p-1"
+      >{{ $t('Live') }}</b>
+      <b
+        :id="'popover-comment' + comment.comId"
+        role="button"
+        tabindex="-1"
+        :class="editRight || isValid? 'c-hand-auto':'text-danger'"
+        class="me-2"
+      >{{
+        comment.name
+      }}</b>
+      <Popover
+        :disable="editRight || isValid"
+        :target="'popover-comment' + comment.comId"
+      >
+        {{ $t('Comment waiting') }}
+      </Popover>
+      <img
+        v-if="comment.certified"
+        class="icon-certified"
+        src="/img/certified.png"
+        :data-selenium="'certified-icon-' + seleniumFormat(comment.name)"
+        :title="$t('Certified account')"
+        :alt="$t('Certified account')"
+      >
+      <div class="me-2">
+        {{ date }}
+      </div>
+      <span 
+        v-if="editRight" 
+        :class="'status-' + comment.status"
+        :data-selenium="'status-comment-' + seleniumFormat(comment.name)"
+      />
+    </div>
+    <!-- eslint-disable vue/no-v-html -->
+    <div v-html="urlify(contentDisplay)" />
+    <!-- eslint-enable -->
+    <a
+      v-if="comment.content.length > 300"
+      class="c-hand font-italic"
+      @click="summary = !summary"
+    >{{ readMore }}</a>
+  </div>
+</template>
+
+<script lang="ts">
+import { displayMethods, selenium } from '../../mixins/functions';
+import { CommentPodcast } from '@/store/class/general/comment';
+import moment from 'moment';
+import Popover from '../../misc/Popover.vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'CommentBasicView',
+
+  components: {
+    Popover
+  },
+
+  mixins:[displayMethods, selenium],
+
+  props: {
+    comment: { default: ()=>({}), type: Object as ()=>CommentPodcast },
+    editRight: { default: false, type: Boolean},
+    recordingInLive: { default: false, type: Boolean},
+  },
+
+  data() {
+    return {
+      summary: true as boolean,
+    };
+  },
+  computed: {
+    isValid(): boolean{
+      return 'Valid'=== this.comment.status;
+    },
+    date(): string {
+      return this.comment.date ? moment(this.comment.date).format('D MMMM YYYY HH[h]mm') : '';
+    },
+    readMore(): string {
+      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.comment.content.length <= 300) return this.comment.content;
+      return this.comment.content.substring(0, 300) + '...';
+    },
+  },
+})
+</script>