@saooti/octopus-sdk 29.0.0 → 29.0.4

package/README.md

@@ -462,8 +462,13 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 0.28.9 QrCode
  * 0.28.10 QrCode icone
  * 0.28.11 Podcastmaker modif
+ * 0.28.12 Rubriquage
 
  * 29.0.0 Vue3
+ * 29.0.1 Upgrade npm
+ * 29.0.2 Début de suppression bootstrap vue
+ * 29.0.3 Début de suppression bootstrap vue
+ * 29.0.4 vue3
 
 
 

package/index.ts

@@ -21,6 +21,7 @@ import TopBar from "./src/components/misc/TopBar.vue";
 import HomeDropdown from "./src/components/misc/HomeDropdown.vue";
 import MessageModal from "./src/components/misc/modal/MessageModal.vue";
 import ErrorMessage from "./src/components/misc/ErrorMessage.vue";
+import Popover from "./src/components/misc/Popover.vue";
 //Display
 import CategoryChooser from "./src/components/display/categories/CategoryChooser.vue";
 import CategoryList from "./src/components/display/categories/CategoryList.vue";
@@ -95,7 +96,8 @@ const components = {
     Rubrique,
     CategoryFilter,
     orgaFilter,
-    initSDK
+    initSDK,
+    Popover
 }
 
 export default components;
@@ -140,5 +142,6 @@ export {
     Rubrique,
     CategoryFilter,
     orgaFilter,
-    initSDK
+    initSDK,
+    Popover
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "29.0.0",
+  "version": "29.0.4",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -19,20 +19,19 @@
     "@vue/cli": "^5.0.0-beta.4",
     "@vue/compat": "^3.1.0",
     "axios": "^0.21.4",
-    "bootstrap": "^5.1.1",
-    "bootstrap-vue": "^2.4.0",
-    "bootstrap-vue-3": "0.0.4",
-    "core-js": "^3.18.1",
+    "bootstrap": "^5.1.2",
+    "core-js": "^3.18.2",
     "hls.js": "^1.0.10",
     "humanize-duration": "^3.27.0",
+    "jquery": "^3.6.0",
     "luxon": "^2.0.2",
     "moment": "^2.29.0",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "portal-vue": "^2.1.7",
+    "popper.js": "^1.16.1",
     "qrcode.vue": "^3.3.2",
     "sass": "^1.42.1",
     "sass-loader": "^12.1.0",
-    "v-calendar": "^3.0.0-alpha.5",
+    "v-calendar": "^3.0.0-alpha.6",
     "vue": "^3.1.0",
     "vue-class-component": "^7.2.3",
     "vue-i18n": "^9.2.0-beta.7",
@@ -42,13 +41,15 @@
     "vue-router": "^4.0.11",
     "vue3-swatches": "^1.0.3",
     "vuex": "^4.0.2",
-    "webpack": "^5.55.1"
+    "webpack": "^5.58.0"
   },
   "devDependencies": {
+    "@types/bootstrap": "^5.1.6",
     "@types/hls.js": "^1.0.0",
+    "@types/jquery": "^3.5.6",
     "@types/vue-datetime": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "@vue/cli-plugin-babel": "^5.0.0-beta.4",
     "@vue/cli-plugin-eslint": "^5.0.0-beta.4",
     "@vue/cli-plugin-typescript": "^5.0.0-beta.4",
@@ -57,7 +58,7 @@
     "@vue/eslint-config-typescript": "^7.0.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.18.0",
+    "eslint-plugin-vue": "^7.19.1",
     "typescript": "^4.4.3"
   },
   "eslintConfig": {

package/src/assets/bootstrap-diff.scss

@@ -8,10 +8,12 @@
         }
     }
     .btn{
+        font-size:.7rem;
         border-radius: 50px;
         background: $octopus-light-secondary-color; 
         transition: background .2s, border .2s, box-shadow .2s, color .2s;
         text-decoration: none !important;
+        white-space: nowrap;
         &:hover,
         &:focus,
         &:active,
@@ -230,6 +232,9 @@
         //border: 1px solid #ddd;
         border-radius: 5px;
     }
+    .dropdown-toggle-no-caret::after{
+        display: none;
+      }    
     .dropdown-menu {
         padding: $dropdown-padding-y 0.5rem;
         @media (max-width: 450px) {

package/src/assets/form.scss

@@ -81,4 +81,23 @@ background: $octopus-primary-color;
 .theme-saooti .vdatetime-time-picker__item--selected,
 .theme-saooti .vdatetime-popup__actions__button {
 color: $octopus-primary-color;
+}
+
+//Navigation Bar
+.nav{
+	border-bottom: 0.05rem solid #ddd;
+	.nav-item{
+		flex-grow: 1;
+		text-align: center;
+		a {
+			color: black;
+		}
+		.nav-link{
+			border-bottom: 0.1rem solid transparent;
+		}
+		.active{
+		  border-bottom-color: $octopus-primary-color;
+    	color: $octopus-primary-color;
+		}
+	}
 }

package/src/assets/modal.scss

@@ -1,14 +1,13 @@
 //Modal
-.modal-mask {
-	position: fixed;
-	z-index: 9998;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, .5);
-	display: table;
-	transition: opacity .3s ease;
+.modal{
+	display: block;
+}
+.modal-backdrop{
+
+}
+.modal-backdrop {
+	opacity: 0.5;
+	z-index: 0;
 }
   
 .modal-wrapper {

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

@@ -14,28 +14,29 @@
         {{ 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 #button-content>
-        <i
-          :aria-label="$t('See more')"
-          class="saooti-plus"
-        />
-      </template>
-      <b-dropdown-item
-        v-for="category in hidenCategories"
-        :key="category.id"
-        class="me-3"
-        @click="checkIfFilter(category)"
+      <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')"
       >
-        {{ category.name }}
-      </b-dropdown-item>
-    </b-dropdown>
+        <i class="saooti-plus" />
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <div
+          v-for="category in hidenCategories"
+          :key="category.id"
+          class="me-3 dropdown-item"
+          @click="checkIfFilter(category)"
+        >
+          {{ category.name }}
+        </div>
+      </ul>
+    </div>
   </div>
 </template>
 

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

@@ -1,73 +1,73 @@
 <template>
-  <div>
-    <b-modal
-      id="add-comment-modal"
-      :title="$t('Welcome, thanks for your comment')"
-      :show="true"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
-    >
-      <template
-        v-if="!sending"
-        #default
-      >
-        <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
+    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
-          v-if="isCaptchaTest"
-          class="mt-1 text-danger"
-        >
-          {{ $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-else
-        #default
-      >
-        <div>{{ $t('Send in progress') }}</div>
-      </template>
-      <template
-        v-if="!sending"
-        #modal-footer
-      >
-        <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
-        #modal-footer
-      >
-        <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>
 

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

@@ -18,17 +18,17 @@
         <template v-else>
           <b
             :id="'popover-comment' + comment.comId"
-            class="me-2 text-danger"
+            class="mr-2 text-danger"
           >{{
             comment.name
           }}</b>
-          <b-popover
+          <Popover
             :target="'popover-comment' + comment.comId"
             triggers="hover"
             custom-class="wizard-help"
           >
             {{ $t('Comment waiting') }}
-          </b-popover>
+          </Popover>
         </template>
       </template>
       <template v-else>
@@ -177,6 +177,7 @@ import { CommentPodcast } from '@/store/class/comment';
 import { Podcast } from '@/store/class/podcast';
 import { Conference } from '@/store/class/conference';
 const moment = require('moment');
+import Popover from '../../misc/Popover.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CommentInput = defineAsyncComponent(() => import('./CommentInput.vue'));
 const CommentParentInfo = defineAsyncComponent(() => import('./CommentParentInfo.vue'));
@@ -189,7 +190,8 @@ export default defineComponent({
     CommentInput,
     CommentParentInfo,
     EditCommentBox,
-    CommentList
+    CommentList,
+    Popover
   },
 
   mixins:[displayMethods, selenium],

package/src/components/display/emission/EmissionInlineList.vue

@@ -238,9 +238,11 @@ export default defineComponent({
       )
         return undefined;
       const rubrique = this.rubriques.find(
-        (element: Rubrique) => emission.rubriqueIds.includes(element.rubriqueId!) && element.rubriquageId === parseInt(this.displayRubriquage)
+        (element: Rubrique) => element.rubriqueId && emission.rubriqueIds.includes(element.rubriqueId) && element.rubriquageId === parseInt(this.displayRubriquage)
       );
-      return rubrique!.name;
+      if(rubrique){
+        return rubrique.name;
+      }
     },
     mainRubriquage(emission: Emission): string {
       if (

package/src/components/display/filter/AdvancedSearch.vue

@@ -149,38 +149,51 @@
         <div class="primary-color mb-2 padding-left-custom-radio">
           {{ $t('Sort') }}
         </div>
-        <b-form-radio-group
-          v-model="sort"
-          class="d-flex flex-column"
+        <div
+          v-if="isSearchBar"
+          class="form-check"
         >
-          <b-form-radio
-            v-if="isSearchBar"
+          <input
+            id="radio_score"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
             value="SCORE"
           >
-            {{
-              $t('Sort score')
-            }}
-          </b-form-radio>
-          <b-form-radio
-            v-if="isEmission"
-            value="LAST_PODCAST_DESC"
+          <label
+            class="form-check-label"
+            for="radio_score"
+          >{{ $t('Sort score') }}</label>
+        </div>
+        <div class="form-check">
+          <input
+            id="radio_podcast"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
+            :value="isEmission?'LAST_PODCAST_DESC':'DATE'"
           >
-            {{
-              $t('Sort last')
-            }}
-          </b-form-radio>
-          <b-form-radio
-            v-else
-            value="DATE"
+          <label
+            class="form-check-label"
+            for="radio_podcast"
+          >{{ $t('Sort last') }}</label>
+        </div>
+        <div class="form-check">
+          <input
+            id="radio_name"
+            v-model="sort"
+            class="form-check-input"
+            type="radio"
+            name="sortRadio"
+            value="NAME"
           >
-            {{
-              $t('Sort last')
-            }}
-          </b-form-radio>
-          <b-form-radio value="NAME">
-            {{ $t('Sort name') }}
-          </b-form-radio>
-        </b-form-radio-group>
+          <label
+            class="form-check-label"
+            for="radio_name"
+          >{{ $t('Sort name') }}</label>
+        </div>
       </div>
     </div>
   </div>

package/src/components/display/filter/RubriqueFilter.vue

@@ -106,6 +106,9 @@ export default defineComponent({
         return;
       }
       this.isInternChanged = true;
+      if(0===this.arrayFilter.length && this.availableRubriquage[0].rubriquageId){
+        this.arrayFilter.push({rubriquageId: this.availableRubriquage[0].rubriquageId, rubriqueId: 0, name:""});
+      }
       if(this.isRubriquage){
         if(this.saveOrganisation !== this.organisation){
           this.fetchTopics(true);

package/src/components/display/organisation/OrganisationChooser.vue

@@ -147,7 +147,7 @@ export default defineComponent({
     defaultanswer: { default: '', type: String},
     stats: { default: false, type:  Boolean},
     displayArrow: { default: true, type: Boolean},
-    value: { default: undefined, type: Object as ()=>Organisation},
+    value: { default: undefined, type: String},
     light: { default: false, type:  Boolean},
     reset: { default: false, type:  Boolean},
     all: { default: false, type:  Boolean},

package/src/components/display/participant/ParticipantItem.vue

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

package/src/components/display/podcasts/ParticipantDescription.vue

@@ -10,12 +10,12 @@
       :aria-label="$t('Help')"
     />
     <span class="mx-1">:</span>
-    <b-popover
+    <Popover
       :target="idPopover"
       triggers="hover"
       custom-class="participant-help"
     >
-      <div class="text-center fw-bold">
+      <div class="text-center font-weight-bold">
         {{ title }}
       </div>
       <div class="horizontal-separator my-1" />
@@ -32,7 +32,7 @@
         />
         <div class="horizontal-separator my-1" />
       </div>
-    </b-popover>
+    </Popover>
     <router-link
       v-for="participant in participants"
       :key="participant.participantId"
@@ -52,11 +52,16 @@
 </template>
 
 <script lang="ts">
+import Popover from '../../misc/Popover.vue';
 import { Participant } from '@/store/class/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ParticipantDescription',
 
+  components:{
+    Popover
+  },
+
   props: {
     participants: { default: () => [], type: Array as ()=> Array<Participant>},
     isGuest: { default: false, type:  Boolean},
@@ -80,7 +85,6 @@ export default defineComponent({
       return this.$t('Animated by').toString();
     }
   },
-
   methods: {
     getName(person: any): string {
       const first = person.firstName || '';

package/src/components/display/podcasts/PodcastInlineList.vue

@@ -110,6 +110,7 @@ export default defineComponent({
     buttonPlus: { default:false, type: Boolean},
     rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
     rubriquageId:{ default: () => [], type: Array as ()=> Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
   },
   emits: ['update:isArrow'],
 
@@ -224,8 +225,9 @@ export default defineComponent({
         organisationId: this.organisation,
         emissionId: this.emissionId,
         iabId: this.iabId,
-        rubriqueId: this.rubriqueId,
-        rubriquageId: this.rubriquageId,
+        rubriqueId: this.rubriqueId.length ?this.rubriqueId:undefined,
+        rubriquageId: this.rubriquageId.length ?this.rubriquageId : undefined,
+        noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
         sort: this.popularSort ? 'POPULARITY' : 'DATE',
       });
       this.loading = false;

package/src/components/display/rubriques/RubriqueList.vue

@@ -27,28 +27,29 @@
         {{ rubrique.name }}
       </button>
     </div>
-    <b-dropdown
+    <div
       v-show="hidenRubriques.length"
-      right
-      toggle-class="text-decoration-none text-dark rubrique-item rubrique-item-plus"
-      no-caret
-      :aria-label="$t('See more')"
+      class="dropdown btn-group"
     >
-      <template #button-content>
-        <i
-          :aria-label="$t('See more')"
-          class="saooti-plus"
-        />
-      </template>
-      <b-dropdown-item
-        v-for="rubrique in hidenRubriques"
-        :key="rubrique.rubriqueId"
-        class="me-3"
-        @click="addFilter(rubrique)"
+      <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')"
       >
-        {{ rubrique.name }}
-      </b-dropdown-item>
-    </b-dropdown>
+        <i class="saooti-plus" />
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right px-4">
+        <div
+          v-for="rubrique in hidenRubriques"
+          :key="rubrique.rubriqueId"
+          class="me-3 dropdown-item"
+          @click="addFilter(rubrique)"
+        >
+          {{ rubrique.name }}
+        </div>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -80,7 +81,7 @@ export default defineComponent({
       return this.$store.state.filter.rubriqueFilter;
     },
     rubriqueDisplay(): Array<Rubrique>{
-      return this.$store.state.filter.rubriqueDisplay;
+      return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
     rubriquageDisplay(): Array<Rubriquage>{
       const elementToNotShow = Array.from(this.rubriqueFilter);
@@ -119,7 +120,7 @@ export default defineComponent({
       const filterToAdd = {
         rubriquageId: this.rubriquage.rubriquageId?this.rubriquage.rubriquageId: 0, 
         rubriqueId: rubrique.rubriqueId? rubrique.rubriqueId:0, 
-        name: this.rubriquage.title +": "+rubrique.name
+        name: this.rubriquage.title +" : "+rubrique.name
       };
       const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
       newFilter.push(filterToAdd);