@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,19 +1,27 @@
 <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
+      v-if="knownIdentity && !editName"
       class="small-Text mt-1 c-hand"
       @click="changeIdentity"
-      v-if="knownIdentity && !editName"
-      >{{ knownIdentity }}</b
+    >{{ knownIdentity }}</b>
+    <div
+      v-if="knownIdentity && editName"
+      class="d-flex"
     >
-    <div class="d-flex" v-if="knownIdentity && editName">
       <input
+        v-model="temporaryName"
         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">
+        :class="{ 'border border-danger': temporaryName.length < 2 }"
+      >
+      <button
+        class="btn btn-light p-1 m-1"
+        @click="editName = false"
+      >
         {{ $t('Cancel') }}
       </button>
       <button
@@ -24,7 +32,7 @@
         {{ $t('Validate') }}
       </button>
     </div>
-    <b-form-textarea
+    <textarea
       ref="textarea"
       v-model="newComment"
       :placeholder="placeholder"
@@ -32,15 +40,21 @@
       :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">
+    />
+    <div
+      v-if="textareaFocus"
+      class="d-flex justify-content-end mt-1"
+    >
+      <button
+        class="btn me-2"
+        @mousedown="cancelAction"
+      >
         {{ $t('Cancel') }}
       </button>
       <button
         class="btn btn-primary"
-        @mousedown="requestToSend"
         :disabled="0 === newComment.trim().length"
+        @mousedown="requestToSend"
       >
         {{ placeholder }}
       </button>
@@ -52,90 +66,58 @@
     />
     <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 { cookies } from '../../mixins/functions';
 import { state } from '../../../store/paramStore';
+import { Podcast } from '@/store/class/podcast';
+import { Conference } from '@/store/class/conference';
+import { CommentPodcast } from '@/store/class/comment';
 
-import { defineComponent, ref } from 'vue';
+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,
     };
   },
 
   computed: {
-    isPresent() {
+    isPresent(): boolean {
       if (!this.podcast) return true;
       let podcastComment = 'INHERIT';
       if (this.podcast.annotations && this.podcast.annotations.COMMENTS) {
@@ -156,30 +138,33 @@ export default defineComponent({
       }
       return true;
     },
-    placeholder():string {
-      if (this.comId) return this.$t('Answer a comment');
-      return this.$t('Write a comment');
+    placeholder(): string {
+      if (this.comment && this.comment.comId) return this.$t('Answer a comment').toString();
+      return this.$t('Write a comment').toString();
     },
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-    isCertified() {
+    isCertified(): boolean {
       if (
         (state.generalParameters.isCommments &&
-          this.organisationId === this.podcast.organisation.id) ||
+          this.organisationId === this.podcastOrga) ||
         state.generalParameters.isAdmin
       )
         return true;
       return false;
     },
-    userId():any {
+    userId(): string|undefined {
       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 : '';
+      }
       if (
         !this.podcast.conferenceId ||
         0 === this.podcast.conferenceId ||
@@ -194,55 +179,82 @@ export default defineComponent({
         return 'Prelive';
       return 'Live';
     },
+    podcastOrga(): string|undefined{
+      const commentOrga = this.comment ? this.comment.organisationId : '';
+      return this.podcast ? 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 any).$el.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 element = document.createElement('canvas');
+      const context = element.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) {
+    async postComment(name?: string): Promise<void> {
       if (name) {
         this.setCookie('comment-octopus-name', name);
         this.$emit('update:knownIdentity', name);
       }
       let timeline = 0;
       if (
+        undefined !== this.podcast &&(
         (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)
+            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)
+              (this.$store.state.player.total - this.podcast.duration / 1000)
           );
         }
         if (timeline < 0) {
@@ -253,13 +265,14 @@ export default defineComponent({
       if (null === sendName && name) {
         sendName = name;
       }
-      let comment:any = {
+      const commentPodcastId = this.comment ? this.comment.podcastId : 0;
+      const comment: any = {
         content: this.newComment,
         name: sendName,
-        podcastId: this.podcast.podcastId,
+        podcastId: this.podcast ? this.podcast.podcastId : commentPodcastId,
         timeline: timeline,
-        organisationId: this.podcast.organisation.id,
-        commentIdReferer: this.comId,
+        organisationId: this.podcastOrga,
+        commentIdReferer: this.comment ? this.comment.comId : undefined,
         certified: this.isCertified,
         userId: this.userId,
         phase: this.phase,
@@ -268,7 +281,7 @@ export default defineComponent({
         let data;
         if (this.isCertified) {
           comment.status = 'Valid';
-          data = await commentApi.postComment(this.$store, comment);
+          data = await commentApi.postComment(this.$store.state, comment);
         } else {
           data = await octopusApi.postComment(comment);
         }
@@ -281,25 +294,31 @@ export default defineComponent({
       }
     },
   },
-
-  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';
+.comment-input-container {
+  textarea::placeholder {
+    color: $octopus-primary-color;
+  }
+  textarea:focus::placeholder {
+    color: black;
+  }
+  textarea {
+    outline-width: 0 !important;
+    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>