@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,314 +1,220 @@
 <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>
-    <div class="text-danger align-self-center" v-if="error">
-      {{ $t('Comments loading error') }}
-    </div>
-    <transition-group
-      tag="div"
-      name="comment-list"
-      class="d-flex flex-column my-transition-list-comments"
-      v-show="loaded"
+    <ClassicLoading
+      :loading-text="loading?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Comments loading error`):undefined"
+    />
+    <div
+      v-show="!loading"
     >
       <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>
+    </div>
     <button
+      v-show="!allFetched && (!loading || 0!==first)"
       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')"
+      :disabled="loading"
+      :title="$t('See more comments')"
+      @click="fetchContent(false)"
     >
       {{ $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 ClassicLoading from '../../form/ClassicLoading.vue';
 import { state } from '../../../store/paramStore';
-const octopusApi = require('@saooti/octopus-api');
-const moment = require('moment');
-import { defineComponent } from 'vue'
+import octopusApi from '@saooti/octopus-api';
+import moment from 'moment';
+import { Podcast } from '@/store/class/general/podcast';
+import { Conference } from '@/store/class/conference/conference';
+import { CommentPodcast } from '@/store/class/general/comment';
+import { InterfacePageable } from '@/store/class/general/interfacePageable';
+import { defineComponent, defineAsyncComponent } from 'vue';
+/* eslint-disable */
+const CommentItem: any = defineAsyncComponent(() => import('./CommentItem.vue'));
+/* eslint-enable */
 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,
+    ClassicLoading
   },
 
-  created() {
-    this.fetchContent(true);
+  props: {
+    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,
+      error: false as boolean,
+      first:0 as number,
+      size: 20 as number,
+      totalCount: 0 as number,
+      comments: [] as Array<CommentPodcast>,
     };
   },
 
   computed: {
-    allFetched():boolean {
-      return this.dfirst >= this.totalCount;
+    allFetched(): boolean {
+      return this.first >= this.totalCount;
     },
-    organisationId() {
+    myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
-    podcastId():any {
-      if (this.podcast) return this.podcast.podcastId;
-      return undefined;
+    podcastId(): number|undefined {
+      return this.podcast?.podcastId;
     },
-
-    editRight() {
-      if (
-        (state.generalParameters.isCommments &&
-          ((this.podcast &&
-            this.organisationId === this.podcast.organisation.id) ||
-            this.organisationId === this.organisation)) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+    editRight(): boolean {
+      return (true === state.generalParameters.isCommments &&
+          ((this.myOrganisationId === this.podcast?.organisation.id) ||
+            this.myOrganisationId  === this.organisation)) ||
+        true === state.generalParameters.isAdmin;
+    },
+    watchVariable():string{
+      return `${this.reload}|${this.status}`;
+    }
+  },
+  watch: {
+    watchVariable: {
+      immediate:true,
+      handler(){
+        this.fetchContent();
+      }
+    },
+    comments: {
+      deep: true,
+      handler(){
+        this.$emit('fetch', { count: this.totalCount, comments: this.comments });
+      }
     },
   },
-
   methods: {
-    async fetchContent(reset: boolean) {
-      this.inFetching = true;
-      this.resetData(reset);
+    async fetchContent(reset=true): Promise<void> {
+      this.loading = true;
+      this.error = false;
+      if(reset){
+        this.first = 0;
+      }
       let data;
       try {
         if (this.comId) {
-          data = await octopusApi.fetchCommentAnswers(this.comId);
-        } else {
-          let param :any = {
-            first: this.dfirst,
-            size: this.dsize,
+          data = await octopusApi.postDataPublic<InterfacePageable<CommentPodcast>>(2, this.comId.toString(), {first: this.first,size: this.size});
+        }else{
+          data = await octopusApi.postDataPublic<InterfacePageable<CommentPodcast>>(2, this.isFlat ?'':'getRootCom',{
+            first: this.first,
+            size: this.size,
             podcastId: this.podcastId,
-            status: this.status,
-          };
-          if (!this.editRight) {
-            param.status = 'Valid';
-          }
-          if (undefined === this.podcastId) {
-            param.organisationId = this.organisation;
-          }
-          if (!this.isFlat) {
-            data = await octopusApi.fetchRootComments(param);
-          } else {
-            data = await octopusApi.fetchComments(param);
-          }
+            status:this.editRight && this.status?[this.status]: this.editRight? ['Valid','Pending', 'Invalid']:['Valid'],
+            organisationId: undefined === this.podcastId? this.organisation: undefined,
+          });
+        }
+        if(reset){
+          this.comments.length = 0;
         }
-
-        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;
-      } catch (error) {
-        this.loading = false;
+        this.first += this.size;
+      } catch {
         this.error = true;
       }
-      this.inFetching = false;
+      this.loading = false;
     },
-
-    resetData(reset: any) {
-      if (!reset) return;
-      this.comments.length = 0;
-      this.dfirst = 0;
-      this.loading = true;
-      this.loaded = false;
+    findCommentIndex(comId: number|undefined): number{
+      return this.comments.findIndex(
+        (element: CommentPodcast) => element.comId === comId
+      );
     },
-    displayMore(event: { preventDefault: () => void; }) {
-      event.preventDefault();
-      this.fetchContent(false);
+    commentIsNotInList(commentIdReferer:undefined|number):boolean{
+      return !this.isFlat && undefined!==commentIdReferer && null!==commentIdReferer && this.comId !==commentIdReferer;
     },
-    deleteComment(comment: { commentIdReferer: string; comId: any; }) {
-      if (
-        !this.isFlat &&
-        comment.commentIdReferer &&
-        this.comId !== comment.commentIdReferer
-      ) {
-        let comItem :any = document.getElementsByClassName('comItem' + comment.commentIdReferer);
-        comItem[0].receiveCommentEvent({ type: 'Delete', comment: comment });
+    deleteComment(comment: CommentPodcast): void {
+      if (this.commentIsNotInList(comment.commentIdReferer)){
+        const comItem = (this.$refs['comItem' + comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
+        comItem.receiveCommentEvent({ type: 'Delete', comment: comment });
         return;
       }
-      let index = this.comments.findIndex(
-        (element:any) => element.comId === comment.comId
-      );
+      const index = this.findCommentIndex(comment.comId);
       if (-1 === index) return;
       this.totalCount -= 1;
-      if (0 !== this.dfirst) {
-        this.dfirst -= 1;
+      if (0 !== this.first) {
+        this.first -= 1;
       }
       this.comments.splice(index, 1);
     },
-    updateComment(data: any) {
-      if (
-        !this.isFlat &&
-        data.comment.commentIdReferer &&
-        this.comId !== data.comment.commentIdReferer
-      ) {
-        let comItem :any = document.getElementsByClassName('comItem' + data.comment.commentIdReferer);
-        comItem[0].receiveCommentEvent({ ...data, type: 'Update' });
+    updateComment(data: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
+      if (this.commentIsNotInList(data.comment.commentIdReferer)){
+        const comItem = (this.$refs['comItem' + data.comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
+        comItem.receiveCommentEvent(data);
         return;
       }
-      let index = this.comments.findIndex(
-        (element:any) => element.comId === data.comment.comId
-      );
+      const index = this.findCommentIndex(data.comment.comId);
       if (-1 !== index) {
-        if (
-          'Valid' !== data.status &&
-          (!this.editRight || (this.status && this.status !== data.status))
-        ) {
+        if ((!this.editRight && 'Valid' !== data.comment.status) ||
+          (this.editRight && this.status && this.status !== data.comment.status)) {
           this.comments.splice(index, 1);
         } else {
           this.comments.splice(index, 1, data.comment);
         }
-      } else if (this.status === data.comment.status) {
-        this.comments.unshift(data.comment);
-      } else if ('Valid' === data.status /* && !this.editRight */) {
-        if (this.comments.length > 0) {
-          let indexNewComment = -1;
-          for (let i = 0, len = this.comments.length; i < len; i++) {
-            if (
-              moment(this.comments[i].date).isBefore(moment(data.comment.date))
-            ) {
-              indexNewComment = i;
-              break;
-            }
+      }else if((!this.editRight && 'Valid' === data.comment.status) ||
+              (this.editRight && !this.status) ||
+              (this.editRight && this.status && this.status === data.comment.status)){
+        let indexNewComment = 0;
+        for (let i = 0, len = this.comments.length; i < len; i++) {
+          if (
+            moment(this.comments[i].date).isBefore(moment(data.comment.date))
+          ) {
+            indexNewComment = i;
+            break;
           }
-          if (-1 !== indexNewComment) {
-            if (!this.status || this.status === data.status) {
-              this.comments.splice(indexNewComment, 0, data.comment);
-            } else {
-              this.comments.splice(indexNewComment, 1);
-            }
-          } else if (!this.status || this.status === data.status) {
-            this.comments.push(data.comment);
-          }
-        } else if (!this.status || this.status === data.status) {
-          this.comments.unshift(data.comment);
         }
+        this.comments.splice(indexNewComment, 0, data.comment);
       }
-      if (this.comId && data.status) {
-        this.$emit('updateStatus', data.status);
+      if (this.comId && data.oldStatus!==data.comment.status) {
+        this.$emit('updateStatus', data.comment.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;
       }
-      if (
-        !this.isFlat &&
-        comment.commentIdReferer &&
-        this.comId !== comment.commentIdReferer
-      ) {
-        let comItem :any = document.getElementsByClassName('comItem' + comment.commentIdReferer);
-        comItem[0].receiveCommentEvent({ type: 'Create', comment: comment });
+      if (this.commentIsNotInList(comment.commentIdReferer)){
+        const comItem = (this.$refs['comItem' + comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
+        comItem.receiveCommentEvent({ type: 'Create', comment: comment });
         return;
       }
-      let index = this.comments.findIndex(
-        (element:any) => element.comId === comment.comId
-      );
+      const index = this.findCommentIndex(comment.comId);
       if (-1 === index) {
         this.totalCount += 1;
-        this.dfirst += 1;
+        this.first += 1;
         if (!this.status || this.status === comment.status) {
           this.comments.unshift(comment);
         }
       }
     },
   },
-
-  watch: {
-    reload() {
-      this.fetchContent(true);
-    },
-    status() {
-      this.fetchContent(true);
-    },
-    comments() {
-      this.$emit('fetch', { count: this.totalCount, comments: this.comments });
-    },
-  },
-});
-</script>
+})
+</script>

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

@@ -1,80 +1,46 @@
 <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>
-    <div v-else>
-      <div class="d-flex small-Text">
-        <b class="mr-2">{{ comment.name }}</b>
-        <img
-          class="icon-certified"
-          src="/img/certified.png"
-          v-if="comment.certified"
-          :title="$t('Certified account')"
-        />
-        <div class="mr-2">{{ date }}</div>
-      </div>
-      <div>{{ contentDisplay }}</div>
-      <a
-        class="c-hand font-italic"
-        v-if="comment.content.length > 300"
-        @click="summary = !summary"
-        >{{ readMore }}</a
-      >
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading content ...'):undefined"
+    />
+    <CommentBasicView
+      v-if="!loading"
+      :comment="comment"
+      :edit-right="editRight"
+    />
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
-const moment = require('moment');
+import octopusApi from '@saooti/octopus-api';
+import CommentBasicView from './CommentBasicView.vue';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { CommentPodcast } from '@/store/class/general/comment';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentParentInfo',
 
-  props: ['comId'],
-
-  components: {},
+  components:{
+    CommentBasicView,
+    ClassicLoading
+  },
 
-  async created() {
-    this.comment = await octopusApi.fetchComment(this.comId);
-    this.loading = false;
+  props: {
+    comId: { default: undefined, type: Number },
+    editRight: { default: false, type: Boolean},
   },
 
   data() {
     return {
-      loading: true,
-      summary: true,
-      comment: undefined as any,
+      loading: true as boolean,
+      comment: undefined as CommentPodcast|undefined,
     };
   },
-
-  computed: {
-    date():string {
-      if (this.comment.date)
-        return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
-      return '';
-    },
-    limitContent():string {
-      if (!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');
-    },
-    contentDisplay():string {
-      if (this.summary) return this.limitContent;
-      return this.comment.content;
-    },
+  async created() {
+    if(this.comId){
+      this.comment = await octopusApi.fetchData<CommentPodcast>(2, `comment/${this.comId}`);
+    }
+    this.loading = false;
   },
-
-  methods: {},
-
-  watch: {},
-});
-</script>
+})
+</script>