@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -3,59 +3,74 @@
     <div class="d-flex small-Text">
       <template v-if="!isEditing">
         <b
-          class="recording-bg mr-1 text-light p-01"
           v-if="
             recordingInLive &&
               ('Live' === comment.phase || 'Prelive' === comment.phase)
           "
-          >{{ $t('Live') }}</b
-        >
-        <b class="mr-2" v-if="editRight || comment.status == 'Valid'">{{
+          class="recording-bg me-1 text-light p-01"
+        >{{ $t('Live') }}</b>
+        <b
+          v-if="editRight || comment.status == 'Valid'"
+          class="me-2"
+        >{{
           comment.name
         }}</b>
         <template v-else>
-          <b class="mr-2 text-danger" :id="'popover-comment' + comment.comId">{{
+          <b
+            :id="'popover-comment' + comment.comId"
+            class="me-2 text-danger"
+            data-bs-toggle="popover"
+            data-bs-trigger="hover focus"
+            :data-bs-content="$t('Comment waiting')"
+            data-bs-custom-class="wizard-help"
+          >{{
             comment.name
           }}</b>
-          <b-popover
-            :target="'popover-comment' + comment.comId"
-            triggers="hover"
-            custom-class="wizard-help"
-          >
-            {{ $t('Comment waiting') }}
-          </b-popover>
         </template>
       </template>
       <template v-else>
         <input
-          class="form-input mr-2 mb-2 width-auto"
-          type="text"
           v-model="temporaryName"
-          v-bind:class="{ 'border border-danger': temporaryName.length < 2 }"
-        />
+          class="form-input me-2 mb-2 width-auto"
+          type="text"
+          :class="{ 'border border-danger': temporaryName.length < 2 }"
+        >
       </template>
       <img
+        v-if="comment.certified"
         class="icon-certified"
         src="/img/certified.png"
-        v-if="comment.certified"
+        :data-selenium="'certified-icon-' + seleniumFormat(comment.name)"
         :title="$t('Certified account')"
+      >
+      <div class="me-2">
+        {{ date }}
+      </div>
+      <span 
+        v-if="editRight" 
+        :class="'status-' + comment.status"
+        :data-selenium="'status-comment-' + seleniumFormat(comment.name)"
       />
-      <div class="mr-2">{{ date }}</div>
-      <span v-if="editRight" :class="'status-' + comment.status"></span>
     </div>
     <template v-if="!isEditing">
-      <div v-html="urlify(contentDisplay)"></div>
+      <div v-html="urlify(contentDisplay)" />
       <a
-        class="c-hand font-italic"
         v-if="comment.content.length > 300"
+        class="c-hand font-italic"
         @click="summary = !summary"
-        >{{ readMore }}</a
-      >
+      >{{ readMore }}</a>
     </template>
     <template v-else>
-      <textarea class="form-input" type="text" v-model="temporaryContent" />
+      <textarea
+        v-model="temporaryContent"
+        class="form-input"
+        type="text"
+      />
       <div class="d-flex justify-content-end">
-        <button class="btn btn-light m-1" @click="isEditing = false">
+        <button
+          class="btn btn-light m-1"
+          @click="isEditing = false"
+        >
           {{ $t('Cancel') }}
         </button>
         <button
@@ -69,21 +84,22 @@
     </template>
     <div class="d-flex align-items-center mt-1">
       <button
-        @click="answerComment"
-        class="btn btn-answer primary-color mr-2"
         v-if="null === comment.commentIdReferer && 'Valid' === comment.status"
+        class="btn btn-answer primary-color me-2"
+        :data-selenium="'answer-button-comment-' + seleniumFormat(comment.name)"
+        @click="answerComment"
       >
         {{ $t('To answer') }}
       </button>
       <div
-        v-b-toggle="'answers-comment-' + comment.comId"
-        class="primary-color c-hand d-flex align-items-center small-Text input-no-outline"
         v-if="
           (!isFlat && comment.relatedComments) ||
             (isFlat && comment.commentIdReferer)
         "
+        v-b-toggle="'answers-comment-' + comment.comId"
+        class="primary-color c-hand d-flex align-items-center small-Text input-no-outline"
       >
-        <div class="d-flex align-items-center when-closed mr-2">
+        <div class="d-flex align-items-center when-closed me-2">
           <div v-if="comment.relatedComments">
             {{ $t('Display answers', { nb: comment.relatedComments }) }}
             <i v-if="editRight">{{
@@ -92,20 +108,26 @@
               })
             }}</i>
           </div>
-          <div v-else>{{ $t('In response to') }}</div>
-          <span class="saooti-arrow_down saooti-arrow_down-margin"></span>
+          <div v-else>
+            {{ $t('In response to') }}
+          </div>
+          <span class="saooti-arrow_down saooti-arrow_down-margin" />
         </div>
         <div class="d-flex align-items-center when-opened">
-          <div v-if="comment.relatedComments">{{ $t('Hide answers') }}</div>
-          <div v-else>{{ $t('In response to') }}</div>
+          <div v-if="comment.relatedComments">
+            {{ $t('Hide answers') }}
+          </div>
+          <div v-else>
+            {{ $t('In response to') }}
+          </div>
           <span
-            class="saooti-arrow_down saooti-arrow_down-margin arrow-transform mr-2"
-          ></span>
+            class="saooti-arrow_down saooti-arrow_down-margin arrow-transform me-2"
+          />
         </div>
       </div>
       <EditCommentBox
-        ref="editBox"
         v-if="editRight"
+        ref="editBox"
         :comment="comment"
         :organisation="organisation"
         @deleteComment="deleteComment"
@@ -115,120 +137,102 @@
     </div>
     <b-collapse
       :id="'answers-comment-' + comment.comId"
-      class="ml-4"
       v-model="collapseVisible"
+      class="ms-4"
     >
       <CommentInput
         v-if="!isFlat || (isFlat && !comment.commentIdReferer)"
+        v-model:knownIdentity="knownIdentity"
         :focus="focus"
         :podcast="podcast"
-        v-model:knownIdentity="knownIdentity"
-        :comId="comment.comId"
-        :fetchConference="fetchConference"
+        :comment="comment"
+        :fetch-conference="fetchConference"
         @cancelAction="collapseVisible = false"
         @newComment="newComment"
       />
       <CommentParentInfo
         v-if="isFlat && comment.commentIdReferer && collapseVisible"
-        :comId="comment.commentIdReferer"
+        :com-id="comment.commentIdReferer"
       />
       <CommentList
         v-if="comment.relatedComments && collapseVisible && !isFlat"
-        @updateStatus="updateStatus"
+        ref="commentList"
         :podcast="podcast"
-        :fetchConference="fetchConference"
+        :fetch-conference="fetchConference"
         :organisation="organisation"
-        ref="commentList"
-        :comId="comment.comId"
+        :com-id="comment.comId"
+        @updateStatus="updateStatus"
       />
     </b-collapse>
   </div>
 </template>
 
-<style lang="scss">
-.comment-item-container {
-  .icon-certified {
-    height: 15px;
-    margin-right: 0.5rem;
-  }
-  .btn-answer {
-    padding: 0.1rem 0.75rem;
-  }
-  .collapsed > .when-opened,
-  :not(.collapsed) > .when-closed {
-    display: none !important;
-  }
-}
-</style>
-
 <script lang="ts">
-import CommentInput from './CommentInput.vue';
-import CommentList from './CommentList.vue';
-import CommentParentInfo from './CommentParentInfo.vue';
-import EditCommentBox from '@/components/display/edit/EditCommentBox.vue';
 import { state } from '../../../store/paramStore';
-import { displayMethods } from '../../mixins/functions';
+import { displayMethods, selenium } from '../../mixins/functions';
+import { CommentPodcast } from '@/store/class/comment';
+import { Podcast } from '@/store/class/podcast';
+import { Conference } from '@/store/class/conference';
 const moment = require('moment');
-
-import { defineComponent, ref } from 'vue';
+const bootstrap = require('bootstrap/dist/js/bootstrap.esm.min.js');
+import { defineComponent, defineAsyncComponent } from 'vue';
+const CommentInput = defineAsyncComponent(() => import('./CommentInput.vue'));
+const CommentParentInfo = defineAsyncComponent(() => import('./CommentParentInfo.vue'));
+const EditCommentBox = defineAsyncComponent(() => import('@/components/display/edit/EditCommentBox.vue'));
+const CommentList = defineAsyncComponent(() => import('./CommentList.vue'));
 export default defineComponent({
   name: 'CommentItem',
 
-  props: ['comment', 'podcast', 'fetchConference', 'organisation', 'isFlat'],
-  emits: ['deleteComment', 'updateComment', 'update:comment'],
-
-  mixins: [displayMethods],
-
   components: {
-    CommentList,
-    EditCommentBox,
     CommentInput,
     CommentParentInfo,
+    EditCommentBox,
+    CommentList
   },
 
-  data() {
-    return {
-      summary: true,
-      collapseVisible: false,
-      focus: false,
-      isEditing: false,
-      temporaryContent: '',
-      temporaryName: '',
-    };
+  mixins:[displayMethods, selenium],
+  props: {
+    comment: { default: ()=>({}), type: Object as ()=>CommentPodcast },
+    podcast: { default: undefined, type: Object as ()=>Podcast },
+    fetchConference: { default: undefined, type: Object as ()=>Conference },
+    organisation: { default: undefined, type: String},
+    isFlat: { default: false, type: Boolean },
   },
-
-  setup() {
-    const commentList : any = ref(null);
-    const editBox: any = ref(null);
+  emits: ['deleteComment', 'updateComment', 'update:comment'],
+  
+  data() {
     return {
-      commentList,editBox
+      summary: true as boolean,
+      collapseVisible: false as boolean,
+      focus: false as boolean,
+      isEditing: false as boolean,
+      temporaryContent: '' as string,
+      temporaryName: '' as string,
     };
   },
-
   computed: {
-    date():string {
+    date(): string {
       if (this.comment.date)
         return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
       return '';
     },
-    limitContent():string {
+    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');
+    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;
     },
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-
-    editRight() {
+    editRight(): boolean {
       if (
         (state.generalParameters.isCommments &&
           ((this.podcast &&
@@ -240,49 +244,55 @@ export default defineComponent({
       return false;
     },
     knownIdentity: {
-      get():any {
+      get(): string|null {
         return this.$store.state.comments.knownIdentity;
       },
-      set(value: any) {
+      set(value: string|null) {
         this.$store.commit('setCommentIdentity', value);
       },
     },
-    recordingInLive():boolean {
+    recordingInLive(): boolean {
       return (
-        this.podcast &&
-        this.podcast.conferenceId &&
+        undefined!==this.podcast &&
+        undefined!==this.podcast.conferenceId &&
         0 !== this.podcast.conferenceId &&
         'READY' === this.podcast.processingStatus
       );
     },
   },
-
+  mounted(){
+    Array.from(document.querySelectorAll('b[data-bs-toggle="popover"]')).forEach(popoverNode => new bootstrap.Popover(popoverNode,{
+      trigger: 'hover focus'
+    }));
+  },
   methods: {
-    answerComment() {
+    answerComment(): void {
       this.collapseVisible = true;
       this.focus = !this.focus;
     },
-    deleteComment() {
+    deleteComment(): void {
       this.$emit('deleteComment');
     },
-    updateComment(data: any) {
+    updateComment(data: {type: string; comment: CommentPodcast; status?: string }): void {
       this.isEditing = false;
       this.$emit('updateComment', data);
     },
-    newComment(comment: { status: string; }, fromEvent = false) {
+    newComment(comment: CommentPodcast, fromEvent = false): void {
       if (undefined === this.fetchConference || fromEvent) {
-        let updatedComment = this.comment;
-        updatedComment.relatedComments += 1;
-        if ('Valid' === comment.status) {
+        const updatedComment = this.comment;
+        if(undefined !== updatedComment.relatedComments){
+          updatedComment.relatedComments += 1;
+        }
+        if (undefined !== updatedComment.relatedValidComments && 'Valid' === comment.status) {
           updatedComment.relatedValidComments += 1;
         }
         this.$emit('update:comment', updatedComment);
       }
-      if (this.commentList) {
-        this.commentList.addNewComment(comment, true);
+      if (this.$refs.commentList) {
+        (this.$refs.commentList as any).addNewComment(comment, true);
       }
     },
-    editComment() {
+    editComment(): void {
       if (this.comment.name && null !== this.comment.name) {
         this.temporaryName = this.comment.name;
       }
@@ -291,14 +301,17 @@ export default defineComponent({
       }
       this.isEditing = true;
     },
-    validEdit() {
-      let comment = this.comment;
+    validEdit(): void {
+      const comment = this.comment;
       comment.content = this.temporaryContent;
       comment.name = this.temporaryName;
-      this.editBox.updateComment(comment);
+      (this.$refs.editBox as any).updateComment(comment);
     },
-    updateStatus(data: string) {
-      let updatedComment = this.comment;
+    updateStatus(data: string): void {
+      const updatedComment = this.comment;
+      if(undefined === updatedComment.relatedValidComments){
+        return;
+      }
       if ('Valid' === data) {
         updatedComment.relatedValidComments += 1;
       } else {
@@ -306,31 +319,36 @@ export default defineComponent({
       }
       this.$emit('update:comment', updatedComment);
     },
-    receiveCommentEvent(event: { type: any; comment: { status: string; }; status: string; }) {
+    receiveCommentEvent(event: {type: string; comment: CommentPodcast; status?: string }): void {
       switch (event.type) {
         case 'Create':
           this.newComment(event.comment, true);
           break;
         case 'Update':
-          if (this.commentList) {
-            this.commentList.updateComment({ comment: event.comment });
+          if (this.$refs.commentList) {
+            (this.$refs.commentList as any).updateComment({ comment: event.comment });
           } else {
-            let updatedComment = this.comment;
-            if ('Invalid' === event.status) {
-              updatedComment.relatedValidComments -= 1;
-            } else if ('Valid' === event.status) {
-              updatedComment.relatedValidComments += 1;
+            const updatedComment = this.comment;
+            if(undefined !== updatedComment.relatedValidComments){
+              if ('Invalid' === event.status) {
+                updatedComment.relatedValidComments -= 1;
+              } else if ('Valid' === event.status) {
+                updatedComment.relatedValidComments += 1;
+              }
             }
+            
             this.$emit('update:comment', updatedComment);
           }
           break;
         case 'Delete':
-          if (this.commentList) {
-            this.commentList.deleteComment(event.comment);
+          if (this.$refs.commentList) {
+            (this.$refs.commentList as any).deleteComment(event.comment);
           } else {
-            let updatedComment = this.comment;
-            updatedComment.relatedComments -= 1;
-            if ('Valid' === event.comment.status) {
+            const updatedComment = this.comment;
+            if(undefined !== updatedComment.relatedComments){
+              updatedComment.relatedComments -= 1;
+            }
+            if (undefined !== updatedComment.relatedValidComments && 'Valid' === event.comment.status) {
               updatedComment.relatedValidComments -= 1;
             }
             this.$emit('update:comment', updatedComment);
@@ -341,7 +359,7 @@ export default defineComponent({
       }
     },
   },
-
-  watch: {},
-});
+})
 </script>
+
+<style lang="scss"></style>