@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/comments/modal/EditCommentModal.vue

@@ -1,22 +1,22 @@
 <template>
   <ClassicModal
     id-modal="edit-comment-modal"
-    :title-modal="$t('Edit comment')"
+    :title-modal="t('Edit comment')"
     @close="closePopup"
   >
     <template #body>
       <ClassicLoading
-        :loading-text="inProcessing ? $t('Send in progress') : undefined"
-        :error-text="errorUpdate ? $t(`An error occurred`) : undefined"
+        :loading-text="inProcessing ? t('Send in progress') : undefined"
+        :error-text="errorUpdate ? t(`An error occurred`) : undefined"
       />
       <template v-if="!inProcessing && !errorUpdate">
         <ClassicInputText
           v-model:text-init="commentText"
           v-model:error-variable="errorCommentText"
           input-id="comment-textarea"
-          :label="$t('Comment')"
-          :max-length="MAX_DESCRIPTION"
-          :error-text="$t('Please provide a comment')"
+          :label="t('Comment')"
+          :max-length="Constants.MAX_COMMENT"
+          :error-text="t('Please provide a comment')"
           :is-textarea="true"
           :is-emoji-picker="true"
           popover-relative-class="octopus-modal"
@@ -26,36 +26,37 @@
           v-if="editRight"
           v-model:text-init="commentState"
           id-select="comment-state-select"
-          :label="$t('Status')"
+          :label="t('Status')"
           :display-label="true"
           :options="[
-            { title: $t('pending'), value: 'PENDING' },
-            { title: $t('Validated'), value: 'VALIDATED' },
-            { title: $t('Invalid'), value: 'NOT_VALID' },
+            { title: t('pending'), value: 'PENDING' },
+            { title: t('Validated'), value: 'VALIDATED' },
+            { title: t('Invalid'), value: 'NOT_VALID' },
           ]"
         />
       </template>
     </template>
     <template #footer>
       <button class="btn m-1" @click="closePopup">
-        {{ $t("No") }}
+        {{ t("No") }}
       </button>
       <button
         class="btn btn-primary m-1"
         :disabled="errorCommentText"
         @click="onEditComment"
       >
-        {{ $t("Yes") }}
+        {{ t("Yes") }}
       </button>
     </template>
   </ClassicModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../../../api/classicApi";
 import Constants from "../../../../../public/config";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { defineAsyncComponent, onBeforeMount, Ref, ref } from "vue";
 import { CommentPodcast } from "@/stores/class/general/comment";
+import { useI18n } from "vue-i18n";
 const ClassicModal = defineAsyncComponent(
   () => import("../../../misc/modal/ClassicModal.vue"),
 );
@@ -68,72 +69,65 @@ const ClassicInputText = defineAsyncComponent(
 const ClassicSelect = defineAsyncComponent(
   () => import("../../../form/ClassicSelect.vue"),
 );
-export default defineComponent({
-  name: "EditCommentModal",
 
-  components: {
-    ClassicModal,
-    ClassicLoading,
-    ClassicInputText,
-    ClassicSelect,
+//Props 
+const props = defineProps({
+  comment: {
+    default: undefined,
+    type: Object as () => CommentPodcast,
   },
+  editRight: { default: false, type: Boolean },
+})
+ 
+//Emits
+const emit = defineEmits(["close", "update:comment"]);
 
-  props: {
-    comment: {
-      default: undefined,
-      type: Object as () => CommentPodcast,
-    },
-    editRight: { default: false, type: Boolean },
-  },
 
-  emits: ["close", "update:comment"],
-  data() {
-    return {
-      MAX_DESCRIPTION: Constants.MAX_COMMENT as number,
-      commentText: undefined as string | undefined,
-      errorCommentText: true as boolean,
-      commentState: "PENDING" as string,
-      errorUpdate: false as boolean,
-      inProcessing: false as boolean,
-    };
-  },
-  created() {
-    this.initComment();
-  },
-  methods: {
-    initComment() {
-      if (!this.comment) {
-        return;
-      }
-      this.commentText = this.comment.content;
-      this.commentState = this.comment.state;
-    },
-    async onEditComment() {
-      if (!this.comment) {
-        return;
-      }
-      this.inProcessing = true;
-      try {
-        const commentUpdated = await classicApi.putData({
-          api: 2,
-          path: "comment/",
-          dataToSend: {
-            commentId: this.comment.commentId,
-            content: this.commentText,
-            state: this.commentState,
-          },
-          isNotAuth: !this.editRight,
-        });
-        this.$emit("update:comment", commentUpdated);
-        this.closePopup();
-      } catch {
-        this.errorUpdate = true;
-      }
-      this.inProcessing = false;
-    },
-    closePopup() {
-      this.$emit("close");
-    },
-  },
-});
+//Data 
+const commentText: Ref<string | undefined> = ref(undefined);
+const errorCommentText = ref(true);
+const commentState = ref("PENDING");
+const errorUpdate = ref(false);
+const inProcessing = ref(false);
+
+//Composables
+const { t } = useI18n();
+  
+onBeforeMount(()=>initComment())
+
+
+//Methods
+function initComment() {
+  if (!props.comment) {
+    return;
+  }
+  commentText.value = props.comment.content;
+  commentState.value = props.comment.state;
+}
+async function onEditComment() {
+  if (!props.comment) {
+    return;
+  }
+  inProcessing.value = true;
+  try {
+    const commentUpdated = await classicApi.putData({
+      api: 2,
+      path: "comment/",
+      dataToSend: {
+        commentId: props.comment.commentId,
+        content: commentText.value,
+        state: commentState.value,
+      },
+      isNotAuth: !props.editRight,
+    });
+    emit("update:comment", commentUpdated);
+    closePopup();
+  } catch {
+    errorUpdate.value = true;
+  }
+  inProcessing.value = false;
+}
+function closePopup() {
+  emit("close");
+}
 </script>

package/src/components/display/comments/modal/RecaptchaModal.vue

@@ -12,7 +12,7 @@
         v-else
         :loading-text="
           isInTreatment && !errorText && !successText
-            ? $t('Loading content ...')
+            ? t('Loading content ...')
             : undefined
         "
         :error-text="errorText"
@@ -21,7 +21,7 @@
     </template>
     <template #footer>
       <button class="btn m-1" @click="closePopup">
-        {{ $t("Close") }}
+        {{ t("Close") }}
       </button>
       <vue-recaptcha
         v-if="!isVerify"
@@ -38,78 +38,73 @@
         :disabled="disableValidate || isInTreatment"
         @click="submit"
       >
-        {{ $t("Yes") }}
+        {{ t("Yes") }}
       </button>
     </template>
   </ClassicModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { state } from "../../../../stores/ParamSdkStore";
 import ClassicLoading from "../../../form/ClassicLoading.vue";
 import ClassicModal from "../../../misc/modal/ClassicModal.vue";
 import api from "@/api/initialize";
 import { VueRecaptcha } from "vue-recaptcha";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "RecaptchaModal",
-  components: {
-    VueRecaptcha,
-    ClassicModal,
-    ClassicLoading,
-  },
-  props: {
-    idModal: { default: undefined, type: String },
-    titleModal: { default: undefined, type: String },
-    disableValidate: { default: false, type: Boolean },
-    errorText: { default: undefined, type: String },
-    successText: { default: undefined, type: String },
-  },
+import { computed, ref, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
 
-  emits: ["close", "validate"],
+//Props 
+defineProps({
+  idModal: { default: undefined, type: String },
+  titleModal: { default: undefined, type: String },
+  disableValidate: { default: false, type: Boolean },
+  errorText: { default: undefined, type: String },
+  successText: { default: undefined, type: String },
+})
 
-  data() {
-    return {
-      sendError: false as boolean,
-      isVerify: false as boolean,
-      isInTreatment: false as boolean,
-    };
-  },
-  computed: {
-    errorRecaptchaText(): string {
-      if (this.isCaptchaTest) {
-        return this.$t("Recaptcha not active");
-      }
-      return this.sendError ? this.$t("Recaptcha error") : "";
-    },
-    isCaptchaTest(): boolean {
-      return state.generalParameters.isCaptchaTest as boolean;
-    },
-  },
-  methods: {
-    async handleSuccess(token: string) {
-      this.isVerify = await api.checkToken(token);
-      this.sendAction();
-    },
-    handleError() {
-      this.isVerify = false;
-      this.sendError = true;
-    },
-    async submit(): Promise<void> {
-      this.isInTreatment = true;
-      if (!this.isVerify && !this.isCaptchaTest) {
-        return (
-          this.$refs.invisibleRecaptcha as InstanceType<typeof VueRecaptcha>
-        ).execute();
-      }
-      this.sendAction();
-    },
-    closePopup(): void {
-      this.$emit("close");
-    },
-    sendAction(): void {
-      this.$emit("validate");
-    },
-  },
+//Emits
+const emit = defineEmits(["close", "validate"]);
+
+//Data 
+const sendError = ref(false);
+const isVerify = ref(false);
+const isInTreatment = ref(false);
+const captchRef = useTemplateRef('invisibleRecaptcha');
+
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const errorRecaptchaText = computed(() =>{
+  if (isCaptchaTest.value) {
+    return t("Recaptcha not active");
+  }
+  return sendError.value ? t("Recaptcha error") : "";
 });
+const isCaptchaTest = computed(() => state.generalParameters.isCaptchaTest as boolean);
+
+
+//Methods
+async function handleSuccess(token: string) {
+  isVerify.value = await api.checkToken(token);
+  sendAction();
+}
+function handleError() {
+  isVerify.value = false;
+  sendError.value = true;
+}
+async function submit(): Promise<void> {
+  isInTreatment.value = true;
+  if (!isVerify.value && !isCaptchaTest.value) {
+    (captchRef?.value as InstanceType<typeof VueRecaptcha>).execute();
+  }
+  sendAction();
+}
+function closePopup(): void {
+  emit("close");
+}
+function sendAction(): void {
+  emit("validate");
+}
 </script>

package/src/components/display/comments/modal/ReportAbuseModal.vue

@@ -1,104 +1,97 @@
 <template>
   <RecaptchaModal
     id-modal="report-abuse-modal"
-    :title-modal="$t('Report abuse')"
+    :title-modal="t('Report abuse')"
     :disable-validate="errorName || abuseDescriptionError"
     :error-text="errorSendAbuse"
     :success-text="successText"
-    @close="$emit('close')"
+    @close="emit('close')"
     @validate="reportAbuse"
   >
     <template #form>
       <ClassicInputText
-        v-if="!commentUser?.name"
+        v-if="!commentStore.commentUser?.name"
         v-model:text-init="name"
         v-model:error-variable="errorName"
         input-id="comment-user-name"
-        :label="$t('Let\'s get acquainted :')"
-        :max-length="maxName"
-        :placeholder="$t('Your name')"
-        autocomplete="name"
+        :label="t('Let\'s get acquainted :')"
+        :max-length="Constants.MAX_COMMENT_NAME"
+        :placeholder="t('Your name')"
+        autocomplete-type="name"
       />
       <ClassicInputText
         v-model:text-init="abuseDescription"
         v-model:error-variable="abuseDescriptionError"
         :is-textarea="true"
         input-id="abuse-description"
-        :label="$t('Describe the reason for the report')"
-        :max-length="maxAbuseDescription"
+        :label="t('Describe the reason for the report')"
+        :max-length="Constants.MAX_COMMENT"
         :focus="true"
       />
     </template>
   </RecaptchaModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Constants from "../../../../../public/config";
 import ClassicInputText from "../../../form/ClassicInputText.vue";
 import RecaptchaModal from "./RecaptchaModal.vue";
-import { mapActions, mapState } from "pinia";
-import { defineComponent } from "vue";
+import { Ref, ref } from "vue";
 import { useCommentStore } from "../../../../stores/CommentStore";
 import classicApi from "../../../../api/classicApi";
 import {
   CommentAbuseInfo,
   CommentPodcast,
 } from "@/stores/class/general/comment";
-export default defineComponent({
-  name: "ReportAbuseModal",
-  components: {
-    RecaptchaModal,
-    ClassicInputText,
-  },
-  props: {
-    comment: { default: undefined, type: Object as () => CommentPodcast },
-  },
+import { useI18n } from "vue-i18n";
 
-  emits: ["close", "update:comment"],
 
-  data() {
-    return {
-      name: undefined as string | undefined,
-      errorName: false as boolean,
-      maxName: Constants.MAX_COMMENT_NAME as number,
-      abuseDescription: undefined as string | undefined,
-      abuseDescriptionError: true as boolean,
-      maxAbuseDescription: Constants.MAX_COMMENT as number,
-      errorSendAbuse: undefined as string | undefined,
-      successText: undefined as string | undefined,
+//Props 
+const props = defineProps({
+  comment: { default: undefined, type: Object as () => CommentPodcast },
+})
+
+//Emits
+const emit = defineEmits(["close", "update:comment"]);
+
+//Data 
+const errorName = ref(false);
+const name: Ref<string | undefined> = ref(undefined);
+const abuseDescription: Ref<string | undefined> = ref(undefined);
+const abuseDescriptionError = ref(true);
+const errorSendAbuse: Ref<string | undefined> = ref(undefined);
+const successText: Ref<string | undefined> = ref(undefined);
+
+
+//Composables
+const { t } = useI18n();
+const commentStore = useCommentStore();
+
+//Methods
+async function reportAbuse(): Promise<void> {
+  if (!commentStore.commentUser?.name) {
+    commentStore.setCommentUser(name.value ?? "");
+  }
+  try {
+    const abuseObject = {
+      commentId: props.comment?.commentId,
+      description: abuseDescription.value,
+      uuid: commentStore.commentUser?.uuid,
     };
-  },
-  computed: {
-    ...mapState(useCommentStore, ["commentUser"]),
-  },
-  methods: {
-    ...mapActions(useCommentStore, ["setCommentUser"]),
-    async reportAbuse(): Promise<void> {
-      if (!this.commentUser?.name) {
-        this.setCommentUser(this.name ?? "");
-      }
-      try {
-        const abuseObject = {
-          commentId: this.comment?.commentId,
-          description: this.abuseDescription,
-          uuid: this.commentUser?.uuid,
-        };
-        const commentAbuseInfo = await classicApi.postData<CommentAbuseInfo>({
-          api: 2,
-          path: "abuse/",
-          dataToSend: abuseObject,
-        });
-        this.$emit("update:comment", {
-          ...this.comment,
-          ...{ abuse: commentAbuseInfo.abuseCount },
-        });
-        this.successText = this.$t("Thank you for reporting abuse");
-      } catch {
-        this.errorSendAbuse = this.$t(
-          "Error occurs while post your comment...",
-        );
-      }
-    },
-  },
-});
+    const commentAbuseInfo = await classicApi.postData<CommentAbuseInfo>({
+      api: 2,
+      path: "abuse/",
+      dataToSend: abuseObject,
+    });
+    emit("update:comment", {
+      ...props.comment,
+      ...{ abuse: commentAbuseInfo.abuseCount },
+    });
+    successText.value = t("Thank you for reporting abuse");
+  } catch {
+    errorSendAbuse.value = t(
+      "Error occurs while post your comment...",
+    );
+  }
+}
 </script>

package/src/components/display/edit/EditBox.vue

@@ -2,14 +2,15 @@
   <div />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { CommentPodcast } from "@/stores/class/general/comment";
-import { defineComponent } from "vue";
-export default defineComponent({
-  methods: {
-    updateComment(comment: CommentPodcast): void {
-      console.log(comment);
-    },
-  },
+
+//Methods
+function updateComment(comment: CommentPodcast): void {
+  console.log(comment);
+}
+//Expose
+defineExpose({
+  updateComment
 });
 </script>

package/src/components/display/edit/EditBoxRadio.vue

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