@saooti/octopus-sdk 31.0.35 → 31.0.38

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

@@ -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/CommentList.vue

@@ -98,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,
@@ -113,9 +116,6 @@ export default defineComponent({
       }
     },
   },
-  created() {
-    this.fetchContent();
-  },
   methods: {
     async fetchContent(reset=true): Promise<void> {
       this.loading = true;
@@ -135,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;
@@ -228,11 +224,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss">
-@import '../../../sass/_variables.scss';
-.octopus-app{
-
-}
-</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;

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

@@ -1,73 +1,64 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <ClassicLoading
-      :loading-text="loading?$t('Loading emissions ...'):undefined"
-    />
-    <template v-if="isLoadingMoreOrFinished">
-      <div
-        v-if="showCount && emissions.length > 1"
-        class="text-secondary mb-2"
-      >
-        {{ $t('Number emissions', { nb: displayCount }) + sortText }}
-      </div>
+  <ListPaginate
+    id="emissionListPaginate"
+    v-model:first="dfirst"
+    v-model:rowsPerPage="dsize"
+    v-model:isMobile="isMobile"
+    :text-count="showCount && emissions.length > 1 ? $t('Number emissions', { nb: displayCount }) + sortText : undefined"
+    :total-count="totalCount"
+    :loading="loading"
+    :loading-text="loading?$t('Loading emissions ...'):undefined"
+  >
+    <template #list>
       <ul
         v-if="!itemPlayer"
         class="emission-list"
         :class="smallItems ? 'three-emissions' : 'two-emissions'"
       >
-        <EmissionItem
-          v-for="e in emissions"
+        <template
+          v-for="e in displayArray"
           :key="e.emissionId"
-          :emission="e"
-        />
+        >
+          <EmissionItem
+            v-if="-1!==e.emissionId"
+            :emission="e"
+          />
+        </template>
       </ul>
       <div
-        v-show="
-          (displayRubriquage && rubriques) || !(displayRubriquage)
-        "
         v-else
+        v-show="(displayRubriquage && rubriques)||!displayRubriquage"
         class="d-flex flex-wrap justify-content-around"
       >
-        <EmissionPlayerItem
-          v-for="e in emissions"
+        <template
+          v-for="e in displayArray"
           :key="e.emissionId"
-          :emission="e"
-          class="m-3 flex-shrink-0"
-          :class="mainRubriquage(e)"
-          :rubrique-name="rubriquesId(e)"
-          @emissionNotVisible="displayCount--"
-        />
-      </div>
-      <button
-        v-show="!allFetched"
-        class="btn"
-        :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4' : 'btn-more'"
-        :disabled="loading"
-        :title="$t('See more')"
-        @click="fetchContent(false)"
-      >
-        <template v-if="buttonPlus">
-          {{ $t('See more') }}
+        >
+          <EmissionPlayerItem
+            v-if="-1!==e.emissionId"
+            :emission="e"
+            class="m-3 flex-shrink-0"
+            :class="mainRubriquage(e)"
+            :rubrique-name="rubriquesId(e)"
+            @emissionNotVisible="displayCount--"
+          />
         </template>
-        <div
-          :class="buttonPlus?'ms-1':''"
-          class="saooti-more"
-        />
-      </button>
+      </div>
     </template>
-  </div>
+  </ListPaginate>
 </template>
 
 <script lang="ts">
+import ListPaginate from '../list/ListPaginate.vue';
 import octopusApi from '@saooti/octopus-api';
 import { handle403 } from '../../mixins/handle403';
 import { state } from '../../../store/paramStore';
-import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Emission } from '@/store/class/general/emission';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { FetchParam } from '@/store/class/general/fetchParam';
 import { AxiosError } from 'axios';
+import { emptyEmissionData } from '@/store/typeAppStore';
 const EmissionItem = defineAsyncComponent(() => import('./EmissionItem.vue'));
 const EmissionPlayerItem = defineAsyncComponent(() => import('./EmissionPlayerItem.vue'));
 export default defineComponent({
@@ -76,14 +67,14 @@ export default defineComponent({
   components: {
     EmissionItem,
     EmissionPlayerItem,
-    ClassicLoading
+    ListPaginate
   },
 
   mixins: [handle403],
 
   props: {
     first: { default: 0, type: Number },
-    size: { default: 12, type: Number },
+    size: { default: 30, type: Number },
     query: { default: undefined, type: String},
     iabId: { default: undefined, type: Number },
     organisationId: { default: undefined, type: String},
@@ -107,19 +98,17 @@ export default defineComponent({
       displayCount: 0 as number,
       emissions: [] as Array<Emission>,
       rubriques: undefined as Array<Rubrique>|undefined,
+      isMobile: false as boolean,
     };
   },
 
   computed: {
-    isLoadingMoreOrFinished():boolean{
-      return !this.loading || this.emissions.length > 1;
-    },
-    allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus(): boolean {
-      return (state.generalParameters.buttonPlus as boolean);
-    },
+    displayArray(): Array<Emission>{
+      if(this.isMobile){
+        return this.emissions;
+      }
+      return this.emissions.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
+		},
     smallItems(): boolean {
       return (state.emissionsPage.smallItems as boolean);
     },
@@ -145,19 +134,24 @@ export default defineComponent({
           return " "+this.$t('sort by date').toString();
       }
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
+      if (this.$store.state.filter.organisationId) return this.$store.state.filter.organisationId;
       return undefined;
     },
   },
   watch: {
     changed(): void {
-      this.fetchContent(true);
-    },
+      this.reloadList();
+    },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.emissions[this.dfirst] || -1===this.emissions[this.dfirst].emissionId){
+				this.fetchContent(false);
+			}
+		},
   },
 
   mounted() {
@@ -167,11 +161,12 @@ export default defineComponent({
     }
   },
   methods: {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
     async fetchContent(reset: boolean): Promise<void> {
       this.loading = true;
-      if (reset) {
-        this.dfirst = 0;
-      }
       const param: FetchParam = {
         first: this.dfirst,
         size: this.dsize,
@@ -197,17 +192,20 @@ export default defineComponent({
     afterFetching(reset: boolean, data: {count: number, result: Array<Emission>, sort: string}): void {
       if (reset) {
         this.emissions.length = 0;
-        this.dfirst = 0;
       }
-      this.loading = false;
+      if(this.dfirst > this.emissions.length){
+        for (let i = this.emissions.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+          this.emissions.push(emptyEmissionData());
+        }
+      }
       this.displayCount = data.count;
-      this.emissions = this.emissions.concat(data.result).filter((e: Emission|null) => {
+      const responseEmissions = data.result.filter((e: Emission|null) => {
         if (null === e) {
           this.displayCount--;
         }
         return null !== e;
       });
-      this.dfirst += this.dsize;
+      this.emissions = this.emissions.slice(0, this.dfirst).concat(responseEmissions).concat(this.emissions.slice(this.dfirst+this.dsize, this.emissions.length));
       this.totalCount = data.count;
       this.loading = false;
     },