@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,65 +1,124 @@
 <template>
   <li
+    v-if="participant"
     class="participant-item-container"
-    v-if="participant && (activeParticipant || editRight)"
   >
     <router-link
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: filterOrga },
       }"
-      class="mt-3"
-      :aria-label="$t('Participant')"
+      class="mt-3 text-dark"
+      :title="$t('Participant')"
     >
-      <div
+      <img
+        v-lazy="participant.imageUrl"
+        :title="$t('Animator image')"
+        :alt="$t('Animator image')"
         class="img-box-circle"
-        :style="{ 'background-image': 'url(\'' + participant.imageUrl + '\')' }"
-      ></div>
-    </router-link>
-    <router-link
-      :to="{
-        name: 'participant',
-        params: { participantId: participant.participantId },
-        query: { productor: this.$store.state.filter.organisationId },
-      }"
-      class="text-dark mt-3"
-    >
+      >
       <div class="participant-name">
         <img
+          v-if="!activeParticipant && !isPodcastmaker && editRight"
           src="/img/caution.png"
           class="icon-caution"
-          v-if="!activeParticipant && !isPodcastmaker && editRight"
           :title="$t('Participant have not podcasts')"
-        />{{ name }}
+          :alt="$t('Participant have not podcasts')"
+        >{{ name }}
       </div>
       <div
-        :id="'description-participant-container-' + participant.participantId"
+        ref="descriptionParticipantContainer"
         class="participant-description html-wysiwyg-content"
       >
+        <!-- eslint-disable vue/no-v-html -->
         <div
-          :id="'description-participant-' + participant.participantId"
-          v-html="urlify(description)"
-        ></div>
+          ref="descriptionParticipant"
+          v-html="urlify(participant.description|| '')"
+        />
+        <!-- eslint-enable -->
       </div>
     </router-link>
     <router-link
+      v-if="!isPodcastmaker"
       :to="{
         name: 'productor',
         params: { productorId: participant.orga.id },
-        query: { productor: this.$store.state.filter.organisationId },
+        query: { productor: filterOrga },
       }"
-      class="text-dark participant-producer"
-      v-if="!isPodcastmaker"
+      class="participant-producer"
     >
-      <div class="participant-producer primary-color">
-        © {{ participant.orga.name }}
-      </div>
+      © {{ participant.orga.name }}
     </router-link>
   </li>
 </template>
 
+<script lang="ts">
+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'
+import { Podcast } from '@/store/class/general/podcast';
+export default defineComponent({
+  name: 'ParticpantItem',
+  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();
+    },
+    editRight(): boolean {
+      if(!this.participant || !this.participant.orga){
+        return false;
+      }
+      return (true == this.authenticated &&
+        this.myOrganisationId === this.participant.orga.id) ||
+        true === state.generalParameters.isAdmin
+    },
+  },
+
+  created() {
+    if(!this.editRight)return;
+    this.hasPodcast();
+  },
+  mounted() {
+    const participantDesc = (this.$refs.descriptionParticipant as HTMLElement);
+    const participantDescContainer = (this.$refs.descriptionParticipantContainer as HTMLElement);
+    if (
+      null !== participantDesc && null !==participantDescContainer && 
+      participantDesc.clientHeight > participantDescContainer.clientHeight
+    ) {
+      participantDescContainer.classList.add('after-participant-description');
+    }
+  },
+  methods: {
+    async hasPodcast(): Promise<void> {
+      const data =  await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
+        participantId: this.participant.participantId,
+        first: 0,
+        size: 0,
+      }, true);
+      if (0 === data.count) {
+        this.activeParticipant = false;
+      }
+    },
+  },
+})
+</script>
 <style lang="scss">
+.octopus-app{
 .participant-item-container {
   list-style: none;
   border-radius: 2rem;
@@ -69,6 +128,7 @@
   align-items: center;
 
   .participant-name {
+    margin-top: 1rem;
     font-size: 0.9rem;
     font-weight: 600;
     text-align: center;
@@ -93,7 +153,7 @@
       background: linear-gradient(
         to bottom,
         rgba(255, 255, 255, 0),
-        #f3f3f3 40%
+        #fafafa 40%
       );
     }
   }
@@ -109,102 +169,5 @@
     margin: 1rem 0 0;
   }
 }
-</style>
-
-<script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
-import { state } from '../../../store/paramStore';
-import { displayMethods } from '../../mixins/functions';
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'ParticpantItem',
-
-  props: ['participant'],
-  emits: ['participantNotVisible'],
-
-  mixins: [displayMethods],
-
-  created() {
-    this.hasPodcast();
-  },
-  mounted() {
-    let participantDesc = document.getElementById(
-      'description-participant-' + this.participant.participantId
-    );
-    let participantDescContainer:any = document.getElementById(
-      'description-participant-container-' + this.participant.participantId
-    );
-    if (
-      null !== participantDesc &&
-      participantDesc.clientHeight > participantDescContainer.clientHeight
-    ) {
-      participantDescContainer.classList.add('after-participant-description');
-    }
-  },
-
-  data() {
-    return {
-      activeParticipant: true,
-    };
-  },
-
-  computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-
-    description():string {
-      let description;
-      description = this.participant.description || '';
-      if (state.generalParameters.isIE11)
-        return description.substring(0, 50) + '...';
-      return description;
-    },
-
-    name():string {
-      const fullName = (
-        (this.participant.firstName || '') +
-        ' ' +
-        (this.participant.lastName || '')
-      ).trim();
-      if (state.generalParameters.isIE11)
-        return fullName.substring(0, 50) + '...';
-      return fullName;
-    },
-
-    organisationId() {
-      return state.generalParameters.organisationId;
-    },
-
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-
-    editRight() {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.participant.orga.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-  },
-  methods: {
-    async hasPodcast() {
-      const data = await octopusApi.fetchPodcasts({
-        participantId: this.participant.participantId,
-        first: 0,
-        size: 0,
-      });
-      if (0 === data.count) {
-        this.activeParticipant = false;
-      }
-      if (this.participant && (this.editRight || this.activeParticipant)) {
-        return;
-      }
-      this.$emit('participantNotVisible');
-    },
-  },
-});
-</script>
+}
+</style>

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

@@ -1,153 +1,166 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading participants ...') }}</h3>
-    </div>
-    <div
-      v-if="showCount && loaded && participants.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{
-        $t('Number participants', { nb: displayCount }) + $t('sort by score')
-      }}
-    </div>
-    <ul class="participant-list" v-show="loaded">
-      <ParticipantItem
-        v-bind:participant="p"
-        v-for="p in participants"
-        v-bind:key="p.participantId"
-        @participantNotVisible="displayCount--"
-      />
-    </ul>
-    <button
-      class="btn btn-more"
-      @click="displayMore"
-      v-show="!allFetched && loaded"
-      :aria-label="$t('See more')"
-      :disabled="inFetching"
-    >
-      <div class="saooti-plus"></div>
-    </button>
-  </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"
+      >
+        <template
+          v-for="p in displayArray"
+          :key="p.participantId"
+        >
+          <ParticipantItem
+            v-if="0!==p.participantId"
+            :participant="p"
+          />
+        </template>
+      </ul>
+    </template>
+  </ListPaginate>
 </template>
 
-<style lang="scss">
-.participant-list {
-  align-self: stretch;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-  /*For ie11 */
-  display: flex;
-  flex-wrap: wrap;
-  /* end */
-
-  display: grid; /* 1 */
-  grid-template-columns: repeat(auto-fill, 14rem); /* 2 */
-  grid-gap: 2rem; /* 3 */
-  justify-content: space-between; /* 4 */
-}
-/** PHONES*/
-@media (max-width: 655px) {
-  .participant-list {
-    align-self: auto;
-    grid-gap: 0;
-  }
-}
-</style>
-
 <script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
+import ListPaginate from '../list/ListPaginate.vue';
+import { handle403 } from '../../mixins/handle403';
+import octopusApi from '@saooti/octopus-api';
 import ParticipantItem from './ParticipantItem.vue';
-
+import { Participant } from '@/store/class/general/participant';
+import { emptyParticipantData } from '@/store/typeAppStore';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'ParticipantList',
 
-  props: ['first', 'size', 'query', 'organisationId', 'showCount'],
-
   components: {
     ParticipantItem,
+    ListPaginate
   },
 
-  created() {
-    this.fetchContent(true);
+  mixins: [handle403],
+
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 30, type: Number },
+    query: { default: undefined, type: String},
+    organisationId: { default: undefined, type: String},
+    showCount: { default: false, type: Boolean },
   },
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      dfirst: this.$props.first,
-      dsize: this.$props.size,
-      totalCount: 0,
-      displayCount: 0,
-      participants: [] as any,
-      inFetching: false,
+      loading: true as boolean,
+      dfirst: this.first as number,
+      dsize: this.size as number,
+      totalCount: 0 as number,
+      displayCount: 0 as number,
+      participants: [] as Array<Participant>,
+      isMobile: false as boolean,
     };
   },
 
+   
   computed: {
-    allFetched():boolean {
-      return this.dfirst >= this.totalCount;
+    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 {
+      return this.organisationId??this.$store.state.filter.organisationId;
     },
-    filterOrga():any {
-      return this.$store.state.filter.organisationId;
+  },
+  watch: {
+    query(): void {
+      this.reloadList();
     },
-    organisation():any {
-      if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
-      return undefined;
+    organisation(): void {
+      this.reloadList();
     },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.participants[this.dfirst] || 0===this.participants[this.dfirst].participantId){
+				this.fetchContent(false);
+			}
+		},
   },
 
+  created() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
-      this.inFetching = true;
-      if (reset) {
-        this.participants.length = 0;
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
+    async fetchContent(reset: boolean): Promise<void> {
+      this.loading = true;
+      try {
+        const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Participant>;sort: string;}>(0, 'participant/search',{
+          first: this.dfirst,
+          size: this.dsize,
+          query: this.query,
+          organisationId: this.organisation,
+        }, true);
+        if (reset) {
+          this.participants.length = 0;
+        }
+        this.displayCount = data.count;
+        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.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));
       }
-      const data = await octopusApi.fetchParticipants({
-        first: this.dfirst,
-        size: this.dsize,
-        query: this.query,
-        organisationId: this.organisation,
-      });
       this.loading = false;
-      this.loaded = true;
-      this.displayCount = data.count;
-      this.participants = this.participants.concat(data.result).filter((p: null) => {
-        if (null === p) {
-          this.displayCount--;
-        }
-        return null !== p;
-      });
-      this.dfirst += this.dsize;
-      this.totalCount = data.count;
-      this.inFetching = false;
-    },
-
-    displayMore(event: { preventDefault: () => void; }) {
-      event.preventDefault();
-      this.fetchContent(false);
-    },
-  },
-
-  watch: {
-    query: {
-      handler() {
-        this.fetchContent(true);
-      },
-    },
-    organisation: {
-      handler() {
-        this.fetchContent(true);
-      },
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.octopus-app{
+.participant-list {
+  align-self: stretch;
+  flex-grow: 1;
+  margin: 0;
+  padding: 0;
+  /*For ie11 */
+  display: flex;
+  flex-wrap: wrap;
+  /* end */
+
+  display: grid; /* 1 */
+  grid-template-columns: repeat(auto-fill, 14rem); /* 2 */
+  grid-gap: 2rem; /* 3 */
+  justify-content: space-between; /* 4 */
+}
+/** PHONES*/
+@media (max-width: 655px) {
+  .participant-list {
+    align-self: auto;
+    grid-gap: 0;
+  }
+}
+}
+</style>