@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/categories/CategoryList.vue

@@ -6,7 +6,7 @@
     <div ref="categoryListContainer" class="category-list-container">
       <button
         v-for="category in categories"
-        :ref="'category' + category.id"
+        :id="'category' + category.id"
         :key="category.id"
         class="btn btn-primary btn-on-dark m-1"
         @click="checkIfFilter(category)"
@@ -18,7 +18,7 @@
       v-show="hidenCategories.length"
       id="categories-dropdown"
       class="btn btn-primary btn-on-dark m-1"
-      :title="$t('See more')"
+      :title="t('See more')"
     >
       <PlusIcon />
     </button>
@@ -40,7 +40,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PlusIcon from "vue-material-design-icons/Plus.vue";
 import { useRouteUpdateParams } from "../../composable/route/useRouteUpdateParams";
 import classicApi from "../../../api/classicApi";
@@ -49,155 +49,130 @@ import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Category } from "@/stores/class/general/category";
 import { useFilterStore } from "../../../stores/FilterStore";
 import { useGeneralStore } from "../../../stores/GeneralStore";
-import { mapState, mapActions } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "CategoryList",
-  components: {
-    ClassicPopover,
-    PlusIcon,
-  },
+import { computed, nextTick, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 
-  props: {
-    isFilter: { default: false, type: Boolean },
-    isDisplay: { default: false, type: Boolean },
-  },
-  emits: ["categoriesLength"],
-  setup(){
-    const { updateFiltersParam } = useRouteUpdateParams();
-    return {updateFiltersParam }
-  },
+//Props 
+const props = defineProps({
+  isFilter: { default: false, type: Boolean },
+  isDisplay: { default: false, type: Boolean },
+})
 
-  data() {
-    return {
-      hidenCategories: [] as Array<Category>,
-    };
-  },
+//Emits
+const emit = defineEmits(["categoriesLength"]);
 
-  computed: {
-    ...mapState(useGeneralStore, ["storedCategories", "storedCategoriesOrga"]),
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
-    },
-    categories(): Array<Category> {
-      let arrayCategories: Array<Category> = [];
-      if (this.filterOrgaId) {
-        arrayCategories = this.storedCategoriesOrga.filter((c: Category) => {
-          return c.podcastOrganisationCount;
-        });
-      } else {
-        arrayCategories = this.storedCategories.filter((c: Category) => {
-          if (this.isPodcastmaker) return c.podcastOrganisationCount;
-          return c.podcastCount;
-        });
-      }
-      this.$emit("categoriesLength", arrayCategories.length);
-      return arrayCategories;
-    },
-    watchVariable(): string {
-      return `${this.isDisplay}|${this.categories}`;
-    },
-    reloadVariable(): string {
-      return `${this.filterOrgaId}|${this.storedCategories}`;
-    },
-  },
-  watch: {
-    watchVariable: {
-      deep: true,
-      immediate: true,
-      handler() {
-        this.$nextTick(() => {
-          this.resizeWindow();
-        });
-      },
-    },
-    reloadVariable: {
-      deep: true,
-      immediate: true,
-      handler() {
-        if (this.filterOrgaId) {
-          this.fetchCategories(this.filterOrgaId);
-        }
-      },
-    },
-  },
-  mounted() {
-    window.addEventListener("resize", this.resizeWindow);
-  },
-  beforeUnmount(): void {
-    window.removeEventListener("resize", this.resizeWindow);
-  },
+//Data 
+const hidenCategories: Ref<Array<Category>> = ref([]);
+const categoryListRef = useTemplateRef('categoryListContainer');
 
-  methods: {
-    ...mapActions(useGeneralStore, ["storedUpdateCategoriesOrga"]),
-    checkIfFilter(category: Category): void {
-      if (!this.isFilter) {
-        this.$router.push({
-          name: "category",
-          params: { iabId: category.id.toString() },
-        });
-        return;
-      }
-      const queries = this.$route.query;
-      if (
-        !queries.iabId ||
-        ("string" === typeof queries.iabId &&
-          parseInt(queries.iabId, 10) !== category.id)
-      ) {
-        this.updateFiltersParam(
-          { iabId: category.id.toString() },
-          { i: category.id.toString() },
-        );
-      }
-    },
-    resizeWindow(): void {
-      const categoryList = this.$refs.categoryListContainer as HTMLElement;
-      if (null === categoryList || !categoryList) {
-        return;
-      }
-      categoryList.style.justifyContent = "flex-start";
-      this.hidenCategories.length = 0;
-      this.categories.forEach((element: Category) => {
-        const el = (
-          this.$refs["category" + element.id] as Array<HTMLElement>
-        )[0];
-        if (!el) return;
-        if (el.classList.contains("hid")) {
-          el.classList.remove("hid");
-        }
-      });
-      this.categories.forEach((element: Category) => {
-        const el = (
-          this.$refs["category" + element.id] as Array<HTMLElement>
-        )[0];
-        if (!el) return;
-        const parent = el.parentElement;
-        if (
-          parent &&
-          el.offsetLeft + el.clientWidth <= parent.clientWidth - 20
-        ) {
-          return;
-        }
-        this.hidenCategories.push(element);
-        if (!el.classList.contains("hid")) {
-          el.className += " hid";
-        }
-      });
-      if (!this.hidenCategories.length) {
-        categoryList.style.justifyContent = "center";
-      }
-    },
-    async fetchCategories(organisationId: string): Promise<void> {
-      const data = await classicApi.fetchData<Array<Category>>({
-        api: 0,
-        path: `iab/list/${organisationId}`,
-        parameters: { lang: this.$i18n.locale },
-      });
-      this.storedUpdateCategoriesOrga(data);
-    },
-  },
+//Composables
+const { t, locale } = useI18n();
+const { updateFiltersParam } = useRouteUpdateParams();
+const generalStore = useGeneralStore();
+const filterStore = useFilterStore();
+const router = useRouter();
+const route = useRoute();
+
+//Computed
+const categories = computed(() => {
+  let arrayCategories: Array<Category> = [];
+  if (filterStore.filterOrgaId) {
+    arrayCategories = generalStore.storedCategoriesOrga.filter((c: Category) => {
+      return c.podcastOrganisationCount;
+    });
+  } else {
+    arrayCategories = generalStore.storedCategories.filter((c: Category) => {
+      if (state.generalParameters.podcastmaker) return c.podcastOrganisationCount;
+      return c.podcastCount;
+    });
+  }
+  emit("categoriesLength", arrayCategories.length);
+  return arrayCategories;
 });
+const watchVariable = computed(() => `${props.isDisplay}|${categories.value}`);
+const reloadVariable = computed(() => `${filterStore.filterOrgaId}|${generalStore.storedCategories}`);
+
+
+//Watch
+watch(watchVariable, () => {
+  nextTick(() => {
+    resizeWindow();
+  });
+}, {deep: true, immediate: true});
+watch(reloadVariable, () => {
+  if (filterStore.filterOrgaId) {
+    fetchCategories(filterStore.filterOrgaId);
+  }
+}, {deep: true, immediate: true});
+
+
+onMounted(()=>window.addEventListener("resize", resizeWindow))
+onUnmounted(()=>window.removeEventListener("resize", resizeWindow))
+
+
+//Methods
+function checkIfFilter(category: Category): void {
+  if (!props.isFilter) {
+    router.push({
+      name: "category",
+      params: { iabId: category.id.toString() },
+    });
+    return;
+  }
+  const queries = route.query;
+  if (
+    !queries.iabId ||
+    ("string" === typeof queries.iabId &&
+      parseInt(queries.iabId, 10) !== category.id)
+  ) {
+    updateFiltersParam(
+      { iabId: category.id.toString() },
+      { i: category.id.toString() },
+    );
+  }
+}
+function resizeWindow(): void {
+  const categoryList = categoryListRef?.value as HTMLElement;
+  if (null === categoryList || !categoryList) {
+    return;
+  }
+  categoryList.style.justifyContent = "flex-start";
+  hidenCategories.value.length = 0;
+  categories.value.forEach((element: Category) => {
+    const el = categoryList.querySelector('#category' + element.id);
+    if (!el) return;
+    if (el.classList.contains("hid")) {
+      el.classList.remove("hid");
+    }
+  });
+  categories.value.forEach((element: Category) => {
+    const el = categoryList.querySelector('#category' + element.id);
+    if (!el) return;
+    const parent = el.parentElement;
+    if (
+      parent &&
+      el.offsetLeft + el.clientWidth <= parent.clientWidth - 20
+    ) {
+      return;
+    }
+    hidenCategories.value.push(element);
+    if (!el.classList.contains("hid")) {
+      el.className += " hid";
+    }
+  });
+  if (!hidenCategories.value.length) {
+    categoryList.style.justifyContent = "center";
+  }
+}
+async function fetchCategories(organisationId: string): Promise<void> {
+  const data = await classicApi.fetchData<Array<Category>>({
+    api: 0,
+    path: `iab/list/${organisationId}`,
+    parameters: { lang: locale.value },
+  });
+  generalStore.storedUpdateCategoriesOrga(data);
+}
 </script>
 <style lang="scss">
 .octopus-app {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex flex-column comment-input-container mt-3">
-    <CommentName v-if="commentUser?.name" />
+    <CommentName v-if="commentStore.commentUser?.name" />
     <ClassicContentEditable
       ref="textarea"
       v-model="newComment"
@@ -22,7 +22,7 @@
           {{ countComment + " / " + maxComment }}
         </p>
         <button class="btn me-2" @mousedown="cancelAction">
-          {{ $t("Cancel") }}
+          {{ t("Cancel") }}
         </button>
         <button
           class="btn btn-primary"
@@ -40,25 +40,25 @@
     />
     <MessageModal
       v-if="postError"
-      :validatetext="$t('Close')"
-      :title="$t('Error')"
-      :message="$t('Error occurs while post your comment...')"
+      :validatetext="t('Close')"
+      :title="t('Error')"
+      :message="t('Error occurs while post your comment...')"
       @close="postError = false"
       @validate="postError = false"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import classicApi from "../../../api/classicApi";
 import { Podcast } from "@/stores/class/general/podcast";
-import { CommentCreate, CommentPodcast } from "@/stores/class/general/comment";
+import { CommentPodcast } from "@/stores/class/general/comment";
 import Constants from "../../../../public/config";
-import { mapState } from "pinia";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, computed, watch, useTemplateRef } from "vue";
 import { useCommentStore } from "../../../stores/CommentStore";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useAuthStore } from "../../../stores/AuthStore";
+import { useI18n } from "vue-i18n";
 const CheckIdentityModal = defineAsyncComponent(
   () => import("./modal/CheckIdentityModal.vue"),
 );
@@ -72,123 +72,101 @@ const ClassicEmojiPicker = defineAsyncComponent(
 const ClassicContentEditable = defineAsyncComponent(
   () => import("../../form/ClassicContentEditable.vue"),
 );
-export default defineComponent({
-  name: "CommentInput",
-  components: {
-    CheckIdentityModal,
-    MessageModal,
-    ClassicEmojiPicker,
-    ClassicContentEditable,
-    CommentName,
-  },
-  props: {
-    podcast: { default: undefined, type: Object as () => Podcast },
-    focus: { default: false, type: Boolean },
-    inAnswerComment: {
-      default: undefined,
-      type: Object as () => CommentPodcast,
-    },
-  },
-  emits: ["cancelAction", "newComment"],
 
-  data() {
-    return {
-      newComment: "" as string,
-      maxComment: Constants.MAX_COMMENT as number,
-      isTextareaActive: false as boolean,
-      isCheckIdentity: false as boolean,
-      postError: false as boolean,
-    };
+//Props 
+const props = defineProps({
+  podcast: { default: undefined, type: Object as () => Podcast },
+  focus: { default: false, type: Boolean },
+  inAnswerComment: {
+    default: undefined,
+    type: Object as () => CommentPodcast,
   },
+})
 
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerPodcast",
-      "playerLive",
-      "playerElapsed",
-      "playerTotal",
-    ]),
-    ...mapState(useCommentStore, ["commentUser"]),
-    ...mapState(useAuthStore, ["authOrgaId"]),
-    commentTooLong(): boolean {
-      return this.countComment <= this.maxComment;
-    },
-    countComment(): number {
-      return this.newComment.length;
-    },
-    placeholder(): string {
-      return this.inAnswerComment?.commentId
-        ? this.$t("Answer a comment")
-        : this.$t("Write a comment");
-    },
-    uniqueId(){
-      return "-comment"+(this.inAnswerComment?.commentId??"-parent");
-    }
-  },
-  watch: {
-    focus(): void {
-      (this.$refs.textarea as HTMLElement).focus();
-    },
-  },
-  methods: {
-    addEmojiSelected(emoji: string) {
-      this.newComment += emoji;
-    },
-    requestToSend(): void {
-      if (this.commentUser?.name) {
-        this.postComment();
-      } else {
-        this.isCheckIdentity = true;
-      }
-    },
-    cancelAction(): void {
-      this.newComment = "";
-      this.isTextareaActive = false;
-      this.$emit("cancelAction");
-    },
-    async postComment(): Promise<void> {
-      const comment: CommentCreate = {
-        answerTo: this.inAnswerComment?.commentId,
-        content: this.newComment.trim(),
-        name: this.commentUser?.name ?? "",
+//Emits
+const emit = defineEmits(["cancelAction", "newComment"]);
+
+//Data 
+const maxComment = Constants.MAX_COMMENT;
+const newComment = ref("");
+const isTextareaActive = ref(false);
+const isCheckIdentity = ref(false);
+const postError = ref(false);
+const textareaRef = useTemplateRef('textarea');
+
+//Composables
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+const commentStore = useCommentStore();
+const authStore = useAuthStore();
+
+//Computed
+const commentTooLong = computed(() => countComment.value <= maxComment);
+const countComment = computed(() => newComment.value.length);
+const placeholder = computed(() => props.inAnswerComment?.commentId? t("Answer a comment"): t("Write a comment"));
+const uniqueId = computed(() => "-comment"+(props.inAnswerComment?.commentId??"-parent"));
+
+
+//Watch
+watch(()=>props.focus, () => textareaRef?.value?.focus());
+
+
+//Methods
+function addEmojiSelected(emoji: string) {
+  newComment.value += emoji;
+}
+function requestToSend(): void {
+  if (commentStore.commentUser?.name) {
+    postComment();
+  } else {
+    isCheckIdentity.value = true;
+  }
+}
+function cancelAction(): void {
+  newComment.value = "";
+  isTextareaActive.value = false;
+  emit("cancelAction");
+}
+async function postComment(): Promise<void> {
+  try {
+    const commentReceived = await classicApi.postData<CommentPodcast>({
+      api: 2,
+      path: "comment/",
+      dataToSend: {
+        answerTo: props.inAnswerComment?.commentId,
+        content: newComment.value.trim(),
+        name: commentStore.commentUser?.name ?? "",
         podcastId:
-          this.podcast?.podcastId ?? this.inAnswerComment?.podcastId ?? 0,
-        uuid: this.commentUser?.uuid ?? "",
-        timeline: this.defineTimelineValue(),
-      };
-      try {
-        const commentReceived = await classicApi.postData<CommentPodcast>({
-          api: 2,
-          path: "comment/",
-          dataToSend: comment,
-          isNotAuth: undefined === this.authOrgaId,
-        });
-        this.$emit("newComment", commentReceived);
-        this.newComment = "";
-        this.isTextareaActive = false;
-      } catch {
-        this.postError = true;
-      }
-      this.isCheckIdentity = false;
-    },
-    defineTimelineValue(): number {
-      let timeline = 0;
-      if (
-        undefined !== this.podcast &&
-        (this.playerPodcast?.podcastId === this.podcast.podcastId ||
-          this.playerLive?.podcastId === this.podcast.podcastId)
-      ) {
-        timeline = Math.round(this.playerElapsed * this.playerTotal);
-        if (this.podcast.duration && this.playerPodcast) {
-          timeline = Math.round(
-            timeline - (this.playerTotal - this.podcast.duration / 1000),
-          );
-        }
-      }
-      return timeline < 0 ? 0 : timeline;
-    },
-  },
-});
+          props.podcast?.podcastId ?? props.inAnswerComment?.podcastId ?? 0,
+        uuid: commentStore.commentUser?.uuid ?? "",
+        timeline: defineTimelineValue(),
+      },
+      isNotAuth: undefined === authStore.authOrgaId,
+    });
+    emit("newComment", commentReceived);
+    newComment.value = "";
+    isTextareaActive.value = false;
+  } catch {
+    postError.value = true;
+  }
+  isCheckIdentity.value = false;
+}
+function defineTimelineValue(): number {
+  let timeline = 0;
+  if (
+    undefined !== props.podcast &&
+    (playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||
+    playerStore.playerLive?.podcastId === props.podcast.podcastId)
+  ) {
+    timeline = Math.round(playerStore.playerElapsed * playerStore.playerTotal);
+    if (props.podcast.duration && playerStore.playerPodcast) {
+      timeline = Math.round(
+        timeline - (playerStore.playerTotal - props.podcast.duration / 1000),
+      );
+    }
+  }
+  return timeline < 0 ? 0 : timeline;
+}
 </script>
 
 <style lang="scss">