@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,140 +1,107 @@
 <template>
   <div class="d-flex flex-column mt-3">
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading content ...') }}</h3>
+    <div
+      v-if="loading"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading content ...') }}
+      </h3>
     </div>
-    <div class="text-danger align-self-center" v-if="error">
+    <div
+      v-if="error"
+      class="text-danger align-self-center"
+    >
       {{ $t('Comments loading error') }}
     </div>
     <transition-group
+      v-show="loaded"
       tag="div"
       name="comment-list"
       class="d-flex flex-column my-transition-list-comments"
-      v-show="loaded"
     >
       <CommentItem
-        :class="'comItem' + c.comId"
-        :isFlat="isFlat"
-        v-model:comment="comments[index]"
+        v-for="(c, indexCom) in comments"
+        :ref="'comItem' + c.comId"
+        :key="c.comId"
+        v-model:comment="comments[indexCom]"
+        :is-flat="isFlat"
         :podcast="podcast"
-        :fetchConference="fetchConference"
+        :fetch-conference="fetchConference"
         :organisation="organisation"
-        v-for="(c, index) in comments"
-        :key="c.comId"
         @deleteComment="deleteComment(c)"
         @updateComment="updateComment"
       />
     </transition-group>
     <button
+      v-show="!allFetched && loaded"
       class="btn btn-primary mt-2"
       :class="comId ? 'align-self-start' : 'align-self-center'"
-      @click="displayMore"
       :disabled="inFetching"
-      v-show="!allFetched && loaded"
       :aria-label="$t('See more comments')"
+      @click="displayMore"
     >
       {{ $t('See more comments') }}
     </button>
   </div>
 </template>
 
-<style lang="scss">
-@import '../../../sass/_variables.scss';
-.my-transition-list-comments {
-  .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;
-    width: 100%;
-  }
-
-  .comment-list-enter {
-    opacity: 0;
-    transform: translateX(50px) scaleY(0.5);
-    background-color: $primaryColorReallyTransparent;
-    width: 100%;
-  }
-
-  .comment-list-enter-to {
-    opacity: 1;
-    transform: translateX(0) scaleY(1);
-    background-color: $primaryColorReallyTransparent;
-    width: 100%;
-  }
-
-  .comment-list-leave-active {
-    position: absolute;
-    background-color: $primaryColorReallyTransparent;
-    width: 100%;
-  }
-
-  .comment-list-leave-to {
-    opacity: 0;
-    transform: scaleY(0);
-    transform-origin: center top;
-    background-color: $primaryColorReallyTransparent;
-  }
-}
-</style>
-
 <script lang="ts">
 import { state } from '../../../store/paramStore';
 const octopusApi = require('@saooti/octopus-api');
 const moment = require('moment');
-import { defineComponent } from 'vue'
+
+import { Podcast } from '@/store/class/podcast';
+import { Conference } from '@/store/class/conference';
+import { CommentPodcast } from '@/store/class/comment';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CommentItem: any = defineAsyncComponent(() => import('./CommentItem.vue'));
 export default defineComponent({
   name: 'CommentList',
 
-  props: {
-    first: { default: 0 },
-    size: { default: 50 },
-    podcast: { default: undefined as any },
-    comId: { default: undefined as any },
-    reload: { default: false },
-    fetchConference: { default: undefined as any },
-    organisation: { default: undefined as any },
-    status: { default: undefined as any },
-    isFlat: { default: false },
-  },
-
-  emits: ['updateStatus', 'fetch'],
-
   components: {
-    CommentItem: () => import('./CommentItem.vue'),
+    CommentItem,
   },
 
-  created() {
-    this.fetchContent(true);
+  props: {
+    first: { default: 0, type: Number },
+    size: { default: 50, type: Number },
+    podcast: { default: undefined, type: Object as ()=>Podcast},
+    comId: { default: undefined, type: Number },
+    reload: { default: false, type: Boolean},
+    fetchConference: { default: undefined, type: Object as ()=>Conference},
+    organisation: { default: undefined, type: String},
+    status: { default: undefined, type: String},
+    isFlat: { default: false, type: Boolean},
   },
+  emits: ['updateStatus', 'fetch'],
 
   data() {
     return {
-      loading: true,
-      loaded: true,
-      error: false,
-      dfirst: this.$props.first,
-      dsize: this.$props.size,
-      totalCount: 0,
-      comments: [] as any,
-      inFetching: false,
+      loading: true as boolean,
+      loaded: false as boolean,
+      error: false as boolean,
+      dfirst: this.first as number,
+      dsize: this.size as number,
+      totalCount: 0 as number,
+      comments: [] as Array<CommentPodcast>,
+      inFetching: false as boolean,
     };
   },
 
   computed: {
-    allFetched():boolean {
+    allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-    podcastId():any {
+    podcastId(): number|undefined {
       if (this.podcast) return this.podcast.podcastId;
       return undefined;
     },
-
-    editRight() {
+    editRight(): boolean {
       if (
         (state.generalParameters.isCommments &&
           ((this.podcast &&
@@ -146,24 +113,53 @@ export default defineComponent({
       return false;
     },
   },
-
+  watch: {
+    reload(): void {
+      this.fetchContent(true);
+    },
+    status(): void {
+      this.fetchContent(true);
+    },
+    comments(): void {
+      this.$emit('fetch', { count: this.totalCount, comments: this.comments });
+    },
+  },
+  created() {
+    this.fetchContent(true);
+  },
   methods: {
-    async fetchContent(reset: boolean) {
+    async fetchContent(reset: boolean): Promise<void> {
       this.inFetching = true;
       this.resetData(reset);
       let data;
       try {
+        const param: any = {
+          first: this.dfirst,
+          size: this.dsize,
+          podcastId: this.podcastId,
+        };
+        if (!this.editRight) {
+          param.status = ['Valid'];
+        }else if(this.status){
+          param.status = [this.status];
+        }
+        if (undefined === this.podcastId) {
+          param.organisationId = this.organisation;
+        }
         if (this.comId) {
-          data = await octopusApi.fetchCommentAnswers(this.comId);
+          data = await octopusApi.fetchCommentAnswers(this.comId, {first: this.dfirst,size: this.dsize});
+        } else if (!this.isFlat) {
+          data = await octopusApi.fetchRootComments(param);
         } else {
-          let param :any = {
+          const param: any = {
             first: this.dfirst,
             size: this.dsize,
             podcastId: this.podcastId,
-            status: this.status,
           };
           if (!this.editRight) {
-            param.status = 'Valid';
+            param.status = ['Valid'];
+          }else if(this.status){
+            param.status = [this.status];
           }
           if (undefined === this.podcastId) {
             param.organisationId = this.organisation;
@@ -174,12 +170,11 @@ export default defineComponent({
             data = await octopusApi.fetchComments(param);
           }
         }
-
         this.resetData(reset);
         this.loading = false;
         this.loaded = true;
         this.totalCount = data.totalElements;
-        this.comments = this.comments.concat(data.content).filter((c:any) => {
+        this.comments = this.comments.concat(data.content).filter((c: CommentPodcast) => {
           return null !== c;
         });
         this.dfirst += this.dsize;
@@ -189,30 +184,29 @@ export default defineComponent({
       }
       this.inFetching = false;
     },
-
-    resetData(reset: any) {
+    resetData(reset: boolean): void {
       if (!reset) return;
       this.comments.length = 0;
       this.dfirst = 0;
       this.loading = true;
       this.loaded = false;
     },
-    displayMore(event: { preventDefault: () => void; }) {
+    displayMore(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.fetchContent(false);
     },
-    deleteComment(comment: { commentIdReferer: string; comId: any; }) {
+    deleteComment(comment: CommentPodcast): void {
       if (
         !this.isFlat &&
         comment.commentIdReferer &&
         this.comId !== comment.commentIdReferer
       ) {
-        let comItem :any = document.getElementsByClassName('comItem' + comment.commentIdReferer);
+        const comItem: any = document.getElementsByClassName('comItem' + comment.commentIdReferer);
         comItem[0].receiveCommentEvent({ type: 'Delete', comment: comment });
         return;
       }
-      let index = this.comments.findIndex(
-        (element:any) => element.comId === comment.comId
+      const index = this.comments.findIndex(
+        (element: CommentPodcast) => element.comId === comment.comId
       );
       if (-1 === index) return;
       this.totalCount -= 1;
@@ -221,18 +215,18 @@ export default defineComponent({
       }
       this.comments.splice(index, 1);
     },
-    updateComment(data: any) {
+    updateComment(data: any): void {
       if (
         !this.isFlat &&
         data.comment.commentIdReferer &&
         this.comId !== data.comment.commentIdReferer
       ) {
-        let comItem :any = document.getElementsByClassName('comItem' + data.comment.commentIdReferer);
+        const comItem: any = document.getElementsByClassName('comItem' + data.comment.commentIdReferer);
         comItem[0].receiveCommentEvent({ ...data, type: 'Update' });
         return;
       }
-      let index = this.comments.findIndex(
-        (element:any) => element.comId === data.comment.comId
+      const index = this.comments.findIndex(
+        (element: CommentPodcast) => element.comId === data.comment.comId
       );
       if (-1 !== index) {
         if (
@@ -273,7 +267,7 @@ export default defineComponent({
         this.$emit('updateStatus', data.status);
       }
     },
-    addNewComment(comment: { status: string; commentIdReferer: string; comId: any; }, myself = false) {
+    addNewComment(comment: CommentPodcast, myself = false): void {
       if (!myself && !this.editRight && 'Valid' !== comment.status) {
         return;
       }
@@ -282,12 +276,12 @@ export default defineComponent({
         comment.commentIdReferer &&
         this.comId !== comment.commentIdReferer
       ) {
-        let comItem :any = document.getElementsByClassName('comItem' + comment.commentIdReferer);
+        const comItem: any = document.getElementsByClassName('comItem' + comment.commentIdReferer);
         comItem[0].receiveCommentEvent({ type: 'Create', comment: comment });
         return;
       }
-      let index = this.comments.findIndex(
-        (element:any) => element.comId === comment.comId
+      const index = this.comments.findIndex(
+        (element: CommentPodcast) => element.comId === comment.comId
       );
       if (-1 === index) {
         this.totalCount += 1;
@@ -298,17 +292,45 @@ export default defineComponent({
       }
     },
   },
-
-  watch: {
-    reload() {
-      this.fetchContent(true);
-    },
-    status() {
-      this.fetchContent(true);
-    },
-    comments() {
-      this.$emit('fetch', { count: this.totalCount, comments: this.comments });
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.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>

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

@@ -1,80 +1,84 @@
 <template>
   <div class="mt-2">
-    <div class="d-flex" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <div class="mt-2">{{ $t('Loading content ...') }}</div>
+    <div
+      v-if="loading"
+      class="d-flex"
+    >
+      <div class="spinner-border me-3" />
+      <div class="mt-2">
+        {{ $t('Loading content ...') }}
+      </div>
     </div>
     <div v-else>
       <div class="d-flex small-Text">
-        <b class="mr-2">{{ comment.name }}</b>
+        <b class="me-2">{{ comment.name }}</b>
         <img
+          v-if="comment.certified"
           class="icon-certified"
           src="/img/certified.png"
-          v-if="comment.certified"
           :title="$t('Certified account')"
-        />
-        <div class="mr-2">{{ date }}</div>
+        >
+        <div class="me-2">
+          {{ date }}
+        </div>
       </div>
       <div>{{ contentDisplay }}</div>
       <a
-        class="c-hand font-italic"
         v-if="comment.content.length > 300"
+        class="c-hand font-italic"
         @click="summary = !summary"
-        >{{ readMore }}</a
-      >
+      >{{ readMore }}</a>
     </div>
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 const octopusApi = require('@saooti/octopus-api');
 const moment = require('moment');
+import { CommentPodcast } from '@/store/class/comment';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentParentInfo',
 
-  props: ['comId'],
-
-  components: {},
-
-  async created() {
-    this.comment = await octopusApi.fetchComment(this.comId);
-    this.loading = false;
+  props: {
+    comId: { default: undefined, type: Number },
   },
 
   data() {
     return {
-      loading: true,
-      summary: true,
-      comment: undefined as any,
+      loading: true as boolean,
+      summary: true as boolean,
+      comment: undefined as CommentPodcast|undefined,
     };
   },
 
+  
   computed: {
-    date():string {
-      if (this.comment.date)
+    date(): string {
+      if (this.comment && this.comment.date)
         return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
       return '';
     },
-    limitContent():string {
-      if (!this.comment.content) return '';
+    limitContent(): string {
+      if (!this.comment || !this.comment.content) return '';
       if (this.comment.content.length <= 300) return this.comment.content;
       return this.comment.content.substring(0, 300) + '...';
     },
-    readMore():string {
-      if (this.summary) return this.$t('Read more');
-      return this.$t('Read less');
+    readMore(): string {
+      if (this.summary) return this.$t('Read more').toString();
+      return this.$t('Read less').toString();
     },
-    contentDisplay():string {
+    contentDisplay(): string {
       if (this.summary) return this.limitContent;
-      return this.comment.content;
+      return this.comment && this.comment.content? this.comment.content : '';
     },
   },
 
-  methods: {},
-
-  watch: {},
-});
+  async created() {
+    this.comment = await octopusApi.fetchComment(this.comId);
+    this.loading = false;
+  },
+})
 </script>
+
+<style lang="scss"></style>

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

@@ -1,9 +1,9 @@
 <template>
   <div class="comment-player-container comment-item-container">
     <div
-      class="c-hand"
       v-for="c in comments"
       :key="c.comId"
+      class="c-hand"
       @mouseenter="displayContent = c"
       @mouseleave="displayContent = undefined"
       @click="displayContent = c"
@@ -11,74 +11,51 @@
       <div
         :style="'margin-left: ' + percentPosition(c.timeline) + '%'"
         class="comment-border"
-      ></div>
+      />
       <div
         :style="'margin-left: calc(' + percentPosition(c.timeline) + '% - 7px)'"
         :class="'status-' + c.status"
         :data-selenium="'comment-' + seleniumFormat(c.name)"
-      ></div>
+      />
     </div>
-    <div class="comment-content" v-if="displayContent">
-      <div class="primary-color flex-shrink">{{ displayContent.name }}</div>
-      <div class="ml-1 mr-1">-</div>
-      <div class="text-truncate">{{ displayContent.content }}</div>
+    <div
+      v-if="displayContent"
+      class="comment-content"
+    >
+      <div class="primary-color flex-shrink">
+        {{ displayContent.name }}
+      </div>
+      <div class="ms-1 me-1">
+        -
+      </div>
+      <div class="text-truncate">
+        {{ displayContent.content }}
+      </div>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-.comment-player-container {
-  position: relative;
-  width: 100%;
-  height: 3rem;
-  display: flex;
-  @media (max-width: 960px) {
-    display: none;
-  }
-  .comment-border {
-    width: auto;
-    position: absolute;
-    border-left: solid 1px #555;
-    height: 20px;
-  }
-  .status-Valid,
-  .status-Invalid,
-  .status-Pending {
-    margin-top: 20px;
-    position: absolute;
-  }
-  .comment-content {
-    margin-top: auto;
-    font-size: 0.7rem;
-    display: flex;
-  }
-}
-</style>
-
 <script lang="ts">
+import { CommentPodcast } from '@/store/class/comment';
 import { selenium } from '../../mixins/functions';
-
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentPlayer',
 
-  props: ['comments', 'totalTime'],
-
   components: {},
-
-  mixins: [selenium],
+  mixins:[selenium],
+  props: {
+    comments: { default: undefined, type: Array as ()=>Array<CommentPodcast>},
+    totalTime: { default: 0, type: Number},
+  },
 
   data() {
     return {
-      commentDisplay: [] as any,
-      displayContent: undefined as any,
+      displayContent: undefined as CommentPodcast|undefined,
     };
   },
-
-  computed: {},
-
   methods: {
-    percentPosition(time: number) {
+    percentPosition(time: number): number {
       let realDuration = this.totalTime;
       if (
         this.$store.state.player.podcast &&
@@ -94,5 +71,34 @@ export default defineComponent({
       return Math.round((time * 100) / this.totalTime);
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.comment-player-container {
+  position: relative;
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  @media (max-width: 960px) {
+    display: none;
+  }
+  .comment-border {
+    width: auto;
+    position: absolute;
+    border-left: solid 1px #555;
+    height: 20px;
+  }
+  .status-Valid,
+  .status-Invalid,
+  .status-Pending {
+    margin-top: 20px;
+    position: absolute;
+  }
+  .comment-content {
+    margin-top: auto;
+    font-size: 0.7rem;
+    display: flex;
+  }
+}
+</style>