@saooti/octopus-sdk 30.0.18 → 30.0.22

package/README.md

@@ -515,4 +515,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.15 Améliorations css
  * 30.0.16 Change Aria-Label in title
  * 30.0.17 Oups
- * 30.0.18 Responsive select
+ * 30.0.18 Responsive select
+ * 30.0.19 Mise à jour Api
+ * 30.0.20 Petit refacto commentaires
+ * 30.0.21 #10701 & #10698
+ * 30.0.22 Accessibilité

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.18",
+  "version": "30.0.22",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -15,7 +15,7 @@
   "main": "./dist/octopus.common.js",
   "dependencies": {
     "@popperjs/core": "^2.11.0",
-    "@saooti/octopus-api": "^0.30.2",
+    "@saooti/octopus-api": "^0.30.3",
     "@vue/cli": "^5.0.0-rc.1",
     "@vue/compat": "^3.2.26",
     "axios": "^0.24.0",
@@ -39,7 +39,7 @@
     "vue-router": "^4.0.12",
     "vue3-swatches": "^1.0.5",
     "vuex": "^4.0.2",
-    "webpack": "^5.62.1"
+    "webpack": "^5.66.0"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.1.8",

package/src/assets/bootstrap-diff.scss

@@ -40,30 +40,7 @@
             border-radius: 50px;
             height: auto;
             border: 0;
-            color: white !important;
-            &:focus,
-            &:hover {
-            background:$octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-            border: 0;
-            }
-            &:active,
-            &.active {
-            background: darken($octopus-primary-color, 4%);
-            border-color: darken($octopus-primary-color, 7%);
-            }
-        }
-        &.btn-light{
-            color: $octopus-primary-color;
-            background: transparent;
-        }
-        &.btn-auth{
+            color: black !important;
             &:focus,
             &:hover {
             background:$octopus-third-color;
@@ -98,8 +75,12 @@
         }
     
         &.btn-link {
-            background: $octopus-secondary-color;
-            color: $octopus-primary-color;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: $octopus-primary-color;
+            border: 2px solid $octopus-primary-color;
+            color: white;
             font-weight: bold;
             margin: 2rem;
             width: fit-content;
@@ -108,37 +89,14 @@
             &:hover,
             &:active,
             &.active {
-            background: darken($octopus-secondary-color, 5%);
-            color: $octopus-primary-color;
+                background: transparent;
+                color: $octopus-primary-color;
             }
             @media (max-width: 500px){
             margin: 0.3rem;
             }
         }
-    
-        &.btn-link-plus {
-            padding: 8px 16px;
-            font-size: 0.8rem;
-            border-radius: 50px;
-            background-color: #ddd;
-            color: #000;
-            box-shadow: none;
-            display: flex;
-            border: 1px solid transparent;
-            .saooti-plus{
-            line-height: 1.5 !important;
-            margin-left: 5px; 
-            }
-            &:focus,
-            &:hover,
-            &:active,
-            &.active {
-            background: $octopus-primary-color;
-            color: white;
-            border: 1px solid $octopus-primary-color;
-            }
-        }
-    
+
         &.btn-more{
             background: $octopus-primary-color;
             color: $octopus-background;

package/src/assets/general.scss

@@ -8,7 +8,7 @@ body{
   font-family: Montserrat,sans-serif,Helvetica Neue;
   font-size: 0.8rem;
   overflow-x: hidden;
-  background: #fff;
+  background: #fafafa;
   min-height: 100%;
   overscroll-behavior-y: contain;
 }

package/src/assets/share.scss

@@ -18,9 +18,6 @@
 			border: 0;
 			background: #f3f3f3;
 		}
-		@media (max-width: 450px) {
-			margin: 0.5rem auto 0;
-		}
 	}
   .category-rubrique-item-plus {
     display: flex;
@@ -156,40 +153,23 @@
       font-size: 0.6rem;
     }
   }
-  .comment-item-container {
-    .btn-comment-edit {
-      width: 32px;
-      height: 32px;
-      background: $octopus-secondary-color;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $octopus-primary-color;
-      margin-right: 0.25rem;
-    }
-    .status-Pending {
-        background: #eb7d22;
-    }
-    .status-Invalid {
-        background: #d40303;
-    }
-    .status-Valid {
-        background: $octopus-primary-color;
-    }
-    .status-Valid, .status-Invalid, .status-Pending {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-    }
-    .icon-certified {
-        height: 15px;
-        margin-right: 0.5rem;
-    }
-    .collapsed > .when-opened,
-    :not(.collapsed) > .when-closed {
-        display: none !important;
-    }
+  .status-Pending {
+      background: #eb7d22;
+  }
+  .status-Invalid {
+      background: #d40303;
+  }
+  .status-Valid {
+      background: $octopus-primary-color;
+  }
+  .status-Valid, .status-Invalid, .status-Pending {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+  }
+  .icon-certified {
+      height: 15px;
+      margin-right: 0.5rem;
   }
 
 

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

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="isDisplay">
+  <div
+    v-if="isDisplay"
+    class="mt-3"
+  >
     <nav
       v-if="categoryFilter || rubriqueFilter.length"
       title="breadcrumb"

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

@@ -19,6 +19,7 @@
               class="form-input"
               type="text"
               :placeholder="$t('Your name')"
+              :class="{ 'border border-danger': name.length < 2 }"
             >
             <div
               v-if="sendError"
@@ -38,33 +39,20 @@
           </template>
         </div>
         <div class="modal-footer">
-          <template
-            v-if="!sending"
+          <button
+            class="btn m-1"
+            @click="closePopup"
           >
-            <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
+            {{ $t('Close') }}
+          </button>
+          <button
+            v-if="!sending"
+            class="btn btn-primary m-1"
+            :disabled="name.length <= 2"
+            @click="validateName"
           >
-            <button
-              class="btn m-1"
-              @click="closePopup"
-            >
-              {{ $t('Close') }}
-            </button>
-          </template>
+            {{ $t('Validate') }}
+          </button>
         </div>
       </div>
     </div>
@@ -92,38 +80,38 @@ export default defineComponent({
   },
 
   computed: {
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     isCaptchaTest(): boolean {
       return (state.generalParameters.isCaptchaTest as boolean);
     },
   },
 
   mounted() {
-    const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
-    if (captcha) {
-      (captcha as HTMLElement).style.display = 'block';
-    }
-    if (this.authenticated) {
-      this.name = (
-        (this.$store.state.profile.firstname || '') +
-        ' ' +
-        (this.$store.state.profile.lastname || '')
-      ).trim();
-      this.needVerify = false;
-    }
+    this.displayCaptcha('block');
+    this.initAuthenticatedName();
   },
 
   unmounted() {
-    const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
-    if (captcha) {
-      (captcha as HTMLElement).style.display = 'none';
-    }
+    this.displayCaptcha('none');
   },
 
   methods: {
-    async recaptcha(): Promise<void> {
+    initAuthenticatedName():void{
+      if (state.generalParameters.authenticated) {
+        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) {
+        (captcha as HTMLElement).style.display = displayStyle;
+      }
+    },
+    async validateName(): Promise<void> {
       if (!this.needVerify || this.isCaptchaTest) {
         this.sendComment();
         return;
@@ -145,8 +133,7 @@ export default defineComponent({
       }
       this.sendComment();
     },
-    closePopup(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
     sendComment(): void {
@@ -155,6 +142,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

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

@@ -0,0 +1,96 @@
+<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"
+        tabindex="-1"
+        :class="editRight || isValid? '':'text-danger'"
+        class="me-2"
+      >{{
+        comment.name
+      }}</b>
+      <Popover
+        v-if="!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')"
+      >
+      <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 {
+      if (this.comment.date)
+        return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
+      return '';
+    },
+    readMore(): string {
+      if (this.summary) return this.$t('Read more').toString();
+      return this.$t('Read less').toString();
+    },
+    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>

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

@@ -9,7 +9,7 @@
       @click="changeIdentity"
     >{{ knownIdentity }}</b>
     <div
-      v-if="knownIdentity && editName"
+      v-if="editName"
       class="d-flex"
     >
       <input
@@ -19,13 +19,13 @@
         :class="{ 'border border-danger': temporaryName.length < 2 }"
       >
       <button
-        class="btn btn-light p-1 m-1"
+        class="btn"
         @click="editName = false"
       >
         {{ $t('Cancel') }}
       </button>
       <button
-        class="btn btn-primary p-1 m-1"
+        class="btn btn-primary"
         :disabled="temporaryName.length < 2"
         @click="validEdit"
       >
@@ -142,28 +142,23 @@ export default defineComponent({
       if (this.comment && this.comment.comId) return this.$t('Answer a comment').toString();
       return this.$t('Write a comment').toString();
     },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     isCertified(): boolean {
       if (
         (state.generalParameters.isCommments &&
-          this.organisationId === this.podcastOrga) ||
+        state.generalParameters.organisationId === this.podcastOrga) ||
         state.generalParameters.isAdmin
-      )
+      ){
         return true;
+      } 
       return false;
     },
     userId(): string|undefined {
-      if (this.authenticated) return this.$store.state.profile.userId;
+      if (state.generalParameters.authenticated) return this.$store.state.profile.userId;
       return undefined;
     },
     phase(): string|undefined {
       if(undefined === this.podcast){
-        return this.comment ? this.comment.phase : '';
+        return this.comment ? this.comment.phase : undefined;
       }
       if (
         !this.podcast.conferenceId ||
@@ -233,11 +228,7 @@ export default defineComponent({
     cancelAction(): void {
       this.$emit('cancelAction');
     },
-    async postComment(name?: string): Promise<void> {
-      if (name) {
-        this.setCookie('comment-octopus-name', name);
-        this.$emit('update:knownIdentity', name);
-      }
+    defineTimelineValue(): number{
       let timeline = 0;
       if (
         undefined !== this.podcast &&(
@@ -261,16 +252,20 @@ export default defineComponent({
           timeline = 0;
         }
       }
-      let sendName = this.knownIdentity;
-      if (null === sendName && name) {
-        sendName = name;
+      return timeline;
+    },
+    async postComment(name?: string): Promise<void> {
+      if (name) {
+        this.setCookie('comment-octopus-name', name);
+        this.$emit('update:knownIdentity', name);
       }
+      const sendName = name ? name: this.knownIdentity;
       const commentPodcastId = this.comment ? this.comment.podcastId : 0;
       const comment: CommentPodcast = {
         content: this.newComment,
         name: sendName ? sendName : '',
         podcastId: this.podcast ? this.podcast.podcastId : commentPodcastId,
-        timeline: timeline,
+        timeline: this.defineTimelineValue(),
         organisationId: this.podcastOrga,
         commentIdReferer: this.comment ? this.comment.comId : undefined,
         certified: this.isCertified,
@@ -287,11 +282,10 @@ export default defineComponent({
         }
         this.$emit('newComment', data);
         this.newComment = '';
-        this.checkIdentityModal = false;
       } catch (error) {
-        this.checkIdentityModal = false;
         this.postError = true;
       }
+      this.checkIdentityModal = false;
     },
   },
 })
@@ -315,10 +309,10 @@ export default defineComponent({
     overflow: hidden !important;
     box-shadow: unset !important;
     background: transparent !important;
-    height: 40px;
-  }
-  textarea.short {
-    max-height: 38px;
+    height: 50px;
+    &.short{
+      max-height: 38px;
+    }
   }
 }
 </style>