shared-ritm 1.2.57 → 1.2.58

package/src/common/app-table/components/TablePagination.vue

@@ -1,150 +1,150 @@
-<template>
-  <div class="table-pagination">
-    <button class="arrow-button" :disabled="modelValue <= 1" @click="prevPage">
-      <q-icon name="mdi-chevron-left" :color="modelValue <= 1 ? 'grey-4' : 'primary'" />
-    </button>
-
-    <div class="pages">
-      <button
-        v-for="page in pageArray"
-        :key="page"
-        class="page-button"
-        :class="{ selected: page === modelValue, ellipsis: page === '...' }"
-        :disabled="page === modelValue || page === '...'"
-        @click="changePage(page)"
-      >
-        {{ page }}
-      </button>
-    </div>
-
-    <button class="arrow-button" :disabled="modelValue >= totalPages" @click="nextPage">
-      <q-icon name="mdi-chevron-right" :color="modelValue >= totalPages ? 'grey-4' : 'primary'" />
-    </button>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-import { defineProps, defineEmits } from 'vue'
-
-const props = defineProps<{
-  modelValue: number
-  totalPages: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: number): void
-  (e: 'page-change', value: number): void
-}>()
-
-const currentPage = computed({
-  get: () => props.modelValue,
-  set: (val: number) => {
-    emit('update:modelValue', val)
-    emit('page-change', val)
-  },
-})
-
-const pageArray = computed(() => {
-  const maxPagesToShow = 5
-  let startPage = 1
-  let endPage = props.totalPages
-  const pages: (number | string)[] = []
-
-  if (props.totalPages <= maxPagesToShow) {
-    for (let i = 1; i <= props.totalPages; i++) pages.push(i)
-  } else {
-    if (props.modelValue <= 3) {
-      startPage = 1
-      endPage = maxPagesToShow - 1
-    } else if (props.modelValue + 2 >= props.totalPages) {
-      startPage = props.totalPages - (maxPagesToShow - 2)
-      endPage = props.totalPages
-    } else {
-      startPage = props.modelValue - 2
-      endPage = props.modelValue + 2
-    }
-
-    for (let i = startPage; i <= endPage; i++) pages.push(i)
-
-    if (startPage > 1) {
-      pages.unshift('...')
-      pages.unshift(1)
-    }
-    if (endPage < props.totalPages) {
-      pages.push('...')
-      pages.push(props.totalPages)
-    }
-  }
-
-  return pages
-})
-
-function changePage(page: number | string) {
-  if (typeof page === 'number' && page !== props.modelValue) {
-    currentPage.value = page
-  }
-}
-
-function prevPage() {
-  if (props.modelValue > 1) currentPage.value = props.modelValue - 1
-}
-
-function nextPage() {
-  if (props.modelValue < props.totalPages) currentPage.value = props.modelValue + 1
-}
-</script>
-
-<style scoped lang="scss">
-.pages {
-  display: flex;
-  gap: 20px;
-}
-.table-pagination {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  gap: 20px;
-  flex-wrap: wrap;
-  margin-top: 17px;
-  margin-bottom: 15px;
-  .arrow-button,
-  .page-button {
-    width: 34px;
-    height: 34px;
-    border-radius: 4px;
-    background: white;
-    border: none;
-    cursor: pointer;
-    font-weight: 500;
-    color: #3f8cff;
-    font-size: 16px;
-    transition: all 0.2s ease;
-  }
-
-  .page-button.selected {
-    background: #3f8cff;
-    color: white;
-    cursor: not-allowed;
-  }
-
-  .page-button.ellipsis {
-    cursor: default;
-    color: #aab2c8;
-    font-weight: 400;
-  }
-
-  .arrow-button:disabled {
-    cursor: not-allowed;
-    background: white;
-  }
-
-  @media (max-width: 768px) {
-    .arrow-button,
-    .page-button {
-      width: 32px;
-      height: 32px;
-      font-size: 14px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="table-pagination">
+    <button class="arrow-button" :disabled="modelValue <= 1" @click="prevPage">
+      <q-icon name="mdi-chevron-left" :color="modelValue <= 1 ? 'grey-4' : 'primary'" />
+    </button>
+
+    <div class="pages">
+      <button
+        v-for="page in pageArray"
+        :key="page"
+        class="page-button"
+        :class="{ selected: page === modelValue, ellipsis: page === '...' }"
+        :disabled="page === modelValue || page === '...'"
+        @click="changePage(page)"
+      >
+        {{ page }}
+      </button>
+    </div>
+
+    <button class="arrow-button" :disabled="modelValue >= totalPages" @click="nextPage">
+      <q-icon name="mdi-chevron-right" :color="modelValue >= totalPages ? 'grey-4' : 'primary'" />
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+
+const props = defineProps<{
+  modelValue: number
+  totalPages: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+  (e: 'page-change', value: number): void
+}>()
+
+const currentPage = computed({
+  get: () => props.modelValue,
+  set: (val: number) => {
+    emit('update:modelValue', val)
+    emit('page-change', val)
+  },
+})
+
+const pageArray = computed(() => {
+  const maxPagesToShow = 5
+  let startPage = 1
+  let endPage = props.totalPages
+  const pages: (number | string)[] = []
+
+  if (props.totalPages <= maxPagesToShow) {
+    for (let i = 1; i <= props.totalPages; i++) pages.push(i)
+  } else {
+    if (props.modelValue <= 3) {
+      startPage = 1
+      endPage = maxPagesToShow - 1
+    } else if (props.modelValue + 2 >= props.totalPages) {
+      startPage = props.totalPages - (maxPagesToShow - 2)
+      endPage = props.totalPages
+    } else {
+      startPage = props.modelValue - 2
+      endPage = props.modelValue + 2
+    }
+
+    for (let i = startPage; i <= endPage; i++) pages.push(i)
+
+    if (startPage > 1) {
+      pages.unshift('...')
+      pages.unshift(1)
+    }
+    if (endPage < props.totalPages) {
+      pages.push('...')
+      pages.push(props.totalPages)
+    }
+  }
+
+  return pages
+})
+
+function changePage(page: number | string) {
+  if (typeof page === 'number' && page !== props.modelValue) {
+    currentPage.value = page
+  }
+}
+
+function prevPage() {
+  if (props.modelValue > 1) currentPage.value = props.modelValue - 1
+}
+
+function nextPage() {
+  if (props.modelValue < props.totalPages) currentPage.value = props.modelValue + 1
+}
+</script>
+
+<style scoped lang="scss">
+.pages {
+  display: flex;
+  gap: 20px;
+}
+.table-pagination {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 17px;
+  margin-bottom: 15px;
+  .arrow-button,
+  .page-button {
+    width: 34px;
+    height: 34px;
+    border-radius: 4px;
+    background: white;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    color: #3f8cff;
+    font-size: 16px;
+    transition: all 0.2s ease;
+  }
+
+  .page-button.selected {
+    background: #3f8cff;
+    color: white;
+    cursor: not-allowed;
+  }
+
+  .page-button.ellipsis {
+    cursor: default;
+    color: #aab2c8;
+    font-weight: 400;
+  }
+
+  .arrow-button:disabled {
+    cursor: not-allowed;
+    background: white;
+  }
+
+  @media (max-width: 768px) {
+    .arrow-button,
+    .page-button {
+      width: 32px;
+      height: 32px;
+      font-size: 14px;
+    }
+  }
+}
+</style>

package/src/common/app-table/components/TableSearch.vue

@@ -1,76 +1,76 @@
-<template>
-  <q-input v-model="input" :placeholder="placeholder" dense outlined>
-    <template v-if="input" #append>
-      <q-icon name="✕" class="cursor-pointer" @click.stop="clearInput" />
-    </template>
-  </q-input>
-</template>
-
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, watch } from 'vue'
-
-const props = defineProps<{
-  modelValue: string
-  placeholder: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'search', value: string): void
-}>()
-
-const input = ref(props.modelValue)
-let debounceTimer: ReturnType<typeof setTimeout>
-const clearInput = () => {
-  input.value = ''
-  emit('search', '')
-}
-watch(
-  () => props.modelValue,
-  val => {
-    input.value = val
-  },
-)
-
-watch(input, val => {
-  emit('update:modelValue', val)
-  clearTimeout(debounceTimer)
-  debounceTimer = setTimeout(() => {
-    emit('search', val)
-  }, 400)
-})
-</script>
-
-<style scoped lang="scss">
-.q-field {
-  background: #fff;
-  border-radius: 4px;
-  outline: none;
-  border-color: #f2f7fb;
-
-  ::v-deep(.q-field__control) {
-    height: 52px;
-    display: flex;
-    align-items: center;
-  }
-
-  ::v-deep(.q-field__native) {
-    font-family: NunitoSansFont, sans-serif;
-    color: #1d425d;
-    padding-left: 8px;
-  }
-
-  ::v-deep(.q-field__native::placeholder) {
-    color: rgba(184, 184, 184, 0.87);
-  }
-
-  ::v-deep(.q-icon.cursor-pointer) {
-    color: #1d425d;
-    font-size: 20px;
-    line-height: 15px;
-  }
-  ::v-deep(.q-field__control:hover:before) {
-    border-color: #3f8cff;
-  }
-}
-</style>
+<template>
+  <q-input v-model="input" :placeholder="placeholder" dense outlined>
+    <template v-if="input" #append>
+      <q-icon name="✕" class="cursor-pointer" @click.stop="clearInput" />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'search', value: string): void
+}>()
+
+const input = ref(props.modelValue)
+let debounceTimer: ReturnType<typeof setTimeout>
+const clearInput = () => {
+  input.value = ''
+  emit('search', '')
+}
+watch(
+  () => props.modelValue,
+  val => {
+    input.value = val
+  },
+)
+
+watch(input, val => {
+  emit('update:modelValue', val)
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    emit('search', val)
+  }, 400)
+})
+</script>
+
+<style scoped lang="scss">
+.q-field {
+  background: #fff;
+  border-radius: 4px;
+  outline: none;
+  border-color: #f2f7fb;
+
+  ::v-deep(.q-field__control) {
+    height: 52px;
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep(.q-field__native) {
+    font-family: NunitoSansFont, sans-serif;
+    color: #1d425d;
+    padding-left: 8px;
+  }
+
+  ::v-deep(.q-field__native::placeholder) {
+    color: rgba(184, 184, 184, 0.87);
+  }
+
+  ::v-deep(.q-icon.cursor-pointer) {
+    color: #1d425d;
+    font-size: 20px;
+    line-height: 15px;
+  }
+  ::v-deep(.q-field__control:hover:before) {
+    border-color: #3f8cff;
+  }
+}
+</style>

package/src/common/app-table/controllers/useBaseTable.ts

@@ -1,42 +1,42 @@
-import { ref, watch, onMounted, Ref } from 'vue'
-
-export function useBaseTable(model: {
-  initialize: (params: { search: string; page: number }) => Promise<void>
-  loading: Ref<boolean>
-  columnFilters: Ref<Record<string, any>>
-}) {
-  const search = ref('')
-  const currentPage = ref(1)
-
-  const loadTable = async (searchVal = '', pageVal = 1) => {
-    await model.initialize({ search: searchVal, page: pageVal })
-  }
-
-  const handleSearch = async (val: string) => {
-    search.value = val
-    currentPage.value = 1
-    await loadTable(val, currentPage.value)
-  }
-
-  const handlePageChange = async (page: number) => {
-    currentPage.value = page
-    await loadTable(search.value, page)
-  }
-
-  watch(
-    () => model.columnFilters.value,
-    () => loadTable(search.value, currentPage.value),
-    { deep: true },
-  )
-
-  onMounted(() => loadTable(search.value, currentPage.value))
-
-  return {
-    search,
-    currentPage,
-    loading: model.loading,
-    handleSearch,
-    handlePageChange,
-    loadTable,
-  }
-}
+import { ref, watch, onMounted, Ref } from 'vue'
+
+export function useBaseTable(model: {
+  initialize: (params: { search: string; page: number }) => Promise<void>
+  loading: Ref<boolean>
+  columnFilters: Ref<Record<string, any>>
+}) {
+  const search = ref('')
+  const currentPage = ref(1)
+
+  const loadTable = async (searchVal = '', pageVal = 1) => {
+    await model.initialize({ search: searchVal, page: pageVal })
+  }
+
+  const handleSearch = async (val: string) => {
+    search.value = val
+    currentPage.value = 1
+    await loadTable(val, currentPage.value)
+  }
+
+  const handlePageChange = async (page: number) => {
+    currentPage.value = page
+    await loadTable(search.value, page)
+  }
+
+  watch(
+    () => model.columnFilters.value,
+    () => loadTable(search.value, currentPage.value),
+    { deep: true },
+  )
+
+  onMounted(() => loadTable(search.value, currentPage.value))
+
+  return {
+    search,
+    currentPage,
+    loading: model.loading,
+    handleSearch,
+    handlePageChange,
+    loadTable,
+  }
+}