@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -1,12 +1,10 @@
 <template>
   <div class="d-flex flex-column mt-3">
     <ClassicLoading
-      :loading-text="loading?$t('Loading content ...'):undefined"
-      :error-text="error?$t(`Comments loading error`):undefined"
+      :loading-text="loading ? $t('Loading content ...') : undefined"
+      :error-text="error ? $t(`Comments loading error`) : undefined"
     />
-    <div
-      v-show="!loading"
-    >
+    <div v-show="!loading">
       <CommentItem
         v-for="(c, indexCom) in comments"
         :ref="'comItem' + c.comId"
@@ -16,60 +14,60 @@
         :podcast="podcast"
         :fetch-conference="fetchConference"
         :organisation="organisation"
-        @deleteComment="deleteComment(c)"
-        @updateComment="updateComment"
+        @delete-comment="deleteComment(c)"
+        @update-comment="updateComment"
       />
     </div>
     <button
-      v-show="!allFetched && (!loading || 0!==first)"
+      v-show="!allFetched && (!loading || 0 !== first)"
       class="btn btn-primary mt-2"
       :class="comId ? 'align-self-start' : 'align-self-center'"
       :disabled="loading"
       :title="$t('See more comments')"
       @click="fetchContent(false)"
     >
-      {{ $t('See more comments') }}
+      {{ $t("See more comments") }}
     </button>
   </div>
 </template>
 
 <script lang="ts">
-import ClassicLoading from '../../form/ClassicLoading.vue';
-import { state } from '../../../stores/ParamSdkStore';
-import octopusApi from '@saooti/octopus-api';
-import dayjs from 'dayjs';
-import { Podcast } from '@/stores/class/general/podcast';
-import { Conference } from '@/stores/class/conference/conference';
-import { CommentPodcast } from '@/stores/class/general/comment';
-import { InterfacePageable } from '@/stores/class/general/interfacePageable';
-import { defineComponent, defineAsyncComponent } from 'vue';
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
+import dayjs from "dayjs";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Conference } from "@/stores/class/conference/conference";
+import { CommentPodcast } from "@/stores/class/general/comment";
+import { InterfacePageable } from "@/stores/class/general/interfacePageable";
+import { defineComponent, defineAsyncComponent } from "vue";
 /* eslint-disable */
 const CommentItem: any = defineAsyncComponent(() => import('./CommentItem.vue'));
 /* eslint-enable */
 export default defineComponent({
-  name: 'CommentList',
+  name: "CommentList",
 
   components: {
     CommentItem,
-    ClassicLoading
+    ClassicLoading,
   },
 
   props: {
-    podcast: { default: undefined, type: Object as ()=>Podcast},
+    podcast: { default: undefined, type: Object as () => Podcast },
     comId: { default: undefined, type: Number },
-    reload: { default: false, type: Boolean},
-    fetchConference: { default: undefined, type: Object as ()=>Conference},
-    organisation: { default: undefined, type: String},
-    status: { default: undefined, type: String},
-    isFlat: { default: false, type: Boolean},
+    reload: { default: false, type: Boolean },
+    fetchConference: { default: undefined, type: Object as () => Conference },
+    organisation: { default: undefined, type: String },
+    status: { default: undefined, type: String },
+    isFlat: { default: false, type: Boolean },
   },
-  emits: ['updateStatus', 'fetch'],
+  emits: ["updateStatus", "fetch"],
 
   data() {
     return {
       loading: true as boolean,
       error: false as boolean,
-      first:0 as number,
+      first: 0 as number,
       size: 20 as number,
       totalCount: 0 as number,
       comments: [] as Array<CommentPodcast>,
@@ -80,88 +78,108 @@ export default defineComponent({
     allFetched(): boolean {
       return this.first >= this.totalCount;
     },
-    myOrganisationId(): string|undefined {
+    myOrganisationId(): string | undefined {
       return state.generalParameters.organisationId;
     },
-    podcastId(): number|undefined {
+    podcastId(): number | undefined {
       return this.podcast?.podcastId;
     },
     editRight(): boolean {
-      return (true === state.generalParameters.isCommments &&
-          ((this.myOrganisationId === this.podcast?.organisation.id) ||
-            this.myOrganisationId  === this.organisation)) ||
-        true === state.generalParameters.isAdmin;
+      return (
+        (true === state.generalParameters.isCommments &&
+          (this.myOrganisationId === this.podcast?.organisation.id ||
+            this.myOrganisationId === this.organisation)) ||
+        true === state.generalParameters.isAdmin
+      );
     },
-    watchVariable():string{
+    watchVariable(): string {
       return `${this.reload}|${this.status}`;
     },
-    statusPost():Array<string>{
-      if(this.editRight && this.status){
+    statusPost(): Array<string> {
+      if (this.editRight && this.status) {
         return [this.status];
       }
-      return this.editRight? ['Valid','Pending', 'Invalid']:['Valid'];
-    }
-
+      return this.editRight ? ["Valid", "Pending", "Invalid"] : ["Valid"];
+    },
   },
   watch: {
     watchVariable: {
-      immediate:true,
-      handler(){
+      immediate: true,
+      handler() {
         this.fetchContent();
-      }
+      },
     },
     comments: {
       deep: true,
-      handler(){
-        this.$emit('fetch', { count: this.totalCount, comments: this.comments });
-      }
+      handler() {
+        this.$emit("fetch", {
+          count: this.totalCount,
+          comments: this.comments,
+        });
+      },
     },
   },
   methods: {
-    async fetchContent(reset=true): Promise<void> {
+    async fetchContent(reset = true): Promise<void> {
       this.loading = true;
       this.error = false;
-      if(reset){
+      if (reset) {
         this.first = 0;
       }
       let data;
       try {
         if (this.comId) {
-          data = await octopusApi.postDataPublic<InterfacePageable<CommentPodcast>>(2, this.comId.toString(), {first: this.first,size: this.size});
-        }else{
-          data = await octopusApi.postDataPublic<InterfacePageable<CommentPodcast>>(2, this.isFlat ?'':'getRootCom',{
+          data = await octopusApi.postDataPublic<
+            InterfacePageable<CommentPodcast>
+          >(2, this.comId.toString(), { first: this.first, size: this.size });
+        } else {
+          data = await octopusApi.postDataPublic<
+            InterfacePageable<CommentPodcast>
+          >(2, this.isFlat ? "" : "getRootCom", {
             first: this.first,
             size: this.size,
             podcastId: this.podcastId,
-            status:this.statusPost,
-            organisationId: undefined === this.podcastId? this.organisation: undefined,
+            status: this.statusPost,
+            organisationId:
+              undefined === this.podcastId ? this.organisation : undefined,
           });
         }
-        if(reset){
+        if (reset) {
           this.comments.length = 0;
         }
         this.totalCount = data.totalElements;
-        this.comments = this.comments.concat(data.content).filter((c: CommentPodcast) => {
-          return null !== c;
-        });
+        this.comments = this.comments
+          .concat(data.content)
+          .filter((c: CommentPodcast) => {
+            return null !== c;
+          });
         this.first += this.size;
       } catch {
         this.error = true;
       }
       this.loading = false;
     },
-    findCommentIndex(comId: number|undefined): number{
+    findCommentIndex(comId: number | undefined): number {
       return this.comments.findIndex(
-        (element: CommentPodcast) => element.comId === comId
+        (element: CommentPodcast) => element.comId === comId,
       );
     },
-    commentInAnotherList(commentIdReferer:undefined|number):boolean{
-      return !this.isFlat && undefined!==commentIdReferer && null!==commentIdReferer && this.comId !==commentIdReferer;
+    commentInAnotherList(commentIdReferer: undefined | number): boolean {
+      return (
+        !this.isFlat &&
+        undefined !== commentIdReferer &&
+        null !== commentIdReferer &&
+        this.comId !== commentIdReferer
+      );
     },
     deleteComment(comment: CommentPodcast): void {
-      if (this.commentInAnotherList(comment.commentIdReferer)){
-        const comItem = (this.$refs['comItem' + comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
-        comItem.receiveCommentEvent({ type: 'Delete', comment: comment });
+      if (this.commentInAnotherList(comment.commentIdReferer)) {
+        const comItem = (
+          this.$refs["comItem" + comment.commentIdReferer] as Array<
+            InstanceType<typeof CommentItem>
+          >
+        )[0];
+        comItem.receiveCommentEvent({ type: "Delete", comment: comment });
         return;
       }
       const index = this.findCommentIndex(comment.comId);
@@ -172,51 +190,65 @@ export default defineComponent({
       }
       this.comments.splice(index, 1);
     },
-    updateExistingComment(comment: CommentPodcast, index: number){
-      if ((!this.editRight && 'Valid' !== comment.status) ||
-        (this.editRight && this.status && this.status !== comment.status)) {
+    updateExistingComment(comment: CommentPodcast, index: number) {
+      if (
+        (!this.editRight && "Valid" !== comment.status) ||
+        (this.editRight && this.status && this.status !== comment.status)
+      ) {
         this.comments.splice(index, 1);
       } else {
         this.comments.splice(index, 1, comment);
       }
     },
-    updateNotExistingComment(comment: CommentPodcast){
+    updateNotExistingComment(comment: CommentPodcast) {
       let indexNewComment = 0;
       for (let i = 0, len = this.comments.length; i < len; i++) {
-        if (
-          dayjs(this.comments[i].date).isBefore(dayjs(comment.date))
-        ) {
+        if (dayjs(this.comments[i].date).isBefore(dayjs(comment.date))) {
           indexNewComment = i;
           break;
         }
       }
       this.comments.splice(indexNewComment, 0, comment);
     },
-    updateComment(data: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
-      if (this.commentInAnotherList(data.comment.commentIdReferer)){
-        const comItem = (this.$refs['comItem' + data.comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
+    updateComment(data: {
+      type: string;
+      comment: CommentPodcast;
+      oldStatus?: string;
+    }): void {
+      if (this.commentInAnotherList(data.comment.commentIdReferer)) {
+        const comItem = (
+          this.$refs["comItem" + data.comment.commentIdReferer] as Array<
+            InstanceType<typeof CommentItem>
+          >
+        )[0];
         comItem.receiveCommentEvent(data);
         return;
       }
       const index = this.findCommentIndex(data.comment.comId);
       if (-1 !== index) {
         this.updateExistingComment(data.comment, index);
-      }else if((!this.editRight && 'Valid' === data.comment.status) ||
-              (this.editRight && !this.status) ||
-              (this.editRight && this.status && this.status === data.comment.status)){
+      } else if (
+        (!this.editRight && "Valid" === data.comment.status) ||
+        (this.editRight && !this.status) ||
+        (this.editRight && this.status && this.status === data.comment.status)
+      ) {
         this.updateNotExistingComment(data.comment);
       }
-      if (this.comId && data.oldStatus!==data.comment.status) {
-        this.$emit('updateStatus', data.comment.status);
+      if (this.comId && data.oldStatus !== data.comment.status) {
+        this.$emit("updateStatus", data.comment.status);
       }
     },
     addNewComment(comment: CommentPodcast, myself = false): void {
-      if (!myself && !this.editRight && 'Valid' !== comment.status) {
+      if (!myself && !this.editRight && "Valid" !== comment.status) {
         return;
       }
-      if (this.commentInAnotherList(comment.commentIdReferer)){
-        const comItem = (this.$refs['comItem' + comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
-        comItem.receiveCommentEvent({ type: 'Create', comment: comment });
+      if (this.commentInAnotherList(comment.commentIdReferer)) {
+        const comItem = (
+          this.$refs["comItem" + comment.commentIdReferer] as Array<
+            InstanceType<typeof CommentItem>
+          >
+        )[0];
+        comItem.receiveCommentEvent({ type: "Create", comment: comment });
         return;
       }
       const index = this.findCommentIndex(comment.comId);
@@ -229,5 +261,5 @@ export default defineComponent({
       }
     },
   },
-})
-</script>
+});
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="mt-2">
     <ClassicLoading
-      :loading-text="loading?$t('Loading content ...'):undefined"
+      :loading-text="loading ? $t('Loading content ...') : undefined"
     />
     <CommentBasicView
       v-if="!loading"
@@ -12,35 +12,38 @@
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import CommentBasicView from './CommentBasicView.vue';
-import ClassicLoading from '../../form/ClassicLoading.vue';
-import { CommentPodcast } from '@/stores/class/general/comment';
-import { defineComponent } from 'vue'
+import octopusApi from "@saooti/octopus-api";
+import CommentBasicView from "./CommentBasicView.vue";
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import { CommentPodcast } from "@/stores/class/general/comment";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'CommentParentInfo',
+  name: "CommentParentInfo",
 
-  components:{
+  components: {
     CommentBasicView,
-    ClassicLoading
+    ClassicLoading,
   },
 
   props: {
     comId: { default: undefined, type: Number },
-    editRight: { default: false, type: Boolean},
+    editRight: { default: false, type: Boolean },
   },
 
   data() {
     return {
       loading: true as boolean,
-      comment: undefined as CommentPodcast|undefined,
+      comment: undefined as CommentPodcast | undefined,
     };
   },
   async created() {
-    if(this.comId){
-      this.comment = await octopusApi.fetchData<CommentPodcast>(2, `comment/${this.comId}`);
+    if (this.comId) {
+      this.comment = await octopusApi.fetchData<CommentPodcast>(
+        2,
+        `comment/${this.comId}`,
+      );
     }
     this.loading = false;
   },
-})
-</script>
+});
+</script>

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

@@ -18,16 +18,11 @@
         :data-selenium="'comment-' + seleniumFormat(c.name)"
       />
     </div>
-    <div
-      v-if="displayContent"
-      class="h6 mt-auto"
-    >
+    <div v-if="displayContent" class="h6 mt-auto">
       <div class="text-primary flex-shrink-0">
         {{ displayContent.name }}
       </div>
-      <div class="ms-1 me-1">
-        -
-      </div>
+      <div class="ms-1 me-1">-</div>
       <div class="text-truncate">
         {{ displayContent.content }}
       </div>
@@ -36,25 +31,28 @@
 </template>
 
 <script lang="ts">
-import { CommentPodcast } from '@/stores/class/general/comment';
-import selenium from '../../mixins/selenium';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue'
+import { CommentPodcast } from "@/stores/class/general/comment";
+import selenium from "../../mixins/selenium";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'CommentPlayer',
-  mixins:[selenium],
+  name: "CommentPlayer",
+  mixins: [selenium],
   props: {
-    comments: { default: undefined, type: Array as ()=>Array<CommentPodcast>},
-    totalTime: { default: 0, type: Number},
+    comments: {
+      default: undefined,
+      type: Array as () => Array<CommentPodcast>,
+    },
+    totalTime: { default: 0, type: Number },
   },
   data() {
     return {
-      displayContent: undefined as CommentPodcast|undefined,
+      displayContent: undefined as CommentPodcast | undefined,
     };
   },
   computed: {
-    ...mapState(usePlayerStore, ['playerPodcast'])
+    ...mapState(usePlayerStore, ["playerPodcast"]),
   },
   methods: {
     percentPosition(time: number): number {
@@ -68,31 +66,31 @@ export default defineComponent({
       return Math.round((time * 100) / this.totalTime);
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
-.comment-player-container {
-  position: relative;
-  width: 100%;
-  height: 3rem;
-  display: flex;
-  @media (max-width: 960px) {
-    display: none;
+.octopus-app {
+  .comment-player-container {
+    position: relative;
+    width: 100%;
+    height: 3rem;
+    display: flex;
+    @media (max-width: 960px) {
+      display: none;
+    }
+    .comment-border {
+      width: auto;
+      position: absolute;
+      border-left: solid 1px #555;
+      height: 20px;
+    }
+    .status-Valid,
+    .status-Invalid,
+    .status-Pending {
+      margin-top: 20px;
+      position: absolute;
+    }
   }
-  .comment-border {
-    width: auto;
-    position: absolute;
-    border-left: solid 1px #555;
-    height: 20px;
-  }
-  .status-Valid,
-  .status-Invalid,
-  .status-Pending {
-    margin-top: 20px;
-    position: absolute;
-  }
-}
 }
-</style>
+</style>