Hotfixes

src/components/base/pagination/VBasicPagination.vue

@@ -1,43 +1,38 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
-interface IPageLinks {
-  url: string
-  label: string
-  active: boolean
+interface IPagination {
+  total: number
+  current_page: number
+  from: number
+  to: number
+  next_page_url: string
+  prev_page_url: string
+  links: any
 }
 
 interface IPaginationProps {
-  total: number
-  current: number
-  from: number | null
-  to: number | null
-  nextPageUrl: string | null
-  prevPageUrl: string | null
   isLoading: boolean
-  links: Array<IPageLinks>
+  pagination: IPagination
 }
 const props = withDefaults(defineProps<IPaginationProps>(), {
-  current: 0,
-  from: 0,
-  to: 0,
-  total: 0,
   isLoading: false,
 })
 const linksList = computed(() => {
-  if (props.links.length > 1) {
-    return props.links.slice(1, -1)
+  if (props.pagination.links.length > 1) {
+    return props.pagination.links.slice(1, -1)
   } else {
-    return props.links
+    return props.pagination.links
   }
 })
 const isLoadState = computed(() => props.isLoading)
-const emit = defineEmits(['next', 'prev', 'setLink'])
+const emit = defineEmits(['change', 'setLink'])
 </script>
 
 <template>
   <div class="dataTable-info">
-    Showing {{ props.from }} to {{ props.to }} of {{ props.total }} result
+    Showing {{ props.pagination.from }} to {{ props.pagination.to }} of
+    {{ props.pagination.total }} result
   </div>
   <nav
     class="flex-pagination pagination is-rounded"
@@ -47,9 +42,9 @@ const emit = defineEmits(['next', 'prev', 'setLink'])
   >
     <!-- Previous Btn -->
     <a
-      v-if="props.prevPageUrl"
+      v-if="props.pagination.prev_page_url"
       class="pagination-previous has-chevron"
-      @click="isLoadState === false ? emit('prev', -1) : false"
+      @click="isLoadState === false ? emit('change', -1) : false"
     >
       <i
         aria-hidden="true"
@@ -59,10 +54,10 @@ const emit = defineEmits(['next', 'prev', 'setLink'])
     </a>
     <!-- Next Btn -->
     <a
-      v-if="props.nextPageUrl"
+      v-if="props.pagination.next_page_url"
       :disable="isLoadState"
       class="pagination-next has-chevron"
-      @click="isLoadState === false ? emit('prev', 1) : false"
+      @click="isLoadState === false ? emit('change', 1) : false"
     >
       <i
         aria-hidden="true"
@@ -75,10 +70,12 @@ const emit = defineEmits(['next', 'prev', 'setLink'])
       <li v-for="page in linksList" :key="page.label">
         <a
           class="pagination-link"
-          :aria-current="current === +page.label ? 'page' : undefined"
-          :class="[current === +page.label && 'is-current']"
+          :aria-current="
+            pagination.current_page === +page.label ? 'page' : undefined
+          "
+          :class="[pagination.current_page === +page.label && 'is-current']"
           @click="
-            isLoadState === false && current !== +page.label
+            isLoadState === false && pagination.current_page !== +page.label
               ? emit('setLink', +page.label)
               : false
           "

src/components/pages/layouts/datatable/CategoryTable.vue

@@ -3,7 +3,7 @@ import 'simple-datatables/src/style.css'
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 import { debouncedWatch } from '@vueuse/shared'
 import CategoryActionDropdown from '/@src/components/partials/dropdowns/CategoryActionDropdown.vue'
 
@@ -24,7 +24,7 @@ interface ITableProps {
   data: IData[]
   searchType: Array<any>
   isLoading: boolean
-  resetChecked: boolean
+  resetChecked?: boolean
 }
 
 const props = withDefaults(defineProps<ITableProps>(), {
@@ -35,7 +35,14 @@ const props = withDefaults(defineProps<ITableProps>(), {
   resetChecked: false,
 })
 
-const emit = defineEmits(['search', 'rowCount', 'type', 'sort', 'remove'])
+const emit = defineEmits([
+  'search',
+  'rowCount',
+  'type',
+  'sort',
+  'remove',
+  'reload',
+])
 
 const sortException = [3, 1]
 const type = ref()
@@ -52,19 +59,25 @@ const onCheckAll = () => {
   }
 }
 
+const reset = () => {
+  checked.value.length = 0
+  checkAll.value = false
+}
+
 const isLoadState = computed(() => props.isLoading)
+const isReset = ref(() => {
+  return props.resetChecked
+})
 
-// watchEffect(() => {
-//   if (isLoadState.value === true) {
-//     checked.value.length = 0
-//     checkAll.value = false
-//   }
-// })
+watch(isReset.value, (current, prev) => {
+  reset()
+})
 
 debouncedWatch(
   search,
   () => {
     emit('search', search.value)
+    reset()
   },
   { debounce: 700 }
 )
@@ -210,7 +223,11 @@ onMounted(() => {
               <span class="light-text">{{ row.created_at }}</span>
             </td>
             <td>
-              <CategoryActionDropdown />
+              <CategoryActionDropdown
+                :action-id="row.id"
+                @click="reset()"
+                @remove="emit('remove', (checked = $event)), reset()"
+              />
             </td>
           </tr>
         </tbody>

src/components/partials/dropdowns/CategoryActionDropdown.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useCategory } from '/@src/composable/api/useCategory'
+
+interface IActionDropdown {
+  actionId: number
+}
+const api = useCategory()
+const props = withDefaults(defineProps<IActionDropdown>(), {
+  actionId: 0,
+})
+const emit = defineEmits(['remove'])
+const action = ref<Array<number>>([])
+const onRemove = async (e: number) => {
+  action.value.push(e)
+  emit('remove', action.value)
+}
+</script>
+
+<template>
+  <VDropdown icon="feather:more-vertical" right spaced>
+    <template #content>
+      <a href="#" role="menuitem" class="dropdown-item is-media">
+        <div class="icon">
+          <i aria-hidden="true" class="lnil lnil-cog"></i>
+        </div>
+        <div class="meta">
+          <span>Edit</span>
+          <span>Make Category changes</span>
+        </div>
+      </a>
+
+      <hr class="dropdown-divider" />
+
+      <a
+        href="#"
+        role="menuitem"
+        class="dropdown-item is-media"
+        @click="onRemove(props.actionId)"
+      >
+        <div class="icon">
+          <i aria-hidden="true" class="lnil lnil-trash-can-alt"></i>
+        </div>
+        <div class="meta">
+          <span>Remove</span>
+        </div>
+      </a>
+    </template>
+  </VDropdown>
+</template>

src/pages/app/product/category/list.vue

@@ -33,6 +33,7 @@ const rowCount = ref()
 const type = ref()
 const search = ref()
 const page = ref(1)
+const reset = ref(false)
 const onSearch = (e: any) => {
   search.value = e
   calltable()
@@ -44,6 +45,7 @@ const onChangePage = (e?: any) => {
   } else {
     e > 0 ? (page.value += 1) : (page.value -= 1)
   }
+  reset.value = !reset.value
   calltable()
 }
 
@@ -54,8 +56,8 @@ const onSort = (e?: any) => {
 }
 
 const onRemove = async (e: any) => {
-  console.log(e)
   await api.remove({ id: e })
+  page.value = 1
   calltable()
 }
 
@@ -70,7 +72,7 @@ const calltable = async () => {
   })
   const { body } = api.tableResponse.value
   table.data = body.data
-  pagination.value = body //Object.assign(pagination, body)
+  pagination.value = body //reactive() Object.assign(pagination, body)
 }
 
 watchEffect(async () => {
@@ -100,24 +102,17 @@ watchEffect(async () => {
       :data="table.data"
       :search-type="table.searchType"
       :is-loading="api.isLoading.value"
-      :reset-checked="false"
+      :reset-checked="reset"
       @remove="onRemove"
       @rowCount="rowCount = $event"
       @type="type = $event"
       @search="onSearch"
       @sort="onSort"
     >
       <VBasicPagination
-        :total="pagination.total"
-        :current="pagination.current_page"
-        :from="pagination.from"
-        :to="pagination.to"
-        :next-page-url="pagination.next_page_url"
-        :prev-page-url="pagination.prev_page_url"
         :is-loading="api.isLoading.value"
-        :links="pagination.links"
-        @next="onChangePage"
-        @prev="onChangePage"
+        :pagination="pagination"
+        @change="onChangePage"
         @set-link="onChangePage({ select: $event })"
       />
     </CategoryTable>