@saooti/octopus-sdk 31.0.33 → 31.0.36

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

@@ -87,46 +87,40 @@ export default defineComponent({
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
+    watchVariable(): string{
+      return `${this.isDisplay}|${this.categories}`;
+    },
+    reloadVariable():string{
+      return `${this.filterOrga}|${this.categoriesWatch}`;
+    }
   },
   watch: {
-    isDisplay():void{
-      this.$nextTick(() => {
-        this.resizeWindow();
-      });
-    },
-    categories: {
+    watchVariable: {
       deep: true,
+      immediate:true,
       handler(){
         this.$nextTick(() => {
           this.resizeWindow();
         });
       }
     },
-    filterOrga(): void {
-      if (this.filterOrga) {
-        this.fetchCategories(this.filterOrga);
-      }
-    },
-    categoriesWatch:{
+    reloadVariable:{
       deep: true,
+      immediate:true,
       handler(){
-      if (this.filterOrga) {
-        this.fetchCategories(this.filterOrga);
-      }
+        if (this.filterOrga) {
+          this.fetchCategories(this.filterOrga);
+        }
       }
     }
   },
-
   mounted() {
     window.addEventListener('resize', this.resizeWindow);
-    this.resizeWindow();
-    if (this.filterOrga) {
-      this.fetchCategories(this.filterOrga);
-    }
   },
   beforeUnmount(): void {
     window.removeEventListener('resize', this.resizeWindow);
   },
+  
   methods: {
     checkIfFilter(category: Category): void{
       if(!this.isFilter){

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

@@ -28,16 +28,10 @@
               {{ countName + ' / ' + maxName }}
             </p>
             <div
-              v-if="sendError"
+              v-if="''!==errorText"
               class="mt-1 text-danger"
             >
-              {{ $t('Recaptcha error') }}
-            </div>
-            <div
-              v-if="isCaptchaTest"
-              class="mt-1 text-danger"
-            >
-              {{ $t('Recaptcha not active') }}
+              {{ errorText }}
             </div>
           </template>
           <template v-else>
@@ -85,8 +79,12 @@ export default defineComponent({
       maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
-
   computed: {
+    errorText():string {
+      if(this.isCaptchaTest) return this.$t('Recaptcha not active');
+      if(this.sendError) return this.$t('Recaptcha error');
+      return '';
+    },
     validName(): boolean{
       return this.countName <= this.maxName;
     },
@@ -102,45 +100,30 @@ export default defineComponent({
     this.displayCaptcha('block');
     this.initAuthenticatedName();
   },
-
   unmounted() {
     this.displayCaptcha('none');
   },
-
   methods: {
     initAuthenticatedName():void{
-      if (state.generalParameters.authenticated) {
-        this.name = (
-          (this.$store.state.profile.firstname || '') +
-          ' ' +
-          (this.$store.state.profile.lastname || '')
-        ).trim();
-        this.needVerify = false;
-      }
+      if (!state.generalParameters.authenticated) { return; }
+      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;
-      }
+      if (!captcha) {return;}
+      (captcha as HTMLElement).style.display = displayStyle;
     },
     async validateName(): Promise<void> {
-      if (!this.needVerify || this.isCaptchaTest) {
-        this.sendComment();
-        return;
-      }
-      try {
-        await this.$recaptchaLoaded()
-        const token = await this.$recaptcha('login');
-        this.sendError = false;
-        const ok = await api.checkToken(token);
-        if (!ok) {
+      if (this.needVerify && this.isCaptchaTest) {
+        try {
+          await this.$recaptchaLoaded()
+          const token = await this.$recaptcha('login');
+          this.sendError = !await api.checkToken(token);
+        } catch {
           this.sendError = true;
-          return;
         }
-      } catch {
-        this.sendError = true;
-        return;
+        if(this.sendError){return;}
       }
       this.sendComment();
     },

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

@@ -9,7 +9,7 @@
         :id="'popover-comment' + comment.comId"
         role="button"
         tabindex="-1"
-        :class="editRight || isValid? '':'text-danger'"
+        :class="editRight || isValid? 'c-hand-auto':'text-danger'"
         class="me-2"
       >{{
         comment.name
@@ -78,13 +78,10 @@ export default defineComponent({
       return 'Valid'=== this.comment.status;
     },
     date(): string {
-      if (this.comment.date)
-        return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
-      return '';
+      return this.comment.date ? moment(this.comment.date).format('D MMMM YYYY HH[h]mm') : '';
     },
     readMore(): string {
-      if (this.summary) return this.$t('Read more').toString();
-      return this.$t('Read less').toString();
+      return this.summary ? this.$t('Read more') : this.$t('Read less');
     },
     contentDisplay(): string {
       if (!this.summary){return this.comment.content;}

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

@@ -166,8 +166,7 @@ export default defineComponent({
       return true;
     },
     placeholder(): string {
-      if (this.comment && this.comment.comId) return this.$t('Answer a comment').toString();
-      return this.$t('Write a comment').toString();
+      return this.comment && this.comment.comId? this.$t('Answer a comment') : this.$t('Write a comment');
     },
     isCertified(): boolean {
       if (
@@ -180,8 +179,7 @@ export default defineComponent({
       return false;
     },
     userId(): string|undefined {
-      if (state.generalParameters.authenticated) return this.$store.state.profile.userId;
-      return undefined;
+      return state.generalParameters.authenticated ? this.$store.state.profile.userId : undefined;
     },
     phase(): string|undefined {
       if(undefined === this.podcast){
@@ -237,11 +235,8 @@ export default defineComponent({
       this.editName = false;
     },
     inputExceeded(text: string, font: string): number {
-      const element = document.createElement('canvas');
-      const context = element.getContext('2d');
-      if(null === context){
-        return 0;
-      }
+      const context = document.createElement('canvas').getContext('2d');
+      if(null === context){return 0;}
       context.font = font;
       return context.measureText(text).width;
     },
@@ -259,27 +254,19 @@ export default defineComponent({
       let timeline = 0;
       if (
         undefined !== this.podcast &&(
-        (this.$store.state.player.podcast &&
-          this.$store.state.player.podcast.podcastId ===
-            this.podcast.podcastId) ||
-        (this.$store.state.player.live &&
-          this.$store.state.player.live.livePodcastId ===
-            this.podcast.podcastId))
+        (this.$store.state.player.podcast?.podcastId ===this.podcast.podcastId) ||
+        (this.$store.state.player.live?.livePodcastId ===this.podcast.podcastId))
       ) {
         timeline = Math.round(
           this.$store.state.player.elapsed * this.$store.state.player.total
         );
         if (this.podcast.duration && this.$store.state.player.podcast) {
           timeline = Math.round(
-            timeline -
-              (this.$store.state.player.total - this.podcast.duration / 1000)
+            timeline - (this.$store.state.player.total - this.podcast.duration / 1000)
           );
         }
-        if (timeline < 0) {
-          timeline = 0;
-        }
       }
-      return timeline;
+      return timeline < 0? 0 : timeline;
     },
     async postComment(name?: string): Promise<void> {
       if (name) {

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

@@ -50,21 +50,21 @@
     <div class="d-flex align-items-center mt-1">
       <button
         v-if="null === comment.commentIdReferer && 'Valid'=== comment.status"
-        class="btn py-1 px-3 me-2"
+        class="btn d-flex align-items-center py-1 px-3 me-2"
         :data-selenium="'answer-button-comment-' + seleniumFormat(comment.name)"
         @click="answerComment"
       >
         {{ $t('To answer') }}
       </button>
-      <div
+      <button
         v-if="
           (!isFlat && comment.relatedComments) ||
             (isFlat && comment.commentIdReferer)
         "
-        class="d-flex align-items-center small-text primary-darker c-hand"
+        class="btn py-1 d-flex align-items-center px-3 me-2"
         @click="collapseVisible=!collapseVisible"
       >
-        <div v-if="comment.relatedComments">
+        <span v-if="comment.relatedComments">
           <template v-if="!collapseVisible">
             {{ $t('Display answers', { nb: comment.relatedComments }) }}
             <i v-if="editRight">{{
@@ -76,15 +76,15 @@
           <template v-else>
             {{ $t('Hide answers') }}
           </template>
-        </div>
-        <div v-else>
+        </span>
+        <span v-else>
           {{ $t('In response to') }}
-        </div>
+        </span>
         <span 
           :class="collapseVisible? 'arrow-transform': ''"
           class="saooti-arrow_down"
         />
-      </div>
+      </button>
       <EditCommentBox
         v-if="editRight"
         ref="editBox"

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

@@ -4,11 +4,8 @@
       :loading-text="loading?$t('Loading content ...'):undefined"
       :error-text="error?$t(`Comments loading error`):undefined"
     />
-    <transition-group
+    <div
       v-show="!loading"
-      tag="div"
-      name="comment-list"
-      class="my-transition-list-comments"
     >
       <CommentItem
         v-for="(c, indexCom) in comments"
@@ -22,7 +19,7 @@
         @deleteComment="deleteComment(c)"
         @updateComment="updateComment"
       />
-    </transition-group>
+    </div>
     <button
       v-show="!allFetched && (!loading || 0!==first)"
       class="btn btn-primary mt-2"
@@ -101,13 +98,16 @@ export default defineComponent({
         return true;
       return false;
     },
+    watchVariable():string{
+      return `${this.reload}|${this.status}`
+    }
   },
   watch: {
-    reload(): void {
-      this.fetchContent();
-    },
-    status(): void {
-      this.fetchContent();
+    watchVariable: {
+      immediate:true,
+      handler(){
+        this.fetchContent();
+      }
     },
     comments: {
       deep: true,
@@ -116,9 +116,6 @@ export default defineComponent({
       }
     },
   },
-  created() {
-    this.fetchContent();
-  },
   methods: {
     async fetchContent(reset=true): Promise<void> {
       this.loading = true;
@@ -138,11 +135,7 @@ export default defineComponent({
             status:this.editRight && this.status?[this.status]: this.editRight? ['Valid','Pending', 'Invalid']:['Valid'],
             organisationId: undefined === this.podcastId? this.organisation: undefined,
           };
-          if (!this.isFlat) {
-            data = await octopusApi.fetchRootComments(param);
-          } else {
-            data = await octopusApi.fetchComments(param);
-          }
+          data = this.isFlat ? await octopusApi.fetchComments(param) : await octopusApi.fetchRootComments(param);
         }
         if(reset){
           this.comments.length = 0;
@@ -231,46 +224,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss">
-@import '../../../sass/_variables.scss';
-.octopus-app{
-.my-transition-list-comments {
-  position: relative;
-  .comment-list-enter-active,
-  .comment-list-leave-active {
-    transition: 1200ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
-    transition-property: opacity, transform;
-    background-color: $primaryColorReallyTransparent;
-  }
-
-  .comment-list-enter {
-    opacity: 0;
-    transform: translateX(50px) scaleY(0.5);
-    background-color: $primaryColorReallyTransparent;
-  }
-
-  .comment-list-enter-to {
-    opacity: 1;
-    transform: translateX(0) scaleY(1);
-    background-color: $primaryColorReallyTransparent;
-  }
-
-  .comment-list-leave-active {
-    position: absolute;
-    background-color: $primaryColorReallyTransparent;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .comment-list-leave-to {
-    opacity: 0;
-    transform: scaleY(0);
-    transform-origin: center top;
-    background-color: $primaryColorReallyTransparent;
-  }
-}
-}
-</style>
+</script>

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

@@ -41,14 +41,11 @@ import { selenium } from '../../mixins/functions';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentPlayer',
-
-  components: {},
   mixins:[selenium],
   props: {
     comments: { default: undefined, type: Array as ()=>Array<CommentPodcast>},
     totalTime: { default: 0, type: Number},
   },
-
   data() {
     return {
       displayContent: undefined as CommentPodcast|undefined,

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

@@ -8,18 +8,13 @@
         class="mb-0 me-2"
         data-selenium="episode-comment-counter"
       >
-        {{ $t("Podcast's comments") }}
-        <template v-if="loaded && totalCount > 0">
-          {{
-            $t('()', { nb: totalCount })
-          }}
-        </template>
+        {{ commentTitle }}
       </h2>
       <button
         v-if="!isLive"
         :title="$t('Refresh')"
         class="btn admin-button saooti-refresh-stud"
-        @click="reloadComments"
+        @click="reload = !reload"
       />
     </div>
     <CommentInput
@@ -51,18 +46,15 @@ import CommentListVue from './CommentList.vue';
 import { CommentPodcast } from '@/store/class/general/comment';
 export default defineComponent({
   name: 'CommentSection',
-
   components: {
     CommentList,
     CommentInput,
   },
   mixins:[cookies],
-
   props: {
     podcast: { default: undefined, type: Object as ()=>Podcast },
     fetchConference: { default: undefined, type: Object as ()=>Conference },
   },
-  
   data() {
     return {
       totalCount: 0 as number,
@@ -70,8 +62,11 @@ export default defineComponent({
       reload: false as boolean,
     };
   },
-
   computed: {
+    commentTitle():string{
+      const count = this.loaded && this.totalCount > 0 ? this.$t('()', { nb: this.totalCount }) : '';
+      return this.$t("Podcast's comments")+count;
+    },
     isComments(): boolean {
       if (!this.podcast) return true;
       let podcastComment = 'INHERIT';
@@ -123,9 +118,6 @@ export default defineComponent({
       });
       this.totalCount = value.count;
     },
-    reloadComments(): void {
-      this.reload = !this.reload;
-    },
     newComment(comment: CommentPodcast): void {
       (this.$refs.commentList as InstanceType<typeof CommentListVue>).addNewComment(comment, true);
     },

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

@@ -23,15 +23,9 @@
         </button>
       </div>
     </div>
-    <div
-      v-if="loading"
-      class="d-flex justify-content-center"
-    >
-      <div class="spinner-border me-3" />
-      <h3 class="mt-2">
-        {{ $t('Loading emissions ...') }}
-      </h3>
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading emissions ...'):undefined"
+    />
     <transition-group
       v-show="
         (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
@@ -73,7 +67,7 @@ import EmissionPlayerItem from './EmissionPlayerItem.vue';
 import { state } from '../../../store/paramStore';
 import { handle403 } from '../../mixins/handle403';
 const PHONE_WIDTH = 960;
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Emission } from '@/store/class/general/emission';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent } from 'vue'
@@ -83,6 +77,7 @@ export default defineComponent({
 
   components: {
     EmissionPlayerItem,
+    ClassicLoading
   },
 
   mixins: [handle403],

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

@@ -6,7 +6,7 @@
       :to="{
         name: 'emission',
         params: { emissionId: emission.emissionId },
-        query: { productor: $store.state.filter.organisationId },
+        query: { productor: filterOrga },
       }"
       :title="$t('Emission')"
       class="d-flex text-dark"
@@ -44,7 +44,7 @@
           :to="{
             name: 'productor',
             params: { productorId: emission.orga.id },
-            query: { productor: $store.state.filter.organisationId },
+            query: { productor: filterOrga },
           }"
         >
           <div class="emission-producer">
@@ -57,6 +57,7 @@
 </template>
 
 <script lang="ts">
+import { orgaComputed } from '../../mixins/orgaComputed';
 import { Emission } from '@/store/class/general/emission';
 import { state } from '../../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
@@ -65,7 +66,7 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'EmissionItem',
 
-  mixins: [displayMethods],
+  mixins: [displayMethods, orgaComputed],
 
   props: {
     emission: { default: ()=>({}), type: Object as ()=> Emission},
@@ -87,15 +88,9 @@ export default defineComponent({
       }
       return '';
     },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     editRight(): boolean {
       if (
-        (this.authenticated && this.organisationId === this.emission.orga.id) ||
+        (this.authenticated && this.myOrganisationId === this.emission.orga.id) ||
         state.generalParameters.isAdmin
       )
         return true;