@saooti/octopus-sdk 40.2.19 → 41.0.0

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

@@ -25,14 +25,14 @@
           class="btn btn-transparent"
           @click="answerComment"
         >
-          {{ $t("To answer") }}
+          {{ t("To answer") }}
         </button>
         <button
           v-if="isFlatList && comment.answerTo"
           class="btn btn-transparent d-flex align-items-center"
           @click="showParentComment = !showParentComment"
         >
-          {{ $t("In response to") }}
+          {{ t("In response to") }}
           <ChevronDownIcon :class="{ 'arrow-transform': showParentComment }" />
         </button>
       </div>
@@ -54,7 +54,7 @@
           @click="showAnswers = !showAnswers"
         >
           <ChevronDownIcon :class="{ 'arrow-transform': showAnswers }" />
-          {{ $t("nb answers", { nb: comment.responses.length }) }}
+          {{ t("nb answers", { nb: comment.responses.length }) }}
         </button>
         <CommentList
           v-if="showAnswers"
@@ -77,19 +77,19 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import { Podcast } from "../../../../stores/class/general/podcast";
 import CommentBasicView from "./CommentBasicView.vue";
 import { useCommentStore } from "../../../../stores/CommentStore";
 import { useAuthStore } from "../../../../stores/AuthStore";
-import { mapActions, mapState } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, Ref, computed } from "vue";
 import {
   CommentMessage,
   CommentsConfig,
 } from "../../../../stores/class/config/commentsConfig";
+import { useI18n } from "vue-i18n";
 const CommentInput = defineAsyncComponent(() => import("../CommentInput.vue"));
 const CommentParentInfo = defineAsyncComponent(
   () => import("../CommentParentInfo.vue"),
@@ -101,121 +101,110 @@ const CommentMoreActions = defineAsyncComponent(
   () => import("./CommentMoreActions.vue"),
 );
 const CommentList = defineAsyncComponent(() => import("../CommentList.vue"));
-export default defineComponent({
-  name: "CommentItem",
 
-  components: {
-    CommentInput,
-    CommentList,
-    CommentParentInfo,
-    CommentBasicView,
-    LikeSection,
-    CommentMoreActions,
-    ChevronDownIcon,
-  },
 
-  props: {
-    comment: { default: () => ({}), type: Object as () => CommentPodcast },
-    podcast: { default: undefined, type: Object as () => Podcast },
-    isFlatList: { default: false, type: Boolean },
-    config: { default: undefined, type: Object as () => CommentsConfig },
-    organisationId: { default: undefined, type: String },
-  },
+//Props 
+const props = defineProps({
+  comment: { default: () => ({}), type: Object as () => CommentPodcast },
+  podcast: { default: undefined, type: Object as () => Podcast },
+  isFlatList: { default: false, type: Boolean },
+  config: { default: undefined, type: Object as () => CommentsConfig },
+  organisationId: { default: undefined, type: String },
+})
+
+//Emits
+const emit = defineEmits(["deleteComment", "update:comment"]);
+
+//Data 
+const isAnsweringComment = ref(false);
+const showAnswers = ref(false);
+const focus = ref(false);
+const showParentComment = ref(false);
+const eventToHandle : Ref<CommentMessage | undefined>= ref(undefined);
 
-  emits: ["deleteComment", "update:comment"],
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+const commentStore = useCommentStore();
 
-  data() {
-    return {
-      isAnsweringComment: false as boolean,
-      showAnswers: false as boolean,
-      focus: false as boolean,
-      showParentComment: false as boolean,
-      eventToHandle: undefined as CommentMessage | undefined,
-    };
+
+//Computed
+const commentForVmodel = computed({
+  get(): CommentPodcast {
+    return props.comment;
   },
-  computed: {
-    ...mapState(useAuthStore, ["authOrgaId", "isRoleComments", "isRoleAdmin"]),
-    ...mapState(useCommentStore, ["commentUser"]),
-    commentForVmodel: {
-      get(): CommentPodcast {
-        return this.comment;
-      },
-      set(value: CommentPodcast) {
-        if (!this.eventActive) {
-          this.$emit("update:comment", value);
-        }
-      },
-    },
-    isAnAnswer() {
-      return undefined !== this.comment.answerTo;
-    },
-    editRight(): boolean {
-      return (
-        (true === this.isRoleComments &&
-          (this.authOrgaId === this.podcast?.organisation.id ||
-            this.authOrgaId === this.organisationId)) ||
-        true === this.isRoleAdmin
-      );
-    },
-    isValidComment() {
-      return "VALIDATED" === this.comment.state;
-    },
-    canPostComment(): boolean {
-      return this.getCanPostComment(
-        this.config,
-        this.podcast,
-        undefined !== this.authOrgaId,
-      );
-    },
-    eventActive(): boolean {
-      return undefined !== this.podcast?.conferenceId;
-    },
+  set(value: CommentPodcast) {
+    if (!eventActive.value) {
+      emit("update:comment", value);
+    }
   },
-  methods: {
-    ...mapActions(useCommentStore, ["getCanPostComment"]),
-    answerComment(): void {
-      this.isAnsweringComment = true;
-      this.focus = !this.focus;
-    },
-    newComment(comment: CommentPodcast): void {
-      this.modifyAnswerNumber(comment.commentId);
-      if (!this.eventActive) {
-        this.eventToHandle = { type: "CREATE", comment: comment };
-      }
-      this.isAnsweringComment = false;
-    },
-    modifyAnswerNumber(commentId: number, isAdd = true) {
-      const commentToEdit = this.comment;
-      if (commentToEdit.responses) {
-        if (this.isAdd) {
-          commentToEdit.responses.push(commentId);
-        } else {
-          const index = commentToEdit.responses.indexOf(commentId);
-          if (index !== -1) {
-            commentToEdit.responses.splice(index, 1);
-          }
-        }
-      } else if (isAdd) {
-        commentToEdit.responses = [commentId];
-      }
-      this.$emit("update:comment", commentToEdit);
-    },
-    emitDeleteComment() {
-      if (!this.eventActive) {
-        this.$emit("deleteComment");
-      }
-    },
-    receiveEvent(event: CommentMessage) {
-      if ("CREATE" === event.type) {
-        this.modifyAnswerNumber(event.comment.commentId);
-      } else if ("DELETE" === event.type) {
-        this.modifyAnswerNumber(event.comment.commentId, false);
+});
+const isAnAnswer = computed(() => undefined !== props.comment.answerTo);
+const editRight = computed(() => {
+  return (
+    (true === authStore.isRoleComments &&
+      (authStore.authOrgaId === props.podcast?.organisation.id ||
+      authStore.authOrgaId === props.organisationId)) ||
+    true === authStore.isRoleAdmin
+  );
+});
+const isValidComment = computed(() => "VALIDATED" === props.comment.state);
+const canPostComment = computed(() => {
+  return commentStore.getCanPostComment(
+    props.config,
+    props.podcast,
+    undefined !== authStore.authOrgaId,
+  );
+});
+const eventActive = computed(() => undefined !== props.podcast?.conferenceId);
+
+ 
+//Methods
+function answerComment(): void {
+  isAnsweringComment.value = true;
+  focus.value = !focus.value;
+}
+function newComment(comment: CommentPodcast): void {
+  modifyAnswerNumber(comment.commentId);
+  if (!eventActive.value) {
+    eventToHandle.value = { type: "CREATE", comment: comment };
+  }
+  isAnsweringComment.value = false;
+}
+function modifyAnswerNumber(commentId: number, isAdd = true) {
+  const commentToEdit = props.comment;
+  if (commentToEdit.responses) {
+    if (isAdd) {
+      commentToEdit.responses.push(commentId);
+    } else {
+      const index = commentToEdit.responses.indexOf(commentId);
+      if (index !== -1) {
+        commentToEdit.responses.splice(index, 1);
       }
-      this.eventToHandle = event;
-    },
-    updateForAnswerDeleted(commentId: number) {
-      this.modifyAnswerNumber(commentId, false);
-    },
-  },
+    }
+  } else if (isAdd) {
+    commentToEdit.responses = [commentId];
+  }
+  emit("update:comment", commentToEdit);
+}
+function emitDeleteComment() {
+  if (!eventActive.value) {
+    emit("deleteComment");
+  }
+}
+function receiveEvent(event: CommentMessage) {
+  if ("CREATE" === event.type) {
+    modifyAnswerNumber(event.comment.commentId);
+  } else if ("DELETE" === event.type) {
+    modifyAnswerNumber(event.comment.commentId, false);
+  }
+  eventToHandle.value = event;
+}
+function updateForAnswerDeleted(commentId: number) {
+  modifyAnswerNumber(commentId, false);
+}
+//Expose
+defineExpose({
+  receiveEvent
 });
 </script>

package/src/components/display/comments/item/CommentMoreActions.vue

@@ -26,7 +26,7 @@
     <button
       :id="'comment-dropdown' + comment.commentId"
       class="btn share-btn"
-      :title="$t('See more')"
+      :title="t('See more')"
       :data-selenium="
         'comment-dropdown-' + seleniumFormat(comment.poster.userName)
       "
@@ -57,7 +57,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DotsVerticalIcon from "vue-material-design-icons/DotsVertical.vue";
 import {useSelenium} from "../../../composable/useSelenium";
 import classicApi from "../../../../api/classicApi";
@@ -66,9 +66,9 @@ import { useAuthStore } from "../../../../stores/AuthStore";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import { Podcast } from "@/stores/class/general/podcast";
 import { useCommentStore } from "../../../../stores/CommentStore";
-import { mapActions, mapState } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, Ref, computed } from "vue";
 import { CommentsConfig } from "@/stores/class/config/commentsConfig";
+import { useI18n } from "vue-i18n";
 const ClassicPopover = defineAsyncComponent(
   () => import("../../../misc/ClassicPopover.vue"),
 );
@@ -81,204 +81,189 @@ const EditCommentModal = defineAsyncComponent(
 const MessageModal = defineAsyncComponent(
   () => import("../../../misc/modal/MessageModal.vue"),
 );
-export default defineComponent({
-  name: "CommentMoreActions",
 
-  components: {
-    ClassicPopover,
-    ReportAbuseModal,
-    CommentMoreActionsAdmin,
-    EditCommentModal,
-    MessageModal,
-    DotsVerticalIcon,
-  },
+//Props 
+const props = defineProps({
+  comment: { default: () => ({}), type: Object as () => CommentPodcast },
+  podcast: { default: undefined, type: Object as () => Podcast },
+  config: { default: undefined, type: Object as () => CommentsConfig },
+  editRight: { default: false, type: Boolean },
+})
 
-  props: {
-    comment: { default: () => ({}), type: Object as () => CommentPodcast },
-    podcast: { default: undefined, type: Object as () => Podcast },
-    config: { default: undefined, type: Object as () => CommentsConfig },
-    editRight: { default: false, type: Boolean },
-  },
+//Emits
+const emit = defineEmits(["update:comment", "deleteComment"]);
 
-  emits: ["update:comment", "deleteComment"],
+//Data 
+const isEdit = ref(false);
+const isReportAbuse = ref(false);
+const actionName: Ref<string | undefined> = ref(undefined);
+const actionsAdmin: Ref<string | undefined> = ref(undefined);
+const confirmModal = ref(false);
+const actionInProgress = ref(false);
+const isError = ref(false);
 
-  setup(){
-    const { seleniumFormat } = useSelenium();
-    return { seleniumFormat }
+//Composables
+const { t } = useI18n();
+const { seleniumFormat } = useSelenium();
+const authStore = useAuthStore();
+const commentStore = useCommentStore();
+
+//Computed
+const commentForVmodel = computed({
+  get(): CommentPodcast {
+    return props.comment;
   },
-  data() {
-    return {
-      isEdit: false as boolean,
-      isReportAbuse: false as boolean,
-      actionName: undefined as string | undefined,
-      actionsAdmin: undefined as string | undefined,
-      confirmModal: false as boolean,
-      actionInProgress: false as boolean,
-      isError: false as boolean,
-    };
+  set(value: CommentPodcast) {
+    emit("update:comment", value);
   },
-  computed: {
-    ...mapState(useAuthStore, ["authProfile", "authOrgaId"]),
-    ...mapState(useCommentStore, ["commentUser"]),
-    commentForVmodel: {
-      get(): CommentPodcast {
-        return this.comment;
-      },
-      set(value: CommentPodcast) {
-        this.$emit("update:comment", value);
+});
+const isMyComment = computed(() => {
+  const uuid = authStore.authProfile?.userId ?? commentStore.commentUser?.uuidHash;
+  return uuid === props.comment?.poster.uuid;
+});
+const isAtLeastOneMoreAction = computed(() => {
+  return moreActions.value.some((el) => {
+    return el.condition;
+  });
+});
+const moreActions = computed(() => {
+  return [
+    {
+      title: t("Report abuse"),
+      actionClick: () => {
+        isReportAbuse.value = true;
       },
+      condition:
+        commentStore.getCanReportAbuse(
+          props.config,
+          undefined !== authStore.authOrgaId,
+        ) && !isMyComment.value,
     },
-    isMyComment() {
-      const uuid = this.authProfile?.userId ?? this.commentUser?.uuidHash;
-      return uuid === this.comment?.poster.uuid;
-    },
-    isAtLeastOneMoreAction() {
-      return this.moreActions.some((el) => {
-        return el.condition;
-      });
-    },
-    moreActions() {
-      return [
-        {
-          title: this.$t("Report abuse"),
-          actionClick: () => {
-            this.isReportAbuse = true;
-          },
-          condition:
-            this.getCanReportAbuse(
-              this.config,
-              undefined !== this.authOrgaId,
-            ) && !this.isMyComment,
-        },
-        {
-          title: this.$t("Managing reported abuses"),
-          actionClick: () => {
-            this.actionsAdmin = "abuse";
-          },
-          condition: this.editRight && this.comment.abuse,
-        },
-        {
-          title: this.$t("Edit comment"),
-          actionClick: () => {
-            this.isEdit = true;
-          },
-          condition: this.editRight || this.isMyComment,
-        },
-        {
-          title: this.$t("Comment information"),
-          actionClick: () => {
-            this.actionsAdmin = "info";
-          },
-          condition: this.editRight && !this.podcast,
-        },
-        {
-          title: this.$t("Validate"),
-          actionClick: () => {
-            this.actionName = "validate";
-            this.isError = false;
-            this.confirmModal = true;
-          },
-          condition:
-            this.editRight &&
-            ("PENDING" === this.comment.state ||
-              "NOT_VALID" === this.comment.state),
-        },
-        {
-          title: this.$t("Invalidate"),
-          actionClick: () => {
-            this.actionName = "invalidate";
-            this.isError = false;
-            this.confirmModal = true;
-          },
-          condition:
-            this.editRight &&
-            ("PENDING" === this.comment.state ||
-              "VALIDATED" === this.comment.state),
-        },
-        {
-          title: this.$t("Delete comment"),
-          actionClick: () => {
-            this.actionName = "delete";
-            this.isError = false;
-            this.confirmModal = true;
-          },
-          condition: this.editRight || this.isMyComment,
-        },
-      ];
+    {
+      title: t("Managing reported abuses"),
+      actionClick: () => {
+        actionsAdmin.value = "abuse";
+      },
+      condition: props.editRight && props.comment.abuse,
     },
-    validateText(): string | undefined {
-      if (this.isError) {
-        return this.$t("Close");
-      }
-      return this.actionInProgress ? undefined : this.$t("Yes");
+    {
+      title: t("Edit comment"),
+      actionClick: () => {
+        isEdit.value = true;
+      },
+      condition: props.editRight || isMyComment.value,
     },
-    canceltext(): string | undefined {
-      return this.isError ? undefined : this.$t("No");
+    {
+      title: t("Comment information"),
+      actionClick: () => {
+        actionsAdmin.value = "info";
+      },
+      condition: props.editRight && !props.podcast,
     },
-    modalMessage(): string {
-      if (this.actionInProgress) {
-        return this.$t("Saving");
-      }
-      if (this.isError) {
-        return this.$t("An error occurred");
-      }
-      const name = { name: this.comment.poster.userName };
-      switch (this.actionName) {
-        case "delete":
-          return this.$t("Confirm comment deletion text", name);
-        case "validate":
-          return this.$t("Confirm comment valid text", name);
-        case "invalidate":
-          return this.$t("Confirm comment invalid text", name);
-        default:
-          return "";
-      }
+    {
+      title: t("Validate"),
+      actionClick: () => {
+        actionName.value = "validate";
+        isError.value = false;
+        confirmModal.value = true;
+      },
+      condition:
+        props.editRight &&
+        ("PENDING" === props.comment.state ||
+          "NOT_VALID" === props.comment.state),
     },
-    modalTitle(): string {
-      if ("delete" === this.actionName) {
-        return this.$t("Delete comment");
-      }
-      return this.$t("Update comment");
+    {
+      title: t("Invalidate"),
+      actionClick: () => {
+        actionName.value = "invalidate";
+        isError.value = false;
+        confirmModal.value = true;
+      },
+      condition:
+        props.editRight &&
+        ("PENDING" === props.comment.state ||
+          "VALIDATED" === props.comment.state),
     },
-  },
-  methods: {
-    ...mapActions(useCommentStore, ["getCanReportAbuse"]),
-    async actionComment() {
-      if (!this.comment) {
-        return;
-      }
-      this.actionInProgress = true;
-      this.isError = false;
-      try {
-        if ("delete" === this.actionName) {
-          await classicApi.deleteData({
-            api: 2,
-            path: "comment/" + this.comment.commentId,
-            parameters: this.editRight
-              ? undefined
-              : { uuid: this.commentUser?.uuid },
-            isNotAuth: !this.editRight,
-          });
-          this.$emit("deleteComment");
-        } else {
-          const commentUpdated = await classicApi.putData({
-            api: 2,
-            path: "comment/",
-            dataToSend: {
-              commentId: this.comment.commentId,
-              content: this.comment.content,
-              name: this.comment.poster.userName,
-              state: "validate" === this.actionName ? "VALIDATED" : "NOT_VALID",
-            },
-          });
-          this.$emit("update:comment", commentUpdated);
-        }
-        this.confirmModal = false;
-      } catch {
-        this.isError = true;
-      }
-      this.actionInProgress = false;
+    {
+      title: t("Delete comment"),
+      actionClick: () => {
+        actionName.value = "delete";
+        isError.value = false;
+        confirmModal.value = true;
+      },
+      condition: props.editRight || isMyComment.value,
     },
-  },
+  ];
+});
+const validateText = computed(() => {
+  if (isError.value) {
+    return t("Close");
+  }
+  return actionInProgress.value ? undefined : t("Yes");
 });
+const canceltext = computed(() => isError.value ? undefined : t("No"));
+const modalMessage = computed(() => {
+  if (actionInProgress.value) {
+    return t("Saving");
+  }
+  if (isError.value) {
+    return t("An error occurred");
+  }
+  const name = { name: props.comment.poster.userName };
+  switch (actionName.value) {
+    case "delete":
+      return t("Confirm comment deletion text", name);
+    case "validate":
+      return t("Confirm comment valid text", name);
+    case "invalidate":
+      return t("Confirm comment invalid text", name);
+    default:
+      return "";
+  }
+});
+const modalTitle = computed(() => {
+  if ("delete" === actionName.value) {
+    return t("Delete comment");
+  }
+  return t("Update comment");
+});  
+ 
+
+//Methods
+async function actionComment() {
+  if (!props.comment) {
+    return;
+  }
+  actionInProgress.value = true;
+  isError.value = false;
+  try {
+    if ("delete" === actionName.value) {
+      await classicApi.deleteData({
+        api: 2,
+        path: "comment/" + props.comment.commentId,
+        parameters: props.editRight
+          ? undefined
+          : { uuid: commentStore.commentUser?.uuid },
+        isNotAuth: !props.editRight,
+      });
+      emit("deleteComment");
+    } else {
+      const commentUpdated = await classicApi.putData({
+        api: 2,
+        path: "comment/",
+        dataToSend: {
+          commentId: props.comment.commentId,
+          content: props.comment.content,
+          name: props.comment.poster.userName,
+          state: "validate" === actionName.value ? "VALIDATED" : "NOT_VALID",
+        },
+      });
+      emit("update:comment", commentUpdated);
+    }
+    confirmModal.value = false;
+  } catch {
+    isError.value = true;
+  }
+  actionInProgress.value = false;
+}
 </script>

package/src/components/display/comments/item/CommentMoreActionsAdmin.vue

@@ -4,7 +4,5 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({});
+<script setup lang="ts">
 </script>