@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -0,0 +1,108 @@
+<template>
+  <div v-if="isDisplay">
+    <nav
+      v-if="categoryFilter || rubriqueFilter.length"
+      aria-label="breadcrumb"
+    >
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+          <a
+            href="#"
+            @click="removeFilter(-1, $event)"
+          >{{ $t('All') }}</a>
+        </li>
+        <li
+          v-if="categoryFilter"
+          class="breadcrumb-item active"
+        >
+          {{ categoryFilter.name }}
+        </li>
+        <li 
+          v-for="(filter, index) in rubriqueFilter" 
+          :key="filter.rubriqueId"
+          class="breadcrumb-item"
+          :class="rubriqueFilter.length-1 === index ? 'active':''"
+        >
+          <a
+            v-if="rubriqueFilter.length - 1 !== index"
+            href="#"
+            @click="removeFilter(index,$event)"
+          >{{ filter.name }}</a>
+          <template v-else>
+            {{ filter.name }}
+          </template>
+        </li>
+      </ol>
+    </nav>
+    <CategoryList
+      v-if="!categoryFilter && !rubriquageFilter.length"
+      :is-filter="true"
+    />
+    <RubriqueList
+      v-else-if="rubriquageFilter.length !== rubriqueFilter.length"
+      :rubriquages="rubriquageFilter"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Category } from '@/store/class/category';
+import { Rubriquage } from '@/store/class/rubriquage';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CategoryList = defineAsyncComponent(() => import('./CategoryList.vue'));
+const RubriqueList = defineAsyncComponent(() => import('./../rubriques/RubriqueList.vue'));
+export default defineComponent({
+  name: 'CategoryFilter',
+
+  components:{
+    CategoryList,
+    RubriqueList,
+  },
+  computed: {
+    categoryFilter(): Category|undefined{
+      return this.$store.state.filter.iab;
+    },
+    rubriqueFilter(): Array<RubriquageFilter>{
+      return this.$store.state.filter.rubriqueFilter;
+    },
+    isDisplay(): boolean {
+      return "homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name;
+    },
+    rubriquageFilter(): Array<Rubriquage>{
+      if(this.$store.state.filter.organisationId){
+        return this.$store.state.filter.rubriquageArray;
+      }
+      return [];
+    }
+  },
+  methods:{
+    removeFilter(index: number, event?: { preventDefault: () => void }): void{
+      const queries = this.$route.query;
+      if(this.categoryFilter){
+        if (queries.iabId) {
+          this.$router.push({ query: {...queries, ...{iabId: undefined} } });
+        }
+        this.$store.commit('filterIab', undefined);
+      }else{
+        const newFilter: Array<RubriquageFilter>  = Array.from(this.$store.state.filter.rubriqueFilter);
+        newFilter.splice(index + 1);
+        if (queries.rubriquesId) {
+          const queryString = newFilter.map(value => value.rubriquageId+':'+value.rubriqueId).join();
+          if("" !== queryString){
+            this.$router.push({ query: { ...queries, ...{ rubriquesId: queryString }} });
+          }else{
+            this.$router.push({ query: { ...queries, ...{ rubriquesId: undefined }} });
+          }
+        }
+        this.$store.commit('filterRubrique', newFilter);
+      }
+      if(event){
+        event.preventDefault();
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss"></style>

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

@@ -1,136 +1,142 @@
 <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
+  <div class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list">
+    <div
+      id="category-list-container"
+      class="category-list-container"
+    >
+      <button
+        v-for="category in categories"
         :id="'category' + category.id"
-        :to="{
-          name: 'category',
-          params: { iabId: category.id },
-          query: { productor: filterOrga },
-        }"
+        :key="category.id"
         class="category-item text-dark secondary-bg"
-        v-for="category in categories"
-        v-bind:key="category.id"
-        >{{ category.name }}</router-link
+        @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 btn-secondary text-decoration-none text-dark category-item category-item-plus dropdown-toggle-no-caret"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        :aria-label="$t('See more')"
+      >
+        <i class="saooti-plus" />
+      </button>
+      <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 { state } from '../../../store/paramStore';
 
-import { defineComponent, nextTick } from 'vue'
+import { Category } from '@/store/class/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 },
   },
 
   data() {
     return {
-      hidenCategories: [] as any,
+      hidenCategories: [] as Array<Category>,
     };
   },
 
   computed: {
-    isPodcastmaker() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-    categories() {
+    categoriesWatch(): Array<Category>{
+      return this.$store.state.categories;
+    },
+    categories(): Array<Category> {
       if (this.filterOrga) {
-        return this.$store.state.categoriesOrga.filter((c:any) => {
+        return this.$store.state.categoriesOrga.filter((c: Category) => {
           return c.podcastOrganisationCount;
         });
       }
-      return state.generalParameters.allCategories.filter((c:any) => {
+      return this.$store.state.categories.filter((c: Category) => {
         if (this.isPodcastmaker) return c.podcastOrganisationCount;
         return c.podcastCount;
       });
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
   },
+  watch: {
+    categories(): void {
+      this.$nextTick(() => {
+        this.resizeWindow();
+      });
+    },
+    filterOrga(): void {
+      if (this.filterOrga) {
+        this.fetchCategories(this.filterOrga);
+      }
+    },
+    categoriesWatch(): void{
+      if (this.filterOrga) {
+        this.fetchCategories(this.filterOrga);
+      }
+    }
+  },
 
+  mounted() {
+    window.addEventListener('resize', this.resizeWindow);
+    this.resizeWindow();
+    if (this.filterOrga) {
+      this.fetchCategories(this.filterOrga);
+    }
+  },
+  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.push({ query: { ...queries, ...{ iabId: category.id.toString() }} });
+      }
+      this.$store.commit('filterIab',category);
+    },
+    resizeWindow(): void {
+      const categoryList = document.getElementById('category-list-container');
+      if(null === 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 = document.getElementById('category' + element.id);
         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 +146,54 @@ export default defineComponent({
         }
       });
       if (!this.hidenCategories.length) {
-        categoryList!.style.justifyContent = 'center';
+        categoryList.style.justifyContent = 'center';
       }
     },
-    async fetchCategories(organisationId:string) {
+    async fetchCategories(organisationId: string): Promise<void> {
       const data = await octopusApi.fetchCategoriesOrga(organisationId, {
-        lang: 'fr',
+        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">
+.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 {
+    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>

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

@@ -1,80 +1,110 @@
 <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')"
+            >
+            <div
+              v-if="sendError"
+              class="mt-1 text-danger"
+            >
+              {{ $t('Recaptcha error') }}
+            </div>
+            <div
+              v-if="isCaptchaTest"
+              class="mt-1 text-danger"
+            >
+              {{ $t('Recaptcha not active') }}
+            </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">
+          <template
+            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="recaptcha"
+            >
+              {{ $t('Validate') }}
+            </button>
+          </template>
+          <template
+            v-else
+          >
+            <button
+              class="btn m-1"
+              @click="closePopup"
+            >
+              {{ $t('Close') }}
+            </button>
+          </template>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang="scss"></style>
 <script lang="ts">
-import { useReCaptcha } from "vue-recaptcha-v3";
+import { useReCaptcha } from 'vue-recaptcha-v3';
 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'],
+  props: {},
+  emits: ['close','validate'],
 
-  setup() {
-    const { executeRecaptcha, recaptchaLoaded }:any = useReCaptcha();
-
-    const recaptcha = async () => {
-      await recaptchaLoaded();
-      const token = await executeRecaptcha("login");
-      return token;
-    }
+  data() {
     return {
-      recaptcha
-    }
+      name: '' as string,
+      sending: false as boolean,
+      needVerify: true as boolean,
+      sendError: false as boolean,
+    };
+  },
+
+  computed: {
+    authenticated(): boolean {
+      return state.generalParameters.authenticated;
+    },
+    isCaptchaTest(): boolean {
+      return state.generalParameters.isCaptchaTest;
+    },
   },
 
   mounted() {
-    let captcha:any = document.getElementsByClassName('grecaptcha-badge')[0];
-    captcha.style.display ='block';
+    const captcha: any = document.getElementsByClassName('grecaptcha-badge')[0];
+    if (captcha) {
+      captcha.style.display = 'block';
+    }
     if (this.authenticated) {
       this.name = (
         (this.$store.state.profile.firstname || '') +
@@ -83,42 +113,27 @@ export default defineComponent({
       ).trim();
       this.needVerify = false;
     }
-    /* this.$bvModal.show('add-comment-modal'); */
   },
 
   unmounted() {
-    let captcha:any = document.getElementsByClassName('grecaptcha-badge')[0];
-    captcha.style.display ='none';
-  },
-
-  data() {
-    return {
-      name: '',
-      sending: false,
-      needVerify: true,
-      sendError: false,
-    };
-  },
-
-  computed: {
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-    isCaptchaTest() {
-      return state.generalParameters.isCaptchaTest;
-    },
+    const captcha: any = document.getElementsByClassName('grecaptcha-badge')[0];
+    if (captcha) {
+      captcha.style.display = 'none';
+    }
   },
 
   methods: {
-    async recaptchaHandle() {
+    async recaptcha(): Promise<void> {
       if (!this.needVerify || this.isCaptchaTest) {
         this.sendComment();
         return;
       }
-      const token = await this.recaptcha();
+      const { executeRecaptcha, recaptchaLoaded }: any = useReCaptcha()
+      await recaptchaLoaded();
+      const token = await executeRecaptcha('login');
       try {
         this.sendError = false;
-        const ok:any = await api.checkToken(token);
+        const ok = await api.checkToken(token);
         if (!ok) {
           this.sendError = true;
           return;
@@ -129,14 +144,16 @@ export default defineComponent({
       }
       this.sendComment();
     },
-    closePopup(event: { preventDefault: () => void; }) {
+    closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.$emit('close');
     },
-    sendComment() {
+    sendComment(): void {
       this.sending = true;
       this.$emit('validate', this.name);
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>