@saooti/octopus-sdk 40.2.19 → 41.0.0

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

@@ -5,19 +5,19 @@
       class="d-flex align-items-center mb-2"
     >
       <div class="text-secondary me-3">
-        {{ $t("Number comments", { nb: totalCount }) }}
+        {{ t("Number comments", { nb: totalCount }) }}
       </div>
       <button
         id="sort-by-comments"
         class="btn btn-transparent d-flex align-items-center"
       >
         <SortVariantIcon :size="30" />
-        <p class="ms-1">{{ $t("Sort by") }}</p>
+        <p class="ms-1">{{ t("Sort by") }}</p>
       </button>
       <ClassicPopover target="sort-by-comments" :only-click="true">
         <button
           v-for="sortOption in sortChoice"
-          :key="sortOption"
+          :key="sortOption.value"
           class="me-3 octopus-dropdown-item"
           :disabled="sortOption.value === sortType"
           @mousedown="changeSort(sortOption.value)"
@@ -28,7 +28,7 @@
       </ClassicPopover>
     </div>
     <div v-if="!loading && !error && 0 === totalCount" class="text-center">
-      {{ $t("No comments") }}
+      {{ t("No comments") }}
     </div>
     <div
       ref="scrollComponent"
@@ -36,7 +36,7 @@
     >
       <CommentItem
         v-for="(c, indexCom) in comments"
-        :ref="'comItem' + c.commentId"
+        :id="'comItem' + c.commentId"
         :key="c.commentId"
         v-model:comment="comments[indexCom]"
         :podcast="podcast"
@@ -46,13 +46,13 @@
         @delete-comment="deleteComment(c.commentId)"
       />
       <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"
       />
       <button
         v-if="!isNotAnAnswerList && dfirst + dsize < totalCount"
         class="btn share-btn mx-2"
-        :title="$t('See more')"
+        :title="t('See more')"
       >
         <PlusIcon />
       </button>
@@ -60,13 +60,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import SortVariantIcon from "vue-material-design-icons/SortVariant.vue";
 import PlusIcon from "vue-material-design-icons/Plus.vue";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch } from "vue";
 import { AxiosError } from "axios";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import { Podcast } from "@/stores/class/general/podcast";
@@ -75,201 +75,179 @@ import {
   CommentsConfig,
 } from "@/stores/class/config/commentsConfig";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
+import { useI18n } from "vue-i18n";
 /* eslint-disable */
 const CommentItem: any = defineAsyncComponent(() => import('./item/CommentItem.vue'));
 /* eslint-enable */
 const ClassicPopover = defineAsyncComponent(
   () => import("../../misc/ClassicPopover.vue"),
 );
-export default defineComponent({
-  name: "CommentsList",
 
-  components: {
-    ClassicLoading,
-    CommentItem,
-    ClassicPopover,
-    PlusIcon,
-    SortVariantIcon,
-  },
+//Props 
+const props = defineProps({
+  size: { default: 10, type: Number },
+  podcast: { default: undefined, type: Object as () => Podcast },
+  reload: { default: false, type: Boolean },
+  answerToComment: { default: undefined, type: Number },
+  isFlatList: { default: false, type: Boolean },
+  stateFilter: { default: "", type: String },
+  organisationId: { default: undefined, type: String },
+  nbComments: { default: 0, type: Number },
+  config: { default: undefined, type: Object as () => CommentsConfig },
+  eventToHandle: { default: undefined, type: Object as () => CommentMessage },
+})
 
-  props: {
-    size: { default: 10, type: Number },
-    podcast: { default: undefined, type: Object as () => Podcast },
-    reload: { default: false, type: Boolean },
-    answerToComment: { default: undefined, type: Number },
-    isFlatList: { default: false, type: Boolean },
-    stateFilter: { default: "", type: String },
-    organisationId: { default: undefined, type: String },
-    nbComments: { default: 0, type: Number },
-    config: { default: undefined, type: Object as () => CommentsConfig },
-    eventToHandle: { default: undefined, type: Object as () => CommentMessage },
-  },
-  emits: ["update:nbComments", "commentDeleted"],
+//Emits
+const emit = defineEmits(["update:nbComments", "commentDeleted"]);
 
-  setup(){
-    const {handle403} = useErrorHandler();
-    return { handle403 }
-  },
+//Data 
+const loading = ref(false);
+const error = ref(false);
+const dfirst = ref(0);
+const dsize = ref(props.size);
+const totalCount = ref(0);
+const sortType = ref("DATE_DESC");
+const comments: Ref<Array<CommentPodcast>> = ref([]);
+const scrollableSection: Ref<HTMLElement | undefined> = ref(undefined);
+const scrollComponentRef = useTemplateRef('scrollComponent');
 
-  data() {
-    return {
-      loading: false as boolean,
-      error: false as boolean,
-      dfirst: 0 as number,
-      dsize: this.size,
-      totalCount: 0 as number,
-      comments: [] as Array<CommentPodcast>,
-      scrollableSection: undefined as HTMLElement | undefined,
-      sortType: "DATE_DESC" as string,
-    };
-  },
+//Composables
+const { t } = useI18n();
+const {handle403} = useErrorHandler();
 
-  computed: {
-    changed(): string {
-      return `${this.size}|${this.reload}|${this.dsize}|${this.stateFilter}|${this.podcast?.podcastId}|${this.organisationId}`;
-    },
-    isNotAnAnswerList(): boolean {
-      return undefined === this.answerToComment;
-    },
-    sortChoice() {
-      return [
-        { title: this.$t("The most recent"), value: "DATE_DESC" },
-        { title: this.$t("Top comments"), value: "LIKE_DESC" },
-      ];
-    },
-  },
-  watch: {
-    totalCount() {
-      this.$emit("update:nbComments", this.totalCount);
-    },
-    changed(): void {
-      this.fetchContent(true);
-    },
-    eventToHandle: {
-      deep: true,
-      handler() {
-        if (!this.eventToHandle) {
-          return;
-        }
-        if (this.answerToComment === this.eventToHandle.comment.answerTo) {
-          switch (this.eventToHandle.type) {
-            case "CREATE":
-              this.createComment(this.eventToHandle.comment);
-              break;
-            case "UPDATE":
-              this.updateComment(this.eventToHandle.comment);
-              break;
-            case "DELETE":
-              this.deleteComment(this.eventToHandle.comment.commentId);
-              break;
-            default:
-              break;
-          }
-          return;
-        }
-        if (undefined !== this.eventToHandle.comment.answerTo) {
-          (
-            this.$refs["comItem" + this.eventToHandle.comment.answerTo] as
-              | Array<InstanceType<typeof CommentItem>>
-              | undefined
-          )?.[0]?.receiveEvent(this.eventToHandle);
-        }
-      },
-    },
-  },
+//Computed
+const changed = computed(() => `${props.size}|${props.reload}|${dsize.value}|${props.stateFilter}|${props.podcast?.podcastId}|${props.organisationId}`);
+const isNotAnAnswerList = computed(() =>  undefined === props.answerToComment);
+const sortChoice = computed(() =>{
+  return [
+    { title: t("The most recent"), value: "DATE_DESC" },
+    { title: t("Top comments"), value: "LIKE_DESC" },
+  ];
+});
 
-  mounted() {
-    this.fetchContent(true);
-    if (this.isNotAnAnswerList) {
-      this.scrollableSection = this.$refs.scrollComponent as HTMLElement;
-      this.scrollableSection.addEventListener("scroll", this.handleScroll);
+//Watch
+watch(totalCount, () => {emit("update:nbComments", totalCount.value)});
+watch(changed, () => {fetchContent(true);});
+watch(()=>props.eventToHandle, async () => {
+  if (!props.eventToHandle) {
+    return;
+  }
+  if (props.answerToComment === props.eventToHandle.comment.answerTo) {
+    switch (props.eventToHandle.type) {
+      case "CREATE":
+        createComment(props.eventToHandle.comment);
+        break;
+      case "UPDATE":
+        updateComment(props.eventToHandle.comment);
+        break;
+      case "DELETE":
+        deleteComment(props.eventToHandle.comment.commentId);
+        break;
+      default:
+        break;
     }
-  },
-  unmounted() {
-    if (this.isNotAnAnswerList) {
-      this.scrollableSection?.removeEventListener("scroll", this.handleScroll);
+    return;
+  }
+  if (undefined !== props.eventToHandle.comment.answerTo) {
+    const comItem = scrollComponentRef?.value?.querySelector('#comItem' + props.eventToHandle.comment.answerTo) as InstanceType<typeof CommentItem>;
+    comItem?.receiveEvent(props.eventToHandle);
+  }
+}, {deep: true});
+
+
+onMounted(()=>{
+  fetchContent(true);
+  if (isNotAnAnswerList.value) {
+    scrollableSection.value = scrollComponentRef?.value as HTMLElement;
+    scrollableSection.value.addEventListener("scroll", handleScroll);
+  }
+})
+
+onUnmounted(()=>{
+  if (isNotAnAnswerList.value) {
+    scrollableSection.value?.removeEventListener("scroll", handleScroll);
+  }
+})
+
+
+//Methods
+function changeSort(sortTypeUpdate: string) {
+  sortType.value = sortTypeUpdate;
+  fetchContent(true);
+}
+function handleScroll() {
+  if (
+    scrollableSection.value &&
+    totalCount.value > comments.value.length &&
+    scrollableSection.value.scrollTop +
+      scrollableSection.value.clientHeight >=
+      scrollableSection.value.scrollHeight
+  ) {
+    fetchContent(false);
+  }
+}
+function findCommentInCommentsLoaded(commentId: number) {
+  return comments.value.findIndex(
+    (element: CommentPodcast) => element.commentId === commentId,
+  );
+}
+function createComment(comment: CommentPodcast) {
+  comments.value.unshift(comment);
+  totalCount.value += 1;
+}
+function updateComment(comment: CommentPodcast) {
+  const commentIndex = findCommentInCommentsLoaded(comment.commentId);
+  if (-1 !== commentIndex) {
+    comments.value.splice(commentIndex, 1, comment);
+  }
+}
+function deleteComment(commentIdToDelete: number) {
+  const commentIndex = findCommentInCommentsLoaded(commentIdToDelete);
+  if (-1 !== commentIndex) {
+    comments.value.splice(commentIndex, 1);
+    totalCount.value -= 1;
+    emit("commentDeleted", commentIdToDelete);
+  }
+}
+async function fetchContent(reset: boolean): Promise<void> {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  if (reset) {
+    dfirst.value = 0;
+    comments.value.length = 0;
+  }
+  const param = {
+    first: dfirst.value,
+    size: dsize.value,
+    podcastId: props.podcast?.podcastId,
+    sort: sortType.value,
+    answerTo: props.answerToComment,
+    hideAnswers: !props.isFlatList,
+    state: props.stateFilter.length ? props.stateFilter : undefined,
+    organisationId: props.organisationId,
+  };
+  try {
+    const data = await classicApi.fetchData<
+      ListClassicReturn<CommentPodcast>
+    >({
+      api: 2,
+      path: "comment/list",
+      parameters: param,
+    });
+    if (reset) {
+      comments.value.length = 0;
     }
-  },
-  methods: {
-    changeSort(sortType: string) {
-      this.sortType = sortType;
-      this.fetchContent(true);
-    },
-    handleScroll() {
-      if (
-        this.scrollableSection &&
-        this.totalCount > this.comments.length &&
-        this.scrollableSection.scrollTop +
-          this.scrollableSection.clientHeight >=
-          this.scrollableSection.scrollHeight
-      ) {
-        this.fetchContent(false);
-      }
-    },
-    findCommentInCommentsLoaded(commentId: number) {
-      return this.comments.findIndex(
-        (element: CommentPodcast) => element.commentId === commentId,
-      );
-    },
-    createComment(comment: CommentPodcast) {
-      this.comments.unshift(comment);
-      this.totalCount += 1;
-    },
-    updateComment(comment: CommentPodcast) {
-      const commentIndex = this.findCommentInCommentsLoaded(comment.commentId);
-      if (-1 !== commentIndex) {
-        this.comments.splice(commentIndex, 1, comment);
-      }
-    },
-    deleteComment(commentIdToDelete: number) {
-      const commentIndex = this.findCommentInCommentsLoaded(commentIdToDelete);
-      if (-1 !== commentIndex) {
-        this.comments.splice(commentIndex, 1);
-        this.totalCount -= 1;
-        this.$emit("commentDeleted", commentIdToDelete);
-      }
-    },
-    async fetchContent(reset: boolean): Promise<void> {
-      if (this.loading) {
-        return;
-      }
-      this.loading = true;
-      if (reset) {
-        this.dfirst = 0;
-        this.comments.length = 0;
-      }
-      const param = {
-        first: this.dfirst,
-        size: this.dsize,
-        podcastId: this.podcast?.podcastId,
-        sort: this.sortType,
-        answerTo: this.answerToComment,
-        hideAnswers: !this.isFlatList,
-        state: this.stateFilter.length ? this.stateFilter : undefined,
-        organisationId: this.organisationId,
-      };
-      try {
-        const data = await classicApi.fetchData<
-          ListClassicReturn<CommentPodcast>
-        >({
-          api: 2,
-          path: "comment/list",
-          parameters: param,
-        });
-        if (reset) {
-          this.comments.length = 0;
-        }
-        this.comments.push(...data.result);
-        this.totalCount = data.count;
-        this.dfirst += this.dsize;
-        this.loading = false;
-      } catch (error) {
-        this.handle403(error as AxiosError);
-        this.error = true;
-      }
-    },
-  },
-});
+    comments.value.push(...data.result);
+    totalCount.value = data.count;
+    dfirst.value += dsize.value;
+    loading.value = false;
+  } catch (errorWs) {
+    handle403(errorWs as AxiosError);
+    error.value = true;
+  }
+}
 </script>
 <style lang="scss">
 .octopus-app {

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

@@ -7,74 +7,64 @@
       class="h6 fw-bold"
       :class="canEditName ? 'btn btn-transparent p-1' : ''"
       @click="startEditingName"
-      >{{ commentUser.name }}</component
+      >{{ commentStore.commentUser?.name }}</component
     >
     <template v-else>
       <ClassicInputText
         v-model:text-init="temporaryName"
         v-model:error-variable="errorName"
         input-id="comment-name-input"
-        :label="$t('Your name')"
-        :max-length="maxName"
-        autocomplete="name"
+        :label="t('Your name')"
+        :max-length="Constants.MAX_COMMENT_NAME"
+        autocomplete-type="name"
         class="me-3"
       />
       <button class="btn m-1" @click="isEditing = false">
-        {{ $t("Cancel") }}
+        {{ t("Cancel") }}
       </button>
       <button
         class="btn btn-primary m-1"
         :disabled="errorName"
         @click="validEdit"
       >
-        {{ $t("Yes") }}
+        {{ t("Yes") }}
       </button>
     </template>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicInputText from "../../form/ClassicInputText.vue";
 import Constants from "../../../../public/config";
 import { useAuthStore } from "../../../stores/AuthStore";
-import { mapActions, mapState } from "pinia";
-import { defineComponent } from "vue";
+import { computed, ref } from "vue";
 import { useCommentStore } from "../../../stores/CommentStore";
-export default defineComponent({
-  name: "CommentName",
-  components:{
-    ClassicInputText
-  },
-  emits: [],
-  data() {
-    return {
-      isEditing: false as boolean,
-      temporaryName: "" as string,
-      errorName: true as boolean,
-      maxName: Constants.MAX_COMMENT_NAME as number,
-    };
-  },
+import { useI18n } from "vue-i18n";
 
-  computed: {
-    ...mapState(useCommentStore, ["commentUser"]),
-    ...mapState(useAuthStore, ["authProfile"]),
-    canEditName(): boolean {
-      return undefined !== this.authProfile;
-    },
-  },
-  methods: {
-    ...mapActions(useCommentStore, ["setCommentUser"]),
-    startEditingName(): void {
-      if (!this.canEditName) {
-        return;
-      }
-      this.temporaryName = this.commentUser?.name ?? "";
-      this.isEditing = true;
-    },
-    validEdit(): void {
-      this.setCommentUser(this.temporaryName);
-      this.isEditing = false;
-    },
-  },
-});
+//Data 
+const isEditing = ref(false);
+const temporaryName = ref("");
+const errorName = ref(true);
+
+//Composables
+const { t } = useI18n();
+const commentStore = useCommentStore();
+const authStore = useAuthStore();
+
+
+//Computed
+const canEditName = computed(() => undefined !== authStore.authProfile);
+
+//Methods
+function startEditingName(): void {
+  if (!canEditName.value) {
+    return;
+  }
+  temporaryName.value = commentStore.commentUser?.name ?? "";
+  isEditing.value = true;
+}
+function validEdit(): void {
+  commentStore.setCommentUser(temporaryName.value);
+  isEditing.value = false;
+}
 </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 && comment"
@@ -11,44 +11,38 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../../api/classicApi";
 import CommentBasicView from "./item/CommentBasicView.vue";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { CommentPodcast } from "@/stores/class/general/comment";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "CommentParentInfo",
+import { onBeforeMount, Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";
 
-  components: {
-    CommentBasicView,
-    ClassicLoading,
-  },
+//Props 
+const props = defineProps({
+  commentId: { default: undefined, type: Number },
+  editRight: { default: false, type: Boolean },
+})
 
-  props: {
-    commentId: { default: undefined, type: Number },
-    editRight: { default: false, type: Boolean },
-  },
+//Data 
+const loading = ref(true);
+const comment: Ref<CommentPodcast | undefined> = ref(undefined);
 
-  data() {
-    return {
-      loading: true as boolean,
-      comment: undefined as CommentPodcast | undefined,
-    };
-  },
-  created() {
-    this.fetchComment();
-  },
-  methods: {
-    async fetchComment(): Promise<void> {
-      if (this.commentId) {
-        this.comment = await classicApi.fetchData<CommentPodcast>({
-          api: 2,
-          path: `comment/${this.commentId}`,
-        });
-      }
-      this.loading = false;
-    },
-  },
-});
+//Composables
+const { t } = useI18n();
+  
+
+onBeforeMount(()=>fetchComment())
+
+//Methods
+async function fetchComment(): Promise<void> {
+  if (props.commentId) {
+    comment.value = await classicApi.fetchData<CommentPodcast>({
+      api: 2,
+      path: `comment/${props.commentId}`,
+    });
+  }
+  loading.value = false;
+}
 </script>