@saooti/octopus-sdk 30.0.27 → 30.0.28

package/README.md

@@ -524,4 +524,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.24 Css +  Accessibilité
  * 30.0.25 Css +  Accessibilité
  * 30.0.26 Css +  Accessibilité
- * 30.0.27 Top bar responsive
+ * 30.0.27 Top bar responsive
+ * 30.0.28 Limiter caractères des commentaires

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.27",
+  "version": "30.0.28",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/public/config.ts

@@ -0,0 +1,4 @@
+export default Object.freeze({
+    MAX_COMMENT : 4096,
+    MAX_COMMENT_NAME : 127
+});

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

@@ -19,8 +19,14 @@
               class="form-input"
               type="text"
               :placeholder="$t('Your name')"
-              :class="{ 'border border-danger': name.length < 2 }"
+              :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="sendError"
               class="mt-1 text-danger"
@@ -48,7 +54,7 @@
           <button
             v-if="!sending"
             class="btn btn-link m-1"
-            :disabled="name.length <= 2"
+            :disabled="0 === countName || !validName"
             @click="validateName"
           >
             {{ $t('Validate') }}
@@ -61,6 +67,7 @@
 
 <script lang="ts">
 import { IReCaptchaComposition, useReCaptcha } from 'vue-recaptcha-v3';
+import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
 import api from '@/api/initialize';
 import { defineComponent } from 'vue'
@@ -76,10 +83,17 @@ export default defineComponent({
       sending: false as boolean,
       needVerify: true as boolean,
       sendError: false as boolean,
+      maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
 
   computed: {
+    validName(): boolean{
+      return this.countName <= this.maxName;
+    },
+    countName(): number{
+      return this.name.length;
+    },
     isCaptchaTest(): boolean {
       return (state.generalParameters.isCaptchaTest as boolean);
     },

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

@@ -12,21 +12,29 @@
       v-if="editName"
       class="d-flex"
     >
-      <input
-        v-model="temporaryName"
-        class="small-text mt-1"
-        type="text"
-        :class="{ 'border border-danger': temporaryName.length < 2 }"
-      >
+      <div class="d-flex flex-column">
+        <input
+          v-model="temporaryName"
+          class="small-text mt-1"
+          type="text"
+          :class="{ 'border border-danger': 0 === countName || !validName }"
+        >
+        <p
+          class="d-flex justify-content-end small-text mb-0"
+          :class="{ 'text-danger': !validName }"
+        >
+          {{ countName + ' / ' + maxName }}
+        </p>
+      </div>
       <button
-        class="btn"
+        class="btn m-1"
         @click="editName = false"
       >
         {{ $t('Cancel') }}
       </button>
       <button
-        class="btn btn-link"
-        :disabled="temporaryName.length < 2"
+        class="btn btn-link m-1"
+        :disabled="0 === countName || !validName"
         @click="validEdit"
       >
         {{ $t('Validate') }}
@@ -41,24 +49,29 @@
       @focus="textareaFocus = true"
       @blur="textareaFocus = false"
     />
-    <div
-      v-if="textareaFocus"
-      class="d-flex justify-content-end mt-1"
-    >
-      <button
-        class="btn me-2"
-        @mousedown="cancelAction"
-      >
-        {{ $t('Cancel') }}
-      </button>
-      <button
-        class="btn btn-link"
-        :disabled="0 === newComment.trim().length"
-        @mousedown="requestToSend"
+    <template v-if="textareaFocus">
+      <p
+        class="d-flex justify-content-end small-text"
+        :class="{ 'text-danger': !validComment }"
       >
-        {{ placeholder }}
-      </button>
-    </div>
+        {{ countComment + ' / ' + maxComment }}
+      </p>
+      <div class="d-flex justify-content-end mt-1">
+        <button
+          class="btn me-2"
+          @mousedown="cancelAction"
+        >
+          {{ $t('Cancel') }}
+        </button>
+        <button
+          class="btn btn-link"
+          :disabled="0 === countComment || !validComment"
+          @mousedown="requestToSend"
+        >
+          {{ placeholder }}
+        </button>
+      </div>
+    </template>
     <AddCommentModal
       v-if="checkIdentityModal"
       @validate="postComment"
@@ -83,7 +96,7 @@ import { state } from '../../../store/paramStore';
 import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 import { CommentPodcast } from '@/store/class/general/comment';
-
+import Constants from '../../../../public/config';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const AddCommentModal = defineAsyncComponent(() => import('./AddCommentModal.vue'));
 const MessageModal = defineAsyncComponent(() => import('../../misc/modal/MessageModal.vue'));
@@ -113,10 +126,24 @@ export default defineComponent({
       isOneLine: true as boolean,
       editName: false as boolean,
       temporaryName: '' as string,
+      maxComment : Constants.MAX_COMMENT as number,
+      maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
 
   computed: {
+    validName(): boolean{
+      return this.countName <= this.maxName;
+    },
+    countName(): number{
+      return this.temporaryName.length;
+    },
+    validComment(): boolean{
+      return this.countComment <= this.maxComment;
+    },
+    countComment(): number{
+      return this.newComment.length;
+    },
     isPresent(): boolean {
       if (!this.podcast) return true;
       let podcastComment = 'INHERIT';

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

@@ -9,16 +9,28 @@
     <template v-else>
       <input
         v-model="temporaryName"
-        class="form-input me-2 mb-2 width-auto"
+        class="form-input"
         type="text"
-        :class="{ 'border border-danger': temporaryName.length < 2 }"
+        :class="{ 'border border-danger': 0 === countName || !validName }"
+      >
+      <p
+        class="d-flex justify-content-end small-text"
+        :class="{ 'text-danger': !validName }"
       >
+        {{ countName + ' / ' + maxName }}
+      </p>
       <textarea
         v-model="temporaryContent"
-        :class="{ 'border border-danger': 0===temporaryContent.length }"
+        :class="{ 'border border-danger': 0 === countComment || !validComment }"
         class="form-input"
         type="text"
       />
+      <p
+        class="d-flex justify-content-end small-text"
+        :class="{ 'text-danger': !validComment }"
+      >
+        {{ countComment + ' / ' + maxComment }}
+      </p>
       <div class="d-flex justify-content-end">
         <button
           class="btn m-1"
@@ -28,7 +40,7 @@
         </button>
         <button
           class="btn btn-link m-1"
-          :disabled="0 === temporaryContent.length || temporaryName.length < 2"
+          :disabled="0 === countComment || !validComment || 0 === countName || !validName"
           @click="validEdit"
         >
           {{ $t('Validate') }}
@@ -122,6 +134,7 @@ import { CommentPodcast } from '@/store/class/general/comment';
 import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 import CommentBasicView from './CommentBasicView.vue';
+import Constants from '../../../../public/config';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CommentInput = defineAsyncComponent(() => import('./CommentInput.vue'));
 const CommentParentInfo = defineAsyncComponent(() => import('./CommentParentInfo.vue'));
@@ -157,9 +170,23 @@ export default defineComponent({
       isEditing: false as boolean,
       temporaryContent: '' as string,
       temporaryName: '' as string,
+      maxComment : Constants.MAX_COMMENT as number,
+      maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
   computed: {
+    validName(): boolean{
+      return this.countName <= this.maxName;
+    },
+    countName(): number{
+      return this.temporaryName.length;
+    },
+    validComment(): boolean{
+      return this.countComment <= this.maxComment;
+    },
+    countComment(): number{
+      return this.temporaryContent.length;
+    },
     myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },