@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/list/ListPaginate.vue

@@ -23,7 +23,7 @@
     <PaginateSection
       v-if="!isPhone && !justSizeChosen && totalCount > 0"
       :id="id"
-      :style="playerResponsive ? 'bottom:' + playerHeight : ''"
+      :style="playerResponsive ? 'bottom:' + playerStore.playerHeight : ''"
       :first="first"
       :rows-per-page="rowsPerPage"
       :total-count="totalCount"
@@ -34,18 +34,18 @@
       v-show="first + rowsPerPage < totalCount && (isPhone || justSizeChosen)"
       :disabled="loading"
       class="btn btn-primary align-self-center w-fit-content m-4"
-      :title="$t('See more')"
+      :title="t('See more')"
       @click="fetchMore"
     >
       <template v-if="buttonPlus">
-        {{ $t("See more") }}
+        {{ t("See more") }}
       </template>
       <PlusIcon :size="16" :class="buttonPlus ? 'ms-1' : ''" />
     </button>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PlusIcon from "vue-material-design-icons/Plus.vue";
 import domHelper from "../../../helper/domHelper";
 import ClassicLoading from "../../form/ClassicLoading.vue";
@@ -54,97 +54,76 @@ import PaginateParams from "./PaginateParams.vue";
 import PaginateSection from "./PaginateSection.vue";
 import {useResizePhone} from "../../composable/useResizePhone";
 import { useRouteUpdateParams } from "../../composable/route/useRouteUpdateParams";
-import { defineComponent } from "vue";
+import { computed, watch } from "vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
-import { mapState } from "pinia";
-export default defineComponent({
-  name: "ListPaginate",
-  components: {
-    PaginateSection,
-    PaginateParams,
-    ClassicLoading,
-    PlusIcon,
-  },
-  props: {
-    first: { default: 0, type: Number },
-    rowsPerPage: { default: 30, type: Number },
-    totalCount: { default: 0, type: Number },
-    textCount: { default: undefined, type: String },
-    id: { default: "", type: String },
-    loadingText: { default: undefined, type: String },
-    errorText: { default: undefined, type: String },
-    loading: { default: false, type: Boolean },
-    isMobile: { default: false, type: Boolean },
-    justSizeChosen: { default: false, type: Boolean },
-    playerResponsive: { default: false, type: Boolean },
-  },
+import { useI18n } from "vue-i18n";
 
-  emits: ["update:first", "update:rowsPerPage", "update:isMobile"],
 
-  setup(){
-    const { isPhone, windowWidth } = useResizePhone();
-    const { updateRouteParam, updatePaginateSize } = useRouteUpdateParams();
-    return { isPhone, windowWidth, updateRouteParam, updatePaginateSize }
-  },
-  data() {
-    return {
-      internSizeChange: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, ["playerHeight"]),
-    buttonPlus(): boolean {
-      return state.generalParameters.buttonPlus as boolean;
-    },
-    rangeSize() {
-      if (this.windowWidth > 1600) {
-        return 3;
-      }
-      return this.windowWidth > 1530 ? 2 : 1;
-    },
-  },
-  watch: {
-    isPhone: {
-      immediate: true,
-      handler() {
-        this.$emit("update:isMobile", this.isPhone);
-      },
-    },
-    first() {
-      if (this.internSizeChange) {
-        this.internSizeChange = false;
-        return;
-      }
-      this.updateRouteParam({pr:(Math.floor(this.first / this.rowsPerPage) + 1).toString()});
-    },
-  },
-  methods: {
-    fetchMore() {
-      this.$emit("update:first", this.first + this.rowsPerPage);
-    },
-    changeFirst(firstValue: number) {
-      this.scrollToTop();
-      this.$emit("update:first", firstValue);
-    },
-    changeSize(sizeValue: number) {
-      this.scrollToTop();
-      if (0 !== this.first) {
-        this.internSizeChange = true;
-      }
-      this.$emit("update:rowsPerPage", sizeValue);
-      this.updatePaginateSize(sizeValue);
-    },
-    scrollToTop() {
-      const element = document.getElementById(this.id);
-      if (!element || element.getBoundingClientRect().top > 0) {
-        return;
-      }
-      const y =
-        element.getBoundingClientRect().top +
-        window.scrollY -
-        domHelper.convertRemToPixels(3.5);
-      window.scrollTo({ top: y, behavior: "smooth" });
-    },
-  },
+//Props 
+const props = defineProps({
+  first: { default: 0, type: Number },
+  rowsPerPage: { default: 30, type: Number },
+  totalCount: { default: 0, type: Number },
+  textCount: { default: undefined, type: String },
+  id: { default: "", type: String },
+  loadingText: { default: undefined, type: String },
+  errorText: { default: undefined, type: String },
+  loading: { default: false, type: Boolean },
+  isMobile: { default: false, type: Boolean },
+  justSizeChosen: { default: false, type: Boolean },
+  playerResponsive: { default: false, type: Boolean },
+  forceUpdateParameters: { default: false, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["update:first", "update:rowsPerPage", "update:isMobile"]);
+
+  
+//Composables
+const { t } = useI18n();
+const { isPhone, windowWidth } = useResizePhone();
+const { updateRouteParam, updatePaginateSize } = useRouteUpdateParams();
+const playerStore = usePlayerStore();
+
+
+//Computed
+const buttonPlus = computed(() => state.generalParameters.buttonPlus);
+const rangeSize = computed(() => {
+  if (windowWidth.value > 1600) {
+    return 3;
+  }
+  return windowWidth.value > 1530 ? 2 : 1;
 });
+
+
+//Watch
+watch(isPhone, () => {emit("update:isMobile", isPhone.value);}, {immediate: true});
+watch(()=>props.first,  () => {
+  updateRouteParam({pr:(Math.floor(props.first / props.rowsPerPage) + 1).toString()}, props.forceUpdateParameters);
+});
+
+//Methods
+function fetchMore() {
+  emit("update:first", props.first + props.rowsPerPage);
+}
+function changeFirst(firstValue: number) {
+  scrollToTop();
+  emit("update:first", firstValue);
+}
+function changeSize(sizeValue: number) {
+  scrollToTop();
+  emit("update:rowsPerPage", sizeValue);
+  updatePaginateSize(sizeValue, props.forceUpdateParameters);
+}
+function scrollToTop() {
+  const element = document.getElementById(props.id);
+  if (!element || element.getBoundingClientRect().top > 0) {
+    return;
+  }
+  const y =
+    element.getBoundingClientRect().top +
+    window.scrollY -
+    domHelper.convertRemToPixels(3.5);
+  window.scrollTo({ top: y, behavior: "smooth" });
+}
 </script>

package/src/components/display/list/PaginateParams.vue

@@ -3,58 +3,54 @@
     <ClassicSelect
       :text-init="rowsPerPage"
       :id-select="'rows-per-page-select'+id"
-      :label="$t('Items per page :')"
+      :label="t('Items per page :')"
       :display-label="true"
       class-label="flex-shrink-0 me-1"
       class="d-flex align-items-center mb-0"
       :options="optionRowsPerPage"
-      @update:text-init="$emit('update:rowsPerPage', parseInt($event, 10))"
+      @update:text-init="emit('update:rowsPerPage', parseInt($event, 10))"
     />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import ClassicSelect from "../../form/ClassicSelect.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PaginateParams",
-  components:{
-    ClassicSelect
-  },
+import { onBeforeMount, ref } from "vue";
 
-  props: {
-    rowsPerPage: { default: 0, type: Number },
-    id: { default: "", type: String },
-  },
+//Props 
+const props = defineProps({
+  rowsPerPage: { default: 0, type: Number },
+  id: { default: "", type: String },
+})
 
-  emits: ["update:rowsPerPage"],
+//Emits
+const emit = defineEmits(["update:rowsPerPage"]);
 
-  data() {
-    return {
-      optionsRowsPerPage: [10, 20, 30, 40, 50, 60] as Array<number>,
-      optionRowsPerPage: [
-        {title:"10", value: 10},
-        {title:"20", value: 20},
-        {title:"30", value: 30},
-        {title:"40", value: 40},
-        {title:"50", value: 50},
-        {title:"60", value: 60},
-      ],
-    };
-  },
-  created() {
-    this.initRowsPerPage();
-  },
+//Data 
+const optionsRowsPerPage = ref([10, 20, 30, 40, 50, 60]);
+const optionRowsPerPage = ref([
+  {title:"10", value: 10},
+  {title:"20", value: 20},
+  {title:"30", value: 30},
+  {title:"40", value: 40},
+  {title:"50", value: 50},
+  {title:"60", value: 60},
+]);
 
-  methods: {
-    initRowsPerPage() {
-      if (this.optionsRowsPerPage.includes(this.rowsPerPage)) {
-        return;
-      }
-      this.optionsRowsPerPage.push(this.rowsPerPage);
-      this.optionsRowsPerPage.sort((a, b) => a - b);
-    },
-  },
-});
+//Composables
+const { t } = useI18n();
+
+
+onBeforeMount(()=>initRowsPerPage())
+
+//Methods
+function initRowsPerPage() {
+  if (optionsRowsPerPage.value.includes(props.rowsPerPage)) {
+    return;
+  }
+  optionsRowsPerPage.value.push(props.rowsPerPage);
+  optionsRowsPerPage.value.sort((a, b) => a - b);
+}
 </script>
 <style lang="scss">
 .octopus-app .paginate {

package/src/components/display/list/PaginateSection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="paginate-fixed">
     <div class="mx-2">
-      {{ $t("Showing items number", { page: page + 1, totalPage: totalPage }) }}
+      {{ t("Showing items number", { page: page + 1, totalPage: totalPage }) }}
     </div>
     <div class="d-flex flex-nowrap">
       <button
@@ -54,137 +54,126 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PaginateSection",
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
-  props: {
-    totalCount: { default: 0, type: Number },
-    first: { default: 0, type: Number },
-    rowsPerPage: { default: 0, type: Number },
-    rangeSize: { default: 1, type: Number },
-  },
+//Props 
+const props = defineProps({
+  totalCount: { default: 0, type: Number },
+  first: { default: 0, type: Number },
+  rowsPerPage: { default: 0, type: Number },
+  rangeSize: { default: 1, type: Number },
+})
 
-  emits: ["update:first"],
 
-  computed: {
-    buttonsLeft() {
-      return [
-        {
-          title: this.$t("Go to first page"),
-          disabled: 0 === this.first,
-          action: () => {
-            this.changeFirst(0);
-          },
-          path: "M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z",
-        },
-        {
-          title: this.$t("Go to previous page"),
-          disabled: 0 === this.first,
-          action: () => {
-            this.changeFirst(this.first - this.rowsPerPage);
-          },
-          path: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z",
-        },
-      ];
-    },
-    buttonsRight() {
-      return [
-        {
-          title: this.$t("Go to next page"),
-          disabled: this.lastFirst === this.first,
-          action: () => {
-            this.changeFirst(this.first + this.rowsPerPage);
-          },
-          path: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z",
-        },
-        {
-          title: this.$t("Go to last page"),
-          disabled: this.lastFirst === this.first,
-          action: () => {
-            this.changeFirst(this.lastFirst);
-          },
-          path: "M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z",
-        },
-      ];
-    },
-    page() {
-      return Math.floor(this.first / this.rowsPerPage);
-    },
-    totalPage() {
-      return Math.ceil(this.totalCount / this.rowsPerPage);
-    },
-    pagination(): (number | null)[] {
-      if (-1 === this.rangeSize) {
-        return [];
-      }
-      const minPaginationElems = 5 + this.rangeSize * 2;
-      let rangeStart =
-        this.totalPage <= minPaginationElems
-          ? 1
-          : this.page + 1 - this.rangeSize;
-      let rangeEnd =
-        this.totalPage <= minPaginationElems
-          ? this.totalPage
-          : this.page + 1 + this.rangeSize;
-      rangeEnd = rangeEnd > this.totalPage ? this.totalPage : rangeEnd;
-      rangeStart = rangeStart < 1 ? 1 : rangeStart;
-      if (this.totalPage > minPaginationElems) {
-        return this.getPaginationArrayWithEllipsis(
-          rangeStart,
-          rangeEnd,
-          minPaginationElems,
-        );
-      }
-      const res = [];
-      for (let i = rangeStart; i <= rangeEnd; i++) {
-        res.push(i);
-      }
-      return res;
+//Emits
+const emit = defineEmits(["update:first"]);
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const buttonsLeft = computed(() => {
+  return [
+    {
+      title: t("Go to first page"),
+      disabled: 0 === props.first,
+      action: () => {changeFirst(0);},
+      path: "M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z",
     },
-    lastFirst(): number {
-      return (this.totalPage - 1) * this.rowsPerPage;
+    {
+      title: t("Go to previous page"),
+      disabled: 0 === props.first,
+      action: () => {changeFirst(props.first - props.rowsPerPage);},
+      path: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z",
     },
-  },
-
-  methods: {
-    getPaginationArrayWithEllipsis(
-      rangeStart: number,
-      rangeEnd: number,
-      minPaginationElems: number,
-    ) {
-      const res = [];
-      const isStartBoundaryReached = rangeStart - 1 < 3;
-      const isEndBoundaryReached = this.totalPage - rangeEnd < 3;
-      if (isStartBoundaryReached) {
-        rangeEnd = minPaginationElems - 2;
-        for (let i = 1; i < rangeStart; i++) {
-          res.push(i);
-        }
-      } else {
-        res.push(1);
-        res.push(null);
-      }
-      if (isEndBoundaryReached) {
-        rangeStart = this.totalPage - (minPaginationElems - 3);
-        for (let i = rangeStart; i <= this.totalPage; i++) {
-          res.push(i);
-        }
-      } else {
-        for (let i = rangeStart; i <= rangeEnd; i++) {
-          res.push(i);
-        }
-        res.push(null);
-        res.push(this.totalPage);
-      }
-      return res;
+  ];
+});
+const buttonsRight = computed(() => {
+  return [
+    {
+      title: t("Go to next page"),
+      disabled: lastFirst.value === props.first,
+      action: () => {changeFirst(props.first + props.rowsPerPage);},
+      path: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z",
     },
-    changeFirst(newFirst: number) {
-      this.$emit("update:first", newFirst);
+    {
+      title: t("Go to last page"),
+      disabled: lastFirst.value === props.first,
+      action: () => {changeFirst(lastFirst.value);},
+      path: "M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z",
     },
-  },
+  ];
 });
+const page = computed(() =>Math.floor(props.first / props.rowsPerPage));
+const totalPage = computed(() =>Math.ceil(props.totalCount / props.rowsPerPage));
+const pagination = computed(() => {
+  if (-1 === props.rangeSize) {
+    return [];
+  }
+  const minPaginationElems = 5 + props.rangeSize * 2;
+  let rangeStart =
+    totalPage.value <= minPaginationElems
+      ? 1
+      : page.value + 1 - props.rangeSize;
+  let rangeEnd =
+    totalPage.value <= minPaginationElems
+      ? totalPage.value
+      : page.value + 1 + props.rangeSize;
+  rangeEnd = rangeEnd > totalPage.value ? totalPage.value : rangeEnd;
+  rangeStart = rangeStart < 1 ? 1 : rangeStart;
+  if (totalPage.value > minPaginationElems) {
+    return getPaginationArrayWithEllipsis(
+      rangeStart,
+      rangeEnd,
+      minPaginationElems,
+    );
+  }
+  const res = [];
+  for (let i = rangeStart; i <= rangeEnd; i++) {
+    res.push(i);
+  }
+  return res;
+});
+const lastFirst = computed(() =>(totalPage.value - 1) * props.rowsPerPage);
+
+
+//Methods
+function getPaginationArrayWithEllipsis(
+  rangeStart: number,
+  rangeEnd: number,
+  minPaginationElems: number,
+) {
+  const res = [];
+  const isStartBoundaryReached = rangeStart - 1 < 3;
+  const isEndBoundaryReached = totalPage.value - rangeEnd < 3;
+  if (isStartBoundaryReached) {
+    rangeEnd = minPaginationElems - 2;
+    for (let i = 1; i < rangeStart; i++) {
+      res.push(i);
+    }
+  } else {
+    res.push(1);
+    res.push(null);
+  }
+  if (isEndBoundaryReached) {
+    rangeStart = totalPage.value - (minPaginationElems - 3);
+    for (let i = rangeStart; i <= totalPage.value; i++) {
+      res.push(i);
+    }
+  } else {
+    for (let i = rangeStart; i <= rangeEnd; i++) {
+      res.push(i);
+    }
+    res.push(null);
+    res.push(totalPage.value);
+  }
+  return res;
+}
+function changeFirst(newFirst: number) {
+  emit("update:first", newFirst);
+}
 </script>
 <style lang="scss">