@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,66 +1,47 @@
 <template>
   <div class="d-flex flex-column mt-2 mb-1 item-comment">
-    <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'">{{
-          comment.name
-        }}</b>
-        <template v-else>
-          <b class="mr-2 text-danger" :id="'popover-comment' + comment.comId">{{
-            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 }"
-        />
-      </template>
-      <img
-        class="icon-certified"
-        src="/img/certified.png"
-        v-if="comment.certified"
-        :title="$t('Certified account')"
+    <CommentBasicView
+      v-if="!isEditing"
+      :comment="comment"
+      :edit-right="editRight"
+      :recording-in-live="recordingInLive"
+    />
+    <template v-else>
+      <input
+        ref="focusElement"
+        v-model="temporaryName"
+        class="form-input"
+        type="text"
+        :class="{ 'border border-danger': 0 === countName || !validName }"
+      >
+      <p
+        class="d-flex justify-content-end small-text"
+        :class="{ 'text-danger': !validName }"
+      >
+        {{ countName + ' / ' + maxName }}
+      </p>
+      <textarea
+        v-model="temporaryContent"
+        :class="{ 'border border-danger': 0 === countComment || !validComment }"
+        class="form-input"
+        type="text"
       />
-      <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>
-      <a
-        class="c-hand font-italic"
-        v-if="comment.content.length > 300"
-        @click="summary = !summary"
-        >{{ readMore }}</a
+      <p
+        class="d-flex justify-content-end small-text"
+        :class="{ 'text-danger': !validComment }"
       >
-    </template>
-    <template v-else>
-      <textarea class="form-input" type="text" v-model="temporaryContent" />
+        {{ countComment + ' / ' + maxComment }}
+      </p>
       <div class="d-flex justify-content-end">
-        <button class="btn btn-light m-1" @click="isEditing = false">
+        <button
+          class="btn m-1"
+          @click="isEditing = false"
+        >
           {{ $t('Cancel') }}
         </button>
         <button
           class="btn btn-primary m-1"
-          :disabled="0 === temporaryContent.length || temporaryName.length < 2"
+          :disabled="0 === countComment || !validComment || 0 === countName || !validName"
           @click="validEdit"
         >
           {{ $t('Validate') }}
@@ -69,43 +50,45 @@
     </template>
     <div class="d-flex align-items-center mt-1">
       <button
+        v-if="null === comment.commentIdReferer && 'Valid'=== comment.status"
+        class="btn d-flex align-items-center py-1 px-3 me-2"
+        :data-selenium="'answer-button-comment-' + seleniumFormat(comment.name)"
         @click="answerComment"
-        class="btn btn-answer primary-color mr-2"
-        v-if="null === comment.commentIdReferer && 'Valid' === comment.status"
       >
         {{ $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"
+      <button
         v-if="
           (!isFlat && comment.relatedComments) ||
             (isFlat && comment.commentIdReferer)
         "
+        class="btn py-1 d-flex align-items-center px-3 me-2"
+        @click="collapseVisible=!collapseVisible"
       >
-        <div class="d-flex align-items-center when-closed mr-2">
-          <div v-if="comment.relatedComments">
+        <span v-if="comment.relatedComments">
+          <template v-if="!collapseVisible">
             {{ $t('Display answers', { nb: comment.relatedComments }) }}
             <i v-if="editRight">{{
               $t('(nb valid comment answers)', {
                 nb: comment.relatedValidComments,
               })
             }}</i>
-          </div>
-          <div v-else>{{ $t('In response to') }}</div>
-          <span class="saooti-arrow_down saooti-arrow_down-margin"></span>
-        </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>
-          <span
-            class="saooti-arrow_down saooti-arrow_down-margin arrow-transform mr-2"
-          ></span>
-        </div>
-      </div>
+          </template>
+          <template v-else>
+            {{ $t('Hide answers') }}
+          </template>
+        </span>
+        <span v-else>
+          {{ $t('In response to') }}
+        </span>
+        <span 
+          :class="collapseVisible? 'arrow-transform': ''"
+          class="ms-1 saooti-down"
+        />
+      </button>
       <EditCommentBox
-        ref="editBox"
         v-if="editRight"
+        ref="editBox"
         :comment="comment"
         :organisation="organisation"
         @deleteComment="deleteComment"
@@ -113,192 +96,167 @@
         @editComment="editComment"
       />
     </div>
-    <b-collapse
-      :id="'answers-comment-' + comment.comId"
-      class="ml-4"
-      v-model="collapseVisible"
+    <div
+      v-if="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"
+        v-if="isFlat && comment.commentIdReferer"
+        :com-id="comment.commentIdReferer"
+        :edit-right="editRight"
       />
       <CommentList
-        v-if="comment.relatedComments && collapseVisible && !isFlat"
-        @updateStatus="updateStatus"
+        v-if="!isFlat && comment.relatedComments"
+        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>
   </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';
-const moment = require('moment');
-
-import { defineComponent, ref } from 'vue';
+import { displayMethods, selenium } from '../../mixins/functions';
+import { CommentPodcast } from '@/store/class/general/comment';
+import { Podcast } from '@/store/class/general/podcast';
+import { Conference } from '@/store/class/conference/conference';
+import CommentBasicView from './CommentBasicView.vue';
+import Constants from '../../../../public/config';
+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,
+    CommentBasicView
   },
 
-  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
+      collapseVisible: false as boolean,
+      focus: false as boolean,
+      isEditing: false as boolean,
+      temporaryContent: '' as string,
+      temporaryName: '' as string,
+      maxComment : Constants.MAX_COMMENT as number,
+      maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
-
   computed: {
-    date():string {
-      if (this.comment.date)
-        return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
-      return '';
+    validName(): boolean{
+      return this.countName <= this.maxName;
     },
-    limitContent():string {
-      if (!this.comment.content) return '';
-      if (this.comment.content.length <= 300) return this.comment.content;
-      return this.comment.content.substring(0, 300) + '...';
+    countName(): number{
+      return this.temporaryName.length;
     },
-    readMore():string {
-      if (this.summary) return this.$t('Read more');
-      return this.$t('Read less');
+    validComment(): boolean{
+      return this.countComment <= this.maxComment;
     },
-    contentDisplay():string {
-      if (this.summary) return this.limitContent;
-      return this.comment.content;
+    countComment(): number{
+      return this.temporaryContent.length;
     },
-    organisationId() {
+    myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
-
-    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;
     },
     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?.conferenceId &&
         0 !== this.podcast.conferenceId &&
         'READY' === this.podcast.processingStatus
       );
     },
   },
-
   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 InstanceType<typeof CommentList>).addNewComment(comment, true);
       }
     },
-    editComment() {
-      if (this.comment.name && null !== this.comment.name) {
-        this.temporaryName = this.comment.name;
-      }
-      if (this.comment.content && null !== this.comment.content) {
-        this.temporaryContent = this.comment.content;
-      }
+    editComment(): void {
+      this.temporaryName = this.comment.name && null !== this.comment.name ? this.comment.name : '';
+      this.temporaryContent = this.comment.content && null !== this.comment.content ? this.comment.content : '';
       this.isEditing = true;
+      this.$nextTick(() => {
+        (this.$refs.focusElement as HTMLElement)?.focus();
+      });
     },
-    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 InstanceType<typeof EditCommentBox>).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,34 +264,40 @@ export default defineComponent({
       }
       this.$emit('update:comment', updatedComment);
     },
-    receiveCommentEvent(event: { type: any; comment: { status: string; }; status: string; }) {
+    receiveCommentEvent(event: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
       switch (event.type) {
-        case 'Create':
-          this.newComment(event.comment, true);
-          break;
+        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 InstanceType<typeof CommentList>).updateComment(event);
           } else {
-            let updatedComment = this.comment;
-            if ('Invalid' === event.status) {
-              updatedComment.relatedValidComments -= 1;
-            } else if ('Valid' === event.status) {
-              updatedComment.relatedValidComments += 1;
+            const updatedComment = this.comment;
+            let updatedStatus = "";
+            if (event.comment.status && event.comment.status !== event.oldStatus) {
+              updatedStatus = event.comment.status;
+            }
+            if(undefined !== updatedComment.relatedValidComments){
+              if ('Invalid' ===updatedStatus) {
+                updatedComment.relatedValidComments -= 1;
+              } else if ('Valid' === updatedStatus) {
+                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 InstanceType<typeof CommentList>).deleteComment(event.comment);
           } else {
-            let updatedComment = this.comment;
-            updatedComment.relatedComments -= 1;
-            if ('Valid' === event.comment.status) {
-              updatedComment.relatedValidComments -= 1;
+            const deletedComment = this.comment;
+            if(undefined !== deletedComment.relatedComments){
+              deletedComment.relatedComments -= 1;
             }
-            this.$emit('update:comment', updatedComment);
+            if (undefined !== deletedComment.relatedValidComments && 'Valid' === event.comment.status) {
+              deletedComment.relatedValidComments -= 1;
+            }
+            this.$emit('update:comment', deletedComment);
           }
           break;
         default:
@@ -341,7 +305,5 @@ export default defineComponent({
       }
     },
   },
-
-  watch: {},
-});
+})
 </script>