@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,30 +1,46 @@
 <template>
-  <div class="d-flex flex-column comment-input-container mt-3" v-if="isPresent">
+  <div
+    v-if="isPresent"
+    class="d-flex flex-column comment-input-container mt-3"
+  >
     <b
-      class="small-Text mt-1 c-hand"
-      @click="changeIdentity"
       v-if="knownIdentity && !editName"
-      >{{ knownIdentity }}</b
+      class="small-text mt-1 c-hand"
+      @click="changeIdentity"
+    >{{ knownIdentity }}</b>
+    <div
+      v-if="editName"
+      class="d-flex"
     >
-    <div class="d-flex" v-if="knownIdentity && editName">
-      <input
-        class="small-Text mt-1"
-        type="text"
-        v-model="temporaryName"
-        v-bind:class="{ 'border border-danger': temporaryName.length < 2 }"
-      />
-      <button class="btn btn-light p-1 m-1" @click="editName = false">
+      <div class="d-flex flex-column">
+        <input
+          v-model="temporaryName"
+          class="small-text mt-1"
+          type="text"
+          :class="{ 'border border-danger': 0 === countName || !validName }"
+        >
+        <p
+          class="d-flex justify-content-end small-text mb-0"
+          :class="{ 'text-danger': !validName }"
+        >
+          {{ countName + ' / ' + maxName }}
+        </p>
+      </div>
+      <button
+        class="btn m-1"
+        @click="editName = false"
+      >
         {{ $t('Cancel') }}
       </button>
       <button
-        class="btn btn-primary p-1 m-1"
-        :disabled="temporaryName.length < 2"
+        class="btn btn-primary m-1"
+        :disabled="0 === countName || !validName"
         @click="validEdit"
       >
         {{ $t('Validate') }}
       </button>
     </div>
-    <b-form-textarea
+    <textarea
       ref="textarea"
       v-model="newComment"
       :placeholder="placeholder"
@@ -32,19 +48,30 @@
       :class="{ short: isOneLine && !newComment.includes('\n') }"
       @focus="textareaFocus = true"
       @blur="textareaFocus = false"
-    ></b-form-textarea>
-    <div class="d-flex justify-content-end mt-1" v-if="textareaFocus">
-      <button class="btn mr-2" @mousedown="cancelAction">
-        {{ $t('Cancel') }}
-      </button>
-      <button
-        class="btn btn-primary"
-        @mousedown="requestToSend"
-        :disabled="0 === newComment.trim().length"
+    />
+    <template v-if="textareaFocus">
+      <p
+        class="d-flex justify-content-end small-text"
+        :class="{ 'text-danger': !validComment }"
       >
-        {{ placeholder }}
-      </button>
-    </div>
+        {{ countComment + ' / ' + maxComment }}
+      </p>
+      <div class="d-flex justify-content-end mt-1">
+        <button
+          class="btn me-2"
+          @mousedown="cancelAction"
+        >
+          {{ $t('Cancel') }}
+        </button>
+        <button
+          class="btn btn-primary"
+          :disabled="0 === countComment || !validComment"
+          @mousedown="requestToSend"
+        >
+          {{ placeholder }}
+        </button>
+      </div>
+    </template>
     <AddCommentModal
       v-if="checkIdentityModal"
       @validate="postComment"
@@ -52,134 +79,96 @@
     />
     <MessageModal
       v-if="postError"
-      @close="postError = false"
-      @validate="postError = false"
       :validatetext="$t('Close')"
       :title="$t('Error')"
       :message="$t('Error occurs while post your comment...')"
+      @close="postError = false"
+      @validate="postError = false"
     />
   </div>
 </template>
 
-<style lang="scss">
-@import '../../../sass/_variables.scss';
-.comment-input-container {
-  textarea::placeholder {
-    color: $octopus-primary-color;
-  }
-  textarea:focus::placeholder {
-    color: black;
-  }
-  textarea {
-    border-top: 0;
-    border-right: 0;
-    border-left: 0;
-    border-bottom: 0.1rem solid #ddd !important;
-    overflow: hidden !important;
-    box-shadow: unset !important;
-    background: transparent !important;
-    height: 40px;
-  }
-  textarea.short {
-    max-height: 38px;
-  }
-}
-</style>
-
 <script lang="ts">
-import AddCommentModal from './AddCommentModal.vue';
-import MessageModal from '../../misc/modal/MessageModal.vue';
-const octopusApi = require('@saooti/octopus-api');
-import commentApi from '@/api/comments';
-
+import octopusApi from '@saooti/octopus-api';
+import crudApi from '@/api/classicCrud';
 import { cookies } from '../../mixins/functions';
 import { state } from '../../../store/paramStore';
-
-import { defineComponent, ref } from 'vue';
+import { Podcast } from '@/store/class/general/podcast';
+import { Conference } from '@/store/class/conference/conference';
+import { CommentPodcast } from '@/store/class/general/comment';
+import Constants from '../../../../public/config';
+import { defineComponent, defineAsyncComponent } from 'vue';
+const AddCommentModal = defineAsyncComponent(() => import('./AddCommentModal.vue'));
+const MessageModal = defineAsyncComponent(() => import('../../misc/modal/MessageModal.vue'));
 export default defineComponent({
   name: 'CommentInput',
-
-  props: {
-    podcast: { default: undefined as any },
-    knownIdentity: { default: null as any },
-    focus: { default: false },
-    comId: { default: undefined as any },
-    fetchConference: { default: undefined as any },
-  },
-  emits: ['update:knownIdentity', 'cancelAction', 'newComment'],
-
-  mixins: [cookies],
-
   components: {
     AddCommentModal,
     MessageModal,
   },
+  mixins:[cookies],
 
-  setup() {
-    const textarea : any = ref(null);
-    return {
-      textarea,
-    };
+  props: {
+    podcast: { default: undefined, type: Object as ()=>Podcast },
+    knownIdentity: { default: undefined, type: String },
+    focus: { default: false, type: Boolean },
+    comment: { default: undefined, type: Object as ()=>CommentPodcast },
+    fetchConference: { default: undefined, type: Object as ()=>Conference },
   },
+  emits: ['update:knownIdentity', 'cancelAction', 'newComment'],
 
   data() {
     return {
-      newComment: '',
-      textareaFocus: false,
-      checkIdentityModal: false,
-      postError: false,
-      isOneLine: true,
-      editName: false,
-      temporaryName: '',
+      newComment: '' as string,
+      textareaFocus: false as boolean,
+      checkIdentityModal: false as boolean,
+      postError: false as boolean,
+      isOneLine: true as boolean,
+      editName: false as boolean,
+      temporaryName: '' as string,
+      maxComment : Constants.MAX_COMMENT as number,
+      maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
 
   computed: {
-    isPresent() {
+    validName(): boolean{
+      return this.countName <= this.maxName;
+    },
+    countName(): number{
+      return this.temporaryName.length;
+    },
+    validComment(): boolean{
+      return this.countComment <= this.maxComment;
+    },
+    countComment(): number{
+      return this.newComment.length;
+    },
+    isPresent(): boolean {
       if (!this.podcast) return true;
-      let podcastComment = 'INHERIT';
-      if (this.podcast.annotations && this.podcast.annotations.COMMENTS) {
-        podcastComment = this.podcast.annotations.COMMENTS;
-      }
-      let organisationComment = 'LIVE_ONLY';
-      if (this.podcast.organisation.comments) {
-        organisationComment = this.podcast.organisation.comments;
-      }
-      if (
-        ('LIVE_ONLY' === podcastComment &&
+      let podcastComment = this.podcast.annotations?.COMMENTS ?? 'INHERIT';
+      let organisationComment = this.podcast.organisation.comments??'LIVE_ONLY';
+      return !(('LIVE_ONLY' === podcastComment &&
           'READY_TO_RECORD' !== this.podcast.processingStatus) ||
         ('INHERIT' === podcastComment &&
           'LIVE_ONLY' === organisationComment &&
-          'READY_TO_RECORD' !== this.podcast.processingStatus)
-      ) {
-        return false;
-      }
-      return true;
-    },
-    placeholder():string {
-      if (this.comId) return this.$t('Answer a comment');
-      return this.$t('Write a comment');
+          'READY_TO_RECORD' !== this.podcast.processingStatus));
     },
-    organisationId() {
-      return state.generalParameters.organisationId;
+    placeholder(): string {
+      return this.comment?.comId? this.$t('Answer a comment') : this.$t('Write a comment');
     },
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
+    isCertified(): boolean {
+      return (true === state.generalParameters.isCommments &&
+        state.generalParameters.organisationId === this.podcastOrga) ||
+        true === state.generalParameters.isAdmin;
     },
-    isCertified() {
-      if (
-        (state.generalParameters.isCommments &&
-          this.organisationId === this.podcast.organisation.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+    userId(): string|undefined {
+      return state.generalParameters.authenticated ? this.$store.state.profile.userId : undefined;
     },
-    userId():any {
-      if (this.authenticated) return this.$store.state.profile.userId;
-      return undefined;
-    },
-    phase() {
+    phase(): string|undefined {
+      if(undefined === this.podcast){
+        return this.comment ? this.comment.phase : undefined;
+      }
       if (
         !this.podcast.conferenceId ||
         0 === this.podcast.conferenceId ||
@@ -194,72 +183,89 @@ export default defineComponent({
         return 'Prelive';
       return 'Live';
     },
+    podcastOrga(): string|undefined{
+      const commentOrga = this.comment?.organisationId ??'';
+      return this.podcast?.organisation.id ?? commentOrga;
+    }
+  },
+  watch: {
+    textareaFocus(): void {
+      this.newComment = this.newComment.trim();
+    },
+    focus(): void {
+      (this.$refs.textarea as HTMLElement).focus();
+    },
+    newComment(): void {
+      const padding =
+        1.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+      this.isOneLine =
+        (this.$refs.textarea as HTMLElement).clientWidth -
+          this.inputExceeded(
+            this.newComment,
+            '18px Montserrat, sans-serif, Helvetica Neue'
+          ) >
+        padding;
+    },
   },
-
   methods: {
-    changeIdentity() {
+    changeIdentity(): void {
+      if(!this.knownIdentity){return}
       this.temporaryName = this.knownIdentity;
       this.editName = true;
     },
-    validEdit() {
+    validEdit(): void {
       this.setCookie('comment-octopus-name', this.temporaryName);
       this.$emit('update:knownIdentity', this.temporaryName);
       this.editName = false;
     },
-    inputExceeded(text: string, font: string) {
-      let element = document.createElement('canvas');
-      let context = element.getContext('2d');
-      context!.font = font;
-      return context!.measureText(text).width;
+    inputExceeded(text: string, font: string): number {
+      const context = document.createElement('canvas').getContext('2d');
+      if(null === context){return 0;}
+      context.font = font;
+      return context.measureText(text).width;
     },
-    requestToSend() {
+    requestToSend(): void {
       if (this.knownIdentity) {
         this.postComment();
       } else {
         this.checkIdentityModal = true;
       }
     },
-    cancelAction() {
+    cancelAction(): void {
       this.$emit('cancelAction');
     },
-    async postComment(name?: string) {
-      if (name) {
-        this.setCookie('comment-octopus-name', name);
-        this.$emit('update:knownIdentity', name);
-      }
+    defineTimelineValue(): number{
       let timeline = 0;
       if (
-        (this.$store.state.player.podcast &&
-          this.$store.state.player.podcast.podcastId ===
-            this.podcast.podcastId) ||
-        (this.$store.state.player.live &&
-          this.$store.state.player.live.livePodcastId ===
-            this.podcast.podcastId)
+        undefined !== this.podcast &&(
+        (this.$store.state.player.podcast?.podcastId ===this.podcast.podcastId) ||
+        (this.$store.state.player.live?.livePodcastId ===this.podcast.podcastId))
       ) {
         timeline = Math.round(
-          this.$store.state.player.elapsed! * this.$store.state.player.total!
+          this.$store.state.player.elapsed * this.$store.state.player.total
         );
         if (this.podcast.duration && this.$store.state.player.podcast) {
           timeline = Math.round(
-            timeline -
-              (this.$store.state.player.total! - this.podcast.duration / 1000)
+            timeline - (this.$store.state.player.total - this.podcast.duration / 1000)
           );
         }
-        if (timeline < 0) {
-          timeline = 0;
-        }
       }
-      let sendName = this.knownIdentity;
-      if (null === sendName && name) {
-        sendName = name;
+      return timeline < 0? 0 : timeline;
+    },
+    async postComment(name?: string): Promise<void> {
+      if (name) {
+        this.setCookie('comment-octopus-name', name);
+        this.$emit('update:knownIdentity', name);
       }
-      let comment:any = {
+      const sendName = name??this.knownIdentity;
+      const commentPodcastId = this.comment?.podcastId ?? 0;
+      const comment: CommentPodcast = {
         content: this.newComment,
-        name: sendName,
-        podcastId: this.podcast.podcastId,
-        timeline: timeline,
-        organisationId: this.podcast.organisation.id,
-        commentIdReferer: this.comId,
+        name: sendName ??'',
+        podcastId: this.podcast?.podcastId ?? commentPodcastId,
+        timeline: this.defineTimelineValue(),
+        organisationId: this.podcastOrga,
+        commentIdReferer:this.comment?.comId,
         certified: this.isCertified,
         userId: this.userId,
         phase: this.phase,
@@ -268,38 +274,44 @@ export default defineComponent({
         let data;
         if (this.isCertified) {
           comment.status = 'Valid';
-          data = await commentApi.postComment(this.$store, comment);
+          data = await crudApi.postData<CommentPodcast>(this.$store.state,2, 'registeredComment/' + comment.userId, {...comment, ...{userId: undefined}});
         } else {
-          data = await octopusApi.postComment(comment);
+          data = await octopusApi.postDataPublic<CommentPodcast>(2,'unregisteredComment',comment);
         }
         this.$emit('newComment', data);
         this.newComment = '';
-        this.checkIdentityModal = false;
       } catch (error) {
-        this.checkIdentityModal = false;
         this.postError = true;
       }
+      this.checkIdentityModal = false;
     },
   },
-
-  watch: {
-    textareaFocus() {
-      this.newComment = this.newComment.trim();
-    },
-    focus() {
-      this.textarea.focus();
-    },
-    newComment() {
-      let padding =
-        1.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
-      this.isOneLine =
-        this.textarea.$el.clientWidth -
-          this.inputExceeded(
-            this.newComment,
-            '18px Montserrat, sans-serif, Helvetica Neue'
-          ) >
-        padding;
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.octopus-app{
+  .comment-input-container {
+    textarea::placeholder {
+      color: $octopus-primary-dark;
+    }
+    textarea:focus::placeholder {
+      color: black;
+    }
+    textarea {
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+      border-bottom: 0.1rem solid #ddd !important;
+      overflow: hidden !important;
+      box-shadow: unset !important;
+      background: transparent !important;
+      height: 50px;
+      &.short{
+        max-height: 38px;
+      }
+    }
+  }
+}
+</style>