@saooti/octopus-sdk 31.0.35 → 31.0.36

package/src/components/display/list/Paginate.vue

@@ -0,0 +1,219 @@
+<template>
+  <div
+    v-if="totalCount > 0"
+    class="paginate"
+  >
+    <div class="d-flex align-items-center justify-content-center">
+      <label for="rows-per-page-select">{{ $t('Items per page :') }}</label>
+      <select
+        id="rows-per-page-select"
+        v-model="rowsPerPageIntern"
+        class="c-hand p-1 mx-2"
+      >
+        <option
+          v-for="option in optionsRowsPerPage"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}
+        </option>
+      </select>
+      <div class="mx-2">
+        {{ $t('Showing items number', {page: (page+1), totalPage: totalPage}) }}
+      </div>
+      <div class="d-flex flex-nowrap">
+        <button
+          v-for="paginateButton in buttonsLeft"
+          :key="paginateButton.title"
+          class="btn"
+          :title="paginateButton.title"
+          :disabled="paginateButton.disabled"
+          @click="paginateButton.action"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              :d="paginateButton.path"
+            />
+          </svg>
+        </button>
+        <div
+          v-for="pageNumber in pagination"
+          :key="pageNumber"
+        >
+          <span
+            v-if="null === pageNumber"
+            class="btn"
+          >
+            ...
+          </span>
+          <button
+            v-else
+            class="btn"
+            :class="{ 'active': page === (pageNumber-1) }"
+            @click="changeFirst((pageNumber-1)*rowsPerPageIntern)"
+          >
+            {{ pageNumber }}
+          </button>
+        </div>
+        <button
+          v-for="paginateButton in buttonsRight"
+          :key="paginateButton.title"
+          class="btn"
+          :title="paginateButton.title"
+          :disabled="paginateButton.disabled"
+          @click="paginateButton.action"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              :d="paginateButton.path"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "Paginate",
+  components: {
+  },
+	props: {
+    totalCount: { default: 0, type: Number },
+    first: { default: 0, type: Number },
+		rowsPerPage:{ default:0, type:Number},
+    rangeSize:{default:1, type: Number}
+  },
+	emits:['update:first', 'update:rowsPerPage'],
+  data() {
+    return {
+			rowsPerPageIntern: 30 as number,
+			optionsRowsPerPage: [5, 10, 15, 20, 25 , 30, 50] as Array<number>,
+		};
+  },
+	computed:{
+    buttonsLeft(){
+      return [{
+        title: this.$t('Go to first page'), disabled: 0===this.first, action: ()=>{this.changeFirst(0)}, path:"M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z"},
+        {title: this.$t('Go to previous page'), disabled: 0===this.first, action: ()=>{this.changeFirst(this.first - this.rowsPerPage)}, path:"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"},]
+    },
+    buttonsRight(){
+      return [
+        {title: this.$t('Go to next page'), disabled: this.lastFirst===this.first, action: ()=>{this.changeFirst(this.first + this.rowsPerPage)}, path:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"},
+        {title: this.$t('Go to last page'), disabled: this.lastFirst===this.first, action: ()=>{this.changeFirst(this.lastFirst)}, path:"M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"}]
+    },
+    page(){
+      return Math.floor(this.first/this.rowsPerPage);
+    },
+    totalPage(){
+      return Math.ceil(this.totalCount/this.rowsPerPage);
+    },
+    pagination(): (number | null)[] {
+      if(-1===this.rangeSize){return[];}
+      const res = [];
+      const minPaginationElems = 5 + this.rangeSize * 2;
+      let rangeStart = this.totalPage <= minPaginationElems ? 1 : (this.page + 1) - this.rangeSize;
+      let rangeEnd =this.totalPage <= minPaginationElems ? this.totalPage : (this.page + 1)+ this.rangeSize;
+      rangeEnd = rangeEnd > this.totalPage ? this.totalPage : rangeEnd;
+      rangeStart = rangeStart < 1 ? 1 : rangeStart;
+      if (this.totalPage > minPaginationElems) {
+        const isStartBoundaryReached = rangeStart - 1 < 3;
+        const isEndBoundaryReached = this.totalPage - rangeEnd < 3;
+        if (isStartBoundaryReached) {
+          rangeEnd = minPaginationElems - 2;
+          for (let i = 1; i < rangeStart; i++) {
+            res.push(i);
+          }
+        } else {
+          res.push(1);
+          res.push(null);
+        }
+        if (isEndBoundaryReached) {
+          rangeStart = this.totalPage - (minPaginationElems - 3);
+          for (let i = rangeStart; i <= this.totalPage; i++) {
+            res.push(i);
+          }
+        } else {
+          for (let i = rangeStart; i <= rangeEnd; i++) {
+            res.push(i);
+          }
+          res.push(null);
+          res.push(this.totalPage);
+        }
+      } else {
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+          res.push(i);
+        }
+      }
+      return res;
+    },
+		lastFirst(): number{
+			return (this.totalPage-1)*this.rowsPerPage;
+		}
+	},
+	watch: {
+    rowsPerPageIntern(){
+			if(this.rowsPerPage !== this.rowsPerPageIntern){
+				this.$emit('update:rowsPerPage', this.rowsPerPageIntern);
+			}
+		},
+		rowsPerPage(){
+			if(this.rowsPerPage !== this.rowsPerPageIntern){
+				this.rowsPerPageIntern =this.rowsPerPage;
+			}
+		}
+  },
+	created(){
+		this.initRowsPerPage();
+	},
+ 
+	methods:{
+    initRowsPerPage(){
+      if(!this.optionsRowsPerPage.includes(this.rowsPerPage)){
+        this.optionsRowsPerPage.push(this.rowsPerPage);
+        this.optionsRowsPerPage.sort((a,b)=>a-b);
+      }
+      this.rowsPerPageIntern = this.rowsPerPage;
+    },
+		changeFirst(newFirst: number){
+			this.$emit('update:first', newFirst);
+		},
+	}
+});
+</script>
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.octopus-app .paginate{
+	display: flex;
+	justify-content: flex-end;
+	select{
+		border-top: 0;
+		border-right: 0;
+		border-left: 0;
+		background: transparent !important;
+		outline-width: 0;
+	}
+  .btn{
+    border-radius: 0;
+    &.active{
+      background: rgba($octopus-primary-color, 0.3) ;
+    }
+  }
+}
+</style>

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

@@ -1,54 +1,56 @@
 <template>
   <div
     v-if="notEmpty"
-    class="d-flex flex-column"
+    class="p-3"
   >
-    <h2 class="mb-4 mt-3">
+    <h2 class="mb-0 mt-3">
       {{ $t('All live emission button') }}
     </h2>
-    <ul class="podcast-list">
-      <PodcastItem
-        v-for="l in lives"
-        :key="l.podcastId"
-        :podcast="l"
-      />
-    </ul>
-    <button
-      v-show="!allFetched"
-      class="btn"
-      :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4 mt-3' : 'btn-more'"
-      :disabled="inFetching"
-      :title="$t('See more')"
-      @click="displayMore"
+    <ListPaginate
+      id="liveListPaginate"
+      v-model:first="dfirst"
+      v-model:rowsPerPage="dsize"
+      v-model:isMobile="isMobile"
+      :total-count="totalCount"
+      :loading="false"
     >
-      <template v-if="buttonPlus">
-        {{ $t('See more') }}
+      <template #list>
+        <ul
+          class="podcast-list"
+        >
+          <template
+            v-for="p in displayArray"
+            :key="p.podcastId"
+          >
+            <PodcastItem
+              v-if="-1!==p.podcastId"
+              :podcast="p"
+            />
+          </template>
+        </ul>
       </template>
-      <div
-        :class="buttonPlus?'ms-1':''"
-        class="saooti-more"
-      />
-    </button>
+    </ListPaginate>
   </div>
 </template>
 
 <script lang="ts">
+import ListPaginate from '../list/ListPaginate.vue';
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
-import { state } from '../../../store/paramStore';
-
 import { Podcast } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
+import { emptyPodcastData } from '@/store/typeAppStore';
 export default defineComponent({
   name: 'LiveHorizontalList',
 
   components: {
     PodcastItem,
+    ListPaginate
   },
 
   props: {
     first: { default: 0, type: Number },
-    size: { default: 12, type: Number },
+    size: { default: 30, type: Number },
     emissionId: { default: undefined, type: Number},
   },
 
@@ -60,27 +62,41 @@ export default defineComponent({
       lives: [] as Array<Podcast>,
       notEmpty: false as boolean,
       inFetching: false as boolean,
+      isMobile: false as boolean,
     };
   },
 
  
   computed: {
-    allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus(): boolean {
-      return (state.generalParameters.buttonPlus as boolean);
-    },
+    displayArray(): Array<Podcast>{
+      if(this.isMobile){
+        return this.lives;
+      }
+      return this.lives.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
+		},
+  },
+  watch: {
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.lives[this.dfirst] || -1===this.lives[this.dfirst].podcastId){
+				this.fetchContent(false);
+			}
+		},
   },
 
   created() {
     this.fetchContent(true);
   },
   methods: {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
     async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       if (reset) {
-        this.dfirst = 0;
         this.notEmpty = false;
       }
       const param = {
@@ -95,22 +111,22 @@ export default defineComponent({
     afterFetching(reset: boolean, data: {count: number, result: Array<Podcast>, sort: string}): void {
       if (reset) {
         this.lives.length = 0;
-        this.dfirst = 0;
       }
-      this.lives = this.lives.concat(data.result).filter((l: Podcast | null) => {
+      if(this.dfirst > this.lives.length){
+        for (let i = this.lives.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+          this.lives.push(emptyPodcastData());
+        }
+      }
+      const responseLives = data.result.filter((l: Podcast | null) => {
         return null !== l;
       });
-      this.dfirst += this.dsize;
+      this.lives = this.lives.slice(0, this.dfirst).concat(responseLives).concat(this.lives.slice(this.dfirst+this.dsize, this.lives.length));
       this.totalCount = data.count;
       if (0 !== this.lives.length) {
         this.notEmpty = true;
       }
       this.inFetching = false;
     },
-    displayMore(event: { preventDefault: () => void }): void {
-      event.preventDefault();
-      this.fetchContent(false);
-    },
   },
 })
 </script>

package/src/components/display/organisation/OrganisationChooser.vue

@@ -110,6 +110,7 @@
 
 <script lang="ts">
 import { selenium } from '../../mixins/functions';
+import { orgaComputed } from '../../mixins/orgaComputed';
 //@ts-ignore
 import VueMultiselect from 'vue-multiselect';
 import octopusApi from '@saooti/octopus-api';
@@ -131,12 +132,12 @@ const getDefaultOrganistion = (defaultName: string) => {
   };
 };
 
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 export default defineComponent({
   components: {
     VueMultiselect,
   },
-  mixins:[selenium],
+  mixins:[selenium, orgaComputed],
   props: {
     width: { default: '100%', type: String },
     defaultanswer: { default: '', type: String},
@@ -157,16 +158,10 @@ export default defineComponent({
   },
   
   computed: {
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     myOrganisation(): Organisation|undefined {
       if (!this.authenticated) return undefined;
       return {
-        id: this.organisationId ? this.organisationId : "",
+        id: this.myOrganisationId ? this.myOrganisationId : "",
         imageUrl: this.myImage,
         name:
           this.$t('Edit my organisation') +
@@ -194,7 +189,7 @@ export default defineComponent({
       this.authenticated &&
       undefined === this.$store.state.organisation.imageUrl
     ) {
-      const data = await octopusApi.fetchOrganisation(this.organisationId ?this.organisationId:"");
+      const data = await octopusApi.fetchOrganisation(this.myOrganisationId ?this.myOrganisationId:"");
       this.myImage = data.imageUrl;
     }
     if (this.value) {
@@ -234,12 +229,12 @@ export default defineComponent({
       if (this.myOrganisation) {
         if (undefined === query) {
           this.organisations = this.organisations.filter((obj: Organisation) => {
-            return obj.id !== this.organisationId;
+            return obj.id !== this.myOrganisationId;
           });
           this.organisations.splice(1, 0, this.myOrganisation);
         } else {
           const foundIndex = this.organisations.findIndex(
-            (obj: Organisation) => obj.id === this.organisationId
+            (obj: Organisation) => obj.id === this.myOrganisationId
           );
           if (foundIndex) {
             this.organisations[foundIndex] = this.myOrganisation;

package/src/components/display/participant/ParticipantItem.vue

@@ -7,7 +7,7 @@
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
-        query: { productor: $store.state.filter.organisationId },
+        query: { productor: filterOrga },
       }"
       class="mt-3 text-dark"
       :title="$t('Participant')"
@@ -42,7 +42,7 @@
       :to="{
         name: 'productor',
         params: { productorId: participant.orga.id },
-        query: { productor: $store.state.filter.organisationId },
+        query: { productor: filterOrga },
       }"
       class="participant-producer"
     >
@@ -56,36 +56,25 @@ import octopusApi from '@saooti/octopus-api';
 import { Participant } from '@/store/class/general/participant';
 import { state } from '../../../store/paramStore';
 import { displayMethods } from '../../mixins/functions';
+import { orgaComputed } from '../../mixins/orgaComputed';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ParticpantItem',
-  mixins: [displayMethods],
+  mixins: [displayMethods, orgaComputed],
   props: {
     participant: { default: ()=>({}), type: Object as ()=> Participant},
   },
-
   data() {
     return {
       activeParticipant: true as boolean,
     };
   },
-  
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
     name(): string {
-      return (
-        (this.participant.firstName || '') +
-        ' ' +
-        (this.participant.lastName || '')
-      ).trim();
-    },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+      return (`${this.participant.firstName||''} ${this.participant.lastName||''}`).trim();
     },
     editRight(): boolean {
       if(!this.participant || !this.participant.orga){
@@ -93,7 +82,7 @@ export default defineComponent({
       }
       if (
         (this.authenticated &&
-          this.organisationId === this.participant.orga.id) ||
+          this.myOrganisationId === this.participant.orga.id) ||
         state.generalParameters.isAdmin
       ){
         return true;

package/src/components/display/participant/ParticipantList.vue

@@ -1,43 +1,39 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <ClassicLoading
-      :loading-text="loading?$t('Loading participants ...'):undefined"
-    />
-    <template v-if="isLoadingMoreOrFinished">
-      <div
-        v-if="showCount"
-        class="text-secondary mb-2"
-      >
-        {{
-          $t('Number participants', { nb: displayCount }) +" "+ $t('sort by score')
-        }}
-      </div>
+  <ListPaginate
+    id="participantListPaginate"
+    v-model:first="dfirst"
+    v-model:rowsPerPage="dsize"
+    v-model:isMobile="isMobile"
+    :text-count="showCount && displayCount > 1 ? `${$t('Number participants', { nb: displayCount })} ${$t('sort by score')}`: undefined"
+    :total-count="totalCount"
+    :loading="loading"
+    :loading-text="loading?$t('Loading participants ...'):undefined"
+  >
+    <template #list>
       <ul
         class="participant-list"
       >
-        <ParticipantItem
-          v-for="p in participants"
+        <template
+          v-for="p in displayArray"
           :key="p.participantId"
-          :participant="p"
-        />
+        >
+          <ParticipantItem
+            v-if="-1!==p.participantId"
+            :participant="p"
+          />
+        </template>
       </ul>
-      <button
-        v-show="!allFetched"
-        class="btn btn-more saooti-more"
-        :title="$t('See more')"
-        :disabled="loading"
-        @click="fetchContent(false)"
-      />
     </template>
-  </div>
+  </ListPaginate>
 </template>
 
 <script lang="ts">
+import ListPaginate from '../list/ListPaginate.vue';
 import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import ParticipantItem from './ParticipantItem.vue';
-import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Participant } from '@/store/class/general/participant';
+import { emptyParticipantData } from '@/store/typeAppStore';
 import { defineComponent } from 'vue'
 import { AxiosError } from 'axios';
 export default defineComponent({
@@ -45,14 +41,14 @@ export default defineComponent({
 
   components: {
     ParticipantItem,
-    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},
     organisationId: { default: undefined, type: String},
     showCount: { default: false, type: Boolean },
@@ -66,44 +62,51 @@ export default defineComponent({
       totalCount: 0 as number,
       displayCount: 0 as number,
       participants: [] as Array<Participant>,
+      isMobile: false as boolean,
     };
   },
 
    
   computed: {
-    isLoadingMoreOrFinished():boolean{
-      return !this.loading || this.participants.length > 1;
-    },
-    allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
+    displayArray(): Array<Participant>{
+      if(this.isMobile){
+        return this.participants;
+      }
+      return this.participants.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
+		},
     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: {
     query(): void {
-      this.fetchContent(true);
+      this.reloadList();
     },
     organisation(): void {
-      this.fetchContent(true);
+      this.reloadList();
     },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.participants[this.dfirst] || -1===this.participants[this.dfirst].participantId){
+				this.fetchContent(false);
+			}
+		},
   },
 
   created() {
     this.fetchContent(true);
   },
   methods: {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
     async fetchContent(reset: boolean): Promise<void> {
       this.loading = true;
-      if (reset) {
-        this.dfirst = 0;
-      }
       try {
         const data = await octopusApi.fetchParticipants({
           first: this.dfirst,
@@ -113,16 +116,20 @@ export default defineComponent({
         });
         if (reset) {
           this.participants.length = 0;
-          this.dfirst = 0;
         }
         this.displayCount = data.count;
-        this.participants = this.participants.concat(data.result).filter((p: Participant | null) => {
+        if(this.dfirst > this.participants.length){
+          for (let i = this.participants.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+            this.participants.push(emptyParticipantData());
+          }
+        }
+        const responseParticipants = data.result.filter((p: Participant | null) => {
           if (null === p) {
             this.displayCount--;
           }
           return null !== p;
         });
-        this.dfirst += this.dsize;
+        this.participants = this.participants.slice(0, this.dfirst).concat(responseParticipants).concat(this.participants.slice(this.dfirst+this.dsize, this.participants.length));
         this.totalCount = data.count;
       } catch (error) {
         this.handle403((error as AxiosError));