@saooti/octopus-sdk 29.0.0 → 29.0.4

package/src/components/misc/modal/NewsletterModal.vue

@@ -1,93 +1,99 @@
 <template>
   <div>
-    <b-modal
+    <div
       id="newsletter-modal"
-      :show="true"
-      :title="$t('Share newsletter')"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
+      class="modal"
     >
-      <template #default>
-        <div class="d-flex justify-content-between">
-          <div v-html="newsletterHtml" />
-          <div class="d-flex flex-column flex-grow ms-4">
-            <h4 class="mb-3">
-              {{ $t('Configuration') }}
-            </h4>
-            <div>
-              <input
-                id="display-emission-name"
-                v-model="displayEmissionName"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="display-emission-name"
-              >{{
-                $t('Display emission name')
-              }}</label>
-            </div>
-            <div>
-              <input
-                id="display-participants-names"
-                v-model="displayParticipantsNames"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="display-participants-names"
-              >{{ $t('Display participants list') }}</label>
-            </div>
-            <div class="d-flex align-items-center mt-2">
-              <VSwatches
-                v-model="color"
-                class="c-hand input-no-outline me-2 mt-2"
-                show-fallback
-                colors="text-advanced"
-                popover-to="right"
-                :data-color="color"
-              />
-              <div>{{ $t('Choose main color') }}</div>
+      <div class="modal-backdrop" />
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              {{ $t('Share newsletter') }}
+            </h5>
+          </div>
+          <div class="modal-body">
+            <div class="d-flex justify-content-between">
+              <div v-html="newsletterHtml" />
+              <div class="d-flex flex-column flex-grow ms-4">
+                <h4 class="mb-3">
+                  {{ $t('Configuration') }}
+                </h4>
+                <div>
+                  <input
+                    id="display-emission-name"
+                    v-model="displayEmissionName"
+                    type="checkbox"
+                    class="form-check-input"
+                  >
+                  <label
+                    class="form-check-label"
+                    for="display-emission-name"
+                  >{{
+                    $t('Display emission name')
+                  }}</label>
+                </div>
+                <div>
+                  <input
+                    id="display-participants-names"
+                    v-model="displayParticipantsNames"
+                    type="checkbox"
+                    class="form-check-input"
+                  >
+                  <label
+                    class="form-check-label"
+                    for="display-participants-names"
+                  >{{ $t('Display participants list') }}</label>
+                </div>
+                <div class="d-flex align-items-center mt-2">
+                  <VSwatches
+                    v-model="color"
+                    class="c-hand input-no-outline me-2 mt-2"
+                    show-fallback
+                    colors="text-advanced"
+                    popover-to="right"
+                    :data-color="color"
+                  />
+                  <div>{{ $t('Choose main color') }}</div>
+                </div>
+                <div
+                  class=" d-flex justify-content-between align-items-center mt-3 mb-2"
+                >
+                  <h4 class="mb-0">
+                    {{ $t('HTML Code') }}
+                  </h4>
+                  <input
+                    type="button"
+                    :value="$t('Copy')"
+                    class="btn btn-primary"
+                    :aria-label="$t('Copy')"
+                    @click="onCopyCode(newsletterHtml, afterCopy)"
+                  >
+                </div>
+                <textarea
+                  id="newsletter_code_textarea"
+                  v-model="newsletterHtml"
+                  readonly
+                  @click="selectAll"
+                />
+                <label
+                  for="newsletter_code_textarea"
+                  :aria-label="$t('HTML Code')"
+                />
+              </div>
             </div>
-            <div
-              class=" d-flex justify-content-between align-items-center mt-3 mb-2"
+          </div>
+          <div class="modal-footer">
+            <button
+              class="btn btn-primary m-1"
+              @click="closePopup"
             >
-              <h4 class="mb-0">
-                {{ $t('HTML Code') }}
-              </h4>
-              <input
-                type="button"
-                :value="$t('Copy')"
-                class="btn btn-primary"
-                :aria-label="$t('Copy')"
-                @click="onCopyCode(newsletterHtml, afterCopy)"
-              >
-            </div>
-            <textarea
-              id="newsletter_code_textarea"
-              v-model="newsletterHtml"
-              readonly
-              @click="selectAll"
-            />
-            <label
-              for="newsletter_code_textarea"
-              :aria-label="$t('HTML Code')"
-            />
+              {{ $t('Close') }}
+            </button>
           </div>
         </div>
-      </template>
-      <template #modal-footer>
-        <button
-          class="btn btn-primary m-1"
-          @click="closePopup"
-        >
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
+      </div>
+    </div>
     <Snackbar
       ref="snackbar"
       position="bottom-left"

package/src/components/misc/modal/QrCodeModal.vue

@@ -1,25 +1,35 @@
 <template>
-  <div>
-    <b-modal
-      id="qrcode-modal"
-      :show="true"
-      :title="$t('Share QR Code')"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
-    >
-      <template #default>
-        <QrCode :url="urlPage" />
-      </template>
-      <template #modal-footer>
-        <button
-          class="btn btn-primary m-1"
-          @click="closePopup"
-        >
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
+  <div
+    id="qrcode-modal"
+    class="modal"
+  >
+    <div class="modal-backdrop" />
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            {{ $t('Share QR Code') }}
+          </h5>
+          <button
+            type="button"
+            class="btn-close"
+            aria-label="Close"
+            @click="closePopup"
+          />
+        </div>
+        <div class="modal-body">
+          <QrCode :url="urlPage" />
+        </div>
+        <div class="modal-footer">
+          <button
+            class="btn btn-primary m-1"
+            @click="closePopup"
+          >
+            {{ $t('Close') }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -1,63 +1,89 @@
 <template>
   <div>
-    <b-modal
+    <div
       id="share-modal"
-      :show="true"
-      :title="$t('Share the player')"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
+      class="modal"
     >
-      <template #default>
-        <b-tabs content-class="p-2 share-modal-border">
-          <b-tab
-            :title="$t('Embed link')"
-            class="tab-pane"
-            active
-          >
-            <p>{{ embedLink }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(embedLink, afterCopy)"
+      <div class="modal-backdrop" />
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              {{ $t('Share the player') }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              aria-label="Close"
+              @click="closePopup"
             />
-          </b-tab>
-          <b-tab
-            :title="$t('Embedly link')"
-            class="tab-pane"
-          >
-            <div class="d-flex flex-column">
-              <div class="d-flex">
-                <p>{{ embedlyLink }}</p>
+          </div>
+          <div class="modal-body">
+            <ul class="nav nav-tabs">
+              <li
+                v-for="(tab, index) in tabs"
+                :key="tab"
+                class="nav-item"
+              >
+                <div
+                  class="nav-link"
+                  :class="activeTab === index? 'active':''"
+                  @click="activeTab = index"
+                >
+                  {{ tab }}
+                </div>
+              </li>
+            </ul>
+            <div class="tab-content p-2 share-modal-border">
+              <div
+                class="tab-pane tab-pane"
+                :class="activeTab === 0? 'active':''"
+              >
+                <p>{{ embedLink }}</p>
+                <div
+                  class="saooti-copy"
+                  @click="onCopyCode(embedLink, afterCopy)"
+                />
+              </div>
+              <div
+                class="tab-pane tab-pane"
+                :class="activeTab === 1? 'active':''"
+              >
+                <div class="d-flex flex-column">
+                  <div class="d-flex">
+                    <p>{{ embedlyLink }}</p>
+                    <div
+                      class="saooti-copy"
+                      @click="onCopyCode(embedlyLink, afterCopy)"
+                    />
+                  </div>
+                  <QrCode :url="embedlyLink" />
+                </div>
+              </div>
+              <div
+                v-if="directLink"
+                class="tab-pane tab-pane active"
+                :class="activeTab === 2? 'active':''"
+              >
+                <p>{{ directLink.audioUrl }}</p>
                 <div
                   class="saooti-copy"
-                  @click="onCopyCode(embedlyLink, afterCopy)"
+                  @click="onCopyCode(directLink.audioUrl, snackbarRef)"
                 />
               </div>
-              <QrCode :url="embedlyLink" />
             </div>
-          </b-tab>
-          <b-tab
-            v-if="directLink"
-            :title="$t('Direct link')"
-            class="tab-pane"
-          >
-            <p>{{ directLink.audioUrl }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(directLink.audioUrl, snackbarRef)"
-            />
-          </b-tab>
-        </b-tabs>
-      </template>
-      <template #modal-footer>
-        <button
-          class="btn btn-primary m-1"
-          @click="closePopup"
-        >
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
+          </div>
+          <div class="modal-footer">
+            <button
+              class="btn btn-primary m-1"
+              @click="closePopup"
+            >
+              {{ $t('Close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
     <Snackbar
       ref="snackbar"
       position="bottom-left"
@@ -71,6 +97,7 @@ import { displayMethods } from '../../mixins/functions';
 
 import QrCode from '../../display/sharing/QrCode.vue';
 import { defineComponent } from 'vue'
+import { Podcast } from '@/store/class/podcast';
 export default defineComponent({
   name: 'ShareModalPlayer',
 
@@ -82,9 +109,22 @@ export default defineComponent({
   props: {
     embedLink: { default: undefined, type: String},
     embedlyLink: { default: undefined, type: String},
-    directLink: { default: undefined, type: String},
+    directLink: { default: undefined, type: Object as ()=>Podcast},
   },
   emits: ['close'],
+  data() {
+    return {
+      activeTab: 0 as number,
+    };
+  },
+  computed:{
+    tabs(): Array<string>{
+      if(this.directLink){
+        return [this.$t('Embed link'),this.$t('Embedly link'),this.$t('Direct link')];
+      }
+      return [this.$t('Embed link'),this.$t('Embedly link')];
+    }
+  },
   methods: {
     closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();

package/src/components/pages/Home.vue

@@ -17,6 +17,13 @@
         :title="r.name"
         :button-text="$t('All podcast button', { name: r.name })"
       />
+      <PodcastInlineList
+        v-if="rubriqueDisplay && rubriqueDisplay.length"
+        :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
+        :rubrique-id="rubriqueId"
+        :title="$t('Without rubric')"
+        :button-text="$t('All podcast button', { name: $t('Without rubric') })"
+      />
     </template>
   </div>
 </template>
@@ -42,7 +49,7 @@ export default defineComponent({
   },
   computed: {
     rubriqueDisplay(): Array<Rubrique>{
-      return this.$store.state.filter.rubriqueDisplay;
+      return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
     rubriquageFilter(): Array<Rubriquage>{
       if(this.$store.state.filter.organisationId){

package/src/components/pages/Participant.vue

@@ -158,8 +158,9 @@ export default defineComponent({
       ).trim();
     },
     editRight(): boolean {
+      if(!this.participant || !this.participant.orga ){return false;}
       if (
-        (this.authenticated && this.participant && 
+        (this.authenticated &&
           this.organisationId === this.participant.orga.id) ||
         state.generalParameters.isAdmin
       )

package/src/helper/useEventListener.ts

@@ -0,0 +1,18 @@
+
+import {onBeforeUnmount, onMounted, Ref} from 'vue'
+
+function useEventListener(
+  element: Ref<HTMLElement | undefined>,
+  event: string,
+  callback: EventListener
+): void {
+  onMounted(() => {
+    element?.value?.addEventListener(event, callback)
+  })
+
+  onBeforeUnmount(() => {
+    element?.value?.removeEventListener(event, callback)
+  })
+}
+
+export default useEventListener

package/src/main.ts

@@ -1,18 +1,5 @@
 import { createApp } from 'vue';
 import { VueReCaptcha } from 'vue-recaptcha-v3';
-/* import { 
-  ModalPlugin, 
-  FormRadioPlugin, 
-  CardPlugin, 
-  ButtonPlugin, 
-  DropdownPlugin, 
-  PopoverPlugin,
-  TabsPlugin,
-  FormGroupPlugin,
-  FormTextareaPlugin,
-  CollapsePlugin } from 'bootstrap-vue-3'; */
-import bootstrap from 'bootstrap-vue-3';
-import 'bootstrap-vue-3/dist/bootstrap-vue-3.css';
 import App from './App.vue';
 import { createI18n } from 'vue-i18n';
 import I18nResources from './locale/messages';
@@ -20,6 +7,11 @@ import router from '@/router/router';
 const moment = require('moment');
 import store from '@/store/AppStore';
 const paramStore = require('./store/paramStore');
+/* import 'popper.js/dist/popper.min.js'; */
+/* import 'jquery/src/jquery.js'; */
+import 'jquery';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+
 
 //TODO
 const navigatorLang = navigator.language /* || navigator.userLanguage */;
@@ -62,17 +54,6 @@ paramStore
     .use(i18n)
     .use(store)
     .use(router)
-    .use(bootstrap)
     .use(VueReCaptcha, { siteKey: '6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh' })
-    /* .use(ModalPlugin)
-    .use(FormRadioPlugin)
-    .use(CardPlugin)
-    .use(ButtonPlugin)
-    .use(FormTextareaPlugin)
-    .use(DropdownPlugin)
-    .use(PopoverPlugin)
-    .use(TabsPlugin)
-    .use(FormGroupPlugin)
-    .use(CollapsePlugin) */
     .mount('#app');
   });