@saooti/octopus-sdk 30.0.25 → 30.0.29

package/README.md

@@ -522,4 +522,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.22 Accessibilité
  * 30.0.23 Css +  Accessibilité
  * 30.0.24 Css +  Accessibilité
- * 30.0.25 Css +  Accessibilité
+ * 30.0.25 Css +  Accessibilité
+ * 30.0.26 Css +  Accessibilité
+ * 30.0.27 Top bar responsive
+ * 30.0.28 Limiter caractères des commentaires
+ * 30.0.29 Pour podcastmaker sudPresse

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.25",
+  "version": "30.0.29",
   "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/assets/bootstrap-diff.scss

@@ -82,8 +82,6 @@
             border: 2px solid $octopus-primary-dark;
             color: white;
             font-weight: bold;
-            width: fit-content;
-            align-self: center;
             &:focus,
             &:hover,
             &:active,

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"
@@ -47,8 +53,8 @@
           </button>
           <button
             v-if="!sending"
-            class="btn btn-primary m-1"
-            :disabled="name.length <= 2"
+            class="btn btn-link m-1"
+            :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;
     },

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

@@ -57,7 +57,7 @@
     <router-link
       v-if="!overflowScroll"
       :to="href"
-      class="btn btn-link m-4"
+      class="btn btn-link align-self-center width-fit-content m-4"
     >
       {{
         buttonText
@@ -257,31 +257,34 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.list-episode {
-    padding: 2rem 0rem 1rem !important;
-    @media (max-width: 450px) {
-        padding: 0.5rem 0rem 1rem !important;
+.octopus-app{
+  .list-episode {
+      padding: 2rem 0rem 1rem !important;
+      @media (max-width: 450px) {
+          padding: 0.5rem 0rem 1rem !important;
+      }
+      h2 {
+          margin-bottom: 1rem;
+      }
+  }
+  .element-list-inline.overflowScroll {
+    display: flex;
+    flex-wrap: wrap;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    padding-bottom: 1rem;
+    width: 100%;
+    height: 80vh;
+    overflow-y: auto;
+    grid-gap: inherit;
+    @media (max-width: 960px) {
+      overflow-x: hidden;
+      flex-direction: column;
+      flex-wrap: nowrap;
     }
-    h2 {
-        margin-bottom: 1rem;
+    .item-phone-margin {
+      margin: 1rem 0.5rem !important;
     }
-}
-.element-list-inline.overflowScroll {
-  display: flex;
-  flex-wrap: wrap;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-  padding-bottom: 1rem;
-  width: 100%;
-  height: 80vh;
-  overflow-y: auto;
-  @media (max-width: 960px) {
-    overflow-x: hidden;
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-  .item-phone-margin {
-    margin: 1rem 0.5rem !important;
   }
 }
 </style>

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

@@ -41,7 +41,7 @@
       <button
         v-show="!allFetched"
         class="btn"
-        :class="buttonPlus ? 'btn-link  m-4' : 'btn-more'"
+        :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
         :disabled="loading"
         :title="$t('See more')"
         @click="fetchContent(false)"

package/src/components/display/live/LiveHorizontalList.vue

@@ -16,7 +16,7 @@
     <button
       v-show="!allFetched"
       class="btn"
-      :class="buttonPlus ? 'btn-link m-4 mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4 mt-3' : 'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"

package/src/components/display/playlist/PlaylistList.vue

@@ -19,7 +19,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link  m-4':'btn-more'"
+      :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4':'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"

package/src/components/display/playlist/PodcastList.vue

@@ -40,7 +40,7 @@
     <button
       v-show="size < podcasts.length && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link  m-4':'btn-more'"
+      :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4':'btn-more'"
       :title="$t('See more')"
       @click="displayMore"
     >

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

@@ -62,7 +62,7 @@
       />
     </transition-group>
     <router-link
-      class="btn btn-link m-4"
+      class="btn btn-link align-self-center width-fit-content m-4"
       :to="refTo"
     >
       {{ buttonText }}

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

@@ -23,7 +23,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-link  m-4' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
       :disabled="inFetching"
       :title="$t('See more')"
       @click="displayMore"

package/src/components/misc/HomeDropdown.vue

@@ -4,7 +4,7 @@
   >
     <button
       v-if="authenticated"
-      class="btn btn-primary m-1"
+      class="btn btn-primary hide-phone m-1"
       @click="goToUrl('/main/priv/backoffice')"
     >
       {{ $t('My space') }}

package/src/components/misc/TopBar.vue

@@ -325,8 +325,13 @@ export default defineComponent({
       height: 2rem;
     }
   }
-  @media (max-width: 290px) {
+  @media (max-width: 380px) {
     .top-bar-logo img{
+      height: 1rem;
+    }
+  }
+  @media (max-width: 290px) {
+    .top-bar-logo{
       display: none;
     }
   }