@saooti/octopus-sdk 30.0.17 → 30.0.21

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

@@ -1,78 +1,27 @@
 <template>
   <div class="d-flex flex-column mt-2 mb-1 item-comment">
-    <div class="d-flex small-text">
-      <template v-if="!isEditing">
-        <b
-          v-if="
-            recordingInLive &&
-              ('Live' === comment.phase || 'Prelive' === comment.phase)
-          "
-          class="recording-bg me-1 text-light p-1"
-        >{{ $t('Live') }}</b>
-        <b
-          v-if="editRight || comment.status == 'Valid'"
-          class="me-2"
-        >{{
-          comment.name
-        }}</b>
-        <template v-else>
-          <b
-            :id="'popover-comment' + comment.comId"
-            tabindex="-1"
-            class="mr-2 text-danger"
-          >{{
-            comment.name
-          }}</b>
-          <Popover
-            :target="'popover-comment' + comment.comId"
-          >
-            {{ $t('Comment waiting') }}
-          </Popover>
-        </template>
-      </template>
-      <template v-else>
-        <input
-          v-model="temporaryName"
-          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"
-        :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>
-    <template v-if="!isEditing">
-      <!-- eslint-disable vue/no-v-html -->
-      <div v-html="urlify(contentDisplay)" />
-      <!-- eslint-enable -->
-      <a
-        v-if="comment.content.length > 300"
-        class="c-hand font-italic"
-        @click="summary = !summary"
-      >{{ readMore }}</a>
-    </template>
+    <CommentBasicView
+      v-if="!isEditing"
+      :comment="comment"
+      :edit-right="editRight"
+      :recording-in-live="recordingInLive"
+    />
     <template v-else>
+      <input
+        v-model="temporaryName"
+        class="form-input me-2 mb-2 width-auto"
+        type="text"
+        :class="{ 'border border-danger': temporaryName.length < 2 }"
+      >
       <textarea
         v-model="temporaryContent"
+        :class="{ 'border border-danger': 0===temporaryContent.length }"
         class="form-input"
         type="text"
       />
       <div class="d-flex justify-content-end">
         <button
-          class="btn btn-light m-1"
+          class="btn m-1"
           @click="isEditing = false"
         >
           {{ $t('Cancel') }}
@@ -86,12 +35,10 @@
         </button>
       </div>
     </template>
-    <div
-      class="mb-0 d-flex align-items-center mt-1"
-    >
+    <div class="d-flex align-items-center mt-1">
       <button
-        v-if="null === comment.commentIdReferer && 'Valid' === comment.status"
-        class="btn py-1 px-3 primary-color me-2"
+        v-if="null === comment.commentIdReferer && 'Valid'=== comment.status"
+        class="btn primary-color py-1 px-3 me-2"
         :data-selenium="'answer-button-comment-' + seleniumFormat(comment.name)"
         @click="answerComment"
       >
@@ -102,40 +49,29 @@
           (!isFlat && comment.relatedComments) ||
             (isFlat && comment.commentIdReferer)
         "
-        :id="'commentItem'+comment.comId"
-        class="primary-color c-hand d-flex align-items-center small-text input-no-outline"
-        type="button"
-        data-bs-toggle="collapse"
-        :data-bs-target="'#commentItemDetail'+comment.comId"
-        aria-expanded="false"
-        :aria-controls="'commentItemDetail'+comment.comId"
+        class="d-flex align-items-center small-text primary-color c-hand"
         @click="collapseVisible=!collapseVisible"
       >
-        <div class="d-flex align-items-center when-closed me-2">
-          <div v-if="comment.relatedComments">
+        <div 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" />
-        </div>
-        <div class="d-flex align-items-center when-opened">
-          <div v-if="comment.relatedComments">
+          </template>
+          <template v-else>
             {{ $t('Hide answers') }}
-          </div>
-          <div v-else>
-            {{ $t('In response to') }}
-          </div>
-          <span
-            class="saooti-arrow_down arrow-transform me-2"
-          />
+          </template>
+        </div>
+        <div v-else>
+          {{ $t('In response to') }}
         </div>
+        <span 
+          :class="collapseVisible? 'arrow-transform': ''"
+          class="saooti-arrow_down"
+        />
       </div>
       <EditCommentBox
         v-if="editRight"
@@ -148,11 +84,11 @@
       />
     </div>
     <div
-      :id="'commentItemDetail'+comment.comId"
-      :titleledby="'commentItem'+comment.comId"
+      v-if="collapseVisible"
+      class="ms-4"
     >
       <CommentInput
-        v-if="!isFlat || (isFlat && !comment.commentIdReferer) && collapseVisible"
+        v-if="!isFlat || (isFlat && !comment.commentIdReferer)"
         v-model:knownIdentity="knownIdentity"
         :focus="focus"
         :podcast="podcast"
@@ -162,11 +98,12 @@
         @newComment="newComment"
       />
       <CommentParentInfo
-        v-if="isFlat && comment.commentIdReferer && collapseVisible"
+        v-if="isFlat && comment.commentIdReferer"
         :com-id="comment.commentIdReferer"
+        :edit-right="editRight"
       />
       <CommentList
-        v-if="comment.relatedComments && collapseVisible && !isFlat"
+        v-if="!isFlat && comment.relatedComments"
         ref="commentList"
         :podcast="podcast"
         :fetch-conference="fetchConference"
@@ -184,10 +121,8 @@ 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 moment from 'moment';
-import Popover from '../../misc/Popover.vue';
+import CommentBasicView from './CommentBasicView.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
-import EditBoxVue from '../edit/EditBox.vue';
 const CommentInput = defineAsyncComponent(() => import('./CommentInput.vue'));
 const CommentParentInfo = defineAsyncComponent(() => import('./CommentParentInfo.vue'));
 const EditCommentBox = defineAsyncComponent(() => import('@/components/display/edit/EditCommentBox.vue'));
@@ -200,10 +135,11 @@ export default defineComponent({
     CommentParentInfo,
     EditCommentBox,
     CommentList,
-    Popover
+    CommentBasicView
   },
 
   mixins:[displayMethods, selenium],
+
   props: {
     comment: { default: ()=>({}), type: Object as ()=>CommentPodcast },
     podcast: { default: undefined, type: Object as ()=>Podcast },
@@ -211,11 +147,11 @@ export default defineComponent({
     organisation: { default: undefined, type: String},
     isFlat: { default: false, type: Boolean },
   },
+
   emits: ['deleteComment', 'updateComment', 'update:comment'],
   
   data() {
     return {
-      summary: true as boolean,
       collapseVisible: false as boolean,
       focus: false as boolean,
       isEditing: false as boolean,
@@ -224,36 +160,19 @@ export default defineComponent({
     };
   },
   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').toString();
-      return this.$t('Read less').toString();
-    },
-    contentDisplay(): string {
-      if (this.summary) return this.limitContent;
-      return this.comment.content;
-    },
-    organisationId(): string|undefined {
+    myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
     editRight(): boolean {
       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;
+      }
       return false;
     },
     knownIdentity: {
@@ -301,25 +220,19 @@ export default defineComponent({
       }
     },
     editComment(): void {
-      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;
-      }
+      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;
     },
     validEdit(): void {
       const comment = this.comment;
       comment.content = this.temporaryContent;
       comment.name = this.temporaryName;
-      (this.$refs.editBox as InstanceType<typeof EditBoxVue>).updateComment(comment);
+      (this.$refs.editBox as InstanceType<typeof EditCommentBox>).updateComment(comment);
     },
     updateStatus(data: string): void {
       const updatedComment = this.comment;
-      if(undefined === updatedComment.relatedValidComments){
-        return;
-      }
+      if(undefined === updatedComment.relatedValidComments){return;}
       if ('Valid' === data) {
         updatedComment.relatedValidComments += 1;
       } else {
@@ -329,9 +242,7 @@ export default defineComponent({
     },
     receiveCommentEvent(event: {type?: string; comment: CommentPodcast; status?: string; 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.$refs.commentList) {
             (this.$refs.commentList as InstanceType<typeof CommentList>).updateComment({ comment: event.comment });
@@ -344,7 +255,6 @@ export default defineComponent({
                 updatedComment.relatedValidComments += 1;
               }
             }
-            
             this.$emit('update:comment', updatedComment);
           }
           break;
@@ -352,14 +262,14 @@ export default defineComponent({
           if (this.$refs.commentList) {
             (this.$refs.commentList as InstanceType<typeof CommentList>).deleteComment(event.comment);
           } else {
-            const updatedComment = this.comment;
-            if(undefined !== updatedComment.relatedComments){
-              updatedComment.relatedComments -= 1;
+            const deletedComment = this.comment;
+            if(undefined !== deletedComment.relatedComments){
+              deletedComment.relatedComments -= 1;
             }
-            if (undefined !== updatedComment.relatedValidComments && 'Valid' === event.comment.status) {
-              updatedComment.relatedValidComments -= 1;
+            if (undefined !== deletedComment.relatedValidComments && 'Valid' === event.comment.status) {
+              deletedComment.relatedValidComments -= 1;
             }
-            this.$emit('update:comment', updatedComment);
+            this.$emit('update:comment', deletedComment);
           }
           break;
         default:
@@ -369,5 +279,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss"></style>

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);
         }