@saooti/octopus-sdk 30.0.19 → 30.0.23

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

@@ -1,25 +1,14 @@
 <template>
   <div class="d-flex flex-column mt-3">
-    <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
-      v-if="error"
-      class="text-danger align-self-center"
-    >
-      {{ $t('Comments loading error') }}
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading content ...'):undefined"
+      :error-text="error?$t(`Comments loading error`):undefined"
+    />
     <transition-group
-      v-show="loaded"
+      v-show="!loading"
       tag="div"
       name="comment-list"
-      class="d-flex flex-column my-transition-list-comments"
+      class="my-transition-list-comments"
     >
       <CommentItem
         v-for="(c, indexCom) in comments"
@@ -35,12 +24,12 @@
       />
     </transition-group>
     <button
-      v-show="!allFetched && loaded"
+      v-show="!allFetched && (!loading || 0!==first)"
       class="btn btn-primary mt-2"
       :class="comId ? 'align-self-start' : 'align-self-center'"
-      :disabled="inFetching"
+      :disabled="loading"
       :title="$t('See more comments')"
-      @click="displayMore"
+      @click="fetchContent(false)"
     >
       {{ $t('See more comments') }}
     </button>
@@ -48,10 +37,10 @@
 </template>
 
 <script lang="ts">
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { state } from '../../../store/paramStore';
 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';
@@ -65,11 +54,10 @@ export default defineComponent({
 
   components: {
     CommentItem,
+    ClassicLoading
   },
 
   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},
@@ -83,21 +71,19 @@ export default defineComponent({
   data() {
     return {
       loading: true as boolean,
-      loaded: false as boolean,
       error: false as boolean,
-      dfirst: this.first as number,
-      dsize: this.size as number,
+      first:0 as number,
+      size: 20 as number,
       totalCount: 0 as number,
       comments: [] as Array<CommentPodcast>,
-      inFetching: false as boolean,
     };
   },
 
   computed: {
     allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
+      return this.first >= this.totalCount;
     },
-    organisationId(): string|undefined {
+    myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
     podcastId(): number|undefined {
@@ -108,8 +94,8 @@ export default defineComponent({
       if (
         (state.generalParameters.isCommments &&
           ((this.podcast &&
-            this.organisationId === this.podcast.organisation.id) ||
-            this.organisationId === this.organisation)) ||
+            this.myOrganisationId === this.podcast.organisation.id) ||
+            this.myOrganisationId  === this.organisation)) ||
         state.generalParameters.isAdmin
       )
         return true;
@@ -118,10 +104,10 @@ export default defineComponent({
   },
   watch: {
     reload(): void {
-      this.fetchContent(true);
+      this.fetchContent();
     },
     status(): void {
-      this.fetchContent(true);
+      this.fetchContent();
     },
     comments: {
       deep: true,
@@ -131,121 +117,85 @@ export default defineComponent({
     },
   },
   created() {
-    this.fetchContent(true);
+    this.fetchContent();
   },
   methods: {
-    async fetchContent(reset: boolean): Promise<void> {
-      this.inFetching = true;
-      this.resetData(reset);
+    async fetchContent(reset=true): Promise<void> {
+      this.loading = true;
+      if(reset){
+        this.first = 0;
+      }
       let data;
       try {
-        const param: FetchParam = {
-          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, {first: this.dfirst,size: this.dsize});
-        } else if (!this.isFlat) {
-          data = await octopusApi.fetchRootComments(param);
-        } else {
+          data = await octopusApi.fetchCommentAnswers(this.comId, {first: this.first,size: this.size});
+        }else{
           const param: FetchParam = {
-            first: this.dfirst,
-            size: this.dsize,
+            first: this.first,
+            size: this.size,
             podcastId: this.podcastId,
+            status:this.editRight && this.status?[this.status]:['Valid'],
+            organisationId: undefined === this.podcastId? this.organisation: undefined,
           };
-          if (!this.editRight) {
-            param.status = ['Valid'];
-          }else if(this.status){
-            param.status = [this.status];
-          }
-          if (undefined === this.podcastId) {
-            param.organisationId = this.organisation;
-          }
           if (!this.isFlat) {
             data = await octopusApi.fetchRootComments(param);
           } else {
             data = await octopusApi.fetchComments(param);
           }
         }
-        this.resetData(reset);
-        this.loading = false;
-        this.loaded = true;
+        if(reset){
+          this.comments.length = 0;
+        }
         this.totalCount = data.totalElements;
         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: boolean): void {
-      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 }): void {
-      event.preventDefault();
-      this.fetchContent(false);
+    commentIsNotInList(commentIdReferer:undefined|number):boolean{
+      return !this.isFlat && undefined!==commentIdReferer && this.comId !==commentIdReferer;
     },
     deleteComment(comment: CommentPodcast): void {
-      if (
-        !this.isFlat &&
-        comment.commentIdReferer &&
-        this.comId !== comment.commentIdReferer
-      ) {
+      if (this.commentIsNotInList(comment.commentIdReferer)){
         const comItem = (this.$refs['comItem' + comment.commentIdReferer] as InstanceType<typeof CommentItem>);
         comItem.receiveCommentEvent({ type: 'Delete', comment: comment });
         return;
       }
-      const index = this.comments.findIndex(
-        (element: CommentPodcast) => 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: {type?: string; comment: CommentPodcast; status?: string; oldStatus?:string }): void {
-      if (
-        !this.isFlat &&
-        data.comment.commentIdReferer &&
-        this.comId !== data.comment.commentIdReferer
-      ) {
+      if (this.commentIsNotInList(data.comment.commentIdReferer)){
         const comItem = (this.$refs['comItem' + data.comment.commentIdReferer] as InstanceType<typeof CommentItem>);
         comItem.receiveCommentEvent({ ...data, type: 'Update' });
         return;
       }
-      const index = this.comments.findIndex(
-        (element: CommentPodcast) => element.comId === data.comment.comId
-      );
+      const index = this.findCommentIndex(data.comment.comId);
       if (-1 !== index) {
-        if (
-          'Valid' !== data.status &&
+        if ('Valid' !== data.status &&
           (!this.editRight || (this.status && this.status !== data.status))
         ) {
           this.comments.splice(index, 1);
         } else {
           this.comments.splice(index, 1, data.comment);
         }
-      } else if (this.status === data.comment.status) {
+      }else if (this.status === data.comment.status) {
         this.comments.unshift(data.comment);
-      } else if ('Valid' === data.status /* && !this.editRight */) {
+      } else if ('Valid' === data.status) {
         if (this.comments.length > 0) {
           let indexNewComment = -1;
           for (let i = 0, len = this.comments.length; i < len; i++) {
@@ -277,21 +227,15 @@ export default defineComponent({
       if (!myself && !this.editRight && 'Valid' !== comment.status) {
         return;
       }
-      if (
-        !this.isFlat &&
-        comment.commentIdReferer &&
-        this.comId !== comment.commentIdReferer
-      ) {
+      if (this.commentIsNotInList(comment.commentIdReferer)){
         const comItem = (this.$refs['comItem' + comment.commentIdReferer] as InstanceType<typeof CommentItem>);
         comItem.receiveCommentEvent({ type: 'Create', comment: comment });
         return;
       }
-      const index = this.comments.findIndex(
-        (element: CommentPodcast) => 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);
         }

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

@@ -1,79 +1,41 @@
 <template>
   <div class="mt-2">
-    <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="me-2">{{ comment.name }}</b>
-        <img
-          v-if="comment.certified"
-          class="icon-certified"
-          src="/img/certified.png"
-          :title="$t('Certified account')"
-        >
-        <div class="me-2">
-          {{ date }}
-        </div>
-      </div>
-      <div>{{ contentDisplay }}</div>
-      <a
-        v-if="comment.content.length > 300"
-        class="c-hand font-italic"
-        @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>
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
-import moment from 'moment';
+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',
 
+  components:{
+    CommentBasicView,
+    ClassicLoading
+  },
+
   props: {
     comId: { default: undefined, type: Number },
+    editRight: { default: false, type: Boolean},
   },
 
   data() {
     return {
       loading: true as boolean,
-      summary: true as boolean,
       comment: undefined as CommentPodcast|undefined,
     };
   },
-
-  
-  computed: {
-    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 || !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').toString();
-      return this.$t('Read less').toString();
-    },
-    contentDisplay(): string {
-      if (this.summary) return this.limitContent;
-      return this.comment && this.comment.content? this.comment.content : '';
-    },
-  },
-
   async created() {
     if(this.comId){
       this.comment = await octopusApi.fetchComment(this.comId);
@@ -81,6 +43,4 @@ export default defineComponent({
     this.loading = false;
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="comment-player-container comment-item-container">
+  <div class="comment-player-container">
     <div
       v-for="c in comments"
       :key="c.comId"
@@ -20,7 +20,7 @@
     </div>
     <div
       v-if="displayContent"
-      class="comment-content"
+      class="small-text mt-auto"
     >
       <div class="primary-color flex-shrink-0">
         {{ displayContent.name }}
@@ -95,10 +95,5 @@ export default defineComponent({
     margin-top: 20px;
     position: absolute;
   }
-  .comment-content {
-    margin-top: auto;
-    font-size: 0.7rem;
-    display: flex;
-  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isComments"
-    class="d-flex flex-column mt-3 module-box comment-item-container"
+    class="module-box"
   >
     <div class="d-flex align-items-center">
       <h2
@@ -18,7 +18,7 @@
       <button
         v-if="!isLive"
         :title="$t('Refresh')"
-        class="saooti-refresh-stud btn btn-reload primary-color"
+        class="btn admin-button saooti-refresh-stud"
         @click="reloadComments"
       />
     </div>
@@ -115,7 +115,7 @@ export default defineComponent({
     this.knownIdentity = this.getCookie('comment-octopus-name');
   },
   methods: {
-    updateFetch(value: { count: number }): void {
+    updateFetch(value: { count: number, comments: Array<CommentPodcast> }): void {
       this.loaded = true;
       this.$store.commit('setCommentLoaded', {
         ...value,
@@ -130,38 +130,23 @@ export default defineComponent({
       (this.$refs.commentList as InstanceType<typeof CommentListVue>).addNewComment(comment, true);
     },
     receiveCommentEvent(event: {type?: string; comment: CommentPodcast; status?: string; oldStatus?:string }): void {
+      const commentList = (this.$refs.commentList as InstanceType<typeof CommentListVue>);
       let statusUpdated = undefined;
       switch (event.type) {
-        case 'Create':
-          (this.$refs.commentList as InstanceType<typeof CommentListVue>).addNewComment(event.comment);
-          break;
+        case 'Create':commentList.addNewComment(event.comment);break;
         case 'Update':
           if (event.comment.status !== event.oldStatus) {
             statusUpdated = event.comment.status;
           }
-          (this.$refs.commentList as InstanceType<typeof CommentListVue>).updateComment({
+          commentList.updateComment({
             comment: event.comment,
             status: statusUpdated,
           });
           break;
-        case 'Delete':
-          (this.$refs.commentList as InstanceType<typeof CommentListVue>).deleteComment(event.comment);
-          break;
-        default:
-          console.log('Event not handle');
-          break;
+        case 'Delete':commentList.deleteComment(event.comment);break;
+        default:break;
       }
     },
   },
 })
-</script>
-
-<style lang="scss">
-.btn-reload {
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font-size: 1rem;
-  font-weight: bold;
-}
-</style>
+</script>

package/src/components/display/edit/EditBox.vue

@@ -14,5 +14,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss"></style>

package/src/components/display/edit/EditCommentBox.vue

@@ -1,53 +1,153 @@
 <template>
   <div class="d-flex">
     <button
-      class="btn btn-comment-edit saooti-edit-bounty"
+      class="btn admin-button me-1"
       title="edit"
       @click="editComment"
-    />
+    >
+      <span
+        class="saooti-edit-bounty"
+        :data-selenium="'Edit-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
     <button
       v-if="'Pending' === comment.status || 'Invalid' === comment.status"
-      class="btn btn-comment-edit saooti-valid-stud"
+      class="btn admin-button me-1"
       title="valid"
-      @click="validComment"
-    />
+      @click="commentModal('Valid')"
+    >
+      <span
+        class="saooti-valid-stud"
+        :data-selenium="'Validate-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
     <button
       v-if="'Pending' === comment.status || 'Valid' === comment.status"
-      class="btn btn-comment-edit saooti-cross"
+      class="btn admin-button me-1"
       title="invalid"
-      @click="invalidComment"
-    />
+      @click="commentModal('Invalid')"
+    >
+      <span
+        class="saooti-cross"
+        :data-selenium="'Invalidate-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
+    <button
+      v-if="organisation"
+      class="btn admin-button me-1"
+      :title="$t('See more')"
+      @click="seeMore = true"
+    >
+      <span
+        class="saooti-more_vert"
+        :data-selenium="'More-Info-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
     <button
-      class="btn btn-comment-edit saooti-bin"
+      class="btn admin-button me-1"
       title="delete"
-      @click="deleteComment"
+      @click="commentModal('Delete')"
+    >
+      <span
+        class="saooti-bin"
+        :data-selenium="'Trash-Comment-' + seleniumFormat(comment.name)"
+      />
+    </button>
+    <MessageModal
+      v-if="displayModal"
+      :validatetext="validateText"
+      :canceltext="canceltext"
+      :closable="false"
+      :title="modalTitle"
+      :message="modalMessage"
+      @cancel="displayModal = false"
+      @validate="deleteComment"
+      @close="displayModal = false"
     />
   </div>
 </template>
 
 <script lang="ts">
+import { selenium } from '../../mixins/functions';
 import { CommentPodcast } from '@/store/class/general/comment';
-import { defineComponent } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const MessageModal = defineAsyncComponent(
+  () => import('@/components/misc/modal/MessageModal.vue')
+);
 export default defineComponent({
+  components: {
+    MessageModal,
+  },
+  mixins: [selenium],
+
   props: {
-    comment: { default: undefined, type: Object as ()=>CommentPodcast},
+    comment: { default: () => ({}), type: Object as () => CommentPodcast },
+    organisation: { default: undefined, type: String },
+  },
+  emits: ['editComment', 'updateComment', 'deleteComment'],
+
+  data() {
+    return {
+      displayModal: false as boolean,
+      isDeleting: false as boolean,
+      type: 'update' as string,
+      seeMore: false as boolean,
+    };
+  },
+
+  computed: {
+    validateText(): string | undefined {
+      if ('Error' === this.type || 'Error403' === this.type)
+        return this.$t('Close').toString();
+      if (this.isDeleting) return undefined;
+      return this.$t('Yes').toString();
+    },
+    canceltext(): string | undefined {
+      if ('Error' === this.type || 'Error403' === this.type) return undefined;
+      return this.$t('No').toString();
+    },
+    modalMessage(): string {
+      switch (this.type) {
+        case 'Delete':
+          if (this.isDeleting)
+            return this.$t('Deleting in progress ...').toString();
+          return this.$t('Confirm comment deletion text', {
+            name: this.comment.name,
+          }).toString();
+        case 'Error':
+          return this.$t('Error occurs while updating your comment').toString();
+        case 'Error403':
+          return this.$t('403 error forbidden').toString();
+        default:
+          return '';
+      }
+    },
+    modalTitle(): string {
+      switch (this.type) {
+        case 'Delete':
+          return this.$t('Delete comment').toString();
+        case 'Error403':
+        case 'Error':
+          return this.$t('Error').toString();
+        default:
+          return this.$t('Update comment').toString();
+      }
+    },
   },
-  emits: ['editComment'],
 
   methods: {
-    editComment() {
+    editComment(): void {
       this.$emit('editComment');
     },
-    validComment() {
-      console.log('valid');
+    commentModal(type: string): void {
+      console.log('commentModal'+ type);
     },
-    invalidComment() {
-      console.log('invalid');
+    async updateComment(newComment?: CommentPodcast | undefined): Promise<void> {
+      console.log('updateComment' + newComment);
     },
-    deleteComment() {
-      console.log('delete');
+    async deleteComment(): Promise<void> {
+      console.log('deleteComment');
     },
   },
-})
-</script>
-<style lang="scss"></style>
+});
+</script>